/*== /styles/tokens.css ==*/
:root {
--lod-blue-dark: #1a2b4a;
--lod-blue-50: #E6F0FA;
--lod-blue-700: #0A4B8C;
--lod-accent: #f97316;
--loading-grad-start: #0f1b30;
--loading-grad-mid: #0f1b30;
--loading-grad-end: #0f1b30;
--status-warning-toast: #c27c00;
--brand-default: #2563eb;
--brand-hover: #1d4ed8;
--brand-pressed: #1e40af;
--brand-light: #dbeafe;
--brand-light-hover: #bfdbfe;
--brand-text-on: #ffffff;
--brand-primary: var(--brand-default);
--color-brand: var(--brand-default);
--color-brand-soft: var(--brand-light);
--color-brand-accent: var(--brand-hover);
--color-text: #242424;
--color-text-primary: var(--color-text);
--color-text-secondary: var(--lod-gray-800);
--color-text-tertiary: var(--lod-gray-700);
--color-text-muted: var(--lod-gray-600);
--color-text-disabled: var(--lod-gray-300);
--color-bg: #f5f5f5;
--color-bg-muted: #fafafa;
--color-surface: #ffffff;
--color-bg-surface: var(--color-surface);
--card-bg: var(--color-surface);
--color-surface-soft: var(--color-bg-muted);
--color-bg-subtle: #e8e8e8;
--color-bg-selected: #ebebeb;
--bg-secondary: var(--color-bg);
--color-border: #e0e0e0;
--color-border-hover: #c7c7c7;
--color-border-pressed: #b3b3b3;
--color-border-disabled: #e8e8e8;
--color-border-light: #f0f0f0;
--color-border-subtle: var(--color-border-light);
--color-border-strong: var(--color-border-pressed);
--color-bg-default: var(--color-bg);
--color-bg-hover: #f0f0f0;
--color-surface-hover: var(--color-bg-muted);
--color-focus: var(--brand-default);
--color-accent: var(--lod-turquoise);
--color-accent-bg: var(--lod-turquoise-100);
--color-accent-bg-soft: var(--lod-turquoise-50);
--color-danger-bg: var(--status-danger-bg);
--color-danger-fg: var(--status-danger-fg);
--color-danger-border: var(--status-danger-border);
--color-danger-strong: var(--status-danger-fg);
--color-warning-bg: var(--status-warning-bg);
--color-warning-fg: var(--status-warning-fg);
--color-warning-border: var(--status-warning-border);
--color-warning-strong: var(--status-warning-fg);
--color-warn-bg: var(--status-warning-bg);
--color-warn-text: var(--status-warning-fg);
--color-warn-border: var(--status-warning-border);
--color-success-strong: var(--status-success-fg);
--color-brand-bg-subtle: var(--brand-light);
--brand-bg-subtle: var(--brand-light);
--brand-soft: var(--brand-light);
--status-info-default: var(--status-info-fg);
--status-warning-default: var(--status-warning-fg);
--status-success-default: var(--status-success-fg);
--status-danger-default: var(--status-danger-fg);
--status-danger-bg: #fde7e9;
--status-danger-soft: #FDECEA;
--status-danger-fg: #c4314b;
--status-danger-border: #e8384f;
--status-warning-bg: #fff4ce;
--status-warning-fg: #835c00;
--status-warning-border: #f2c94c;
--status-success-bg: #dff6dd;
--status-success-fg: #107c10;
--status-success-border: #54b054;
--status-info-bg: #dbeafe;
--status-info-fg: #2563eb;
--status-info-border: #5b8def;
--status-danger-pressed: color-mix(in srgb, var(--status-danger-fg), #000 15%);
--status-review-bg: #e8d5f5;
--status-review-fg: #6b21a8;
--status-vorgeschlagen-bg: #ede9fe;
--status-vorgeschlagen-fg: #5b21b6;
--status-zurueckgestellt-bg: #fef3e2;
--status-zurueckgestellt-fg: #9a6700;
--status-keine-prio-bg: #f0f0f0;
--status-keine-prio-fg: #616161;
--status-aktiv: #107c10;
--status-ueberfaellig: #c4314b;
--font-sans: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-mono: 'Cascadia Code', 'Consolas', 'SF Mono', ui-monospace, monospace;
--font-size-xs: 10px;
--font-size-sm: 12px;
--font-size-base: 14px;
--font-size-body: var(--font-size-base);
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-h4: 22px;
--font-size-xl: 24px;
--font-size-xxl: 28px;
--fs-section: 16px;
--fs-card-title: 14px;
--fs-body: 13px;
--fs-meta: 12px;
--fs-badge: 11px;
--fs-xs: var(--font-size-xs);
--fs-sm: var(--font-size-sm);
--fs-md: var(--font-size-md);
--fs-lg: var(--font-size-lg);
--fs-caption: var(--font-size-xs);
--fw-regular: 400;
--fw-normal: var(--fw-regular);
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--lh-tight: 1.2;
--lh-base: 1.4;
--lh-normal: var(--lh-base);
--lh-comfortable: 1.5;
--lh-relaxed: 1.6;
--lh-loose: 1.65;
--ls-caps: 0.08em;
--space-px: 1px;
--space-xxs: 2px;
--space-xs: 4px;
--space-1: 4px;
--space-1-5: 6px;
--space-2: 8px;
--space-2-5: 10px;
--space-3: 12px;
--space-3-5: 14px;
--space-4: 16px;
--space-4-5: 18px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--touch-ziel: 38px;
--radius-xxs: 2px;
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-circular: 9999px;
--radius-pill: var(--radius-circular);
--radius-full: var(--radius-circular);
--radius-pill-sm: 10px;
--radius-counter: 11px;
--radius-grouped-count: 9px;
--btn-sm-pad-y: var(--space-1-5);
--btn-sm-pad-x: var(--space-3);
--btn-sm-fs: 12.5px;
--btn-sm-gap: 5px;
--btn-sm-radius: var(--radius-md);
--btn-sm-lh: var(--lh-comfortable);
--btn-sekundaer-fw: var(--fw-medium);
--btn-sekundaer-bg: var(--color-surface);
--btn-sekundaer-text: var(--lod-gray-700);
--btn-sekundaer-border: var(--lod-gray-200);
--btn-sekundaer-hover-bg: var(--lod-gray-50);
--btn-sekundaer-hover-text: var(--lod-darkblue);
--btn-sekundaer-hover-border: var(--lod-darkblue-300);
--surface-radius: var(--radius-lg);
--surface-radius-inner: var(--radius-md);
--surface-border-color: var(--color-border);
--surface-border: 1px solid var(--surface-border-color);
--surface-bg: var(--color-surface);
--surface-shadow: var(--shadow-2);
--surface-shadow-hover: var(--shadow-4);
--surface-accent-width: 3px;
--surface-accent: var(--brand-default);
--kpi-value-lg: 26px;
--kpi-value-md: 22px;
--kpi-value-sm: 18px;
--ds-chart-eingang: var(--lod-darkblue-900);
--ds-chart-erledigt: #4C8DAE;
--ds-chart-vorfall: #c1375c;
--ds-chart-loeschlauf: #7A9E7E;
--cs-hoehe: 32px;
--cs-radius: var(--radius-md);
--cs-rahmen: var(--color-border);
--cs-rahmen-hover: var(--color-border-hover);
--cs-rahmen-aktiv: var(--brand-default);
--cs-polster: 0 var(--space-10) 0 var(--space-3);
--cs-schrift: var(--font-size-base);
--cs-farbe: var(--color-text);
--shadow-2: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.06);
--shadow-4: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.06);
--shadow-8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.06);
--shadow-16: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.06);
--shadow-64: 0 32px 64px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.06);
--shadow-sm: var(--shadow-2);
--shadow-md: var(--shadow-8);
--shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.18);
--topbar-height: 56px;
--rail-w: 56px;
--rail-w-exp: 256px;
--page-header-module-width: 220px;
--page-subnav-height: 44px;
--card-grid-min: 300px;
--width-list-column: 300px;
--width-list-column-md: 240px;
--width-input-search-max: 360px;
--z-page-header: 999;
--z-drawer-backdrop: 240;
--z-drawer-stack: 249;
--z-drawer-panel: 250;
--z-drawer-modal: 320;
--z-modal-backdrop: 1395;
--z-modal-backdrop-strong: 1396;
--z-dev-banner: 899;
--z-sw-banner: 900;
--z-nav-rail: 1000;
--z-bm-overlay: 1100;
--z-bm-modal: 1101;
--z-vorlagen-vollbild: 1150;
--z-gs-backdrop: 1350;
--z-gs-panel: 1351;
--z-admin-preview: 1200;
--z-admin-preview-modal:1201;
--z-admin-test: 1300;
--z-admin-test-modal: 1301;
--z-toast: 1400;
--z-action-progress: 1450;
--z-error-overlay: 1500;
--z-bottom-sheet-backdrop: 1050;
--z-bottom-sheet: 1051;
--z-collab-cursor: 1390;
--z-popover: 9999;
--z-popover-elevated: 10000;
--z-tooltip: 10001;
--z-app-toolbar-base: 10010;
--z-app-toolbar-tier-1: 10050;
--z-app-toolbar-tier-2: 10051;
--z-app-toolbar-tier-9: 10060;
--z-app-toolbar-tier-10:10070;
--z-app-toolbar-tier-11:10071;
--z-mention-autocomplete: 10500;
--focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--brand-default);
--duration-instant: 80ms;
--duration-snap: 100ms;
--duration-quick: 120ms;
--duration-snappy: 140ms;
--duration-fast: 150ms;
--duration-balanced: 160ms;
--duration-medium: 180ms;
--duration-normal: 200ms;
--duration-flow: 220ms;
--duration-relaxed: 240ms;
--duration-spring: 260ms;
--duration-bounce: 280ms;
--duration-slow: 300ms;
--duration-shimmer: 1.4s;
--duration-spinner: 0.9s;
--duration-slower: 400ms;
--duration-slowest: 500ms;
--duration-pulse: 1.5s;
--duration-action-progress: 1.6s;
--duration-glow: 2s;
--ease-default: cubic-bezier(0.33, 0, 0.67, 1);
--ease-decelerate: cubic-bezier(0, 0, 0, 1);
--ease-enter: cubic-bezier(0.23, 1, 0.32, 1);
--ease-enter-strong: cubic-bezier(0.16, 1, 0.3, 1);
--ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--ease-move: cubic-bezier(0.77, 0, 0.175, 1);
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-overshoot: cubic-bezier(0.22, 1, 0.36, 1);
--ease-linear: linear;
--ease-soft: ease;
--ease-out-soft: ease-out;
--ease-inout-soft: ease-in-out;
--ease-in-soft: ease-in;
--motion-instant: 80ms;
--motion-fast: 140ms;
--motion-quick: 180ms;
--motion-exit: 180ms;
--motion-enter: 260ms;
--motion-overlay: 300ms;
--motion-drawer: 340ms;
--motion-stagger: 55ms;
--pze-approved-fg: #155724;
--pze-approved-bg: #d4edda;
--lod-darkblue: #1A4B76;
--lod-violet: #4D6493;
--lod-turquoise: #70B1B6;
--lod-darkblue-900: #0F2E48;
--lod-darkblue-800: #153A5C;
--lod-darkblue-700: #1A4B76;
--lod-darkblue-600: #2A5F8D;
--lod-darkblue-500: #3D77A6;
--lod-darkblue-400: #6A98BD;
--lod-darkblue-300: #9BBAD3;
--lod-darkblue-200: #CADCE8;
--lod-darkblue-100: #E6EEF5;
--lod-darkblue-50: #F3F7FB;
--lod-turquoise-900: #3C6669;
--lod-turquoise-700: #70B1B6;
--lod-turquoise-500: #8FC3C7;
--lod-turquoise-300: #BADCDE;
--lod-turquoise-100: #E4F1F2;
--lod-turquoise-50: #F1F7F8;
--lod-turquoise-cyan: #20C1C9;
--lod-amber-800: #8a5410;
--lod-amber-700: #b45309;
--lod-amber-600: #d97706;
--lod-amber-500: #f59e0b;
--lod-amber-200: #fcd49a;
--lod-amber-50: #fff4e0;
--lod-violet-900: #2E3E5C;
--lod-violet-700: #4D6493;
--lod-violet-500: #7B8DB3;
--lod-violet-300: #B0BCD2;
--lod-violet-100: #E2E7EF;
--lod-violet-50: #F0EDF5;
--lod-white: #FFFFFF;
--lod-gray-50: #F7F8FA;
--lod-gray-100: #EEF0F3;
--lod-gray-200: #DEE2E8;
--lod-gray-300: #C2C8D0;
--lod-gray-400: #A6ACB4;
--lod-gray-500: #8A9099;
--lod-gray-600: #6B7280;
--lod-gray-700: #555A63;
--lod-gray-800: #3A4A5C;
--lod-gray-900: #1F1F1F;
--lod-muted: var(--lod-gray-600);
--lod-bg-soft: var(--lod-gray-50);
--lod-border-light: #E5E7EB;
--lod-fg-1: var(--lod-gray-900);
--lod-border: var(--lod-gray-200);
--lod-success: #3F8F6F;
--lod-success-50: #E8F6EE;
--lod-success-700: #1F7A3F;
--lod-warning: #C98A1A;
--lod-warning-100: #FFF6E5;
--lod-warning-300: #E8B960;
--lod-warning-800: #7A5200;
--lod-danger: #B1483A;
--lod-danger-300: #F5C2C2;
--tone-info-soft: #E1EFFE;
--tone-info-text: #1E429F;
--tone-success-soft: #DEF7EC;
--tone-success-text: #03543F;
--tone-warn-soft: #FEF3C7;
--tone-warn-text: #92400E;
--tone-danger-soft: #FDE2E2;
--tone-danger-text: #9B1C1C;
--tag-support-bg: #FAEED5;
--tag-support-fg: #7A4F1C;
--tag-vertrieb-bg: #EEE6F4;
--tag-vertrieb-fg: #5A3A7A;
--mention-fg: #5c2d91;
--mention-bg: #f2ebfa;
--indigo-50: #e0e7ff;
--indigo-100: #c7d2fe;
--indigo-700: #3730a3;
--indigo-800: #312e81;
--purple-100: #ede9fe;
--purple-500: #8b5cf6;
--purple-700: #6b21a8;
--presence-available: #92c353;
--presence-busy: #c4314b;
--presence-away: #fcd116;
--slate-500: #64748b;
--slate-600: #475569;
--slate-700: #334155;
--slate-900: #1f2328;
--green-100: #dcfce7;
--green-600: #16a34a;
--green-700: #15803d;
--orange-600: #ea580c;
--orange-700: #c2410c;
--orange-100: #ffedd5;
--orange-50: #fff3e6;
--red-50: #fef2f2;
--red-100: #fde7e7;
--red-200: #fecaca;
--red-700: #b42318;
--red-800: #b91c1c;
--red-900: #8b1f1f;
--yellow-100: #fff3cd;
--yellow-200: #ffe69c;
--yellow-300: #FFF3B0;
--yellow-800: #664d03;
--yellow-900: #a15c00;
--indigo-25: #eef4ff;
--indigo-200: #c7d7ff;
--mention-bg-hover: #e4d4f5;
--mention-fg-deep: #3b1d5e;
--mention-fg-light: #c4b5fd;
--mention-fg-light-2: #ddd6fe;
--sla-warn: #f87171;
--ms-docs-purple: #7c3aed;
--brand-teams: #4049B9;
--brand-teams-meeting:#0e7a0d;
--action-teal: #0d7377;
--kat-blue-fg: var(--brand-default);
--kat-blue-bg: var(--brand-light);
--kat-purple-fg: var(--purple-500);
--kat-purple-bg: var(--purple-100);
--kat-green-fg: var(--green-600);
--kat-green-bg: var(--green-100);
--kat-yellow-fg: var(--lod-amber-600);
--kat-yellow-bg: var(--lod-warning-100);
--kat-orange-fg: var(--orange-600);
--kat-orange-bg: var(--orange-100);
--kat-gray-fg: var(--lod-gray-600);
--kat-gray-bg: #f3f4f6;
--pill-amber-bg: #FBF1D9;
--pill-amber-fg: #8C5F0C;
--rating-hot-bg: #FCE4EC;
--rating-hot-fg: #B71C2C;
--rating-warm-bg: #FFF3D9;
--rating-warm-fg: var(--pill-amber-fg);
--lod-font-display: "Barlow", "Acumin Pro Wide", "Segoe UI", system-ui, sans-serif;
--lod-font-body: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--lod-font-sans: var(--lod-font-body);
--lod-font-mono: "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace;
--lod-radius-lg: 12px;
--lod-shadow-lg: 0 14px 32px rgba(26, 75, 118, 0.14);
--lod-shadow-focus: 0 0 0 3px rgba(112, 177, 182, 0.35);
--lod-scrim-soft: color-mix(in srgb, var(--lod-darkblue-900) 18%, transparent);
--lod-scrim: color-mix(in srgb, var(--lod-darkblue-900) 24%, transparent);
--lod-scrim-strong: color-mix(in srgb, var(--lod-darkblue-900) 32%, transparent);
--lod-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/*== /styles/base.css ==*/
.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;
}
.truncate {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html, body, *, *::before, *::after {
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
overflow: hidden;
height: 100%;
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%;
overscroll-behavior: none;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
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;
}
input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.5;
cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
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;
}
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;
}
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 {
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;
}
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 {
font-family: var(--font-sans);
font-size: var(--font-size-base);
}
option:first-child { color: var(--color-text-tertiary); }
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;
}
textarea:focus-visible {
outline: none;
box-shadow: none;
}
.fk-dauer-sel:focus-visible,
.zeit-select:focus-visible,
.zeit-input:focus-visible,
.filter-dd:focus-visible {
outline: none;
box-shadow: none;
}
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); }
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); }
.hidden { display: none !important; }
[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, .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);
}
.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); }
.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); }
.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); }
.badge-umsatz { background: var(--status-success-bg); color: var(--status-success-fg); font-variant-numeric: tabular-nums; }
.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);
}
.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);
}
.btn-primary: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,
.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;
}
.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); }
.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); }
.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); }
.btn-secondary {
background: var(--btn-sekundaer-bg);
color: var(--btn-sekundaer-text);
border: 1px solid var(--btn-sekundaer-border);
font-weight: var(--btn-sekundaer-fw);
}
.btn-secondary:hover {
background: var(--btn-sekundaer-hover-bg);
border-color: var(--btn-sekundaer-hover-border);
color: var(--btn-sekundaer-hover-text);
box-shadow: 0 2px 8px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
transform: translateY(-1px);
}
.btn-secondary:active { transform: translateY(0); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--color-text-muted); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--bg-secondary); color: var(--lod-darkblue-900); }
.btn:disabled, .btn-secondary:disabled {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.btn-sm:focus-visible, .btn-secondary:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus);
}
.btn-sm {
padding: var(--btn-sm-pad-y) var(--btn-sm-pad-x);
font-size: var(--btn-sm-fs);
gap: var(--btn-sm-gap);
line-height: var(--btn-sm-lh);
border-radius: var(--btn-sm-radius);
}
.btn-sm .ui-ico { display: inline-flex; align-items: center; }
.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; } }
.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-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 {
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; }
.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);
}
.mt-section-nav {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-left: var(--space-2);
}
.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-section-nav .mt-nav-btn--reset {
width: auto;
min-width: 48px;
padding: 0 var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
color: var(--brand-default);
white-space: nowrap;
}
.mt-section-nav .mt-nav-btn--reset:hover { color: var(--brand-default); }
.mt-nav-btn.hidden { display: none; }
.mt-section-nav .mt-nav-btn--reset.is-unsichtbar { visibility: hidden; }
.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;
}
@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: var(--touch-ziel); min-width: var(--touch-ziel); }
}
@media (max-width: 599px) {
.ro-fields-grid { grid-template-columns: 1fr; gap: var(--space-1-5); }
.neue-aufgabe-row--3col { grid-template-columns: 1fr; }
.bm-modal-body,
.bm-modal,
.tab-form-wrap,
.board-side-panel { overflow-x: hidden; overscroll-behavior: contain; }
.bm-modal { overscroll-behavior: contain; }
.tab-content,
.mt-list,
.tab-karten-liste,
.anfragen-list,
.notif-dropdown-body,
.profile-dropdown,
.notif-dropdown { overscroll-behavior: contain; }
input, select, textarea { max-width: 100%; box-sizing: border-box; font-size: 16px !important; }
.cs-trigger { font-size: 16px !important; }
.aufgabe-detail-field label,
.bm-field-label,
.field-lbl,
.zeit-label,
.fk-zeit-label,
.na-label { font-size: var(--font-size-base); }
.fk-buchen,
.btn, .btn-primary, .btn-secondary,
.fk-buchen--cancel,
.fk-buchen--danger { font-size: var(--font-size-base); }
.quick-btn, .fk-qbtn, .chip-btn { font-size: var(--font-size-base); }
.zeit-select-inline { max-width: calc(100% - 40px); }
.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-viewer { padding-top: env(safe-area-inset-top, 0px); }
.lightbox-toolbar { padding-top: max(env(safe-area-inset-top, 0px), var(--space-2)); }
.aufgabe-detail-field { margin-bottom: var(--space-3) !important; }
.bm-field { margin-bottom: var(--space-3) !important; }
.aufgabe-detail-fields > .aufgabe-detail-field { margin-bottom: 0 !important; }
.bm-fields-grid > .bm-field { margin-bottom: 0 !important; }
.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); }
.aufgabe-detail-fields,
.bm-fields-grid { margin-bottom: var(--space-3); }
.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; }
.tab-form-wrap .aufgabe-detail-field { margin-bottom: var(--space-2); }
.tab-form-wrap .aufgabe-detail-fields { gap: var(--space-2); }
.aufgabe-detail .aufgabe-detail-field { margin-bottom: var(--space-2); }
.aufgabe-detail .aufgabe-detail-fields { gap: var(--space-2); }
.aufgabe-detail-footer {
position: sticky;
bottom: 0;
background: var(--color-surface);
padding: calc(var(--space-2) + var(--space-2)) 0 var(--space-2);
padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--color-border);
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;
}
.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;
}
.bm-modal-footer > button,
.bm-modal-footer > .fk-buchen { width: 100%; justify-content: center; }
.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);
}
.filter-chip,
.filter-btn,
.filter-btn-typ {
min-height: var(--touch-ziel);
font-size: var(--font-size-sm);
padding: var(--space-1) var(--space-2);
flex-shrink: 0;
}
.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; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@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);
}
@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);
}
@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);
}
.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);
}
.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);
}
@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-ring,
.loading-dots span,
.loading-progress-bar {
animation-duration: 1s !important;
transition-duration: var(--duration-normal) !important;
}
}
.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);
}
.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);
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);
}
.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 {
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 {
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);
}
.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);
}
#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;
}
.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%); }
}
/*== /styles/app-scope.css ==*/
.app-scope,
.app-scope *,
.app-scope *::before,
.app-scope *::after {
box-sizing: border-box;
}
.app-scope {
color: var(--lod-gray-900);
font-family: var(--lod-font-body);
font-size: var(--font-size-md);
line-height: var(--lh-comfortable);
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.app-scope--overlay { display: contents; }
.app-scope button,
.app-scope input,
.app-scope select,
.app-scope textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
}
.app-scope button { cursor: pointer; border: none; background: none; padding: 0; }
.app-scope a { color: inherit; text-decoration: none; }
.tab-content:has(> .app-scope) {
padding: 0 !important;
overflow: hidden !important;
}
/*== /styles/primitives/button.css ==*/
.app-scope .btn {
display: inline-flex; align-items: center; gap: var(--space-1-5);
padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-md);
font-size: 13px; font-weight: var(--fw-semibold);
transition-property: background, border-color, color, box-shadow, transform, filter, opacity;
transition-duration: var(--motion-fast);
transition-timing-function: var(--ease-enter);
white-space: nowrap;
}
.app-scope .btn-sm {
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-sm);
gap: var(--space-1-5);
line-height: 1;
}
@media (max-width: 999px) {
.btn { min-height: var(--touch-ziel); min-width: var(--touch-ziel); }
}
.app-scope .btn-primary { background: var(--lod-darkblue); color: #fff; border: 1px solid transparent; }
.app-scope .btn-primary:hover { background: var(--lod-turquoise); color: var(--lod-darkblue-900); }
.app-scope .btn-outline { background: var(--color-surface); color: var(--lod-gray-700); border: 1px solid var(--lod-gray-200); }
.app-scope .btn-outline:hover { border-color: var(--lod-darkblue-300); color: var(--lod-darkblue); }
.app-scope .btn-ghost {
background: transparent; color: var(--color-text-muted);
border: 1px solid transparent;
}
.app-scope .btn-ghost:hover { background: var(--bg-secondary); color: var(--lod-darkblue-900); }
.app-scope .btn-ghost:hover .ui-ico img, .app-scope .btn-ghost:hover > img { filter: none; opacity: 1; }
.app-scope .btn-ghost .ui-ico img, .app-scope .btn-ghost > img { filter: none; opacity: .65; }
.app-scope .btn-secondary { background: var(--btn-sekundaer-bg); color: var(--btn-sekundaer-text); border: 1px solid var(--btn-sekundaer-border); font-weight: var(--btn-sekundaer-fw); }
.app-scope .btn-secondary:hover { background: var(--btn-sekundaer-hover-bg); border-color: var(--btn-sekundaer-hover-border); color: var(--btn-sekundaer-hover-text); }
.app-scope .btn-danger { background: var(--lod-danger); color: #fff; border: 1px solid transparent; }
.app-scope .btn-danger:hover { filter: brightness(0.95); }
.app-scope .btn-primary .ui-ico img,
.app-scope .btn-danger .ui-ico img { filter: brightness(0) invert(1); }
.app-scope .btn-primary:hover .ui-ico img { filter: none; }
.app-scope .btn:active { transform: scale(0.96); }
@media (max-width: 999px) {
.app-scope .btn-primary-sm,
.app-scope .btn-outline-sm,
.app-scope .btn-danger-sm { min-height: var(--touch-ziel); }
}
.app-scope .btn-primary-sm {
display: inline-flex; align-items: center; gap: var(--btn-sm-gap);
padding: var(--btn-sm-pad-y) var(--btn-sm-pad-x);
font-size: var(--btn-sm-fs); font-weight: var(--fw-semibold);
background: var(--lod-darkblue);
color: #fff;
border: 1px solid transparent;
border-radius: var(--btn-sm-radius);
transition-property: background, border-color, color, box-shadow, transform, filter, opacity;
transition-duration: var(--duration-quick);
white-space: nowrap;
}
.app-scope .btn-primary-sm:disabled,
.app-scope .btn-outline-sm:disabled,
.app-scope .btn-danger-sm:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
transform: none;
}
.app-scope .btn:disabled {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.app-scope .btn:disabled:hover { background: inherit; }
.app-scope .btn-primary:disabled:hover { background: var(--lod-darkblue); color: #fff; }
.app-scope .btn-danger:disabled:hover { filter: none; }
.app-scope .btn-ghost:disabled:hover { background: transparent; color: var(--color-text-muted); }
.app-scope .btn-outline:disabled:hover { border-color: var(--lod-gray-200); color: var(--lod-gray-700); }
.app-scope .btn-primary-sm:hover {
background: var(--lod-turquoise);
color: var(--lod-darkblue-900);
box-shadow: 0 2px 8px color-mix(in srgb, var(--lod-darkblue-900) 15%, transparent);
transform: translateY(-1px);
}
.app-scope .btn-primary-sm:hover > .btn-icon,
.app-scope .btn-primary-sm:hover > img {
filter: none;
}
.app-scope .btn-primary-sm:active {
transform: translateY(0);
box-shadow: 0 1px 3px color-mix(in srgb, var(--lod-darkblue-900) 20%, transparent);
}
.app-scope .btn-primary-sm > .btn-icon,
.app-scope .btn-primary-sm > img {
filter: brightness(0) invert(1);
margin-right: var(--space-1-5);
vertical-align: middle;
}
.app-scope .btn-outline-sm > .btn-icon,
.app-scope .btn-outline-sm > img,
.app-scope .btn-danger-sm > .btn-icon,
.app-scope .btn-danger-sm > img {
margin-right: var(--space-1-5);
vertical-align: middle;
}
.app-scope .btn-danger-sm > .btn-icon,
.app-scope .btn-danger-sm > img { filter: brightness(0) invert(1); }
.app-scope .btn-outline-sm {
display: inline-flex; align-items: center; gap: var(--btn-sm-gap);
padding: var(--btn-sm-pad-y) var(--btn-sm-pad-x);
font-size: var(--btn-sm-fs); font-weight: var(--btn-sekundaer-fw);
background: var(--btn-sekundaer-bg);
color: var(--btn-sekundaer-text);
border: 1px solid var(--btn-sekundaer-border);
border-radius: var(--btn-sm-radius);
transition-property: background, border-color, color, box-shadow, transform, filter, opacity;
transition-duration: var(--duration-quick);
white-space: nowrap;
}
.app-scope .btn-outline-sm:hover {
border-color: var(--btn-sekundaer-hover-border);
color: var(--btn-sekundaer-hover-text);
background: var(--btn-sekundaer-hover-bg);
box-shadow: 0 2px 8px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
transform: translateY(-1px);
}
.app-scope .btn-outline-sm:active {
transform: translateY(0);
box-shadow: none;
}
.app-scope .btn-danger-sm {
display: inline-flex; align-items: center; gap: var(--btn-sm-gap);
padding: var(--btn-sm-pad-y) var(--btn-sm-pad-x);
font-size: var(--btn-sm-fs); font-weight: var(--fw-semibold);
background: var(--lod-danger);
color: #fff;
border: 1px solid transparent;
border-radius: var(--btn-sm-radius);
transition-property: background, border-color, color, box-shadow, transform, filter, opacity;
transition-duration: var(--duration-quick);
white-space: nowrap;
}
.app-scope .btn-danger-sm:hover { filter: brightness(0.95); }
.app-scope .btn-primary-sm:focus-visible,
.app-scope .btn-outline-sm:focus-visible,
.app-scope .btn-danger-sm:focus-visible,
.app-scope .btn-primary:focus-visible,
.app-scope .btn-outline:focus-visible,
.app-scope .btn-ghost:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus);
}
.app-scope button.app-cta-btn:not(.btn) {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5);
height: 36px; padding: 0 var(--space-3-5); box-sizing: border-box;
border: none; border-radius: var(--radius-lg);
background: var(--lod-darkblue); color: var(--lod-white);
font-size: var(--fs-body); font-weight: var(--fw-semibold);
cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.app-scope button.app-cta-btn:not(.btn) img { filter: brightness(0) invert(1); }
.app-scope button.app-cta-btn:not(.btn):hover { background: var(--lod-turquoise); color: var(--lod-darkblue-900); }
.app-scope button.app-cta-btn:not(.btn):hover img { filter: none; }
.app-scope button.app-cta-btn:not(.btn):focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.app-scope button.app-cta-btn:not(.btn):disabled,
.app-scope button.app-cta-btn.is-busy:not(.btn) { opacity: .55; cursor: default; pointer-events: none; }
.app-scope button.app-cta-btn.btn-outline:not(.btn) {
background: var(--card-bg, #fff); color: var(--lod-darkblue-900);
border: 1px solid var(--color-border);
}
.app-scope button.app-cta-btn.btn-outline:not(.btn) img { filter: none; }
.app-scope button.app-cta-btn.btn-outline:not(.btn):hover {
background: var(--bg-secondary); border-color: var(--color-border-hover);
color: var(--lod-darkblue-900);
}
.app-scope button.app-cta-btn.btn-ghost:not(.btn) {
background: transparent; color: var(--color-text-muted); border: none;
}
.app-scope button.app-cta-btn.btn-ghost:not(.btn) img { filter: none; opacity: .65; }
.app-scope button.app-cta-btn.btn-ghost:not(.btn):hover { background: var(--bg-secondary); color: var(--lod-darkblue-900); }
.app-scope button.app-cta-btn.btn-ghost:not(.btn):hover img { opacity: 1; filter: none; }
.app-scope button.app-cta-btn.btn-sm:not(.btn) { height: 32px; padding: 0 var(--space-3); font-size: var(--fs-meta); }
.app-scope button.app-cta-btn.btn-xs:not(.btn) { height: 28px; padding: 0 var(--space-2-5); font-size: var(--fs-caption); }
.app-scope button.app-cta-btn.btn-icononly:not(.btn) { width: 36px; padding: 0; }
.app-scope button.app-cta-btn.btn-sm.btn-icononly:not(.btn) { width: 32px; }
.app-scope button.app-cta-btn.btn-xs.btn-icononly:not(.btn) { width: 28px; }
@media (max-width: 999px) {
.app-scope button.app-cta-btn:not(.btn),
.app-scope button.app-cta-btn.btn-sm:not(.btn),
.app-scope button.app-cta-btn.btn-xs:not(.btn) { height: var(--touch-ziel); }
.app-scope button.app-cta-btn.btn-icononly:not(.btn),
.app-scope button.app-cta-btn.btn-sm.btn-icononly:not(.btn),
.app-scope button.app-cta-btn.btn-xs.btn-icononly:not(.btn) { width: var(--touch-ziel); }
}
/*== /styles/primitives/pill.css ==*/
.app-scope .pill {
display: inline-flex; align-items: center; gap: var(--space-1);
font-size: 10.5px; font-weight: 600;
padding: var(--space-xxs) var(--space-2); border-radius: var(--radius-circular); line-height: 1.4;
white-space: nowrap;
}
.app-scope .pill-tag {
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
padding: var(--space-px) var(--space-1-5); border-radius: var(--radius-xs);
color: var(--lod-darkblue); background: var(--lod-darkblue-50);
white-space: nowrap;
}
.app-scope .pill-tag.proj-vertrieb { color: var(--tag-vertrieb-fg); background: var(--tag-vertrieb-bg); }
.app-scope .pill-tag.proj-projekt { color: var(--lod-darkblue); background: var(--lod-darkblue-100); }
.app-scope .pill-tag.proj-support { color: var(--tag-support-fg); background: var(--tag-support-bg); }
.app-scope .pill-tag.proj-intern { color: var(--lod-gray-700); background: var(--lod-gray-100); }
.app-scope .pill-tag.proj-digicheck { color: var(--lod-turquoise-900); background: var(--lod-turquoise-50); }
.app-scope .pill-tag.pill-tag-kategorie { color: var(--lod-violet); background: var(--lod-violet-50); }
.app-scope .pill-tag.pill-tag--success { color: var(--lod-turquoise-900); background: var(--lod-turquoise-100); }
.app-scope .pill-tag.pill-tag--danger { color: var(--lod-danger); background: var(--status-danger-bg); }
.app-scope .pill-tag.pill-tag--warn { color: var(--lod-amber-700); background: var(--lod-amber-50); }
.vk-herkunft-host { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.app-scope button.vk-herkunft-chip { background: var(--lod-gray-100); color: var(--lod-gray-700); }
.vk-herkunft-chip { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.vk-herkunft-chip.is-clickable { cursor: pointer; }
.vk-herkunft-chip.is-clickable:hover { border-color: var(--lod-darkblue-300); }
.vk-herkunft-chip { max-width: 100%; min-width: 0; }
.vk-herkunft-txt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
@media (max-width: 999px) {
.vk-herkunft-chip.is-clickable { min-height: var(--touch-ziel); }
}
/*== /styles/primitives/status.css ==*/
.app-scope .status-assigned { background: var(--lod-turquoise-100); color: var(--lod-turquoise-900); }
.app-scope .status-unassigned { background: var(--status-danger-soft); color: var(--lod-danger); }
.app-scope .status-inprogress { background: var(--lod-darkblue-100); color: var(--lod-darkblue); }
.app-scope .status-deferred { background: var(--lod-gray-100); color: var(--lod-gray-700); }
.app-scope .status-review { background: var(--pill-amber-bg); color: var(--pill-amber-fg); }
.app-scope .status-noprio { background: var(--lod-violet-50); color: var(--lod-violet); }
.app-scope .status-approved { background: var(--lod-success-50); color: var(--lod-success-700); }
.app-scope .status-rejected { background: var(--status-danger-soft); color: var(--lod-danger); }
.app-scope .status-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.app-scope .status-warn { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.app-scope .status-overdue { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.app-scope .status-info { background: var(--status-info-bg); color: var(--status-info-fg); }
.app-scope .status-muted { background: var(--lod-gray-100); color: var(--lod-gray-700); }
.app-scope .status-default { background: var(--lod-darkblue-50); color: var(--lod-darkblue-700); }
.app-scope .rating-hot { background: var(--rating-hot-bg); color: var(--rating-hot-fg); }
.app-scope .rating-warm { background: var(--rating-warm-bg); color: var(--rating-warm-fg); }
.app-scope .rating-cold { background: var(--lod-blue-50); color: var(--lod-blue-700); }
/*== /styles/primitives/panel.css ==*/
.lod-surface {
background: var(--surface-bg);
border: var(--surface-border);
border-radius: var(--surface-radius);
box-sizing: border-box;
}
.lod-surface--raised { box-shadow: var(--surface-shadow); }
.lod-surface--hoverable { transition: box-shadow var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft); }
.lod-surface--hoverable:hover { box-shadow: var(--surface-shadow-hover); border-color: var(--color-border-hover); }
.lod-surface--accent { border-left: var(--surface-accent-width) solid var(--surface-accent); }
.app-scope .panel {
background: var(--surface-bg);
border: var(--surface-border);
border-radius: var(--surface-radius);
display: flex;
flex-direction: column;
overflow: hidden;
}
.app-klapp {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows var(--duration-flow) var(--ease-standard),
margin-block var(--duration-flow) var(--ease-standard),
opacity var(--duration-flow) var(--ease-standard);
}
.app-klapp > :first-child {
overflow: hidden; min-height: 0;
transition: padding-block var(--duration-flow) var(--ease-standard);
}
.app-klapp.is-zu {
grid-template-rows: 0fr;
margin-block: 0;
opacity: 0;
visibility: hidden;
transition: grid-template-rows var(--duration-flow) var(--ease-standard),
margin-block var(--duration-flow) var(--ease-standard),
opacity var(--duration-flow) var(--ease-standard),
visibility 0s var(--ease-linear) var(--duration-flow);
}
.app-klapp.is-zu > :first-child { padding-block: 0; }
.app-scope .muted { color: var(--lod-gray-500); }
/*== /styles/primitives/input.css ==*/
.app-scope .input,
.app-scope .select,
.app-scope .textarea {
width: 100%;
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
padding: 7px var(--space-2-5);
font-size: 13px;
background: #fff;
color: var(--lod-gray-900);
outline: none;
transition: border-color var(--duration-quick), box-shadow var(--duration-quick);
font-family: inherit;
}
@media (max-width: 999px) {
.input,
.select { min-height: var(--touch-ziel); }
}
.app-scope .input:focus,
.app-scope .select:focus,
.app-scope .textarea:focus {
border-color: var(--lod-turquoise);
box-shadow: var(--lod-shadow-focus);
}
.app-scope .input[aria-invalid="true"],
.app-scope .select[aria-invalid="true"],
.app-scope .textarea[aria-invalid="true"] {
border-color: var(--lod-danger);
}
.app-scope .input::placeholder,
.app-scope .textarea::placeholder { color: var(--lod-gray-500); }
.app-scope .textarea { resize: vertical; min-height: 64px; }
.app-scope .select {
appearance: none;
padding-right: 26px;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 8px center;
}
/*== /styles/primitives/switch.css ==*/
.app-switch {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 44px;
min-height: var(--touch-ziel);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.app-switch input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
}
.app-switch-track {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
border-radius: var(--radius-circular);
background: var(--lod-gray-300);
border: 1px solid transparent;
transition: background var(--duration-fast) var(--ease-inout-soft);
}
.app-switch-track::after {
content: '';
position: absolute;
top: 50%;
left: 2px;
width: 16px;
height: 16px;
border-radius: var(--radius-circular);
background: var(--color-surface);
box-shadow: var(--shadow-2);
transform: translateY(-50%);
transition: transform var(--duration-fast) var(--ease-inout-soft);
}
.app-switch input:checked + .app-switch-track {
background: var(--brand-default);
}
.app-switch input:checked + .app-switch-track::after {
transform: translate(18px, -50%);
}
.app-switch:hover .app-switch-track {
background: var(--lod-gray-400);
}
.app-switch:hover input:checked + .app-switch-track {
background: var(--brand-hover, var(--brand-default));
}
.app-switch input:focus-visible + .app-switch-track {
outline: 2px solid var(--brand-default);
outline-offset: 2px;
}
.app-switch input:disabled + .app-switch-track {
opacity: 0.45;
cursor: not-allowed;
}
.app-switch:has(input:disabled) { cursor: not-allowed; }
.app-switch--ruhig input:checked + .app-switch-track {
background: var(--lod-gray-500);
}
.app-switch--ruhig:hover input:checked + .app-switch-track {
background: var(--lod-gray-600);
}
@media (prefers-reduced-motion: reduce) {
.app-switch-track,
.app-switch-track::after { transition: none; }
}
/*== /styles/primitives/segmented.css ==*/
.seg-track {
display: inline-flex;
align-items: center;
gap: var(--space-xxs);
height: 36px;
padding: 3px;
box-sizing: border-box;
border-radius: var(--radius-lg);
background: var(--lod-gray-50);
border: 1px solid var(--lod-gray-100);
flex-shrink: 0;
}
.seg-track .seg-item {
display: inline-flex;
align-items: center;
gap: 7px;
height: 28px;
padding: 0 var(--space-3-5);
border: none;
background: transparent;
color: var(--lod-gray-700);
font-size: 13px;
font-weight: var(--fw-medium);
border-radius: var(--radius-md);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: background-color var(--duration-snappy) var(--ease-enter),
color var(--duration-snappy) var(--ease-enter),
box-shadow var(--duration-snappy) var(--ease-enter),
filter var(--duration-snappy) var(--ease-enter),
transform var(--duration-snappy) var(--ease-enter);
}
@media (max-width: 999px) {
.seg-track { height: 44px; }
.seg-track .seg-item { height: var(--touch-ziel); }
}
.seg-track .seg-item img {
opacity: 0.55;
transition: opacity var(--duration-snappy), filter var(--duration-snappy);
flex-shrink: 0;
}
.seg-track .seg-item:not(.is-active):hover {
color: var(--lod-darkblue);
background: #fff;
box-shadow: 0 1px 3px rgba(15, 46, 72, 0.14);
}
.seg-track .seg-item:hover img { opacity: 0.8; }
.seg-track .seg-item.is-active:hover { filter: brightness(1.12); }
.seg-track .seg-item:focus-visible,
.seg-track .seg-item.is-active:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus);
}
.seg-track .seg-item.is-active {
background: var(--lod-darkblue);
color: #fff;
font-weight: var(--fw-semibold);
box-shadow: 0 1px 2px rgba(15, 46, 72, 0.18);
}
.seg-track .seg-item.is-active img {
opacity: 1;
filter: brightness(0) invert(1);
}
/*== /styles/primitives/entity-link.css ==*/
.app-entity-link {
text-decoration: none;
color: inherit;
}
.app-entity-link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.app-entity-link:focus-visible { outline: none; }
.app-entity-link:focus-visible::after {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
border-radius: var(--surface-radius);
}
tr .app-entity-link::after { content: none; }
tr .app-entity-link:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/*== /styles/layout.css ==*/
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
z-index: var(--z-popover-elevated);
padding: var(--space-2) var(--space-4);
background: var(--brand-default);
color: var(--brand-text-on);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
border-radius: 0 0 var(--radius-md) var(--radius-md);
text-decoration: none;
}
.skip-link:focus { top: 0; }
.app-shell {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
overflow: hidden;
background: var(--color-bg);
}
.app-frame {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
min-height: 0;
overflow: hidden;
}
#main-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; position: relative; }
body {
padding-top: env(safe-area-inset-top, 0px);
background-color: var(--lod-blue-dark);
}
.nav-rail {
flex-shrink: 0;
background: var(--lod-blue-dark);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-2) 0;
gap: var(--space-1);
min-height: 0;
overflow-y: auto;
overflow-x: visible;
scrollbar-width: none;
z-index: var(--z-nav-rail);
}
.nav-rail::-webkit-scrollbar { display: none; }
.nav-rail-logo {
flex-shrink: 0;
width: 40px;
height: 40px;
background: #fff;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-3);
text-decoration: none;
transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.nav-rail-logo:hover { transform: scale(1.04); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); }
.nav-rail-logo:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.nav-rail-logo-img { width: 28px; height: 28px; object-fit: contain; }
.nav-rail-items {
display: flex;
flex-direction: column;
gap: var(--space-1);
width: 100%;
align-items: stretch;
}
.nav-rail-spacer { flex: 1; min-height: var(--space-3); }
.nav-rail-items--system { padding-bottom: env(safe-area-inset-bottom, 0px); }
.nav-rail-item {
position: relative;
width: auto;
height: 40px;
border: none;
background: none;
border-radius: var(--radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-3);
margin: 0 var(--space-2);
padding: 0 var(--space-2-5);
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-rail-item > .ui-ico { flex-shrink: 0; display: inline-flex; }
.nav-rail-item > .ui-ico img {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
opacity: 0.75;
transition: opacity var(--duration-fast);
}
.nav-rail-item:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.nav-rail-item:hover > .ui-ico img { opacity: 1; }
.nav-rail-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.nav-rail-item.active {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.nav-rail-item.active > .ui-ico img { opacity: 1; }
.nav-rail-item.active::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 22px;
background: var(--brand-default);
border-radius: 0 var(--radius-xxs) var(--radius-xxs) 0;
}
.nav-rail {
width: var(--rail-w, 56px);
transition: width var(--duration-spring) var(--ease-decelerate);
}
.nav-rail.is-expanded { width: var(--rail-w-exp, 256px); align-items: stretch; overflow-x: hidden; }
.nav-rail.is-expanded .nav-rail-items { align-items: stretch; }
.nav-rail-head {
display: flex; flex-direction: column; align-items: flex-start;
gap: var(--space-1); width: 100%; flex-shrink: 0; margin-bottom: var(--space-2);
padding: 0 var(--space-2);
}
.nav-rail-head .nav-rail-logo { margin-bottom: 0; }
.nav-rail.is-expanded .nav-rail-head {
flex-direction: row; align-items: center; gap: var(--space-2);
padding: 0 var(--space-2);
}
.nav-rail-wordmark {
flex: 1; min-width: 0; color: #fff; font-weight: 700; font-size: 15px;
letter-spacing: -0.01em; white-space: nowrap; overflow: hidden;
opacity: 0; transform: translateX(-6px);
transition: opacity var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft);
}
.nav-rail:not(.is-expanded) .nav-rail-wordmark { display: none; }
.nav-rail.is-expanded .nav-rail-wordmark {
opacity: 1; transform: translateX(0);
transition: opacity var(--duration-normal) var(--ease-soft) 90ms,
transform var(--duration-spring) var(--ease-decelerate) 60ms;
}
.nav-rail-toggle {
width: 40px; height: 40px; flex-shrink: 0; border: none; background: none;
border-radius: var(--radius-md); cursor: pointer; padding: 0;
color: rgba(255, 255, 255, 0.7); display: inline-flex;
align-items: center; justify-content: center;
transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-rail.is-expanded .nav-rail-toggle { margin-left: auto; }
.nav-rail-toggle:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.nav-rail-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.nav-rail-toggle > .ui-ico img { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: 0.8; }
.nav-rail-toggle:hover > .ui-ico img { opacity: 1; }
.nav-rail-group { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; align-items: stretch; }
.nav-rail-group-items { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; align-items: stretch; }
.nav-rail:not(.is-expanded) .nav-rail-group + .nav-rail-group {
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin-top: var(--space-1); padding-top: var(--space-2);
}
.nav-rail-group-head {
box-sizing: border-box; height: 0; opacity: 0; overflow: hidden;
margin: 0 var(--space-2); padding: 0 var(--space-3);
display: flex; align-items: flex-end;
font-size: 11px; font-weight: 700; letter-spacing: var(--ls-caps, 0.08em);
text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
transition: height var(--duration-medium) var(--ease-decelerate),
margin-top var(--duration-medium) var(--ease-decelerate),
padding-bottom var(--duration-medium) var(--ease-decelerate),
opacity var(--duration-fast) ease;
}
.nav-rail.is-expanded .nav-rail-group-head {
height: 30px; opacity: 1; margin-top: var(--space-2); padding-bottom: 6px;
transition: height var(--duration-spring) var(--ease-decelerate),
margin-top var(--duration-spring) var(--ease-decelerate),
padding-bottom var(--duration-spring) var(--ease-decelerate),
opacity var(--duration-normal) ease 110ms;
}
.nav-rail-group-label { white-space: nowrap; }
.nav-rail-lbl {
font-size: 14px; font-weight: 500; white-space: nowrap;
letter-spacing: -0.01em; line-height: 1; text-overflow: ellipsis;
opacity: 0; max-width: 0; overflow: hidden; transform: translateX(-6px);
transition: opacity var(--duration-fast) var(--ease-soft),
max-width var(--duration-medium) var(--ease-decelerate),
transform var(--duration-fast) var(--ease-soft);
}
.nav-rail.is-expanded .nav-rail-lbl {
opacity: 1; max-width: 180px; transform: translateX(0);
transition: opacity var(--duration-normal) var(--ease-soft) 80ms,
max-width var(--duration-spring) var(--ease-decelerate) 40ms,
transform var(--duration-spring) var(--ease-decelerate) 80ms;
}
@media (prefers-reduced-motion: reduce) {
.nav-rail, .nav-rail-wordmark, .nav-rail-group-head, .nav-rail-lbl {
transition: none;
}
}
.page-header {
position: relative;
height: var(--topbar-height);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
display: grid;
--ph-title-track: var(--page-header-module-width, 220px);
grid-template-columns:
[title-start] var(--ph-title-track)
[subtabs-start] minmax(0, auto)
[filler-start] 1fr
[section-acts-start] auto
[primary-start] auto
[header-acts-start] auto
[end];
align-items: center;
padding-left: var(--space-5);
padding-right: var(--space-4);
color: var(--color-text);
gap: var(--space-4);
flex-shrink: 0;
z-index: var(--z-page-header);
}
.page-header > .page-header-title { grid-row: 1; grid-column: title-start / subtabs-start; }
.page-header > .page-header-subtabs { grid-row: 1; grid-column: subtabs-start / filler-start; }
.page-header > .page-header-section-actions { grid-row: 1; grid-column: section-acts-start / primary-start; }
.page-header > .page-header-primary { grid-row: 1; grid-column: primary-start / header-acts-start; }
.page-header > .page-header-actions { grid-row: 1; grid-column: header-acts-start / end; }
.page-header.is-title-fluid,
.page-header.is-title-iconly { --ph-title-track: min-content; }
.page-header-title {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.page-header-logo-mobile {
display: none;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: var(--color-text);
white-space: nowrap;
min-width: 0;
}
.page-header-logo-img { height: 28px; flex-shrink: 0; }
.page-header-logo-text {
font-weight: var(--fw-semibold);
font-size: var(--font-size-md);
color: var(--color-text);
}
.page-header-module {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.page-header-module > .ui-ico img {
width: 22px;
height: 22px;
}
.page-header-module-label {
font-size: var(--font-size-lg);
font-weight: var(--fw-semibold);
color: var(--color-text);
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.page-header-subtabs {
display: flex;
align-items: center;
gap: var(--space-2);
border-left: 1px solid var(--color-border);
padding-left: var(--space-3);
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.page-header-subtabs::-webkit-scrollbar { display: none; }
.page-header-subtabs.is-empty { display: none; }
.page-header-subtabs.is-scrollable {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.page-subnav {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
min-width: 0;
height: var(--page-subnav-height, 44px);
padding-left: var(--space-5);
padding-right: var(--space-4);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
transition: height var(--duration-fast) var(--ease-decelerate),
border-bottom-width var(--duration-fast) var(--ease-decelerate);
}
.page-subnav::-webkit-scrollbar { display: none; }
.page-subnav.is-empty {
height: 0;
border-bottom-width: 0;
padding-top: 0;
padding-bottom: 0;
}
.page-subnav.no-anim { transition: none; }
.page-subnav--ebene2 {
height: 40px;
background: var(--color-bg-subtle);
}
@media (max-width: 999px) {
.page-subnav--ebene2 { height: var(--page-subnav-height, 44px); }
}
.page-subnav.is-scrollable {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.page-header-primary {
display: flex;
align-items: center;
gap: var(--space-2);
}
.page-header-primary.is-empty { display: none; }
.page-header-section-actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.page-header-section-actions.is-empty { display: none; }
.lod-section-mobile-toolbar {
display: none;
}
@media (max-width: 999px) {
.topbar-btn {
min-height: var(--touch-ziel);
display: inline-flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 599px) {
.lod-section-mobile-toolbar {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.lod-section-mobile-toolbar:empty { display: none; }
.lod-section-mobile-toolbar--subnav {
background: var(--color-bg-subtle);
padding-top: var(--space-1-5);
padding-bottom: var(--space-1-5);
}
.lod-section-mobile-toolbar .app-board-switcher {
width: 100%;
}
.lod-section-mobile-toolbar .anfr-view-switcher { flex: 0 1 auto; min-width: 0; }
.lod-section-mobile-toolbar > :not(.anfr-view-switcher) { flex-shrink: 0; }
.lod-section-mobile-toolbar > :not(.anfr-view-switcher):last-child { margin-left: auto; }
}
.page-header-actions {
display: flex;
align-items: center;
gap: var(--space-2);
margin-left: auto;
}
#topbar-avatar:empty { background: transparent; }
.topbar-user-btn {
gap: var(--space-2);
}
.topbar-btn {
background: none;
border: none;
cursor: pointer;
padding: var(--space-2);
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--duration-fast), color var(--duration-fast);
position: relative;
}
.topbar-btn > .ui-ico img { width: 20px; height: 20px; }
.topbar-btn:focus-visible { outline: none; }
.page-header .topbar-btn {
color: var(--color-text-muted);
}
.page-header .topbar-btn:hover {
background: var(--color-bg-subtle);
color: var(--color-text);
}
.page-header .topbar-btn:active {
background: var(--color-border-hover);
}
.page-header .topbar-btn:focus-visible {
box-shadow: 0 0 0 2px var(--brand-default);
}
.page-header .topbar-btn > .ui-ico img {
filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
}
.page-header .topbar-user-btn {
background: var(--color-bg-subtle);
color: var(--color-text);
}
.page-header .topbar-user-btn:hover {
background: var(--color-border-hover);
color: var(--color-text);
}
.page-header .topbar-user-btn:active {
background: var(--color-border-pressed);
}
.page-header .topbar-kontext-btn.has-kontext {
background: var(--brand-light);
color: var(--brand-default);
}
.page-header .topbar-kontext-btn.has-kontext:hover {
background: var(--color-border-hover);
}
#notifications-badge, #activity-badge, #genehmigungen-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
background: var(--status-danger-fg);
color: var(--brand-text-on);
font-size: 10px;
font-weight: var(--fw-semibold);
border-radius: var(--radius-circular);
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-xxs);
line-height: 1;
pointer-events: none;
}
@media (max-width: 1399px) {
.topbar-logo-text { display: none; }
.topbar-logo-sep { display: none; }
.topbar-logo-app { font-size: var(--font-size-sm); }
}
.nf-overlay {
position: fixed;
inset: 0;
z-index: var(--z-error-overlay);
background: var(--lod-scrim-strong);
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.nf-panel {
max-width: 480px;
padding: var(--space-6);
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: 0 12px 48px rgba(0,0,0,0.25);
text-align: center;
}
.nf-icon img { width: 56px; height: 56px; opacity: 0.6; }
.nf-title {
margin: var(--space-3) 0 var(--space-2);
font-size: var(--font-size-xl);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.nf-desc { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.55; }
.nf-actions { display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.lod-copy-link-btn {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-1) var(--space-2);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
transition: background var(--duration-fast), color var(--duration-fast);
}
.lod-copy-link-btn:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.notif-section { padding: var(--space-1) 0 var(--space-2); }
.notif-section-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) var(--space-4) var(--space-1);
}
.notif-section-title {
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.notif-markall-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
color: var(--color-text);
cursor: pointer;
font-family: var(--font-sans);
transition: background var(--duration-fast);
}
.notif-markall-btn:hover { background: var(--color-bg-subtle); }
.notif-divider {
height: 1px;
background: var(--color-border);
margin: var(--space-2) 0;
}
.notif-event-item {
display: grid;
grid-template-columns: 4px 24px 1fr auto;
align-items: start;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
cursor: pointer;
transition: background var(--duration-fast), opacity var(--duration-normal) var(--ease-soft);
position: relative;
}
.notif-event-item:hover { background: var(--color-bg-subtle); }
.notif-event-item.is-unread { background: var(--color-bg-subtle); }
.notif-event-item.is-unread .notif-event-title { font-weight: var(--fw-semibold); color: var(--color-text); }
.notif-event-item.is-fading { opacity: 0; transform: translateX(8px); }
.notif-event-indicator {
width: 4px;
align-self: stretch;
border-radius: var(--radius-xxs);
}
.notif-event-item:not(.is-unread) .notif-event-indicator { opacity: 0.25; }
.notif-event-icon {
margin-top: var(--space-xxs);
opacity: 0.85;
}
.notif-event-body { min-width: 0; }
.notif-event-title-row {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.notif-event-title {
font-size: var(--font-size-sm);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.notif-event-desc {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-top: var(--space-px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notif-event-prio {
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
padding: var(--space-px) var(--space-1-5);
border-radius: var(--radius-xs);
text-transform: uppercase;
letter-spacing: 0.03em;
flex-shrink: 0;
}
.notif-prio-low { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.notif-prio-normal { background: var(--status-info-bg); color: var(--status-info-fg); }
.notif-prio-high { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.notif-event-aside {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: var(--space-1);
min-width: 52px;
}
.notif-event-read-btn {
background: none;
border: none;
cursor: pointer;
padding: var(--space-xxs);
border-radius: var(--radius-sm);
opacity: 0.55;
transition: opacity var(--duration-fast), background var(--duration-fast);
}
.notif-event-read-btn:hover { opacity: 1; background: var(--color-surface); }
@media (max-width: 999px) {
.notif-event-read-btn {
min-width: var(--touch-ziel);
min-height: var(--touch-ziel);
display: inline-flex;
align-items: center;
justify-content: center;
}
}
.notif-event-time {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
white-space: nowrap;
}
.notif-computed-section { padding: var(--space-1) 0 var(--space-2); }
.notif-computed-head {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4) var(--space-1);
}
.notif-tag-link {
margin-left: auto;
background: none;
border: none;
cursor: pointer;
padding: var(--space-xxs);
border-radius: var(--radius-sm);
opacity: 0.6;
transition: opacity var(--duration-fast), background var(--duration-fast);
}
.notif-tag-link:hover { opacity: 1; background: var(--color-bg-subtle); }
@media (max-width: 599px) {
#notifications-dropdown { max-height: 90vh; }
}
#topbar-user {
font-size: var(--font-size-sm);
padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-1);
}
#topbar-username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
font-weight: var(--fw-medium);
}
@media (max-width: 1399px) {
#topbar-username { max-width: 110px; }
}
@media (max-width: 999px) {
#topbar-username { max-width: 80px; }
}
.tab-content { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6); padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }
.tab-content.hidden { display: none; }
#tab-content-mein-tag { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#tab-content-mein-tag.hidden { display: none; }
#tab-content-projekte { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#tab-content-projekte.hidden { display: none; }
.lod-section {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
height: 100%;
width: 100%;
min-width: 0;
}
.lod-section-toolbar {
flex-shrink: 0;
}
.lod-section-panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.lod-section-panel.hidden {
display: none;
}
.lod-section-scroll {
flex: 1;
min-height: 0;
min-width: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
--kleb-versatz: var(--space-4);
--kleb-versatz-unten: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
padding: var(--kleb-versatz);
padding-bottom: var(--kleb-versatz-unten);
background:
linear-gradient(var(--color-bg) 30%, transparent) top / 100% 22px no-repeat,
linear-gradient(transparent, var(--color-bg) 70%) bottom / 100% 22px no-repeat,
radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.09), transparent) top / 100% 7px no-repeat,
radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.09), transparent) bottom / 100% 7px no-repeat;
background-attachment: local, local, scroll, scroll;
}
#tab-content-projekte > .app-scope .lod-section-scroll,
#tab-content-anfragen > .app-scope .lod-section-scroll,
#tab-content-vertrieb > .app-scope .lod-section-scroll,
#tab-content-kontingente > .app-scope .lod-section-scroll,
#tab-content-personal > .app-scope .lod-section-scroll,
#tab-content-wissen > .app-scope .lod-section-scroll {
scrollbar-width: none;
}
#tab-content-projekte > .app-scope .lod-section-scroll::-webkit-scrollbar,
#tab-content-anfragen > .app-scope .lod-section-scroll::-webkit-scrollbar,
#tab-content-vertrieb > .app-scope .lod-section-scroll::-webkit-scrollbar,
#tab-content-kontingente > .app-scope .lod-section-scroll::-webkit-scrollbar,
#tab-content-personal > .app-scope .lod-section-scroll::-webkit-scrollbar,
#tab-content-wissen > .app-scope .lod-section-scroll::-webkit-scrollbar {
display: none;
}
@media (max-width: 599px) {
#tab-content-projekte > .app-scope .lod-section-scroll,
#tab-content-anfragen > .app-scope .lod-section-scroll,
#tab-content-vertrieb > .app-scope .lod-section-scroll,
#tab-content-kontingente > .app-scope .lod-section-scroll,
#tab-content-personal > .app-scope .lod-section-scroll,
#tab-content-wissen > .app-scope .lod-section-scroll {
padding: var(--space-3);
}
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min), 1fr));
gap: var(--space-3);
}
@media (max-width: 999px) {
.card-grid { grid-template-columns: 1fr; }
}
#tab-content-projekte > .app-scope,
#tab-content-anfragen > .app-scope,
#tab-content-vertrieb > .app-scope,
#tab-content-firmen > .app-scope,
#tab-content-kontingente > .app-scope,
#tab-content-abrechnung > .app-scope,
#tab-content-personal > .app-scope,
#tab-content-wissen > .app-scope {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
height: 100%;
width: 100%;
min-width: 0;
}
#tab-content-anfragen,
#tab-content-vertrieb,
#tab-content-firmen,
#tab-content-kontingente,
#tab-content-abrechnung,
#tab-content-personal,
#tab-content-wissen,
#tab-content-kanban {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}
.sw-update-banner {
position: absolute;
left: 0;
right: 0;
z-index: var(--z-sw-banner);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
background: var(--brand-default);
color: var(--brand-text-on);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
box-shadow: var(--shadow-8);
}
.sw-update-banner-text { flex: 1; text-align: center; }
.sw-update-btn {
padding: var(--space-1) var(--space-3);
border: 1px solid var(--brand-text-on);
border-radius: var(--radius-md);
background: transparent;
color: var(--brand-text-on);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
cursor: pointer;
white-space: nowrap;
}
.sw-update-btn:hover { background: rgba(255, 255, 255, 0.15); }
.sw-update-close {
border: none;
background: none;
color: var(--brand-text-on);
cursor: pointer;
padding: var(--space-1);
line-height: 1;
font-size: var(--font-size-lg);
opacity: 0.8;
}
.sw-update-close:hover { opacity: 1; }
@media (max-width: 999px) {
.sw-update-banner { font-size: var(--fs-badge); padding: var(--space-2) var(--space-3); gap: var(--space-2); }
}
@media (max-width: 599px) {
.sw-update-banner { font-size: var(--fs-badge); padding: var(--space-2) var(--space-3); gap: var(--space-2); }
}
@media (max-width: 999px) {
.tab-content { padding: var(--space-3); }
}
.topbar-burger { display: none; }
.mobile-nav-overlay {
position: fixed;
inset: 0;
background: var(--lod-scrim);
z-index: var(--z-bm-overlay);
opacity: 0;
transition: opacity var(--duration-normal, 200ms) var(--ease-default, ease);
pointer-events: none;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-nav-overlay.hidden { display: none; }
.mobile-nav-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 280px;
max-width: 80vw;
background: var(--color-surface);
z-index: var(--z-bm-modal);
box-shadow: var(--shadow-64);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--duration-normal, 200ms) var(--ease-default, ease);
padding-top: env(safe-area-inset-top, 0px);
overscroll-behavior: contain;
}
.mobile-nav-drawer.open { transform: translateX(0); }
.mobile-nav-drawer.hidden { display: none; }
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.mobile-nav-title {
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.mobile-nav-items { flex: 1; overflow-y: auto; padding: var(--space-2) 0; }
.mobile-nav-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: none;
background: none;
width: 100%;
text-align: left;
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: var(--fw-regular);
color: var(--color-text);
text-decoration: none;
cursor: pointer;
transition: background var(--duration-fast);
min-height: 48px;
}
.mobile-nav-item:hover { background: var(--color-bg-subtle); }
.mobile-nav-item:active { background: var(--color-bg-muted); }
.mobile-nav-item.active {
color: var(--brand-default);
font-weight: var(--fw-semibold);
background: var(--brand-light);
border-right: 3px solid var(--brand-default);
}
.mobile-nav-item .ui-ico img { opacity: 0.6; }
.mobile-nav-item.active .ui-ico img { opacity: 1; filter: brightness(0) saturate(100%) invert(25%) sepia(86%) saturate(2000%) hue-rotate(220deg) brightness(92%); }
@media (max-width: 999px) {
#topbar-username { display: none; }
#topbar-avatar > .avatar {
width: 26px !important;
height: 26px !important;
font-size: 10px !important;
}
}
@media (max-width: 599px) {
.nav-rail { display: none; }
.app-shell { flex-direction: column; }
.page-header {
display: flex;
grid-template-columns: none;
background: var(--lod-blue-dark);
border-bottom: none;
color: var(--brand-text-on);
padding-left: var(--space-3);
padding-right: var(--space-2);
gap: var(--space-1);
}
.page-header-logo-mobile {
display: inline-flex;
color: var(--brand-text-on);
min-width: var(--touch-ziel);
min-height: var(--touch-ziel);
justify-content: center;
}
.page-header-logo-text { display: none; }
.page-header-module { display: none; }
.page-header .topbar-btn {
color: var(--brand-text-on);
}
.page-header .topbar-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--brand-text-on);
}
.page-header .topbar-btn:active {
background: rgba(255, 255, 255, 0.08);
}
.page-header .topbar-btn:focus-visible {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.page-header .topbar-btn > .ui-ico img {
filter: brightness(0) invert(1);
}
.page-header .topbar-user-btn {
background: transparent;
color: var(--brand-text-on);
}
.page-header .topbar-user-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--brand-text-on);
}
.page-header .topbar-user-btn:active {
background: rgba(255, 255, 255, 0.08);
}
.page-header .topbar-kontext-btn.has-kontext {
background: rgba(255, 255, 255, 0.18);
color: var(--brand-text-on);
}
.page-header .topbar-kontext-btn.has-kontext:hover {
background: rgba(255, 255, 255, 0.25);
}
.page-header-subtabs { display: none; }
.page-header-primary { display: none; }
.page-subnav { display: none; }
#topbar-username { display: none; }
#topbar-user { padding: var(--space-1); }
#topbar-avatar > .avatar {
width: 26px !important;
height: 26px !important;
font-size: 10px !important;
}
.topbar-burger { display: inline-flex; }
.page-header-actions { gap: var(--space-1); }
.page-header-actions:has(#genehmigungen-wrap:not([hidden])) { gap: var(--space-xxs); }
.topbar-btn { min-width: 36px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#topbar-user { min-width: 44px; min-height: 44px; justify-content: center; }
#notifications-badge, #activity-badge, #genehmigungen-badge { top: 6px; right: 4px; }
.tab-content { padding: 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
}
html.addin-einbettung .nav-rail,
html.addin-einbettung .page-header,
html.addin-einbettung .skip-link { display: none; }
/*== /styles/components/app-shell/app-shell.css ==*/
.app-scope .app-page {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
position: relative;
background: var(--lod-gray-50);
}
.app-scope .app-content {
flex: 1;
min-height: 0;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
/*== /styles/components/app-shell/app-board.css ==*/
.app-scope .app-board {
flex: 1;
overflow: auto;
overscroll-behavior: contain;
background: var(--lod-gray-50);
position: relative;
min-height: 0;
}
.app-scope .app-board-loading,
.app-scope .app-board-error,
.app-scope .app-board-empty {
display: grid;
place-items: center;
min-height: 200px;
color: var(--lod-gray-500);
font-size: var(--font-size-base);
padding: var(--space-8);
text-align: center;
}
.app-scope .app-board-error { color: var(--lod-danger); }
.app-scope .app-board-empty .app-board-empty-reset { margin-top: var(--space-3); }
.app-scope .app-board-columns {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
min-height: 100%;
}
.app-scope .app-board-columns::after {
content: '';
flex: 0 0 var(--space-6);
align-self: stretch;
}
.app-scope .app-board--lane-scroll { overflow-y: hidden; }
.app-scope .app-board--lane-scroll .app-board-columns {
align-items: stretch;
height: 100%;
}
.app-scope .app-board--lane-scroll .app-kanban-column-list {
flex: 1 1 auto;
min-height: 0;
}
.app-scope .app-kanban-column {
flex: 0 0 320px;
display: flex;
flex-direction: column;
background: transparent;
max-height: 100%;
min-height: 0;
position: relative;
min-width: 0;
max-width: 320px;
}
.app-scope .app-kanban-column-accent {
height: 5px;
width: 100%;
background: var(--kanban-column-accent, var(--lod-gray-300));
margin: 0;
border-radius: var(--radius-pill-sm) var(--radius-pill-sm) 0 0;
flex: 0 0 auto;
}
.app-scope .app-kanban-column-header {
display: flex;
flex-direction: column;
flex: 0 0 auto;
gap: var(--space-xxs);
padding: var(--space-3) var(--space-3-5) var(--space-3-5);
background: var(--color-surface);
border: 1px solid var(--lod-gray-200);
border-top: none;
border-radius: 0 0 var(--radius-pill-sm) var(--radius-pill-sm);
box-shadow: 0 1px 2px color-mix(in srgb, var(--lod-darkblue-900) 4%, transparent);
margin-bottom: var(--space-2-5);
}
.app-scope .app-kanban-column-header-main {
display: flex;
align-items: center;
gap: var(--space-2);
}
.app-scope button.app-kanban-column-header-main.is-clickable,
.app-scope a.app-kanban-column-header-main.is-clickable {
background: transparent;
border: none;
padding: var(--space-xxs) var(--space-1);
margin: calc(-1 * var(--space-xxs)) calc(-1 * var(--space-1));
border-radius: var(--radius-md);
cursor: pointer;
text-align: left;
width: 100%;
transition: background var(--duration-quick), color var(--duration-quick);
font: inherit;
color: inherit;
text-decoration: none;
}
.app-scope button.app-kanban-column-header-main.is-clickable:hover,
.app-scope a.app-kanban-column-header-main.is-clickable:hover {
background: var(--lod-gray-50);
}
.app-scope button.app-kanban-column-header-main.is-clickable:hover .app-kanban-column-title,
.app-scope a.app-kanban-column-header-main.is-clickable:hover .app-kanban-column-title {
color: var(--lod-darkblue);
}
.app-scope button.app-kanban-column-header-main.is-clickable:focus-visible,
.app-scope a.app-kanban-column-header-main.is-clickable:focus-visible {
outline: 2px solid var(--lod-darkblue-300);
outline-offset: 2px;
}
.app-scope .app-kanban-column-title {
--kanban-title-size: 15px;
--kanban-title-line: 1.25;
font-family: var(--lod-font-display);
font-size: var(--kanban-title-size);
font-weight: var(--fw-bold);
color: var(--lod-darkblue-700);
margin: 0;
line-height: var(--kanban-title-line);
flex: 1;
min-width: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(var(--kanban-title-size) * var(--kanban-title-line) * 2);
}
.app-scope .app-kanban-column-count {
font-size: 11px;
font-weight: var(--fw-bold);
color: var(--kanban-column-accent, var(--lod-gray-700));
background: color-mix(in srgb, var(--kanban-column-accent, var(--lod-gray-400)) 16%, var(--color-surface));
padding: 0;
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.app-scope .app-kanban-column-meta {
font-size: 11.5px;
color: var(--lod-gray-500);
}
.app-scope .app-kanban-column-quickadd {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2-5) var(--space-3-5);
margin: 0 0 var(--space-2-5);
border: 1px dashed var(--lod-gray-300);
border-radius: var(--radius-lg);
color: var(--lod-gray-500);
font-size: 13px;
font-weight: var(--fw-medium);
background: transparent;
transition: background var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick), box-shadow var(--duration-quick);
justify-content: flex-start;
}
.app-scope .app-kanban-column-quickadd:hover {
border-color: var(--kanban-column-accent, var(--lod-darkblue-300));
border-style: solid;
color: var(--kanban-column-accent, var(--lod-darkblue));
background: var(--color-surface);
}
.app-scope .app-kanban-column-quickadd:focus-visible {
outline: none; box-shadow: var(--lod-shadow-focus);
}
.app-scope .app-kanban-column-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: 0 0 var(--space-4);
overflow-y: auto;
min-height: 40px;
min-width: 0;
width: 100%;
}
@media (max-width: 999px) {
.app-scope .app-kanban-column { flex: 0 0 88vw; }
}
@media (max-width: 599px) {
.app-scope .app-board {
scroll-snap-type: x mandatory;
overflow-x: auto;
overflow-y: hidden;
min-height: 0;
}
.app-scope .app-board-columns {
gap: 0;
padding: var(--space-3) 0;
align-items: stretch;
min-height: 100%;
height: 100%;
}
.app-scope .app-kanban-column {
flex: 0 0 100vw;
max-width: 100vw;
scroll-snap-align: start;
scroll-snap-stop: always;
padding: 0 var(--space-4);
box-sizing: border-box;
height: 100%;
max-height: 100%;
min-height: 0;
}
.app-scope .app-board-columns::after { display: none; }
.app-scope .app-kanban-column-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
.app-scope .app-board-lane-indicator {
display: none;
}
@media (max-width: 599px) {
.app-scope .app-board-lane-indicator {
display: flex;
justify-content: center;
gap: var(--space-1-5);
padding: var(--space-2) 0 var(--space-3);
}
.app-scope .app-board-lane-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lod-gray-300);
transition: background var(--duration-balanced), transform var(--duration-balanced);
}
.app-scope .app-board-lane-dot.is-active {
background: var(--lod-darkblue);
transform: scale(1.35);
}
}
/*== /styles/components/app-shell/dev-banner.css ==*/
.dev-banner {
background: var(--status-warning-bg);
color: var(--status-warning-fg);
text-align: center;
padding: var(--space-1-5) var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
position: sticky;
top: 0;
z-index: var(--z-dev-banner);
}
.dev-banner--error {
background: var(--status-danger-bg);
color: var(--status-danger-fg);
}
/*== /styles/components/app-shell/pull-to-refresh.css ==*/
.app-ptr-indicator {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
margin-top: -40px;
z-index: 5;
width: 32px;
height: 32px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 8px color-mix(in srgb, var(--lod-darkblue-900) 12%, transparent);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
--app-ptr-rot: 0deg;
}
.app-ptr-spinner {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--lod-gray-200);
border-top-color: var(--lod-darkblue);
transform: rotate(var(--app-ptr-rot));
}
.app-ptr-indicator.is-ready .app-ptr-spinner {
border-top-color: var(--lod-turquoise);
transform: rotate(var(--app-ptr-rot)) scale(1.1);
transition: border-top-color var(--duration-snappy) var(--ease-soft), transform var(--duration-snappy) var(--ease-soft);
}
.app-ptr-indicator.is-loading .app-ptr-spinner {
border-top-color: var(--lod-darkblue);
animation: lod-spin var(--duration-spinner) var(--ease-linear) infinite;
}
/*== /styles/components/app-shell/loading-overlay.css ==*/
#loading-overlay {
position: fixed;
inset: 0;
padding-top: env(safe-area-inset-top, 0px);
background: linear-gradient(160deg, var(--loading-grad-start) 0%, var(--loading-grad-mid) 50%, var(--loading-grad-end) 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.9);
z-index: var(--z-popover);
transition: opacity var(--duration-slower) var(--ease-soft);
}
#loading-overlay.hidden { opacity: 0; pointer-events: none; }
.loading-center { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.loading-ring {
width: 160px; height: 160px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.04);
position: relative;
}
.loading-ring::before {
content: '';
position: absolute; inset: -4px;
border-radius: 50%;
border: 2.5px solid transparent;
border-top-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.15);
animation: lod-spin var(--duration-spinner) var(--ease-linear) infinite;
}
.loading-logo { width: 96px; height: 96px; opacity: 0.9; }
.loading-text { font-size: 22px; font-weight: var(--fw-medium); letter-spacing: 0.5px; }
.loading-dots { display: flex; gap: var(--space-2); }
.loading-dots span {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
animation: loadingDot var(--duration-shimmer) var(--ease-inout-soft) infinite;
}
.loading-dots span:nth-child(2) { animation-delay: var(--duration-normal); }
.loading-dots span:nth-child(3) { animation-delay: var(--duration-slower); }
@media (max-width: 1399px) {
.loading-ring { width: 160px; height: 160px; }
.loading-logo { width: 96px; height: 96px; }
}
@media (max-width: 999px) {
.loading-ring { width: 170px; height: 170px; }
.loading-logo { width: 105px; height: 105px; }
.loading-text { font-size: 24px; }
}
@media (max-width: 599px) {
.loading-ring { width: 180px; height: 180px; }
.loading-ring::before { border-width: 3px; inset: -5px; }
.loading-logo { width: 110px; height: 110px; }
.loading-text { font-size: 28px; letter-spacing: 1px; }
.loading-dots span { width: 9px; height: 9px; }
.loading-dots { gap: var(--space-2-5); }
}
.loading-status {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.5);
min-height: 1.2em;
text-align: center;
transition: opacity var(--duration-slow) var(--ease-soft);
}
.loading-error {
text-align: center;
max-width: 320px;
}
.loading-error.hidden { display: none; }
.loading-error-msg {
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
margin-bottom: var(--space-5);
}
.loading-error-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.loading-error-btn {
padding: var(--space-2-5) var(--space-5);
border-radius: var(--radius-md);
border: 1.5px solid rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.12);
color: white;
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
cursor: pointer;
min-height: 44px;
transition: background var(--duration-fast);
}
.loading-error-btn:hover { background: rgba(255, 255, 255, 0.2); }
.loading-error-btn--secondary { border-color: rgba(255, 255, 255, 0.3); background: transparent; font-weight: var(--fw-regular); }
.loading-error-btn--secondary:hover { background: rgba(255, 255, 255, 0.08); }
#loading-overlay.loading-failed .loading-ring::before { animation: none; border-top-color: rgba(255, 120, 120, 0.7); }
@keyframes loadingDot {
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1.2); }
}
/*== /styles/components/cards/card.css ==*/
.card-v2 {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-2-5) var(--space-3);
background: var(--color-surface);
border: 1px solid var(--lod-gray-100);
border-radius: var(--surface-radius);
box-sizing: border-box;
cursor: pointer;
transition: border-color var(--duration-snappy), box-shadow var(--duration-snappy), transform var(--duration-snappy);
overflow: hidden;
height: 180px;
container-type: inline-size;
container-name: card;
color: inherit;
text-decoration: none;
flex-shrink: 0;
}
.card-v2:hover {
border-color: var(--lod-darkblue-300);
box-shadow: 0 4px 10px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
}
.card-v2:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus, 0 0 0 3px rgba(32, 193, 201, 0.25));
}
.card-v2--active {
border-color: var(--lod-darkblue);
background: var(--lod-gray-50);
}
.card-v2--draggable { cursor: grab; }
.card-v2--draggable:active { cursor: grabbing; }
.card-v2--pending {
pointer-events: none;
opacity: 0.65;
cursor: wait;
}
.card-v2--pending::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
transparent 0 10px,
color-mix(in srgb, var(--lod-darkblue-900) 3%, transparent) 10px 20px
);
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
.card-v2--active::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
transparent 0 10px,
color-mix(in srgb, var(--lod-darkblue-900) 3%, transparent) 10px 20px
);
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
.card-v2--compact {
height: 148px;
padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-3-5);
border-radius: var(--radius-lg);
border-left: 4px solid var(--card-app-accent-color, var(--kanban-column-accent, var(--lod-gray-300)));
gap: var(--space-1-5);
}
@media (min-width: 1000px) {
html[data-portal="gast"] .card-v2--compact {
height: 108px;
}
}
.card-v2--compact.card-v2:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.card-v2--compact .card-app-actions {
top: 6px; right: 6px;
padding: var(--space-xxs);
border: 1px solid var(--lod-gray-200);
box-shadow: 0 2px 6px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
background: var(--color-surface);
border-radius: var(--radius-lg);
gap: 0;
}
.card-v2--compact .card-app-action { width: 24px; height: 24px; border-radius: 5px; }
.card-v2--compact .card-app-action:hover { background: var(--lod-gray-50); }
.card-v2--compact .card-app-action:focus-visible {
outline: none; background: var(--lod-darkblue-100);
}
.card-v2--compact .card-app-action img { opacity: 0.6; }
.card-v2--compact .card-app-action:hover img { opacity: 0.9; }
.card-v2--compact .card-app-action--danger:hover {
background: color-mix(in srgb, var(--lod-danger) 12%, #fff);
}
.card-v2--compact .card-app-action--danger:hover img {
filter: brightness(0) saturate(100%) invert(28%) sepia(89%) saturate(2200%) hue-rotate(342deg) brightness(95%) contrast(95%);
opacity: 1;
}
.card-app-id {
font-family: var(--lod-font-mono, monospace);
font-size: var(--fs-badge);
color: var(--lod-gray-500);
font-weight: var(--fw-medium);
white-space: nowrap;
flex-shrink: 0;
}
button.card-app-id {
appearance: none;
background: transparent;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
font-family: var(--lod-font-mono, monospace);
font-size: var(--fs-badge);
font-weight: var(--fw-medium);
color: var(--lod-gray-500);
line-height: inherit;
}
button.card-app-id.is-clickable:hover {
color: var(--lod-darkblue);
text-decoration: underline;
text-underline-offset: 2px;
}
button.card-app-id.is-clickable:focus-visible {
outline: 2px solid var(--brand-default, var(--lod-turquoise));
outline-offset: 2px;
border-radius: var(--radius-xxs);
}
.card-app-id.has-prio-dot {
display: inline-flex;
align-items: center;
gap: 5px;
}
.card-app-id .prio-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.card-app-id.prio-dot-hoch .prio-dot { background: var(--status-danger-fg); }
.card-app-id.prio-dot-niedrig .prio-dot { background: var(--lod-gray-400); }
.card-app-id.has-typ-icon {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.card-app-id .typ-icon {
flex-shrink: 0;
opacity: 0.7;
}
.card-app-id.typ-frage .typ-icon { }
.card-app-id.typ-problem .typ-icon {
filter: brightness(0) saturate(100%) invert(28%) sepia(89%) saturate(2200%) hue-rotate(342deg) brightness(95%) contrast(95%);
opacity: 0.85;
}
.card-app-id.typ-anforderung .typ-icon {
filter: brightness(0) saturate(100%) invert(56%) sepia(67%) saturate(454%) hue-rotate(7deg) brightness(94%) contrast(89%);
opacity: 0.9;
}
.card-app-fakt {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: var(--fw-semibold);
background: var(--lod-turquoise-100);
color: var(--lod-turquoise-900);
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.card-app-heute-inline {
margin-left: var(--space-1);
color: var(--color-success-strong);
font-weight: var(--fw-semibold);
}
.card-v2.anfr-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-accent) 14%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
color-mix(in srgb, var(--lod-accent) 10%, #fff) 0%,
color-mix(in srgb, var(--lod-accent) 4%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
.card-v2.vk-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-turquoise-100) 80%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
var(--lod-turquoise-100) 0%,
color-mix(in srgb, var(--lod-turquoise-100) 30%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
.card-v2.vt-card-lead {
height: 220px;
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--sla-warn) 14%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
color-mix(in srgb, var(--sla-warn) 9%, var(--color-surface)) 0%,
color-mix(in srgb, var(--sla-warn) 3%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
.card-v2.pj-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-darkblue-100) 70%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
var(--lod-darkblue-50) 0%,
color-mix(in srgb, var(--lod-darkblue-50) 35%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
.card-v2.kont-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-gray-100) 80%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
var(--lod-gray-50) 0%,
color-mix(in srgb, var(--lod-gray-50) 30%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
.card-v2.abr-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-darkblue-100) 60%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
color-mix(in srgb, var(--lod-darkblue-50) 50%, var(--color-surface)) 0%,
color-mix(in srgb, var(--lod-darkblue-50) 25%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
.card-v2.wissen-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-warning) 6%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
color-mix(in srgb, var(--lod-warning) 4%, #fff) 0%,
color-mix(in srgb, var(--lod-warning) 2%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
.card-v2--compact .card-app-title {
font-size: var(--font-size-base);
font-weight: var(--fw-medium);
color: var(--lod-gray-900);
line-height: 1.35;
-webkit-line-clamp: 2;
min-height: calc(1.35em * 2);
word-break: break-word;
}
.fk-datum-badge {
display: inline-flex;
align-items: center;
white-space: nowrap;
padding: var(--space-xxs) var(--space-2);
border-radius: var(--radius-circular);
font-size: var(--fs-badge);
font-weight: var(--fw-medium);
background: var(--color-bg);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
}
.fk-datum-badge--rot { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: transparent; }
.fk-datum-badge--heute { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: transparent; }
.card-v2--compact .card-app-header { gap: var(--space-1-5); }
.card-v2--compact .card-app-header .pill,
.card-v2--compact .card-app-header .pill-tag,
.card-v2--compact .card-app-header .badge,
.card-v2--compact .card-app-header .aufgabe-status-badge,
.card-v2--compact .card-app-header .fk-datum-badge,
.card-v2--compact .card-app-header .card-app-fakt,
.card-v2--compact .card-app-header .card-app-badge {
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
padding: var(--space-xxs) var(--space-1-5);
line-height: 1.4;
height: 20px;
border-radius: var(--radius-md);
box-sizing: border-box;
}
.card-v2--compact .card-app-header .card-app-id {
height: 20px;
display: inline-flex;
align-items: center;
}
.card-v2:not(.card-v2--compact) .card-app-header .pill,
.card-v2:not(.card-v2--compact) .card-app-header .pill-tag,
.card-v2:not(.card-v2--compact) .card-app-header .badge,
.card-v2:not(.card-v2--compact) .card-app-header .aufgabe-status-badge,
.card-v2:not(.card-v2--compact) .card-app-header .fk-datum-badge,
.card-v2:not(.card-v2--compact) .card-app-header .card-app-fakt,
.card-v2:not(.card-v2--compact) .card-app-header .card-app-badge {
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
padding: 3px var(--space-2);
line-height: 1.4;
height: 24px;
border-radius: var(--radius-md);
box-sizing: border-box;
}
.card-app-meta {
display: flex;
min-width: 0;
margin-top: var(--space-1);
}
.card-app-meta-pill {
max-width: 100%;
display: inline-flex;
align-items: center;
gap: var(--space-1);
overflow: hidden;
white-space: nowrap;
min-width: 0;
font-size: var(--fs-badge);
padding: var(--space-px) var(--space-1-5);
border-radius: var(--radius-pill-sm);
background: var(--lod-gray-100);
color: var(--lod-gray-700);
text-decoration: none;
}
.card-app-meta-pill-ico {
flex: 0 0 auto;
opacity: 0.7;
width: 12px;
height: 12px;
}
.card-app-meta-pill-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.card-app-meta-pill--opportunity {
background: var(--lod-turquoise-100);
color: var(--lod-turquoise-900);
}
.card-app-meta-pill--request {
background: var(--lod-darkblue-50);
color: var(--lod-darkblue);
}
.card-app-meta-pill.is-clickable { cursor: pointer; }
.card-app-meta-pill.is-clickable:hover { filter: brightness(0.95); }
.card-app-meta-pill.is-clickable:hover .card-app-meta-pill-text { text-decoration: underline; }
.card-app-meta-pill.is-clickable:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
.card-app-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
font-size: 11.5px;
color: var(--lod-gray-500);
margin-top: auto;
padding-top: var(--space-1);
flex-shrink: 0;
min-height: 28px;
}
.card-app-footer-left {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
min-width: 0;
flex: 1;
}
.card-app-footer-left .avatar { width: 22px; height: 22px; font-size: var(--font-size-xs); flex-shrink: 0; }
.card-app-assignee {
font-size: 11.5px;
color: var(--lod-gray-700);
font-weight: var(--fw-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.card-app-assignee.muted { color: var(--lod-gray-500); font-style: italic; font-weight: var(--fw-regular); }
.card-app-team-stack {
display: inline-flex;
align-items: center;
margin-left: var(--space-1, 4px);
flex-shrink: 0;
}
.card-app-team-mini {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--color-surface);
margin-left: -6px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--lod-gray-100);
flex-shrink: 0;
}
.card-app-team-mini:first-child { margin-left: 0; }
.card-app-team-mini img,
.card-app-team-mini .avatar {
width: 100%;
height: 100%;
font-size: 8px;
border-radius: 50%;
}
.card-app-team-more {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 5px;
margin-left: 3px;
background: var(--lod-gray-100);
border-radius: var(--radius-grouped-count);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
color: var(--lod-gray-700);
flex-shrink: 0;
}
.card-app-footer-right {
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.card-app-sub {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--lod-gray-500);
font-weight: var(--fw-medium);
}
.card-app-sub.has-progress { color: var(--lod-turquoise-900); }
.card-app-sub img {
opacity: 0.6;
width: 12px;
height: 12px;
flex-shrink: 0;
}
.card-app-date {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: 11.5px;
color: var(--lod-gray-700);
}
.card-app-date img {
opacity: 0.6;
width: 12px;
height: 12px;
flex-shrink: 0;
}
.card-app-date.overdue {
color: var(--lod-danger);
font-weight: var(--fw-medium);
}
.card-app-date.overdue img { opacity: 0.9; }
.card-app-progress-strip {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--lod-gray-100);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden;
}
.card-app-progress-strip > span {
display: block;
height: 100%;
background: var(--lod-turquoise);
transition: width var(--duration-normal);
}
.card-app-ghost {
opacity: 0.4;
background: var(--lod-darkblue-50);
border-style: dashed;
}
@media (max-width: 599px) {
.card-v2--compact .card-app-id {
flex-shrink: 0;
white-space: nowrap;
}
.card-v2--compact .card-app-meta .card-app-meta-pill-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.card-v2--wide {
min-height: 88px;
flex-direction: row;
align-items: center;
gap: var(--space-3-5);
padding: var(--space-3) var(--space-4);
}
.card-v2--wide .card-app-title { font-size: var(--font-size-base); }
.card-v2--wide .card-app-meta-row { flex: 1; }
.card-v2--tile {
min-height: 140px;
text-align: center;
padding: var(--space-5) var(--space-4);
align-items: center;
justify-content: center;
}
.card-v2 { --card-app-accent-width: 4px; }
.card-v2--accent-left {
border-left: var(--card-app-accent-width) solid var(--card-app-accent-color, var(--lod-gray-200));
}
.card-v2--accent-left.card-v2--accent-w3 { border-left-width: 3px; }
.card-v2--accent-left.card-v2--accent-w4 { border-left-width: 4px; }
.card-v2--accent-left.card-v2--accent-w6 { border-left-width: 6px; }
.card-v2--accent-top {
border-top: var(--card-app-accent-width) solid var(--card-app-accent-color, var(--lod-gray-200));
}
.card-v2--accent-top.card-v2--accent-w3 { border-top-width: 3px; }
.card-v2--accent-top.card-v2--accent-w4 { border-top-width: 4px; }
.card-v2--accent-top.card-v2--accent-w6 { border-top-width: 6px; }
.card-v2--accent-prio-hoch { --card-app-accent-color: var(--lod-danger); }
.card-v2--accent-prio-normal { --card-app-accent-color: var(--lod-gray-300); }
.card-v2--accent-prio-niedrig { --card-app-accent-color: var(--lod-gray-200); }
.card-v2--accent-sla-fail { --card-app-accent-color: var(--lod-danger); }
.card-v2--accent-sla-warn { --card-app-accent-color: var(--lod-amber-500); }
.card-v2--accent-sla-ok { --card-app-accent-color: var(--lod-turquoise); }
.card-v2--accent-sla-paused { --card-app-accent-color: var(--color-text-muted); }
.card-v2--accent-sla-escalated {
--card-app-accent-color: var(--lod-danger);
--card-app-accent-width: 6px;
box-shadow: 0 0 0 1px var(--lod-danger), 0 4px 12px rgba(193, 55, 92, 0.18);
background: color-mix(in srgb, var(--lod-danger) 4%, #fff);
}
.card-v2--accent-ampel-rot { --card-app-accent-color: var(--lod-danger); }
.card-v2--accent-ampel-orange { --card-app-accent-color: var(--lod-amber-500); }
.card-v2--accent-ampel-gruen { --card-app-accent-color: var(--lod-turquoise); }
.card-v2--accent-ampel-blau { --card-app-accent-color: var(--lod-darkblue); }
.card-v2--accent-status-review { --card-app-accent-color: var(--status-review-fg); }
.card-v2--accent-status-approved { --card-app-accent-color: var(--status-info-fg); }
.card-v2--accent-status-archived { --card-app-accent-color: var(--lod-gray-400); }
.card-v2--bg-subtle { background: var(--lod-gray-50); }
.card-v2--bg-brand { background: color-mix(in srgb, var(--lod-turquoise) 6%, #fff); }
.card-app-header {
display: flex;
align-items: center;
gap: var(--space-1-5);
flex-wrap: nowrap;
overflow: hidden;
min-width: 0;
flex-shrink: 0;
min-height: 26px;
}
.card-v2--compact .card-app-header {
min-height: 22px;
}
.card-app-badges-spacer { flex: 1 1 auto; min-width: 4px; }
.card-app-header > [data-card-slot] { flex-shrink: 0; white-space: nowrap; }
.card-app-header > [data-card-slot] .card-app-badge-ico {
flex: 0 0 auto;
width: 12px;
height: 12px;
opacity: 0.75;
}
.card-app-header > [data-card-slot] .card-app-badge-text {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.card-app-header > .fk-datum-badge,
.card-app-header > .badge.badge-umsatz {
gap: var(--space-1);
}
.card-v2.vk-card-app .card-app-header > [data-card-slot="geld"].badge-umsatz {
background: var(--lod-turquoise-50);
color: var(--lod-turquoise-900);
border: 1px solid color-mix(in srgb, var(--lod-turquoise) 32%, transparent);
font-weight: var(--fw-bold, 700);
}
.card-v2.vk-card-app .card-app-header > [data-card-slot="geld"].badge-umsatz .card-app-badge-text {
font-size: var(--font-size-md);
}
.card-v2.vk-card-app .card-app-header > [data-card-slot="geld"].badge-umsatz .card-app-badge-ico { opacity: 0.9; }
@container card (max-width: 699px) {
.card-v2.vk-card-app .card-app-header > [data-card-slot="geld"] { display: none; }
}
@container card (min-width: 700px) {
.card-v2.vk-card-app [data-detail-key="betrag"] { display: none; }
}
@container card (max-width: 699px) {
.card-app-header > [data-badge-kompakt="text"] .card-app-badge-text { display: none; }
.card-app-header > [data-badge-kompakt="text"] {
padding-left: 5px;
padding-right: 5px;
}
}
@container card (max-width: 339px) {
.card-app-header > [data-badge-kompakt="spaet"] .card-app-badge-text { display: none; }
.card-app-header > [data-badge-kompakt="spaet"] {
padding-left: 5px;
padding-right: 5px;
}
}
.card-app-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-xxs) var(--space-2);
border-radius: var(--radius-pill-sm);
font-size: var(--fs-badge);
font-weight: var(--fw-medium);
line-height: 1.3;
background: var(--lod-gray-100);
color: var(--lod-gray-700);
border: 0;
cursor: default;
white-space: nowrap;
}
.card-app-badge.is-clickable { cursor: pointer; }
.card-app-badge.is-clickable:hover { filter: brightness(0.95); }
.card-app-badge-ico { opacity: 0.75; flex-shrink: 0; }
.card-app-badge-sep { width: 1px; height: 12px; background: var(--lod-gray-200); display: inline-block; }
.card-app-badge-count {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
font-weight: var(--fw-semibold);
}
.card-app-badge--neutral { background: var(--lod-gray-100); color: var(--lod-gray-700); }
.card-app-badge--success { background: color-mix(in srgb, var(--lod-turquoise) 15%, #fff); color: var(--lod-turquoise-900); }
.card-app-badge--danger { background: color-mix(in srgb, var(--lod-danger) 15%, #fff); color: var(--lod-danger); }
.card-app-badge--warn { background: color-mix(in srgb, var(--lod-amber-500) 20%, #fff); color: var(--lod-amber-700); }
.card-app-badge--brand { background: color-mix(in srgb, var(--lod-darkblue) 10%, #fff); color: var(--lod-darkblue); }
.card-app-badge--muted { background: var(--lod-gray-100); color: var(--lod-gray-600); }
.card-app-badge--info { background: color-mix(in srgb, var(--lod-darkblue-300) 20%, #fff); color: var(--lod-darkblue); }
.card-app-badge.ext-sichtbar-badge {
background: color-mix(in srgb, var(--lod-turquoise) 15%, #fff);
color: var(--lod-turquoise-900);
border: 1px solid color-mix(in srgb, var(--lod-turquoise) 35%, transparent);
}
.card-app-badge.ext-sichtbar-badge .card-app-badge-ico { opacity: 0.95; }
.card-app-title {
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
line-height: 1.35;
color: var(--lod-darkblue);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
max-height: calc(1.35em * 2);
}
.card-app-title.card-app-title--clamp1 {
-webkit-line-clamp: 1;
max-height: calc(1.35em * 1);
min-height: calc(1.35em * 1);
white-space: nowrap;
text-overflow: ellipsis;
word-break: normal;
}
.card-app-title.card-app-title--clamp2 { -webkit-line-clamp: 2; max-height: calc(1.35em * 2); }
.card-app-title.card-app-title--clamp3 { -webkit-line-clamp: 3; max-height: calc(1.35em * 3); }
.card-app-title-row {
display: flex;
align-items: flex-start;
gap: var(--space-1-5);
min-width: 0;
}
.card-app-title-row .card-app-title { flex: 1 1 auto; min-width: 0; }
.card-app-activity-dot {
flex-shrink: 0;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 7px;
background: transparent;
}
.card-app-activity-dot--fresh { background: var(--color-success-strong); }
.card-app-activity-dot--recent { background: var(--lod-amber-500); }
.card-app-body-subtitle {
display: inline-flex;
align-items: center;
gap: var(--space-1, 4px);
font-size: var(--fs-meta, 12px);
font-weight: var(--fw-medium, 500);
color: var(--lod-gray-600);
margin-top: var(--space-1);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-app-body-subtitle-ico {
opacity: 0.6;
flex-shrink: 0;
width: 12px;
height: 12px;
}
.card-app-body-subtitle-text { overflow: hidden; text-overflow: ellipsis; }
.card-app-body-subtitle--success { color: var(--color-success-strong); }
.card-app-body-subtitle--success .card-app-body-subtitle-ico { opacity: 0.85; }
.card-app-body-subtitle--warn { color: var(--color-warning-strong); }
.card-app-body-subtitle--warn .card-app-body-subtitle-ico { opacity: 0.85; }
.card-app-body-subtitle--danger { color: var(--color-danger-strong); }
.card-app-body-subtitle--danger .card-app-body-subtitle-ico { opacity: 0.95; }
.card-app-body-subtitle--muted { color: var(--lod-gray-500); }
.card-app-body-detail {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2-5);
margin-top: var(--space-1-5);
font-size: 11.5px;
color: var(--lod-gray-600);
}
.card-app-body-detail-item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.card-app-body-detail-item img { opacity: 0.6; flex-shrink: 0; width: 12px; height: 12px; }
.card-app-body-detail-item--success { color: var(--color-success-strong); }
.card-app-body-detail-item--success img { opacity: 0.85; }
.card-app-body-detail-item--warn { color: var(--color-warning-strong); }
.card-app-body-detail-item--warn img { opacity: 0.85; }
.card-app-body-detail-item--danger { color: var(--color-danger-strong); }
.card-app-body-detail-item--danger img { opacity: 0.95; }
.card-app-body-detail--kontingent {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-1-5) 12px;
margin-top: var(--space-2);
}
.card-app-body-detail--kontingent.card-app-body-detail--kontingent-reihe {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-3);
row-gap: var(--space-1);
}
.card-app-body-detail-tile {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--font-size-sm);
color: var(--lod-gray-700);
font-variant-numeric: tabular-nums;
}
.card-app-body-detail-tile img { opacity: 0.6; flex-shrink: 0; width: 12px; height: 12px; }
.card-app-body-detail-tile--success { color: var(--color-success-strong); }
.card-app-body-detail-tile--success img { opacity: 0.85; }
.card-app-body-detail-tile--warn { color: var(--color-warning-strong); }
.card-app-body-detail-tile--danger { color: var(--color-danger-strong); }
.card-app-subtitle {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--font-size-sm);
color: var(--lod-gray-600);
line-height: 1.3;
}
.card-app-subtitle-ico {
opacity: 0.6;
flex-shrink: 0;
width: 12px;
height: 12px;
}
.card-app-content {
font-size: 12.5px;
color: var(--lod-gray-700);
line-height: 1.45;
}
.card-app-meta-row {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
font-size: 11.5px;
color: var(--lod-gray-600);
}
.card-app-meta-row--split {
flex-wrap: nowrap;
justify-content: space-between;
}
.app-scope .card-v2 .card-app-meta-row.card-meta-anchor {
margin-top: auto;
}
.card-app-meta-row--split .card-app-meta-left,
.card-app-meta-row--split .card-app-meta-right {
display: inline-flex;
align-items: center;
gap: var(--space-2-5);
min-width: 0;
}
.card-app-meta-row--split .card-app-meta-right { flex-shrink: 0; }
.card-app-meta-item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.card-app-meta-ico { opacity: 0.6; flex-shrink: 0; }
.card-app-meta-item--warn { color: var(--lod-amber-700); }
.card-app-meta-item--danger { color: var(--lod-danger); }
.card-app-meta-item--success{ color: var(--lod-turquoise-900); }
.card-app-meta-item--muted { color: var(--lod-gray-500); }
.card-app-avatar {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.card-app-avatar-name {
font-size: 11.5px;
color: var(--lod-gray-700);
margin-left: 5px;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-app-avatar-tr {
position: absolute;
top: 10px;
right: 12px;
}
.card-app-actions {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
gap: var(--space-xxs);
padding: 3px;
background: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg);
box-shadow: 0 2px 6px color-mix(in srgb, var(--lod-darkblue-900) 12%, transparent);
opacity: 0;
pointer-events: none;
transform: translateY(-2px);
transition: opacity var(--duration-snappy), transform var(--duration-snappy);
z-index: 2;
}
.card-v2:hover .card-app-actions--desktop,
.card-v2:hover .card-app-actions--hover,
.card-v2:focus-within .card-app-actions--desktop,
.card-v2:focus-within .card-app-actions--hover {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.card-app-actions--always { opacity: 1; pointer-events: auto; transform: none; }
.card-app-actions--mobile { display: none; }
.card-app-action {
width: 28px;
height: 28px;
border: 0;
background: transparent;
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--lod-gray-700);
transition: background var(--duration-quick), color var(--duration-quick);
}
.card-app-action:hover { background: var(--lod-gray-100); }
.card-app-action img {
opacity: 0.7;
width: 14px;
height: 14px;
flex-shrink: 0;
}
.card-app-action:hover img { opacity: 1; }
.icon-optical-shrink {
transform: scale(0.85);
transform-origin: center center;
}
.card-app-action--danger:hover { background: color-mix(in srgb, var(--lod-danger) 12%, #fff); color: var(--lod-danger); }
.card-app-action--primary { background: var(--lod-darkblue); }
.card-app-action--primary img { filter: brightness(0) invert(1); opacity: 0.9; }
.card-app-action--primary:hover { background: var(--lod-turquoise); }
.card-app-actions-sep { width: 1px; height: 16px; background: var(--lod-gray-200); margin: 0 var(--space-xxs); align-self: center; }
.card-app-progress--bottom-strip {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: var(--lod-gray-100);
overflow: hidden;
}
.card-app-progress--bottom-strip .card-app-progress-fill {
display: block;
height: 100%;
transition: width var(--duration-normal) var(--ease-soft);
}
.card-app-progress--inline {
display: flex;
align-items: center;
gap: var(--space-2);
}
.card-app-progress-track {
flex: 1;
background: var(--lod-gray-100);
border-radius: var(--radius-circular);
overflow: hidden;
min-width: 40px;
}
.card-app-progress--inline .card-app-progress-fill {
display: block;
height: 100%;
border-radius: var(--radius-circular);
transition: width var(--duration-normal) var(--ease-soft);
}
.card-app-progress-label {
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
color: var(--lod-gray-700);
font-variant-numeric: tabular-nums;
min-width: 32px;
text-align: right;
}
@media (max-width: 999px) {
.card-v2 { height: 192px; padding: var(--space-2-5) var(--space-3); }
.card-v2--compact { height: 156px; }
.card-app-title { font-size: 13.5px; }
.card-app-header { min-height: var(--touch-ziel); }
.card-v2--compact .card-app-header { min-height: var(--touch-ziel); }
.card-app-id {
display: inline-flex; align-items: center;
min-height: var(--touch-ziel);
}
.card-v2:has(.card-app-actions--mobile) .card-app-header { padding-right: var(--space-10); }
.card-v2 .card-app-actions--desktop { display: none; }
.card-v2 .card-app-actions--mobile {
display: inline-flex;
position: absolute; top: 6px; right: 6px;
padding: 0; background: transparent; border: none; box-shadow: none;
opacity: 1; pointer-events: auto; transform: none;
}
.card-v2 .card-app-actions--mobile .card-app-action {
width: var(--touch-ziel);
height: var(--touch-ziel);
}
}
@media (max-width: 599px) {
.card-v2 { height: auto; gap: var(--space-1-5); }
.card-app-title { font-size: 13px; -webkit-line-clamp: 2; }
.card-app-meta-row { gap: var(--space-2); font-size: 11px; }
.card-app-meta-row--split { flex-wrap: wrap; }
.card-v2--wide { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}
[data-kanban-card]:focus-visible,
[data-kanban-card].is-kbd-focus {
outline: 2px solid var(--lod-darkblue);
outline-offset: 2px;
border-radius: var(--surface-radius);
}
[data-kanban-card] { outline-color: transparent; }
/*== /styles/components/cards/kat-card.css ==*/
.kat-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--kat-accent, var(--brand-default));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
transition: box-shadow var(--duration-fast);
}
.kat-card:hover {
box-shadow: var(--shadow-4);
}
.kat-card-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
cursor: pointer;
user-select: none;
background: var(--color-surface);
border-top-left-radius: calc(var(--radius-lg) - 1px);
border-top-right-radius: var(--radius-lg);
transition: background var(--duration-fast);
}
.kat-card-header:hover {
background: var(--color-bg-muted);
}
.kat-card-header:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: -2px;
}
.kat-card.is-collapsed .kat-card-header {
border-bottom-left-radius: calc(var(--radius-lg) - 1px);
border-bottom-right-radius: var(--radius-lg);
}
.kat-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--kat-accent-bg, var(--status-info-bg));
flex-shrink: 0;
}
.kat-card-icon img {
width: 20px;
height: 20px;
}
.kat-card-titles {
flex: 1;
min-width: 0;
}
.kat-card-title {
margin: 0;
font-size: var(--font-size-md);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: 1.2;
}
.kat-card-meta {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-top: var(--space-xxs);
}
.kat-card-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
transition: transform var(--duration-fast) var(--ease-soft);
flex-shrink: 0;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
.kat-card-chevron:hover { background: var(--color-bg-subtle); }
.kat-card-chevron img {
width: 18px;
height: 18px;
opacity: 0.7;
}
.kat-card.is-collapsed .kat-card-chevron {
transform: rotate(-90deg);
}
.kat-card-body {
border-top: 1px solid var(--color-border-light);
background: var(--color-surface);
border-bottom-left-radius: calc(var(--radius-lg) - 1px);
border-bottom-right-radius: var(--radius-lg);
overflow: hidden;
}
.kat-card.is-collapsed .kat-card-body {
display: none;
}
.kat-card-body--pad {
padding: var(--space-3) var(--space-4);
}
/*== /styles/components/badges/avatar.css ==*/
.avatar-slot { display: inline-flex; flex-shrink: 0; position: relative; }
.avatar-presence {
position: absolute; bottom: -1px; right: -1px;
width: 7px; height: 7px; border-radius: 50%;
border: 1.5px solid var(--color-surface);
box-sizing: content-box;
}
.avatar-presence--available { background: var(--presence-available); }
.avatar-presence--busy { background: var(--presence-busy); }
.avatar-presence--dnd { background: var(--presence-busy); }
.avatar-presence--away { background: var(--presence-away); }
.avatar-presence--brb { background: var(--presence-away); }
.avatar-presence--offline { background: var(--color-text-muted); }
.avatar-presence--unknown { display: none; }
.avatar-slot[data-avatar-size="md"] .avatar-presence { width: 9px; height: 9px; bottom: 0; right: 0; border-width: 2px; }
.avatar-slot[data-avatar-size="lg"] .avatar-presence { width: 10px; height: 10px; bottom: 0; right: 0; border-width: 2px; }
.app-scope .avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
color: #fff;
background: var(--lod-gray-400);
box-sizing: border-box;
flex-shrink: 0;
line-height: 1;
user-select: none;
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--lod-gray-200);
}
.app-scope .avatar.empty {
background: var(--lod-gray-200);
color: var(--lod-gray-500);
border: 2px dashed var(--lod-gray-300);
box-shadow: none;
}
.app-scope .avatar.empty img { width: 60%; height: 60%; opacity: 0.55; }
.app-person-picker-panel .avatar,
.app-popover-menu .avatar,
.app-board-switcher-panel .avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
color: #fff;
background: var(--lod-gray-400);
box-sizing: border-box;
flex-shrink: 0;
line-height: 1;
user-select: none;
}
.app-person-picker-panel .avatar.empty,
.app-popover-menu .avatar.empty,
.app-board-switcher-panel .avatar.empty {
background: var(--lod-gray-200);
color: var(--lod-gray-500);
}
.app-person-picker-panel .avatar.empty img,
.app-popover-menu .avatar.empty img,
.app-board-switcher-panel .avatar.empty img {
width: 60%; height: 60%; opacity: 0.55;
}
.app-person-picker-panel .avatar-slot,
.app-popover-menu .avatar-slot,
.app-board-switcher-panel .avatar-slot,
.app-team-editor-add-panel .avatar-slot,
.app-team-editor-member-panel .avatar-slot,
.app-checklist-assignee-panel .avatar-slot,
.mention-dropdown .avatar-slot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
flex-shrink: 0;
position: relative;
}
/*== /styles/components/badges/badge-row.css ==*/
[data-badge-row] {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-width: 0;
overflow: hidden;
}
[data-badge-row] > * { flex-shrink: 0; }
[data-badge-row] > .is-badge-eingeklappt { display: none !important; }
[data-badge-row] > .is-badge-schmal { flex-shrink: 1; min-width: 0; overflow: hidden; }
[data-badge-row] > .is-badge-schmal .card-app-badge-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
[data-badge-row] > .is-badge-schmal:not(:has(.card-app-badge-text)) {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
.lod-badge-more {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
padding: 2px var(--space-1-5);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-pill-sm);
background: var(--color-surface);
color: var(--color-text-secondary);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
font-variant-numeric: tabular-nums;
line-height: 1.3;
cursor: pointer;
white-space: nowrap;
}
.lod-badge-more:hover {
background: var(--lod-gray-100);
color: var(--lod-darkblue);
border-color: var(--lod-darkblue-300);
}
.lod-badge-more:focus-visible {
outline: 2px solid var(--lod-darkblue);
outline-offset: 1px;
}
.lod-badge-more-panel { padding: var(--space-1) 0; }
.lod-badge-more-kopf {
padding: 0 var(--space-3) var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.lod-badge-more-zeile {
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
white-space: nowrap;
}
@media (max-width: 999px) {
.lod-badge-more {
min-width: var(--touch-ziel);
min-height: var(--touch-ziel);
}
}
/*== /styles/components/badges/mono-avatar.css ==*/
.lod-mono {
--lod-mono-size: 40px;
flex-shrink: 0;
position: relative;
width: var(--lod-mono-size);
height: var(--lod-mono-size);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--fw-semibold);
font-size: var(--font-size-xs);
}
.lod-mono--md { --lod-mono-size: 36px; font-size: 12px; }
.lod-mono--sm { --lod-mono-size: 28px; font-size: 11px; }
.lod-mono--xs { --lod-mono-size: 24px; font-size: 10px; }
.lod-mono--firma {
overflow: hidden;
border-radius: var(--radius-md);
background: linear-gradient(140deg,
color-mix(in srgb, var(--lod-mono-color, var(--lod-darkblue)) 82%, #fff) 0%,
var(--lod-mono-color, var(--lod-darkblue)) 52%,
color-mix(in srgb, var(--lod-mono-color, var(--lod-darkblue)) 82%, #000) 100%);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(15, 46, 72, 0.18);
}
.lod-mono--person {
border-radius: var(--radius-circular);
background: var(--lod-turquoise-100);
color: var(--lod-turquoise-900);
}
.lod-mono--doc {
border-radius: var(--radius-md);
background: linear-gradient(140deg, var(--lod-darkblue-100) 0%, var(--lod-darkblue-50) 100%);
color: var(--lod-darkblue-500);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(15, 46, 72, 0.10);
}
.lod-mono--doc.lod-mono--getoent {
background: linear-gradient(140deg,
color-mix(in srgb, var(--lod-mono-color, var(--lod-darkblue)) 26%, var(--color-surface)) 0%,
color-mix(in srgb, var(--lod-mono-color, var(--lod-darkblue)) 11%, var(--color-surface)) 100%);
color: color-mix(in srgb, var(--lod-mono-color, var(--lod-darkblue)) 70%, #000);
}
.lod-mono--firma .ui-ico img,
.lod-mono--doc .ui-ico img { width: 22px; height: 22px; }
.lod-mono--doc .ui-ico img { opacity: 0.8; }
.lod-mono-init {
position: relative;
color: #fff;
font-weight: var(--fw-semibold);
font-size: inherit;
letter-spacing: 0.02em;
text-shadow: 0 1px 1px rgba(15, 46, 72, 0.25);
}
.lod-mono--person .lod-mono-init,
.lod-mono--doc .lod-mono-init { color: inherit; text-shadow: none; }
.lod-mono-logo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background: #fff;
box-shadow: inset 0 0 0 1px var(--lod-gray-200);
}
/*== /styles/components/badges/presence-cluster.css ==*/
.presence-cluster {
display: inline-flex;
align-items: center;
}
.presence-cluster__slot {
position: relative;
cursor: default;
transition: transform var(--motion-fast) var(--ease-standard);
}
.presence-cluster__slot:not(:first-child),
.presence-cluster__more {
margin-left: -9px;
}
.presence-cluster__slot:hover,
.presence-cluster__more:hover {
transform: translateY(-2px);
z-index: 60 !important;
}
.presence-cluster__more {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-surface-soft, var(--lod-gray-100));
color: var(--color-text-secondary);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
border: 2px solid var(--color-surface);
box-shadow: 0 0 0 1px var(--lod-gray-200);
box-sizing: border-box;
cursor: default;
transition: transform var(--motion-fast) var(--ease-standard);
}
@keyframes presenceIn {
from { opacity: 0; transform: scale(0.6); }
to { opacity: 1; transform: scale(1); }
}
.presence-cluster__slot.is-entering,
.presence-cluster__more.is-entering {
animation: presenceIn var(--motion-enter) var(--ease-overshoot) backwards;
}
@keyframes presenceOut {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.6); }
}
.presence-cluster__slot.is-closing,
.presence-cluster__more.is-closing {
animation: presenceOut var(--motion-exit) var(--ease-exit) forwards;
pointer-events: none;
}
/*== /styles/components/drawers/_shared/collab-fields.css ==*/
.app-scope .collab-field-active {
outline: 2px solid var(--collab-color, var(--brand-default));
outline-offset: 2px;
transition: outline-color var(--motion-fast) var(--ease-standard);
}
.app-scope .collab-field-badge {
position: absolute;
top: -10px;
right: -6px;
display: inline-flex;
z-index: 5;
pointer-events: none;
}
.app-scope .collab-field-badge[data-collab-field="titel"] {
top: 6px;
right: 6px;
}
.app-scope .collab-field-badge-slot { display: inline-flex; margin-left: -6px; }
.app-scope .collab-field-badge-slot:first-child { margin-left: 0; }
.app-scope .collab-field-badge .avatar {
animation: collabBadgeIn var(--motion-enter) var(--ease-overshoot) backwards;
}
@keyframes collabBadgeIn {
from { opacity: 0; transform: scale(0.5); }
to { opacity: 1; transform: scale(1); }
}
.app-scope .collab-ghost-text {
color: var(--collab-color, var(--brand-default));
font-style: italic;
transition: color var(--motion-fast) var(--ease-standard);
}
.app-scope .app-checklist-item.collab-peer-ghost {
border: 1px dashed var(--collab-color, var(--brand-default));
background: color-mix(in srgb, var(--collab-color, var(--brand-default)) 6%, transparent);
opacity: 0.9; cursor: default;
animation: collabBadgeIn var(--motion-enter) var(--ease-overshoot) backwards;
}
.app-scope .collab-peer-ghost-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--collab-color, var(--brand-default)); flex: 0 0 auto; }
.app-scope .collab-peer-ghost-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; color: var(--lod-gray-700); }
.app-scope .collab-peer-ghost-who { font-size: var(--font-size-xs); color: var(--collab-color, var(--brand-default)); flex: 0 0 auto; margin-left: auto; }
.app-scope .card-presence {
position: absolute; top: 6px; right: 6px;
display: inline-flex; z-index: 3; pointer-events: none;
}
.app-scope .card-presence-slot {
display: inline-flex; margin-left: -6px; border-radius: 50%;
box-shadow: 0 0 0 2px var(--lod-white, #fff);
animation: collabBadgeIn var(--motion-enter) var(--ease-overshoot) backwards;
}
.app-scope .card-presence-slot:first-child { margin-left: 0; }
.app-scope .collab-team-ghosts { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--space-2); vertical-align: middle; }
.app-scope .collab-team-ghost {
display: inline-flex; border-radius: 50%;
outline: 2px dashed var(--collab-color, var(--brand-default)); outline-offset: 1px;
opacity: 0.85;
animation: collabBadgeIn var(--motion-enter) var(--ease-overshoot) backwards;
}
.app-scope.collab-cursor-layer {
position: fixed; inset: 0; z-index: var(--z-collab-cursor);
pointer-events: none; overflow: hidden;
}
.app-scope .collab-cursor {
position: absolute; top: 0; left: 0;
display: inline-flex; align-items: flex-start;
transition: transform 90ms linear;
will-change: transform;
}
.app-scope .collab-cursor-arrow { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.app-scope .collab-cursor-name {
margin: 14px 0 0 -4px;
padding: 1px 7px;
border-radius: var(--radius-full);
color: var(--lod-white); font-size: var(--font-size-xs); font-weight: 600; line-height: 1.5;
white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/*== /styles/components/badges/kpi-tiles.css ==*/
.kpi-tiles-grid {
display: grid;
grid-template-columns: repeat(var(--kpi-columns, 4), minmax(0, 1fr));
gap: var(--space-2-5);
width: 100%;
}
.kpi-tile {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: var(--space-3) var(--space-3) var(--space-2-5);
border: var(--surface-border);
border-radius: var(--surface-radius);
background: var(--surface-bg);
min-height: 78px;
box-sizing: border-box;
gap: var(--space-1-5);
}
.kpi-tile-head {
display: flex;
align-items: center;
gap: var(--space-1-5);
min-height: 18px;
flex: 0 0 auto;
}
.kpi-tile-icon {
flex: 0 0 auto;
width: 14px;
height: 14px;
opacity: 0.8;
}
.kpi-tile-value {
font-family: var(--lod-font-display, inherit);
font-size: var(--kpi-value-md);
font-weight: var(--fw-bold);
line-height: 1.1;
color: var(--lod-darkblue-700);
font-variant-numeric: tabular-nums;
}
.kpi-tile-value--text {
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kpi-tile-nv { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.kpi-tile-unit {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--lod-gray-500);
}
.kpi-tile-label {
font-size: var(--font-size-sm);
color: var(--lod-gray-600);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
.kpi-tile--skeleton { pointer-events: none; }
.kpi-tile-sub {
font-size: var(--font-size-xs);
color: var(--lod-gray-500);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kpi-tile-sub[data-kpi-subtone="warning"] { color: var(--color-warning-fg); font-weight: var(--fw-medium); }
.kpi-tile-sub[data-kpi-subtone="danger"] { color: var(--lod-danger); font-weight: var(--fw-medium); }
.kpi-tile-sub[data-kpi-subtone="success"] { color: var(--color-success-strong); font-weight: var(--fw-medium); }
.kpi-tile-sub[data-kpi-subtone="muted"] { color: var(--color-text-muted); }
.kpi-tile[data-kpi-tone="success"] .kpi-tile-value { color: var(--lod-turquoise-900); }
.kpi-tile[data-kpi-tone="warning"] .kpi-tile-value { color: var(--lod-amber-600); }
.kpi-tile[data-kpi-tone="danger"] .kpi-tile-value { color: var(--lod-danger); }
.kpi-tile[data-kpi-tone="muted"] .kpi-tile-value { color: var(--lod-gray-500); }
.kpi-tile-value.has-badge { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
.kpi-tile-badge {
font-size: var(--font-size-xs);
font-weight: var(--fw-bold);
line-height: 1.4;
padding: 1px 6px;
border-radius: var(--radius-circular);
background: var(--lod-gray-100);
color: var(--lod-gray-600);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.kpi-tile[data-kpi-tone="success"] .kpi-tile-badge {
background: var(--lod-turquoise-100);
color: var(--lod-turquoise-900);
}
.kpi-tile-trend {
margin-left: auto;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--font-size-xs);
font-weight: var(--fw-bold);
line-height: 1.4;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--lod-gray-600);
}
.kpi-tile[data-kpi-tone="success"] .kpi-tile-trend { color: var(--lod-turquoise-900); }
.kpi-tile[data-kpi-tone="warning"] .kpi-tile-trend { color: var(--lod-amber-600); }
.kpi-tile[data-kpi-tone="danger"] .kpi-tile-trend { color: var(--lod-danger); }
.kpi-tile[data-kpi-tone="muted"] .kpi-tile-trend { color: var(--lod-gray-500); }
.kpi-tile-trend-arrow { display: inline-block; width: 0; height: 0; }
.kpi-tile-trend--up .kpi-tile-trend-arrow {
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 4px solid currentColor;
}
.kpi-tile-trend--down .kpi-tile-trend-arrow {
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid currentColor;
}
.kpi-tile-trend--flat .kpi-tile-trend-arrow {
width: 6px;
height: 2px;
border-radius: 1px;
background: currentColor;
}
.kpi-tile-bar {
position: relative;
margin-top: auto;
height: var(--space-1);
border-radius: var(--radius-circular);
background: var(--lod-gray-100);
overflow: hidden;
}
.kpi-tile-bar.has-mark { overflow: visible; }
.kpi-tile-bar-mark {
position: absolute;
top: -3px;
bottom: -3px;
width: 2px;
margin-left: -1px;
border-radius: 1px;
background: var(--lod-darkblue-700);
}
.kpi-tile-bar-fill {
display: block;
height: 100%;
border-radius: var(--radius-circular);
background: var(--lod-darkblue-700);
transition: width var(--duration-slower) var(--ease-soft);
}
.kpi-tile[data-kpi-tone="success"] .kpi-tile-bar-fill { background: var(--lod-turquoise); }
.kpi-tile[data-kpi-tone="warning"] .kpi-tile-bar-fill { background: var(--lod-amber-600); }
.kpi-tile[data-kpi-tone="danger"] .kpi-tile-bar-fill { background: var(--lod-danger); }
.kpi-tile[data-kpi-tone="muted"] .kpi-tile-bar-fill { background: var(--lod-gray-400); }
@container drawer (max-width: 640px) {
.kpi-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container drawer (max-width: 360px) {
.kpi-tiles-grid { grid-template-columns: 1fr; }
}
.kpi-tile-spark { margin-top: auto; }
.kpi-tile-bar + .kpi-tile-spark { margin-top: 6px; }
.kpi-tile-spark svg { display: block; width: 100%; height: 20px; }
.kpi-tiles-grid--lg .kpi-tile {
padding: var(--space-3-5, 14px) var(--space-4, 16px);
min-height: 104px;
gap: 0;
position: relative;
overflow: hidden;
justify-content: flex-start;
}
.kpi-tiles-grid--lg .kpi-tile-head { min-height: 30px; align-items: flex-start; }
.kpi-tiles-grid--lg .kpi-tile-value { margin-top: var(--space-1); }
.kpi-tiles-grid--lg .kpi-tile-sub { margin-top: 3px; }
.kpi-tiles-grid--lg .kpi-tile::before {
content: '';
position: absolute; inset: 0 auto 0 0; width: 3px;
background: var(--lod-gray-200);
}
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="success"]::before { background: var(--lod-turquoise); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="warning"]::before { background: var(--lod-amber-600); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="danger"]::before { background: var(--lod-danger); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="success"] { background: color-mix(in srgb, var(--lod-turquoise) 4%, var(--surface-bg, #fff)); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="warning"] { background: color-mix(in srgb, var(--lod-amber-600) 4%, var(--surface-bg, #fff)); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="danger"] { background: color-mix(in srgb, var(--lod-danger) 4%, var(--surface-bg, #fff)); }
.kpi-tiles-grid--lg .kpi-tile-head { gap: var(--space-2); }
.kpi-tiles-grid--lg .kpi-tile-icon {
width: 26px; height: 26px;
padding: 5px;
border-radius: var(--radius-md, 6px);
background: color-mix(in srgb, var(--lod-darkblue) 8%, transparent);
box-sizing: border-box;
}
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="success"] .kpi-tile-icon { background: color-mix(in srgb, var(--lod-turquoise) 14%, transparent); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="warning"] .kpi-tile-icon { background: color-mix(in srgb, var(--lod-amber-600) 14%, transparent); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="danger"] .kpi-tile-icon { background: color-mix(in srgb, var(--lod-danger) 14%, transparent); }
.kpi-tiles-grid--lg .kpi-tile-label {
font-size: 11px;
font-weight: var(--fw-semibold, 600);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.kpi-tiles-grid--lg .kpi-tile-value {
font-size: 26px;
font-weight: var(--fw-bold, 700);
font-variant-numeric: tabular-nums;
color: var(--lod-darkblue-900);
line-height: 1.15;
}
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="danger"] .kpi-tile-value { color: var(--lod-danger); }
.kpi-tiles-grid--lg .kpi-tile-sub { font-size: var(--font-size-xs); }
@media (max-width: 1399px) {
.kpi-tiles-grid--lg .kpi-tile-value { font-size: 22px; }
.kpi-tiles-grid--lg .kpi-tile { min-height: 92px; }
}
@media (max-width: 1399px) {
.kpi-tiles-grid--lg[data-kpi-columns="5"],
.kpi-tiles-grid--lg[data-kpi-columns="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
.kpi-tiles-grid--lg[data-kpi-columns] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
.kpi-tiles-grid--lg[data-kpi-columns="5"],
.kpi-tiles-grid--lg[data-kpi-columns="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
.kpi-tiles-grid--lg[data-kpi-columns] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-tiles-grid--lg .kpi-tile { min-height: 84px; }
.kpi-tiles-grid--lg .kpi-tile-value { font-size: 20px; }
.kpi-tiles-grid--lg .kpi-tile-label {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.kpi-tile--drill {
cursor: pointer;
transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.kpi-tile--drill:hover {
border-color: var(--lod-turquoise);
box-shadow: var(--shadow-2, 0 2px 8px rgba(0, 0, 0, 0.08));
transform: translateY(-1px);
}
.kpi-tile--drill:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: 1px;
}
@media (max-width: 719px) {
.kpi-tiles-grid:not(.kpi-tiles-grid--lg)[data-kpi-columns="3"],
.kpi-tiles-grid:not(.kpi-tiles-grid--lg)[data-kpi-columns="4"],
.kpi-tiles-grid:not(.kpi-tiles-grid--lg)[data-kpi-columns="5"],
.kpi-tiles-grid:not(.kpi-tiles-grid--lg)[data-kpi-columns="6"],
.kpi-tiles-grid:not(.kpi-tiles-grid--lg)[data-kpi-columns="7"],
.kpi-tiles-grid:not(.kpi-tiles-grid--lg)[data-kpi-columns="8"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/*== /styles/components/badges/handlungsleiste.css ==*/
.app-handlungsleiste {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-2-5);
padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
border: 1px solid var(--color-border-subtle); border-left: 3px solid var(--status-warning-fg);
border-radius: var(--radius-md); background: var(--color-surface);
}
.app-handlungsleiste-ico img { width: 18px; height: 18px; }
.app-handlungsleiste-text { font-size: var(--font-size-sm); color: var(--color-text-primary); }
.app-handlungsleiste-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5); min-width: 0; }
.app-handlungsleiste-rest { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.app-scope .app-handlungsleiste-chip {
font: inherit; font-size: var(--font-size-xs); cursor: pointer; white-space: nowrap;
padding: 3px 10px; border-radius: var(--radius-pill);
border: 1px solid var(--color-border-subtle); background: var(--color-surface);
color: var(--lod-darkblue);
transition: border-color 120ms ease, background 120ms ease;
}
.app-scope .app-handlungsleiste-chip:hover {
border-color: var(--lod-turquoise);
background: color-mix(in srgb, var(--lod-turquoise) 6%, var(--color-surface));
}
@media (max-width: 999px) {
.app-scope .app-handlungsleiste-chip { min-height: var(--touch-ziel); }
}
/*== /styles/components/badges/line-list-editor.css ==*/
.lle { display: flex; flex-direction: column; gap: var(--space-1-5); width: 100%; }
.lle-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.lle-row {
display: flex;
align-items: center;
gap: var(--space-1);
border: var(--surface-border);
border-radius: var(--surface-radius-inner);
background: var(--surface-bg);
padding: 2px var(--space-1) 2px var(--space-2);
transition: border-color var(--motion-fast) var(--ease-soft), box-shadow var(--motion-fast) var(--ease-soft);
}
.lle-row:hover { border-color: var(--lod-gray-300); }
.lle-row:focus-within { border-color: var(--brand-default); box-shadow: 0 0 0 2px var(--brand-light); }
.lle-reorder { display: flex; flex-direction: column; flex: 0 0 auto; }
.lle-btn {
display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent; cursor: pointer; padding: 0;
border-radius: var(--radius-sm); color: var(--lod-gray-600);
transition: background var(--motion-instant) var(--ease-soft), color var(--motion-instant) var(--ease-soft), opacity var(--motion-fast) var(--ease-soft);
}
.lle-btn img { width: 14px; height: 14px; display: block; }
.lle-btn:hover { background: var(--lod-gray-100); }
.lle-btn:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
.lle-btn:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
.lle-up, .lle-down { width: 20px; height: 15px; opacity: 0; transition: opacity var(--motion-instant) ease; }
.lle-up:disabled, .lle-down:disabled { opacity: 0; }
.lle-row:hover .lle-up, .lle-row:hover .lle-down,
.lle-row:focus-within .lle-up, .lle-row:focus-within .lle-down { opacity: 1; }
.lle-row:hover .lle-btn:disabled, .lle-row:focus-within .lle-btn:disabled { opacity: .25; }
.lle-up img { transform: rotate(180deg); }
.lle-input,
.lle-add-input {
flex: 1 1 auto; min-width: 0;
border: none; background: transparent; outline: none;
font-family: inherit; font-size: var(--font-size-sm); color: var(--lod-fg-1);
padding: var(--space-1-5) 0;
line-height: 1.35;
}
.lle-input::placeholder { color: var(--lod-gray-500, var(--lod-gray-600)); }
.lle-remove { width: 24px; height: 24px; flex: 0 0 auto; }
.lle-remove:hover { background: var(--red-100); color: var(--red-700); }
.lle-add {
display: flex; align-items: center; gap: var(--space-1);
border: 1px dashed var(--lod-gray-300);
border-radius: var(--surface-radius-inner);
padding: 2px var(--space-1) 2px var(--space-2);
transition: border-color var(--motion-fast) var(--ease-soft), background var(--motion-fast) var(--ease-soft);
}
.lle-add:focus-within { border-style: solid; border-color: var(--brand-default); background: var(--brand-light); }
.lle-add-input::placeholder { color: var(--lod-gray-500, var(--lod-gray-600)); }
.lle-add-btn {
flex: 0 0 auto; gap: var(--space-1); padding: 0 var(--space-2); height: 26px;
border-radius: var(--radius-md); line-height: 1;
font-size: var(--font-size-xs); font-weight: var(--fw-semibold); color: var(--brand-default);
background: var(--brand-light); white-space: nowrap;
}
.lle-add-btn img { width: 14px; height: 14px; }
.lle-add-btn:hover { background: color-mix(in srgb, var(--brand-default) 16%, transparent); }
@media (max-width: 999px) {
.lle-add-btn { height: auto; min-height: var(--touch-ziel); padding: 0 var(--space-3); }
.lle-btn { min-width: var(--touch-ziel); min-height: var(--touch-ziel); }
}
/*== /styles/components/badges/rows-editor.css ==*/
.rwe { display: flex; flex-direction: column; gap: var(--space-1); }
.rwe-head { display: flex; gap: var(--space-1-5); padding-right: 30px; }
.rwe-hcell { min-width: 0; font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-muted); }
.rwe-hcell--act { flex: 0 0 0; }
.rwe-row { display: flex; align-items: center; gap: var(--space-1-5); }
.rwe-input {
min-width: 0; height: 30px; padding: 0 var(--space-2);
border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
background: var(--color-surface); font-size: var(--font-size-sm); color: var(--color-text-primary);
}
.rwe-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 18%, transparent); }
.app-scope .rwe-btn {
flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-md);
background: transparent; color: var(--color-text-muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.app-scope .rwe-btn:hover { background: var(--color-bg-hover); color: var(--status-danger-fg); }
.app-scope .rwe-add-btn {
align-self: flex-start; height: 26px; padding: 0 var(--space-2-5); border: 0; border-radius: var(--radius-md);
background: var(--brand-light, color-mix(in srgb, var(--brand-primary) 10%, transparent));
color: var(--brand-primary); font-size: var(--font-size-xs); font-weight: 600; line-height: 1; cursor: pointer;
}
.app-scope .rwe-add-btn:hover { background: color-mix(in srgb, var(--brand-primary) 18%, transparent); }
@media (max-width: 999px) {
.rwe-row { flex-wrap: wrap; }
.rwe-head { display: none; }
.rwe-input { flex: 1 1 120px; }
.app-scope .rwe-btn { min-width: var(--touch-ziel); min-height: var(--touch-ziel); }
.app-scope .rwe-add-btn { min-height: var(--touch-ziel); padding: 0 var(--space-3); }
.rwe-input { min-height: var(--touch-ziel); }
}
@media (max-width: 599px) {
.rwe-input { flex: 1 1 100%; }
}
/*== /styles/components/badges/skeleton.css ==*/
.sk {
background: linear-gradient(
90deg,
var(--lod-gray-100) 25%,
var(--lod-gray-200) 50%,
var(--lod-gray-100) 75%
);
background-size: 200% 100%;
animation: sk-shimmer var(--duration-shimmer) var(--ease-inout-soft) infinite;
border-radius: var(--radius-md);
}
@keyframes sk-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.sk { animation: none; opacity: 0.6; }
}
.boot-sk { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) 0; }
.boot-sk-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.boot-sk-card { padding: var(--space-5) var(--space-6); min-height: 40vh; }
.sk-line {
display: block;
height: 14px;
border-radius: var(--radius-sm);
}
.sk-block {
display: block;
border-radius: var(--radius-lg);
}
.sk-badge {
display: inline-block;
border-radius: var(--radius-circular);
vertical-align: middle;
}
.sk-avatar {
display: inline-block;
border-radius: 50%;
flex-shrink: 0;
}
.sk-avatar--xs { width: 16px; height: 16px; }
.sk-avatar--sm { width: 22px; height: 22px; }
.sk-avatar--md { width: 36px; height: 36px; }
.sk-avatar--lg { width: 48px; height: 48px; }
.sk-lines {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.sk-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
border: var(--surface-border);
border-radius: var(--surface-radius);
background: var(--surface-bg);
}
.sk-card-hd {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-1);
}
.sk-card-hd .sk-line { flex: 1; }
.sk-grid {
display: grid;
grid-template-columns: repeat(var(--sk-grid-cols, 3), 1fr);
gap: var(--sk-grid-gap, 12px);
}
.sk-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min), 1fr));
gap: var(--space-3);
grid-column: 1 / -1;
}
.sk-cards .sk-card { min-height: 150px; }
@media (max-width: 999px) {
.sk-cards { grid-template-columns: 1fr; }
}
.sk-chart {
display: flex;
align-items: flex-end;
gap: var(--space-2);
height: var(--sk-chart-h, 180px);
padding: 0 var(--space-2);
box-sizing: border-box;
}
.sk-chart-head {
display: flex;
align-items: center;
height: 34px;
padding: 0 var(--space-2-5);
box-sizing: border-box;
}
.sk-chart-legend {
display: flex;
align-items: center;
height: 20px;
padding: 0 var(--space-2-5);
box-sizing: border-box;
}
.sk-chart-bar {
flex: 1 1 0;
min-width: 4px;
max-width: 28px;
border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.sk-table {
display: flex;
flex-direction: column;
}
.sk-table-row {
display: grid;
grid-template-columns: repeat(var(--sk-table-cols, 5), minmax(0, 1fr));
align-items: center;
gap: var(--space-3);
height: var(--sk-table-rh, 38px);
border-bottom: 1px solid var(--color-border);
padding: 0 var(--space-2);
box-sizing: border-box;
}
.sk-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.sk-list-row {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
border: var(--surface-border);
border-radius: var(--surface-radius);
background: var(--surface-bg);
}
.sk-list-row-text {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-1-5);
min-width: 0;
}
/*== /styles/components/badges/view-switcher.css ==*/
@media (max-width: 599px) {
.app-scope .anfr-view-switcher--mit-icons.anfr-view-switcher--eng .anfr-view-switcher-btn,
.page-header-subtabs .anfr-view-switcher--mit-icons.anfr-view-switcher--eng .anfr-view-switcher-btn,
.lod-section-mobile-toolbar .anfr-view-switcher--mit-icons.anfr-view-switcher--eng .anfr-view-switcher-btn { padding: 0 var(--space-2-5); }
.app-scope .anfr-view-switcher--mit-icons.anfr-view-switcher--eng .anfr-view-switcher-btn span,
.page-header-subtabs .anfr-view-switcher--mit-icons.anfr-view-switcher--eng .anfr-view-switcher-btn span,
.lod-section-mobile-toolbar .anfr-view-switcher--mit-icons.anfr-view-switcher--eng .anfr-view-switcher-btn span { display: none; }
.app-scope .anfr-view-switcher:not(.anfr-view-switcher--mit-icons),
.page-header-subtabs .anfr-view-switcher:not(.anfr-view-switcher--mit-icons),
.lod-section-mobile-toolbar .anfr-view-switcher {
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.app-scope .anfr-view-switcher:not(.anfr-view-switcher--mit-icons)::-webkit-scrollbar,
.page-header-subtabs .anfr-view-switcher:not(.anfr-view-switcher--mit-icons)::-webkit-scrollbar,
.lod-section-mobile-toolbar .anfr-view-switcher::-webkit-scrollbar { display: none; }
}
.anfr-view-switcher--laeuft-ueber {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.page-header-subtabs.is-compact .anfr-view-switcher-btn { padding: 0 var(--space-2-5); }
.page-header-subtabs.is-compact .anfr-view-switcher-btn span { display: none; }
@media (max-width: 999px) {
.app-scope .anfr-view-switcher--mit-icons.anfr-view-switcher--nur-icons-bis-tablet .anfr-view-switcher-btn,
.page-header-subtabs .anfr-view-switcher--mit-icons.anfr-view-switcher--nur-icons-bis-tablet .anfr-view-switcher-btn,
.lod-section-mobile-toolbar .anfr-view-switcher--mit-icons.anfr-view-switcher--nur-icons-bis-tablet .anfr-view-switcher-btn { padding: 0 var(--space-2-5); }
.app-scope .anfr-view-switcher--mit-icons.anfr-view-switcher--nur-icons-bis-tablet .anfr-view-switcher-btn span,
.page-header-subtabs .anfr-view-switcher--mit-icons.anfr-view-switcher--nur-icons-bis-tablet .anfr-view-switcher-btn span,
.lod-section-mobile-toolbar .anfr-view-switcher--mit-icons.anfr-view-switcher--nur-icons-bis-tablet .anfr-view-switcher-btn span { display: none; }
}
/*== /styles/components/lists/empty-state.css ==*/
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3, 12px);
padding: var(--space-8, 32px) var(--space-4, 16px);
text-align: center;
color: var(--color-text-muted);
}
.empty-state .es-ico {
opacity: 0.5;
margin-bottom: var(--space-1, 4px);
}
.empty-state .es-ico .ui-ico img {
width: 40px;
height: 40px;
}
.empty-state .es-title {
font-size: var(--fs-body);
font-weight: var(--fw-semibold, 600);
color: var(--color-text-primary);
line-height: 1.4;
max-width: 480px;
}
.empty-state .es-title strong {
font-weight: var(--fw-semibold, 600);
}
.empty-state .es-msg {
font-size: var(--fs-caption);
line-height: 1.5;
color: var(--color-text-muted);
max-width: 420px;
}
.empty-state .es-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2, 8px);
margin-top: var(--space-2, 8px);
}
.empty-state--error .es-title {
color: var(--status-ueberfaellig);
}
.empty-state--locked .es-ico {
opacity: 0.6;
}
.empty-state--empty:not(:has(.es-ico)) {
padding: var(--space-6, 24px) var(--space-4, 16px);
}
.empty-state--inline {
padding: var(--space-4, 16px) var(--space-3, 12px);
gap: var(--space-2, 8px);
}
.empty-state--inline .es-ico .ui-ico img { width: 24px; height: 24px; }
.empty-state--inline .es-title { font-size: var(--fs-caption); }
.empty-state--inline .es-msg { font-size: var(--font-size-xs); }
.mt-empty,
.mt-error,
.gast-empty,
.wissen-empty,
.anfr-empty-state,
.gast-stamm-empty,
.app-board-empty,
.app-board-error,
.app-phase-picker-empty,
.app-phase-picker-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2, 8px);
padding: var(--space-6, 24px) var(--space-4, 16px);
text-align: center;
color: var(--color-text-muted);
font-size: var(--fs-caption);
line-height: 1.5;
}
.mt-error,
.app-board-error,
.app-phase-picker-error {
color: var(--status-ueberfaellig);
}
.mt-error-detail {
display: block;
margin-top: var(--space-1, 4px);
color: var(--color-text-muted);
font-size: var(--fs-badge, 11px);
}
@media (max-width: 599px) {
.empty-state { padding: var(--space-6, 24px) var(--space-3, 12px); }
.empty-state .es-title { max-width: 280px; font-size: var(--fs-caption); }
.empty-state .es-msg { max-width: 280px; }
}
@media (min-width: 600px) and (max-width: 999px) {
.empty-state { padding: var(--space-6, 24px) var(--space-4, 16px); }
.empty-state .es-title { max-width: 360px; }
.empty-state .es-msg { max-width: 360px; }
}
@media (min-width: 1000px) and (max-width: 1399px) {
.empty-state { padding: var(--space-7, 28px) var(--space-4, 16px); }
.empty-state .es-title { max-width: 400px; }
.empty-state .es-msg { max-width: 400px; }
}
.app-leerkarte,
.subgrid-is-empty .subgrid-empty {
padding: var(--space-5) var(--space-3);
text-align: center;
background: var(--color-bg-subtle);
border: 1.5px dashed var(--lod-gray-300);
border-radius: var(--radius-lg);
color: var(--lod-gray-600);
}
.app-leerkarte .empty-state,
.subgrid-is-empty .subgrid-empty .empty-state { padding: 0; margin: 0 auto; }
.app-scope .app-leerkarte-cta,
.subgrid-list .subgrid-primary {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-3) var(--space-4);
margin-top: var(--space-xxs);
border: 1.5px dashed var(--lod-gray-300);
border-radius: var(--radius-lg);
background: transparent;
color: var(--color-text-secondary);
font-size: 13px;
font-weight: var(--fw-medium);
cursor: pointer;
transition: background var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick);
}
.app-scope .app-leerkarte-cta:hover,
.app-scope .app-leerkarte-cta:focus-visible,
.subgrid-list .subgrid-primary:hover,
.subgrid-list .subgrid-primary:focus-visible {
background: var(--lod-gray-50);
border-color: var(--lod-darkblue-300);
color: var(--lod-darkblue-700);
outline: none;
}
.app-leerkarte-cta img,
.subgrid-primary img { opacity: 0.65; }
.app-leerkarte:has(+ .app-leerkarte-cta) {
border-bottom: 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.app-scope .app-leerkarte + .app-leerkarte-cta {
margin-top: -1px;
border-top: 1px solid var(--color-border-light);
border-top-left-radius: 0;
border-top-right-radius: 0;
background: var(--color-surface);
color: var(--lod-darkblue-600);
}
/*== /styles/components/lists/subgrid-list.css ==*/
.subgrid-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
container-type: inline-size;
container-name: subgrid;
min-width: 0;
}
.subgrid-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
min-height: 28px;
}
.subgrid-header-title {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--lod-darkblue-700);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.subgrid-header-icon { opacity: 0.6; }
.subgrid-header-actions {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-left: auto;
}
.subgrid-header-action {
width: 28px;
height: 28px;
border: 1px solid var(--lod-gray-200);
background: var(--color-surface);
border-radius: var(--radius-md);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--lod-darkblue);
transition: background var(--duration-quick), border-color var(--duration-quick);
}
.subgrid-header-action:hover {
background: var(--lod-gray-50);
border-color: var(--lod-darkblue-300);
}
.subgrid-header-action:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: 1px;
}
.subgrid-header-action img { opacity: 0.75; }
.subgrid-header-action--labeled {
width: auto;
height: 30px;
padding: 0 var(--space-3);
gap: var(--space-1-5);
font-size: 12.5px;
font-weight: var(--fw-medium);
}
.subgrid-header-action--labeled span {
white-space: nowrap;
color: var(--lod-darkblue);
}
.subgrid-header-action--labeled:hover span {
color: var(--lod-darkblue);
}
.subgrid-description {
font-size: var(--font-size-sm);
color: var(--lod-gray-600);
}
.pill-switch,
.subgrid-filters {
position: relative;
display: inline-flex;
align-items: stretch;
padding: var(--space-1);
border-radius: var(--radius-pill-sm);
background: var(--lod-gray-100);
border: 1px solid var(--lod-gray-200);
}
.subgrid-filters[data-pill-measure="true"] .subgrid-filter-chip,
.app-segmented[data-pill-measure="true"] .app-segmented-btn {
font-weight: var(--fw-semibold);
}
.pill-switch-thumb,
.subgrid-filters-thumb {
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: var(--pill-thumb-w, 0px);
transform: translate3d(var(--pill-thumb-x, 0px), 0, 0);
background: var(--lod-darkblue-100);
border: 1px solid var(--lod-darkblue-300);
border-radius: 7px;
box-sizing: border-box;
transition: transform var(--duration-bounce) var(--ease-drawer),
width var(--duration-bounce) var(--ease-drawer);
pointer-events: none;
opacity: 0;
}
.pill-switch[data-thumb-ready="true"] .pill-switch-thumb,
.subgrid-filters[data-thumb-ready="true"] .subgrid-filters-thumb {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.pill-switch-thumb,
.subgrid-filters-thumb { transition: none; }
}
.subgrid-filter-chip {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 9px var(--space-4-5);
border: none;
border-radius: 7px;
background: transparent;
color: var(--lod-gray-600);
font-size: 12.5px;
font-weight: var(--fw-medium);
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition: color var(--duration-normal) var(--ease-soft), font-weight var(--duration-normal) var(--ease-soft);
}
@media (max-width: 999px) {
.pill-switch,
.subgrid-filters { min-height: 44px; }
.subgrid-filter-chip { min-height: var(--touch-ziel); }
.subgrid-header-action { width: var(--touch-ziel); height: var(--touch-ziel); }
.subgrid-header-action--labeled { width: auto; height: var(--touch-ziel); }
.subgrid-row.is-clickable { min-height: var(--touch-ziel); }
}
.subgrid-filter-chip:hover,
.subgrid-filters .subgrid-filter-chip:hover {
color: var(--lod-darkblue-700);
}
.subgrid-filter-chip.is-active,
.subgrid-filters .subgrid-filter-chip.is-active {
color: var(--lod-darkblue);
font-weight: var(--fw-semibold);
}
.subgrid-filters .subgrid-filter-chip {
color: var(--lod-gray-600);
}
.subgrid-filter-chip:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--lod-turquoise);
}
.subgrid-filter-chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 5px;
border-radius: var(--radius-circular);
background: color-mix(in srgb, var(--lod-darkblue-700) 8%, transparent);
color: var(--lod-gray-600);
font-size: 10.5px;
font-weight: var(--fw-semibold);
line-height: 1;
transition: background var(--duration-normal) var(--ease-soft), color var(--duration-normal) var(--ease-soft);
}
.subgrid-filter-chip.is-active .subgrid-filter-chip-count {
background: color-mix(in srgb, var(--lod-darkblue) 18%, transparent);
color: var(--lod-darkblue);
}
.subgrid-filter-chip-count[data-count="0"] { opacity: 0.5; }
.subgrid-header-counter {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 7px;
margin-left: var(--space-2);
border-radius: var(--radius-circular);
background: color-mix(in srgb, var(--lod-darkblue-700) 8%, transparent);
color: var(--lod-gray-700);
font-size: 11px;
font-weight: var(--fw-semibold);
line-height: 1;
vertical-align: middle;
}
.app-scope .subgrid-filters {
padding: var(--space-1);
border-radius: var(--radius-grouped-count);
gap: var(--space-xxs);
}
.app-scope .subgrid-filters-thumb {
top: 4px;
bottom: 4px;
border-radius: var(--radius-md);
}
.app-scope .subgrid-filter-chip {
padding: 7px var(--space-3-5);
border-radius: var(--radius-md);
font-size: 12.5px;
gap: var(--space-1-5);
}
.app-scope .subgrid-filter-chip-count {
min-width: 0;
height: auto;
padding: 0;
border-radius: 0;
background: transparent;
color: var(--lod-gray-600);
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
font-variant-numeric: tabular-nums;
}
.app-scope .subgrid-filter-chip.is-active .subgrid-filter-chip-count {
background: transparent;
color: var(--lod-darkblue);
font-weight: var(--fw-semibold);
}
.app-scope .subgrid-filter-chip-count[data-count="0"] {
display: none;
}
.subgrid-warning {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-2) var(--space-2-5);
border-radius: var(--radius-md);
font-size: 12.5px;
line-height: 1.4;
}
.subgrid-warning[data-tone="warning"] {
background: color-mix(in srgb, var(--lod-amber-500) 10%, #fff);
color: var(--lod-amber-700);
border: 1px solid color-mix(in srgb, var(--lod-amber-500) 28%, transparent);
}
.subgrid-warning[data-tone="info"] {
background: var(--lod-gray-50);
color: var(--lod-gray-700);
border: 1px solid var(--lod-gray-200);
}
.subgrid-warning[data-tone="danger"] {
background: color-mix(in srgb, var(--lod-danger) 8%, #fff);
color: var(--lod-danger);
border: 1px solid color-mix(in srgb, var(--lod-danger) 25%, transparent);
}
.subgrid-summary {
display: flex;
gap: var(--space-3-5);
flex-wrap: wrap;
padding: var(--space-1-5) var(--space-2-5);
background: var(--lod-gray-50);
border-radius: var(--radius-md);
font-size: 12.5px;
color: var(--lod-gray-700);
}
.subgrid-summary-overdue { color: var(--lod-danger); }
.subgrid-empty,
.subgrid-loading,
.subgrid-error {
padding: var(--space-2-5) var(--space-xxs);
font-size: 12.5px;
color: var(--lod-gray-600);
}
.subgrid-is-empty:has(.subgrid-primary) .subgrid-empty {
border-bottom: 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.subgrid-is-empty [data-subgrid-primary-slot] { margin-top: calc(-1 * var(--space-2) - 1px); }
.subgrid-is-empty .subgrid-primary {
margin-top: 0;
border-top: 1px solid var(--color-border-light);
border-top-left-radius: 0;
border-top-right-radius: 0;
background: var(--color-surface);
color: var(--lod-darkblue-600);
}
.shared-drawer.drawer-view .subgrid-is-empty .subgrid-empty,
.shared-drawer.drawer-readonly .subgrid-is-empty .subgrid-empty {
border-bottom: 1.5px dashed var(--lod-gray-300);
border-radius: var(--radius-lg);
}
.subgrid-rows {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-1-5);
}
[data-subgrid-columns="2"] .subgrid-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-subgrid-columns="3"] .subgrid-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container subgrid (max-width: 560px) {
[data-subgrid-columns="2"] .subgrid-rows,
[data-subgrid-columns="3"] .subgrid-rows { grid-template-columns: 1fr; }
}
.subgrid-row {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: var(--space-2) var(--space-2-5);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
background: #fff;
font-size: 12.5px;
min-width: 0;
overflow: hidden;
}
.subgrid-row > .wd-subgrid-row-act {
flex: 0 0 auto;
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 999px) {
.subgrid-row > .wd-subgrid-row-act {
min-width: var(--touch-ziel);
min-height: var(--touch-ziel);
}
}
.subgrid-row > .wd-subgrid-row-title,
.wd-subgrid-row > .wd-subgrid-row-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.subgrid-row > * { flex-shrink: 0; }
.subgrid-row > .wd-subgrid-row-nr,
.subgrid-row > .wd-subgrid-row-status,
.subgrid-row > .subgrid-aufg-cl,
.wd-subgrid-row > .wd-subgrid-row-nr,
.wd-subgrid-row > .wd-subgrid-row-status,
.wd-subgrid-row > .subgrid-aufg-cl {
white-space: nowrap;
}
.subgrid-aufg-cl {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-px) var(--space-1-5);
border-radius: var(--radius-xs);
background: var(--color-bg-muted);
color: var(--color-text-muted);
font-size: var(--fs-badge);
font-variant-numeric: tabular-nums;
line-height: 1.4;
white-space: nowrap;
}
.subgrid-aufg-cl img { flex-shrink: 0; opacity: 0.7; }
.subgrid-aufg-cl.is-complete {
background: var(--status-success-bg);
color: var(--status-success-fg);
}
.subgrid-aufg-cl.is-complete img { opacity: 0.9; }
.subgrid-aufg-avatars,
.subgrid-aufg-avatar { display: inline-flex; align-items: center; flex-shrink: 0; }
.termin-row-teams { display: inline-flex; align-items: center; opacity: 0.7; }
.termin-row-ort {
display: inline-flex;
align-items: center;
gap: var(--space-1);
max-width: 180px;
min-width: 0;
flex-shrink: 1;
font-size: var(--fs-badge);
color: var(--color-text-muted);
}
.termin-row-ort img { flex-shrink: 0; opacity: 0.6; }
.termin-row-ort > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.subgrid-row-form {
grid-column: 1 / -1;
list-style: none;
min-width: 0;
}
.subgrid-row.is-clickable {
cursor: pointer;
transition: background var(--duration-quick), border-color var(--duration-quick);
}
.subgrid-row.is-clickable:hover {
background: var(--lod-gray-50);
border-color: var(--lod-darkblue-300);
}
.subgrid-row.is-clickable:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: 1px;
}
.subgrid-more {
align-self: flex-start;
border: none;
background: none;
color: var(--lod-darkblue-500);
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
cursor: pointer;
padding: var(--space-1) 0;
}
.subgrid-more:hover { text-decoration: underline; }
.shared-drawer.drawer-view .subgrid-primary,
.shared-drawer.drawer-readonly .subgrid-primary { display: none; }
@container subgrid (max-width: 560px) {
.subgrid-row .wd-subgrid-row-faellig,
.wd-subgrid-row .wd-subgrid-row-faellig { display: none; }
}
@container subgrid (max-width: 500px) {
.subgrid-row .wd-subgrid-row-dauer,
.wd-subgrid-row .wd-subgrid-row-dauer { display: none; }
}
@container subgrid (max-width: 480px) {
.subgrid-row .termin-row-teams,
.subgrid-row .termin-row-herkunft,
.subgrid-row .termin-row-ort,
.subgrid-row .termin-row-dauer {
display: none;
}
.subgrid-row.kont-buchung-row .al-chip { display: none; }
.subgrid-row .wd-subgrid-row-nr,
.subgrid-row .wd-subgrid-row-dauer,
.wd-subgrid-row .wd-subgrid-row-nr,
.wd-subgrid-row .wd-subgrid-row-dauer { display: none; }
.subgrid-row.app-firma-kontakte-row .app-firma-kontakte-email {
display: none;
}
.subgrid-row.app-ze-subgrid-row .app-ze-subgrid-dauer--total,
.subgrid-row.app-ze-subgrid-row .app-ze-subgrid-avatar:nth-of-type(n+2),
.subgrid-row.app-ze-subgrid-row .app-ze-subgrid-avatar-more {
display: none;
}
.subgrid-row .ia-row-bottom { display: none; }
.subgrid-row .app-projekt-phase-extern > span { display: none; }
}
/*== /styles/components/lists/grouped-list.css ==*/
.grouped-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.grouped-list--airy { gap: var(--space-7); }
.gl-group { display: flex; flex-direction: column; gap: var(--space-2); }
.gl-group-header {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-1);
font-size: 11px;
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.gl-group-label { line-height: 1; }
.gl-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-grouped-count);
background: var(--lod-gray-100);
color: var(--lod-gray-600);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
letter-spacing: 0;
text-transform: none;
}
.gl-group-meta {
color: var(--color-text-secondary);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
}
.gl-group-cards { display: flex; flex-direction: column; gap: var(--space-2); }
[data-gl-skeleton] .sk-card { min-height: 150px; }
.gl-group-cards > * { animation: glCardIn var(--motion-enter) var(--ease-enter) backwards; }
.gl-group-cards > *:nth-child(2) { animation-delay: calc(var(--motion-stagger) * 1); }
.gl-group-cards > *:nth-child(3) { animation-delay: calc(var(--motion-stagger) * 2); }
.gl-group-cards > *:nth-child(4) { animation-delay: calc(var(--motion-stagger) * 3); }
.gl-group-cards > *:nth-child(5) { animation-delay: calc(var(--motion-stagger) * 4); }
.gl-group-cards > *:nth-child(6) { animation-delay: calc(var(--motion-stagger) * 5); }
.gl-group-cards > *:nth-child(7) { animation-delay: calc(var(--motion-stagger) * 6); }
.gl-group-cards > *:nth-child(n+8) { animation-delay: calc(var(--motion-stagger) * 7); }
.gl-group-cards > .gl-no-enter { animation: none; }
@keyframes glCardIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.gl-group-cards--grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min), 1fr));
gap: var(--space-3);
}
.gl-loading,
.gl-empty {
padding: var(--space-4);
color: var(--color-text-muted);
font-size: 13px;
text-align: center;
}
@media (max-width: 999px) {
.grouped-list { gap: var(--space-3); }
}
@media (max-width: 599px) {
.gl-group-header { padding-left: var(--space-3); padding-right: var(--space-3); }
.gl-group-cards { padding-left: var(--space-3); padding-right: var(--space-3); }
}
/*== /styles/components/lists/data-table.css ==*/
.lod-dt-root {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
max-height: 100%;
min-height: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
font-size: var(--font-size-sm);
color: var(--color-text);
font-family: inherit;
}
.lod-dt-density-compact { font-size: var(--font-size-xs); }
.lod-dt-bulkbar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--brand-default);
color: #fff;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
min-height: 44px;
animation: lod-fade-slide-in var(--duration-fast) var(--ease-soft);
}
.lod-dt-root:has(.lod-dt-groupbar) .lod-dt-bulkbar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 6;
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.lod-dt-bulk-count {
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
}
.lod-dt-bulk-count strong {
font-weight: var(--fw-bold);
margin-right: 4px;
}
.lod-dt-bulk-actions {
display: flex;
gap: var(--space-1-5);
flex: 1;
}
.lod-dt-root .lod-dt-bulk-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-1-5) var(--space-3);
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
font-family: inherit;
cursor: pointer;
transition: background var(--duration-snap) var(--ease-soft);
}
.lod-dt-root .lod-dt-bulk-btn:hover { background: rgba(255, 255, 255, 0.25); }
.lod-dt-root .lod-dt-bulk-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.lod-dt-root .lod-dt-bulk-btn--danger { background: rgba(255, 80, 80, 0.3); border-color: rgba(255, 120, 120, 0.5); }
.lod-dt-root .lod-dt-bulk-btn--danger:hover { background: rgba(255, 80, 80, 0.5); }
.lod-dt-root .lod-dt-bulk-btn .ui-ico img { filter: brightness(0) invert(1); }
.lod-dt-root .lod-dt-bulk-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
border-radius: var(--radius-md);
cursor: pointer;
}
.lod-dt-root .lod-dt-bulk-clear:hover { background: rgba(255, 255, 255, 0.15); }
.lod-dt-root .lod-dt-bulk-clear .ui-ico img { filter: brightness(0) invert(1); }
.lod-dt-groupbar {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-2);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border-light);
flex-shrink: 0;
min-height: 40px;
flex-wrap: wrap;
}
.lod-dt-chips {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
flex-wrap: wrap;
min-width: 0;
}
.lod-dt-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
height: 24px;
padding: 0 var(--space-1) 0 var(--space-2-5);
background: var(--brand-light);
color: var(--brand-default);
border-radius: var(--radius-pill);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
max-width: 260px;
}
.lod-dt-chip-lbl {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lod-dt-root .lod-dt-chip-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: none;
border-radius: var(--radius-circular);
background: transparent;
color: inherit;
font-size: 13px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
transition: background var(--duration-snap) var(--ease-soft);
}
.lod-dt-root .lod-dt-chip-x:hover { background: color-mix(in srgb, var(--brand-default) 18%, transparent); }
.lod-dt-root .lod-dt-chip-x:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.lod-dt-root .lod-dt-tb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
height: 28px;
padding: 0 var(--space-2);
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
font-family: inherit;
cursor: pointer;
flex-shrink: 0;
transition: background var(--duration-snap) var(--ease-soft),
border-color var(--duration-snap) var(--ease-soft),
color var(--duration-snap) var(--ease-soft);
}
.lod-dt-root .lod-dt-tb-btn:hover {
background: var(--color-bg-hover);
border-color: var(--color-border);
color: var(--color-text);
}
.lod-dt-root .lod-dt-tb-btn:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus);
border-color: var(--brand-default);
color: var(--color-text);
}
.lod-dt-root .lod-dt-tb-btn.is-active {
background: var(--brand-light);
color: var(--brand-default);
}
.lod-dt-root .lod-dt-tb-btn.is-active:hover { border-color: var(--brand-default); }
@media (max-width: 999px) {
.lod-dt-root .lod-dt-tb-btn { min-width: var(--touch-ziel); min-height: var(--touch-ziel); }
.lod-dt-chip { height: var(--touch-ziel); padding: 0 var(--space-px) 0 var(--space-3); }
.lod-dt-root .lod-dt-chip-x { width: var(--touch-ziel); height: var(--touch-ziel); }
}
.lod-dt-tb-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 14px;
height: 14px;
padding: 0 3px;
border-radius: var(--radius-pill);
background: var(--brand-default);
color: #fff;
font-size: 10px;
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.lod-dt-groupbar-spacer { flex: 1; }
.lod-dt-host {
display: flex;
flex-direction: column;
flex: 0 1 auto;
min-height: 0;
}
.lod-dt-host > * { min-height: 0; }
.lod-dt-viewport {
display: flex;
flex: 1;
min-height: 0;
position: relative;
overflow: hidden;
}
.lod-dt-pinned {
flex: 0 0 auto;
overflow: hidden;
background: var(--color-surface);
z-index: 2;
display: flex;
flex-direction: column;
}
.lod-dt-pinned-left {
border-right: 1px solid var(--color-border);
box-shadow: 4px 0 6px -4px rgba(0,0,0,0.08);
}
.lod-dt-pinned-right {
border-left: 1px solid var(--color-border);
box-shadow: -4px 0 6px -4px rgba(0,0,0,0.08);
}
.lod-dt-scroll {
flex: 1;
overflow: auto;
min-width: 0;
}
.lod-dt-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.lod-dt-scroll::-webkit-scrollbar-track { background: transparent; }
.lod-dt-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 5px; }
.lod-dt-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }
.lod-dt-table {
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
width: max-content;
min-width: 0;
}
.lod-dt-root--stretch .lod-dt-table[data-dt-zone="mid"] { min-width: 100%; }
.lod-dt-root--skeleton { pointer-events: none; }
.lod-dt-root--skeleton .lod-dt-th-inner { cursor: default; }
.lod-dt-th-row { background: var(--color-surface); }
.lod-dt-th {
position: sticky;
top: 0;
z-index: 3;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: 0;
text-align: left;
font-weight: var(--fw-semibold);
color: var(--color-text-secondary);
vertical-align: top;
user-select: none;
}
.lod-dt-th-inner {
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-2) var(--space-3) var(--space-1-5);
cursor: default;
min-height: 32px;
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-tertiary);
}
.lod-dt-th-inner[data-dt-sort-key] { cursor: pointer; }
.lod-dt-th-inner[data-dt-sort-key]:hover {
background: var(--color-bg-hover);
color: var(--color-text);
}
.lod-dt-th-inner[draggable="true"] { cursor: grab; }
.lod-dt-col-dragging .lod-dt-th-inner[draggable="true"] { cursor: grabbing; }
.lod-dt-th--drop-target {
outline: 2px solid var(--brand-default);
outline-offset: -2px;
}
.lod-dt-th-label {
flex: 1;
min-width: 3ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0.02em;
}
.lod-dt-sort-order {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 14px;
height: 14px;
padding: 0 3px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--brand-default) 16%, transparent);
color: var(--brand-default);
font-size: 10px;
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.lod-dt-th--sel { background: var(--color-surface); }
.lod-dt-th-inner--sel {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-2);
min-height: 32px;
}
.lod-dt-sel-cb {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--brand-default);
}
.lod-dt-td--sel {
text-align: center;
padding: var(--space-2);
}
.lod-dt-td--sel .lod-dt-sel-cb { display: inline-block; }
.lod-dt-td--sel .lod-dt-sel-cb {
opacity: 0;
transition: opacity var(--duration-quick) var(--ease-soft);
}
.lod-dt-tr:hover .lod-dt-sel-cb,
.lod-dt-tr.is-hover .lod-dt-sel-cb,
.lod-dt-td--sel .lod-dt-sel-cb:checked,
.lod-dt-td--sel .lod-dt-sel-cb:focus-visible,
.lod-dt-sel-aktiv .lod-dt-td--sel .lod-dt-sel-cb { opacity: 1; }
.lod-dt-th-inner--sel .lod-dt-sel-cb {
opacity: 0.45;
transition: opacity var(--duration-quick) var(--ease-soft);
}
.lod-dt-th-inner--sel:hover .lod-dt-sel-cb,
.lod-dt-th-inner--sel .lod-dt-sel-cb:focus-visible,
.lod-dt-sel-aktiv .lod-dt-th-inner--sel .lod-dt-sel-cb { opacity: 1; }
@media (hover: none) {
.lod-dt-td--sel .lod-dt-sel-cb { opacity: 1; }
.lod-dt-th-inner--sel .lod-dt-sel-cb { opacity: 1; }
}
.lod-dt-sort-ico {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lod-dt-sort-ico.lod-dt-sort-none { opacity: 0; transition: opacity var(--duration-quick) var(--ease-soft); }
.lod-dt-th-inner:hover .lod-dt-sort-ico.lod-dt-sort-none { opacity: 0.5; }
.lod-dt-sort-active .ui-ico img {
filter: invert(50%) sepia(95%) saturate(900%) hue-rotate(155deg) brightness(95%);
}
.lod-dt-sort-desc .ui-ico img { transform: rotate(180deg); }
.lod-dt-th { position: relative; }
.lod-dt-root .lod-dt-pin-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
padding: 0;
border: 1px solid var(--color-border-light);
background: var(--color-surface);
display: none;
cursor: pointer;
border-radius: var(--radius-sm);
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
z-index: 4;
}
.lod-dt-root .lod-dt-th:hover .lod-dt-pin-btn { display: inline-flex; }
.lod-dt-root .lod-dt-pin-btn:hover { background: var(--color-bg-hover); }
.lod-dt-root .lod-dt-pin-btn.is-pinned {
position: static;
transform: none;
display: inline-flex;
width: 18px;
height: 18px;
border: none;
background: transparent;
box-shadow: none;
flex-shrink: 0;
}
@media (hover: none) {
.lod-dt-root .lod-dt-pin-btn,
.lod-dt-root .lod-dt-pin-btn.is-pinned {
position: static;
transform: none;
display: inline-flex;
border: none;
background: transparent;
box-shadow: none;
flex-shrink: 0;
width: 36px;
height: 36px;
}
}
.lod-dt-root .lod-dt-pin-btn.is-pinned .ui-ico img {
filter: invert(50%) sepia(95%) saturate(900%) hue-rotate(155deg) brightness(95%);
}
.lod-dt-th-filter {
padding: 0 var(--space-3) var(--space-2);
background: var(--color-surface);
}
.lod-dt-th-filter--empty { padding: 0 0 var(--space-2); min-height: 0; }
.lod-dt-root .lod-dt-fi {
width: 100%;
height: 26px;
padding: 0 var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--font-size-xs);
font-family: inherit;
box-sizing: border-box;
transition: border-color var(--duration-snap) var(--ease-soft), box-shadow var(--duration-snap) var(--ease-soft);
}
.lod-dt-root .lod-dt-fi:hover { border-color: var(--color-border-hover); }
.lod-dt-root .lod-dt-fi:focus { outline: none; border-color: var(--brand-default); box-shadow: 0 0 0 1px var(--brand-default); }
.lod-dt-root .lod-dt-fi:focus-visible { outline: none; border-color: var(--brand-default); box-shadow: 0 0 0 1px var(--brand-default); }
.lod-dt-root .lod-dt-fi--select {
display: inline-flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
text-align: left;
font-weight: var(--fw-regular);
}
.lod-dt-root .lod-dt-fi--select.is-active {
border-color: var(--brand-default);
color: var(--brand-default);
font-weight: var(--fw-semibold);
background: var(--brand-light);
}
.lod-dt-root .lod-dt-fi-arrow { font-size: 9px; margin-left: 6px; opacity: 0.6; flex-shrink: 0; }
.lod-dt-root .lod-dt-fi-range { display: flex; align-items: center; gap: var(--space-1); width: 100%; }
.lod-dt-root .lod-dt-fi-range .lod-dt-fi { flex: 1; min-width: 0; padding: 0 var(--space-1); }
.lod-dt-fi-sep { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.lod-dt-root button.lod-dt-fi--date {
text-align: left;
background: var(--color-bg);
cursor: pointer;
}
.lod-dt-root button.lod-dt-fi--date.is-active {
border-color: var(--brand-default);
color: var(--brand-default);
font-weight: var(--fw-semibold);
background: var(--brand-light);
}
.lod-dt-root button.lod-dt-fi--date .muted { color: var(--color-text-tertiary); }
.lod-dt-resizer {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 100%;
cursor: col-resize;
z-index: 10;
user-select: none;
}
.lod-dt-resizer::after {
content: '';
position: absolute;
top: 20%;
right: 0;
width: 2px;
height: 60%;
background: transparent;
transition: background var(--duration-quick) var(--ease-soft);
border-radius: 1px;
}
.lod-dt-resizer:hover::after,
.lod-dt-resizing .lod-dt-resizer::after { background: var(--brand-default); }
.lod-dt-resizing { cursor: col-resize !important; }
.lod-dt-resizing * { cursor: col-resize !important; user-select: none; }
.lod-dt-resizing .lod-dt-th-inner,
.lod-dt-resizing .lod-dt-pin-btn,
.lod-dt-resizing .lod-dt-fi { pointer-events: none; }
.lod-dt-tr--clickable { cursor: pointer; }
.lod-dt-tr:hover .lod-dt-td,
.lod-dt-tr.is-hover .lod-dt-td { background: var(--color-bg-muted); }
.lod-dt-tr--clickable:hover .lod-dt-td,
.lod-dt-tr--clickable.is-hover .lod-dt-td { background: var(--color-bg-hover); }
.lod-dt-tr--selected .lod-dt-td { background: var(--brand-light) !important; }
.lod-dt-tr--selected:hover .lod-dt-td { background: var(--brand-light) !important; filter: brightness(0.97); }
.lod-dt-td {
padding: var(--space-2-5) var(--space-3);
border-bottom: 1px solid var(--color-border-light);
background: var(--color-surface);
color: var(--color-text);
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: background var(--duration-quick) var(--ease-enter);
outline: none;
}
.lod-dt-td:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-default); }
.lod-dt-density-compact .lod-dt-td { padding: var(--space-1-5) var(--space-3); font-size: var(--font-size-xs); }
.lod-dt-align-left { text-align: left; }
.lod-dt-align-center { text-align: center; }
.lod-dt-align-right { text-align: right; font-variant-numeric: tabular-nums; }
.lod-dt-tr--empty .lod-dt-td-empty {
padding: var(--space-10) var(--space-4);
text-align: center;
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
}
.lod-dt-is-empty .lod-dt-pinned { display: none; }
.lod-dt-group-row { background: color-mix(in srgb, var(--brand-default) 5%, var(--color-surface)); }
.lod-dt-group-cell {
padding: 0;
background: color-mix(in srgb, var(--brand-default) 5%, var(--color-surface));
border-bottom: 1px solid var(--color-border);
border-top: 1px solid var(--color-border-light);
font-weight: var(--fw-semibold);
color: var(--color-text);
font-size: var(--font-size-sm);
box-shadow: inset 3px 0 0 var(--brand-default);
}
.lod-dt-group-cell--pin {
background: color-mix(in srgb, var(--brand-default) 5%, var(--color-surface));
color: transparent;
}
.lod-dt-group-sum {
background: color-mix(in srgb, var(--brand-default) 5%, var(--color-surface));
border-bottom: 1px solid var(--color-border);
border-top: 1px solid var(--color-border-light);
padding: var(--space-2) var(--space-3);
font-weight: var(--fw-semibold);
font-size: var(--font-size-sm);
color: var(--color-text);
white-space: nowrap;
}
.lod-dt-root .lod-dt-group-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
min-height: 34px;
margin: 0;
padding: var(--space-2) var(--space-3);
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.lod-dt-group-cell > .lod-dt-group-label {
display: inline-block;
padding: var(--space-2) 0 var(--space-2) var(--space-3);
}
.lod-dt-root .lod-dt-group-toggle:hover { background: var(--color-bg-hover, rgba(0, 0, 0, 0.04)); }
.lod-dt-root .lod-dt-group-toggle:focus-visible {
outline: 2px solid var(--brand-default, var(--brand-default));
outline-offset: -2px;
}
.lod-dt-group-chevron {
flex: 0 0 auto;
width: 0;
height: 0;
border-left: 5px solid var(--brand-default);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transform: rotate(90deg);
transition: transform var(--duration-fast) var(--ease-standard, ease);
}
.lod-dt-group-row.is-collapsed .lod-dt-group-chevron { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
.lod-dt-group-chevron { transition: none; }
}
.lod-dt-group-row.is-collapsed .lod-dt-group-cell { border-bottom-color: var(--color-border); }
.lod-dt-group-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lod-dt-group-count {
display: inline-block;
flex: 0 0 auto;
min-width: 20px;
padding: var(--space-px) var(--space-2);
background: var(--brand-default);
color: #fff;
border-radius: var(--radius-circular);
font-size: var(--font-size-xs);
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
line-height: 1.4;
text-align: center;
}
.lod-dt-tf-row { background: var(--color-surface); }
.lod-dt-tf {
position: sticky;
bottom: 0;
z-index: 2;
background: var(--color-surface);
border-top: 2px solid var(--color-border);
padding: var(--space-2) var(--space-3);
font-weight: var(--fw-semibold);
color: var(--color-text);
font-variant-numeric: tabular-nums;
font-size: var(--font-size-sm);
}
.lod-dt-tf--empty { background: var(--color-surface); }
.lod-dt-tf-prefix {
color: var(--color-text-tertiary);
font-weight: var(--fw-regular);
margin-right: 4px;
}
.lod-dt-fi-pop {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.06);
z-index: 1000;
max-height: 360px;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: inherit;
}
.lod-dt-fi-pop-head {
display: flex;
gap: var(--space-1);
padding: var(--space-1-5);
border-bottom: 1px solid var(--color-border-light);
background: var(--color-bg-muted);
}
.lod-dt-fi-pop-head button {
flex: 1;
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
font-family: inherit;
font-weight: var(--fw-semibold);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
cursor: pointer;
transition: background var(--duration-snap) var(--ease-soft), color var(--duration-snap) var(--ease-soft);
}
.lod-dt-fi-pop-head button:hover { background: var(--color-bg-hover); color: var(--color-text); }
.lod-dt-fi-pop-fertig {
margin-left: auto;
font-weight: var(--fw-semibold);
color: var(--brand-default);
}
.lod-dt-fi-pop-list {
overflow-y: auto;
padding: var(--space-1);
flex: 1;
}
.lod-dt-fi-pop-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-2-5);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-text);
}
.lod-dt-fi-pop-item:hover { background: var(--color-bg-hover); }
.lod-dt-fi-pop-item.is-required { opacity: 0.7; cursor: not-allowed; }
.lod-dt-fi-pop-item input[type="checkbox"] {
margin: 0;
cursor: pointer;
accent-color: var(--brand-default);
}
.lod-dt-fi-pop-empty {
padding: var(--space-4);
text-align: center;
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
}
.lod-dt-pop-row {
display: flex;
align-items: center;
gap: var(--space-1);
}
.lod-dt-pop-opt {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1;
min-width: 0;
padding: var(--space-1-5) var(--space-2);
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-size: var(--font-size-sm);
font-family: inherit;
text-align: left;
cursor: pointer;
}
.lod-dt-pop-opt:hover { background: var(--color-bg-hover); }
.lod-dt-pop-opt.is-current { font-weight: var(--fw-semibold); }
.lod-dt-pop-opt-lbl {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lod-dt-pop-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
flex-shrink: 0;
color: var(--brand-default);
}
.lod-dt-pop-del {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-tertiary);
font-size: 13px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
opacity: 0;
transition: opacity var(--duration-quick) var(--ease-soft), background var(--duration-snap) var(--ease-soft);
}
.lod-dt-pop-row:hover .lod-dt-pop-del,
.lod-dt-pop-del:focus-visible { opacity: 1; }
.lod-dt-pop-del:hover { background: var(--status-danger-bg); color: var(--status-danger-fg); }
@media (hover: none) { .lod-dt-pop-del { opacity: 1; } }
.lod-dt-fi-pop-foot {
padding: var(--space-1);
border-top: 1px solid var(--color-border-light);
}
.lod-dt-pop-save {
display: flex;
align-items: center;
gap: var(--space-1-5);
width: 100%;
padding: var(--space-1-5) var(--space-2);
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--brand-default);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
font-family: inherit;
text-align: left;
cursor: pointer;
}
.lod-dt-pop-save:hover { background: var(--color-bg-hover); }
.lod-dt-titel { font-weight: var(--fw-semibold); color: var(--color-text); }
.lod-dt-mini-badge {
display: inline-block;
margin-left: 6px;
padding: var(--space-px) var(--space-1-5);
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
border-radius: var(--radius-circular);
font-size: 10px;
font-weight: var(--fw-semibold);
line-height: 1.5;
vertical-align: middle;
}
.lod-dt-mini-badge--danger {
background: var(--status-danger-bg);
color: var(--status-danger-fg);
}
.lod-dt-prio {
display: inline-block;
padding: var(--space-xxs) var(--space-2);
border-radius: var(--radius-circular);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
line-height: 1.4;
}
.lod-dt-prio--hoch { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.lod-dt-prio--normal { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.lod-dt-prio--niedrig { background: var(--status-info-bg); color: var(--status-info-fg); }
.lod-dt-check {
display: inline-block;
color: var(--status-success-fg);
font-weight: var(--fw-bold);
}
@media (max-width: 999px) {
.lod-dt-root .lod-dt-tb-btn { height: auto; }
}
@media (max-width: 599px) {
.lod-dt-th-inner { padding: 6px 8px 4px; }
.lod-dt-th-filter { padding: 0 8px 6px; }
.lod-dt-td { padding: 8px; }
.lod-dt-pinned-left:not(.lod-dt-pinned--pflicht),
.lod-dt-pinned-right { display: none; }
.lod-dt-pinned-left.lod-dt-pinned--pflicht {
max-width: 42vw;
overflow: hidden;
}
.lod-dt-pinned-left.lod-dt-pinned--pflicht table {
width: 100%;
table-layout: fixed;
}
.lod-dt-pinned-left.lod-dt-pinned--pflicht col { width: auto !important; }
.lod-dt-bulkbar { flex-wrap: wrap; }
.lod-dt-root .lod-dt-bulk-actions { width: 100%; flex-wrap: wrap; }
.lod-dt-groupbar { padding: var(--space-2); gap: var(--space-1-5); row-gap: var(--space-2); }
.lod-dt-root .lod-dt-tb-btn .lod-dt-tb-lbl { display: none; }
.lod-dt-root [data-dt-views-btn] { display: none; }
.lod-dt-root .lod-dt-group-toggle { min-height: 40px; padding: var(--space-2); }
.lod-dt-group-cell > .lod-dt-group-label { padding-left: var(--space-2); }
}
/*== /styles/components/lists/bulk-bar.css ==*/
.lod-bulkbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
flex-shrink: 0;
min-height: 48px;
padding: var(--space-2) var(--space-3);
background: var(--lod-darkblue-50);
border-bottom: 1px solid var(--lod-gray-200);
}
.lod-bulkbar.hidden { display: none; }
.lod-bulkbar-count {
font-weight: var(--fw-semibold);
color: var(--lod-darkblue-900);
padding-right: var(--space-3);
margin-right: var(--space-1);
border-right: 1px solid var(--lod-gray-200);
}
.lod-bulkbar-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.lod-bulkbar-cancel { margin-left: auto; }
@media (max-width: 599px) {
.lod-bulkbar { gap: var(--space-1-5); padding: var(--space-2); }
.lod-bulkbar-count {
width: 100%;
padding-right: 0;
margin-right: 0;
border-right: none;
}
.lod-bulkbar-cancel { margin-left: 0; }
}
/*== /styles/components/buttons/fk-buchen.css ==*/
.fk-buchen {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-1-5) var(--space-4);
background: var(--brand-default);
color: var(--brand-text-on);
border: none;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
white-space: nowrap;
}
.fk-buchen:hover { background: var(--brand-hover); }
@media (max-width: 999px) {
.fk-buchen { min-height: var(--touch-ziel); }
}
.fk-buchen--cancel {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border-hover);
}
.fk-buchen--cancel .ui-ico img { filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%); }
.fk-buchen--cancel:hover {
background: var(--color-text);
color: var(--brand-text-on);
border-color: var(--color-text);
}
.fk-buchen--cancel:hover .ui-ico img { filter: brightness(0) invert(1); }
.fk-buchen--danger {
background: var(--status-danger-fg);
color: var(--brand-text-on);
border: 1px solid var(--status-danger-fg);
}
.fk-buchen--danger:hover {
background: var(--status-danger-fg);
filter: brightness(0.9);
}
/*== /styles/components/forms/zeit-controls.css ==*/
.zeit-panel-close {
background: transparent;
border: none;
color: var(--color-text-muted);
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
}
.zeit-panel-close:hover { background: var(--color-bg-subtle); color: var(--color-text); }
@media (max-width: 999px) {
.zeit-select, .zeit-input { min-height: var(--touch-ziel); }
}
.zeit-select, .zeit-input {
width: 100%;
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-size: var(--font-size-base);
background: var(--color-bg);
color: var(--color-text);
}
.zeit-select:focus, .zeit-input:focus {
outline: none;
border-color: var(--color-border);
border-bottom-color: var(--brand-default);
}
/*== /styles/components/forms/field-limit.css ==*/
.field-limit-counter {
display: none;
font-size: 11px;
line-height: 1;
color: var(--lod-muted);
text-align: right;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.field-limit-counter.is-visible { display: block; }
.field-limit-counter.is-full {
color: var(--lod-danger);
font-weight: 600;
}
/*== /styles/components/forms/option-card.css ==*/
.app-option-card {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
cursor: pointer;
transition: border-color var(--duration-quick) var(--ease-soft), background-color var(--duration-quick) var(--ease-soft);
}
/*== /styles/components/toolbar/toolbar.css ==*/
.app-scope .app-kanban-toolbar,
.app-scope .app-page-toolbar {
padding: var(--space-3) var(--space-4-5);
border-bottom: 1px solid var(--lod-gray-100);
background: var(--color-surface);
position: relative;
}
.app-scope .app-toolbar {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: nowrap;
min-height: 36px;
overflow: hidden;
min-width: 0;
}
.app-scope .app-toolbar-slot {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.app-scope .app-toolbar-left { flex: 0 0 auto; min-width: 0; justify-content: flex-start; margin: 0; padding: 0; }
.app-scope .app-toolbar-center { flex: 0 0 auto; justify-content: flex-start; margin: 0; padding: 0; }
.app-scope .app-toolbar-right { flex: 0 0 auto; justify-content: flex-start; margin: 0; padding: 0; }
.app-scope .app-toolbar-flex { flex: 1 1 auto; min-width: 0; display: block; }
.app-scope .app-toolbar-slot:empty { display: none; }
.app-scope [data-tb-messung],
.app-scope [data-tb-messung] * { transition: none !important; }
@media (max-width: 999px) {
.app-scope .app-toolbar .app-segmented[data-toolbar-state-segmented="set-state"],
.app-scope .app-toolbar .app-segmented[data-toolbar-state-segmented="set-state-extra"] {
display: none;
}
.app-scope .app-toolbar .app-segmented-wrap[data-toolbar-state-wrap="set-state"] .app-segmented-collapsed,
.app-scope .app-toolbar .app-segmented-wrap[data-toolbar-state-wrap="set-state-extra"] .app-segmented-collapsed {
display: inline-flex;
}
.app-scope .app-toolbar-center:not(:has(.app-segmented-wrap)):not(:has(> :not(.app-segmented))) {
display: none;
}
}
:where(.app-scope, .page-header, .lod-section-mobile-toolbar, .app-month-nav-row) .app-board-switcher {
display: inline-flex;
align-items: center;
gap: var(--space-2-5);
padding: 0 var(--space-3) 0 var(--space-2-5);
height: 36px;
border-radius: var(--radius-lg);
background: var(--lod-gray-50);
border: 1px solid transparent;
box-sizing: border-box;
cursor: pointer;
min-width: 0;
width: 300px;
flex-shrink: 0;
transition: background var(--duration-quick), border-color var(--duration-quick), box-shadow var(--duration-quick);
}
:where(.app-scope, .page-header, .lod-section-mobile-toolbar, .app-month-nav-row) .app-board-switcher:hover { background: #fff; border-color: var(--lod-darkblue-300); }
:where(.app-scope, .page-header, .lod-section-mobile-toolbar, .app-month-nav-row) .app-board-switcher:focus-visible { outline: none; background: #fff; border-color: var(--lod-darkblue-300); box-shadow: var(--lod-shadow-focus); }
:where(.app-scope, .page-header, .lod-section-mobile-toolbar, .app-month-nav-row) .app-board-switcher[aria-expanded="true"] { background: #fff; border-color: var(--lod-darkblue-300); }
:where(.app-scope, .page-header, .lod-section-mobile-toolbar, .app-month-nav-row) .app-board-switcher-label {
font-size: var(--font-size-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lod-gray-500);
line-height: 1;
flex-shrink: 0;
}
:where(.app-scope, .page-header, .lod-section-mobile-toolbar, .app-month-nav-row) .app-board-switcher-title {
font-size: 15px;
font-weight: var(--fw-semibold);
color: var(--lod-darkblue);
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
:where(.app-scope, .page-header, .lod-section-mobile-toolbar, .app-month-nav-row) .app-board-switcher img { opacity: 0.6; flex-shrink: 0; }
:where(.app-scope, .page-header, .lod-section-mobile-toolbar, .app-month-nav-row) .app-board-switcher .app-board-switcher-icon {
display: none;
}
:where(.app-scope, .app-month-nav-row) .app-month-switcher-trigger {
width: auto;
min-width: 0;
flex-shrink: 0;
}
:where(.app-scope, .app-month-nav-row) .app-month-switcher-trigger .app-board-switcher-title {
flex: 0 0 auto;
overflow: visible;
}
@media (max-width: 999px) {
.app-board-switcher { min-height: var(--touch-ziel); }
}
.app-scope .app-search-input {
position: relative;
display: flex;
align-items: center;
gap: var(--space-1-5);
flex: 0 0 440px;
min-width: 200px;
max-width: 600px;
padding: 0 var(--space-3);
height: 36px;
box-sizing: border-box;
border-radius: var(--radius-lg);
background: var(--lod-gray-50);
border: 1px solid transparent;
}
@media (max-width: 999px) {
.app-scope .app-search-input { flex-basis: 240px; max-width: 360px; min-width: 160px; }
.app-scope .app-search-input { height: auto; min-height: calc(var(--touch-ziel) + 2px); }
.app-scope .app-search-input-field { min-height: var(--touch-ziel); }
.app-scope .app-search-input-clear {
padding: calc((var(--touch-ziel) - 18px) / 2);
margin: calc((var(--touch-ziel) - 18px) / -2);
box-sizing: content-box;
}
}
@media (max-width: 599px) {
.app-scope .app-search-input {
flex: 1 1 0 !important;
min-width: 100px !important;
max-width: none !important;
width: auto !important;
}
.app-scope .app-search-input-field { font-size: 16px; }
.app-scope .app-toolbar-center {
display: contents;
}
.app-scope .app-toolbar-left {
flex: 1 1 auto;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.app-scope .app-toolbar-left::-webkit-scrollbar { display: none; }
.app-scope .app-toolbar-flex { display: none; }
.app-scope .app-toolbar-center > * {
flex-shrink: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.app-scope .app-toolbar-center > *::-webkit-scrollbar { display: none; }
.app-scope .app-toolbar .app-tb-btn-label { display: none; }
.app-scope .app-toolbar .app-tb-btn:has(> .app-tb-btn-label),
.app-scope .app-toolbar .btn:has(> .app-tb-btn-label) {
width: var(--touch-ziel);
min-width: var(--touch-ziel);
padding: 0;
justify-content: center;
}
}
.app-scope .app-search-input:focus-within {
background: var(--color-surface);
border-color: var(--lod-darkblue-300);
box-shadow: var(--lod-shadow-focus);
}
.app-scope .app-search-input-icon { width: 14px; height: 14px; opacity: 0.5; flex-shrink: 0; }
.app-scope .app-search-input-field {
flex: 1;
border: none;
background: transparent;
font-size: var(--fs-body);
color: var(--lod-darkblue);
min-width: 0;
text-overflow: ellipsis;
}
.app-scope .app-search-input-field:focus { outline: none; }
.app-scope .app-search-input-field::placeholder { color: var(--lod-gray-500); text-overflow: ellipsis; }
.app-scope .app-search-input-clear {
width: 18px; height: 18px;
border-radius: var(--radius-sm);
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.app-scope .app-search-input-clear:hover { background: var(--lod-gray-100); }
.app-scope .app-search-input-clear img { width: 10px; height: 10px; opacity: 0.55; }
.app-scope .app-segmented {
position: relative;
display: inline-flex;
align-items: center;
padding: 3px;
height: 36px;
box-sizing: border-box;
border-radius: var(--radius-lg);
background: var(--lod-gray-100);
border: 1px solid var(--lod-gray-200);
flex-shrink: 0;
}
@media (max-width: 599px) {
.app-scope .app-segmented {
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.app-scope .app-segmented::-webkit-scrollbar { display: none; }
}
.app-scope .app-segmented-thumb {
position: absolute;
top: 3px;
bottom: 3px;
left: 0;
width: var(--pill-thumb-w, 0px);
transform: translate3d(var(--pill-thumb-x, 0px), 0, 0);
background: var(--lod-darkblue-100);
border: 1px solid var(--lod-darkblue-300);
border-radius: 5px;
box-sizing: border-box;
transition: transform var(--duration-bounce) var(--ease-drawer),
width var(--duration-bounce) var(--ease-drawer);
pointer-events: none;
opacity: 0;
}
.app-scope .app-segmented[data-thumb-ready="true"] .app-segmented-thumb { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.app-scope .app-segmented-thumb { transition: none; }
}
.app-scope .app-segmented-btn {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-1) var(--space-3-5);
border-radius: var(--radius-md);
background: transparent;
color: var(--lod-gray-700);
font-size: 12.5px;
font-weight: var(--fw-medium);
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition: color var(--duration-normal) var(--ease-soft), font-weight var(--duration-normal) var(--ease-soft);
}
@media (max-width: 999px) {
.app-scope .app-segmented { height: 44px; }
.app-scope .app-segmented-btn { min-height: var(--touch-ziel); }
}
.app-scope .app-segmented-btn:hover { color: var(--lod-darkblue); }
.app-scope .app-segmented-btn.is-active {
color: var(--lod-darkblue);
font-weight: var(--fw-semibold);
}
.app-scope .app-segmented-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--lod-turquoise);
}
.app-scope .app-segmented-wrap {
display: inline-flex;
align-items: center;
min-width: 0;
flex-shrink: 0;
}
.app-scope .app-segmented-legende {
flex-shrink: 0;
margin-inline-end: var(--space-1-5);
color: var(--color-text-muted);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
white-space: nowrap;
}
@media (max-width: 999px) {
.app-scope .app-segmented-legende { display: none; }
}
.app-scope .app-segmented-wrap .app-segmented-collapsed {
display: none;
gap: var(--space-1-5);
background: var(--lod-darkblue-100);
border-color: var(--lod-darkblue-300);
color: var(--lod-darkblue);
font-weight: var(--fw-semibold);
}
.app-scope .app-segmented-collapsed:hover { border-color: var(--lod-darkblue-300); background: var(--lod-darkblue-100); }
.app-scope .app-segmented-collapsed-label { white-space: nowrap; }
.app-scope .app-segmented-collapsed img { opacity: 0.6; flex-shrink: 0; }
.app-scope .app-tb-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: 0 var(--space-3);
height: 36px;
box-sizing: border-box;
border-radius: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--lod-gray-200);
color: var(--lod-darkblue);
font-size: 12.5px;
font-weight: var(--fw-medium);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.app-scope .app-tb-btn:hover { border-color: var(--lod-darkblue-300); }
.app-scope .app-tb-btn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.app-scope .app-tb-btn.has-value { background: var(--lod-darkblue-100); border-color: var(--lod-darkblue-300); }
.app-scope .app-tb-btn img { opacity: 0.6; flex-shrink: 0; }
.app-scope .app-tb-btn strong { font-weight: var(--fw-semibold); }
.app-scope .app-tb-btn-icon {
width: 36px;
padding: 0;
justify-content: center;
gap: 0;
}
@media (max-width: 999px) {
.app-scope .app-tb-btn { min-height: var(--touch-ziel); }
.app-scope .app-tb-btn-icon { min-width: var(--touch-ziel); }
}
.app-scope .app-tb-sort-label { font-weight: var(--fw-medium); }
.app-scope .app-tb-btn[data-toolbar-action="open-grouping"] { min-width: 210px; justify-content: flex-start; }
.app-scope .app-tb-btn[data-toolbar-action="open-grouping"] > span { flex: 1 1 auto; }
.app-scope .app-tb-btn[data-toolbar-action="open-grouping"] > img:last-child { margin-left: auto; }
.app-scope .app-filter-trigger-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-grouped-count);
background: var(--lod-darkblue);
color: var(--lod-white);
font-size: 10.5px;
font-weight: var(--fw-bold);
line-height: 1;
}
.app-scope .app-counter-block {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-3-5);
font-size: var(--font-size-sm);
color: var(--lod-gray-500);
white-space: nowrap;
flex-shrink: 0;
}
.app-scope .app-counter-block:empty { display: none; }
@media (max-width: 599px) {
.app-scope .app-counter-block {
flex-wrap: wrap;
flex-shrink: 1;
min-width: 0;
row-gap: var(--space-1-5);
}
.app-scope .app-toolbar[data-tb-tier] .app-counter-block { display: flex; }
.app-scope .app-toolbar[data-tb-tier] .app-counter-item[data-counter-optional] { display: none; }
.app-scope .app-toolbar:has(.app-counter-block) { flex-wrap: wrap; }
.app-scope .app-toolbar .app-toolbar-right:has(.app-counter-block) { display: contents; }
.app-scope .app-toolbar > .app-counter-block,
.app-scope .app-toolbar .app-toolbar-right > .app-counter-block {
flex: 1 0 100%;
justify-content: flex-end;
min-width: 0;
order: 9;
}
}
.app-scope .app-toolbar-right [data-counter-anchor="end"] { order: 9; }
.app-scope .app-counter-item {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
justify-content: flex-start;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.app-scope .app-counter-value {
font-weight: var(--fw-bold);
font-size: var(--fs-body);
color: var(--lod-darkblue);
text-align: right;
min-width: 40px;
}
.app-scope .app-counter-label { color: var(--lod-gray-500); }
.app-scope .app-counter-item.tone-overdue .app-counter-value,
.app-scope .app-counter-item.tone-overdue .app-counter-label { color: var(--lod-danger); }
.app-scope .app-counter-item.tone-overdue img { opacity: 0.9; }
.app-scope .app-counter-item.tone-muted .app-counter-value { color: var(--lod-gray-500); }
.app-scope .app-counter-item.tone-success .app-counter-value { color: var(--lod-turquoise-900); }
.app-scope .app-counter-item.tone-warn .app-counter-value { color: var(--lod-amber-700); }
.app-scope .app-counter-item.tone-brand .app-counter-value { color: var(--lod-turquoise); }
@media (max-width: 999px) {
:where(.app-scope, .page-header) .app-kanban-newtask-btn,
:where(.app-scope, .page-header) .app-cta-btn { min-height: var(--touch-ziel); }
}
:where(.app-scope, .page-header) .app-kanban-newtask-btn,
:where(.app-scope, .page-header) .app-cta-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: 0 var(--space-3-5);
height: 36px;
box-sizing: border-box;
border-radius: var(--radius-lg);
background: var(--lod-darkblue);
color: var(--lod-white);
font-weight: var(--fw-semibold);
font-size: var(--fs-body);
border: none;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
:where(.app-scope, .page-header) .app-kanban-newtask-btn:hover,
:where(.app-scope, .page-header) .app-cta-btn:hover { background: var(--lod-turquoise); color: var(--lod-darkblue-900); }
:where(.app-scope, .page-header) .app-kanban-newtask-btn img,
:where(.app-scope, .page-header) .app-cta-btn img { filter: brightness(0) invert(1); }
:where(.app-scope, .page-header) .app-kanban-newtask-btn:hover img,
:where(.app-scope, .page-header) .app-cta-btn:hover img { filter: none; }
:where(.app-scope, .page-header) .app-cta-btn.btn-outline {
background: var(--card-bg, #fff);
color: var(--lod-darkblue-900);
border: 1px solid var(--color-border);
}
:where(.app-scope, .page-header) .app-cta-btn.btn-outline:hover {
background: var(--bg-secondary);
border-color: var(--color-border-hover);
color: var(--lod-darkblue-900);
}
:where(.app-scope, .page-header) .app-cta-btn.btn-outline img,
:where(.app-scope, .page-header) .app-cta-btn.btn-outline:hover img { filter: none; }
:where(.app-scope, .page-header) .app-kanban-newtask-btn:focus-visible,
:where(.app-scope, .page-header) .app-cta-btn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
:where(.app-scope, .page-header) .app-cta-split {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
:where(.app-scope, .page-header) .app-cta-split > .app-cta-btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
:where(.app-scope, .page-header) .app-cta-split .app-cta-split-mehr {
flex: 0 0 auto;
width: 30px;
min-width: 30px;
padding: 0;
justify-content: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.28);
}
@media (max-width: 999px) {
:where(.app-scope, .page-header) .app-cta-split .app-cta-split-mehr {
width: var(--touch-ziel);
min-width: var(--touch-ziel);
}
}
:where(.app-scope, .page-header) .app-cta-split .app-cta-split-mehr img {
width: 14px;
height: 14px;
}
.app-scope [data-tb-tier="1"] .app-counter-item[data-counter-optional],
.app-scope [data-tb-tier="2"] .app-counter-item[data-counter-optional],
.app-scope [data-tb-tier="3"] .app-counter-item[data-counter-optional],
.app-scope [data-tb-tier="4"] .app-counter-item[data-counter-optional],
.app-scope [data-tb-tier="5"] .app-counter-item[data-counter-optional],
.app-scope [data-tb-tier="6"] .app-counter-item[data-counter-optional],
.app-scope [data-tb-tier="7"] .app-counter-item[data-counter-optional],
.app-scope [data-tb-tier="8"] .app-counter-item[data-counter-optional],
.app-scope [data-tb-tier="9"] .app-counter-item[data-counter-optional],
.app-scope [data-tb-tier="10"] .app-counter-item[data-counter-optional] { display: none; }
.app-scope [data-tb-tier="2"] .app-counter-block,
.app-scope [data-tb-tier="3"] .app-counter-block,
.app-scope [data-tb-tier="4"] .app-counter-block,
.app-scope [data-tb-tier="5"] .app-counter-block,
.app-scope [data-tb-tier="6"] .app-counter-block,
.app-scope [data-tb-tier="7"] .app-counter-block,
.app-scope [data-tb-tier="8"] .app-counter-block,
.app-scope [data-tb-tier="9"] .app-counter-block,
.app-scope [data-tb-tier="10"] .app-counter-block { display: none; }
.app-scope [data-tb-tier="3"] .app-tb-btn[data-toolbar-action="open-grouping"] span,
.app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-grouping"] span,
.app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-grouping"] span,
.app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-grouping"] span,
.app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-grouping"] span,
.app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-grouping"] span,
.app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-grouping"] span,
.app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-grouping"] span,
.app-scope [data-tb-tier="3"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge),
.app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge),
.app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge),
.app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge),
.app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge),
.app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge),
.app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge),
.app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge) { display: none; }
.app-scope [data-tb-tier="3"] .app-tb-btn[data-toolbar-action="open-grouping"],
.app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-grouping"],
.app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-grouping"],
.app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-grouping"],
.app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-grouping"],
.app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-grouping"],
.app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-grouping"],
.app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-grouping"],
.app-scope [data-tb-tier="3"] .app-tb-btn[data-toolbar-action="open-filter"],
.app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-filter"],
.app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-filter"],
.app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-filter"],
.app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-filter"],
.app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-filter"],
.app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-filter"],
.app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-filter"] {
min-width: 36px; width: 36px; padding: 0; justify-content: center; position: relative;
}
.app-scope [data-tb-tier="3"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child,
.app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child,
.app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child,
.app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child,
.app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child,
.app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child,
.app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child,
.app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child { display: none; }
.app-scope [data-tb-tier="3"] .app-filter-trigger-badge,
.app-scope [data-tb-tier="4"] .app-filter-trigger-badge,
.app-scope [data-tb-tier="5"] .app-filter-trigger-badge,
.app-scope [data-tb-tier="6"] .app-filter-trigger-badge,
.app-scope [data-tb-tier="7"] .app-filter-trigger-badge,
.app-scope [data-tb-tier="8"] .app-filter-trigger-badge,
.app-scope [data-tb-tier="9"] .app-filter-trigger-badge,
.app-scope [data-tb-tier="10"] .app-filter-trigger-badge { position: absolute; top: -4px; right: -4px; }
.app-scope [data-tb-tier="3"] .mt-aufg-projekt-pill,
.app-scope [data-tb-tier="4"] .mt-aufg-projekt-pill,
.app-scope [data-tb-tier="5"] .mt-aufg-projekt-pill,
.app-scope [data-tb-tier="6"] .mt-aufg-projekt-pill,
.app-scope [data-tb-tier="7"] .mt-aufg-projekt-pill,
.app-scope [data-tb-tier="8"] .mt-aufg-projekt-pill,
.app-scope [data-tb-tier="9"] .mt-aufg-projekt-pill,
.app-scope [data-tb-tier="10"] .mt-aufg-projekt-pill,
.app-scope [data-tb-tier="3"] .mt-anfr-kunde-pill,
.app-scope [data-tb-tier="4"] .mt-anfr-kunde-pill,
.app-scope [data-tb-tier="5"] .mt-anfr-kunde-pill,
.app-scope [data-tb-tier="6"] .mt-anfr-kunde-pill,
.app-scope [data-tb-tier="7"] .mt-anfr-kunde-pill,
.app-scope [data-tb-tier="8"] .mt-anfr-kunde-pill,
.app-scope [data-tb-tier="9"] .mt-anfr-kunde-pill,
.app-scope [data-tb-tier="10"] .mt-anfr-kunde-pill,
.app-scope [data-tb-tier="3"] .mt-vk-firma-pill,
.app-scope [data-tb-tier="4"] .mt-vk-firma-pill,
.app-scope [data-tb-tier="5"] .mt-vk-firma-pill,
.app-scope [data-tb-tier="6"] .mt-vk-firma-pill,
.app-scope [data-tb-tier="7"] .mt-vk-firma-pill,
.app-scope [data-tb-tier="8"] .mt-vk-firma-pill,
.app-scope [data-tb-tier="9"] .mt-vk-firma-pill,
.app-scope [data-tb-tier="10"] .mt-vk-firma-pill {
min-width: 36px;
width: 36px;
max-width: 36px;
padding: 0;
justify-content: center;
}
.app-scope [data-tb-tier="3"] .mt-aufg-projekt-pill-label,
.app-scope [data-tb-tier="4"] .mt-aufg-projekt-pill-label,
.app-scope [data-tb-tier="5"] .mt-aufg-projekt-pill-label,
.app-scope [data-tb-tier="6"] .mt-aufg-projekt-pill-label,
.app-scope [data-tb-tier="7"] .mt-aufg-projekt-pill-label,
.app-scope [data-tb-tier="8"] .mt-aufg-projekt-pill-label,
.app-scope [data-tb-tier="9"] .mt-aufg-projekt-pill-label,
.app-scope [data-tb-tier="10"] .mt-aufg-projekt-pill-label,
.app-scope [data-tb-tier="3"] .mt-anfr-kunde-pill-label,
.app-scope [data-tb-tier="4"] .mt-anfr-kunde-pill-label,
.app-scope [data-tb-tier="5"] .mt-anfr-kunde-pill-label,
.app-scope [data-tb-tier="6"] .mt-anfr-kunde-pill-label,
.app-scope [data-tb-tier="7"] .mt-anfr-kunde-pill-label,
.app-scope [data-tb-tier="8"] .mt-anfr-kunde-pill-label,
.app-scope [data-tb-tier="9"] .mt-anfr-kunde-pill-label,
.app-scope [data-tb-tier="10"] .mt-anfr-kunde-pill-label,
.app-scope [data-tb-tier="3"] .mt-vk-firma-pill-label,
.app-scope [data-tb-tier="4"] .mt-vk-firma-pill-label,
.app-scope [data-tb-tier="5"] .mt-vk-firma-pill-label,
.app-scope [data-tb-tier="6"] .mt-vk-firma-pill-label,
.app-scope [data-tb-tier="7"] .mt-vk-firma-pill-label,
.app-scope [data-tb-tier="8"] .mt-vk-firma-pill-label,
.app-scope [data-tb-tier="9"] .mt-vk-firma-pill-label,
.app-scope [data-tb-tier="10"] .mt-vk-firma-pill-label { display: none; }
.app-scope [data-tb-tier="3"] .mt-aufg-projekt-pill > img:last-child,
.app-scope [data-tb-tier="4"] .mt-aufg-projekt-pill > img:last-child,
.app-scope [data-tb-tier="5"] .mt-aufg-projekt-pill > img:last-child,
.app-scope [data-tb-tier="6"] .mt-aufg-projekt-pill > img:last-child,
.app-scope [data-tb-tier="7"] .mt-aufg-projekt-pill > img:last-child,
.app-scope [data-tb-tier="8"] .mt-aufg-projekt-pill > img:last-child,
.app-scope [data-tb-tier="9"] .mt-aufg-projekt-pill > img:last-child,
.app-scope [data-tb-tier="10"] .mt-aufg-projekt-pill > img:last-child,
.app-scope [data-tb-tier="3"] .mt-anfr-kunde-pill > img:last-child,
.app-scope [data-tb-tier="4"] .mt-anfr-kunde-pill > img:last-child,
.app-scope [data-tb-tier="5"] .mt-anfr-kunde-pill > img:last-child,
.app-scope [data-tb-tier="6"] .mt-anfr-kunde-pill > img:last-child,
.app-scope [data-tb-tier="7"] .mt-anfr-kunde-pill > img:last-child,
.app-scope [data-tb-tier="8"] .mt-anfr-kunde-pill > img:last-child,
.app-scope [data-tb-tier="9"] .mt-anfr-kunde-pill > img:last-child,
.app-scope [data-tb-tier="10"] .mt-anfr-kunde-pill > img:last-child,
.app-scope [data-tb-tier="3"] .mt-vk-firma-pill > img:last-child,
.app-scope [data-tb-tier="4"] .mt-vk-firma-pill > img:last-child,
.app-scope [data-tb-tier="5"] .mt-vk-firma-pill > img:last-child,
.app-scope [data-tb-tier="6"] .mt-vk-firma-pill > img:last-child,
.app-scope [data-tb-tier="7"] .mt-vk-firma-pill > img:last-child,
.app-scope [data-tb-tier="8"] .mt-vk-firma-pill > img:last-child,
.app-scope [data-tb-tier="9"] .mt-vk-firma-pill > img:last-child,
.app-scope [data-tb-tier="10"] .mt-vk-firma-pill > img:last-child { display: none; }
.app-scope [data-tb-tier="3"] .app-tb-sort-label,
.app-scope [data-tb-tier="4"] .app-tb-sort-label,
.app-scope [data-tb-tier="5"] .app-tb-sort-label,
.app-scope [data-tb-tier="6"] .app-tb-sort-label,
.app-scope [data-tb-tier="7"] .app-tb-sort-label,
.app-scope [data-tb-tier="8"] .app-tb-sort-label,
.app-scope [data-tb-tier="9"] .app-tb-sort-label,
.app-scope [data-tb-tier="10"] .app-tb-sort-label { display: none; }
.app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-sort"],
.app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-sort"],
.app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-sort"],
.app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-sort"],
.app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-sort"],
.app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-sort"],
.app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-sort"] { display: none; }
.app-scope [data-tb-tier="5"] .app-board-switcher-label,
.app-scope [data-tb-tier="6"] .app-board-switcher-label,
.app-scope [data-tb-tier="7"] .app-board-switcher-label,
.app-scope [data-tb-tier="8"] .app-board-switcher-label,
.app-scope [data-tb-tier="9"] .app-board-switcher-label,
.app-scope [data-tb-tier="10"] .app-board-switcher-label { display: none; }
.app-scope [data-tb-tier="5"] .app-board-switcher:not(.app-month-switcher-trigger) { width: 220px; }
.app-scope [data-tb-tier="6"] .app-board-switcher:not(.app-month-switcher-trigger) { width: 200px; }
.app-scope [data-tb-tier="7"] .app-board-switcher:not(.app-month-switcher-trigger) { width: 180px; }
.app-scope [data-tb-tier="6"] .app-kanban-newtask-btn span,
.app-scope [data-tb-tier="7"] .app-kanban-newtask-btn span,
.app-scope [data-tb-tier="8"] .app-kanban-newtask-btn span,
.app-scope [data-tb-tier="9"] .app-kanban-newtask-btn span,
.app-scope [data-tb-tier="10"] .app-kanban-newtask-btn span,
.app-scope [data-tb-tier="6"] .app-cta-btn span,
.app-scope [data-tb-tier="7"] .app-cta-btn span,
.app-scope [data-tb-tier="8"] .app-cta-btn span,
.app-scope [data-tb-tier="9"] .app-cta-btn span,
.app-scope [data-tb-tier="10"] .app-cta-btn span { display: none; }
.app-scope [data-tb-tier="6"] .app-kanban-newtask-btn,
.app-scope [data-tb-tier="7"] .app-kanban-newtask-btn,
.app-scope [data-tb-tier="8"] .app-kanban-newtask-btn,
.app-scope [data-tb-tier="9"] .app-kanban-newtask-btn,
.app-scope [data-tb-tier="10"] .app-kanban-newtask-btn,
.app-scope [data-tb-tier="6"] .app-cta-btn,
.app-scope [data-tb-tier="7"] .app-cta-btn,
.app-scope [data-tb-tier="8"] .app-cta-btn,
.app-scope [data-tb-tier="9"] .app-cta-btn,
.app-scope [data-tb-tier="10"] .app-cta-btn { width: 36px; padding: 0; justify-content: center; }
.page-header.is-primary-iconly .page-header-primary .app-kanban-newtask-btn span,
.page-header.is-primary-iconly .page-header-primary .app-cta-btn span { display: none; }
.page-header.is-primary-iconly .page-header-primary .app-kanban-newtask-btn,
.page-header.is-primary-iconly .page-header-primary .app-cta-btn { width: 36px; padding: 0; justify-content: center; }
.page-header.is-subtabs-shrink .page-header-subtabs .app-board-switcher {
flex: 0 1 300px;
width: auto;
min-width: 120px;
}
.page-header.is-subtabs-shrink .page-header-subtabs .app-board-switcher-label { display: none; }
@media (max-width: 599px) {
.app-scope .app-toolbar .app-kanban-newtask-btn span,
.app-scope .app-toolbar .app-cta-btn span { display: none; }
.app-scope .app-toolbar .app-kanban-newtask-btn,
.app-scope .app-toolbar .app-cta-btn {
min-width: var(--touch-ziel);
padding: 0;
justify-content: center;
}
}
.app-scope [data-tb-tier="5"] .app-tb-btn[data-kanban-new-phase] span,
.app-scope [data-tb-tier="6"] .app-tb-btn[data-kanban-new-phase] span,
.app-scope [data-tb-tier="7"] .app-tb-btn[data-kanban-new-phase] span,
.app-scope [data-tb-tier="8"] .app-tb-btn[data-kanban-new-phase] span,
.app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-new-phase] span,
.app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-new-phase] span,
.app-scope [data-tb-tier="5"] .app-tb-btn[data-kanban-projekt-edit] span,
.app-scope [data-tb-tier="6"] .app-tb-btn[data-kanban-projekt-edit] span,
.app-scope [data-tb-tier="7"] .app-tb-btn[data-kanban-projekt-edit] span,
.app-scope [data-tb-tier="8"] .app-tb-btn[data-kanban-projekt-edit] span,
.app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-projekt-edit] span,
.app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-projekt-edit] span { display: none; }
.app-scope [data-tb-tier="5"] .app-tb-btn[data-kanban-new-phase],
.app-scope [data-tb-tier="6"] .app-tb-btn[data-kanban-new-phase],
.app-scope [data-tb-tier="7"] .app-tb-btn[data-kanban-new-phase],
.app-scope [data-tb-tier="8"] .app-tb-btn[data-kanban-new-phase],
.app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-new-phase],
.app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-new-phase],
.app-scope [data-tb-tier="5"] .app-tb-btn[data-kanban-projekt-edit],
.app-scope [data-tb-tier="6"] .app-tb-btn[data-kanban-projekt-edit],
.app-scope [data-tb-tier="7"] .app-tb-btn[data-kanban-projekt-edit],
.app-scope [data-tb-tier="8"] .app-tb-btn[data-kanban-projekt-edit],
.app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-projekt-edit],
.app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-projekt-edit] { width: 36px; min-width: 36px; padding: 0; justify-content: center; }
.app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-new-phase],
.app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-new-phase],
.app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-projekt-edit],
.app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-projekt-edit] { display: none; }
.app-scope [data-tb-tier="7"] .app-segmented-btn,
.app-scope [data-tb-tier="8"] .app-segmented-btn,
.app-scope [data-tb-tier="9"] .app-segmented-btn,
.app-scope [data-tb-tier="10"] .app-segmented-btn { padding: 3px var(--space-2); font-size: 11.5px; }
.app-scope [data-tb-tier="8"] .app-board-switcher-title,
.app-scope [data-tb-tier="9"] .app-board-switcher-title,
.app-scope [data-tb-tier="10"] .app-board-switcher-title { display: none; }
.app-scope [data-tb-tier="8"] .app-board-switcher,
.app-scope [data-tb-tier="9"] .app-board-switcher,
.app-scope [data-tb-tier="10"] .app-board-switcher {
width: 36px; min-width: 36px; max-width: 36px;
padding: 0; justify-content: center;
}
.app-scope [data-tb-tier="8"] .app-board-switcher > img:last-child,
.app-scope [data-tb-tier="9"] .app-board-switcher > img:last-child,
.app-scope [data-tb-tier="10"] .app-board-switcher > img:last-child { display: none; }
.app-scope [data-tb-tier="8"] .app-board-switcher::before,
.app-scope [data-tb-tier="9"] .app-board-switcher::before,
.app-scope [data-tb-tier="10"] .app-board-switcher::before {
content: '';
width: 16px; height: 16px;
background: url('/assets/icons/fluent/board_24_regular.svg') no-repeat center / contain;
opacity: 0.7;
}
.app-scope [data-tb-tier="8"] .app-month-switcher-trigger::before,
.app-scope [data-tb-tier="9"] .app-month-switcher-trigger::before,
.app-scope [data-tb-tier="10"] .app-month-switcher-trigger::before {
background-image: url('/assets/icons/fluent/calendar_ltr_24_regular.svg');
}
@media (max-width: 599px) {
.app-scope [data-tb-tier="8"] .app-board-switcher[data-kanban-board-title-host],
.app-scope [data-tb-tier="9"] .app-board-switcher[data-kanban-board-title-host],
.app-scope [data-tb-tier="10"] .app-board-switcher[data-kanban-board-title-host] {
width: auto;
min-width: var(--touch-ziel);
max-width: 176px;
padding: 0 var(--space-2);
justify-content: flex-start;
gap: var(--space-1-5);
}
.app-scope [data-tb-tier="8"] .app-board-switcher[data-kanban-board-title-host] .app-board-switcher-title,
.app-scope [data-tb-tier="9"] .app-board-switcher[data-kanban-board-title-host] .app-board-switcher-title,
.app-scope [data-tb-tier="10"] .app-board-switcher[data-kanban-board-title-host] .app-board-switcher-title {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-scope [data-tb-tier="8"] .app-board-switcher[data-kanban-board-title-host] .app-board-switcher-icon,
.app-scope [data-tb-tier="9"] .app-board-switcher[data-kanban-board-title-host] .app-board-switcher-icon,
.app-scope [data-tb-tier="10"] .app-board-switcher[data-kanban-board-title-host] .app-board-switcher-icon {
display: block;
width: 16px;
height: 16px;
}
.app-scope [data-tb-tier="8"] .app-board-switcher[data-kanban-board-title-host]::before,
.app-scope [data-tb-tier="9"] .app-board-switcher[data-kanban-board-title-host]::before,
.app-scope [data-tb-tier="10"] .app-board-switcher[data-kanban-board-title-host]::before {
content: none;
}
}
.app-scope [data-tb-tier="8"] [data-app-month-nav],
.app-scope [data-tb-tier="9"] [data-app-month-nav],
.app-scope [data-tb-tier="10"] [data-app-month-nav] { display: none; }
.app-scope [data-tb-tier="9"] .app-segmented,
.app-scope [data-tb-tier="10"] .app-segmented { display: none; }
.app-scope [data-tb-tier="9"] .app-segmented-wrap .app-segmented-collapsed,
.app-scope [data-tb-tier="10"] .app-segmented-wrap .app-segmented-collapsed { display: inline-flex; }
.app-scope [data-tb-tier="9"] .app-search-input { min-width: 180px; }
.app-scope [data-tb-tier="10"] .app-search-input {
max-width: 240px;
min-width: 0;
flex: 1 1 120px;
}
@media (min-width: 600px) {
.app-scope [data-tb-tier="10"] .app-toolbar-left { overflow-x: hidden; flex-shrink: 1; }
}
.app-scope [data-tb-tier="10"] .app-segmented-collapsed-label,
.app-scope [data-tb-tier="10"] .app-segmented-collapsed > img { display: none; }
.app-scope [data-tb-tier="10"] .app-segmented-wrap .app-segmented-collapsed {
width: 36px;
min-width: 36px;
padding: 0;
justify-content: center;
}
.app-scope [data-tb-tier="10"] .app-segmented-collapsed::before {
content: '';
width: 16px; height: 16px;
background: url('/assets/icons/fluent/flag_24_regular.svg') no-repeat center / contain;
opacity: 0.75;
}
.app-scope [data-tb-tier="10"] .app-segmented-collapsed[data-toolbar-state-menu="set-state-right"]::before {
background-image: url('/assets/icons/fluent/layer_24_regular.svg');
}
.app-scope [data-tb-tier="10"] .app-segmented-collapsed[data-toolbar-state-menu="set-state-extra"]::before {
background-image: url('/assets/icons/fluent/group_24_regular.svg');
}
.app-scope .app-tb-firmachip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
height: 28px;
padding: 0 var(--space-2-5);
border-radius: var(--radius-pill);
background: var(--lod-darkblue-50);
border: 1px solid var(--lod-darkblue-100);
color: var(--lod-darkblue);
font-size: 12.5px;
font-weight: var(--fw-medium);
cursor: pointer;
white-space: nowrap;
min-width: 0;
max-width: 240px;
}
.app-scope .app-tb-firmachip:hover { background: var(--lod-darkblue-100); }
@media (max-width: 999px) {
.app-scope .app-tb-firmachip { height: auto; min-height: var(--touch-ziel); }
}
.app-scope .app-tb-firmachip:focus-visible {
outline: 2px solid var(--lod-darkblue);
outline-offset: 1px;
}
.app-scope .app-tb-firmachip > span:first-child {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.app-scope .app-tb-firmachip-x { font-size: var(--fs-badge); opacity: 0.7; }
.app-scope .app-tb-firmachip:hover .app-tb-firmachip-x { opacity: 1; }
.app-scope [data-tb-tier="3"] .app-tb-firmachip,
.app-scope [data-tb-tier="4"] .app-tb-firmachip,
.app-scope [data-tb-tier="5"] .app-tb-firmachip { max-width: 150px; }
.app-scope [data-tb-tier="6"] .app-tb-firmachip,
.app-scope [data-tb-tier="7"] .app-tb-firmachip,
.app-scope [data-tb-tier="8"] .app-tb-firmachip,
.app-scope [data-tb-tier="9"] .app-tb-firmachip,
.app-scope [data-tb-tier="10"] .app-tb-firmachip { max-width: 84px; }
.app-scope [data-tb-tier] .view-switcher--toolbar .anfr-view-switcher-btn {
padding-left: var(--space-2); padding-right: var(--space-2); font-size: 11.5px;
}
.app-scope [data-tb-tier="6"] .view-switcher--toolbar .anfr-view-switcher-btn span,
.app-scope [data-tb-tier="7"] .view-switcher--toolbar .anfr-view-switcher-btn span,
.app-scope [data-tb-tier="8"] .view-switcher--toolbar .anfr-view-switcher-btn span,
.app-scope [data-tb-tier="9"] .view-switcher--toolbar .anfr-view-switcher-btn span,
.app-scope [data-tb-tier="10"] .view-switcher--toolbar .anfr-view-switcher-btn span {
display: inline-block; max-width: 72px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; vertical-align: middle;
}
/*== /styles/components/toolbar/filter-popover.css ==*/
.app-filter-popover {
padding: var(--space-3-5) var(--space-4) var(--space-2-5);
font-family: var(--lod-font-sans);
min-width: min(360px, calc(100vw - 24px));
max-width: 440px;
}
.app-filter-popover-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3-5) var(--space-4-5);
}
.app-filter-popover-section-title {
margin: 0 0 8px;
font-size: var(--font-size-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lod-gray-500);
}
.app-filter-popover-section[data-filter-popover-section="quick"],
.app-filter-popover-section[data-filter-popover-section="schnell"],
.app-filter-popover-section[data-filter-popover-section="herkunft"],
.app-filter-popover-section[data-filter-popover-section="mitarbeiter"],
.app-filter-popover-section[data-filter-popover-section="phase"],
.app-filter-popover-section[data-filter-popover-section="projekt"],
.app-filter-popover-section[data-filter-popover-section="status"],
.app-filter-popover-section[data-filter-popover-section="aufgabengeber"],
.app-filter-popover-section[data-filter-popover-section="kunde"],
.app-filter-popover-section[data-filter-popover-section="kontakt"],
.app-filter-popover-section[data-filter-popover-section="projektleiter"],
.app-filter-popover-section[data-filter-popover-section="betreff"],
.app-filter-popover-section[data-filter-popover-section="abrechnungsart"],
.app-filter-popover-section[data-filter-popover-section="besitzer"],
.app-filter-popover-section[data-filter-popover-section="attention"],
.app-filter-popover-section[data-filter-popover-section="kategorie"],
.app-filter-popover-section[data-filter-popover-section="autor"],
.app-filter-popover-section[data-filter-popover-section="keyword"] {
grid-column: 1 / -1;
}
.app-filter-popover-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-1-5);
}
.app-filter-popover-chips[data-fp-searchable-list] {
max-height: 180px;
overflow-y: auto;
padding: var(--space-1);
border: 1px solid var(--lod-gray-100);
border-radius: var(--radius-md);
background: #fff;
transition: max-height var(--duration-fast), padding var(--duration-fast), border-color var(--duration-fast);
}
.app-filter-popover-chips[data-fp-searchable-list].is-empty {
max-height: 0;
padding: 0;
border-color: transparent;
}
.app-filter-popover [data-fp-hidden] { display: none; }
.app-f-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: 5px var(--space-2-5);
border-radius: var(--radius-md);
background: #fff;
border: 1px solid var(--lod-gray-200);
color: var(--lod-gray-700);
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
cursor: pointer;
}
.app-f-chip:hover { border-color: var(--lod-darkblue-300); color: var(--lod-darkblue); }
.app-f-chip.is-active {
background: var(--lod-darkblue);
color: #fff;
border-color: var(--lod-darkblue);
}
.app-f-chip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.app-f-chip-avatar {
gap: var(--space-2);
padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-1);
}
.app-f-chip-avatar .avatar-slot,
.app-f-chip-avatar .avatar {
width: 20px;
height: 20px;
font-size: 9px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
box-sizing: border-box;
}
.app-f-chip-avatar .avatar-slot > .avatar,
.app-f-chip-avatar .avatar-slot > img {
width: 100%;
height: 100%;
font-size: 9px;
border-radius: 50%;
object-fit: cover;
}
.app-f-chip-avatar .avatar {
color: #fff;
font-weight: var(--fw-semibold);
text-transform: uppercase;
}
.app-f-chip-avatar .avatar.empty {
background: var(--lod-gray-200);
}
.app-f-chip-avatar .avatar.empty img {
width: 60%; height: 60%; opacity: 0.55;
}
.app-f-chip-avatar.is-active .avatar,
.app-f-chip-avatar.is-active .avatar-slot {
box-shadow: 0 0 0 1.5px #fff;
}
.app-filter-popover-searchbox {
margin-bottom: var(--space-1-5);
padding: var(--space-1-5) var(--space-2);
background: var(--lod-gray-50);
border-radius: var(--radius-md);
}
.app-filter-popover-searchbox input {
width: 100%;
border: none;
background: transparent;
font-size: 12.5px;
color: var(--lod-darkblue);
}
.app-filter-popover-searchbox input:focus { outline: none; }
.app-filter-popover-searchhint {
font-size: 11.5px;
color: var(--lod-gray-500);
font-style: italic;
padding: var(--space-1) var(--space-xxs);
}
.app-filter-popover-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--space-3-5);
padding-top: var(--space-2-5);
border-top: 1px solid var(--lod-gray-100);
}
.app-filter-popover-reset {
background: transparent;
border: none;
color: var(--lod-gray-500);
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
cursor: pointer;
padding: var(--space-1-5) var(--space-2);
border-radius: var(--radius-md);
}
.app-filter-popover-reset:hover { color: var(--lod-danger); background: var(--lod-gray-50); }
.app-filter-popover-apply {
padding: 7px var(--space-4-5);
font-size: 12.5px;
font-weight: var(--fw-semibold);
border-radius: var(--radius-md);
}
@media (max-width: 599px) {
.app-filter-popover {
min-width: 0;
max-width: none;
padding: 0;
}
.app-filter-popover-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.app-filter-popover-section[data-filter-popover-section="mitarbeiter"],
.app-filter-popover-section[data-filter-popover-section="phase"],
.app-filter-popover-section[data-filter-popover-section="status"] {
grid-column: 1;
}
}
.app-filter-popover-sheet-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2-5);
padding-bottom: max(0px, env(safe-area-inset-bottom));
}
/*== /styles/components/popups/modal.css ==*/
.app-scope .modal-backdrop {
position: fixed; inset: 0;
background: var(--lod-scrim);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: var(--z-modal-backdrop);
display: grid; place-items: center;
padding: var(--space-10) var(--space-5);
animation: app-drawerFade var(--motion-quick) var(--ease-enter) both;
}
.app-scope .modal {
background: var(--lod-white);
border: 1px solid var(--lod-gray-200);
border-radius: var(--lod-radius-lg);
box-shadow: var(--lod-shadow-lg);
display: flex; flex-direction: column;
max-height: calc(100vh - 80px);
overflow: hidden;
animation: app-modalPop var(--motion-overlay) var(--ease-enter-strong) both;
}
.app-scope .modal.size-sm { width: min(440px, 100%); }
.app-scope .modal.size-lg { width: min(820px, 100%); }
@keyframes app-modalPop {
from { transform: scale(0.96) translateY(8px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
.app-scope .modal-backdrop.is-closing { pointer-events: none; animation: app-backdropOut var(--motion-exit) var(--ease-exit) forwards; }
.app-scope .modal-backdrop.is-closing .modal { animation: app-modalOut var(--motion-exit) var(--ease-exit) forwards; }
@keyframes app-backdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes app-modalOut {
from { transform: scale(1) translateY(0); opacity: 1; }
to { transform: scale(0.97) translateY(4px); opacity: 0; }
}
.app-scope .modal-backdrop.stack-over-drawer {
z-index: var(--z-modal-backdrop-strong);
background: var(--lod-scrim-strong);
}
.app-scope .modal-backdrop.scoped {
position: absolute;
inset: 0;
}
.app-scope .modal-foot { flex-wrap: wrap; }
.app-scope .modal-head {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: var(--space-4) var(--space-4-5) var(--space-3);
border-bottom: 1px solid var(--lod-gray-100);
}
.app-scope .modal-title-area { display: flex; flex-direction: column; gap: var(--space-xxs); flex: 1; }
.app-scope .modal-title {
font-family: var(--lod-font-display);
font-size: 18px; font-weight: 700;
color: var(--lod-darkblue);
letter-spacing: 0.01em;
}
.app-scope .modal-body {
padding: var(--space-4) var(--space-6) var(--space-6);
overflow-y: auto;
flex: 1;
}
.app-scope .modal-body .modal-message {
margin: 0;
font-size: var(--font-size-md);
line-height: var(--lh-loose);
color: var(--lod-fg-1);
}
.app-scope .modal-body .modal-message + .modal-message {
margin-top: var(--space-3);
}
.app-scope .modal-body .modal-input-label { margin-bottom: var(--space-1); }
.app-scope .modal-body .modal-prompt-input {
width: 100%;
margin-top: var(--space-3);
padding: var(--space-2) var(--space-3);
font-family: inherit;
font-size: var(--font-size-md);
line-height: var(--lh-loose);
color: var(--lod-fg-1);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
resize: vertical;
}
.app-scope .modal-body .modal-prompt-input:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: 1px;
}
.app-scope .modal-foot {
padding: var(--space-3) var(--space-6);
border-top: 1px solid var(--lod-gray-100);
display: flex; gap: var(--space-2); align-items: center;
justify-content: flex-end;
background: var(--lod-gray-50);
}
/*== /styles/components/popups/board-modal.css ==*/
.bm-overlay { position: fixed; inset: 0; background: var(--lod-scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: var(--z-bm-overlay); }
.bm-overlay.hidden { display: none; }
.bm-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
min-height: 400px;
max-width: 90vw;
max-height: 85vh;
background: var(--color-surface);
z-index: var(--z-bm-modal);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-64);
display: flex;
flex-direction: column;
overflow: hidden;
}
.bm-modal.hidden { display: none; }
.bm-modal--sm { width: 440px; min-height: auto; }
.bm-modal--sm .bm-modal-body { scrollbar-gutter: auto; }
.bm-modal-header {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: var(--space-2);
}
.bm-modal-badges { display: flex; gap: var(--space-1-5); flex: 1; flex-wrap: wrap; align-items: center; }
.bm-modal-header-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.bm-modal-body { padding: var(--space-6); flex: 1; overflow-y: auto; scrollbar-gutter: stable; }
.bm-modal-footer {
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--color-border);
display: flex;
gap: var(--space-2);
}
.bm-field { display: flex; flex-direction: column; gap: var(--space-xxs); position: relative; min-width: 0; }
.bm-field-val { font-size: var(--font-size-md); display: flex; align-items: center; gap: var(--space-1); }
@media (max-width: 599px) {
.bm-modal {
width: 100vw; max-width: 100vw; min-height: 0;
border-radius: 0;
top: 0; left: 0; right: 0; bottom: 0;
height: auto; max-height: none;
transform: none;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
overscroll-behavior: contain;
background: var(--color-surface);
}
.bm-modal-body { padding: var(--space-3); overflow-x: hidden; overscroll-behavior: contain; }
.bm-modal-header { padding: var(--space-2) var(--space-3); position: sticky; top: 0; z-index: 2; background: var(--color-surface); }
.bm-modal-footer { padding: var(--space-2) var(--space-3); }
.bm-field input, .bm-field select, .bm-field textarea { max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 999px) {
.bm-modal { width: 90vw; }
.bm-modal-body { padding: var(--space-3); }
.bm-modal-header, .bm-modal-footer { padding: var(--space-xxs) var(--space-3); }
}
@media (min-width: 600px) {
.bm-overlay:not(.hidden) { animation: bmOverlayIn var(--motion-quick) var(--ease-enter) both; }
.bm-modal:not(.hidden) { animation: bmModalIn var(--motion-overlay) var(--ease-enter-strong) both; }
}
@keyframes bmOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bmModalIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/*== /styles/components/popups/lightbox.css ==*/
#lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: var(--z-popover);
display: flex;
align-items: center;
justify-content: center;
animation: lightboxOverlayIn var(--motion-quick) var(--ease-enter) both;
}
.lightbox-close {
position: absolute;
top: var(--space-4);
right: var(--space-5);
background: none;
border: none;
color: var(--brand-text-on);
font-size: 2rem;
line-height: 1;
z-index: var(--z-popover-elevated);
}
.lightbox-close:hover { color: var(--color-bg-subtle); }
.lightbox-content { position: relative; }
.lightbox-viewer {
display: flex;
flex-direction: column;
width: 90vw;
height: 92vh;
max-width: 1200px;
background: var(--color-bg-default);
border-radius: var(--radius-lg);
overflow: hidden;
animation: lightboxViewerIn var(--motion-overlay) var(--ease-enter-strong) both;
}
.lightbox-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-subtle);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.lightbox-filename {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 40%;
min-width: 0;
}
.lightbox-actions {
display: flex;
gap: var(--space-1);
align-items: center;
}
.lightbox-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--fs-meta);
color: var(--brand-default);
text-decoration: none;
background: transparent;
border: 1px solid var(--color-border);
cursor: pointer;
transition: background var(--motion-quick) var(--ease-enter);
}
.lightbox-btn:hover { background: var(--color-bg-hover); }
.lightbox-separator {
width: 1px;
height: 20px;
background: var(--color-border);
margin: 0 var(--space-1);
}
.lightbox-zoom-label {
font-size: var(--fs-meta);
color: var(--color-text-secondary);
min-width: 40px;
text-align: center;
user-select: none;
}
.lightbox-img-area {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-default);
user-select: none;
}
.lightbox-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform-origin: center center;
transition: transform var(--duration-fast) var(--ease-enter);
}
.lightbox-img-area[style*="grab"] .lightbox-img { transition: none; }
.lightbox-pdf-frame {
flex: 1;
width: 100%;
border: none;
background: var(--color-bg-default);
}
.lightbox-pdf-host {
flex: 1;
min-height: 0;
display: flex;
background: var(--color-bg-subtle);
}
.lb-pdf-scroll {
flex: 1;
min-height: 0;
overflow: auto;
padding: var(--space-4);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.lb-pdf-seite {
background: var(--color-bg-default);
box-shadow: var(--shadow-8);
border-radius: var(--radius-sm);
overflow: hidden;
flex-shrink: 0;
max-width: 100%;
}
.lb-pdf-canvas {
display: block;
max-width: 100%;
height: auto;
}
.lb-pdf-seitenzahl { min-width: 56px; white-space: nowrap; flex-shrink: 0; }
.lb-pdf-print { display: none; }
@media print {
html:has(body.lb-pdf-druckt), body.lb-pdf-druckt {
height: auto !important;
overflow: visible !important;
}
body.lb-pdf-druckt { display: block !important; }
body.lb-pdf-druckt > *:not(.lb-pdf-print) { display: none !important; }
body.lb-pdf-druckt .lb-pdf-print { display: block; }
.lb-pdf-print-seite {
display: block;
max-width: 100%;
max-height: 100vh;
margin: 0 auto;
page-break-after: always;
break-after: page;
page-break-inside: avoid;
break-inside: avoid;
}
.lb-pdf-print-seite:last-child { page-break-after: auto; break-after: auto; }
}
@media (max-width: 1399px) {
.lightbox-viewer { max-width: 1000px; }
}
@media (max-width: 999px) {
.lightbox-viewer { width: 96vw; height: 94vh; max-width: none; }
.lightbox-filename { max-width: 35%; }
.lightbox-btn-label { display: none; }
.lb-pdf-scroll { padding: var(--space-3); gap: var(--space-3); }
.lightbox-close { display: none; }
}
@media (max-width: 599px) {
.lightbox-viewer { width: 100vw; height: 100vh; border-radius: 0; }
.lightbox-toolbar { padding: var(--space-2) var(--space-3); }
.lightbox-filename { max-width: 30%; font-size: var(--fs-meta); }
.lightbox-btn-label { display: none; }
.lightbox-zoom-label { display: none; }
.lb-pdf-seitenzahl { display: inline; min-width: 0; }
.lb-pdf-scroll { padding: var(--space-2); gap: var(--space-2); }
}
.lightbox-close-btn { color: var(--status-danger-fg); border-color: var(--status-danger-fg); }
.lightbox-close-btn:hover { background: var(--status-danger-bg); }
@keyframes lightboxOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightboxViewerIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
#lightbox-overlay.is-closing { pointer-events: none; animation: lightboxOut var(--motion-quick) var(--ease-exit) forwards; }
@keyframes lightboxOut { from { opacity: 1; } to { opacity: 0; } }
/*== /styles/components/popups/topbar-dropdowns.css ==*/
.notif-bell-wrap { position: static; display: flex; align-items: center; }
.notif-dropdown {
--topbar-panel-w: 400px;
position: absolute;
top: 100%;
right: 0;
z-index: var(--z-nav-rail);
width: var(--topbar-panel-w);
max-width: min(var(--topbar-panel-w), 100vw);
max-height: min(600px, calc(100vh - var(--topbar-height) - env(safe-area-inset-top, 0px) - 40px));
overflow-y: auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-top: none;
border-right: none;
border-radius: 0 0 0 var(--radius-lg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), -2px 4px 12px rgba(0, 0, 0, 0.06);
}
@media (min-width: 600px) {
.notif-dropdown:not(.hidden) {
transform-origin: top right;
animation: notifDropIn var(--motion-quick) var(--ease-enter) both;
}
}
@keyframes notifDropIn {
from { opacity: 0; transform: translateY(-6px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
background: var(--color-surface);
z-index: 1;
}
.notif-dropdown-title {
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.notif-reload-btn {
width: 28px; height: 28px;
background: none; border: none; cursor: pointer;
border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--duration-fast);
}
.notif-reload-btn:hover { background: var(--color-bg-subtle); }
.notif-dropdown-body { padding: 0; }
.notif-tabs {
position: sticky;
top: 0;
z-index: 1;
display: flex;
gap: var(--space-1);
padding: var(--space-2) var(--space-4);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.notif-tab {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-1) var(--space-3);
border: 1px solid transparent;
border-radius: var(--radius-circular);
background: none;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: var(--fw-medium);
color: var(--color-text-muted);
cursor: pointer;
transition: background var(--duration-fast), color var(--duration-fast);
}
.notif-tab:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.notif-tab.is-active {
background: var(--brand-light);
border-color: color-mix(in srgb, var(--brand-default) 30%, transparent);
color: var(--brand-default);
}
.notif-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 var(--space-1);
border-radius: var(--radius-circular);
background: var(--color-bg-muted);
font-size: 10px;
font-weight: var(--fw-semibold);
line-height: 1;
}
.notif-tab.is-active .notif-tab-count {
background: var(--brand-default);
color: var(--brand-text-on);
}
.notif-skeleton {
padding: var(--space-3) var(--space-4);
}
.notif-skeleton .sk-list-row { padding: var(--space-2) 0; }
.notif-loading {
padding: var(--space-6) var(--space-4);
text-align: center;
color: var(--color-text-muted);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.notif-event-anzahl {
flex-shrink: 0;
padding: var(--space-px) var(--space-1-5);
border-radius: var(--radius-circular);
background: var(--brand-light);
color: var(--brand-default);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
line-height: 1.4;
}
.notif-kat-section { padding: 0; }
.notif-kat-header {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4) var(--space-1);
}
.notif-kat-strich {
width: 3px; height: 14px;
border-radius: var(--radius-xxs); flex-shrink: 0;
}
.notif-kat-label {
flex: 1;
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.notif-kat-count {
font-size: 10px;
padding: var(--space-px) 7px;
border-radius: var(--radius-circular);
font-weight: var(--fw-semibold);
}
.notif-item {
display: flex;
align-items: flex-start;
gap: var(--space-2);
cursor: pointer;
padding: var(--space-2) var(--space-4);
transition: background var(--duration-fast);
}
.notif-item:hover { background: var(--color-bg-subtle); }
.notif-item--clickable:hover { background: var(--brand-light); }
.notif-item--clickable .notif-item-titel { color: var(--brand-default); }
.notif-item-dot {
width: 7px; height: 7px;
border-radius: 50%; flex-shrink: 0;
margin-top: var(--space-1);
}
.notif-item-text { flex: 1; min-width: 0; }
.notif-item-titel {
font-size: var(--font-size-sm);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notif-item-meta {
font-size: var(--fs-badge);
color: var(--color-text-muted);
margin-top: var(--space-px);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notif-mehr-btn {
display: block;
width: 100%;
text-align: center;
padding: var(--space-1) var(--space-4);
font-size: var(--fs-badge);
color: var(--brand-default);
background: none;
border: none;
cursor: pointer;
font-family: var(--font-sans);
}
.notif-mehr-btn:hover { text-decoration: underline; }
.notif-footer {
position: sticky;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: var(--space-2) var(--space-4);
border-top: 1px solid var(--color-border);
background: var(--color-surface);
font-size: var(--font-size-sm);
color: var(--brand-default);
text-decoration: none;
cursor: pointer;
transition: background var(--duration-fast);
}
.notif-footer:hover { background: var(--color-bg-subtle); }
.notif-empty {
padding: var(--space-6) var(--space-4);
text-align: center;
color: var(--color-text-muted);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
@media (max-width: 1399px) {
.notif-dropdown { --topbar-panel-w: 380px; }
}
@media (max-width: 999px) {
.notif-dropdown { --topbar-panel-w: 360px; }
.notif-reload-btn { min-height: 44px; min-width: 44px; }
}
.topbar-sheet-overlay {
display: block;
position: fixed;
inset: 0;
background: var(--lod-scrim);
z-index: var(--z-bottom-sheet-backdrop);
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-soft);
}
.topbar-sheet-overlay.open { opacity: 1; }
@media (max-width: 599px) {
.notif-dropdown {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
width: 100%;
max-width: 100%;
min-width: 100%;
max-height: 70vh;
margin: 0;
border: none;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.15);
z-index: var(--z-bottom-sheet);
padding: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
transform: translateY(100%);
transition: transform var(--motion-overlay) var(--ease-drawer);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.notif-dropdown.sheet-open {
transform: translateY(0);
}
.notif-dropdown.hidden {
display: flex;
flex-direction: column;
visibility: hidden;
pointer-events: none;
}
.notif-dropdown:not(.hidden) {
display: flex;
flex-direction: column;
visibility: visible;
pointer-events: auto;
}
.notif-dropdown::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--color-border-pressed);
border-radius: var(--radius-xxs);
margin: var(--space-2) auto var(--space-1);
flex-shrink: 0;
}
.notif-dropdown-header {
padding: var(--space-1) var(--space-4) var(--space-3);
border-radius: 0;
}
.notif-dropdown-body { flex: 1; overflow-y: auto; }
#profile-dropdown #profile-dd-avatar > .avatar {
width: 48px !important;
height: 48px !important;
font-size: 16px !important;
}
#profile-dropdown .profile-dropdown-item { min-height: 48px; padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); }
}
@keyframes notifPulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.notif-pulse { animation: notifPulse var(--duration-slower) var(--ease-soft); }
@keyframes notifGlow { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-default) 30%, transparent); } 100% { box-shadow: none; } }
.notif-highlight { animation: notifGlow var(--duration-glow) var(--ease-out-soft); }
.profile-dropdown-head-section {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
color: inherit;
text-decoration: none;
cursor: pointer;
transition: background var(--duration-fast);
}
.profile-dropdown-head-section:hover,
.profile-dropdown-head-section:focus-visible {
background: var(--color-surface-hover, var(--lod-gray-50));
outline: none;
}
#profile-dd-avatar { flex-shrink: 0; }
.profile-dropdown-info { min-width: 0; flex: 1; }
.profile-dropdown-name { font-weight: var(--fw-semibold); font-size: var(--font-size-base); color: var(--color-text); line-height: 1.3; }
.profile-dropdown-email { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.profile-dropdown-divider { border-top: 1px solid var(--color-border); margin: var(--space-1) 0; }
.profile-dropdown-section-label {
padding: var(--space-1) var(--space-4) var(--space-1);
font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em;
}
.profile-dropdown-item {
display: flex; align-items: center; gap: var(--space-2);
width: 100%; text-align: left;
padding: var(--space-2) var(--space-4);
border: none; background: none; cursor: pointer;
font-family: var(--font-sans); font-size: var(--font-size-sm);
color: var(--color-text); text-decoration: none;
transition: background var(--duration-fast);
min-height: 44px;
}
.profile-dropdown-item:hover { background: var(--color-bg-subtle); }
.profile-dropdown-item--danger { color: var(--status-danger-fg); }
.profile-dropdown-item--danger:hover { background: var(--status-danger-bg); }
@media (max-width: 599px) {
.profile-dropdown-item--kuerzel { display: none; }
}
.notif-dropdown-head-actions { display: inline-flex; align-items: center; gap: var(--space-1); }
.act-diag {
margin-top: var(--space-1);
display: flex;
flex-direction: column;
gap: var(--space-px);
}
.act-diag-head {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--fs-badge);
color: var(--color-text-muted);
word-break: break-all;
}
.act-diag-msg {
font-size: var(--fs-badge);
color: var(--status-danger-fg);
white-space: pre-wrap;
word-break: break-word;
}
.act-copy-btn {
flex-shrink: 0;
width: 28px; height: 28px;
background: none; border: none; cursor: pointer;
border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
color: var(--color-text-muted);
transition: background var(--duration-fast);
}
.act-copy-btn:hover { background: var(--color-bg-subtle); }
.cl-feed { display: flex; flex-direction: column; }
.cl-divider-label {
padding: var(--space-3) var(--space-4) var(--space-1);
border-top: 1px solid var(--color-border);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.cl-copy { display: none; }
.cl-version { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.cl-version:last-child { border-bottom: none; }
.cl-version--new { box-shadow: inset 2px 0 0 var(--brand-default); }
.cl-version-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.cl-version-main { margin-top: var(--space-2); }
.cl-version-date { font-size: var(--fs-badge); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.cl-tagzahlen { display: inline-flex; flex-wrap: wrap; gap: var(--space-2-5); }
.cl-tagzahl {
font-size: var(--fs-badge); letter-spacing: 0.02em;
color: var(--color-text-tertiary); white-space: nowrap;
}
.cl-tagzahl b { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.cl-tagzahl--feature b { color: var(--status-success-fg); }
.cl-tagzahl--verbesserung b { color: var(--status-info-fg); }
.cl-tagzahl--fix b { color: var(--status-warning-fg); }
.cl-thema + .cl-thema { margin-top: var(--space-4); }
.cl-themenliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.cl-themenzeile {
padding-left: var(--space-3);
position: relative;
font-size: var(--font-size-sm); line-height: 1.45;
color: var(--color-text);
overflow-wrap: anywhere;
}
.cl-themenzeile::before {
content: '';
position: absolute; left: 0; top: 0.62em;
width: 3px; height: 3px; border-radius: 50%;
background: var(--color-text-tertiary);
}
.cl-themenrest {
padding-left: var(--space-3);
font-size: var(--fs-badge); color: var(--color-text-tertiary);
}
.cl-version-titel {
display: block; margin: 0;
font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--color-text);
}
.cl-new-badge {
flex-shrink: 0;
font-size: 10px; font-weight: var(--fw-semibold);
padding: var(--space-px) 7px; border-radius: var(--radius-circular);
background: var(--brand-light); color: var(--brand-default);
text-transform: uppercase; letter-spacing: 0.04em;
}
.cl-list { list-style: none; margin: var(--space-2-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cl-entry { display: flex; align-items: flex-start; gap: var(--space-2); }
.cl-entry-badge {
flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-1);
padding: var(--space-px) 8px var(--space-px) 6px; border-radius: var(--radius-circular);
font-size: 10px; font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: 0.03em;
}
.cl-entry-ico {
flex-shrink: 0;
width: 13px; height: 13px;
background-color: currentColor;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 13px 13px; mask-size: 13px 13px;
}
.cl-entry-typ { white-space: nowrap; }
.cl-entry-text { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--font-size-sm); color: var(--color-text); line-height: 1.5; }
.cl-entry-modul {
display: none;
flex-shrink: 0; align-self: flex-start; margin-left: var(--space-2);
font-size: 10px; font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--color-text-tertiary); white-space: nowrap;
padding-top: 2px;
}
.cl-entry--feature .cl-entry-badge { background: var(--status-success-bg); color: var(--status-success-fg); }
.cl-entry--feature .cl-entry-ico { -webkit-mask-image: url(/assets/icons/fluent/sparkle_24_regular.svg); mask-image: url(/assets/icons/fluent/sparkle_24_regular.svg); }
.cl-entry--verbesserung .cl-entry-badge { background: var(--status-info-bg); color: var(--status-info-fg); }
.cl-entry--verbesserung .cl-entry-ico { -webkit-mask-image: url(/assets/icons/fluent/star_24_regular.svg); mask-image: url(/assets/icons/fluent/star_24_regular.svg); }
.cl-entry--fix .cl-entry-badge { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.cl-entry--fix .cl-entry-ico { -webkit-mask-image: url(/assets/icons/fluent/wrench_24_regular.svg); mask-image: url(/assets/icons/fluent/wrench_24_regular.svg); }
@media (max-width: 999px) {
.act-copy-btn { min-height: 44px; min-width: 44px; }
}
/*== /styles/components/popups/genehmigungen-badge.css ==*/
.gen-list {
display: flex;
flex-direction: column;
}
.gen-item {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-light);
}
.gen-item:last-child { border-bottom: none; }
.gen-item-head {
display: flex;
align-items: flex-start;
gap: var(--space-2-5);
min-width: 0;
}
.gen-item-avatar {
flex-shrink: 0;
display: flex;
align-items: center;
}
.gen-item-nameblock {
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: var(--space-xxs);
border-radius: var(--radius-sm);
}
.gen-item-nameblock--drill { cursor: pointer; }
.gen-item-nameblock--drill:hover .gen-item-name { color: var(--brand-default); }
.gen-item-nameblock--drill:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: 2px;
}
.gen-item-name {
font-weight: var(--fw-semibold);
color: var(--lod-fg-1);
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
line-height: 1.25;
}
.gen-item-meta {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
overflow-wrap: anywhere;
}
.gen-item-actions {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
justify-content: flex-end;
}
.gen-item-tag {
font-size: var(--fs-badge);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--space-px) var(--space-1-5);
border-radius: var(--radius-xs);
color: var(--lod-darkblue);
background: var(--lod-darkblue-50);
white-space: nowrap;
}
.gen-item-tag--storno {
color: var(--lod-amber-700);
background: var(--lod-amber-50);
}
.gen-item.is-closing {
animation: genItemOut var(--duration-normal) var(--ease-exit) forwards;
pointer-events: none;
}
@keyframes genItemOut {
to { opacity: 0; transform: translateX(16px); max-height: 0; padding-top: 0; padding-bottom: 0; }
}
.gen-item--highlight {
box-shadow: inset 0 0 0 2px var(--color-brand-accent);
background: var(--color-brand-bg-subtle);
transition: box-shadow var(--duration-slow) var(--ease-soft), background var(--duration-slow) var(--ease-soft);
}
@media (max-width: 599px) {
.gen-item-actions { width: 100%; }
.gen-item-actions .btn { flex: 1 1 0; }
}
/*== /styles/components/popups/bottom-sheet.css ==*/
.app-bottom-sheet-backdrop {
position: fixed;
inset: 0;
background: var(--lod-scrim);
opacity: 0;
transition: opacity var(--duration-normal);
z-index: var(--z-app-toolbar-tier-1);
}
.app-bottom-sheet-backdrop.is-open { opacity: 1; }
.app-bottom-sheet {
position: fixed;
left: 0; right: 0;
bottom: 0;
background: #fff;
border-radius: 18px 18px 0 0;
box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
transform: translateY(100%);
transition: transform var(--duration-flow) var(--ease-overshoot);
z-index: var(--z-app-toolbar-tier-2);
display: flex;
flex-direction: column;
max-height: 85vh;
font-family: var(--lod-font-sans);
}
.app-bottom-sheet.is-open { transform: translateY(0); }
.app-bottom-sheet:focus-visible { outline: none; }
.app-bottom-sheet-head {
position: relative;
padding: var(--space-3-5) var(--space-4-5) var(--space-2-5);
border-bottom: 1px solid var(--lod-gray-100);
display: flex;
align-items: center;
gap: var(--space-2-5);
}
.app-bottom-sheet-handle {
position: absolute;
top: 6px; left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
border-radius: var(--radius-xxs);
background: var(--lod-gray-300);
}
.app-bottom-sheet-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--lod-darkblue);
flex: 1;
}
.app-bottom-sheet-close {
width: 32px; height: 32px;
border-radius: var(--radius-lg);
background: transparent;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-bottom-sheet-close:hover { background: var(--lod-gray-50); }
.app-bottom-sheet-close img { width: 14px; height: 14px; opacity: 0.65; }
.app-bottom-sheet-body {
flex: 1;
overflow-y: auto;
padding: var(--space-3-5) var(--space-4-5);
}
.app-bottom-sheet-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2-5);
padding: var(--space-3) var(--space-4-5);
padding-bottom: max(12px, env(safe-area-inset-bottom));
border-top: 1px solid var(--lod-gray-100);
}
.app-bottom-sheet:not(:has(.app-bottom-sheet-footer)) .app-bottom-sheet-body {
padding-bottom: max(14px, env(safe-area-inset-bottom));
}
/*== /styles/components/popups/kb-help.css ==*/
.app-kbhelp-backdrop {
position: fixed; inset: 0;
background: var(--lod-scrim);
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity var(--duration-medium);
z-index: var(--z-app-toolbar-tier-10);
}
.app-kbhelp-backdrop.is-open { opacity: 1; }
.app-kbhelp-panel {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -48%) scale(0.98);
width: min(760px, 94vw);
max-height: 86vh;
display: flex;
flex-direction: column;
background: var(--lod-white);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-xl);
box-shadow: 0 32px 90px color-mix(in srgb, var(--lod-darkblue-900) 28%, transparent);
z-index: var(--z-app-toolbar-tier-11);
font-family: var(--lod-font-sans);
opacity: 0;
overflow: hidden;
transition: opacity var(--duration-medium), transform var(--duration-medium);
}
.app-kbhelp-panel.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.kbh-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
padding: 20px 22px 14px;
border-bottom: 1px solid var(--lod-gray-100, var(--lod-gray-200));
}
.kbh-titles h3 { margin: 0; font-size: 18px; color: var(--lod-darkblue); letter-spacing: -0.01em; }
.kbh-sub { margin: 3px 0 0; font-size: 13px; color: var(--lod-gray-500); }
.app-kbhelp-close {
width: 30px; height: 30px; border-radius: var(--radius-md);
background: transparent; border: none; cursor: pointer;
color: var(--lod-gray-500); font-size: 15px; flex: none;
}
.app-kbhelp-close:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.kbh-toolbar {
display: flex; align-items: center; gap: var(--space-3);
padding: 14px 22px;
border-bottom: 1px solid var(--lod-gray-100, var(--lod-gray-200));
}
.kbh-filter {
flex: 1; min-width: 0;
font-family: var(--lod-font-sans); font-size: 14px;
padding: 9px 13px;
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
background: var(--lod-gray-50);
color: var(--lod-darkblue);
}
.kbh-filter:focus { outline: none; border-color: var(--lod-darkblue); background: var(--lod-white);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--lod-darkblue) 14%, transparent); }
.kbh-context {
flex: none; font-size: 12px; color: var(--lod-gray-600, var(--lod-gray-500));
background: color-mix(in srgb, var(--lod-darkblue) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--lod-darkblue) 18%, transparent);
border-radius: var(--radius-pill); padding: 5px 11px; white-space: nowrap;
}
.kbh-context strong { color: var(--lod-darkblue); }
.kbh-umfang { flex: none; height: 32px; }
.kbh-umfang .seg-item { height: 24px; font-size: 12px; padding: 0 var(--space-3); }
.kbh-body {
flex: 1; min-height: 0; overflow-y: auto;
padding: 18px 22px 8px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px 22px;
align-content: start;
}
.kbh-cat { display: flex; flex-direction: column; }
.kbh-cat-head {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--lod-darkblue); padding-bottom: 7px; margin-bottom: 3px;
border-bottom: 2px solid color-mix(in srgb, var(--lod-darkblue) 20%, transparent);
}
.kbh-row {
display: grid; grid-template-columns: minmax(86px, auto) 1fr; align-items: center;
gap: var(--space-3); padding: 7px 0;
border-bottom: 1px solid var(--lod-gray-100, var(--lod-gray-200));
}
.kbh-row:last-child { border-bottom: 0; }
.kbh-row.is-fern .kbh-label { color: var(--lod-gray-500); }
.kbh-row.is-fern .kbh-keys { opacity: 0.62; }
.kbh-keys { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.kbh-label { font-size: 13.5px; color: var(--lod-gray-700); }
.kbh-where {
display: inline-block; margin-left: var(--space-2);
font-size: 11px; color: var(--lod-gray-500); white-space: nowrap;
}
.kbh-empty { grid-column: 1 / -1; text-align: center; color: var(--lod-gray-500); font-size: 13px; padding: 24px 0; }
.kbh-row { position: relative; }
.kbh-actions {
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
display: inline-flex; gap: var(--space-1);
opacity: 0; transition: opacity var(--duration-snappy) var(--ease-enter);
background: var(--lod-white); padding-left: var(--space-2);
}
.kbh-row:hover .kbh-actions,
.kbh-row:focus-within .kbh-actions { opacity: 1; }
.kbh-act {
font-family: var(--lod-font-sans); font-size: 11px; line-height: 1;
padding: 4px 8px; cursor: pointer;
border: 1px solid var(--lod-gray-200); border-radius: var(--radius-sm);
background: var(--lod-white); color: var(--lod-gray-700);
}
.kbh-act:hover { border-color: var(--lod-darkblue); color: var(--lod-darkblue); }
.kbh-act--reset { color: var(--lod-gray-500); }
.kbh-eigen {
display: inline-block; margin-left: var(--space-2);
font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--lod-darkblue);
background: color-mix(in srgb, var(--lod-darkblue) 10%, transparent);
border-radius: var(--radius-pill); padding: 2px 7px;
}
.kbh-row.is-aufnahme { background: color-mix(in srgb, var(--lod-darkblue) 7%, transparent); }
.kbh-row.is-aufnahme .kbh-keys { opacity: 0.35; }
.kbh-meldung {
grid-column: 1 / -1; font-size: 11.5px; color: var(--lod-gray-600, var(--lod-gray-500));
padding-top: 3px;
}
.kbh-meldung.is-fehler { color: var(--status-danger-fg); }
.kbh-aufnahme-hinweis {
position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%);
background: var(--lod-darkblue-900); color: #fff;
font-size: 12px; padding: var(--space-1-5) var(--space-3);
border-radius: var(--radius-lg); white-space: nowrap;
box-shadow: 0 6px 20px color-mix(in srgb, var(--lod-darkblue-900) 30%, transparent);
}
.kbh-reset-alle {
font-family: var(--lod-font-sans); font-size: 12px; cursor: pointer;
background: none; border: none; padding: 0;
color: var(--lod-gray-600, var(--lod-gray-500)); text-decoration: underline;
}
.kbh-reset-alle:hover { color: var(--lod-darkblue); }
.app-kbhelp-panel kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.5em; padding: 3px 6px;
background: linear-gradient(var(--lod-white), var(--lod-gray-50));
border: 1px solid var(--lod-gray-200); border-bottom-width: 2px;
border-radius: var(--radius-sm);
font-size: 11px; font-family: var(--lod-font-mono, monospace);
color: var(--lod-darkblue); line-height: 1;
}
.app-seq { display: inline-flex; align-items: center; gap: 4px; }
.app-seq-then { font-size: 10px; color: var(--lod-gray-500); }
.kbh-foot {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap;
padding: 13px 22px;
border-top: 1px solid var(--lod-gray-100, var(--lod-gray-200));
font-size: 12px; color: var(--lod-gray-500);
}
.app-kbhelp-toggle { display: inline-flex; align-items: center; gap: var(--space-1-5); cursor: pointer; color: var(--lod-gray-700); }
.app-kbhelp-toggle input { accent-color: var(--lod-darkblue); cursor: pointer; }
.kbh-foot-hint { display: inline-flex; align-items: center; gap: 6px; }
.app-seq-hint {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
z-index: var(--z-app-toolbar-tier-11);
display: inline-flex; align-items: center; gap: var(--space-1-5);
background: var(--lod-darkblue-900); color: #fff;
padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-lg);
box-shadow: 0 12px 32px color-mix(in srgb, var(--lod-darkblue-900) 35%, transparent);
font-size: 12.5px; pointer-events: none;
}
.app-seq-hint kbd {
background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.24);
border-bottom-width: 2px; border-radius: var(--radius-sm); color: #fff;
padding: 2px 7px; font-family: var(--lod-font-mono, monospace); font-size: 11px;
}
@media (prefers-reduced-motion: reduce) {
.app-kbhelp-backdrop, .app-kbhelp-panel { transition: none; }
}
@media (max-width: 599px) {
.app-kbhelp-panel { width: 96vw; max-height: 90vh; }
.kbh-body { grid-template-columns: 1fr; }
}
/*== /styles/components/popups/toast.css ==*/
.app-toast-container {
--toast-height: 38px;
position: fixed;
right: 18px;
top: max(
calc(var(--dev-banner-h, 0px) + var(--space-2)),
calc(var(--dev-banner-h, 0px) + (var(--topbar-height) - var(--toast-height)) / 2)
);
display: flex;
flex-direction: column;
gap: var(--space-2);
z-index: var(--z-app-toolbar-tier-9);
max-width: calc(100vw - 36px);
font-family: var(--lod-font-sans);
pointer-events: none;
}
.app-toast {
display: inline-flex;
align-items: center;
gap: var(--space-2-5);
min-width: 260px;
max-width: 420px;
padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-3-5);
border-radius: var(--radius-pill-sm);
background: #fff;
border: 1px solid var(--lod-gray-200);
box-shadow: 0 12px 32px color-mix(in srgb, var(--lod-darkblue-900) 18%, transparent);
font-size: 13px;
color: var(--lod-darkblue);
pointer-events: auto;
transform: translateY(-8px);
opacity: 0;
transition: transform var(--duration-medium) var(--ease-overshoot), opacity var(--duration-medium);
}
.app-toast.is-visible { transform: translateY(0); opacity: 1; }
.app-toast.is-leaving { opacity: 0; transform: translateY(-8px); }
.app-toast.tone-success { border-left: 3px solid var(--lod-turquoise); }
.app-toast.tone-success .app-toast-icon { color: var(--lod-turquoise); }
.app-toast.tone-error { border-left: 3px solid var(--lod-danger); }
.app-toast.tone-error .app-toast-icon { color: var(--lod-danger); }
.app-toast.tone-warning { border-left: 3px solid var(--lod-warning); }
.app-toast.tone-warning .app-toast-icon { color: var(--lod-warning); }
.app-toast.tone-info { border-left: 3px solid var(--lod-darkblue); }
.app-toast.tone-info .app-toast-icon { color: var(--lod-darkblue); }
.app-toast-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-toast-msg {
flex: 1;
line-height: 1.35;
word-break: break-word;
}
.app-toast-action {
background: transparent;
border: none;
color: var(--lod-darkblue);
font-weight: 600;
font-size: 12.5px;
cursor: pointer;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-md);
}
.app-toast-action:hover { background: var(--lod-gray-50); }
.app-toast-close {
width: 22px; height: 22px;
border: none;
background: transparent;
border-radius: var(--radius-md);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-toast-close:hover { background: var(--lod-gray-50); }
@media (max-width: 999px) {
.app-toast-close { width: var(--touch-ziel); height: var(--touch-ziel); }
}
.app-toast-close img { opacity: 0.55; }
@media (max-width: 599px) {
.app-toast-container {
right: 10px;
top: calc(10px + env(safe-area-inset-top, 0px));
left: 10px;
max-width: none;
}
.app-toast { min-width: 0; max-width: none; width: 100%; }
}
/*== /styles/components/popups/confirm-modal.css ==*/
.app-scope .modal-foot {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
justify-content: flex-end;
}
.app-scope .modal-foot button {
flex: 0 0 auto;
white-space: nowrap;
}
.app-scope .modal-foot.modal-foot--stacked {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
}
.app-scope .modal-foot.modal-foot--stacked button {
width: 100%;
justify-content: center;
}
.confirm-dlg-body { padding: var(--space-5); }
.confirm-dlg-text { margin: 0; color: var(--color-text); font-size: var(--fs-body); }
.confirm-dlg-footer { justify-content: flex-end; }
.confirm-dlg-body .zeit-input { width: 100%; }
/*== /styles/components/popups/search-palette.css ==*/
.app-scope .gs-backdrop {
position: fixed;
inset: 0;
z-index: var(--z-gs-backdrop);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
padding-left: 16px;
padding-right: 16px;
background: var(--lod-scrim-soft);
-webkit-backdrop-filter: blur(5px) saturate(115%);
backdrop-filter: blur(5px) saturate(115%);
animation: app-drawerFade var(--duration-medium) var(--lod-ease) both;
}
.app-scope .gs-palette {
position: relative;
z-index: var(--z-gs-panel);
width: 100%;
max-width: 820px;
max-height: 70vh;
display: flex;
flex-direction: row;
background: var(--lod-white);
border: 1px solid var(--lod-gray-200);
border-radius: var(--lod-radius-lg);
box-shadow: var(--lod-shadow-lg);
overflow: hidden;
animation: app-modalPop var(--duration-flow) var(--lod-ease) both;
}
.app-scope .gs-input-row {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--lod-gray-100);
flex-shrink: 0;
}
.app-scope .gs-input-host {
flex: 1;
min-width: 0;
}
.app-scope .gs-close-btn {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
}
.app-scope .gs-close-btn:active { background: var(--lod-gray-100); }
.app-scope .gs-scopes {
display: flex;
gap: 6px;
flex-shrink: 0;
padding: 0 10px 8px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.app-scope .gs-scopes::-webkit-scrollbar { display: none; }
.app-scope .gs-scopes:empty { display: none; }
.app-scope .gs-scope-pill {
flex-shrink: 0;
border: 1px solid var(--lod-gray-200);
background: var(--lod-white);
color: var(--lod-muted);
border-radius: var(--radius-circular);
padding: var(--space-1) var(--space-3-5);
font-size: var(--font-size-sm);
font-family: var(--lod-font-body);
cursor: pointer;
white-space: nowrap;
transition: background var(--duration-snap) var(--lod-ease), color var(--duration-snap) var(--lod-ease);
}
.app-scope .gs-scope-pill:hover { background: var(--color-bg-subtle); color: var(--lod-fg-1); }
.app-scope .gs-scope-pill.is-active {
background: var(--brand-default);
border-color: transparent;
color: var(--lod-white);
}
.app-scope .gs-main {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
}
.app-scope .gs-results {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
overflow-y: auto;
padding: 8px;
}
.app-scope .gs-preview {
flex: 0 0 300px;
min-height: 0;
overflow-y: auto;
padding: 16px;
border-left: 1px solid var(--lod-gray-100);
background: var(--lod-bg-soft);
}
.app-scope .gs-preview-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
height: 100%;
text-align: center;
color: var(--lod-muted);
font-size: var(--fs-body);
}
.app-scope .gs-preview-empty .ui-ico img { width: 28px; height: auto; opacity: 0.4; }
.app-scope .gs-preview-head {
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 14px;
}
.app-scope .gs-preview-ico {
flex-shrink: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-lg);
background: var(--lod-white);
border: 1px solid var(--lod-gray-200);
}
.app-scope .gs-preview-headmain { min-width: 0; }
.app-scope .gs-preview-title {
font-weight: var(--fw-semibold);
font-size: 15px;
line-height: 1.3;
color: var(--lod-fg-1);
overflow-wrap: anywhere;
}
.app-scope .gs-preview-type {
font-size: var(--font-size-sm);
color: var(--lod-muted);
margin-top: 2px;
}
.app-scope .gs-preview-fields {
margin: 0 0 16px;
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 12px;
}
.app-scope .gs-preview-fields dt {
font-size: var(--font-size-sm);
color: var(--lod-muted);
}
.app-scope .gs-preview-fields dd {
margin: 0;
font-size: var(--fs-body);
color: var(--lod-fg-1);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.app-scope .gs-preview-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.app-scope .gs-preview-btn {
border: 1px solid var(--lod-gray-200);
background: var(--lod-white);
border-radius: var(--radius-lg);
padding: 6px 12px;
font-size: var(--font-size-sm);
font-family: var(--lod-font-body);
color: var(--lod-fg-1);
cursor: pointer;
}
.app-scope .gs-preview-btn:hover { background: var(--color-bg-subtle); }
.app-scope .gs-preview-btn--primary {
background: var(--brand-default);
border-color: transparent;
color: var(--lod-white);
}
.app-scope .gs-preview-btn--primary:hover { background: var(--brand-hover, var(--brand-default)); }
.app-scope .gs-palette.gs-mode-help .gs-preview { display: none; }
.app-scope .gs-group + .gs-group {
margin-top: 6px;
}
.app-scope .gs-group-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--lod-muted);
padding: 8px 10px 4px;
}
.app-scope .gs-group-count {
font-weight: var(--fw-semibold);
letter-spacing: 0;
text-transform: none;
color: var(--brand-primary);
white-space: nowrap;
}
.app-scope .gs-pivot {
margin-top: 10px;
padding: 6px 0 2px;
border-top: 1px solid var(--lod-border);
}
.app-scope .gs-pivot-head {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px 4px;
font-size: var(--font-size-sm);
font-weight: var(--fw-bold);
color: var(--brand-primary);
}
.app-scope .gs-pivot-head .ui-ico,
.app-scope .gs-pivot-head .ui-ico img {
width: 16px;
height: 16px;
}
.app-scope .gs-pivot-group + .gs-pivot-group { margin-top: 2px; }
.app-scope .gs-section-label {
margin-top: 12px;
padding: 6px 10px 2px;
border-top: 1px solid var(--lod-border);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--lod-muted);
}
.app-scope .gs-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
border: 0;
background: transparent;
padding: 9px 10px;
border-radius: var(--radius-lg);
cursor: pointer;
color: var(--lod-fg-1);
font-family: var(--lod-font-body);
font-size: var(--font-size-base);
text-decoration: none;
transition: background var(--duration-fast) var(--lod-ease);
}
.app-scope .gs-item.is-active,
.app-scope .gs-item:hover {
background: var(--brand-light);
}
.app-scope .gs-item-ico {
flex-shrink: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-lg);
background: var(--lod-gray-50);
}
.app-scope .gs-item.is-active .gs-item-ico,
.app-scope .gs-item:hover .gs-item-ico {
background: var(--lod-white);
}
.app-scope .gs-item-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.app-scope .gs-item-title {
font-weight: var(--fw-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-scope .gs-item-title mark {
background: var(--rating-warm-bg);
color: inherit;
border-radius: var(--radius-xxs);
padding: 0 1px;
}
.app-scope .gs-item-sub {
font-size: var(--font-size-sm);
color: var(--lod-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-scope .gs-item-badge {
flex-shrink: 0;
font-size: var(--fs-badge);
color: var(--lod-muted);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-circular);
padding: 1px 8px;
}
.app-scope .gs-item-action {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: var(--radius-md);
opacity: 0;
cursor: pointer;
transition: opacity var(--duration-fast) var(--lod-ease), background var(--duration-fast) var(--lod-ease);
}
.app-scope .gs-item-action img { width: 15px; height: auto; opacity: 0.7; }
.app-scope .gs-item.is-active .gs-item-action,
.app-scope .gs-item:hover .gs-item-action { opacity: 1; }
.app-scope .gs-item-action:hover { background: var(--lod-gray-100); }
.app-scope .gs-hint {
padding: 24px 16px;
text-align: center;
color: var(--lod-muted);
font-size: var(--fs-body);
}
.app-scope .gs-hint--warn { color: var(--tone-warn-text); }
.app-scope .gs-howto {
margin: 4px 6px 8px;
padding: 8px 12px;
border-radius: var(--radius-lg);
background: var(--tone-info-soft);
color: var(--tone-info-text);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.app-scope .gs-howto kbd {
font-family: var(--lod-font-mono);
border: 1px solid color-mix(in srgb, var(--tone-info-text) 25%, transparent);
border-radius: var(--radius-sm);
padding: 0 4px;
margin: 0 1px;
}
.app-scope .gs-item--static { cursor: default; }
.app-scope .gs-item--static:hover { background: transparent; }
.app-scope .gs-item.is-disabled { opacity: 0.5; }
.app-scope .gs-cmd-keys {
flex-shrink: 0;
display: inline-flex;
gap: 3px;
}
.app-scope .gs-cmd-keys kbd {
font-family: var(--lod-font-mono);
font-size: var(--fs-badge);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-sm);
padding: 1px 5px;
background: var(--lod-gray-50);
color: var(--lod-fg-1);
}
.app-scope .gs-cmd-go {
flex-shrink: 0;
font-family: var(--lod-font-mono);
color: var(--lod-muted);
opacity: 0;
transition: opacity var(--duration-fast) var(--lod-ease);
}
.app-scope .gs-item.is-active .gs-cmd-go { opacity: 0.8; }
.app-scope .gs-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
padding: 6px 10px;
border-top: 1px solid var(--lod-gray-100);
font-size: var(--fs-badge);
color: var(--lod-muted);
background: var(--lod-gray-50);
}
.app-scope .gs-foot-cmd {
display: inline-flex;
align-items: center;
gap: 6px;
border: 0;
background: transparent;
border-radius: var(--radius-md);
padding: 4px 8px;
cursor: pointer;
color: var(--lod-fg-1);
font-family: var(--lod-font-body);
font-size: var(--font-size-sm);
}
.app-scope .gs-foot-cmd:hover { background: var(--color-bg-subtle); }
.app-scope .gs-foot-cmd.is-active { background: var(--brand-light); color: var(--tone-info-text); }
.app-scope .gs-foot-cmd .ui-ico { opacity: 0.7; }
.app-scope .gs-foot-hints { display: inline-flex; gap: 14px; align-items: center; }
.app-scope .gs-foot-hint { display: inline-flex; align-items: center; gap: 4px; }
.app-scope .gs-foot-hints kbd {
font-family: var(--lod-font-mono);
font-size: var(--fs-badge);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-sm);
background: var(--lod-white);
min-width: 18px;
height: 18px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
@media (max-width: 1399px) {
.app-scope .gs-palette { max-width: 760px; }
.app-scope .gs-preview { flex-basis: 280px; }
}
@media (max-width: 999px) {
.app-scope .gs-backdrop { padding-top: 8vh; }
.app-scope .gs-palette { max-width: 92vw; max-height: 78vh; }
.app-scope .gs-preview { display: none; }
}
@media (max-width: 599px) {
.app-scope .gs-backdrop {
padding: 0;
align-items: stretch;
}
.app-scope .gs-palette {
max-width: 100%;
max-height: 100%;
width: 100%;
border-radius: 0;
border: 0;
}
.app-scope .gs-foot-hints { display: none; }
.app-scope .gs-close-btn { display: inline-flex; }
}
/*== /styles/components/activity/activity-log.css ==*/
.app-scope .app-activity-log {
display: flex;
flex-direction: column;
gap: var(--space-3-5);
}
.app-scope .app-activity-log-heading {
margin: 0;
font-size: var(--fs-badge);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lod-gray-500);
}
.app-scope .app-activity-log-timeline {
display: flex;
flex-direction: column;
gap: var(--space-3-5);
}
.app-scope .app-activity-log-loading,
.app-scope .app-activity-log-empty,
.app-scope .app-activity-log-placeholder {
padding: var(--space-2-5) var(--space-3);
font-size: 12.5px;
color: var(--lod-gray-500);
font-style: italic;
}
.app-scope .app-activity-log-item {
display: flex;
align-items: flex-start;
gap: var(--space-2-5);
}
.app-scope .app-activity-log-item .avatar {
width: 28px;
height: 28px;
font-size: var(--fs-badge);
color: var(--lod-white);
font-weight: var(--fw-semibold);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-scope .app-activity-log-item-body { flex: 1; min-width: 0; }
.app-scope .app-activity-log-item header {
font-size: 12.5px;
color: var(--lod-darkblue);
margin-bottom: var(--space-1);
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
align-items: baseline;
}
.app-scope .app-activity-log-item header strong { font-weight: var(--fw-semibold); }
.app-scope .app-activity-log-item header > a,
.app-scope .app-activity-log-item header > span { min-width: 0; }
.app-scope .app-activity-log-item-date { color: var(--lod-gray-500); font-weight: var(--fw-regular); white-space: nowrap; }
.app-scope .app-activity-log-item-attachments {
display: flex;
flex-wrap: wrap;
gap: var(--space-1-5);
margin-top: var(--space-2);
}
.app-scope .app-activity-log-retry {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1-5);
padding: var(--space-1-5) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--lod-gray-700);
font-size: 12.5px;
font-weight: var(--fw-semibold);
cursor: pointer;
}
.app-scope .app-activity-log-retry:hover {
border-color: var(--lod-darkblue-300);
color: var(--lod-darkblue);
}
@media (max-width: 999px) {
.app-scope .app-activity-log-retry { min-height: var(--touch-ziel); }
}
@media (max-width: 999px) {
.app-scope .app-activity-log-submit { min-height: var(--touch-ziel); }
.app-scope .app-activity-log-attachment-chip {
min-height: var(--touch-ziel);
display: inline-flex;
align-items: center;
}
}
.app-scope .app-activity-log-attachment-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-1) var(--space-2-5);
border-radius: var(--radius-md);
background: var(--lod-gray-50);
border: 1px solid var(--lod-gray-200);
color: var(--lod-darkblue);
font-size: var(--font-size-sm);
text-decoration: none;
max-width: 100%;
transition: background var(--duration-quick), border-color var(--duration-quick);
}
.app-scope .app-activity-log-attachment-chip:hover {
background: var(--color-surface);
border-color: var(--lod-darkblue-300);
}
.app-scope .app-activity-log-attachment-chip img { opacity: 0.7; flex-shrink: 0; }
.app-scope .app-activity-log-attachment-chip-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.app-scope .app-activity-log-attachment-chip-size {
color: var(--lod-gray-500);
white-space: nowrap;
font-size: var(--fs-badge);
}
.app-scope .app-activity-log-item-text {
font-size: var(--fs-body);
color: var(--lod-gray-700);
line-height: 1.5;
word-break: break-word;
}
.app-scope .app-activity-log-item.type-system .app-activity-log-item-text {
display: flex;
align-items: center;
gap: var(--space-1-5);
color: var(--lod-gray-600);
font-style: italic;
}
.app-scope .app-activity-log-item.type-system .app-activity-log-item-system-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.app-scope .app-activity-log-item.type-system .app-activity-log-item-system-icon img {
opacity: 0.75;
}
.app-scope .app-activity-log-item header a {
color: var(--lod-darkblue);
text-decoration: none;
font-weight: var(--fw-medium);
}
.app-scope .app-activity-log-item header a:hover { text-decoration: underline; }
.app-scope .app-activity-log-commentbox {
padding: var(--space-2-5) var(--space-3);
background: var(--lod-gray-50);
border: 1px solid var(--lod-gray-100);
border-radius: var(--radius-pill-sm);
}
.app-scope .app-activity-log-comment-input {
width: 100%;
border: none;
background: transparent;
font-size: var(--fs-body);
color: var(--lod-darkblue);
resize: none;
min-height: 60px;
font-family: inherit;
padding: 0;
box-shadow: none !important;
}
.app-scope .app-activity-log-comment-input:focus { outline: none; border-color: transparent; box-shadow: none; }
.app-scope .app-activity-log-comment-input::placeholder { color: var(--lod-gray-500); }
.app-scope .app-activity-log-comment-input-host .mention-composer {
border: none;
background: transparent;
min-height: 60px;
padding: 0;
font-size: var(--fs-body);
}
.app-scope .app-activity-log-comment-input-host .mention-composer:focus { box-shadow: none; border-color: transparent; }
.app-scope .app-activity-log-commentbox.is-drag-over {
border-color: var(--lod-turquoise);
background: color-mix(in srgb, var(--lod-turquoise) 8%, #fff);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--lod-turquoise) 25%, transparent);
}
.app-scope .app-activity-log-comment-toolbar {
display: flex;
align-items: center;
gap: var(--space-2-5);
margin-top: var(--space-2);
}
.app-scope .app-activity-log-comment-spacer { flex: 1; }
.app-scope .app-activity-log-submit {
margin-right: -13px;
}
.app-scope .app-activity-log-submit {
padding: 7px var(--space-3-5);
border-radius: var(--radius-md);
background: var(--lod-darkblue);
color: var(--lod-white);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
border: 1px solid var(--lod-darkblue);
cursor: pointer;
line-height: 1.3;
}
.app-scope .app-activity-log-submit:hover:not(:disabled) { background: var(--lod-turquoise); color: var(--lod-darkblue-900); }
.app-scope .app-activity-log-submit:disabled {
background: var(--lod-gray-100);
color: var(--lod-gray-400);
cursor: not-allowed;
}
/*== /styles/components/activity/komm-thread.css ==*/
.komm-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.komm-thread-empty { color: var(--color-text-muted); font-size: var(--fs-body); padding: var(--space-4) 0; text-align: center; }
.komm-thread--solo { gap: var(--space-2); }
.komm-thread-solobody {
font-size: var(--fs-body); line-height: 1.6; color: var(--color-text);
white-space: pre-wrap; word-break: break-word;
}
.komm-thread--solo .komm-msg-atts { padding-left: 0; margin-top: var(--space-3); }
.komm-msg {
padding: var(--space-2-5) var(--space-3);
background: var(--card-bg, #fff);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
transition: box-shadow var(--motion-fast) var(--ease-enter);
}
.komm-msg:hover { box-shadow: var(--shadow-sm); }
.komm-msg--aus {
background: color-mix(in srgb, var(--lod-turquoise) 6%, var(--card-bg, #fff));
border-color: color-mix(in srgb, var(--lod-turquoise) 22%, var(--color-border-light));
}
.komm-msg--note { background: var(--lod-amber-50); border-color: var(--lod-amber-200); }
.komm-msg { border-left-width: 3px; border-left-color: var(--color-border); }
.komm-msg--aus { border-left-color: var(--lod-turquoise); }
.komm-msg--note { border-left-color: var(--lod-amber-500); }
.komm-msg--termin { background: var(--lod-violet-50); border-color: var(--lod-violet-100); }
.komm-msg--termin { border-left-color: var(--lod-violet-500); }
.komm-msg--abgesagt .komm-msg-name { text-decoration: line-through; color: var(--color-text-muted); }
.komm-msg-head { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.komm-msg--stumm .komm-msg-head { cursor: default; }
.komm-msg-avatar {
flex-shrink: 0; width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: hsl(var(--avatar-h, 210) 32% 48%);
color: var(--lod-white); font-weight: var(--fw-semibold); font-size: var(--fs-meta);
}
.komm-msg-avatar--note { background: var(--lod-amber-500); }
.komm-msg-avatar--termin { background: var(--lod-violet-500); }
.komm-msg-avatar--note img,
.komm-msg-avatar--termin img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.komm-msg-meta { min-width: 0; flex: 1 1 auto; }
.komm-msg-metatop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.komm-msg-name { font-weight: var(--fw-semibold); color: var(--lod-darkblue-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.komm-msg-when { flex-shrink: 0; color: var(--color-text-muted); font-size: var(--fs-caption); white-space: nowrap; }
.komm-msg-metasub { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; min-width: 0; }
.komm-msg-dir {
flex-shrink: 0; padding: 1px var(--space-1-5); border-radius: var(--radius-pill);
font-size: var(--fs-badge); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em;
background: var(--bg-secondary); color: var(--color-text-muted);
}
.komm-msg-dir--out { background: color-mix(in srgb, var(--lod-turquoise) 18%, var(--card-bg, #fff)); color: var(--lod-turquoise-900, #3C6669); }
.komm-msg-dir--note { background: color-mix(in srgb, var(--lod-amber-500) 22%, var(--card-bg, #fff)); color: var(--lod-amber-700); }
.komm-msg-dir--termin { background: color-mix(in srgb, var(--lod-violet-500) 18%, var(--card-bg, #fff)); color: var(--lod-violet-700); }
.komm-msg-subject { color: var(--color-text-muted); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.komm-msg-marken { display: inline-flex; flex-shrink: 1; gap: var(--space-1); min-width: 0; overflow: hidden; }
.komm-msg-marken .pill { flex-shrink: 0; }
.komm-msg-detail { display: none; }
.komm-msg--open .komm-msg-detail {
display: block;
margin-top: var(--space-2); padding: var(--space-1-5) var(--space-2);
margin-left: calc(34px + var(--space-2));
background: var(--bg-secondary); border-radius: var(--radius-md);
font-size: var(--fs-caption); color: var(--color-text);
}
.komm-msg-detailzeile { display: flex; gap: var(--space-2); min-width: 0; }
.komm-msg-detailzeile + .komm-msg-detailzeile { margin-top: 2px; }
.komm-msg-detaillabel { flex-shrink: 0; width: 32px; color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.komm-msg-detailwert { min-width: 0; overflow-wrap: anywhere; }
.komm-msg-body {
margin-top: var(--space-2); padding-left: calc(34px + var(--space-2));
font-size: var(--fs-body); line-height: 1.55; color: var(--color-text);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.komm-msg--open .komm-msg-body { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: pre-wrap; }
.komm-msg-quotewrap { margin-top: var(--space-2); }
.app-scope .komm-msg-quotetoggle {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 16px; padding: 0 var(--space-1-5);
border: none; border-radius: var(--radius-pill);
background: var(--bg-secondary); color: var(--color-text-muted);
font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: .12em;
cursor: pointer;
transition: background var(--motion-fast) var(--ease-enter), color var(--motion-fast) var(--ease-enter);
}
.app-scope .komm-msg-quotetoggle:hover { background: color-mix(in srgb, var(--lod-darkblue) 12%, var(--card-bg, #fff)); color: var(--lod-darkblue-900); }
.app-scope .komm-msg-quotetoggle:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.komm-msg-quote {
display: none;
margin-top: var(--space-2); padding-left: var(--space-3);
border-left: 2px solid var(--color-border);
color: var(--color-text-muted);
}
.komm-msg-quotewrap.is-open .komm-msg-quote { display: block; animation: lod-fade-slide-in var(--motion-quick) var(--ease-enter) backwards; }
.komm-msg-hinweis {
margin-top: var(--space-2); padding-left: calc(34px + var(--space-2));
font-size: var(--fs-caption); font-style: italic; color: var(--color-text-muted);
}
.komm-msg-herkunft {
margin-top: var(--space-1-5); padding-left: calc(34px + var(--space-2));
font-size: var(--fs-caption); color: var(--color-text-muted);
}
.komm-msg-herkunft a { color: var(--lod-darkblue); text-decoration: none; }
.komm-msg-herkunft a:hover { text-decoration: underline; }
.komm-msg-atts { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-2); padding-left: calc(34px + var(--space-2)); }
.komm-msg-att {
display: inline-flex; align-items: center; gap: var(--space-1);
max-width: 260px; padding: 2px var(--space-2);
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--card-bg, #fff); color: var(--lod-darkblue-900);
font-size: var(--fs-caption); text-decoration: none;
}
.komm-msg-att:hover { background: var(--bg-secondary); border-color: var(--color-border-hover); }
.komm-msg-att .ui-ico img { width: 14px; height: 14px; opacity: .7; }
.komm-msg-attsize { color: var(--color-text-muted); flex-shrink: 0; }
.komm-msg-attdl img { width: 13px; height: 13px; }
.komm-msg-attinfo { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--fs-caption); }
.komm-msg-attinfo .ui-ico img { width: 14px; height: 14px; opacity: .6; }
.komm-msg-attablage { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--lod-success-700); font-size: var(--fs-caption); }
.komm-msg-attablage .ui-ico img { width: 14px; height: 14px; opacity: .75; }
.app-scope .komm-msg-attlegen {
border: 1px dashed var(--color-border); border-radius: var(--radius-md);
background: transparent; color: var(--lod-darkblue);
padding: 1px var(--space-1-5); font-size: var(--fs-caption); font-weight: var(--fw-medium); cursor: pointer;
}
.app-scope .komm-msg-attlegen:hover { background: var(--bg-secondary); border-color: var(--color-border-hover); }
.app-scope .komm-msg-attlegen:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.komm-msg-volltext {
margin-top: var(--space-2); padding-left: calc(34px + var(--space-2));
font-size: var(--fs-body); line-height: 1.55; color: var(--color-text);
overflow-x: auto;
}
.komm-msg-volltext:empty { display: none; }
.komm-msg-volltext table { max-width: 100%; }
.komm-msg-volltext img { max-width: 100%; height: auto; }
.komm-msg-blockiert {
margin-top: var(--space-2); padding: var(--space-1-5) var(--space-2);
border-radius: var(--radius-md); background: var(--bg-secondary);
color: var(--color-text-muted); font-size: var(--fs-caption);
}
.app-scope button.komm-msg-pinbtn, span.komm-msg-pinbtn {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 0;
border: none; border-radius: var(--radius-pill);
background: transparent; cursor: pointer;
transition: background var(--motion-fast) var(--ease-enter);
}
span.komm-msg-pinbtn { cursor: default; }
.komm-msg-pinbtn .ui-ico img { width: 14px; height: 14px; opacity: .45; }
.komm-msg-pinbtn.is-an .ui-ico img { opacity: .9; }
.app-scope button.komm-msg-pinbtn:hover { background: var(--bg-secondary); }
.app-scope button.komm-msg-pinbtn:hover .ui-ico img { opacity: .9; }
.app-scope button.komm-msg-pinbtn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.komm-gruppe { display: flex; flex-direction: column; gap: var(--space-2); }
.app-scope .komm-gruppe-toggle {
display: inline-flex; align-items: center; gap: var(--space-1);
align-self: flex-start; margin-left: calc(34px + var(--space-2));
padding: 2px var(--space-2);
border: 1px solid var(--color-border); border-radius: var(--radius-pill);
background: var(--bg-secondary); color: var(--lod-darkblue-900);
font-size: var(--fs-caption); font-weight: var(--fw-medium); cursor: pointer;
transition: background var(--motion-fast) var(--ease-enter);
}
.app-scope .komm-gruppe-toggle:hover { background: color-mix(in srgb, var(--lod-darkblue) 10%, var(--card-bg, #fff)); }
.app-scope .komm-gruppe-toggle:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.komm-gruppe-toggle .ui-ico img { width: 14px; height: 14px; opacity: .7; transition: transform var(--motion-fast) var(--ease-enter); }
.komm-gruppe.is-open .komm-gruppe-toggle .ui-ico img { transform: rotate(180deg); }
.komm-gruppe-aeltere { display: none; }
.komm-gruppe.is-open .komm-gruppe-aeltere {
display: flex; flex-direction: column; gap: var(--space-2);
margin-left: var(--space-4); padding-left: var(--space-2-5);
border-left: 2px solid var(--color-border);
animation: lod-fade-slide-in var(--motion-quick) var(--ease-enter) backwards;
}
.komm-msg-aktion { margin-top: var(--space-1-5); padding-left: calc(34px + var(--space-2)); font-size: var(--fs-caption); }
.komm-msg-aktion a { color: var(--lod-darkblue); text-decoration: none; }
.komm-msg-aktion a:hover { text-decoration: underline; }
@media (max-width: 999px) {
.app-scope button.komm-msg-pinbtn, span.komm-msg-pinbtn {
width: var(--touch-ziel); height: var(--touch-ziel); margin: -8px;
}
.app-scope .komm-msg-quotetoggle {
min-width: 44px; height: var(--touch-ziel); margin: -11px 0;
}
.app-scope .komm-gruppe-toggle { min-height: var(--touch-ziel); }
.app-scope .komm-msg-attlegen { min-height: var(--touch-ziel); padding: 0 var(--space-2); }
.komm-msg-att { min-height: var(--touch-ziel); }
.komm-msg-aktion a { display: inline-flex; align-items: center; min-height: var(--touch-ziel); }
.komm-msg-herkunft a { display: inline-flex; align-items: center; min-height: var(--touch-ziel); }
}
/*== /styles/components/extern/rechte-editor.css ==*/
.lod-rechte-editor {
display: flex;
flex-direction: column;
gap: var(--space-3);
font-family: var(--lod-font-sans, sans-serif);
}
.lod-rechte-editor__profile-row {
display: grid;
grid-template-columns: 120px 1fr;
grid-row-gap: var(--space-1);
align-items: center;
gap: var(--space-2);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--lod-gray-100);
}
.lod-rechte-editor__profile-label {
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
color: var(--lod-gray-700);
}
.lod-rechte-editor__profile-select {
width: 100%;
}
.lod-rechte-editor__profile-desc {
grid-column: 2;
font-size: 11.5px;
font-style: italic;
min-height: 14px;
}
.lod-rechte-bereich {
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-lg);
background: var(--color-surface);
overflow: hidden;
}
.lod-rechte-bereich--flat {
}
details.lod-rechte-bereich[open] {
background: var(--lod-gray-50);
}
.lod-rechte-bereich__hd {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2-5) var(--space-3);
font-size: var(--fs-body);
cursor: default;
user-select: none;
list-style: none;
}
details.lod-rechte-bereich > summary.lod-rechte-bereich__hd {
cursor: pointer;
}
details.lod-rechte-bereich > summary.lod-rechte-bereich__hd::-webkit-details-marker {
display: none;
}
details.lod-rechte-bereich > summary.lod-rechte-bereich__hd::before {
content: "▸";
display: inline-block;
width: 12px;
font-size: var(--font-size-xs);
color: var(--lod-gray-500);
transition: transform var(--duration-quick) var(--ease-soft);
margin-right: var(--space-xxs);
}
details.lod-rechte-bereich[open] > summary.lod-rechte-bereich__hd::before {
transform: rotate(90deg);
}
.lod-rechte-bereich__icon {
display: inline-flex;
width: 18px;
height: 18px;
opacity: 0.7;
}
.lod-rechte-bereich__icon img {
width: 100%;
height: 100%;
}
.lod-rechte-bereich__title {
font-weight: var(--fw-semibold);
color: var(--lod-darkblue-700);
letter-spacing: 0.01em;
}
.lod-rechte-bereich__count {
margin-left: var(--space-1-5);
font-size: var(--fs-badge);
color: var(--lod-gray-500);
font-variant-numeric: tabular-nums;
}
.lod-rechte-editor .lod-rechte-bereich__alle {
margin-left: auto;
border: 1px solid var(--lod-gray-200);
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-1) var(--space-2-5);
font-size: 11.5px;
color: var(--lod-gray-700);
cursor: pointer;
transition: border-color var(--duration-quick), color var(--duration-quick), background var(--duration-quick);
}
.lod-rechte-editor .lod-rechte-bereich__alle:hover {
border-color: var(--lod-darkblue-300);
color: var(--lod-darkblue);
background: var(--lod-gray-50);
}
.lod-rechte-bereich__body {
padding: var(--space-1) var(--space-3) var(--space-3);
border-top: 1px solid var(--lod-gray-100);
background: var(--color-surface);
}
details.lod-rechte-bereich[open] > .lod-rechte-bereich__body {
background: var(--color-surface);
}
.lod-rechte-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-1-5) 12px;
}
.lod-rechte-checkbox {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-2);
border-radius: var(--radius-md);
transition: background var(--duration-quick);
}
.lod-rechte-checkbox:hover {
background: var(--lod-gray-50);
}
.lod-rechte-checkbox--readonly:hover {
background: transparent;
}
.lod-rechte-checkbox input[type="checkbox"] {
width: 16px;
min-width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
accent-color: var(--lod-darkblue);
}
.lod-rechte-checkbox--readonly input[type="checkbox"] {
cursor: default;
}
.lod-rechte-checkbox label {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
cursor: pointer;
flex: 1;
min-width: 0;
}
.lod-rechte-checkbox--readonly label {
cursor: default;
}
.lod-rechte-checkbox__icon {
display: inline-flex;
width: 14px;
height: 14px;
opacity: 0.6;
}
.lod-rechte-checkbox__icon img {
width: 100%;
height: 100%;
}
.lod-rechte-checkbox__label {
font-size: 12.5px;
color: var(--lod-gray-900);
}
.lod-rechte-checkbox--implied .lod-rechte-checkbox__label {
opacity: 0.85;
}
.lod-rechte-checkbox--implied input[type="checkbox"] {
accent-color: var(--lod-amber-500);
opacity: 0.85;
}
.lod-rechte-checkbox__implied-badge {
flex: 0 0 auto;
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: var(--space-xxs) var(--space-1-5);
background: var(--lod-amber-50);
color: var(--lod-amber-700);
border-radius: var(--radius-sm);
}
.lod-rechte-checkbox__info {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
opacity: 0.4;
cursor: help;
transition: opacity var(--duration-quick);
}
.lod-rechte-checkbox__info:hover {
opacity: 0.85;
}
.lod-rechte-checkbox__info img {
width: 100%;
height: 100%;
}
.lod-rechte-scope {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2-5);
padding-top: var(--space-2-5);
border-top: 1px dashed var(--lod-gray-200);
}
.lod-rechte-scope__label {
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
color: var(--lod-gray-700);
flex: 0 0 auto;
}
.lod-rechte-scope .zeit-select--sm {
min-width: 0;
flex: 0 1 auto;
}
.lod-rechte-scope__help {
font-size: var(--fs-badge);
font-style: italic;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@container drawer (max-width: 560px) {
.lod-rechte-list {
grid-template-columns: 1fr;
}
.lod-rechte-editor__profile-row {
grid-template-columns: 1fr;
}
.lod-rechte-editor__profile-desc {
grid-column: 1;
}
.lod-rechte-editor .lod-rechte-bereich__alle {
font-size: var(--fs-badge);
padding: 3px var(--space-2);
}
}
@media (max-width: 999px) {
.lod-rechte-editor .lod-rechte-bereich__alle {
min-height: var(--touch-ziel);
display: inline-flex;
align-items: center;
}
}
/*== /styles/components/settings/settings-row.css ==*/
.set-row,
.set-gruppe {
--set-mass: 1082px;
}
.set-row {
--set-info: 20px;
--set-label: 240px;
--set-einheit: 64px;
--set-aktionen: 28px;
display: grid;
grid-template-columns:
var(--set-info)
minmax(0, var(--set-label))
minmax(0, 1fr)
var(--set-aktionen);
align-items: center;
gap: var(--space-2) var(--space-3);
--set-rand-rechts: var(--space-2);
--set-rand-links: var(--space-2);
padding: var(--space-2-5) var(--set-rand-rechts) var(--space-2-5) var(--set-rand-links);
position: relative;
border-radius: var(--radius-sm);
}
.set-row + .set-row { border-top: 1px solid var(--color-border-subtle, var(--lod-gray-100)); }
.set-row:not(.set-row--drawer),
.set-gruppe { max-width: var(--set-mass); }
.set-row { --set-feld: 100%; }
.set-row--t-bool { --set-feld: 44px; }
.set-row { --set-ctrl-bahnen-einheit: minmax(0, 1fr) var(--set-einheit); }
.set-row { --set-feld-kurz: 160px; --set-feld-mittel: 320px; }
.einst-fields:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)) > .set-row:not(.set-row--t-bool),
.setx:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)) > .set-row:not(.set-row--t-bool) {
--set-feld: var(--set-feld-kurz);
--set-ctrl-bahnen-einheit: minmax(0, var(--set-feld)) var(--set-einheit) minmax(0, 1fr);
}
.einst-fields:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)):has(.set-row--t-select) > .set-row:not(.set-row--t-bool),
.einst-fields:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)):has(.set-row--t-date) > .set-row:not(.set-row--t-bool),
.setx:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)):has(.set-row--t-select) > .set-row:not(.set-row--t-bool),
.setx:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)):has(.set-row--t-date) > .set-row:not(.set-row--t-bool) {
--set-feld: var(--set-feld-mittel);
--set-ctrl-bahnen-einheit: minmax(0, var(--set-feld)) var(--set-einheit) minmax(0, 1fr);
}
.set-row:hover { background: var(--color-bg-subtle, var(--lod-gray-50)); }
.set-row--stapel:hover { background: none; }
.set-row-infospalte {
grid-column: 1; grid-row: 1;
display: flex; align-items: center; justify-content: center; min-width: 0;
}
.set-row-text { grid-column: 2; grid-row: 1; min-width: 0; }
.set-row-label {
font-size: var(--fs-body); font-weight: var(--fw-medium);
color: var(--color-text);
}
.set-row-pflicht { color: var(--status-danger-fg); font-weight: var(--fw-bold); }
.set-row-fehlt {
display: block; margin-top: 2px;
font-size: var(--fs-caption); line-height: 1.35;
color: var(--status-danger-fg);
}
.set-row-ctrl {
grid-column: 3; grid-row: 1;
display: grid; grid-template-columns: minmax(0, 1fr);
align-items: center; gap: var(--space-2); min-width: 0;
}
.einst-fields:has(.set-row-einheit) .set-row-ctrl,
.setx:has(.set-row-einheit) .set-row-ctrl {
grid-template-columns: var(--set-ctrl-bahnen-einheit);
}
.app-scope .set-row-ctrl > input,
.app-scope .set-row-ctrl > select,
.app-scope .set-row-ctrl > textarea,
.app-scope .set-row-ctrl > .app-date-field,
.app-scope .set-row-ctrl > .select[data-cs-trigger] {
grid-column: 1; width: var(--set-feld); min-width: 0; max-width: 100%;
}
.app-scope .set-row-ctrl > .app-switch { grid-column: 1; justify-self: start; }
.app-scope .set-row-ctrl > input[type="number"] { font-variant-numeric: tabular-nums; }
.set-row-einheit {
grid-column: 2;
font-size: var(--fs-meta, 12px); color: var(--color-text-muted); white-space: nowrap;
}
.app-scope .set-row-ctrl .select[data-cs-trigger] { height: 32px; }
.app-scope .set-row-ctrl .cs-label {
font-size: var(--fs-body);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-row-aktionen {
grid-column: 4; grid-row: 1;
display: flex; align-items: center; justify-content: flex-end;
gap: var(--space-1); min-width: 0;
}
.set-row-info {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
width: 20px; height: 20px; padding: 0; border: 0; background: none;
border-radius: var(--radius-circular); cursor: help;
opacity: .55; transition: opacity var(--duration-quick) var(--ease-out-soft, ease-out),
background-color var(--duration-quick) var(--ease-out-soft, ease-out);
}
@media (max-width: 999px) {
.set-row-info { min-width: var(--touch-ziel); min-height: var(--touch-ziel); }
}
.set-row:hover > .set-row-infospalte > .set-row-info { opacity: .85; }
.set-row-info:hover,
.set-row-info:focus-visible,
.set-row-info[aria-expanded="true"] { opacity: 1; background: var(--color-bg-subtle, var(--lod-gray-50)); }
.set-row-info .ui-ico img { width: 15px; height: 15px; }
.set-row--abhaengig::before {
content: ''; position: absolute; left: calc(var(--space-2) * -1); top: 6px; bottom: 6px;
width: 2px; border-radius: 1px; background: var(--lod-gray-200);
}
.set-row--stapel,
.set-row--drawer {
grid-template-columns: var(--set-info) minmax(0, 1fr) var(--set-aktionen);
}
.set-row--stapel > .set-row-ctrl,
.set-row--drawer > .set-row-ctrl { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-2); }
.set-row--stapel > .set-row-aktionen,
.set-row--drawer > .set-row-aktionen { grid-column: 3; grid-row: 1; align-self: start; }
.set-row--stapel > .set-row-ctrl { align-items: stretch; }
.set-row--stapel > .set-row-ctrl { grid-template-columns: minmax(0, 1fr); }
.set-row--stapel > .set-row-ctrl > .set-row-einheit { grid-column: 1; justify-self: end; }
.set-row--drawer { padding: var(--space-2) var(--set-rand-rechts) var(--space-2) var(--set-rand-links); }
.set-row--drawer.set-row--t-bool > .set-row-ctrl {
grid-column: 2 / 3; grid-row: 1; margin-top: 0;
display: flex; justify-content: flex-end;
}
.set-gruppe {
margin: var(--space-5) 0 0; padding-bottom: var(--space-1);
font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps, .08em); text-transform: uppercase;
color: var(--lod-gray-500);
}
.set-gruppe:first-child { margin-top: 0; }
.set-gruppe + .set-row { border-top: 0; }
.set-modul-marke {
flex: 0 0 auto;
font-size: var(--fs-badge, 11px); font-weight: var(--fw-medium);
text-transform: none; letter-spacing: 0;
color: var(--color-text-secondary);
background: var(--lod-gray-100); border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm); padding: 1px var(--space-2);
white-space: nowrap;
}
.set-modul-marke--mehrfach {
background: none; border-color: transparent; padding-inline: 0;
color: var(--color-text-tertiary, var(--color-text-secondary));
}
.set-modul-marke--intern {
background: var(--lod-violet-50); border-color: var(--lod-violet-100);
color: var(--lod-violet-900);
}
.set-gruppe { display: flex; align-items: center; gap: var(--space-2); }
.set-info {
width: 340px; max-width: calc(100vw - 48px);
padding: var(--space-3) var(--space-3-5) var(--space-3);
font-family: var(--font-sans, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif);
}
.set-info-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.set-info-ico {
flex: 0 0 26px; width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-bg-subtle, var(--lod-gray-50));
border-radius: var(--radius-md);
}
.set-info-ico img { width: 15px; height: 15px; opacity: .75; }
.set-info-title {
font-size: var(--fs-body); font-weight: var(--fw-semibold);
color: var(--color-text); line-height: 1.3;
}
.set-info-text {
font-size: 13px; line-height: 1.5;
color: var(--color-text-secondary, var(--color-text-muted));
}
.set-info-meta {
margin: var(--space-3) 0 0; padding-top: var(--space-2-5);
border-top: 1px solid var(--color-border-subtle, var(--lod-gray-100));
display: flex; flex-direction: column; gap: var(--space-1);
}
.set-info-meta-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.set-info-meta dt {
margin: 0; font-size: var(--fs-badge, 11px); font-weight: var(--fw-semibold);
letter-spacing: var(--ls-caps); text-transform: uppercase;
color: var(--lod-gray-500);
}
.set-info-meta dd { margin: 0; font-size: 12.5px; color: var(--color-text); overflow-wrap: anywhere; }
@keyframes set-row-hit {
0% { outline-color: var(--brand-light); }
100% { outline-color: transparent; }
}
.set-row--hit {
outline: 3px solid transparent;
outline-offset: 3px;
animation: set-row-hit 1.6s var(--ease-soft) 1;
border-radius: var(--radius-sm);
}
@media (max-width: 999px) {
.set-row:not(.set-row--drawer),
.set-gruppe { --set-mass: none; }
.set-row:not(.set-row--drawer) { --set-label: 150px; }
.app-scope .set-row-ctrl > input,
.app-scope .set-row-ctrl > select,
.app-scope .set-row-ctrl .select[data-cs-trigger] { height: auto; min-height: var(--touch-ziel); }
.set-row { --set-info: 36px; }
.set-row-info { width: auto; height: auto; min-width: var(--touch-ziel); min-height: var(--touch-ziel); }
.set-row-info .ui-ico img { width: 17px; height: 17px; }
}
@media (max-width: 599px) {
.set-row { padding: var(--space-2) var(--set-rand-rechts) var(--space-2) var(--set-rand-links); --set-info: 40px; --set-einheit: max-content; }
.set-row-info { opacity: .85; width: 40px; height: 40px; }
.app-scope .set-row-ctrl > input,
.app-scope .set-row-ctrl > select,
.app-scope .set-row-ctrl .select[data-cs-trigger] { height: 40px; }
.app-scope .set-row-ctrl > .app-switch { min-height: 44px; display: inline-flex; align-items: center; }
.set-info { width: 300px; }
.set-row:not(.set-row--drawer):not(.set-row--t-bool):not(.set-row--t-int):not(.set-row--t-zeit):not(.set-row--t-date) {
grid-template-columns: var(--set-info) minmax(0, 1fr) var(--set-aktionen);
}
.set-row:not(.set-row--drawer):not(.set-row--t-bool):not(.set-row--t-int):not(.set-row--t-zeit):not(.set-row--t-date) > .set-row-ctrl {
grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-2);
}
.set-row:not(.set-row--drawer):not(.set-row--t-bool):not(.set-row--t-int):not(.set-row--t-zeit):not(.set-row--t-date) > .set-row-aktionen {
grid-column: 3; grid-row: 1; align-self: start;
}
.set-row:not(.set-row--drawer) { --set-label: 120px; }
}
/*== /styles/utils/popover-menu.css ==*/
.app-popover {
position: fixed;
background: #fff;
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-pill-sm);
box-shadow: 0 14px 40px rgba(0,0,0,0.14);
z-index: var(--z-app-toolbar-base);
max-height: min(80vh, 560px);
max-width: calc(100vw - 16px);
overflow-y: auto;
overflow-x: hidden;
font-family: var(--lod-font-sans);
transform-origin: top center;
animation: appPopoverIn var(--motion-quick) var(--ease-enter) backwards;
}
@keyframes appPopoverIn {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.app-popover--karte {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-tooltip);
border: 1px solid var(--color-border);
background: var(--color-surface);
padding: 0;
overflow: hidden;
z-index: var(--z-tooltip);
animation: lod-fade-slide-in var(--duration-quick) var(--ease-out-soft);
}
@media (prefers-reduced-motion: reduce) {
.app-popover--karte { animation: none; }
}
.app-popover.is-closing {
pointer-events: none;
animation: appPopoverOut var(--motion-quick) var(--ease-exit) forwards;
}
@keyframes appPopoverOut {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
.app-popover:focus-visible { outline: none; }
.app-popover-menu { padding: var(--space-1); }
.app-popover-menu-head {
padding: var(--space-2) var(--space-3) var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lod-gray-500);
}
.app-popover-menu-kopf {
padding: var(--space-2) var(--space-3) var(--space-1);
font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps, .08em); text-transform: uppercase;
color: var(--lod-gray-500);
}
.app-popover-menu-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.app-popover-menu-label { font-size: var(--fs-body); color: inherit; }
.app-popover-menu-hinweis {
font-size: var(--fs-meta, 12px); line-height: 1.4; color: var(--color-text-muted); white-space: normal;
}
.app-popover-menu-beispiel {
flex: 0 0 auto; max-width: 38%; margin-left: var(--space-2); align-self: center;
font-size: var(--fs-meta, 12px); color: var(--lod-gray-500);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-popover-menu-suche { padding: var(--space-2) var(--space-2) var(--space-1); }
.app-popover-menu-suchfeld {
width: 100%; height: 32px; padding: 0 var(--space-2);
border: 1px solid var(--lod-gray-200); border-radius: var(--radius-sm);
font-size: var(--fs-body); font-family: inherit; color: var(--color-text);
}
.app-popover-menu-suchfeld:focus { outline: 2px solid var(--lod-darkblue-200); outline-offset: -1px; }
.app-popover-menu-liste { overflow-y: auto; overscroll-behavior: contain; }
.app-popover-menu-item:has(.app-popover-menu-hinweis) {
align-items: flex-start; padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.app-popover-menu-item {
display: flex;
align-items: center;
gap: var(--space-2-5);
width: 100%;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: transparent;
border: none;
font-size: 13px;
color: var(--lod-gray-700);
text-align: left;
cursor: pointer;
}
.app-popover-menu-item:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.app-popover-menu-item.is-active { background: var(--lod-darkblue-100); color: var(--lod-darkblue); font-weight: var(--fw-semibold); }
.app-popover-menu-item.danger { color: var(--lod-danger); }
.app-popover-menu-item.danger:hover { background: var(--status-danger-soft); color: var(--lod-danger); }
.app-popover-menu-item:disabled { opacity: 0.55; cursor: not-allowed; }
.app-popover-menu-item:disabled:hover { background: none; color: inherit; }
.app-popover-menu-item img { opacity: 0.6; flex-shrink: 0; }
.app-popover-menu-item.is-active > img[src*="checkmark"]:last-child { margin-left: auto; opacity: 0.9; }
.app-popover-menu-sep { height: 1px; background: var(--lod-gray-100); margin: var(--space-1) 0; }
@media (max-width: 999px) {
.app-popover-menu-item { min-height: var(--touch-ziel); }
}
.app-board-switcher-panel { padding: var(--space-1-5) 0; min-width: 260px; font-family: var(--lod-font-sans); }
.app-board-switcher-header {
padding: var(--space-2) var(--space-3-5) var(--space-1-5);
font-size: var(--font-size-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lod-gray-500);
}
.app-board-switcher-list { padding: 0 var(--space-1-5) var(--space-1-5); }
.app-board-switcher-section {
padding: var(--space-2-5) var(--space-2) var(--space-1);
font-size: 10.5px;
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--lod-gray-500);
border-top: 1px solid var(--lod-gray-100);
margin-top: var(--space-1);
}
.app-board-switcher-section.muted { color: var(--lod-gray-400); font-style: italic; text-transform: none; letter-spacing: 0; }
.app-board-switcher-item {
display: flex;
align-items: center;
gap: var(--space-2-5);
width: 100%;
padding: var(--space-2) var(--space-2-5);
border-radius: var(--radius-md);
background: transparent;
border: none;
font-size: 13px;
color: var(--lod-gray-700);
text-align: left;
cursor: pointer;
min-width: 0;
}
.app-board-switcher-item:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.app-board-switcher-item.is-active { background: var(--lod-darkblue-100); color: var(--lod-darkblue); font-weight: var(--fw-semibold); }
.app-board-switcher-item img { opacity: 0.6; flex-shrink: 0; }
.app-board-switcher-item .app-switcher-check { margin-left: auto; opacity: 0.9; }
.app-board-switcher-item-label {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-popover-menu-box {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xs);
background: var(--color-surface);
}
.app-popover-menu-box--leer {
border-color: transparent;
background: none;
}
.app-popover-menu-ico--leer {
flex: 0 0 auto;
display: inline-block;
width: 14px;
height: 14px;
}
.app-popover-menu-item--mehrfach.is-active .app-popover-menu-box {
background: var(--brand-default);
border-color: var(--brand-default);
}
.app-popover-menu-item--mehrfach.is-active .app-popover-menu-box img {
filter: brightness(0) invert(1);
}
/*== /styles/utils/custom-select.css ==*/
.app-cs-panel {
position: fixed;
background: var(--color-surface);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-lg);
box-shadow: var(--lod-shadow-lg);
z-index: var(--z-drawer-modal);
min-width: 200px;
max-width: calc(100vw - 16px);
max-height: 320px;
overflow-y: auto;
padding: var(--space-1);
font-family: var(--lod-font-body);
font-size: 13px;
}
.app-cs-option {
display: flex; align-items: center; gap: var(--space-2);
padding: 7px var(--space-2-5);
border-radius: 5px;
cursor: pointer;
color: var(--lod-gray-900);
user-select: none;
}
.app-cs-option:hover,
.app-cs-option.highlight { background: var(--lod-darkblue-50); }
.app-cs-option.selected {
background: var(--lod-turquoise-100);
color: var(--lod-darkblue);
font-weight: 600;
}
.app-cs-option .check {
width: 14px; height: 14px; margin-left: auto;
color: var(--lod-turquoise); opacity: 0;
}
.app-cs-option.selected .check { opacity: 1; }
.app-cs-search {
border: none; outline: none;
width: 100%;
padding: var(--space-2) var(--space-2-5);
border-bottom: 1px solid var(--lod-gray-100);
font-size: 13px;
background: transparent;
}
.app-cs-empty {
padding: var(--space-3) var(--space-2-5);
font-size: 12px;
color: var(--lod-gray-500);
text-align: center;
}
.cs-wrap {
position: relative;
display: inline-flex;
min-width: 0;
}
.filter-dd + .cs-wrap, .cs-wrap:has(> .filter-dd) { flex: 1; min-width: 0; }
.cs-wrap .cs-trigger {
display: block;
box-sizing: border-box;
width: 100%;
height: var(--cs-hoehe);
line-height: calc(var(--cs-hoehe) - 2px);
padding: var(--cs-polster);
border: 1px solid var(--cs-rahmen);
border-radius: var(--cs-radius);
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;
font-family: var(--font-sans);
font-size: var(--cs-schrift);
color: var(--cs-farbe);
cursor: pointer;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
outline: none;
transition: border-color var(--duration-fast) var(--ease-default);
}
@media (max-width: 999px) {
:root { --cs-hoehe: var(--touch-ziel); }
}
.cs-trigger:hover { border-color: var(--cs-rahmen-hover); }
.cs-trigger:focus-visible { outline: none; border-color: var(--cs-rahmen-aktiv); }
.cs-open .cs-trigger { border-color: var(--cs-rahmen-aktiv); }
.cs-wrap .cs-trigger--placeholder { color: var(--color-text-tertiary); }
.cs-wrap .cs-trigger--filter {
font-size: var(--fs-meta);
padding: var(--space-xxs) var(--space-6) var(--space-xxs) var(--space-2);
height: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.cs-trigger--filter:hover { border-color: var(--color-border-hover); }
@media (max-width: 999px) {
.cs-wrap .cs-trigger--filter { min-height: var(--touch-ziel); }
}
.cs-panel {
display: none;
z-index: var(--z-popover);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-16);
max-height: min(300px, 40vh);
overflow-y: auto;
scrollbar-width: none;
}
.cs-panel::-webkit-scrollbar { display: none; }
.cs-options { padding: var(--space-1) 0; }
.cs-option {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
font-family: var(--font-sans);
font-size: var(--font-size-base);
color: var(--color-text);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-default);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cs-option:hover, .cs-option--focused { background: var(--color-bg-subtle); }
.cs-option--selected { background: var(--brand-light); color: var(--brand-default); font-weight: var(--fw-medium); }
.cs-option--selected:hover { background: var(--brand-light-hover); }
.cs-option--disabled { color: var(--color-text-disabled); cursor: default; }
.cs-option--child { padding-left: var(--space-6); }
.cs-group-label { padding: var(--space-1-5) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; cursor: default; user-select: none; }
.cs-option--placeholder { color: var(--color-text-tertiary); }
.cs-check { flex-shrink: 0; font-size: var(--font-size-md); line-height: 1; }
.cs-option-text { overflow: hidden; text-overflow: ellipsis; }
.cs-panel--dauer {
max-height: none;
padding: var(--space-2);
width: auto;
max-width: none;
}
.cs-dauer-group-label {
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: var(--space-2) var(--space-1) var(--space-1);
}
.cs-dauer-group-label:first-child { margin-top: 0; }
.select[data-cs-trigger] {
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
cursor: pointer;
}
.select[data-cs-trigger] .cs-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.cs-dauer-grid {
display: grid;
grid-template-columns: minmax(48px, auto) repeat(3, 1fr);
gap: var(--space-1);
}
.cs-dauer-cell {
height: 32px;
padding: 0 var(--space-2);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: var(--fs-body);
color: var(--color-text);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-default),
color var(--duration-fast) var(--ease-default);
}
.cs-dauer-cell:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.cs-dauer-cell--hour {
font-weight: var(--fw-semibold);
border-right: 1px solid var(--color-border-light);
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.cs-dauer-cell--solo { grid-column: 1; }
.cs-dauer-cell--sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.cs-dauer-cell--sub:hover { color: var(--color-text); }
.cs-dauer-cell--selected {
background: var(--brand-default);
color: var(--brand-text-on) !important;
font-weight: var(--fw-semibold);
}
.cs-dauer-cell--selected:hover { background: var(--brand-hover); }
.cs-dauer-cell--empty { cursor: default; visibility: hidden; }
.app-es { position: relative; display: block; width: 100%; min-width: 0; }
.app-es-input { width: 100%; cursor: text; }
.app-es-input::placeholder { color: var(--color-text-tertiary); }
.app-es-panel { display: block; }
/*== /styles/utils/month-switcher.css ==*/
.app-month-switcher-panel {
padding: var(--space-2-5) var(--space-3) var(--space-3);
min-width: 240px;
font-family: var(--lod-font-sans);
}
.app-month-switcher-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--lod-gray-100);
margin-bottom: var(--space-2);
}
.app-month-switcher-year {
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
color: var(--lod-darkblue);
letter-spacing: 0.2px;
}
.app-month-switcher-year--btn {
border: 1px solid transparent;
background: transparent;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
transition: background var(--duration-quick);
}
.app-month-switcher-year--btn:hover { background: var(--lod-gray-50); }
.app-month-switcher-year-nav {
width: 28px;
height: 28px;
border-radius: var(--radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--lod-gray-700);
font-size: var(--font-size-md);
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--duration-quick), color var(--duration-quick);
}
.app-month-switcher-year-nav:hover:not(:disabled) {
background: var(--lod-gray-50);
color: var(--lod-darkblue);
}
.app-month-switcher-year-nav:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.app-month-switcher-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-1);
}
.app-month-switcher-cell {
padding: var(--space-2) var(--space-1);
border-radius: var(--radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--lod-gray-700);
font-size: 13px;
font-weight: var(--fw-medium);
cursor: pointer;
transition: background var(--duration-quick), color var(--duration-quick), border-color var(--duration-quick);
}
.app-month-switcher-cell:hover:not(:disabled) {
background: var(--lod-gray-50);
color: var(--lod-darkblue);
}
.app-month-switcher-cell.is-active {
background: var(--lod-darkblue-100);
color: var(--lod-darkblue);
font-weight: var(--fw-semibold);
border-color: var(--lod-darkblue-300);
}
.app-month-switcher-cell.is-disabled,
.app-month-switcher-cell:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.app-month-nav-row,
.app-month-nav-row *,
.app-month-nav-row *::before,
.app-month-nav-row *::after {
box-sizing: border-box;
}
.app-month-nav-row {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--lod-font-body);
}
.app-month-nav-row button {
font-family: inherit;
font-size: inherit;
cursor: pointer;
}
.app-month-nav-row .app-month-nav-btn {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--radius-md);
border: 1px solid var(--lod-gray-200);
background: #fff;
color: var(--lod-gray-700);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--duration-quick), border-color var(--duration-quick);
flex-shrink: 0;
}
.app-month-nav-row .app-month-nav-btn:hover:not(:disabled) {
background: var(--lod-gray-50);
border-color: var(--lod-darkblue-300);
}
.app-month-nav-row .app-month-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.app-month-nav-row .app-month-nav-btn img { opacity: 0.6; }
@media (max-width: 999px) {
.app-month-nav-row .app-month-nav-btn {
min-width: var(--touch-ziel);
min-height: var(--touch-ziel);
}
}
/*== /styles/utils/date-field.css ==*/
.app-date-field {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
min-width: 0;
flex: 1;
width: 100%;
min-height: 32px;
}
.app-date-field-trigger,
.app-date-field-zeit {
height: 32px;
min-height: 32px;
box-sizing: border-box;
}
.app-date-field--mit-zeit .app-date-field-zeit {
flex: 0 0 auto;
width: 82px;
justify-content: center;
}
.app-date-field--kompakt .app-date-field-zeit {
justify-content: center;
padding-left: var(--space-1);
padding-right: var(--space-1);
font-variant-numeric: tabular-nums;
}
.app-date-field--kompakt .app-drawer-date-trigger-label {
flex: 0 1 auto;
text-align: center;
}
.app-date-field-trigger.has-error,
.app-date-field.has-error .app-date-field-trigger {
border-color: var(--color-danger-border);
}
@media (max-width: 599px) {
.app-date-field--mit-zeit {
flex-wrap: wrap;
}
.app-date-field--mit-zeit .app-date-field-trigger {
flex: 1 0 100%;
}
.app-date-field--mit-zeit .app-date-field-zeit {
flex: 0 0 auto;
}
}
/*== /styles/utils/sortable-drag.css ==*/
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { box-shadow: var(--shadow-16); }
#aufgaben-list, #fokus-list {
-webkit-user-select: none;
user-select: none;
}
#fokus-list {
min-height: 120px;
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
scrollbar-width: none;
}
#fokus-list::-webkit-scrollbar { display: none; }
.aufgabe-drag-ghost { opacity: 0.5; box-shadow: var(--shadow-8); border-radius: var(--radius-md); pointer-events: none; }
.aufgabe-drag-chosen { box-shadow: var(--shadow-4); border-color: var(--brand-default); }
.aufgabe-drag-fallback {
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-16);
padding: var(--space-3) var(--space-4); width: 480px; opacity: 0.95;
pointer-events: none; overflow: hidden;
-webkit-user-select: none; user-select: none;
}
body.is-dragging * {
-webkit-user-select: none !important;
user-select: none !important;
cursor: grabbing !important;
}
.date-invalid { border-color: var(--status-ueberfaellig) !important; box-shadow: 0 0 0 2px rgba(196, 49, 75, 0.15); }
.cs-wrap.date-invalid { border-radius: var(--radius-sm); }
.cs-wrap.date-invalid .cs-trigger { border-color: var(--status-ueberfaellig); }
/*== /styles/ui/nav-rail-tooltip.css ==*/
.nrt-card {
width: 280px;
max-width: calc(100vw - 80px);
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3) var(--space-3-5);
font-family: var(--font-sans, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif);
}
.nrt-head {
display: flex;
align-items: center;
gap: var(--space-3);
}
.nrt-icon {
flex: 0 0 36px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-bg-subtle);
border-radius: var(--radius-lg);
}
.nrt-icon img {
width: 20px;
height: 20px;
filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
}
.nrt-avatar {
flex: 0 0 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nrt-title {
font-size: 15px;
font-weight: var(--fw-semibold, 600);
color: var(--color-text);
line-height: 1.25;
}
.nrt-description {
font-size: 13px;
line-height: 1.45;
color: var(--color-text-secondary);
}
/*== /styles/ui/mentions.css ==*/
.user-chip {
cursor: pointer;
border-radius: var(--radius-sm);
transition: background-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft);
}
.user-chip:hover {
background-color: color-mix(in srgb, var(--brand-default) 8%, transparent);
}
.user-chip:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: 1px;
}
strong.user-chip {
padding: 0 var(--space-xxs);
}
.avatar-slot.user-chip:hover,
.avatar.user-chip:hover {
background-color: transparent;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-default) 35%, transparent);
}
.mention {
display: inline-block;
padding: var(--space-px) var(--space-1-5);
margin: 0 1px;
border-radius: var(--radius-sm);
background: var(--mention-bg);
color: var(--mention-fg);
font-weight: var(--fw-medium);
font-size: inherit;
line-height: inherit;
cursor: pointer;
text-decoration: none;
user-select: text;
transition: background var(--duration-quick) var(--ease-soft), color var(--duration-quick) var(--ease-soft);
}
.mention:hover,
.mention:focus {
background: var(--mention-bg-hover);
color: var(--mention-fg-deep);
outline: none;
}
.mention:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: 1px;
}
.mention-composer {
min-height: 80px;
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-lg);
background: #fff;
border: 1px solid var(--lod-gray-200);
font: inherit;
font-size: 13px;
line-height: 1.5;
color: var(--lod-darkblue);
cursor: text;
outline: none;
transition: border-color var(--duration-quick), box-shadow var(--duration-quick);
white-space: pre-wrap;
word-wrap: break-word;
overflow-y: auto;
}
.mention-composer:focus {
border-color: var(--lod-darkblue-300);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
}
.mention-composer[data-placeholder]:empty::before {
content: attr(data-placeholder);
color: var(--lod-gray-500);
pointer-events: none;
}
.mention-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-px) var(--space-1) var(--space-px) var(--space-2);
margin: 0 var(--space-xxs);
border-radius: var(--radius-pill-sm);
background: var(--mention-bg);
color: var(--mention-fg);
font-weight: var(--fw-medium);
font-size: 0.92em;
line-height: 1.4;
user-select: none;
white-space: nowrap;
vertical-align: baseline;
}
.mention-chip-x {
width: 14px;
height: 14px;
padding: 0;
border: none;
background: transparent;
color: var(--mention-fg);
font-size: var(--font-size-base);
line-height: 1;
cursor: pointer;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.6;
transition: opacity var(--duration-quick), background var(--duration-quick);
}
.mention-chip-x:hover {
opacity: 1;
background: rgba(92, 45, 145, 0.15);
}
.mention-dropdown {
position: absolute;
z-index: var(--z-mention-autocomplete);
min-width: 220px;
max-width: 360px;
max-height: 280px;
overflow-y: auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
padding: var(--space-1) 0;
font-family: var(--font-sans, system-ui);
font-size: var(--font-size-base, 14px);
}
.mention-dropdown.hidden { display: none; }
.mention-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
cursor: pointer;
line-height: 1.2;
min-height: 44px;
box-sizing: border-box;
}
.mention-item--empty {
color: var(--color-text-muted);
font-style: italic;
cursor: default;
min-height: auto;
padding: var(--space-2-5) var(--space-3);
}
.mention-item--active {
background: var(--color-bg-selected);
}
.mention-item:hover:not(.mention-item--empty):not(.mention-item--active) {
background: var(--color-bg-subtle);
}
.mention-item-avatar {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--mention-bg);
color: var(--mention-fg);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: var(--fw-semibold);
text-transform: uppercase;
}
.mention-item-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
}
.mention-item-name {
color: var(--color-text);
font-weight: var(--fw-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mention-item-sub {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mention-item-type {
flex: 0 0 auto;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
background: var(--color-bg-subtle);
padding: var(--space-px) var(--space-1-5);
border-radius: var(--radius-xs);
text-transform: uppercase;
letter-spacing: 0.3px;
}
@media (max-width: 599px) {
.mention-dropdown {
max-width: calc(100vw - 16px);
font-size: var(--font-size-md, 16px);
}
.mention-item {
min-height: 48px;
padding: var(--space-2-5) var(--space-3-5);
}
.mention-item-avatar {
width: 32px; height: 32px;
flex-basis: 32px;
font-size: var(--font-size-sm);
}
}
.mention-user-card {
width: 320px;
max-width: calc(100vw - 20px);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
overflow: hidden;
animation: lod-fade-slide-in var(--duration-quick) var(--ease-out-soft);
}
.muc-head {
display: flex;
gap: var(--space-3);
padding: var(--space-3-5) var(--space-3-5) var(--space-3) var(--space-3-5);
align-items: flex-start;
border-bottom: 1px solid var(--color-border-light);
}
.muc-avatar {
flex: 0 0 48px;
}
.muc-avatar > .avatar {
width: 48px !important;
height: 48px !important;
font-size: var(--font-size-md) !important;
}
.muc-headtext { flex: 1 1 auto; min-width: 0; }
.muc-name {
font-size: 15px;
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: 1.3;
word-wrap: break-word;
}
.muc-sub {
font-size: 13px;
color: var(--color-text-secondary);
margin-top: var(--space-xxs);
line-height: 1.4;
word-wrap: break-word;
}
.muc-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-top: var(--space-1-5);
}
.muc-badge {
font-size: 11px;
padding: var(--space-xxs) 7px;
border-radius: var(--radius-xs);
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
}
.muc-badge--rolle {
background: var(--brand-light);
color: var(--brand-pressed);
}
.muc-badge--partner {
background: var(--orange-50);
color: var(--orange-700);
font-weight: var(--fw-medium);
}
.muc-close {
flex: 0 0 auto;
background: none;
border: none;
font-size: var(--font-size-lg);
color: var(--color-text-muted);
cursor: pointer;
padding: 0 var(--space-1);
line-height: 1;
align-self: flex-start;
}
.muc-close:hover { color: var(--color-text); }
.muc-body {
padding: var(--space-2-5) var(--space-3-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.muc-row {
display: flex;
flex-direction: column;
gap: var(--space-px);
}
.muc-row-label {
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted);
}
.muc-row-value {
font-size: 13px;
color: var(--color-text);
word-break: break-all;
}
.muc-link {
color: var(--brand-default);
text-decoration: none;
}
.muc-link:hover { text-decoration: underline; }
.muc-actions {
display: flex;
gap: var(--space-2);
padding: var(--space-2-5) var(--space-3-5) var(--space-3-5) var(--space-3-5);
border-top: 1px solid var(--color-border-light);
}
.muc-btn {
flex: 1 1 50%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1-5);
padding: var(--space-2) var(--space-2-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-size: 13px;
text-decoration: none;
cursor: pointer;
transition: background var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft);
}
.muc-btn:hover {
background: var(--color-bg-subtle);
border-color: var(--color-border-hover);
}
.kat-card[data-kat="636509007"] {
--kat-accent: var(--purple-500);
--kat-accent-bg: var(--purple-100);
border-left: 3px solid var(--purple-500);
}
.kat-card[data-kat="636509007"] .benachr-matrix-head-icon {
filter: hue-rotate(250deg) saturate(1.2);
}
@media (prefers-color-scheme: dark) {
.mention {
background: color-mix(in srgb, var(--purple-500) 18%, transparent);
color: var(--mention-fg-light);
}
.mention:hover,
.mention:focus {
background: color-mix(in srgb, var(--purple-500) 28%, transparent);
color: var(--mention-fg-light-2);
}
.mention-item-avatar {
background: color-mix(in srgb, var(--purple-500) 18%, transparent);
color: var(--mention-fg-light);
}
}
.txt-fmt { display: inline; }
.txt-fmt--fett { font-weight: var(--fw-semibold, 600); }
.txt-fmt--kursiv { font-style: italic; }
.txt-fmt--unterstrichen { text-decoration: underline; text-underline-offset: 2px; }
.txt-fmt--farbe-rot { color: var(--status-danger-fg); }
.txt-fmt--farbe-orange { color: var(--status-warning-toast); }
.txt-fmt--farbe-gruen { color: var(--status-success-fg); }
.txt-fmt--farbe-blau { color: var(--status-info-fg); }
.txt-fmt--farbe-lila { color: var(--purple-700); }
.txt-fmt-leiste {
display: flex;
align-items: center;
gap: var(--space-1);
flex-wrap: wrap;
margin-bottom: var(--space-1);
}
.txt-fmt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 var(--space-1);
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--lod-gray-700);
font-size: 13px;
line-height: 1;
cursor: pointer;
transition: background var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick);
}
.txt-fmt-btn:hover { background: var(--lod-gray-100); color: var(--lod-darkblue); }
.txt-fmt-btn:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
.txt-fmt-btn[aria-pressed="true"] {
background: var(--brand-light);
border-color: var(--brand-default);
color: var(--brand-pressed);
}
.txt-fmt-btn--fett { font-weight: var(--fw-bold, 700); }
.txt-fmt-btn--kursiv { font-style: italic; font-family: Georgia, serif; }
.txt-fmt-btn--unterstrichen { text-decoration: underline; text-underline-offset: 2px; }
.txt-fmt-btn--farbe { gap: var(--space-1); }
.txt-fmt-trenner {
width: 1px;
height: 18px;
background: var(--lod-gray-200);
margin: 0 var(--space-xxs);
}
.txt-fmt-farbklecks {
display: inline-block;
width: 14px;
height: 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--lod-gray-300);
background: currentColor;
}
.txt-fmt-farbklecks:not([class*="txt-fmt--farbe-"]) { color: var(--lod-gray-400); }
.txt-fmt-farbpanel {
position: fixed;
z-index: var(--z-mention-autocomplete);
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.txt-fmt-farbwahl {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
}
.txt-fmt-farbwahl:hover { background: var(--lod-gray-100); }
.txt-fmt-farbwahl:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
.txt-fmt-farbwahl--keine {
color: var(--lod-gray-600);
font-size: 12px;
line-height: 1;
}
@media (max-width: 599px) {
.txt-fmt-btn { min-width: var(--touch-ziel); height: var(--touch-ziel); }
.txt-fmt-farbwahl { width: var(--touch-ziel); height: var(--touch-ziel); }
}
@media (prefers-color-scheme: dark) {
.txt-fmt--farbe-rot { color: color-mix(in srgb, var(--status-danger-fg) 55%, #fff); }
.txt-fmt--farbe-orange { color: color-mix(in srgb, var(--status-warning-toast) 55%, #fff); }
.txt-fmt--farbe-gruen { color: color-mix(in srgb, var(--status-success-fg) 50%, #fff); }
.txt-fmt--farbe-blau { color: color-mix(in srgb, var(--status-info-fg) 55%, #fff); }
.txt-fmt--farbe-lila { color: color-mix(in srgb, var(--purple-700) 45%, #fff); }
}
/*== /styles/ui/kontext-sheet.css ==*/
.topbar-kontext-btn { display: none; }
.topbar-kontext-btn.kontext-visible { display: inline-flex; }
.kontext-sheet-body {
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.kontext-section {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.kontext-section-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.kontext-section-meta {
text-transform: none;
font-weight: var(--fw-regular);
letter-spacing: 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.kontext-select { width: 100%; }
.kontext-modus-wrap {
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px dashed var(--color-border-light);
}
.kontext-segmented {
display: flex;
gap: var(--space-1);
padding: var(--space-1);
background: var(--color-bg-subtle);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-light);
}
.kontext-seg {
flex: 1;
padding: var(--space-1-5) var(--space-2);
border: 0;
background: transparent;
font-family: inherit;
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
color: var(--color-text-muted);
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--duration-quick), color var(--duration-quick);
}
.kontext-seg:hover:not(.active) { color: var(--color-text); }
.kontext-seg.active {
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-2);
}
.kontext-seg:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: 1px;
}
.kontext-hinweis {
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.kontext-hinweis strong { font-weight: var(--fw-semibold); }
.kontext-hinweis--soft {
background: var(--color-bg-subtle);
color: var(--color-text-muted);
border-left: 3px solid var(--color-border);
}
.kontext-hinweis--info {
background: var(--status-info-bg);
color: var(--status-info-fg);
border-left: 3px solid var(--status-info-default);
}
.kontext-hinweis--warn {
background: var(--status-warning-bg);
color: var(--status-warning-fg);
border-left: 3px solid var(--status-warning-default);
}
.kontext-reset-btn {
margin-top: var(--space-2);
width: 100%;
justify-content: center;
}
.kontext-banner {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
z-index: 900;
display: flex;
align-items: center;
gap: var(--space-3);
max-width: calc(100vw - 2 * var(--space-4));
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-pill);
border: 1px solid var(--kontext-banner-border, var(--color-border));
background: var(--kontext-banner-bg, var(--color-surface));
color: var(--kontext-banner-fg, var(--color-text));
box-shadow: var(--shadow-16);
font-size: var(--font-size-sm);
line-height: 1.4;
}
.kontext-banner.hidden { display: none; }
.kontext-banner[data-mode="view"] {
--kontext-banner-bg: var(--status-info-bg);
--kontext-banner-fg: var(--status-info-fg);
--kontext-banner-border: var(--status-info-default);
}
.kontext-banner[data-mode="agieren"] {
--kontext-banner-bg: var(--status-warning-bg);
--kontext-banner-fg: var(--status-warning-fg);
--kontext-banner-border: var(--status-warning-default);
}
.kontext-banner[data-mode="handelnAls"] {
--kontext-banner-bg: var(--status-danger-bg);
--kontext-banner-fg: var(--status-danger-fg);
--kontext-banner-border: var(--status-danger-default);
}
.kontext-banner-pille {
flex: 0 0 auto;
padding: var(--space-px) var(--space-2);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--kontext-banner-fg, var(--color-text));
font-weight: var(--fw-semibold);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.kontext-banner-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kontext-banner-ablauf {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
opacity: 0.85;
}
.kontext-banner-hinweis {
flex: 0 1 auto;
min-width: 0;
padding: var(--space-px) var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kontext-banner-ende {
flex: 0 0 auto;
padding: var(--space-1) var(--space-2-5);
border: 1px solid var(--kontext-banner-border, var(--color-border));
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--kontext-banner-fg, var(--color-text));
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
cursor: pointer;
}
.kontext-banner-ende:hover { background: var(--color-surface-hover); }
@media (max-width: 999px) {
.kontext-banner-ablauf { display: none; }
}
@media (max-width: 599px) {
.kontext-banner {
left: var(--space-2);
right: var(--space-2);
transform: none;
max-width: none;
flex-wrap: wrap;
border-radius: var(--radius-lg);
gap: var(--space-2);
}
.kontext-banner-hinweis { white-space: normal; flex: 1 1 100%; }
}
/*== /styles/ui/action-progress.css ==*/
.lod-action-progress {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
overflow: hidden;
pointer-events: none;
z-index: var(--z-action-progress);
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-enter);
}
.lod-action-progress--fixed {
position: fixed;
top: 0;
}
.lod-action-progress.is-active { opacity: 1; }
.lod-action-progress::before {
content: '';
position: absolute;
inset: 0;
background: var(--brand-default);
opacity: 0.18;
}
.lod-action-progress-bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--brand-default) 20%, transparent) 0%,
var(--brand-default) 55%,
color-mix(in srgb, var(--brand-default) 20%, transparent) 100%
);
transform: translateX(-100%);
animation: lod-action-progress-sweep var(--duration-action-progress) var(--ease-standard) infinite;
}
@keyframes lod-action-progress-sweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
.lod-action-progress-bar {
animation-duration: 2.4s !important;
animation-iteration-count: infinite !important;
}
}
/*== /styles/ui/refresh-banner.css ==*/
.lod-refresh-banner-host { position: relative; }
.lod-refresh-banner {
position: absolute;
top: var(--space-3);
left: 50%;
z-index: 10;
display: inline-flex;
flex-direction: row;
width: auto;
height: auto;
align-items: center;
gap: var(--space-2);
max-width: calc(100% - var(--space-8, 32px));
padding: var(--space-1-5) var(--space-1-5) var(--space-1-5) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-circular);
background: var(--color-surface);
box-shadow: var(--shadow-16);
opacity: 0;
transform: translateX(-50%) translateY(-8px);
transition:
opacity var(--duration-normal) var(--ease-enter),
transform var(--duration-normal) var(--ease-enter);
}
.lod-refresh-banner.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.lod-refresh-banner-ico {
display: inline-flex;
flex: 0 0 auto;
color: var(--brand-default);
}
.lod-refresh-banner-ico .ui-ico img { width: 16px; height: 16px; }
.lod-refresh-banner-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.lod-refresh-banner .btn-primary-sm {
flex: 0 0 auto;
border-radius: var(--radius-circular);
}
.lod-refresh-banner .btn-primary-sm.is-busy {
opacity: 0.6;
cursor: default;
}
.lod-refresh-banner .lod-refresh-banner-x {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
border-radius: var(--radius-circular);
background: none;
color: var(--color-text-muted);
cursor: pointer;
transition: background var(--duration-quick) var(--ease-standard);
}
.lod-refresh-banner .lod-refresh-banner-x:hover { background: var(--color-bg-hover); }
.lod-refresh-banner .lod-refresh-banner-x .ui-ico img { width: 14px; height: 14px; }
.lod-refresh-banner.is-success .lod-refresh-banner-ico { color: var(--status-success-fg); }
@media (max-width: 999px) {
.lod-refresh-banner {
max-width: calc(100% - var(--space-4));
padding-left: var(--space-2-5);
}
}
@media (max-width: 599px) {
.lod-refresh-banner {
left: var(--space-2);
right: var(--space-2);
max-width: none;
transform: translateY(-8px);
border-radius: var(--radius-lg);
justify-content: space-between;
}
.lod-refresh-banner.is-visible { transform: translateY(0); }
.lod-refresh-banner-text { white-space: normal; }
}
/*== /styles/components/drawers/_shared/drawer-fields.css ==*/
.app-scope .field-value { gap: var(--space-2); flex-wrap: nowrap; align-items: center; min-height: 32px; }
.app-scope .field-value-row {
display: flex;
align-items: center;
gap: var(--space-2-5);
min-width: 0;
width: 100%;
box-sizing: border-box;
transition: padding-right var(--duration-flow) var(--ease-standard);
}
.app-scope .field-value-row:has(.app-toggle-pill:not(.is-hidden)),
.app-scope .field-value-row:has(.kanban-fakturierbar-check:not(.is-hidden)) {
padding-right: var(--space-2-5);
}
.app-scope .field-value-row .field-value-main {
flex: 1 1 auto;
min-width: 0;
}
.app-scope .field-value-row .app-toggle-pill,
.app-scope .field-value-row .kanban-fakturierbar-check {
flex: 0 0 auto;
}
.app-scope .app-toggle-pill,
.app-scope .kanban-fakturierbar-check {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-1-5) var(--space-2-5);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--lod-gray-700);
font-size: 12.5px;
font-weight: var(--fw-medium);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: border-color var(--duration-quick), background var(--duration-quick), color var(--duration-quick);
user-select: none;
}
.app-scope .app-toggle-pill:hover,
.app-scope .kanban-fakturierbar-check:hover {
border-color: var(--lod-darkblue-300);
color: var(--lod-darkblue);
}
.app-scope .app-toggle-pill { min-width: 76px; }
@media (max-width: 999px) {
.app-scope .app-toggle-pill { min-height: var(--touch-ziel); }
}
.app-scope .app-toggle-pill input[type="checkbox"],
.app-scope .kanban-fakturierbar-check input[type="checkbox"] {
width: 16px;
min-width: 16px;
max-width: 16px;
height: 16px;
min-height: 16px;
max-height: 16px;
margin: 0;
accent-color: var(--lod-darkblue);
cursor: pointer;
flex: 0 0 16px;
}
.app-scope .app-toggle-pill:has(input:checked),
.app-scope .kanban-fakturierbar-check:has(input:checked) {
background: var(--lod-darkblue-100);
border-color: var(--lod-darkblue-300);
color: var(--lod-darkblue);
}
.app-scope .app-toggle-pill.is-hidden,
.app-scope .kanban-fakturierbar-check.is-hidden { display: none; }
.app-scope .app-toggle-pill--flush { margin: 0; }
.app-scope .app-toggle-pill.is-readonly {
opacity: 0.55;
cursor: not-allowed;
}
.app-scope .app-toggle-pill.is-readonly input[type="checkbox"] {
cursor: not-allowed;
}
.app-scope .app-chevron-trailing {
opacity: 0.55;
margin-left: auto;
}
.app-scope .avatar--xs {
width: 22px;
height: 22px;
}
.app-scope .avatar--xs img {
width: 11px;
height: 11px;
opacity: 0.6;
}
.app-scope .app-badge-icon {
vertical-align: -2px;
margin-right: var(--space-1);
}
.app-scope .app-th-icon {
opacity: 0.6;
vertical-align: middle;
margin-right: var(--space-1-5);
}
.app-scope .wd-section-head--spaced { margin-top: var(--space-4); }
.app-scope .app-firma-kontakte-row {
min-height: 40px;
}
.app-scope .app-firma-kontakte-meta {
display: flex;
flex-direction: column;
gap: var(--space-px);
flex: 1;
min-width: 0;
}
.app-scope .app-firma-kontakte-meta strong,
.app-scope .app-firma-kontakte-meta .muted {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-scope .app-firma-kontakte-meta strong {
color: var(--lod-darkblue-700);
font-size: 12.5px;
font-weight: var(--fw-medium);
}
.app-scope .drawer-wv-warnung {
display: flex;
gap: var(--space-2);
align-items: flex-start;
font-size: var(--font-size-xs);
line-height: 1.45;
color: var(--lod-amber-700);
background: var(--lod-amber-50);
border-radius: var(--radius-sm);
padding: var(--space-2);
margin: 0 0 var(--space-3);
}
.app-scope .drawer-wv-warnung[hidden] { display: none; }
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="1"] { padding-left: var(--space-3); }
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="2"] { padding-left: var(--space-5); }
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="3"] { padding-left: var(--space-7); }
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="4"] { padding-left: var(--space-8); }
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="5"],
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="6"] { padding-left: var(--space-10); }
@media (max-width: 599px) {
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="1"] { padding-left: var(--space-2); }
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="2"] { padding-left: var(--space-3); }
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="3"] { padding-left: var(--space-4); }
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="4"],
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="5"],
.app-scope .app-firma-konzern-stufe[data-konzern-tiefe="6"] { padding-left: var(--space-5); }
}
.app-scope .app-firma-kontakte-meta .muted {
font-size: var(--fs-badge);
color: var(--lod-gray-600);
}
.app-scope .app-firma-kontakte-email {
font-size: 11.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
.app-scope .app-firma-kontakte-chev {
flex-shrink: 0;
opacity: 0.4;
}
.app-scope .app-firma-kontakte-row:hover .app-firma-kontakte-chev {
opacity: 0.8;
}
.app-scope .app-ze-subgrid-row-inner {
display: flex;
align-items: center;
gap: var(--space-2-5);
width: 100%;
min-width: 0;
}
.app-scope .app-ze-subgrid-row-inner.is-locked { opacity: 0.72; }
.app-scope .app-ze-subgrid-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xxs);
}
.app-scope .app-ze-subgrid-row-top {
display: flex;
align-items: baseline;
gap: var(--space-2);
font-size: 12.5px;
}
.app-scope .app-ze-subgrid-row-top strong {
color: var(--lod-darkblue-700);
font-weight: var(--fw-medium);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-scope .app-ze-subgrid-dauer {
flex-shrink: 0;
font-size: 11.5px;
font-weight: var(--fw-medium);
color: var(--lod-darkblue);
padding: var(--space-px) var(--space-2);
border-radius: var(--radius-pill-sm);
background: var(--lod-darkblue-100);
}
.app-scope .app-ze-subgrid-dauer.app-ze-subgrid-dauer--total {
color: var(--lod-white);
background: var(--lod-darkblue);
}
.app-scope .app-ze-subgrid-reise-badge {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px;
font-size: var(--fs-badge); font-weight: var(--fw-medium);
padding: var(--space-px) var(--space-2); border-radius: var(--radius-pill-sm);
background: var(--color-bg-muted); color: var(--color-text-muted);
}
.app-scope .app-ze-subgrid-reise-badge img { opacity: .7; }
.app-scope .app-ze-subgrid-row-bottom {
display: flex;
align-items: center;
gap: var(--space-1-5);
font-size: var(--fs-badge);
}
.app-scope .app-ze-subgrid-lock {
margin-left: auto;
opacity: 0.6;
display: inline-flex;
align-items: center;
}
.app-scope .app-ze-team-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.app-scope .app-ze-team-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-xxs) var(--space-1) var(--space-xxs) var(--space-1-5);
background: var(--lod-darkblue-100);
border: 1px solid var(--lod-darkblue-300);
border-radius: var(--radius-circular);
font-size: 11.5px;
color: var(--lod-darkblue-700);
font-weight: var(--fw-medium);
}
.app-scope .app-ze-team-chip .avatar-slot { flex-shrink: 0; }
.app-scope .app-ze-team-chip-zeit {
flex-shrink: 0;
white-space: nowrap;
padding-left: var(--space-1-5);
margin-left: var(--space-xxs);
border-left: 1px solid var(--lod-darkblue-300);
color: var(--lod-darkblue-600);
font-variant-numeric: tabular-nums;
}
.app-scope .app-ze-team-rows {
display: flex;
flex-direction: column;
gap: var(--space-1);
width: 100%;
}
.app-scope .app-ze-team-row {
display: flex;
align-items: center;
gap: var(--space-1-5);
min-width: 0;
}
.app-scope .app-ze-team-row-avatar { flex-shrink: 0; }
.app-scope .app-ze-team-row-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-body);
color: var(--lod-darkblue-800);
}
.app-scope .app-ze-team-row .app-ze-team-row-zeit {
flex: 0 0 200px;
min-width: 0;
}
.app-scope .app-ze-team-row .app-ze-team-row-zeit .app-duration-picker-chips:empty { display: none; }
.app-scope .app-ze-team-row-remove { flex-shrink: 0; }
.app-scope .app-ze-team-row-remove:hover { background: var(--lod-darkblue-100); }
@media (max-width: 1399px) {
.app-scope .app-ze-team-row { gap: var(--space-1-5); }
}
@media (max-width: 999px) {
.app-scope .app-ze-team-row-name { font-size: var(--fs-meta); }
}
@media (max-width: 599px) {
.app-scope .app-ze-team-row {
flex-wrap: wrap;
row-gap: var(--space-xxs);
}
.app-scope .app-ze-team-row-name { flex: 1 1 100%; white-space: normal; }
.app-scope .app-ze-team-row .app-ze-team-row-zeit { flex: 1 1 auto; }
}
.app-scope .app-ze-team-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
}
.app-scope .app-ze-team-chip-remove:hover { background: rgba(255,255,255,.7); }
.app-scope .app-ze-team-chip-remove img { opacity: 0.6; }
.app-scope .app-ze-team-add {
margin-top: var(--space-1-5);
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-2-5);
height: 32px;
border: 1px dashed var(--lod-gray-300);
border-radius: var(--radius-md);
background: transparent;
cursor: pointer;
color: var(--lod-darkblue);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
white-space: nowrap;
flex: 0 0 auto;
align-self: flex-start;
box-sizing: border-box;
transition: background var(--duration-quick), border-color var(--duration-quick);
}
.app-scope .app-ze-team-add > img {
width: 22px;
height: 22px;
padding: var(--space-1);
box-sizing: border-box;
flex-shrink: 0;
opacity: 0.75;
}
.app-scope .app-ze-team-add:hover {
background: var(--lod-darkblue-50);
border-color: var(--lod-darkblue-300);
border-style: solid;
}
.app-scope .app-ze-team-rows:empty { display: none; }
.app-scope .app-ze-team-rows:empty + .app-ze-team-add { margin-top: 0; }
.app-scope .shared-drawer .field-grid .field-value[data-ze-field-slot="team"] {
align-items: flex-start;
}
.app-scope .shared-drawer .field-grid .field-value[data-ze-field-slot="team"] > .field-icon {
margin-top: 9px;
}
.app-scope .shared-drawer .field-grid .field-value[data-ph-field-slot="externSichtbar"] {
align-items: flex-start;
}
.app-scope .shared-drawer .field-grid .field-value[data-ph-field-slot="externSichtbar"] > .field-icon {
margin-top: 6px;
}
.app-scope .field-value[data-ze-field-slot="team"] .field-value-content,
.app-scope .field-value[data-ze-field-slot="team"] > div[data-ze-field-content="team"] {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-1-5);
min-width: 0;
}
.app-scope .field-value[data-ze-field-slot="team"] .app-ze-team-chips {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.app-scope .field-value[data-ag-field-slot="faelligkeit"] .field-value-content:has(.app-drawer-date-warn:not(.is-hidden)) {
flex-direction: column;
align-items: stretch;
gap: var(--space-1);
}
.app-scope .shared-drawer .field-grid .field-value[data-ag-field-slot="faelligkeit"]:has(.app-drawer-date-warn:not(.is-hidden)) {
align-items: flex-start;
}
.app-scope .shared-drawer .field-grid .field-value[data-ag-field-slot="faelligkeit"]:has(.app-drawer-date-warn:not(.is-hidden)) > .field-icon {
margin-top: 9px;
}
.app-scope .app-drawer-date-warn {
font-size: 11.5px;
font-weight: var(--fw-medium);
color: var(--color-warn-text);
}
.app-scope .app-drawer-date-warn.is-hidden { display: none; }
.app-scope .shared-drawer .field-grid > .is-collapsed {
display: none;
}
.app-scope .drawer-collapse {
margin: var(--space-2) 0 var(--space-4);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
background: var(--lod-gray-50);
padding: 0 var(--space-3);
transition: padding-bottom var(--duration-flow) var(--ease-standard);
}
.app-scope .drawer-collapse > .drawer-collapse-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: var(--space-1-5);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: .03em;
color: var(--lod-gray-600);
padding: var(--space-2-5) 0;
user-select: none;
}
@media (max-width: 999px) {
.app-scope .drawer-collapse > .drawer-collapse-summary { min-height: var(--touch-ziel); }
}
.app-scope .drawer-collapse > .drawer-collapse-summary::-webkit-details-marker { display: none; }
.app-scope .drawer-collapse-chev {
width: 14px;
height: 14px;
opacity: 0.6;
transition: transform var(--duration-quick) var(--ease-soft);
}
.app-scope .drawer-collapse[open] > .drawer-collapse-summary .drawer-collapse-chev { transform: rotate(90deg); }
.app-scope .drawer-collapse[open] { padding-bottom: var(--space-3); }
.app-scope .drawer-collapse-hint {
text-transform: none;
font-weight: var(--fw-regular);
color: var(--lod-gray-400);
letter-spacing: 0;
}
.app-scope .drawer-collapse > .field-grid { margin-top: var(--space-1); }
.app-scope .shared-drawer .app-ze-abr-komm-block {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-top: var(--space-2);
}
.app-scope .shared-drawer .app-ze-anfahrt-link {
display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2);
padding: 4px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-pill-sm);
background: var(--color-bg-muted); color: var(--color-text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.app-scope .shared-drawer .app-ze-anfahrt-link:hover { border-color: var(--brand-default); color: var(--brand-default); }
.app-scope .shared-drawer .app-ze-view-text {
font-size: var(--font-size-sm);
line-height: 1.55;
color: var(--color-text-primary);
overflow-wrap: anywhere;
}
.app-scope .shared-drawer .app-ze-view-text.is-empty {
color: var(--color-text-muted);
font-style: italic;
}
.app-scope .shared-drawer .app-ze-abr-komm-label {
font-size: 12.5px;
color: var(--lod-gray-700);
font-weight: var(--fw-regular);
position: relative;
}
.app-scope .app-ze-checklist-mirror {
margin-top: var(--space-2);
padding: var(--space-2) var(--space-2-5);
background: var(--lod-gray-50);
border-radius: var(--radius-md);
border: 1px solid var(--lod-gray-100);
}
.app-scope .app-ze-checklist-title {
font-size: var(--fs-badge);
margin-bottom: var(--space-1-5);
}
.app-scope .app-ze-checklist-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.app-scope .app-ze-checklist-item {
font-size: 12.5px;
}
.app-scope .app-ze-checklist-item label {
display: flex;
align-items: center;
gap: var(--space-1-5);
cursor: pointer;
}
.app-scope .app-ze-checklist-item.is-done {
text-decoration: line-through;
opacity: 0.55;
}
.app-scope .app-ze-subgrid-avatars {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.app-scope .app-ze-subgrid-avatar {
margin-left: -6px;
border: 2px solid var(--lod-white);
border-radius: 50%;
position: relative;
}
.app-scope .app-ze-subgrid-avatar:first-child { margin-left: 0; }
.app-scope .app-ze-subgrid-avatar-more {
margin-left: -4px;
background: var(--lod-gray-200);
color: var(--lod-darkblue-700);
border: 2px solid var(--lod-white);
border-radius: 50%;
min-width: 24px;
height: 24px;
font-size: var(--font-size-xs);
font-weight: var(--fw-bold);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-1);
}
.app-scope .app-ms-trigger {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--space-1);
padding: 0 var(--space-2-5);
height: 32px;
width: 100%;
line-height: 1.2;
overflow: hidden;
}
.app-scope .app-ms-value {
flex: 1;
min-width: 0;
font-size: var(--fs-body);
color: var(--lod-darkblue);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-scope .app-ms-placeholder {
color: var(--lod-gray-500);
}
.app-scope .app-ms-count {
flex-shrink: 0;
padding: var(--space-px) var(--space-2);
border-radius: var(--radius-pill-sm);
background: var(--lod-darkblue-100);
color: var(--lod-darkblue);
font-size: var(--fs-badge);
font-weight: var(--fw-medium);
line-height: 1.4;
}
.app-scope .app-ms-chev {
margin-left: auto;
opacity: 0.55;
flex-shrink: 0;
transition: transform var(--duration-fast) var(--ease-soft), opacity var(--duration-fast) var(--ease-soft);
}
.app-scope .app-ms-trigger:hover .app-ms-chev { opacity: 0.8; }
.app-ms-panel {
--kleb-versatz: var(--space-1-5);
padding: var(--kleb-versatz);
max-height: 320px;
overflow-y: auto;
min-width: 260px;
}
.app-ms-search {
position: sticky;
top: calc(-1 * var(--kleb-versatz, 0px));
background: var(--color-surface);
padding: var(--space-xxs) var(--space-xxs) calc(var(--space-2) + var(--space-1));
display: flex;
align-items: center;
gap: var(--space-1-5);
border-bottom: 1px solid var(--lod-gray-100);
}
.app-ms-search input {
flex: 1;
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
padding: 5px var(--space-2-5);
font-size: 12.5px;
outline: none;
}
.app-ms-search input:focus {
border-color: var(--lod-turquoise);
}
.app-ms-list {
display: flex;
flex-direction: column;
gap: var(--space-px);
}
.app-ms-item {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: 7px var(--space-2-5);
cursor: pointer;
border-radius: var(--radius-md);
font-size: 12.5px;
color: var(--lod-darkblue-700);
transition: background var(--duration-snap);
user-select: none;
}
.app-ms-item:hover {
background: var(--lod-gray-50);
}
.app-ms-item.is-selected {
background: var(--lod-turquoise-50);
font-weight: var(--fw-medium);
}
.app-ms-item-check {
width: 16px;
height: 16px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--lod-gray-300);
border-radius: var(--radius-sm);
background: var(--color-surface);
transition: background var(--duration-snap), border-color var(--duration-snap);
}
.app-ms-item.is-selected .app-ms-item-check {
background: var(--lod-turquoise);
border-color: var(--lod-turquoise);
}
.app-ms-item-check img {
width: 10px;
height: 10px;
opacity: 0;
transition: opacity var(--duration-snap);
}
.app-ms-item.is-selected .app-ms-item-check img { opacity: 1; filter: brightness(0) invert(1); }
.app-ms-empty {
padding: var(--space-2-5) var(--space-3);
text-align: center;
font-size: var(--font-size-sm);
color: var(--lod-gray-500);
}
.app-scope .kanban-phase-extern-wrap {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
align-items: flex-start;
}
.app-scope .kanban-phase-extern-warn {
display: inline-flex;
align-items: flex-start;
gap: var(--space-1-5);
padding: var(--space-1-5) var(--space-2-5);
border-radius: var(--radius-md);
background: var(--lod-warning-100);
border: 1px solid var(--lod-warning-300);
color: var(--lod-warning-800);
font-size: 11.5px;
line-height: 1.35;
max-width: 380px;
}
.app-scope .kanban-phase-extern-warn.is-hidden { display: none; }
.app-scope .kanban-phase-extern-warn img { flex-shrink: 0; margin-top: var(--space-px); opacity: 0.85; }
.app-scope .field-value-content {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: var(--space-2-5);
min-width: 0;
overflow-wrap: anywhere;
}
.app-scope .field-value-content .drawer-code-wolke {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1-5) var(--space-2-5);
min-width: 0;
}
.app-scope .field-value-content .drawer-code-atom {
flex: 0 0 auto;
overflow-wrap: normal;
word-break: normal;
}
.app-scope .field-value-content .drawer-setting {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
flex: 1 1 auto;
}
.app-scope .drawer-setting-wert {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-2);
min-width: 0;
}
.app-scope .drawer-setting-wert code {
overflow-wrap: anywhere;
min-width: 0;
}
.app-scope .drawer-setting-key {
font-size: var(--fs-badge);
color: var(--color-text-muted);
}
.app-scope .drawer-setting-key code { overflow-wrap: anywhere; }
.app-scope .field-label.drawer-setting-label { overflow-wrap: anywhere; }
.app-scope .field-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: 0.7;
}
.app-scope .field-label.is-required { position: relative; }
.app-scope .app-required-dot {
display: inline-block;
color: var(--lod-danger);
margin-left: var(--space-1);
font-weight: var(--fw-bold);
line-height: 1;
}
.app-scope .app-drawer-number-wrap {
display: flex;
align-items: center;
gap: var(--space-1-5);
flex: 1;
min-width: 0;
}
.app-scope .app-drawer-number-wrap .app-drawer-input {
flex: 1;
min-width: 60px;
}
.app-scope .dr-hidden { display: none !important; }
.app-scope .field-label--required::after {
content: '*';
margin-left: var(--space-1);
color: var(--lod-danger);
font-weight: var(--fw-bold);
}
.app-scope .field-value.is-missing {
box-shadow: 0 0 0 1.5px var(--lod-danger) inset;
border-radius: var(--radius-md);
}
.app-scope .field-value.is-missing .app-drawer-select,
.app-scope .field-value.is-missing .app-betreff-picker,
.app-scope .field-value.is-missing .app-kategorie-picker,
.app-scope .field-value.is-missing .app-async-picker,
.app-scope .field-value.is-missing .app-phase-picker,
.app-scope .field-value.is-missing .app-duration-picker-trigger,
.app-scope .field-value.is-missing .app-person-field,
.app-scope .field-value.is-missing .app-drawer-date-trigger {
border-color: var(--lod-danger);
}
.app-scope .drawer-title-editable.is-missing {
border-color: var(--lod-danger);
box-shadow: 0 0 0 1.5px var(--lod-danger) inset;
}
.app-scope .drawer-chips .f-chip.is-missing {
border: 1.5px solid var(--lod-danger);
}
.app-scope .drawer-chips .f-chip-picker-slot.is-missing {
border-radius: var(--radius-md);
box-shadow: 0 0 0 1.5px var(--lod-danger);
}
.app-scope .app-drawer-input,
.app-scope .app-drawer-select,
.app-scope .app-betreff-picker,
.app-scope .app-kategorie-picker,
.app-scope .app-async-picker,
.app-scope .app-phase-picker,
.app-scope .app-duration-picker-trigger,
.app-scope .app-person-field,
.app-scope .app-date-field-trigger,
.app-scope .app-date-field-zeit,
.app-scope .app-drawer-date-trigger,
.app-scope .app-drawer-number-wrap:has(.app-drawer-input-suffix) {
flex: 1;
min-width: 0;
height: 32px;
min-height: 32px;
width: 100%;
padding: 0 var(--space-2-5);
background: var(--color-surface);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
color: var(--lod-darkblue);
font-size: var(--fs-body);
font-family: var(--lod-font-sans);
cursor: pointer;
text-align: left;
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.app-scope .app-drawer-input:hover,
.app-scope .app-drawer-select:hover,
.app-scope .app-betreff-picker:hover,
.app-scope .app-kategorie-picker:hover,
.app-scope .app-async-picker:hover,
.app-scope .app-phase-picker:hover:not(.is-disabled),
.app-scope .app-duration-picker-trigger:hover,
.app-scope .app-person-field:hover,
.app-scope .app-date-field-trigger:hover,
.app-scope .app-date-field-zeit:hover,
.app-scope .app-drawer-date-trigger:hover {
background: var(--lod-gray-50);
}
.app-scope .field-value .select[data-cs-trigger] {
height: 32px;
box-sizing: border-box;
}
.app-scope .termin-teams-card {
background: color-mix(in srgb, var(--lod-darkblue) 6%, #fff);
border: 1px solid color-mix(in srgb, var(--lod-darkblue) 18%, #fff);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-3-5);
}
.app-scope .termin-teams-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--lod-darkblue);
font-weight: var(--fw-semibold);
text-decoration: none;
font-size: var(--font-size-base);
}
.app-scope .termin-teams-link:hover { text-decoration: underline; }
.app-scope .field-value .app-drawer-input:disabled,
.app-scope .field-value .app-drawer-select:disabled,
.app-scope .field-value .app-betreff-picker:disabled,
.app-scope .field-value .app-kategorie-picker:disabled,
.app-scope .field-value .app-async-picker:disabled,
.app-scope .field-value .app-phase-picker:disabled,
.app-scope .field-value .app-duration-picker-trigger:disabled,
.app-scope .field-value .app-person-field:disabled,
.app-scope .field-value .app-drawer-date-trigger:disabled,
.app-scope .field-value .app-time-picker-trigger:disabled,
.app-scope .field-value .select[data-cs-trigger]:disabled,
.app-scope .field-value .app-betreff-picker.is-readonly {
background: transparent;
border-color: transparent;
box-shadow: none;
cursor: default;
opacity: 1;
color: var(--lod-darkblue);
}
.app-scope .field-value .app-betreff-picker.is-readonly { pointer-events: none; }
.app-scope .field-value .app-betreff-picker.is-readonly img { display: none; }
.app-scope .field-value .app-drawer-input:disabled:hover,
.app-scope .field-value .app-drawer-select:disabled:hover,
.app-scope .field-value .app-betreff-picker:disabled:hover,
.app-scope .field-value .app-kategorie-picker:disabled:hover,
.app-scope .field-value .app-async-picker:disabled:hover,
.app-scope .field-value .app-duration-picker-trigger:disabled:hover,
.app-scope .field-value .app-person-field:disabled:hover,
.app-scope .field-value .app-drawer-date-trigger:disabled:hover,
.app-scope .field-value .app-time-picker-trigger:disabled:hover,
.app-scope .field-value .select[data-cs-trigger]:disabled:hover,
.app-scope .field-value .app-betreff-picker.is-readonly:hover {
background: transparent;
}
.app-scope .field-value button:disabled .app-chevron-trailing,
.app-scope .field-value .app-time-picker-trigger:disabled .app-time-picker-chevron,
.app-scope .field-value .select[data-cs-trigger][disabled] .app-chevron-trailing {
display: none;
}
.app-scope .field-value .app-time-picker { flex: 1; min-width: 0; }
.app-scope .field-value .app-time-picker-trigger {
width: 100%;
height: 32px;
min-height: 32px;
padding: 0 var(--space-2-5);
border-color: var(--lod-gray-200);
color: var(--lod-darkblue);
}
.app-scope .field-value .app-time-picker-trigger:hover:not(:disabled) { background: var(--lod-gray-50); }
.app-scope .field-value .app-time-picker-value { flex: 1; min-width: 0; text-align: left; }
.app-scope .field-value .app-time-picker-value.is-placeholder {
color: var(--lod-gray-500);
font-style: italic;
}
.drawer-sync-banner {
padding-top: 12px !important;
padding-bottom: 0 !important;
}
.drawer-sync-banner-inner {
display: flex;
align-items: flex-start;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-3);
background: var(--lod-amber-50);
border: 1px solid var(--lod-amber-200);
border-left: 3px solid var(--lod-amber-700);
border-radius: var(--radius-md);
font-size: 12.5px;
line-height: 1.45;
color: var(--lod-gray-900);
}
.drawer-sync-banner-inner img {
flex: 0 0 auto;
margin-top: var(--space-px);
opacity: 0.75;
}
.drawer-sync-banner-inner strong {
color: var(--lod-amber-700);
}
.app-scope .app-drawer-number-wrap:has(.app-drawer-input-suffix) {
cursor: text;
gap: var(--space-1-5);
}
.app-scope .app-drawer-number-wrap:has(.app-drawer-input-suffix) .app-drawer-input {
height: 100%;
min-height: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.app-scope .app-drawer-number-wrap:has(.app-drawer-input-suffix) .app-drawer-input:focus {
border: 0;
box-shadow: none;
}
.app-scope .app-drawer-number-wrap:has(.app-drawer-input-suffix):focus-within {
border-color: var(--lod-turquoise);
box-shadow: var(--lod-shadow-focus);
}
.app-scope .app-drawer-input-suffix {
flex-shrink: 0;
white-space: nowrap;
user-select: none;
color: var(--color-text-muted);
}
.app-scope .shared-drawer .app-drawer-textarea {
width: 100%;
min-height: 88px;
resize: vertical;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
padding: var(--space-2) var(--space-2-5);
font: inherit;
font-size: var(--font-size-sm);
line-height: 1.5;
color: var(--color-text);
}
.app-scope .shared-drawer .app-drawer-textarea:focus-visible {
outline: none;
border-color: var(--lod-darkblue);
}
.app-scope .shared-drawer .app-drawer-textarea::placeholder {
color: var(--color-text-muted);
}
@media (max-width: 999px) {
.app-scope .app-drawer-input,
.app-scope .app-drawer-select,
.app-scope .app-betreff-picker,
.app-scope .app-kategorie-picker,
.app-scope .app-async-picker,
.app-scope .app-phase-picker,
.app-scope .app-duration-picker-trigger,
.app-scope .app-person-field,
.app-scope .app-drawer-date-trigger { height: auto; min-height: var(--touch-ziel); }
.app-scope .field-value .select[data-cs-trigger] { height: auto; min-height: var(--touch-ziel); }
.app-scope .app-drawer-number-wrap:has(.app-drawer-input-suffix) { height: auto; min-height: var(--touch-ziel); }
.app-scope .app-drawer-number-wrap:has(.app-drawer-input-suffix) .app-drawer-input { height: auto; align-self: stretch; }
.app-scope .field-value .app-time-picker-trigger { height: auto; min-height: var(--touch-ziel); }
}
/*== /styles/components/drawers/_shared/drawer-field-primitives.css ==*/
.app-scope .app-drawer-input {
cursor: text;
-webkit-appearance: none;
appearance: none;
background: var(--color-surface);
border: 1px solid var(--lod-gray-200);
outline: none;
box-shadow: none;
}
.app-scope .app-drawer-input:focus {
outline: none;
background: var(--color-surface);
border: 1px solid var(--lod-turquoise);
box-shadow: var(--lod-shadow-focus);
}
.app-scope .app-drawer-select:focus,
.app-scope .app-drawer-select:focus-visible,
.app-scope .app-betreff-picker:focus,
.app-scope .app-betreff-picker:focus-visible,
.app-scope .app-kategorie-picker:focus,
.app-scope .app-kategorie-picker:focus-visible,
.app-scope .app-async-picker:focus,
.app-scope .app-async-picker:focus-visible,
.app-scope .app-phase-picker:focus,
.app-scope .app-phase-picker:focus-visible,
.app-scope .app-duration-picker-trigger:focus,
.app-scope .app-duration-picker-trigger:focus-visible,
.app-scope .app-person-field:focus,
.app-scope .app-person-field:focus-visible,
.app-scope .app-drawer-date-trigger:focus,
.app-scope .app-drawer-date-trigger:focus-visible,
.app-scope .field-value .app-time-picker-trigger:focus,
.app-scope .field-value .app-time-picker-trigger:focus-visible {
outline: none;
background: var(--color-surface);
border-color: var(--lod-darkblue-300);
box-shadow: var(--lod-shadow-focus);
}
.app-scope .app-drawer-static {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0;
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--lod-gray-900);
cursor: default;
}
.app-scope .app-drawer-date-wrap {
display: flex;
align-items: center;
gap: var(--space-2-5);
flex-wrap: nowrap;
min-width: 0;
flex: 1;
}
.app-scope .app-drawer-date-trigger {
}
.app-scope .app-drawer-date-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .app-drawer-date-trigger-label.muted { color: var(--lod-gray-500); font-style: italic; }
.app-scope .app-drawer-date-chips {
display: inline-flex;
align-items: center;
gap: var(--space-1);
flex: 0 4 auto;
min-width: 0;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
margin-left: auto;
}
.app-scope .app-drawer-date-chips::-webkit-scrollbar { display: none; }
.app-scope .app-drawer-date-chips button { white-space: nowrap; flex: 0 0 auto; }
.app-scope .app-drawer-date-chips button {
padding: 3px var(--space-2-5);
border-radius: var(--radius-xl);
background: var(--lod-gray-50);
border: 1px solid transparent;
color: var(--lod-gray-700);
font-size: 11.5px;
font-weight: var(--fw-medium);
cursor: pointer;
}
.app-scope .app-drawer-date-chips button:hover { background: var(--lod-gray-100); color: var(--lod-darkblue); }
/*== /styles/components/drawers/_shared/team-editor.css ==*/
.app-scope .app-team-editor {
display: flex;
align-items: center;
gap: 0;
flex: 1;
min-width: 0;
padding-left: var(--space-2-5);
}
.app-scope .app-team-editor-stack:empty { display: none; }
.app-scope .app-team-editor-stack { display: inline-flex; align-items: center; gap: 0; }
.app-scope .app-team-editor-member {
position: relative;
background: transparent;
border: none;
padding: 0;
margin-right: -4px;
cursor: pointer;
}
.app-scope .app-team-editor-member.rolle-2,
.app-scope .app-team-editor-member.rolle-3 {
z-index: 2;
margin-right: var(--space-1);
}
.app-scope .app-team-editor-member:has(+ .app-team-editor-member.rolle-2),
.app-scope .app-team-editor-member:has(+ .app-team-editor-member.rolle-3) {
margin-right: var(--space-1-5);
}
.app-scope .app-team-editor-member:hover { z-index: 3; }
.app-scope .app-team-editor-rolle-badge {
position: absolute;
right: -3px;
bottom: -3px;
width: 14px;
height: 14px;
padding: 0;
border-radius: 50%;
background: var(--lod-darkblue);
color: var(--lod-white);
border: 2px solid var(--lod-white);
font-size: 8.5px;
font-weight: var(--fw-bold);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 4;
box-shadow: 0 0 0 1px var(--lod-white);
}
.app-scope .app-team-editor-member.rolle-2 .app-team-editor-rolle-badge { background: var(--lod-warning); border-color: var(--lod-white); color: var(--lod-white); }
.app-scope .app-team-editor-member.rolle-3 .app-team-editor-rolle-badge { background: var(--lod-gray-500); border-color: var(--lod-white); color: var(--lod-white); }
.app-scope .app-team-editor-member:last-child { margin-right: 0; }
.app-scope .app-team-editor-member .avatar-slot {
width: 22px;
height: 22px;
}
.app-scope .app-team-editor-member .avatar-slot > .avatar {
width: 22px !important;
height: 22px !important;
font-size: var(--font-size-xs) !important;
border-radius: 50%;
border: 2px solid var(--lod-white);
transition: transform var(--duration-quick) var(--ease-standard);
}
.app-scope .app-team-editor-member:hover .avatar { transform: scale(1.08); }
.app-scope .app-team-editor-overflow {
margin-left: var(--space-xxs);
font-size: 11.5px;
color: var(--lod-gray-500);
font-weight: var(--fw-semibold);
}
@media (max-width: 999px) {
.app-scope .app-team-editor-add { min-height: var(--touch-ziel); }
}
.app-scope .app-team-editor-add {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0 var(--space-2);
height: 22px;
background: transparent;
border: 1px dashed var(--lod-gray-300);
border-radius: var(--radius-counter);
color: var(--lod-gray-700);
font-size: 11.5px;
font-weight: var(--fw-medium);
cursor: pointer;
line-height: 1;
}
.app-scope .app-team-editor-add img { width: 11px; height: 11px; }
.app-scope .app-team-editor-stack:not(:empty) + .app-team-editor-add { margin-left: var(--space-2); }
.app-scope .app-team-editor-add:hover { border-color: var(--lod-darkblue-300); color: var(--lod-darkblue); border-style: solid; }
.app-team-editor-member-panel { padding: var(--space-2-5) var(--space-3); min-width: 200px; font-family: var(--lod-font-sans); }
.app-team-editor-member-head { margin-bottom: var(--space-2); font-size: 13px; color: var(--lod-darkblue); }
.app-team-editor-rolle-row { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); }
.app-team-editor-rolle-btn {
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-xl);
font-size: 11.5px;
background: var(--lod-gray-50);
border: 1px solid transparent;
color: var(--lod-gray-700);
cursor: pointer;
}
.app-team-editor-rolle-btn:hover { background: var(--lod-gray-100); }
.app-team-editor-rolle-btn.is-active { background: var(--lod-darkblue); color: var(--lod-white); }
.app-team-editor-remove {
display: inline-flex;
align-items: center;
gap: 5px;
padding: var(--space-1) var(--space-2);
background: transparent;
border: none;
color: var(--lod-danger);
font-size: var(--font-size-sm);
cursor: pointer;
border-radius: var(--radius-md);
}
.app-team-editor-remove:hover { background: var(--status-danger-soft); }
.app-team-editor-add-panel { padding: var(--space-2); font-family: var(--lod-font-sans); }
.app-team-editor-add-list { max-height: 280px; overflow-y: auto; }
.app-team-editor-add-item {
display: flex;
align-items: center;
gap: var(--space-2-5);
width: 100%;
padding: var(--space-1-5) var(--space-2-5);
background: transparent;
border: none;
border-radius: var(--radius-md);
font-size: 13px;
text-align: left;
cursor: pointer;
}
.app-team-editor-add-item:hover { background: var(--lod-gray-50); }
.app-team-editor-add-item .avatar { width: 22px; height: 22px; font-size: var(--font-size-xs); color: var(--lod-white); font-weight: var(--fw-semibold); }
.app-team-editor-empty { padding: var(--space-2-5); color: var(--lod-gray-500); font-style: italic; text-align: center; font-size: var(--font-size-sm); }
.app-scope .app-person-field-name {
font-size: 13px;
color: var(--lod-darkblue);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-scope .app-person-field-name.muted { color: var(--lod-gray-500); font-style: italic; }
.app-scope .app-person-field-chevron { opacity: 0.6; flex-shrink: 0; }
.app-person-picker-panel { padding: var(--space-2); font-family: var(--lod-font-sans); box-sizing: border-box; width: 100%; }
.app-person-picker-list { max-height: 300px; overflow-y: auto; }
.app-person-picker-item {
display: flex;
align-items: center;
gap: var(--space-2-5);
width: 100%;
padding: 7px var(--space-2-5);
background: transparent;
border: none;
border-radius: var(--radius-md);
font-size: 13px;
text-align: left;
cursor: pointer;
min-width: 0;
}
.app-person-picker-item:hover { background: var(--lod-gray-50); }
.app-person-picker-item .avatar { width: 22px; height: 22px; font-size: var(--font-size-xs); color: var(--lod-white); font-weight: var(--fw-semibold); }
.app-person-picker-item > span:not(.avatar):not(.avatar-slot) {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-person-picker-item.is-assigned { cursor: default; opacity: 0.55; }
.app-person-picker-item.is-assigned:hover { background: transparent; }
.app-person-picker-item > span.app-person-picker-hint:not(.avatar):not(.avatar-slot) {
flex: 0 0 auto;
color: var(--lod-gray-500);
font-size: var(--font-size-xs);
font-style: italic;
}
/*== /styles/components/drawers/_shared/checklist.css ==*/
.app-scope .app-checklist-assignee {
background: transparent;
border: 1px solid transparent;
padding: 0;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: var(--space-1-5);
}
.app-scope .app-checklist-assignee:hover { border-color: var(--lod-gray-200); }
.app-scope .app-checklist-assignee .avatar {
width: 20px;
height: 20px;
font-size: 9px;
font-weight: var(--fw-semibold);
color: var(--lod-white);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-scope .app-checklist-assignee .avatar.empty {
background: var(--lod-gray-200);
border: none;
color: var(--lod-gray-500);
}
.app-scope .app-checklist-assignee .avatar.empty img {
width: 60%; height: 60%; opacity: 0.55;
}
.app-scope .app-checklist-assignee-item .avatar.empty,
.app-checklist-assignee-panel .avatar.empty {
background: var(--lod-gray-200);
color: var(--lod-gray-500);
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-scope .app-checklist-assignee-item .avatar.empty img,
.app-checklist-assignee-panel .avatar.empty img {
width: 60%; height: 60%; opacity: 0.55;
}
.app-checklist-assignee-panel { padding: var(--space-1-5); font-family: var(--lod-font-sans); box-sizing: border-box; width: 100%; }
.app-checklist-assignee-head {
padding: var(--space-1-5) var(--space-2-5) var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lod-gray-500);
}
.app-checklist-assignee-item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-1-5) var(--space-2-5);
background: transparent;
border: none;
border-radius: var(--radius-md);
font-size: 13px;
text-align: left;
cursor: pointer;
}
.app-checklist-assignee-item:hover { background: var(--lod-gray-50); }
.app-checklist-assignee-item.is-active { background: var(--lod-darkblue-100); color: var(--lod-darkblue); }
.app-checklist-assignee-item .avatar { width: 20px; height: 20px; font-size: 9px; color: var(--lod-white); font-weight: var(--fw-semibold); }
.app-scope .app-checklist-root {
display: flex;
flex-direction: column;
gap: var(--space-2);
position: relative;
}
.app-scope .app-checklist-section-header {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.app-scope .app-checklist-title {
font-size: var(--font-size-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
color: var(--lod-gray-500);
}
.app-scope .app-checklist-progress {
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
text-transform: none;
letter-spacing: 0;
color: var(--lod-gray-500);
font-variant-numeric: tabular-nums;
}
.app-scope .app-checklist-progress-bar {
height: 4px;
background: var(--lod-gray-100);
border-radius: var(--radius-circular);
overflow: hidden;
margin: var(--space-xxs) 0 var(--space-2);
}
.app-scope .app-checklist-progress-bar > div {
height: 100%;
background: var(--lod-turquoise);
transition: width var(--duration-normal) var(--lod-ease);
border-radius: var(--radius-circular);
}
.app-scope .app-checklist-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-xxs);
}
.app-scope .app-checklist-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-1);
border-radius: var(--radius-md);
min-height: 36px;
}
.app-scope .app-checklist-item:hover {
background: var(--lod-gray-50);
}
@media (max-width: 999px) {
.app-scope .app-checklist-add { min-height: var(--touch-ziel); }
}
.app-scope .app-checklist-add {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 7px var(--space-2-5);
align-self: flex-start;
font-size: var(--font-size-base);
font-weight: var(--fw-medium);
color: var(--lod-gray-700);
background: transparent;
border: none;
border-radius: var(--radius-md);
transition: color var(--duration-quick), background var(--duration-quick);
}
.app-scope .app-checklist-add:hover {
color: var(--lod-darkblue);
background: var(--lod-darkblue-50);
}
.app-scope .app-checklist-add:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus);
}
.app-scope .app-checklist-add-plus {
font-size: var(--font-size-md);
font-weight: var(--fw-medium);
width: 14px;
text-align: center;
color: inherit;
}
.app-scope .app-checklist-empty-hint {
font-size: var(--font-size-base);
color: var(--lod-gray-500);
padding: 0 var(--space-2-5);
font-style: italic;
}
.app-scope .app-checklist-drag {
cursor: grab;
color: var(--lod-gray-300);
font-size: var(--font-size-sm);
user-select: none;
min-width: 14px;
text-align: center;
padding: var(--space-2-5) var(--space-1);
margin: -10px 0;
}
.app-scope .app-checklist-drag:hover { color: var(--lod-gray-500); }
.app-scope .app-checklist-checkbox {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
flex-shrink: 0;
cursor: pointer;
border: 1.5px solid var(--lod-gray-300);
border-radius: var(--radius-sm);
background: var(--color-surface);
display: grid;
place-items: center;
transition: background var(--duration-snappy), border-color var(--duration-snappy), box-shadow var(--duration-snappy);
margin: 0;
position: relative;
}
.app-scope .app-checklist-checkbox:hover {
border-color: var(--lod-turquoise);
}
.app-scope .app-checklist-checkbox:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus);
}
.app-scope .app-checklist-checkbox:checked {
background: var(--lod-success);
border-color: var(--lod-success);
}
.app-scope .app-checklist-checkbox:checked::after {
content: '';
width: 4px;
height: 8px;
border: solid var(--lod-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg) translate(-1px, -1px);
display: block;
}
.app-scope .app-checklist-text {
flex: 1;
font-size: 13px;
color: var(--lod-gray-900);
cursor: text;
word-break: break-word;
min-width: 0;
}
.app-scope .app-checklist-text.done {
text-decoration: line-through;
color: var(--lod-gray-500);
}
.app-scope .app-checklist-edit,
.app-scope .app-checklist-remove {
opacity: 0;
color: var(--lod-gray-500);
transition: opacity var(--duration-quick), color var(--duration-quick);
font-size: var(--font-size-sm);
padding: var(--space-1-5);
min-width: 28px;
min-height: 28px;
display: inline-grid;
place-items: center;
border-radius: var(--radius-sm);
}
.app-scope .app-checklist-item:hover .app-checklist-edit,
.app-scope .app-checklist-item:hover .app-checklist-remove,
.app-scope .app-checklist-item:focus-within .app-checklist-edit,
.app-scope .app-checklist-item:focus-within .app-checklist-remove { opacity: 1; }
.app-scope .app-checklist-edit:hover { color: var(--lod-darkblue); background: var(--lod-darkblue-50); }
.app-scope .app-checklist-remove:hover { color: var(--lod-danger); background: var(--status-danger-soft); }
.app-scope .app-checklist-edit-input {
padding: 3px var(--space-1-5);
font-size: 13px;
height: auto;
border-radius: var(--radius-sm);
}
.app-scope .app-checklist-ghost {
opacity: 0.4;
background: var(--lod-darkblue-50);
}
@media (max-width: 599px) {
.app-scope .app-checklist-edit,
.app-scope .app-checklist-remove { opacity: 1; }
.app-scope .app-checklist-drag { padding: var(--space-3) var(--space-2); margin: -12px 0; }
}
/*== /styles/components/drawers/_shared/file-uploader.css ==*/
.app-scope .app-file-uploader.variant-compact {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
flex-wrap: wrap;
}
@media (max-width: 999px) {
.app-scope .app-file-uploader-clip {
min-width: var(--touch-ziel);
min-height: var(--touch-ziel);
}
}
.app-scope .app-file-uploader-clip {
width: 32px;
height: 32px;
border-radius: var(--radius-lg);
background: var(--lod-gray-50);
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.app-scope .app-file-uploader-clip:hover { background: var(--lod-gray-100); border-color: var(--lod-gray-200); }
.app-scope .app-file-uploader-clip img { opacity: 0.65; }
.app-scope .app-file-uploader-staged {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: var(--space-1);
flex-wrap: wrap;
width: 100%;
}
.app-scope .app-file-uploader-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: 3px var(--space-2);
background: var(--lod-gray-100);
border-radius: var(--radius-xl);
font-size: 11.5px;
color: var(--lod-gray-700);
max-width: 200px;
}
.app-scope .app-file-uploader-chip-size { color: var(--lod-gray-500); font-size: 10.5px; }
.app-scope .app-file-uploader-chip-remove {
background: transparent;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
width: 14px;
height: 14px;
}
.app-scope .app-file-uploader-chip-remove img { opacity: 0.5; }
.app-scope .app-file-uploader.variant-zone { display: block; }
.app-scope .app-file-uploader-zone {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3-5) var(--space-4);
background: var(--lod-gray-50);
border: 1.5px dashed var(--lod-gray-300);
border-radius: var(--radius-pill-sm);
cursor: pointer;
transition: border-color var(--duration-quick), background-color var(--duration-quick);
}
.app-scope .app-file-uploader-zone.is-dragover { border-color: var(--lod-darkblue); background: var(--lod-darkblue-100); }
.app-scope .app-file-uploader-browse {
background: transparent;
border: none;
color: var(--lod-darkblue);
text-decoration: underline;
cursor: pointer;
padding: 0;
font: inherit;
}
/*== /styles/components/drawers/_shared/info-banner.css ==*/
.lod-info-banner { font-size: var(--font-size-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin-top: var(--space-3); line-height: 1.5; }
.lod-info-banner:not(:last-child):not(.lod-info-banner--grid-full) { margin-bottom: var(--space-3); }
.lod-info-banner.tone-gray { background: var(--color-bg-selected); color: var(--color-text-muted); }
.lod-info-banner.tone-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.lod-info-banner.tone-info { background: var(--status-info-bg); color: var(--status-info-fg); }
.lod-info-banner .drawer-banner-link,
.lod-info-banner .drawer-dup-open {
border: none;
background: transparent;
padding: 0;
font: inherit;
color: inherit;
font-weight: var(--fw-semibold);
text-decoration: underline;
cursor: pointer;
}
.lod-info-banner--grid-full { grid-column: 1 / -1; }
/*== /styles/components/drawers/_shared/phase-track.css ==*/
.phase-track {
display: flex;
align-items: center;
gap: 0;
padding: var(--space-2) 0;
font-family: inherit;
}
.pt-phase {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1-5);
flex: 0 0 auto;
font-family: inherit;
background: none;
border: none;
padding: 0;
color: inherit;
}
.pt-phase.is-clickable {
cursor: pointer;
transition: transform var(--duration-quick) var(--ease-soft);
}
.pt-phase.is-clickable:hover { transform: translateY(-1px); }
.pt-phase.is-clickable:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.pt-dot {
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--color-border);
background: var(--color-surface);
flex-shrink: 0;
transition: border-color var(--duration-snappy) var(--ease-soft), background var(--duration-snappy) var(--ease-soft), box-shadow var(--duration-snappy) var(--ease-soft);
}
.pt-dot img {
width: 14px;
height: 14px;
display: block;
}
.pt-label {
font-size: 11px;
color: var(--color-text-muted);
font-weight: var(--fw-medium, 500);
text-align: center;
line-height: 1.2;
letter-spacing: 0.01em;
max-width: 110px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pt-connector {
flex: 1 1 auto;
height: 2px;
min-width: 24px;
background: var(--color-border);
margin: 0 8px;
position: relative;
top: -10px;
transition: background var(--duration-snappy) var(--ease-soft);
}
.pt-phase--done .pt-dot {
background: var(--status-success-fg);
border-color: var(--status-success-fg);
}
.pt-phase--done .pt-dot img { filter: brightness(0) invert(1); }
.pt-phase--done .pt-label { color: var(--color-text-secondary); }
.pt-connector--done { background: var(--status-success-fg); }
.pt-connector--active { background: var(--status-success-fg); }
.pt-phase--active .pt-dot {
background: var(--color-brand);
border-color: var(--color-brand);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-default) 15%, transparent);
}
.pt-phase--active .pt-label {
color: var(--color-brand);
font-weight: var(--fw-semibold, 600);
}
.pt-phase-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--lod-white);
animation: pt-pulse var(--duration-pulse) var(--ease-inout-soft) infinite;
}
@keyframes pt-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.6); opacity: 0.6; }
}
.pt-phase--next .pt-dot {
border-color: var(--color-brand);
border-style: dashed;
background: var(--color-surface);
}
.pt-phase--next .pt-label {
color: var(--color-text-primary);
font-weight: var(--fw-medium, 500);
}
.pt-phase--next.is-clickable:hover .pt-dot {
border-style: solid;
background: color-mix(in srgb, var(--brand-default) 10%, transparent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-default) 10%, transparent);
}
.pt-phase--pending .pt-dot {
border-color: var(--color-border);
background: var(--color-surface);
}
.pt-phase--pending .pt-label { color: var(--color-text-muted); }
.pt-phase--rejected .pt-dot {
background: var(--status-danger-fg);
border-color: var(--status-danger-fg);
}
.pt-phase--rejected .pt-dot img { filter: brightness(0) invert(1); }
.pt-phase--rejected .pt-label {
color: var(--status-danger-fg);
font-weight: var(--fw-semibold, 600);
}
.pt-connector--rejected { background: var(--status-danger-fg); }
.pt-phase--skipped .pt-dot {
border-color: var(--color-border);
background: var(--color-bg-muted);
opacity: 0.5;
}
.pt-phase--skipped .pt-label {
color: var(--color-text-muted);
text-decoration: line-through;
}
.pt-phase--skipped.is-clickable .pt-dot {
opacity: 1;
border-style: dashed;
border-color: var(--color-text-muted);
}
.pt-phase--skipped.is-clickable .pt-label {
color: var(--color-text-secondary);
text-decoration: none;
}
.pt-phase--skipped.is-clickable:hover .pt-dot {
border-style: solid;
border-color: var(--color-brand);
background: color-mix(in srgb, var(--brand-default) 10%, transparent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-default) 10%, transparent);
}
.phase-track.pt-busy {
pointer-events: none;
position: relative;
}
.phase-track.pt-busy::after {
content: '';
position: absolute;
top: 50%; right: 8px;
transform: translateY(-50%);
width: 16px; height: 16px;
border: 2px solid var(--color-border);
border-top-color: var(--color-brand);
border-radius: 50%;
animation: pt-spin var(--duration-spinner) var(--ease-linear) infinite;
}
.phase-track.pt-busy .pt-phase { opacity: 0.55; }
@keyframes pt-spin {
from { transform: translateY(-50%) rotate(0deg); }
to { transform: translateY(-50%) rotate(360deg); }
}
.shared-drawer.wd-busy .wd-phase-track-wrap {
pointer-events: none;
}
@media (max-width: 599px) {
.phase-track { gap: 0; padding: var(--space-1-5) 0; }
.pt-dot { width: 22px; height: 22px; }
.pt-dot img { width: 12px; height: 12px; }
.pt-label { font-size: 10px; max-width: 80px; }
.pt-connector { margin: 0 var(--space-1); min-width: 12px; }
}
/*== /styles/components/drawers/_shared/shared-drawer.css ==*/
.drawer-action--right { margin-left: auto; }
.drawer-x-ico { display: block; }
.app-scope .drawer-deckel {
margin-top: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.app-scope .drawer-backdrop {
position: absolute; inset: 0;
background: var(--lod-scrim);
z-index: var(--z-drawer-stack);
animation: app-drawerFade var(--duration-normal) var(--lod-ease);
}
.app-scope .shared-drawer {
position: absolute; top: 0; right: 0; bottom: 0;
background: var(--lod-white);
border-left: 1px solid var(--lod-gray-200);
box-shadow: -20px 0 50px -10px color-mix(in srgb, var(--lod-darkblue-900) 22%, transparent);
z-index: var(--z-drawer-panel);
display: flex; flex-direction: column;
animation: app-drawerSlide var(--duration-flow) var(--lod-ease);
max-width: 100%;
container-type: inline-size;
container-name: drawer;
--drawer-pad-x: var(--space-6);
}
.app-scope .shared-drawer.width-narrow { width: 480px; }
.app-scope .shared-drawer.width-medium { width: 560px; }
.app-scope .shared-drawer.width-wide { width: 720px; }
.app-scope .shared-drawer.width-xwide { width: 1200px; }
.app-scope .shared-drawer.width-full { width: 100vw; max-width: 100vw; left: 0; z-index: 1001; }
.app-scope .shared-drawer {
transition: transform var(--duration-spring) var(--ease-enter), width var(--duration-normal) var(--ease-soft), max-width var(--duration-normal) var(--ease-soft);
will-change: transform;
}
.app-scope .shared-drawer:focus,
.app-scope .shared-drawer:focus-visible { outline: none; }
.app-scope .has-drawer-stack .shared-drawer {
border-left: 1px solid var(--lod-gray-300);
box-shadow: -8px 0 20px -6px color-mix(in srgb, var(--lod-darkblue-900) 18%, transparent);
}
.app-scope .has-drawer-stack .shared-drawer.drawer-stack-top {
box-shadow: -14px 0 32px -8px color-mix(in srgb, var(--lod-darkblue-900) 32%, transparent);
}
.app-scope .has-drawer-stack .shared-drawer:not(.drawer-stack-top)::after {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--lod-darkblue-900) 5%, transparent);
pointer-events: none;
z-index: 3;
transition: background var(--duration-flow) var(--ease-soft);
}
.app-scope .has-drawer-stack .shared-drawer:not(.drawer-stack-top) {
pointer-events: none;
}
.app-scope .has-drawer-stack .shared-drawer:not(.drawer-stack-top) * {
user-select: none;
}
.app-scope .shared-drawer.drawer-stack-hidden {
transition: none;
}
.app-scope .drawer-backdrop.drawer-stack-backdrop-inactive {
pointer-events: none;
opacity: 0;
}
.app-scope .has-drawer-stack .drawer-backdrop:last-of-type {
z-index: var(--z-drawer-stack);
}
.app-scope .shared-drawer[data-drawer-dirty="true"] { }
.app-scope .shared-drawer.drawer-readonly .drawer-title-editable,
.app-scope .shared-drawer.drawer-readonly textarea,
.app-scope .shared-drawer.drawer-readonly input,
.app-scope .shared-drawer.drawer-readonly select,
.app-scope .shared-drawer.drawer-readonly button:not(.drawer-close):not(.drawer-head-icon-btn):not([data-drawer-action="copy-link"]):not([data-drawer-action="delete"]):not([data-drawer-action="complete"]):not([data-drawer-action="reopen"]):not([data-drawer-action="cancel"]):not([data-al-attachment-url]):not(.app-activity-log-attachment-chip) {
pointer-events: none !important;
opacity: 0.6;
}
.app-scope .shared-drawer.drawer-readonly .drawer-title-editable,
.app-scope .shared-drawer.drawer-readonly .mention-composer,
.app-scope .shared-drawer.drawer-readonly textarea,
.app-scope .shared-drawer.drawer-readonly input {
background: var(--lod-gray-50);
cursor: default;
}
.app-scope .shared-drawer.drawer-readonly [data-drawer-action="complete"] { display: none; }
.app-scope .shared-drawer.drawer-readonly [data-drawer-action="save"] { display: none; }
.app-scope .shared-drawer.drawer-readonly .app-checklist-add,
.app-scope .shared-drawer.drawer-readonly .app-checklist-drag { display: none; }
.app-scope .shared-drawer.drawer-readonly .app-activity-log-commentbox { display: none; }
.app-scope .shared-drawer.drawer-view .drawer-title-editable,
.app-scope .shared-drawer.drawer-view textarea,
.app-scope .shared-drawer.drawer-view input,
.app-scope .shared-drawer.drawer-view select,
.app-scope .shared-drawer.drawer-view .app-drawer-select,
.app-scope .shared-drawer.drawer-view .app-drawer-input,
.app-scope .shared-drawer.drawer-view .app-drawer-date-trigger,
.app-scope .shared-drawer.drawer-view .app-betreff-picker,
.app-scope .shared-drawer.drawer-view .app-kategorie-picker,
.app-scope .shared-drawer.drawer-view .app-phase-picker,
.app-scope .shared-drawer.drawer-view .app-person-field,
.app-scope .shared-drawer.drawer-view .app-duration-picker-trigger,
.app-scope .shared-drawer.drawer-view .app-toggle-pill,
.app-scope .shared-drawer.drawer-view .kanban-fakturierbar-check {
pointer-events: none !important;
opacity: 0.75;
}
.app-scope .shared-drawer.drawer-view .drawer-title-editable,
.app-scope .shared-drawer.drawer-view .mention-composer,
.app-scope .shared-drawer.drawer-view textarea,
.app-scope .shared-drawer.drawer-view input {
background: transparent;
cursor: default;
}
.app-scope .shared-drawer.drawer-view [data-drawer-action="save"],
.app-scope .shared-drawer.drawer-view [data-drawer-action="cancel"] { display: none; }
.app-scope .shared-drawer.drawer-view .app-activity-log-commentbox { display: none; }
.app-scope .shared-drawer.drawer-busy { pointer-events: none; }
.app-scope .shared-drawer.drawer-busy [data-drawer-action="save"],
.app-scope .shared-drawer.drawer-busy [data-drawer-action="complete"] { pointer-events: auto; }
.app-scope .shared-drawer.drawer-busy::before {
content: '';
position: absolute; inset: 0;
background: rgba(255,255,255,0.35);
z-index: 50;
pointer-events: none;
}
.shared-drawer-spinner {
display: inline-block;
width: 12px; height: 12px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: lod-spin var(--duration-spinner) var(--ease-linear) infinite;
margin-right: var(--space-1-5);
vertical-align: -2px;
}
.app-scope .btn.is-loading { opacity: 0.85; }
.app-drawer-saving-overlay {
position: absolute;
inset: 0;
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
background: var(--lod-scrim-soft);
backdrop-filter: blur(1px);
animation: app-drawerFade var(--duration-quick) var(--ease-out-soft);
}
.app-drawer-saving-card {
display: inline-flex;
align-items: center;
gap: var(--space-2-5);
padding: var(--space-3-5) var(--space-4-5);
background: var(--lod-white);
color: var(--lod-darkblue);
border-radius: var(--radius-pill-sm);
box-shadow: 0 6px 24px rgba(15, 27, 48, 0.18), 0 0 0 1px rgba(15, 27, 48, 0.06);
font-weight: var(--fw-semibold);
font-size: var(--font-size-base);
}
.app-drawer-saving-card .shared-drawer-spinner {
width: 14px; height: 14px;
border-width: 2px;
margin-right: 0;
color: var(--lod-darkblue);
}
@keyframes app-drawerSlide {
from { transform: translateX(24px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes app-drawerFade {
from { opacity: 0; }
to { opacity: 1; }
}
.app-scope .shared-drawer.is-closing { animation: app-drawerSlideOut var(--motion-exit) var(--ease-exit) forwards; }
.app-scope .drawer-backdrop.is-closing { pointer-events: none; animation: app-drawerFadeOut var(--motion-exit) var(--ease-exit) forwards; }
@keyframes app-drawerSlideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(24px); opacity: 0; }
}
@keyframes app-drawerFadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@media (max-width: 599px) {
.app-scope .shared-drawer,
.app-scope .shared-drawer.width-narrow,
.app-scope .shared-drawer.width-medium,
.app-scope .shared-drawer.width-wide {
width: 100%;
}
}
.app-scope .shared-drawer .drawer-header {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--drawer-pad-x);
border-bottom: 1px solid var(--lod-gray-200);
flex-shrink: 0;
min-height: 52px;
}
.app-scope .shared-drawer .drawer-sticky-title {
flex-shrink: 0;
max-height: 0;
overflow: hidden;
padding: 0 var(--drawer-pad-x);
border-bottom: 1px solid transparent;
background: var(--color-surface);
transition: max-height var(--duration-normal) var(--ease-soft), padding var(--duration-normal) var(--ease-soft), border-color var(--duration-normal) var(--ease-soft);
}
.app-scope .shared-drawer .drawer-sticky-title.is-visible {
max-height: 90px;
padding: var(--space-2) var(--drawer-pad-x);
border-bottom: 1px solid var(--lod-gray-200);
}
.app-scope .shared-drawer .drawer-sticky-pinned {
font-size: 12.5px;
color: var(--lod-gray-600);
font-weight: var(--fw-medium);
display: flex;
align-items: center;
gap: var(--space-1-5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-scope .shared-drawer .drawer-sticky-scrolltitle {
margin-top: var(--space-xxs);
font-family: var(--lod-font-display);
font-size: 15px;
font-weight: var(--fw-bold);
color: var(--lod-darkblue-700);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-scope .shared-drawer .drawer-title-area {
display: flex; flex-direction: column;
flex: 1; min-width: 0;
}
.app-scope .shared-drawer .drawer-subtitle {
font-size: var(--font-size-sm);
font-weight: var(--fw-bold);
color: var(--lod-gray-500);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
margin-bottom: var(--space-1);
line-height: 1.2;
}
.app-scope .shared-drawer .drawer-title {
font-family: var(--lod-font-display);
font-size: var(--font-size-h4);
font-weight: var(--fw-bold);
color: var(--lod-darkblue-700);
letter-spacing: 0.01em;
line-height: 1.25;
}
.app-scope .shared-drawer .drawer-title:focus,
.app-scope .shared-drawer .drawer-title:focus-visible { outline: none; box-shadow: none; }
.app-scope .shared-drawer .drawer-close,
.app-scope .shared-drawer .drawer-head-icon-btn {
width: 36px; height: 36px;
border-radius: var(--radius-md);
color: var(--lod-gray-500);
background: transparent;
display: grid; place-items: center;
transition: background var(--duration-quick), color var(--duration-quick);
flex-shrink: 0;
padding: 0;
}
.app-scope .shared-drawer .drawer-close:hover,
.app-scope .shared-drawer .drawer-head-icon-btn:hover {
background: var(--lod-gray-100);
color: var(--lod-darkblue);
}
.app-scope .shared-drawer .drawer-close:focus-visible,
.app-scope .shared-drawer .drawer-head-icon-btn:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus);
}
.app-scope .shared-drawer .drawer-head-icon-btn.is-danger:hover {
background: var(--status-danger-soft, color-mix(in srgb, var(--lod-danger) 8%, transparent));
color: var(--lod-danger);
}
.app-scope .shared-drawer .drawer-head-icon-btn.is-danger:focus-visible {
color: var(--lod-danger);
}
.app-scope .shared-drawer .drawer-head-icon-btn img,
.app-scope .shared-drawer .drawer-close img {
width: 16px; height: 16px;
}
.app-scope .shared-drawer .drawer-head-cta {
display: inline-flex; align-items: center; gap: var(--space-1-5);
height: 32px; padding: 0 var(--space-3);
border: 1px solid transparent; border-radius: var(--radius-pill);
background: linear-gradient(120deg, var(--lod-darkblue), var(--lod-violet) 70%, var(--lod-turquoise));
color: #fff; font-size: var(--font-size-sm); font-weight: 600; line-height: 1;
box-shadow: var(--shadow-2); cursor: pointer; flex-shrink: 0;
transition: filter var(--duration-quick), box-shadow var(--duration-quick);
}
.app-scope .shared-drawer .drawer-head-cta:hover { filter: brightness(1.08); box-shadow: var(--shadow-4); }
.app-scope .shared-drawer .drawer-head-cta:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.app-scope .shared-drawer .drawer-head-cta img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.app-scope .shared-drawer .drawer-head-cta--danger {
background: var(--color-surface); color: var(--status-danger-fg);
border-color: color-mix(in srgb, var(--status-danger-fg) 45%, var(--color-surface));
box-shadow: none;
}
.app-scope .shared-drawer .drawer-head-cta--danger:hover { filter: none; background: color-mix(in srgb, var(--status-danger-fg) 7%, var(--color-surface)); box-shadow: none; }
.app-scope .shared-drawer .drawer-head-cta--danger img { filter: none; opacity: .8; }
.shared-drawer .drawer-title-static {
font-size: var(--font-size-h4);
font-weight: var(--fw-semibold, 600);
color: var(--color-text-primary);
line-height: 1.3;
padding: var(--space-1) 0;
}
.app-scope .shared-drawer .drawer-head-meta {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1;
min-width: 0;
overflow: hidden;
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-subtitle {
font-size: var(--fs-caption);
color: var(--color-text-muted);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-jump {
appearance: none;
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-jump:hover,
.app-scope .shared-drawer .drawer-head-meta .drawer-head-jump:focus-visible {
color: var(--color-text-primary);
text-decoration-style: solid;
}
.app-scope .shared-drawer .drawer-head-meta .id {
font-family: var(--lod-font-mono);
font-size: var(--font-size-sm);
color: var(--lod-gray-500);
font-weight: var(--fw-medium);
white-space: nowrap;
flex-shrink: 0;
}
.app-scope .shared-drawer .drawer-head-meta .pill-tag,
.app-scope .shared-drawer .drawer-head-meta .pill {
flex-shrink: 0;
white-space: nowrap;
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: 10.5px;
color: var(--lod-gray-500);
font-weight: var(--fw-semibold);
padding: var(--space-xxs) var(--space-2);
background: var(--lod-gray-50);
border-radius: var(--radius-circular);
white-space: nowrap;
flex-shrink: 0;
line-height: 1.3;
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge img { opacity: 0.6; }
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.tone-success {
background: var(--lod-turquoise-100);
color: var(--lod-turquoise-900);
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.tone-danger {
background: var(--status-danger-bg);
color: var(--lod-danger);
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.tone-info {
background: var(--lod-blue-50);
color: var(--lod-blue-700);
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.tone-warn {
background: var(--lod-amber-50);
color: var(--lod-amber-700);
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.vk-phase-s0 { background: var(--lod-gray-100); color: var(--lod-gray-700); }
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.vk-phase-s1 { background: var(--lod-darkblue-50); color: var(--lod-darkblue-300); }
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.vk-phase-s2 { background: var(--lod-darkblue-50); color: var(--lod-darkblue); }
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.vk-phase-s3 { background: var(--lod-violet-50); color: var(--lod-violet); }
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.vk-phase-s4 { background: var(--lod-turquoise-50); color: var(--lod-turquoise-900); }
.app-scope .shared-drawer .drawer-head-actions {
display: flex;
align-items: center;
gap: var(--space-1);
flex-shrink: 0;
}
.app-scope .shared-drawer .drawer-head-presence {
display: flex;
align-items: center;
flex-shrink: 0;
}
.app-scope .shared-drawer .drawer-head-presence:empty { display: none; }
.app-scope .shared-drawer .drawer-head-presence .presence-cluster.has-presence { margin-right: var(--space-2); }
.app-scope .shared-drawer .drawer-head-overflow-btn { display: none; }
.app-scope .shared-drawer .drawer-head-actions [data-dha-hidden="true"] {
display: none;
}
.app-scope .shared-drawer .drawer-head-actions.is-overflow-mode .drawer-head-overflow-btn {
display: grid;
}
.app-scope .shared-drawer .drawer-head-icon-btn.btn-loading > img,
.app-scope .shared-drawer .drawer-head-overflow-btn.btn-loading > img {
visibility: hidden;
}
.app-scope .shared-drawer .drawer-head-meta.is-meta-tier-1 .drawer-head-badge {
padding: var(--space-px) var(--space-1-5);
font-size: var(--font-size-xs);
}
.app-scope .shared-drawer .drawer-head-meta.is-meta-tier-2 .drawer-head-badge {
display: none;
}
.app-scope .shared-drawer .drawer-mid {
flex: 1;
min-height: 0;
display: flex;
position: relative;
}
.app-scope .shared-drawer .drawer-mid-main {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.app-scope .shared-drawer .drawer-mid-main > .drawer-body {
flex: 1;
min-width: 0;
min-height: 0;
}
.app-scope .shared-drawer.drawer-has-action-rail .drawer-head-actions .drawer-head-icon-btn:not(.drawer-close):not([data-drawer-action="toggle-edit"]):not([data-anchor="true"]),
.app-scope .shared-drawer.drawer-has-action-rail .drawer-head-actions .drawer-head-overflow-btn,
.app-scope .shared-drawer.drawer-has-action-rail .drawer-head-actions .drawer-head-divider {
display: none !important;
}
.app-scope .shared-drawer.drawer-readonly .drawer-action-rail button,
.app-scope .shared-drawer.drawer-readonly .dar-panel button,
.app-scope .shared-drawer.drawer-view .drawer-action-rail button,
.app-scope .shared-drawer.drawer-view .dar-panel button {
pointer-events: auto !important;
opacity: 1;
}
@media (max-width: 599px) {
.app-scope .shared-drawer .drawer-head-icon-btn,
.app-scope .shared-drawer .drawer-close {
width: 44px; height: 44px;
}
.app-scope .shared-drawer .drawer-head-cta { height: 40px; padding: 0 var(--space-2-5); }
.app-scope .shared-drawer .drawer-head-cta .drawer-head-cta-lbl { display: none; }
}
.app-scope .shared-drawer .drawer-body {
--kleb-versatz: var(--space-4);
padding: var(--kleb-versatz) var(--drawer-pad-x) var(--space-6);
overflow-y: auto;
overflow-x: hidden;
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
}
.app-scope .shared-drawer .drawer-body > .drawer-title-area {
flex: 0 0 auto;
margin-bottom: var(--space-4);
}
.app-scope .shared-drawer .drawer-title-editable {
font-family: var(--lod-font-display);
font-size: var(--font-size-h4);
font-weight: var(--fw-bold);
color: var(--lod-darkblue-700);
line-height: 1.25;
width: 100%;
padding: var(--space-1-5) var(--space-2-5);
margin: -6px -10px 0;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
resize: none;
outline: none;
overflow: hidden;
transition: background var(--duration-quick), border-color var(--duration-quick);
box-sizing: border-box;
display: block;
}
@media (max-width: 599px) {
.app-scope .shared-drawer .drawer-title-editable {
margin: 0;
padding: var(--space-1-5) 0;
width: 100%;
}
}
.app-scope .shared-drawer .drawer-title-editable:hover {
background: var(--lod-gray-50);
}
.app-scope .shared-drawer .drawer-title-editable:focus {
background: var(--color-surface);
border-color: var(--lod-turquoise);
box-shadow: var(--lod-shadow-focus);
}
.app-scope .shared-drawer .drawer-title-editable::placeholder {
color: var(--lod-gray-500);
font-weight: var(--fw-medium);
}
.app-scope .shared-drawer .drawer-title-editable.is-readonly {
cursor: default;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
pointer-events: none;
overflow-wrap: anywhere;
}
.app-scope .shared-drawer .drawer-chips {
display: flex;
flex-direction: row;
gap: var(--space-2);
align-items: center;
margin-top: var(--space-2);
flex-wrap: nowrap;
}
@media (max-width: 999px) {
.app-scope .shared-drawer .drawer-body a[href^="http"] {
min-height: var(--touch-ziel);
display: inline-flex;
align-items: center;
}
}
@media (max-width: 999px) {
.app-scope .shared-drawer .drawer-chips .f-chip {
min-height: var(--touch-ziel);
display: inline-flex;
align-items: center;
}
.app-scope .shared-drawer .drawer-title-editable { min-height: var(--touch-ziel); }
}
.app-scope .shared-drawer .drawer-chips .f-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-1) var(--space-2-5);
border-radius: var(--radius-circular);
border: 1px solid var(--lod-gray-200);
background: var(--color-surface);
font-size: 12.5px;
color: var(--lod-gray-700);
font-weight: var(--fw-medium);
transition: background var(--duration-snappy), border-color var(--duration-snappy), color var(--duration-snappy);
cursor: default;
}
.app-scope .shared-drawer .drawer-chips .f-chip.is-editable,
.app-scope .shared-drawer .drawer-chips .f-chip.is-clickable {
cursor: pointer;
}
.app-scope .shared-drawer .drawer-chips .f-chip.is-editable:hover,
.app-scope .shared-drawer .drawer-chips .f-chip.is-clickable:hover {
border-color: var(--lod-darkblue-300);
color: var(--lod-darkblue);
}
.app-scope .shared-drawer .drawer-chips .f-chip.tone-turq {
background: var(--lod-turquoise-100);
color: var(--lod-darkblue-900);
border-color: transparent;
}
.app-scope .shared-drawer .drawer-chips .f-chip.tone-darkblue {
background: var(--lod-darkblue-100);
color: var(--lod-darkblue);
border-color: transparent;
}
.app-scope .shared-drawer .drawer-chips .f-chip.tone-gray {
background: var(--lod-gray-100);
color: var(--lod-gray-800);
border-color: transparent;
}
.app-scope .shared-drawer .drawer-chips .f-chip img {
width: 12px; height: 12px; opacity: 0.7; flex-shrink: 0;
}
.app-scope .shared-drawer .drawer-chips .f-chip,
.app-scope .shared-drawer .drawer-chips .app-phase-picker {
flex: 1 1 0;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.app-scope .shared-drawer .drawer-chips .app-phase-picker {
height: auto;
min-height: 0;
}
.app-scope .shared-drawer .drawer-chips .f-chip > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1 1 auto;
}
.app-scope .shared-drawer .drawer-chips .f-chip.is-placeholder {
background: transparent;
border: 1px dashed var(--lod-gray-300);
color: var(--lod-gray-500);
}
.app-scope .shared-drawer .drawer-chips .f-chip.is-placeholder:hover {
border-color: var(--lod-darkblue-300);
color: var(--lod-darkblue);
}
.app-scope .shared-drawer .drawer-chips .f-chip .f-chip-open-icon {
width: 10px; height: 10px; opacity: 0.55; margin-left: var(--space-xxs); flex-shrink: 0;
}
.app-scope .shared-drawer .drawer-chips .f-chip-clear {
background: transparent;
border: 0;
padding: 0 var(--space-xxs);
margin-left: var(--space-1);
cursor: pointer;
display: inline-flex;
align-items: center;
border-radius: 50%;
flex: 0 0 auto;
opacity: 0.45;
transition: opacity var(--duration-quick) var(--ease-soft);
}
@media (max-width: 999px) {
.app-scope .shared-drawer .drawer-chips .f-chip-clear {
min-width: var(--touch-ziel);
min-height: var(--touch-ziel);
justify-content: center;
}
}
.app-scope .shared-drawer .drawer-chips .f-chip-clear:hover,
.app-scope .shared-drawer .drawer-chips .f-chip-clear:focus-visible {
opacity: 0.95;
background: rgba(0,0,0,0.06);
outline: none;
}
.app-scope .shared-drawer .drawer-chips .f-chip-clear img {
width: 10px; height: 10px; opacity: 0.85;
}
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
}
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot .app-async-picker {
width: 100%;
height: auto;
min-height: 28px;
padding: var(--space-1) var(--space-2-5);
border-radius: var(--radius-circular);
border: 1px dashed var(--lod-gray-300);
background: transparent;
color: var(--lod-gray-500);
font-size: 12.5px;
font-weight: var(--fw-medium);
}
@media (max-width: 999px) {
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot .app-async-picker {
min-height: var(--touch-ziel);
}
}
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot .app-async-picker:hover {
border-color: var(--lod-darkblue-300);
color: var(--lod-darkblue);
}
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot--inline {
flex: 1 1 100%;
width: 100%;
display: block;
position: relative;
}
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot--inline .f-chip-inline-picker-host {
width: 100%;
}
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot--inline .app-required-dot {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
pointer-events: none;
}
.app-scope .shared-drawer details { interpolate-size: allow-keywords; }
.app-scope .shared-drawer details::details-content {
height: 0;
overflow: clip;
transition: height var(--duration-flow) var(--ease-standard),
content-visibility var(--duration-flow) allow-discrete;
}
.app-scope .shared-drawer details[open]::details-content { height: auto; }
.app-scope .shared-drawer .drawer-section + .drawer-section {
margin-top: var(--space-6);
}
.app-scope .shared-drawer .drawer-section.app-klapp.is-zu { margin-block: 0; }
.app-scope .shared-drawer .drawer-body > .drawer-section:last-child:not(.app-klapp) {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
.app-scope .shared-drawer .drawer-body > .drawer-section:last-child > * {
flex-shrink: 0;
}
.app-scope .shared-drawer .drawer-body > .drawer-tab-panel:not([hidden]) {
display: flex;
flex-direction: column;
flex: 1 0 auto;
}
.app-scope .shared-drawer .drawer-body > .drawer-tab-panel > .drawer-section:last-child {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
.app-scope .shared-drawer .drawer-body > .drawer-tab-panel > .drawer-section:last-child > * {
flex-shrink: 0;
}
.app-scope .shared-drawer .drawer-section h4 {
font-size: var(--fs-badge);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
color: var(--lod-gray-500);
margin: 0 0 var(--space-3);
font-family: var(--lod-font-body);
display: flex;
align-items: center;
gap: var(--space-1-5);
}
.app-scope .shared-drawer .field-grid {
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--space-2) var(--space-3-5);
align-items: start;
}
.app-scope .shared-drawer .field-grid .field-value.is-gesperrt,
.app-scope .shared-drawer .field-grid .field-value.dr-gesperrt {
cursor: default;
background: var(--color-bg-subtle);
}
.app-scope .shared-drawer .field-grid .field-value.is-gesperrt input,
.app-scope .shared-drawer .field-grid .field-value.is-gesperrt select,
.app-scope .shared-drawer .field-grid .field-value.is-gesperrt textarea,
.app-scope .shared-drawer .field-grid .field-value.is-gesperrt button,
.app-scope .shared-drawer .field-grid .field-value.is-gesperrt .cs-wrap,
.app-scope .shared-drawer .field-grid .field-value.is-gesperrt [contenteditable],
.app-scope .shared-drawer .field-grid .field-value.dr-gesperrt input,
.app-scope .shared-drawer .field-grid .field-value.dr-gesperrt select,
.app-scope .shared-drawer .field-grid .field-value.dr-gesperrt textarea,
.app-scope .shared-drawer .field-grid .field-value.dr-gesperrt button,
.app-scope .shared-drawer .field-grid .field-value.dr-gesperrt .cs-wrap,
.app-scope .shared-drawer .field-grid .field-value.dr-gesperrt [contenteditable] {
pointer-events: none;
}
.app-scope .shared-drawer .field-grid .field-value.is-gesperrt:hover,
.app-scope .shared-drawer .field-grid .field-value.dr-gesperrt:hover { background: var(--color-bg-subtle); }
.app-scope .shared-drawer .field-grid .field-value.is-gesperrt::after,
.app-scope .shared-drawer .field-grid .field-value.dr-gesperrt::after {
content: "";
width: 12px; height: 12px;
margin-inline-start: auto;
flex: 0 0 auto;
background: var(--color-text-tertiary);
-webkit-mask-image: url('/assets/icons/fluent/lock_closed_24_regular.svg');
mask-image: url('/assets/icons/fluent/lock_closed_24_regular.svg');
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
}
.app-scope .shared-drawer .field-grid:has(> .is-halb) {
grid-template-columns: 120px 1fr 120px 1fr;
}
.app-scope .shared-drawer .field-grid:has(> .is-halb) > .field-label:not(.is-halb) { grid-column: 1; }
.app-scope .shared-drawer .field-grid:has(> .is-halb) > .field-value:not(.is-halb),
.app-scope .shared-drawer .field-grid:has(> .is-halb) > .field-value-row:not(.is-halb) { grid-column: 2 / -1; }
@container drawer (max-width: 700px) {
.app-scope .shared-drawer .field-grid:has(> .is-halb) { grid-template-columns: 120px 1fr; }
.app-scope .shared-drawer .field-grid:has(> .is-halb) > .field-label { grid-column: 1; }
.app-scope .shared-drawer .field-grid:has(> .is-halb) > .field-value,
.app-scope .shared-drawer .field-grid:has(> .is-halb) > .field-value-row { grid-column: 2 / -1; }
}
.app-scope .shared-drawer .field-grid .field-label {
font-size: 12.5px;
color: var(--lod-gray-700);
padding-top: 7px;
font-weight: var(--fw-regular);
}
.app-scope .shared-drawer .field-grid .field-value {
font-size: 13.5px;
color: var(--lod-gray-900);
font-weight: var(--fw-medium);
padding: var(--space-1-5) var(--space-2-5);
border-radius: var(--radius-md);
border: 1px solid transparent;
min-width: 0;
transition: background var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick);
min-height: 32px;
display: flex;
align-items: center;
gap: var(--space-2);
}
.app-scope .shared-drawer .field-grid .field-value.editable {
cursor: pointer;
}
.app-scope .shared-drawer .field-grid .field-value.editable:hover {
background: var(--lod-gray-50);
border-color: var(--lod-gray-200);
}
.app-scope .shared-drawer .field-grid .field-value.empty {
color: var(--lod-gray-500);
font-style: italic;
font-weight: var(--fw-regular);
}
.app-scope .shared-drawer .field-grid .field-value.editing {
padding: 0;
background: transparent;
border-color: transparent;
}
.app-scope .shared-drawer .field-grid .field-value .field-icon {
width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0;
}
.app-scope .shared-drawer .field-grid .field-value input,
.app-scope .shared-drawer .field-grid .field-value select,
.app-scope .shared-drawer .field-grid .field-value textarea {
flex: 1;
width: 100%;
}
.app-scope .shared-drawer .drawer-textarea {
width: 100%;
min-height: 70px;
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-lg);
padding: var(--space-2-5);
font-size: 13.5px;
font-family: inherit;
outline: none;
resize: none;
background: var(--lod-gray-50);
color: var(--lod-gray-900);
transition: border-color var(--duration-quick), background var(--duration-quick), box-shadow var(--duration-quick);
}
.app-scope .shared-drawer .drawer-textarea:focus {
background: var(--color-surface);
border-color: var(--lod-turquoise);
box-shadow: var(--lod-shadow-focus);
}
.app-scope .shared-drawer .drawer-textarea::placeholder {
color: var(--lod-gray-500);
}
.app-scope .shared-drawer .drawer-composer-host { width: 100%; }
.app-scope .shared-drawer .drawer-composer-host .mention-composer {
min-height: 70px;
background: var(--lod-gray-50);
color: var(--lod-gray-900);
border-color: var(--lod-gray-200);
font-size: 13.5px;
}
.app-scope .shared-drawer .drawer-composer-host .mention-composer:focus {
background: var(--color-surface);
border-color: var(--lod-turquoise);
box-shadow: var(--lod-shadow-focus);
}
.app-scope .shared-drawer .drawer-footer {
padding: var(--space-3) var(--drawer-pad-x);
padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
border-top: 1px solid var(--lod-gray-100);
display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
background: var(--lod-gray-50);
flex-shrink: 0;
}
.app-scope .shared-drawer .drawer-live {
position: absolute;
left: -9999px;
top: -9999px;
}
#lod-drawer-host {
position: absolute;
inset: 0;
z-index: var(--z-drawer-backdrop);
overflow: hidden;
pointer-events: none;
}
#lod-drawer-host:empty { display: none; }
#lod-drawer-host > * { pointer-events: auto; }
.app-scope .shared-drawer .drawer-head-divider {
width: 1px;
height: 16px;
background: var(--color-border);
margin: 0 var(--space-1);
flex-shrink: 0;
align-self: center;
}
@container drawer (max-width: 478px) {
.app-scope .shared-drawer .drawer-header,
.app-scope .shared-drawer .drawer-sticky-title,
.app-scope .shared-drawer .drawer-body,
.app-scope .shared-drawer .drawer-footer {
--drawer-pad-x: var(--space-4);
}
.app-scope .shared-drawer .field-grid,
.app-scope .shared-drawer .field-grid:has(> .is-halb) {
grid-template-columns: 104px 1fr;
gap: var(--space-1-5) var(--space-2);
}
.app-scope .shared-drawer .field-grid .field-label {
hyphens: auto;
overflow-wrap: break-word;
}
.app-scope .shared-drawer .field-grid > .field-value:not(:has(.cs-wrap, .app-date-field, .app-duration-picker, .app-toggle-pill, .app-drawer-number-wrap, select, input[type="number"])),
.app-scope .shared-drawer .field-grid > .field-value-row {
grid-column: 1 / -1;
}
.app-scope .shared-drawer .field-grid .field-value {
padding: var(--space-1) 0;
}
.app-scope .shared-drawer .field-grid .field-value .field-icon { display: none; }
.app-scope .shared-drawer .field-value-row {
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
padding-right: 0;
}
.app-scope .shared-drawer .field-value-row .field-value-main {
width: 100%;
}
.app-scope .shared-drawer .field-value-row .app-toggle-pill,
.app-scope .shared-drawer .field-value-row .kanban-fakturierbar-check {
align-self: flex-start;
margin-left: 0;
}
.app-scope .shared-drawer .drawer-chips {
flex-direction: column;
align-items: stretch;
}
.app-scope .shared-drawer .drawer-chips .f-chip,
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot,
.app-scope .shared-drawer .drawer-chips .app-phase-picker {
flex: 0 0 auto;
width: 100%;
}
.app-scope .shared-drawer .app-drawer-date-chips,
.app-scope .shared-drawer .app-duration-picker-chips {
display: none;
}
}
.shared-drawer .drawer-doc-card {
display: flex;
align-items: center;
gap: var(--space-3, 12px);
padding: var(--space-3, 12px) var(--space-4, 16px);
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft);
}
.shared-drawer .drawer-doc-card--clickable { cursor: pointer; }
.shared-drawer .drawer-doc-card--clickable:hover {
border-color: var(--brand-default);
box-shadow: var(--shadow-sm);
}
.shared-drawer .drawer-doc-card--clickable:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: 2px;
}
.shared-drawer .drawer-doc-ico {
flex-shrink: 0;
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--brand-default) 10%, transparent);
color: var(--brand-default);
}
.shared-drawer .drawer-doc-text { flex: 1; min-width: 0; }
.shared-drawer .drawer-doc-name {
font-size: var(--fs-body);
font-weight: var(--fw-semibold, 600);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shared-drawer .drawer-doc-hint {
font-size: var(--fs-caption);
color: var(--color-text-secondary);
margin-top: var(--space-xxs);
}
.shared-drawer .drawer-doc-empty {
font-size: var(--fs-caption);
color: var(--color-text-tertiary);
font-style: italic;
}
.shared-drawer .drawer-doc-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
margin-top: var(--space-2);
}
@container drawer (max-width: 478px) {
.app-scope .shared-drawer .drawer-footer {
flex-wrap: wrap;
gap: var(--space-1-5);
}
.app-scope .shared-drawer .drawer-footer .btn-primary-sm,
.app-scope .shared-drawer .drawer-footer .btn-outline-sm,
.app-scope .shared-drawer .drawer-footer .btn-danger-sm {
flex: 1 1 auto;
min-width: 0;
padding: var(--space-2) var(--space-2-5);
justify-content: center;
margin-left: 0 !important;
}
.app-scope .shared-drawer .drawer-footer .btn-primary-sm > span,
.app-scope .shared-drawer .drawer-footer .btn-outline-sm > span,
.app-scope .shared-drawer .drawer-footer .btn-danger-sm > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/*== /styles/components/drawers/_shared/vorlagen-neu.css ==*/
.vlgn-vorschau {
padding: var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: var(--font-size-base);
color: var(--color-text);
}
.vlgn-kopf {
font-weight: 600;
}
.vlgn-liste {
display: flex;
flex-direction: column;
gap: 2px;
}
.vlgn-zeile {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 2px 0;
cursor: pointer;
}
.vlgn-zeile[data-tiefe="2"] { padding-left: var(--space-4); }
.vlgn-zeile[data-tiefe="3"] { padding-left: calc(var(--space-4) * 2); }
.vlgn-zeile[data-tiefe="4"] { padding-left: calc(var(--space-4) * 3); }
.vlgn-zeile-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vlgn-zeile input:disabled + .vlgn-zeile-text {
color: var(--color-text-secondary);
text-decoration: line-through;
}
.vlgn-name {
width: 100%;
box-sizing: border-box;
padding: var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--font-size-base);
color: var(--color-text);
}
.vlgn-hinweise {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
display: flex;
flex-direction: column;
gap: 2px;
}
.vlgn-fuss {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
}
/*== /styles/components/drawers/_shared/drawer-action-rail.css ==*/
.drawer-action-rail {
flex: 0 0 52px;
width: 52px;
align-self: stretch;
border-left: 1px solid var(--lod-gray-200);
background: var(--color-surface);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
padding: var(--space-2) 0;
z-index: 29;
}
.drawer-action-rail .dar-btn,
.drawer-action-rail .dar-toggle {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
color: var(--lod-gray-500);
background: transparent;
border: none;
display: grid;
place-items: center;
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}
.drawer-action-rail .dar-btn:hover,
.drawer-action-rail .dar-toggle:hover {
background: var(--lod-gray-100);
color: var(--lod-darkblue);
}
.drawer-action-rail .dar-btn:focus-visible,
.drawer-action-rail .dar-toggle:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus);
}
.drawer-action-rail .dar-btn img,
.drawer-action-rail .dar-toggle img {
width: 20px;
height: 20px;
filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
opacity: 0.72;
transition: opacity var(--duration-fast) var(--ease-soft);
}
.drawer-action-rail .dar-btn:hover img,
.drawer-action-rail .dar-toggle:hover img { opacity: 1; }
.drawer-action-rail .dar-btn.is-danger:hover {
background: var(--status-danger-soft, color-mix(in srgb, var(--lod-danger) 8%, transparent));
color: var(--lod-danger);
}
.drawer-action-rail .dar-btn.is-danger:hover img {
filter: none;
opacity: 0.9;
}
.drawer-action-rail .dar-btn.btn-loading img { visibility: hidden; }
.dar-panel .dar-panel-item.btn-loading .dar-item-ico { visibility: hidden; }
.drawer-action-rail .dar-toggle img { opacity: 0.85; }
.drawer-action-rail .dar-sep {
width: 22px;
height: 1px;
background: var(--lod-gray-200);
margin: var(--space-1) 0;
flex-shrink: 0;
}
.dar-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 280px;
max-width: min(88%, 92vw);
background: var(--color-surface);
border-left: 1px solid var(--lod-gray-200);
box-shadow: -18px 0 42px -14px color-mix(in srgb, var(--lod-darkblue-900) 28%, transparent);
z-index: 30;
display: flex;
flex-direction: column;
overflow: hidden;
animation: dar-panel-in var(--duration-spring) var(--ease-decelerate);
}
@keyframes dar-panel-in {
from { transform: translateX(20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.dar-panel.is-closing {
animation: dar-panel-out var(--motion-exit) var(--ease-exit) forwards;
}
@keyframes dar-panel-out {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(20px); opacity: 0; }
}
.dar-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-3) var(--space-2-5) var(--space-3) var(--space-4);
border-bottom: 1px solid var(--lod-gray-100);
flex-shrink: 0;
}
.dar-panel-title {
font-family: var(--lod-font-display);
font-size: var(--font-size-base);
font-weight: var(--fw-bold);
color: var(--lod-darkblue-700);
letter-spacing: 0.01em;
}
.dar-panel-close {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
border: none;
background: transparent;
color: var(--lod-gray-500);
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}
.dar-panel-close:hover { background: var(--lod-gray-100); color: var(--lod-darkblue); }
.dar-panel-close:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.dar-panel-close img { width: 18px; height: 18px; opacity: 0.8; }
.dar-panel-scroll {
overflow-y: auto;
padding: var(--space-2);
flex: 1;
min-height: 0;
}
.dar-group-label {
padding: var(--space-2) var(--space-3) var(--space-1);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-caps, 0.08em);
color: var(--lod-gray-500);
}
.dar-group-label + * { margin-top: 0; }
.dar-group-label:not(:first-child) {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--lod-gray-100);
}
.dar-panel .dar-panel-item {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
min-height: 44px;
padding: var(--space-1-5) var(--space-2);
border-radius: var(--radius-md);
background: transparent;
border: none;
text-align: left;
cursor: pointer;
text-decoration: none;
font-family: inherit;
transition: background var(--duration-fast) var(--ease-soft);
}
.dar-panel-item:hover { background: var(--lod-gray-50); }
.dar-panel-item:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.dar-panel-item .dar-item-ico {
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
display: grid;
place-items: center;
transition: background var(--duration-fast) var(--ease-soft);
}
.dar-panel-item .dar-item-ico img {
width: 19px;
height: 19px;
filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
opacity: 0.85;
}
.dar-panel-item:hover .dar-item-ico {
background: color-mix(in srgb, var(--lod-darkblue) 9%, var(--color-bg-subtle));
}
.dar-panel-item .dar-item-title {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--lod-darkblue-700);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dar-panel-item .dar-item-chev {
flex: 0 0 16px;
width: 16px;
height: 16px;
display: grid;
place-items: center;
}
.dar-panel-item .dar-item-chev img {
width: 16px;
height: 16px;
filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
opacity: 0.4;
transition: opacity var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft);
}
.dar-panel-item:hover .dar-item-chev img,
.dar-panel-item.is-open .dar-item-chev img {
opacity: 0.9;
transform: translateX(-2px);
}
.dar-panel .dar-panel-item.is-open {
background: color-mix(in srgb, var(--lod-darkblue) 7%, transparent);
}
.dar-panel-item.is-open .dar-item-ico {
background: color-mix(in srgb, var(--lod-darkblue) 9%, var(--color-bg-subtle));
}
.dar-panel-item.is-open .dar-item-title { color: var(--lod-darkblue); }
.dar-panel-item.is-danger .dar-item-title { color: var(--lod-danger); }
.dar-panel-item.is-danger .dar-item-ico { background: var(--status-danger-soft, color-mix(in srgb, var(--lod-danger) 8%, transparent)); }
.dar-panel-item.is-danger .dar-item-ico img { filter: none; opacity: 0.85; }
.dar-panel-item.is-danger:hover { background: var(--status-danger-soft, color-mix(in srgb, var(--lod-danger) 8%, transparent)); }
.drawer-mid.dar-open .dar-group-label,
.drawer-mid.dar-open .dar-panel-item {
animation: dar-item-in var(--duration-normal) var(--ease-decelerate) backwards;
animation-delay: calc(70ms + var(--dar-i, 0) * 26ms);
}
@keyframes dar-item-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.dar-panel.is-restored:not(.is-closing) { animation: none; }
.drawer-mid.dar-open .dar-panel.is-restored .dar-group-label,
.drawer-mid.dar-open .dar-panel.is-restored .dar-panel-item { animation: none; }
@media (prefers-reduced-motion: reduce) {
.dar-panel,
.drawer-mid.dar-open .dar-group-label,
.drawer-mid.dar-open .dar-panel-item { animation: none; }
}
/*== /styles/components/drawers/drawer-tabs.css ==*/
.shared-drawer .drawer-tabs-bar {
position: sticky;
top: calc(-1 * var(--kleb-versatz, 0px));
z-index: 5;
flex: 0 0 auto;
margin: 0 calc(-1 * var(--drawer-pad-x));
padding: var(--space-2) var(--drawer-pad-x) calc(var(--space-2) + var(--space-4));
background: var(--color-surface);
border-bottom: 1px solid transparent;
transition: border-color var(--duration-quick) var(--ease-soft),
box-shadow var(--duration-quick) var(--ease-soft);
}
.shared-drawer .drawer-tabs-bar.is-stuck {
border-bottom-color: var(--color-border);
box-shadow: 0 4px 12px -8px rgba(15, 46, 72, 0.35);
}
.shared-drawer .drawer-tabs {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.shared-drawer .drawer-tabs::-webkit-scrollbar { display: none; }
.shared-drawer .drawer-tabs--scroll {
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.drawer-tabs-collapsed { display: none; }
.drawer-tabs-bar.is-kompakt .drawer-tabs { display: none; }
.drawer-tabs-bar.is-kompakt .drawer-tabs-collapsed { display: inline-flex; }
.drawer-tabs-bar .drawer-tabs-collapsed {
align-items: center;
gap: var(--space-1-5);
height: 36px;
padding: 0 var(--space-3);
border: 1px solid var(--lod-darkblue-300);
border-radius: var(--radius-lg);
background: var(--lod-darkblue-100);
color: var(--lod-darkblue);
font-family: inherit;
font-size: 13px;
font-weight: var(--fw-semibold);
cursor: pointer;
max-width: 100%;
transition: background-color var(--duration-snappy) var(--ease-enter),
border-color var(--duration-snappy) var(--ease-enter);
}
.drawer-tabs-bar .drawer-tabs-collapsed:hover { background: var(--lod-darkblue-200); }
.drawer-tabs-bar .drawer-tabs-collapsed:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.drawer-tabs-bar .drawer-tabs-collapsed-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-tabs-bar .drawer-tabs-collapsed img { opacity: 0.6; flex-shrink: 0; }
@media (max-width: 999px) {
.drawer-tabs-bar .drawer-tabs-collapsed { height: auto; min-height: var(--touch-ziel); }
}
.shared-drawer .drawer-tab-panel { animation: drawerPanelIn var(--duration-fast) var(--ease-decelerate); }
@keyframes drawerPanelIn {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 599px) {
.shared-drawer .drawer-tabs-bar {
padding-top: var(--space-1-5);
padding-bottom: calc(var(--space-1-5) + var(--space-3));
}
}
/*== /styles/components/drawers/drawer-uebersicht.css ==*/
.drawer-uebersicht {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--space-2);
}
.drawer-uebersicht .drawer-stat {
min-width: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
padding: var(--space-2-5) var(--space-3);
background: var(--color-surface);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
text-align: left;
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.drawer-stat .ui-ico { position: absolute; top: var(--space-2); right: var(--space-2); }
.drawer-stat .ui-ico img { width: 16px; height: 16px; opacity: 0.4; }
.drawer-stat-n {
font-size: var(--font-size-xl);
font-weight: var(--fw-bold);
color: var(--lod-darkblue-900);
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.drawer-stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.drawer-stat.is-zero { opacity: 0.5; }
.drawer-stat.is-zero .drawer-stat-n { color: var(--lod-gray-400); font-weight: var(--fw-semibold); }
button.drawer-stat { font: inherit; color: inherit; }
.drawer-stat--link { cursor: pointer; }
.drawer-stat--link:hover {
border-color: var(--lod-turquoise);
box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--lod-darkblue-900) 30%, transparent);
}
.drawer-stat--link:focus-visible { outline: 2px solid var(--lod-darkblue); outline-offset: 2px; }
/*== /styles/components/drawers/drawer-zeitachse.css ==*/
.app-scope .drawer-tl {
display: flex;
flex-direction: column;
}
.app-scope .drawer-tl-item {
display: flex;
align-items: flex-start;
gap: var(--space-2-5);
width: 100%;
padding: var(--space-2) var(--space-1-5);
border: 0;
border-bottom: 1px solid var(--color-border-light, var(--color-border));
background: none;
text-align: left;
font: inherit;
color: var(--color-text);
border-radius: var(--radius-sm);
}
.app-scope .drawer-tl-item:last-child { border-bottom: 0; }
.app-scope button.drawer-tl-item { cursor: pointer; }
.app-scope button.drawer-tl-item:hover { background: var(--color-bg-subtle); }
.app-scope button.drawer-tl-item:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus);
}
.app-scope .drawer-tl-ico { flex-shrink: 0; margin-top: 2px; }
.app-scope .drawer-tl-ico img { width: 16px; height: 16px; opacity: 0.6; }
.app-scope .drawer-tl-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.app-scope .drawer-tl-meta {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.app-scope .drawer-tl-typ { font-weight: var(--fw-semibold); }
.app-scope .drawer-tl-zu { font-style: italic; }
.app-scope .drawer-tl-titel {
font-size: var(--font-size-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-scope .drawer-tl-text {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.app-scope .drawer-tl-hinweis {
margin-top: var(--space-2);
font-size: var(--font-size-xs);
}
@media (max-width: 599px) {
.app-scope .drawer-tl-titel { white-space: normal; }
}
/*== /styles/components/drawers/drawer-reife.css ==*/
.app-scope .drawer-reife {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--space-1-5);
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-light, var(--color-border));
}
.app-scope .drawer-reife-lbl {
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--color-text-muted);
margin-right: var(--space-1);
}
.app-scope .drawer-reife-chip {
display: inline-flex; align-items: center; gap: var(--space-1);
min-height: 26px;
padding: 0 var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill-sm);
background: var(--color-surface);
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
color: var(--color-text-secondary);
white-space: nowrap;
}
.app-scope .drawer-reife-chip img { width: 14px; height: 14px; opacity: 0.55; flex-shrink: 0; }
.app-scope .drawer-reife-chip.is-ok { color: var(--color-text); }
.app-scope .drawer-reife-chip.is-ok img { opacity: 0.9; }
.app-scope .drawer-reife-chip.is-offen { cursor: pointer; }
.app-scope .drawer-reife-chip.is-offen:hover {
border-color: var(--lod-darkblue);
color: var(--lod-darkblue);
}
.app-scope .drawer-reife-chip.is-offen:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus);
}
.app-scope .drawer-reife-chip.is-offen.is-statisch { cursor: default; }
.app-scope .drawer-reife-chip.is-offen.is-statisch:hover {
border-color: var(--color-border);
color: var(--color-text-secondary);
}
.app-scope .drawer-reife-zahl {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: var(--radius-pill);
background: var(--status-warning-bg);
color: var(--status-warning-fg);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
font-variant-numeric: tabular-nums;
}
@keyframes drawerFeldPuls {
0% { background: var(--status-warning-bg); }
100% { background: transparent; }
}
.app-scope .drawer-feld-puls {
animation: drawerFeldPuls 1.6s var(--ease-soft) forwards;
border-radius: var(--radius-sm);
}
@media (max-width: 999px) {
.app-scope .drawer-reife-chip { min-height: var(--touch-ziel); }
}
@media (max-width: 599px) {
.app-scope .drawer-reife-lbl { width: 100%; margin-right: 0; }
}
/*== /styles/components/drawers/_shared/feldhistorie-panel.css ==*/
.fh-liste,
.fh-aend-liste { list-style: none; margin: 0; padding: 0; }
.fh-eintrag { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle); }
.fh-eintrag:first-child { border-top: 0; padding-top: 0; }
.fh-gekappt {
margin: var(--space-3) 0 0;
padding: var(--space-2) var(--space-3);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.fh-kopf {
display: flex;
align-items: baseline;
gap: var(--space-2);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin-bottom: var(--space-2);
}
.fh-zeit { white-space: nowrap; flex: 0 0 auto; }
.fh-wer { font-weight: var(--fw-medium); min-width: 0; overflow-wrap: anywhere; }
.fh-aend {
display: flex;
align-items: baseline;
gap: var(--space-3);
padding: var(--space-1) 0;
min-width: 0;
}
.fh-feld {
flex: 0 0 auto;
min-width: 140px;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.fh-werte {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
min-width: 0;
flex: 1 1 auto;
overflow-wrap: anywhere;
}
.fh-alt { color: var(--color-text-muted); text-decoration-thickness: 1px; }
.fh-nach {
display: inline-flex;
align-items: baseline;
gap: var(--space-2);
min-width: 0;
}
.fh-neu { font-weight: var(--fw-medium); min-width: 0; }
.fh-pfeil { color: var(--color-text-muted); flex: 0 0 auto; }
.fh-leer { color: var(--color-text-muted); }
.fh-unbekannt { color: var(--color-warning-fg); }
.fh-gesperrt {
flex: 0 0 auto;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.fh-zurueck { flex: 0 0 auto; }
@media (max-width: 999px) {
.fh-feld { min-width: 110px; }
}
@media (max-width: 599px) {
.fh-aend { flex-wrap: wrap; gap: var(--space-1); }
.fh-feld { flex: 1 1 auto; min-width: 0; }
.fh-werte { order: 3; flex: 1 0 100%; }
.fh-zurueck,
.fh-gesperrt { order: 2; margin-left: auto; }
.fh-aend { padding: var(--space-3) 0; }
}
/*== /styles/components/drawers/_shared/diff-row.css ==*/
.lod-diff-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.lod-diff-feld {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: var(--fw-semibold, 600);
color: var(--color-text-muted);
}
.lod-diff-values {
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
min-width: 0;
}
.lod-diff-old {
text-decoration: line-through;
color: var(--color-text-muted);
word-break: break-word;
}
.lod-diff-empty {
font-style: italic;
color: var(--color-text-muted);
}
.lod-diff-arrow { color: var(--color-text-muted); }
.lod-diff-new {
font-weight: var(--fw-semibold, 600);
color: var(--status-success-fg);
word-break: break-word;
}
/*== /styles/components/drawers/_shared/ki-vorschlag-karten.css ==*/
.kiv-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
transition: opacity var(--duration-fast), border-color var(--duration-fast);
}
.kiv-card.is-excluded { opacity: 0.5; }
.kiv-card.is-excluded .kiv-subject { text-decoration: line-through; }
.kiv-card.is-removed { display: none; }
.kiv-card.is-done {
opacity: 0.6;
border-color: var(--status-success-border, var(--color-border));
background: var(--status-success-bg, var(--color-bg-muted));
}
.kiv-card.is-failed { border-color: var(--status-warning-border, var(--color-border)); }
.kiv-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.kiv-check {
display: inline-flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
}
.kiv-typ {
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.kiv-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
color: var(--color-text-muted);
}
.kiv-remove:hover { background: var(--color-bg-muted); }
.kiv-remove .ui-ico img { width: 16px; height: 16px; opacity: 0.7; }
.kiv-subject,
.kiv-desc,
.kiv-cl-titel,
.kiv-field {
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: var(--font-size-sm);
color: var(--color-text);
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-1) var(--space-2);
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.kiv-subject {
font-size: var(--font-size-md);
font-weight: var(--fw-semibold, 600);
}
.kiv-desc {
font-size: var(--font-size-sm);
line-height: 1.5;
resize: vertical;
min-height: 40px;
}
.kiv-subject:focus,
.kiv-desc:focus,
.kiv-cl-titel:focus,
.kiv-field:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent-bg-soft, rgba(26,75,118,0.18));
}
.kiv-tworow { display: flex; gap: var(--space-2); }
.kiv-tworow > * { flex: 1 1 0; min-width: 0; }
.kiv-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.kiv-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text);
background: var(--color-bg-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
cursor: pointer;
transition: border-color var(--duration-fast), background var(--duration-fast);
}
.kiv-chip:hover { border-color: var(--color-border-hover); }
.kiv-chip.sm { font-size: var(--font-size-xs); padding: 2px var(--space-2); }
.kiv-chip .ui-ico img { width: 14px; height: 14px; opacity: 0.7; }
.kiv-chip--projekt {
background: var(--color-accent-bg-soft);
border-color: var(--color-accent-bg);
color: var(--color-accent);
}
.kiv-tag {
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold, 600);
color: var(--color-accent);
background: var(--color-accent-bg-soft);
border-radius: var(--radius-sm);
padding: 2px var(--space-2);
}
.kiv-tag--muted { background: var(--color-bg-muted); color: var(--color-text-muted); }
.kiv-upd-ziel { font-weight: var(--fw-semibold, 600); font-size: var(--font-size-sm); color: var(--color-text); }
.kiv-cl {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-left: var(--space-3);
border-left: 2px solid var(--color-border);
}
.kiv-cl-item {
display: flex;
align-items: center;
gap: var(--space-2);
}
.kiv-cl-ico img { width: 14px; height: 14px; opacity: 0.5; }
.kiv-cl-titel { flex: 1 1 auto; font-size: var(--font-size-sm); }
.kiv-cl-item .kiv-chip { flex: 0 0 auto; }
.kiv-phase { display: inline-flex; align-items: center; }
.kiv-quote { font-size: var(--font-size-sm); }
.kiv-quote summary {
cursor: pointer;
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.kiv-quote blockquote {
margin: var(--space-1) 0 0;
padding: var(--space-1) var(--space-2);
border-left: 2px solid var(--color-accent-bg);
color: var(--color-text-muted);
font-style: italic;
}
.kiv-flag {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
color: var(--status-warning-fg, var(--color-text-muted));
}
.kiv-flag .ui-ico img { width: 14px; height: 14px; }
@media (min-width: 1000px) and (max-width: 1399px) {
.kiv-card { padding: var(--space-3); }
}
@media (min-width: 600px) and (max-width: 999px) {
.kiv-meta { gap: var(--space-1); }
}
@media (max-width: 599px) {
.kiv-card { padding: var(--space-2); }
.kiv-meta { gap: var(--space-1); }
.kiv-tworow { flex-direction: column; }
}
/*== /styles/components/drawers/_shared/protokoll-wizard.css ==*/
.pk-wz-modal {
width: min(760px, 94vw);
max-height: 88vh;
}
.pk-wz-body {
max-height: calc(88vh - 190px);
overflow-y: auto;
}
.pk-wz-info {
margin-right: auto;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.pk-wz-vkpick { margin-top: var(--space-4); }
.pk-wz-label {
display: block;
margin-bottom: var(--space-1);
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold, 600);
color: var(--color-text);
}
.pk-wz-herkunft { color: var(--color-text-muted); }
.pk-wz-warnung {
padding: var(--space-2) var(--space-3);
color: var(--color-warning-fg);
background: var(--color-warning-bg);
border: 1px solid var(--color-warning-border);
border-radius: var(--radius-md);
}
.pk-wz-compose {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.pk-wz-compose > .seg-track { align-self: flex-start; }
.pk-wz-input {
width: 100%;
box-sizing: border-box;
min-height: 240px;
padding: var(--space-3);
font-family: inherit;
font-size: var(--font-size-sm);
line-height: 1.55;
color: var(--color-text);
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
resize: vertical;
}
.pk-wz-input:hover { border-color: var(--color-border-hover); }
.pk-wz-input:focus,
.pk-wz-input:focus-visible {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent-bg-soft, rgba(26,75,118,0.18));
}
.pk-wz-meta {
display: flex;
justify-content: flex-end;
}
.pk-wz-count {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.pk-wz-warte {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-3) var(--space-5);
text-align: center;
}
.pk-wz-warte-uhr {
font-size: var(--font-size-xl, 24px);
font-weight: var(--fw-semibold, 600);
font-variant-numeric: tabular-nums;
color: var(--color-text);
}
.pk-wz-warte-bar {
position: relative;
width: min(320px, 80%);
height: 4px;
overflow: hidden;
background: var(--color-bg-muted);
border-radius: var(--radius-pill);
}
.pk-wz-warte-bar > span {
position: absolute;
top: 0;
left: 0;
width: 38%;
height: 100%;
background: var(--color-accent);
border-radius: inherit;
animation: pkWzWarteLauf 1.6s ease-in-out infinite;
}
@keyframes pkWzWarteLauf {
0% { transform: translateX(-100%); }
100% { transform: translateX(365%); }
}
.pk-wz-warte-txt {
font-size: var(--font-size-sm, 12px);
color: var(--color-text-muted);
}
.pk-wz-warte-lang {
font-size: var(--font-size-sm, 12px);
color: var(--status-warning-fg, var(--color-text-muted));
}
.pk-wz-warte .ld-qw-hint { max-width: 46ch; }
@media (prefers-reduced-motion: reduce) {
.pk-wz-warte-bar > span { animation: none; width: 100%; opacity: 0.5; }
}
.pk-wz-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.pk-wz-diffrow {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-1) 0;
cursor: pointer;
}
.pk-wz-diffrow > input[type="checkbox"] {
margin-top: 3px;
flex: 0 0 auto;
}
.pk-wz-diffrow > .lod-diff-row { flex: 1 1 auto; min-width: 0; }
.pk-wz-longtext {
min-height: 140px;
line-height: 1.55;
}
.pk-wz-dedup {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
}
.pk-wz-hinweis {
background: var(--color-bg-muted);
border-style: dashed;
}
.pk-wz-hinweis-row {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.pk-wz-hinweis-row .ui-ico img { width: 16px; height: 16px; opacity: 0.7; }
.pk-wz-ergebnis {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.pk-wz-erg-zeile {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-md);
color: var(--color-text);
}
.pk-wz-erg-zeile .ui-ico img { width: 20px; height: 20px; }
.pk-wz-erg-zeile--warn { color: var(--status-warning-fg, var(--color-text-muted)); }
.pk-wz-erg-aktion {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.pk-wz-erg-aktion .ld-qw-btn { align-self: flex-start; }
@media (min-width: 1000px) and (max-width: 1399px) {
.pk-wz-modal { width: min(720px, 94vw); }
}
@media (min-width: 600px) and (max-width: 999px) {
.pk-wz-modal { width: 94vw; max-height: 92vh; }
.pk-wz-body { max-height: calc(92vh - 200px); }
.pk-wz-input { min-height: 200px; }
.pk-wz-warte { padding: var(--space-4) var(--space-2); }
}
@media (max-width: 599px) {
.pk-wz-modal { width: 100vw; max-height: 100vh; border-radius: 0; }
.pk-wz-body { max-height: calc(100vh - 210px); }
.pk-wz-input { min-height: 160px; padding: var(--space-2); }
.pk-wz-modal .ld-qw-actions { flex-wrap: wrap; }
.pk-wz-info {
order: 3;
width: 100%;
margin-right: 0;
text-align: center;
}
.pk-wz-diffrow { align-items: flex-start; }
.pk-wz-longtext { min-height: 120px; }
.pk-wz-warte { padding: var(--space-3) var(--space-2) var(--space-4); }
.pk-wz-warte-uhr { font-size: var(--font-size-lg, 20px); }
.pk-wz-warte-bar { width: 90%; }
.pk-wz-warte .ld-qw-hint { max-width: none; }
}
/*== /styles/components/drawers/_shared/enrich-modal.css ==*/
.app-scope .modal.lod-enrich-modal {
width: min(640px, 92vw);
}
.lod-enrich-modal .lod-enr-sub {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-top: 2px;
}
.lod-enrich-modal .lod-enr-state {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) 0;
color: var(--color-text-muted);
font-size: var(--font-size-md);
}
.lod-enrich-modal .lod-enr-spinner {
width: 18px;
height: 18px;
border: 2px solid var(--lod-gray-200);
border-top-color: var(--lod-darkblue);
border-radius: 50%;
animation: lod-enr-spin 0.7s linear infinite;
flex: 0 0 auto;
}
@keyframes lod-enr-spin { to { transform: rotate(360deg); } }
.lod-enrich-modal .lod-enr-note {
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
line-height: var(--lh-loose);
}
.lod-enrich-modal .lod-enr-note.tone-warning {
background: color-mix(in srgb, var(--status-warning-fg) 12%, transparent);
color: var(--color-text);
}
.lod-enrich-modal .lod-enr-note.tone-ok {
background: color-mix(in srgb, var(--status-success-fg) 12%, transparent);
color: var(--color-text);
}
.lod-enrich-modal .lod-enr-note.tone-error {
background: color-mix(in srgb, var(--status-danger-fg) 12%, transparent);
color: var(--color-text);
}
.lod-enrich-modal .lod-enr-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
margin-bottom: var(--space-4);
}
.lod-enrich-modal .lod-enr-src {
font-size: var(--font-size-sm);
color: var(--lod-darkblue);
word-break: break-all;
}
.lod-enrich-modal .lod-enr-conf {
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
background: var(--lod-gray-100);
border-radius: var(--radius-sm);
padding: 2px var(--space-2);
}
.lod-enrich-modal .lod-enr-beleg {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-style: italic;
margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}
.lod-enrich-modal .lod-enr-list,
.lod-enrich-modal .lod-enr-logo {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.lod-enrich-modal .lod-enr-logo { margin-top: var(--space-3); }
.lod-enrich-modal .lod-enr-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--lod-gray-100);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color var(--duration-fast), background var(--duration-fast);
}
.lod-enrich-modal .lod-enr-item:hover { border-color: var(--lod-gray-200); background: var(--lod-gray-50); }
.lod-enrich-modal .lod-enr-cb,
.lod-enrich-modal .lod-enr-logo-cb { margin-top: 3px; flex: 0 0 auto; }
.lod-enrich-modal .lod-enr-item-main {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1 1 auto;
}
.lod-enrich-modal .lod-enr-quelle {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-style: italic;
word-break: break-word;
}
.lod-enrich-modal .lod-enr-logo-preview img {
max-width: 160px;
max-height: 64px;
object-fit: contain;
border-radius: var(--radius-sm);
background: var(--lod-white);
border: 1px solid var(--lod-gray-100);
padding: var(--space-1);
}
/*== /styles/components/drawers/_shared/merge-wizard.css ==*/
.mw-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.mw-lead { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.mw-h4 { margin: 0; font-size: var(--font-size-sm); font-weight: var(--fw-semibold); }
.mw-mastergrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.mw-mastercard {
position: relative;
display: flex; flex-direction: column; gap: var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
cursor: pointer;
background: var(--color-surface);
transition: border-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft);
}
.mw-mastercard:hover { border-color: var(--color-border-strong); }
.mw-mastercard.is-master {
border-color: var(--color-brand);
box-shadow: 0 0 0 1px var(--color-brand) inset;
}
.mw-mastercard > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.mw-mastercard:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mw-mastercard-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mw-mastercard-name { font-weight: var(--fw-semibold); word-break: break-word; }
.mw-badge {
font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
padding: 1px var(--space-2); border-radius: var(--radius-circular); white-space: nowrap;
}
.mw-badge--master { background: var(--color-brand-soft); color: var(--color-brand); }
.mw-badge--loser { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.mw-badge--warn { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.mw-badge--ki { background: var(--status-info-bg); color: var(--status-info-fg); }
.mw-complete { display: flex; flex-direction: column; gap: var(--space-1); }
.mw-complete-bar { height: 6px; border-radius: var(--radius-circular); background: var(--color-bg-subtle); overflow: hidden; }
.mw-complete-bar > span { display: block; height: 100%; background: var(--status-success-fg); border-radius: inherit; }
.mw-complete-txt { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.mw-mcfields { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-1); }
.mw-mcrow { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--font-size-xs); }
.mw-mck { flex: 0 0 40%; color: var(--color-text-muted); }
.mw-mcv { min-width: 0; word-break: break-word; }
.mw-mcv.is-empty { color: var(--color-text-muted); }
.mw-kiwrap { display: flex; }
.mw-ki-btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.mw-ki {
display: flex; flex-direction: column; gap: var(--space-1);
padding: var(--space-3); border-radius: var(--radius-md);
border: 1px solid var(--color-border); width: 100%;
font-size: var(--font-size-sm);
}
.mw-ki--loading { color: var(--color-text-muted); }
.mw-ki--yes { background: var(--color-brand-soft); border-color: var(--color-brand); }
.mw-ki--no { background: var(--color-bg-subtle); }
.mw-ki-verdict { font-weight: var(--fw-semibold); }
.mw-ki-reason { color: var(--color-text-secondary); }
.mw-fieldshead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.mw-werteseg { flex: 0 0 auto; }
.mw-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.lod-merge-row { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-subtle); }
.lod-merge-row--agree .lod-merge-agreeval { color: var(--color-text-secondary); word-break: break-word; }
.lod-merge-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.lod-merge-opt {
display: flex; align-items: flex-start; gap: var(--space-2);
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
padding: var(--space-2); cursor: pointer; min-width: 0;
transition: border-color var(--duration-quick) var(--ease-soft), background var(--duration-quick) var(--ease-soft);
}
.lod-merge-opt:hover { border-color: var(--color-border-strong); }
.lod-merge-opt:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lod-merge-opt.is-selected { border-color: var(--color-brand); background: var(--color-brand-soft); }
.lod-merge-opt > input[type="radio"] { margin-top: 2px; flex: 0 0 auto; accent-color: var(--color-brand); }
.lod-merge-val { min-width: 0; word-break: break-word; font-size: var(--font-size-sm); }
.mw-note {
display: flex; align-items: flex-start; gap: var(--space-2);
font-size: var(--font-size-sm); border-radius: var(--radius-md); padding: var(--space-3);
background: var(--status-warning-bg); color: var(--status-warning-fg);
}
.mw-note .ui-ico { flex: 0 0 auto; }
.mw-note-text { min-width: 0; }
.mw-empty, .mw-error { color: var(--color-text-muted); font-size: var(--font-size-sm); padding: var(--space-3) 0; }
.mw-error { color: var(--status-danger-fg); }
@container drawer (max-width: 640px) {
.mw-mastergrid { grid-template-columns: 1fr; }
}
@container drawer (max-width: 520px) {
.mw-body { padding: var(--space-3); }
.lod-merge-opts { grid-template-columns: 1fr; }
.mw-mck { flex-basis: 45%; }
}
/*== /styles/components/drawers/_shared/bulk-edit-drawer.css ==*/
.be-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.be-lead { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.5; }
.be-lead-muted { color: var(--color-text-muted); }
.be-fields { display: flex; flex-direction: column; }
.be-row {
display: grid;
grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.be-row:last-child { border-bottom: 0; }
.be-label {
display: flex; align-items: center; gap: var(--space-2);
font-size: var(--font-size-sm); font-weight: var(--fw-semibold);
color: var(--color-text-primary);
}
.be-label-ico { width: 18px; height: 18px; opacity: 0.7; flex: 0 0 auto; }
.be-control { min-width: 0; }
.be-control .app-drawer-select,
.be-control .app-person-field { width: 100%; }
@container drawer (max-width: 520px) {
.be-body { padding: var(--space-3); }
.be-row { grid-template-columns: 1fr; align-items: stretch; gap: var(--space-2); }
}
/*== /styles/components/drawers/a4-vorschau.css ==*/
.a4v-viewport {
--a4v-paper: #e9ebee;
position: relative;
height: 70vh;
overflow: hidden;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
background: var(--a4v-paper);
}
.a4v-viewport [data-a4v-slot] { position: absolute; inset: 0; }
.a4v-frame {
width: 794px;
border: 0;
display: block;
background: var(--a4v-paper);
transform-origin: top left;
}
@media (min-width: 1000px) and (max-width: 1399px) {
.a4v-viewport { height: 66vh; }
}
@media (min-width: 600px) and (max-width: 999px) {
.a4v-viewport { height: 60vh; }
}
@media (max-width: 599px) {
.a4v-viewport { height: 54vh; }
}
/*== /styles/components/drawers/docusign-send.css ==*/
.ds-recip-heading {
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
color: var(--color-text-secondary);
margin-bottom: var(--space-2);
}
.ds-recip-opts {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.ds-recip-opt:hover:not(.is-disabled) { border-color: var(--color-border-hover); }
.ds-recip-opt:has(input:checked) {
border-color: var(--color-accent);
background: var(--color-accent-bg-soft);
}
.ds-recip-opt.is-disabled {
cursor: default;
opacity: .7;
}
.ds-recip-opt input[type="radio"] {
margin: 0;
margin-top: 2px;
accent-color: var(--color-accent);
flex: 0 0 auto;
}
.ds-recip-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.ds-recip-label {
font-size: var(--fs-body);
color: var(--color-text);
font-weight: var(--fw-medium);
}
.ds-recip-sub {
font-size: var(--fs-caption);
color: var(--color-text-muted);
word-break: break-word;
}
.ds-recip-sub.is-missing { color: var(--color-warn-text); }
.ds-recip-andere { margin-top: var(--space-2); }
.ds-recip-input {
width: 100%;
box-sizing: border-box;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-default);
color: var(--color-text);
font-size: var(--fs-body);
font-family: inherit;
}
.ds-recip-input:focus {
outline: none;
border-color: var(--color-accent);
}
.ds-recip-input.has-error { border-color: var(--color-danger-border); }
.ds-recip-err {
margin-top: var(--space-1);
font-size: var(--fs-caption);
color: var(--color-danger-fg);
}
/*== /styles/components/drawers/vertrag-abschluss.css ==*/
.vab-arten {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-3);
}
.vab-art:hover { border-color: var(--color-border-hover); }
.vab-art:has(input:checked) {
border-color: var(--color-accent);
background: var(--color-accent-bg-soft);
}
.vab-art input[type="radio"] {
margin: 0;
margin-top: 2px;
accent-color: var(--color-accent);
flex: 0 0 auto;
}
.vab-art-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.vab-art-label {
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--color-text);
}
.vab-art-sub {
font-size: var(--fs-caption);
color: var(--color-text-muted);
word-break: break-word;
}
.vab-feld {
width: 100%;
margin-top: var(--space-1);
}
.vab-feld.has-error { border-color: var(--color-danger-border); }
.vab-hinweis {
margin: var(--space-4) 0 0;
font-size: var(--fs-caption);
line-height: var(--lh-normal);
color: var(--color-text-muted);
}
/*== /styles/components/drawers/ld-qualify-wizard.css ==*/
.app-scope .ld-qw-modal {
width: min(560px, 94vw);
max-width: 560px;
}
.app-scope .ld-qw-sub {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.app-scope .ld-qw-body { display: flex; flex-direction: column; gap: var(--space-3); }
.app-scope .ld-qw-actions {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
}
.app-scope .ld-qw-actions [data-qw-go] { margin-left: auto; }
.app-scope .ld-qw-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-2) var(--space-3-5);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--lod-darkblue-700);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
font-family: var(--lod-font-sans);
cursor: pointer;
transition: background var(--duration-quick), border-color var(--duration-quick);
}
.app-scope .ld-qw-btn:hover { background: var(--lod-gray-50); border-color: var(--lod-gray-300); }
.app-scope .ld-qw-btn--primary {
background: var(--lod-darkblue);
border-color: var(--lod-darkblue);
color: var(--lod-white);
}
.app-scope .ld-qw-btn--primary:hover { background: var(--lod-darkblue-700); border-color: var(--lod-darkblue-700); }
.app-scope .ld-qw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.app-scope .ld-qw-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.app-scope .ld-qw-card {
display: flex;
align-items: flex-start;
gap: var(--space-3);
text-align: left;
padding: var(--space-3) var(--space-3-5);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-lg);
background: var(--color-surface);
cursor: pointer;
transition: border-color var(--duration-quick), background var(--duration-quick), box-shadow var(--duration-quick);
}
.app-scope .ld-qw-card:hover { border-color: var(--lod-darkblue-300); background: var(--lod-gray-50); }
.app-scope .ld-qw-card.is-active {
border-color: var(--lod-darkblue);
background: var(--lod-darkblue-50);
box-shadow: 0 0 0 1px var(--lod-darkblue) inset;
}
.app-scope .ld-qw-card-ico {
flex: 0 0 auto;
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
background: var(--lod-gray-100);
}
.app-scope .ld-qw-card-ico img { width: 22px; height: 22px; opacity: 0.85; }
.app-scope .ld-qw-card--vk .ld-qw-card-ico { background: var(--lod-turquoise-50); }
.app-scope .ld-qw-card--support .ld-qw-card-ico { background: var(--lod-darkblue-100); }
.app-scope .ld-qw-card--ablehnen .ld-qw-card-ico { background: var(--lod-gray-100); }
.app-scope .ld-qw-card-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-scope .ld-qw-card-titel { font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--lod-darkblue-700); }
.app-scope .ld-qw-card-sub { font-size: var(--fs-badge); font-weight: var(--fw-medium); color: var(--lod-turquoise); text-transform: uppercase; letter-spacing: .03em; }
.app-scope .ld-qw-card--support .ld-qw-card-sub { color: var(--lod-darkblue); }
.app-scope .ld-qw-card--ablehnen .ld-qw-card-sub { color: var(--lod-gray-500); }
.app-scope .ld-qw-card-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.45; }
.app-scope .ld-qw-dedup { display: flex; flex-direction: column; gap: var(--space-1-5); }
.app-scope .ld-qw-dedup-label {
font-size: var(--fs-badge); color: var(--lod-gray-600); font-weight: var(--fw-medium);
margin-top: var(--space-1);
}
.app-scope .ld-qw-dedup-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); padding: var(--space-2) 0; }
.app-scope .ld-qw-dedup-row {
display: flex; align-items: center; gap: var(--space-2-5);
text-align: left; width: 100%;
padding: var(--space-2-5) var(--space-3);
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
background: var(--color-surface);
cursor: pointer;
transition: border-color var(--duration-quick), background var(--duration-quick);
}
.app-scope .ld-qw-dedup-row:hover { border-color: var(--lod-darkblue-300); background: var(--lod-gray-50); }
.app-scope .ld-qw-dedup-row.is-active {
border-color: var(--lod-darkblue);
background: var(--lod-darkblue-50);
box-shadow: 0 0 0 1px var(--lod-darkblue) inset;
}
.app-scope .ld-qw-dedup-ico { flex: 0 0 auto; opacity: 0.7; }
.app-scope .ld-qw-dedup-ico img { width: 18px; height: 18px; }
.app-scope .ld-qw-dedup-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.app-scope .ld-qw-dedup-name { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--lod-darkblue-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .ld-qw-dedup-meta { font-size: var(--fs-badge); color: var(--lod-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .ld-qw-dedup-score {
flex: 0 0 auto;
font-size: var(--fs-badge); font-weight: var(--fw-semibold);
padding: var(--space-px) var(--space-2);
border-radius: var(--radius-pill-sm);
background: var(--lod-gray-100); color: var(--lod-gray-700);
}
.app-scope .ld-qw-dedup-score--sicher { background: var(--lod-warning-100); color: var(--lod-warning-800); }
.app-scope .ld-qw-dedup-score--wahrscheinlich { background: var(--lod-darkblue-100); color: var(--lod-darkblue); }
.app-scope .ld-qw-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.45; margin: 0; }
.app-scope .ld-qw-hint strong { color: var(--lod-darkblue-700); font-weight: var(--fw-medium); }
.app-scope .ld-qw-form { display: flex; flex-direction: column; gap: var(--space-3); }
.app-scope .ld-qw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2-5) var(--space-3); }
.app-scope .ld-qw-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.app-scope .ld-qw-field > label { font-size: var(--fs-badge); font-weight: var(--fw-medium); color: var(--lod-gray-600); }
.app-scope .ld-qw-input,
.app-scope .ld-qw-select,
.app-scope .ld-qw-textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--lod-darkblue);
font-family: var(--lod-font-sans);
font-size: var(--fs-body);
padding: 0 var(--space-2-5);
height: 34px;
}
.app-scope .ld-qw-textarea { height: auto; min-height: 68px; padding: var(--space-2) var(--space-2-5); line-height: 1.5; resize: vertical; }
.app-scope .ld-qw-field .cs-wrap { width: 100%; min-width: 0; display: block; }
.app-scope .ld-qw-field .select[data-cs-trigger] {
width: 100%;
box-sizing: border-box;
height: 34px;
min-height: 34px;
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--lod-darkblue);
font-family: var(--lod-font-sans);
font-size: var(--fs-body);
padding: 0 var(--space-2-5);
text-align: left;
}
.app-scope .ld-qw-field .select[data-cs-trigger]:hover { border-color: var(--color-border-hover, var(--lod-gray-300)); }
.app-scope .ld-qw-field .select[data-cs-trigger]:focus,
.app-scope .ld-qw-field .select[data-cs-trigger]:focus-visible {
outline: none;
border-color: var(--lod-darkblue);
box-shadow: 0 0 0 1px var(--lod-darkblue);
}
.app-scope .ld-qw-select {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right var(--space-2-5) center;
padding-right: var(--space-6); cursor: pointer;
}
.app-scope .ld-qw-input:hover,
.app-scope .ld-qw-select:hover,
.app-scope .ld-qw-textarea:hover { border-color: var(--color-border-hover, var(--lod-gray-300)); }
.app-scope .ld-qw-input:focus-visible,
.app-scope .ld-qw-select:focus-visible,
.app-scope .ld-qw-textarea:focus-visible { outline: none; border-color: var(--lod-darkblue); box-shadow: 0 0 0 1px var(--lod-darkblue); }
.app-scope .ld-qw-check {
display: flex; align-items: flex-start; gap: var(--space-2);
font-size: var(--font-size-sm); color: var(--lod-darkblue-700); cursor: pointer;
}
.app-scope .ld-qw-check input { margin-top: 2px; accent-color: var(--lod-darkblue); }
@media (max-width: 999px) {
.app-scope .ld-qw-input,
.app-scope .ld-qw-select,
.app-scope .ld-qw-field .select[data-cs-trigger] { height: auto; min-height: var(--touch-ziel); }
}
@media (max-width: 599px) {
.app-scope .ld-qw-grid2 { grid-template-columns: 1fr; }
}
/*== /styles/components/drawers/vt-drawer.css ==*/
.shared-drawer .vt-meta-section {
padding-top: var(--space-2, 8px);
border-top: 1px solid var(--color-border-light);
}
.shared-drawer .vt-meta-line {
font-size: var(--fs-caption);
color: var(--color-text-tertiary);
}
.shared-drawer .vt-stamm-gruppe {
margin: var(--space-4) 0 var(--space-1-5) 0;
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--color-text-secondary);
}
.shared-drawer [data-vt-stamm-edit] .vt-stamm-gruppe:first-of-type { margin-top: var(--space-2); }
/*== /styles/components/drawers/imex-drawer.css ==*/
.app-scope .imex-root { display: flex; flex-direction: column; width: 100%; }
.app-scope .imex-schritt {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-4);
}
.app-scope .imex-hinweis-titel {
font-weight: 600;
margin-bottom: var(--space-1);
}
.app-scope .imex-hinweis-pflicht {
margin-top: var(--space-2);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.app-scope .imex-vorlage { display: flex; justify-content: flex-start; }
.app-scope .imex-zone { min-height: 140px; }
.app-scope .imex-bilanz {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2);
}
.app-scope .imex-bilanz-zelle {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
text-align: center;
background: var(--color-surface);
}
.app-scope .imex-bilanz-zahl { font-size: var(--font-size-xl); font-weight: 600; line-height: 1.1; }
.app-scope .imex-bilanz-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.app-scope .imex-ton-gruen .imex-bilanz-zahl { color: var(--status-success-fg); }
.app-scope .imex-ton-blau .imex-bilanz-zahl { color: var(--status-info-fg); }
.app-scope .imex-ton-rot .imex-bilanz-zahl { color: var(--status-danger-fg); }
.app-scope .imex-ton-grau .imex-bilanz-zahl { color: var(--color-text-secondary); }
.app-scope .imex-warnung { font-size: var(--font-size-sm); }
.app-scope .imex-abschnitt-titel {
font-weight: 600;
font-size: var(--font-size-base);
margin-top: var(--space-2);
}
.app-scope .imex-zuordnung {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.app-scope .imex-zuordnung-zeile {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-2);
align-items: center;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border-light);
}
.app-scope .imex-zuordnung-zeile:last-child { border-bottom: none; }
.app-scope .imex-zuordnung-zeile.is-geaendert { background: var(--status-info-bg); }
.app-scope .imex-zuordnung-datei {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}
.app-scope .imex-zuordnung-ziel { min-width: 0; }
.app-scope .imex-root .imex-select {
width: 100%;
min-height: 32px;
padding: 0 var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--font-size-base);
font-family: inherit;
}
.app-scope .imex-root .imex-select:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 1px;
}
.app-scope .imex-befunde {
display: flex;
flex-direction: column;
gap: var(--space-1);
max-height: 320px;
overflow-y: auto;
}
.app-scope .imex-befund {
border-left: 3px solid var(--color-border);
padding: var(--space-1) var(--space-2);
background: var(--color-bg-muted);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.app-scope .imex-befund.imex-aktion-uebergehen { border-left-color: var(--status-danger-fg); }
.app-scope .imex-befund.imex-aktion-anlegen { border-left-color: var(--status-success-fg); }
.app-scope .imex-befund.imex-aktion-aktualisieren { border-left-color: var(--status-info-fg); }
.app-scope .imex-befund-kopf {
display: flex;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.app-scope .imex-befund-zeile { font-weight: 600; }
.app-scope .imex-befund-text { font-size: var(--font-size-sm); }
.app-scope .imex-befund-feld { font-family: var(--font-mono); }
.app-scope .imex-art-fehler { color: var(--status-danger-fg); }
.app-scope .imex-art-warnung { color: var(--status-warning-fg); }
.app-scope .imex-befund-mehr {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
padding: var(--space-1) var(--space-2);
}
.app-scope .imex-aktionen {
display: flex;
gap: var(--space-2);
justify-content: flex-end;
flex-wrap: wrap;
}
@container drawer (max-width: 999px) {
.app-scope .imex-befunde { max-height: 240px; }
.app-scope .imex-bilanz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container drawer (max-width: 599px) {
.app-scope .imex-schritt { padding: var(--space-3); gap: var(--space-3); }
.app-scope .imex-zuordnung-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.app-scope .imex-bilanz { grid-template-columns: minmax(0, 1fr); }
.app-scope .imex-befunde { max-height: none; }
.app-scope .imex-aktionen > button { flex: 1 1 100%; }
}
/*== /styles/components/pickers/pickers.css ==*/
.app-picker-search {
display: flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-1-5) var(--space-2-5);
background: var(--lod-gray-50);
border-radius: var(--radius-md);
margin-bottom: var(--space-1-5);
}
.app-picker-search img { opacity: 0.5; }
.app-picker-search input { flex: 1; border: none; background: transparent; font-size: 13px; }
.app-picker-search input:focus { outline: none; }
.app-picker-panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 4px 16px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
overflow: hidden;
display: flex;
flex-direction: column;
}
.app-scope .app-duration-picker {
display: flex;
align-items: center;
gap: var(--space-2-5);
flex: 1;
min-width: 0;
}
.app-scope .app-duration-picker-trigger {
cursor: pointer;
}
.app-scope .app-duration-picker-value {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.app-scope .app-duration-picker-value.is-placeholder {
color: var(--lod-gray-500);
}
.app-scope .app-duration-picker-chevron {
flex: 0 0 auto;
width: 10px;
height: 10px;
opacity: 0.55;
margin-left: auto;
}
.app-scope .app-duration-picker-chips {
display: inline-flex;
align-items: center;
gap: var(--space-1);
flex: 0 1 auto;
min-width: 0;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
margin-left: auto;
}
.app-scope .app-duration-picker-chips::-webkit-scrollbar { display: none; }
.app-scope .app-duration-picker-chip {
padding: 3px var(--space-2);
border-radius: var(--radius-xl);
background: var(--lod-gray-50);
border: 1px solid transparent;
color: var(--lod-gray-700);
font-size: 11.5px;
font-weight: var(--fw-medium);
cursor: pointer;
white-space: nowrap;
}
.app-scope .app-duration-picker-chip:hover { background: var(--lod-gray-100); color: var(--lod-darkblue); }
.app-scope .app-duration-picker-chip.is-active {
background: var(--lod-darkblue-100);
color: var(--lod-darkblue);
font-weight: var(--fw-semibold);
}
.app-popover .app-duration-picker-grid {
display: grid;
grid-template-columns: auto repeat(var(--dp-spalten, 4), minmax(56px, 1fr));
gap: var(--space-1);
padding: var(--space-2-5);
font-family: var(--lod-font-sans);
min-width: 280px;
}
.app-popover .app-duration-picker-grid-corner {
}
.app-popover .app-duration-picker-grid-colhead {
font-size: var(--fs-badge);
font-weight: var(--fw-medium);
color: var(--lod-gray-500);
text-align: center;
padding: 0 0 var(--space-1);
border-bottom: 1px solid var(--lod-gray-100);
margin-bottom: var(--space-1);
letter-spacing: 0.02em;
}
.app-popover .app-duration-picker-grid-rowhead {
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
color: var(--lod-gray-600);
text-align: right;
padding-right: var(--space-1-5);
align-self: center;
}
.app-popover .app-duration-picker-grid-cell {
appearance: none;
border: 1px solid var(--lod-gray-200);
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-1-5) var(--space-2);
font-size: 12.5px;
font-family: var(--lod-font-sans);
color: var(--lod-darkblue);
cursor: pointer;
text-align: center;
white-space: nowrap;
min-height: 30px;
transition: background var(--duration-snap), border-color var(--duration-snap), color var(--duration-snap);
}
.app-popover .app-duration-picker-grid-cell:hover:not(:disabled) {
background: var(--lod-gray-50);
border-color: var(--lod-turquoise);
}
.app-popover .app-duration-picker-grid-cell.is-active {
background: var(--lod-turquoise);
border-color: var(--lod-turquoise);
color: var(--lod-white);
font-weight: var(--fw-semibold);
}
.app-popover .app-duration-picker-grid-cell:disabled {
opacity: 0.4;
cursor: not-allowed;
background: var(--lod-gray-50);
}
.app-popover .app-duration-picker-grid-cell.is-empty {
visibility: hidden;
pointer-events: none;
}
.app-popover .app-duration-picker-days {
display: flex;
flex-direction: column;
}
.app-popover .app-duration-picker-days-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) var(--space-2-5);
border-top: 1px solid var(--lod-gray-100);
background: var(--lod-gray-50);
}
.app-popover .app-duration-picker-days-label {
font-size: 12.5px;
font-weight: var(--fw-medium);
color: var(--lod-gray-600);
}
.app-popover .app-duration-picker-days-label small {
font-weight: var(--fw-regular);
color: var(--lod-gray-500);
}
.app-popover .app-duration-picker-stepper {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-md);
background: var(--color-surface);
overflow: hidden;
}
.app-popover .app-duration-picker-step {
appearance: none;
width: 30px;
height: 28px;
border: none;
background: transparent;
color: var(--lod-darkblue);
font-size: var(--font-size-md);
line-height: 1;
cursor: pointer;
transition: background var(--duration-snap), color var(--duration-snap);
}
.app-popover .app-duration-picker-step:hover:not(:disabled) {
background: var(--lod-gray-100);
}
.app-popover .app-duration-picker-step:disabled {
color: var(--lod-gray-300);
cursor: default;
}
.app-popover .app-duration-picker-step-val {
min-width: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
color: var(--lod-gray-500);
border-left: 1px solid var(--lod-gray-100);
border-right: 1px solid var(--lod-gray-100);
transition: background var(--duration-snap), color var(--duration-snap);
}
.app-popover .app-duration-picker-step-val.is-set {
background: var(--lod-turquoise);
border-color: var(--lod-turquoise);
color: var(--lod-white);
}
.app-scope .app-betreff-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .app-betreff-picker-label[data-placeholder] { color: var(--lod-gray-500); font-style: italic; }
.app-scope .app-betreff-picker img { width: 14px; height: 14px; opacity: 0.55; flex-shrink: 0; }
.app-betreff-picker-panel { padding: var(--space-2); font-family: var(--lod-font-sans); }
.app-betreff-picker-list { max-height: 320px; overflow-y: auto; }
.app-betreff-picker-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2-5);
width: 100%;
padding: 7px var(--space-2-5);
background: transparent;
border: none;
border-radius: var(--radius-md);
font-size: var(--fs-body);
color: var(--lod-gray-700);
text-align: left;
cursor: pointer;
}
.app-betreff-picker-item:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.app-betreff-picker-item.is-active { background: var(--lod-darkblue-100); color: var(--lod-darkblue); font-weight: var(--fw-semibold); }
.app-betreff-picker-item.is-parent { color: var(--lod-gray-600); font-weight: var(--fw-semibold); }
.app-betreff-picker-zeile { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.app-betreff-picker-zeile > .app-betreff-picker-item { flex: 1 1 auto; min-width: 0; }
.app-betreff-picker-chevron {
flex: 0 0 auto;
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-xs);
background: transparent; border: none; cursor: pointer;
color: var(--lod-gray-500);
}
.app-betreff-picker-chevron:hover { background: var(--lod-gray-100); }
.app-betreff-picker-chevron.is-leer { visibility: hidden; cursor: default; }
.app-betreff-picker-chevron img { width: 10px; height: 10px; opacity: .7; }
.app-betreff-picker-pfad {
min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: var(--fs-meta); color: var(--lod-gray-500);
}
.app-betreff-picker-item mark { background: var(--yellow-300); color: inherit; padding: 0; border-radius: var(--radius-xxs); }
.app-betreff-picker-empty { padding: var(--space-3); color: var(--lod-gray-500); font-style: italic; text-align: center; }
.app-betreff-picker-empty.is-error { color: var(--lod-danger); }
.app-scope .app-async-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .app-async-picker-label[data-placeholder] { color: var(--lod-gray-500); font-style: italic; }
.app-scope .app-async-picker img { width: 14px; height: 14px; opacity: 0.55; flex-shrink: 0; }
.app-scope .app-async-picker-selected {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
flex: 1;
min-width: 0;
}
.app-scope .app-async-picker-selected-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: var(--fw-medium);
}
.app-scope .app-async-picker-clear {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: var(--radius-sm);
cursor: pointer;
opacity: 0.5;
transition: opacity var(--duration-quick), background var(--duration-quick);
}
.app-scope .app-async-picker-clear:hover {
opacity: 1;
background: var(--lod-gray-100);
}
.app-scope .app-async-picker-clear img { opacity: 1; }
.app-async-picker-item { flex-direction: column !important; align-items: flex-start !important; }
.app-async-picker-item-title { font-weight: var(--fw-medium); }
.app-async-picker-item-subtitle {
font-size: var(--fs-badge);
color: var(--lod-gray-500);
margin-top: var(--space-xxs);
}
.app-async-picker-gekuerzt {
padding: var(--space-1-5) var(--space-2-5);
border-top: 1px solid var(--lod-gray-200);
color: var(--lod-gray-500);
font-size: 11.5px;
text-align: center;
}
.app-async-picker-footer {
display: flex;
align-items: center;
gap: var(--space-1-5);
width: 100%;
margin-top: var(--space-1-5);
padding: var(--space-2) var(--space-2-5);
background: var(--lod-gray-50);
border: 1px dashed var(--lod-gray-300);
border-radius: var(--radius-md);
font-size: 12.5px;
font-weight: var(--fw-medium);
color: var(--lod-darkblue);
cursor: pointer;
transition: background var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft);
}
.app-async-picker-footer:hover {
background: var(--lod-gray-100);
border-color: var(--lod-gray-400);
}
.app-async-picker-footer img {
width: 14px;
height: 14px;
opacity: 0.7;
flex-shrink: 0;
}
.app-scope .app-phase-picker.is-disabled { cursor: default; opacity: 0.5; }
.app-scope .app-phase-picker.is-disabled:hover { background: transparent; }
.app-scope .app-phase-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-scope .app-phase-picker-label[data-placeholder] { color: var(--lod-gray-500); font-style: italic; }
.app-scope .app-phase-picker img { width: 14px; height: 14px; opacity: 0.55; flex-shrink: 0; }
.app-phase-picker-panel { padding: var(--space-2); font-family: var(--lod-font-sans); box-sizing: border-box; width: 100%; }
.app-phase-picker-list { max-height: 320px; overflow-y: auto; }
.app-phase-picker-item mark { background: var(--yellow-300); color: inherit; padding: 0; border-radius: var(--radius-xxs); }
.app-phase-picker-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2-5);
width: 100%;
padding: var(--space-2) var(--space-2-5);
background: transparent;
border: none;
border-radius: var(--radius-md);
font-size: var(--fs-body);
color: var(--lod-gray-700);
text-align: left;
cursor: pointer;
min-width: 0;
}
.app-phase-picker-item:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.app-phase-picker-item.is-active { background: var(--lod-darkblue-100); color: var(--lod-darkblue); font-weight: var(--fw-semibold); }
.app-phase-picker-item-label {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-phase-picker-item-sub {
display: block;
font-size: var(--fs-badge);
color: var(--lod-gray-500);
font-weight: var(--fw-regular);
margin-top: var(--space-px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-phase-picker-item.is-active .app-phase-picker-item-sub {
color: var(--lod-darkblue);
}
.app-phase-picker-loading, .app-phase-picker-empty, .app-phase-picker-error {
padding: var(--space-3);
color: var(--lod-gray-500);
font-style: italic;
text-align: center;
font-size: 12.5px;
}
.app-phase-picker-error { color: var(--lod-danger); }
.app-phase-picker-section-label {
padding: var(--space-1-5) var(--space-2-5) var(--space-1);
font-size: 10.5px;
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--lod-gray-500);
}
.fa-picker { display: flex; flex-direction: column; gap: var(--space-2); }
.app-scope .fa-picker > .app-async-picker { flex: 0 0 auto; }
.fa-picker.is-disabled { opacity: 0.6; pointer-events: none; }
.fa-picker-adr {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--lod-gray-50);
}
.fa-picker-opt {
display: flex;
align-items: flex-start;
gap: var(--space-2);
cursor: pointer;
font-size: var(--font-size-base);
}
.fa-picker-opt input[type="radio"] { margin-top: 3px; accent-color: var(--brand-default); }
.fa-picker-opt-main { display: flex; flex-direction: column; gap: 1px; }
.fa-picker-opt-title { color: var(--color-text); font-weight: var(--fw-medium); }
.fa-picker-firmaadr { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.fa-picker-firmaadr.is-empty { font-style: italic; color: var(--lod-gray-400); }
.fa-picker-fields {
display: grid;
grid-template-columns: 1fr 90px 1fr;
gap: var(--space-2);
margin-top: var(--space-1);
padding-left: var(--space-5);
}
.fa-picker-input {
min-width: 0;
padding: var(--space-1-5) var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--font-size-base);
background: var(--color-surface, #fff);
color: var(--color-text);
}
.fa-picker-input:focus-visible { outline: 2px solid var(--brand-default); outline-offset: -1px; border-color: var(--brand-default); }
.fa-picker-input--wide { grid-column: 1 / -1; }
.fa-picker-input--plz { grid-column: auto; }
@media (max-width: 599px) {
.fa-picker-fields { grid-template-columns: 1fr; padding-left: var(--space-3); }
.fa-picker-input--wide, .fa-picker-input--plz { grid-column: auto; }
}
.app-time-picker { display: inline-flex; align-items: center; min-width: 0; }
.app-time-picker-trigger,
.app-scope .app-time-picker-trigger {
appearance: none;
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
min-height: 34px;
padding: var(--space-1-5) var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.app-time-picker-trigger:hover:not(:disabled),
.app-scope .app-time-picker-trigger:hover:not(:disabled) { border-color: var(--color-border-hover); }
.app-time-picker-trigger:focus-visible,
.app-scope .app-time-picker-trigger:focus-visible {
outline: none;
border-color: var(--brand-default);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-default) 15%, transparent);
}
.app-time-picker-trigger[aria-expanded="true"],
.app-scope .app-time-picker-trigger[aria-expanded="true"] {
border-color: var(--brand-default);
}
.app-time-picker-trigger:disabled,
.app-scope .app-time-picker-trigger:disabled { opacity: 0.5; cursor: default; }
.app-time-picker-icon { flex: 0 0 auto; opacity: 0.55; }
.app-time-picker-value { flex: 0 0 auto; }
.app-time-picker-value.is-placeholder { color: var(--color-text-muted); }
.app-time-picker-chevron { flex: 0 0 auto; opacity: 0.5; margin-left: var(--space-px); }
.app-popover .app-time-picker-panel {
display: flex;
gap: var(--space-1);
padding: var(--space-2);
font-family: var(--font-sans);
}
.app-popover .app-time-picker-col {
display: flex;
flex-direction: column;
min-width: 56px;
}
.app-popover .app-time-picker-col + .app-time-picker-col {
border-left: 1px solid var(--lod-gray-100, var(--color-border-light));
padding-left: var(--space-1);
margin-left: var(--space-1);
}
.app-popover .app-time-picker-colhead {
font-size: var(--fs-badge, 11px);
font-weight: var(--fw-medium);
color: var(--lod-gray-500, var(--color-text-muted));
text-align: center;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0 0 var(--space-1);
margin-bottom: var(--space-1);
border-bottom: 1px solid var(--lod-gray-100, var(--color-border-light));
}
.app-popover .app-time-picker-scroll {
position: relative;
max-height: 208px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
scrollbar-width: thin;
padding-right: 2px;
}
.app-popover .app-time-picker-opt {
appearance: none;
border: 1px solid transparent;
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-1-5) var(--space-3);
font-size: 13px;
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
color: var(--lod-darkblue, var(--color-text));
cursor: pointer;
text-align: center;
transition: background var(--duration-snap), border-color var(--duration-snap), color var(--duration-snap);
}
.app-popover .app-time-picker-opt:hover {
background: var(--lod-gray-50, var(--color-bg-muted));
border-color: var(--lod-turquoise, var(--brand-default));
}
.app-popover .app-time-picker-opt.is-active {
background: var(--lod-turquoise, var(--brand-default));
border-color: var(--lod-turquoise, var(--brand-default));
color: var(--lod-white, #fff);
font-weight: var(--fw-semibold);
}
/*== /styles/domain/dashboard/dashboard.css ==*/
.kpi-grid .kpi-card,
.dash-gast-grid .gg-card,
.dash-pressure .pm-item,
.dash-assignee .al-row,
.dash-gast-list .gl-row,
.dash-bottleneck .dash-bar-row {
border: 1px solid transparent;
background: transparent;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
}
.dash-scroll-host {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.dash-scroll-host > div {
flex: 1 0 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
@media (max-width: 999px) {
.dash-scroll-host { overflow-y: auto; display: block; }
.dash-scroll-host > div { display: block; }
}
.dash-host {
display: flex;
flex-direction: column;
padding: var(--space-4);
height: 100%;
min-height: 0;
box-sizing: border-box;
}
.dash-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: var(--dash-grid-rows, none);
grid-auto-rows: min-content;
gap: var(--space-4);
flex: 1 0 auto;
min-height: 0;
}
.dash-card { grid-row: span var(--dash-row-span, 1); }
@media (min-width: 1000px) {
.dash-scroll-host { overflow-y: auto; }
}
.dash-card {
grid-column: span var(--dash-span, 6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
min-height: 0;
overflow: hidden;
}
.dash-card[data-dash-align="start"] { align-self: start; }
.dash-card[data-dash-align="stretch"] { align-self: stretch; }
.dash-card[data-dash-variant="frameless"] {
background: transparent;
border: none;
padding: 0;
}
.dash-card[data-dash-fill="true"] .dash-card-body {
flex: 1 1 auto;
min-height: 0;
}
.dash-card[data-dash-scroll="true"] {
--dash-scroll-min: 240px;
min-height: var(--dash-scroll-min);
}
.dash-card[data-dash-scroll="true"] .dash-card-body {
overflow-y: auto;
scrollbar-width: thin;
flex: 1 1 0;
}
.dash-card[data-dash-scroll="true"] .dash-card-body::-webkit-scrollbar {
width: 6px;
}
.dash-card[data-dash-scroll="true"] .dash-card-body::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-xs);
}
.dash-card-body[data-dash-body-overflow="visible"] { overflow: visible; flex: 0 0 auto; }
.dash-card-body[data-dash-body-overflow="auto"] { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.dash-card:has(.dash-card-body[data-dash-body-overflow="visible"]) {
overflow: visible;
}
.dash-card[data-dash-collapse-empty="true"] {
overflow: visible;
}
.dash-card[data-dash-collapse-empty="true"] .dash-card-body {
overflow: visible;
}
.dash-card[data-dash-collapse-empty="true"]:has(.is-empty) {
display: none;
}
.dash-card-head {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-1-5);
}
.dash-card-ico {
display: inline-flex;
width: 16px; height: 16px;
flex-shrink: 0;
opacity: 0.85;
}
.dash-card-head[data-title-size="sm"] .dash-card-ico { width: 14px; height: 14px; opacity: 0.55; }
.dash-card-head[data-title-size="md"] .dash-card-ico { width: 15px; height: 15px; }
.dash-card-head[data-title-size="lg"] .dash-card-ico { width: 18px; height: 18px; }
.dash-card-ico img { width: 100%; height: 100%; display: block; }
.dash-card-title {
font-size: 13px;
font-weight: var(--fw-bold);
color: var(--slate-700);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.2;
min-width: 0;
overflow-wrap: break-word;
}
.dash-card-title--sm { font-size: var(--font-size-sm); letter-spacing: 0.08em; color: var(--slate-700); }
.dash-card-title--md { font-size: 13px; letter-spacing: 0.06em; }
.dash-card-title--lg { font-size: 15px; letter-spacing: 0.04em; }
.dash-card-title--default { color: var(--slate-700); }
.dash-card-ico--default { filter: brightness(0.55); opacity: 0.7; }
.dash-card-title--info { color: var(--color-brand); }
.dash-card-ico--info {
opacity: 1;
filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(2050%) hue-rotate(217deg) brightness(96%) contrast(91%);
}
.dash-card-title--warning { color: var(--status-warning-fg); }
.dash-card-ico--warning {
opacity: 1;
filter: brightness(0) saturate(100%) invert(33%) sepia(98%) saturate(1870%) hue-rotate(15deg) brightness(89%) contrast(92%);
}
.dash-card-title--overdue { color: var(--status-danger-fg); }
.dash-card-ico--overdue {
opacity: 1;
filter: brightness(0) saturate(100%) invert(20%) sepia(73%) saturate(3540%) hue-rotate(353deg) brightness(86%) contrast(93%);
}
.dash-card-title--success { color: var(--status-success-fg); }
.dash-card-ico--success {
opacity: 1;
filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1116%) hue-rotate(140deg) brightness(94%) contrast(101%);
}
.dash-card-title--muted { color: var(--color-text-muted); }
.dash-card-ico--muted { filter: brightness(0.5); opacity: 0.5; }
@media (max-width: 599px) {
.dash-card-title--lg { font-size: 13px; letter-spacing: 0.06em; }
.dash-card-title--md { font-size: var(--font-size-sm); letter-spacing: 0.07em; }
}
.dash-card-spacer { flex: 1; min-width: 8px; }
.dash-card-subtitle {
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
color: var(--slate-500);
white-space: nowrap;
letter-spacing: 0;
text-transform: none;
}
.dash-card-subtitle:empty { display: none; }
.dash-block-title {
font-size: var(--fs-body);
font-weight: var(--fw-semibold, 600);
color: var(--color-text-primary);
margin-bottom: var(--space-2, 8px);
}
.dash-block-empty {
padding: var(--space-4, 16px);
text-align: center;
color: var(--color-text-muted);
font-size: var(--fs-caption);
}
@media (max-width: 999px) {
.dash-host { height: auto; padding: var(--space-3); }
.dash-grid {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
flex: none;
}
.dash-card { grid-column: span 6; overflow: visible; }
.dash-card-body { overflow: visible; }
}
@media (max-width: 599px) {
.dash-grid { grid-template-columns: 1fr; gap: var(--space-3); }
.dash-card { grid-column: span 1; padding: var(--space-3); }
}
/*== /styles/domain/dashboard/dashboard-shell.css ==*/
.dashboard-wrap { display: flex; flex-direction: column; height: 100%; }
.iframe-wrap { flex: 1; min-height: 0; }
.pbi-frame { width: 100%; height: 100%; border: none; display: block; }
.pbi-frame > iframe { width: 100%; height: 100%; border: 0; display: block; }
/*== /styles/domain/dashboard/tabs-container.css ==*/
.dash-tabs-container {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
gap: var(--space-2-5);
}
.dash-tabs-container .dash-tabs-pills {
align-self: flex-start;
flex: 0 0 auto;
}
.dash-tabs-container .dash-tabs-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
}
.dash-tabs-container .dash-tabs-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
overflow-y: auto;
scrollbar-width: thin;
}
.dash-tabs-container .dash-tabs-body > * {
flex: 0 0 auto;
min-height: 0;
}
.dash-tabs-container .dash-tabs-body::-webkit-scrollbar { width: 6px; }
.dash-tabs-container .dash-tabs-body::-webkit-scrollbar-thumb {
background: var(--color-border); border-radius: var(--radius-xs);
}
/*== /styles/domain/dashboard/bar-list.css ==*/
.dash-bar-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
gap: var(--space-2);
}
.dash-bar-list .bl-row {
appearance: none;
background: transparent;
border: none;
padding: var(--space-1-5) var(--space-2);
display: grid;
grid-template-columns: minmax(140px, 30%) minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
border-radius: var(--radius-md);
transition: background var(--duration-quick);
}
.dash-bar-list[data-bl-lead="icon"] .bl-row,
.dash-bar-list[data-bl-lead="avatar"] .bl-row {
grid-template-columns: 32px minmax(120px, 30%) minmax(0, 1fr) auto;
}
@media (max-width: 999px) {
.dash-bar-list .bl-row { min-height: var(--touch-ziel); }
}
.dash-bar-list .bl-row:hover {
background: var(--color-bg-muted);
}
.dash-bar-list .bl-row:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: -2px;
}
.dash-bar-list .bl-row-lead {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
}
.dash-bar-list .bl-row-lead--icon {
border-radius: var(--radius-md);
background: var(--color-bg-muted);
}
.dash-bar-list .bl-row-lead--icon img {
opacity: 0.7;
}
.dash-bar-list .bl-row-lead--avatar img,
.dash-bar-list .bl-row-lead--avatar .al-avatar-fallback {
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
}
.dash-bar-list .bl-row-text {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-px);
}
.dash-bar-list .bl-row-label {
font-size: 13px;
color: var(--color-text-primary);
font-weight: var(--fw-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-bar-list .bl-row-subtitle {
font-size: 11px;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-bar-list .bl-row-bar {
height: 8px;
background: var(--color-border-light);
border-radius: var(--radius-circular);
overflow: hidden;
}
.dash-bar-list .bl-row-bar-fill {
height: 100%;
background: var(--lod-turquoise-cyan);
border-radius: var(--radius-circular);
transition: width var(--duration-relaxed) var(--ease-soft);
}
.dash-bar-list .bl-row-bar-fill--info { background: var(--color-brand); }
.dash-bar-list .bl-row-bar-fill--warn,
.dash-bar-list .bl-row-bar-fill--warning { background: var(--status-warning-fg); }
.dash-bar-list .bl-row-bar-fill--overdue { background: var(--status-danger-fg); }
.dash-bar-list .bl-row-bar-fill--success { background: var(--status-success-fg); }
.dash-bar-list .bl-row-bar-fill--muted { background: var(--color-text-muted); }
.dash-bar-list .bl-row-value {
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
min-width: 32px;
text-align: right;
padding: 0 var(--space-1);
}
.dash-bar-list .bl-empty {
padding: var(--space-4);
text-align: center;
color: var(--color-text-muted);
font-size: 13px;
}
/*== /styles/domain/dashboard/status-donut.css ==*/
.dash-status-donut {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.dash-status-donut .sd-chart-host {
position: relative;
width: 200px;
height: 200px;
flex-shrink: 0;
}
.dash-status-donut .sd-svg {
display: block;
width: 200px;
height: 200px;
}
.dash-status-donut--compact {
justify-content: center;
height: 100%;
}
.dash-status-donut--compact .sd-chart-host {
width: 140px;
height: 140px;
}
.dash-status-donut--compact .sd-svg {
width: 140px;
height: 140px;
}
.dash-status-donut--compact .sd-center-value { font-size: 20px; }
.dash-status-donut--compact .sd-center-label { font-size: 9px; letter-spacing: 0.06em; }
.dash-status-donut--compact.dash-status-donut--fuellt .sd-chart-host {
flex: 1 1 0;
min-height: 140px;
width: 100%;
}
.dash-status-donut--compact.dash-status-donut--fuellt .sd-svg {
width: 100%;
height: 100%;
}
.dash-status-donut .sd-slice {
cursor: pointer;
transition: opacity var(--duration-quick);
}
.dash-status-donut .sd-slice:hover { opacity: 0.85; }
.dash-status-donut .sd-center-value {
font-family: inherit;
font-size: 26px;
font-weight: var(--fw-bold);
fill: var(--color-text-primary);
}
.dash-status-donut .sd-center-label {
font-family: inherit;
font-size: 10.5px;
font-weight: var(--fw-semibold);
fill: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.dash-status-donut .sd-legend {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
width: 100%;
}
.dash-status-donut .sd-legend-item {
appearance: none;
background: transparent;
border: none;
display: grid;
grid-template-columns: 10px 1fr auto;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-1-5);
border-radius: var(--radius-md);
font-family: inherit;
cursor: pointer;
text-align: left;
transition: background var(--duration-quick);
width: 100%;
}
.dash-status-donut .sd-legend-item:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: -2px;
}
@media (max-width: 999px) {
.dash-status-donut .sd-legend-item { min-height: var(--touch-ziel); }
}
.dash-status-donut .sd-legend-item:hover {
background: var(--color-bg-muted);
}
.dash-status-donut .sd-legend-dot {
width: 10px; height: 10px;
border-radius: 50%;
display: inline-block;
}
.dash-status-donut .sd-legend-label {
font-size: 13px;
color: var(--color-text-primary);
font-weight: var(--fw-medium);
}
.dash-status-donut .sd-legend-value {
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.dash-status-donut--compact .sd-legend {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.dash-status-donut--compact .sd-legend:focus-within {
position: static;
width: 100%;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
@media (hover: none) {
.dash-status-donut--compact { justify-content: flex-start; height: auto; }
.dash-status-donut--compact .sd-legend {
position: static;
width: 100%;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
.dash-status-donut--compact .sd-legend-item { padding: var(--space-1) var(--space-1); }
.dash-status-donut--compact .sd-legend-label,
.dash-status-donut--compact .sd-legend-value { font-size: var(--fs-caption); }
}
.dash-status-donut--chips .sd-legend {
position: static;
width: 100%;
height: auto;
margin: 0;
padding: 0;
overflow: visible;
clip: auto;
white-space: normal;
border: 0;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: var(--space-1);
flex: 0 0 auto;
}
.dash-status-donut--chips .sd-legend-item {
grid-template-columns: 8px auto auto;
gap: var(--space-1);
width: auto;
flex-shrink: 0;
padding: 2px var(--space-1-5);
border-radius: var(--radius-pill-sm);
background: var(--lod-gray-100);
}
.dash-status-donut--chips .sd-legend-item:hover { background: var(--lod-gray-200); }
.dash-status-donut--chips .sd-legend-dot { width: 8px; height: 8px; }
.dash-status-donut--chips .sd-legend-label,
.dash-status-donut--chips .sd-legend-value { font-size: var(--fs-badge); line-height: 1.4; }
.dash-status-donut--chips .sd-legend-label { color: var(--lod-gray-700); }
/*== /styles/domain/dashboard/kpi-grid.css ==*/
.kpi-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-3, 12px);
}
.kpi-grid[data-kpi-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.kpi-grid[data-kpi-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.kpi-grid .kpi-card {
appearance: none;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border);
border-radius: var(--surface-radius);
padding: var(--space-3) var(--space-3-5);
display: flex;
flex-direction: column;
gap: var(--space-1);
cursor: pointer;
text-align: left;
position: relative;
transition: border-color var(--duration-snappy) var(--ease-soft), box-shadow var(--duration-snappy) var(--ease-soft), transform var(--duration-snappy) var(--ease-soft), background var(--duration-snappy) var(--ease-soft);
min-width: 0;
min-height: 92px;
font-family: inherit;
color: inherit;
box-sizing: border-box;
}
.kpi-grid .kpi-card:hover {
box-shadow: 0 2px 10px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
transform: translateY(-1px);
}
.kpi-grid .kpi-card.is-not-clickable {
cursor: default;
}
.kpi-grid .kpi-card.is-not-clickable:hover {
box-shadow: none;
transform: none;
}
.kpi-grid .kpi-card:active { transform: translateY(0); }
.kpi-grid .kpi-card.is-disabled { cursor: default; }
.kpi-grid .kpi-card.is-disabled:hover { box-shadow: none; transform: none; }
.kpi-grid .kpi-card.is-active {
border-color: var(--color-brand);
outline: 1px solid var(--color-brand);
outline-offset: -1px;
}
.kpi-grid .kpi-card.is-active.kpi-card--overdue { border-color: var(--status-danger-fg); outline-color: var(--status-danger-fg); }
.kpi-grid .kpi-card.is-active.kpi-card--warning { border-color: var(--status-warning-fg); outline-color: var(--status-warning-fg); }
.kpi-grid .kpi-card.is-active.kpi-card--success { border-color: var(--status-success-fg); outline-color: var(--status-success-fg); }
.kpi-grid .kpi-card.is-active { border-left-width: 4px; }
.kpi-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin: 0;
}
.kpi-card-label {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-weight: var(--fw-medium, 500);
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kpi-card-ico {
display: inline-flex;
width: 22px; height: 22px;
opacity: 0.85;
flex-shrink: 0;
}
.kpi-card-ico img { width: 100%; height: 100%; display: block; }
.kpi-card-sub {
font-size: 11px;
color: var(--color-text-muted);
font-weight: var(--fw-medium);
line-height: 1.3;
margin-top: var(--space-xxs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kpi-grid .kpi-card--small {
padding: var(--space-1-5) var(--space-2-5);
gap: var(--space-px);
min-height: 66px;
height: 66px;
border-left-width: 4px;
}
.kpi-grid .kpi-card--small > .kpi-card-head,
.kpi-grid .kpi-card--small > .kpi-card-row,
.kpi-grid .kpi-card--small > .kpi-card-sub {
flex-shrink: 0;
}
.kpi-grid .kpi-card--small .kpi-card-head {
margin-bottom: 0;
gap: 5px;
justify-content: flex-start;
}
.kpi-grid .kpi-card--small .kpi-card-label {
font-size: 11px;
font-weight: var(--fw-medium);
letter-spacing: 0;
color: var(--color-text-muted);
line-height: 1.25;
}
.kpi-grid .kpi-card--small .kpi-card-ico {
width: 12px; height: 12px;
opacity: 0.5;
margin-right: 0;
}
.kpi-grid .kpi-card--small .kpi-card-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
min-width: 0;
margin-top: var(--space-px);
}
.kpi-grid .kpi-card--small .kpi-card-value {
font-size: var(--font-size-lg);
font-weight: var(--fw-bold);
line-height: 1.05;
margin-top: 0;
}
.kpi-grid .kpi-card--small .kpi-card-spark {
flex: 0 0 auto;
margin: 0;
padding: 0;
line-height: 0;
}
.kpi-grid .kpi-card--small .kpi-card-spark svg {
display: block;
}
.kpi-grid .kpi-card--small .kpi-card-sub {
font-size: var(--font-size-xs);
margin-top: 0;
line-height: 1.15;
max-height: 14px;
overflow: hidden;
text-overflow: ellipsis;
}
.kpi-card-value {
font-size: var(--kpi-value-lg);
font-weight: var(--fw-bold, 700);
color: var(--color-text-primary);
line-height: 1.1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
margin-top: var(--space-xxs);
}
.kpi-card-spark {
margin-top: auto;
padding-top: var(--space-1);
height: 20px;
display: block;
}
.kpi-card-spark svg {
display: block;
width: 100%;
height: 100%;
}
.kpi-grid .kpi-card--default .kpi-card-value { color: var(--color-text-primary); }
.kpi-grid .kpi-card--default .kpi-card-ico { filter: brightness(0.5); }
.kpi-grid .kpi-card--info { border-left-color: var(--color-brand); }
.kpi-grid .kpi-card--info .kpi-card-ico { filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(2050%) hue-rotate(217deg) brightness(96%) contrast(91%); }
.kpi-grid .kpi-card--overdue {
border-left-color: var(--status-danger-fg);
}
.kpi-grid .kpi-card--overdue .kpi-card-value { color: var(--status-danger-fg); }
.kpi-grid .kpi-card--overdue .kpi-card-ico { filter: brightness(0) saturate(100%) invert(20%) sepia(73%) saturate(3540%) hue-rotate(353deg) brightness(86%) contrast(93%); }
.kpi-grid .kpi-card--warning { border-left-color: var(--status-warning-fg); }
.kpi-grid .kpi-card--warning .kpi-card-value { color: var(--status-warning-fg); }
.kpi-grid .kpi-card--warning .kpi-card-ico { filter: brightness(0) saturate(100%) invert(33%) sepia(98%) saturate(1870%) hue-rotate(15deg) brightness(89%) contrast(92%); }
.kpi-grid .kpi-card--success { border-left-color: var(--status-success-fg); }
.kpi-grid .kpi-card--success .kpi-card-value { color: var(--status-success-fg); }
.kpi-grid .kpi-card--success .kpi-card-ico { filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1116%) hue-rotate(140deg) brightness(94%) contrast(101%); }
.kpi-grid .kpi-card--muted { border-left-color: var(--color-border); }
.kpi-grid .kpi-card--muted .kpi-card-value { color: var(--color-text-muted); }
.kpi-grid .kpi-card--muted .kpi-card-ico { filter: brightness(0.5); opacity: 0.6; }
.kpi-grid .kpi-card[data-kpi-key="offen"] {
border-top: none;
border-right: none;
border-bottom: none;
}
.mini-spark { display: block; }
@media (max-width: 999px) {
.kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 599px) {
.kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.kpi-grid .kpi-card { padding: var(--space-2-5) var(--space-3); min-height: 78px; }
.kpi-grid .kpi-card-value { font-size: var(--kpi-value-md); }
}
/*== /styles/domain/dashboard/kpi-legend.css ==*/
.kpi-legend-popup.app-popover {
width: min(400px, calc(100vw - 16px));
}
.kpi-legend {
display: flex;
flex-direction: column;
max-height: min(560px, 72vh);
}
.kpi-legend-head {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-light);
}
.kpi-legend-head-ico {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-md);
background: var(--tone-info-soft);
}
.kpi-legend-title {
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.kpi-legend-body {
overflow-y: auto;
padding: var(--space-1) 0 var(--space-2);
}
.kpi-legend-row {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-2-5) var(--space-4);
}
.kpi-legend-row + .kpi-legend-row { border-top: 1px solid var(--color-border-light); }
.kpi-legend-label {
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
color: var(--lod-darkblue);
}
.kpi-legend-text {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.5;
}
.kpi-legend-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-1-5);
margin-top: var(--space-1);
}
.kpi-legend-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: 2px 10px;
border-radius: var(--radius-pill);
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
}
.kpi-legend-chip[data-tone="neutral"] { background: var(--lod-gray-100); color: var(--lod-gray-700); }
.kpi-legend-chip[data-tone="success"] { background: var(--tone-success-soft); color: var(--tone-success-text); }
.kpi-legend-chip[data-tone="warning"] { background: var(--tone-warn-soft); color: var(--tone-warn-text); }
.kpi-legend-chip[data-tone="danger"] { background: var(--tone-danger-soft); color: var(--tone-danger-text); }
.kpi-legend-chip-dot {
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: var(--radius-circular);
background: currentColor;
}
@media (max-width: 1399px) {
.kpi-legend { max-height: min(520px, 68vh); }
}
@media (max-width: 999px) {
.kpi-legend { max-height: 64vh; }
}
@media (max-width: 599px) {
.kpi-legend-popup.app-popover { width: calc(100vw - 16px); }
.kpi-legend { max-height: 60vh; }
.kpi-legend-head { padding: var(--space-2-5) var(--space-3); }
.kpi-legend-row { padding: var(--space-2) var(--space-3); }
}
/*== /styles/domain/dashboard/process-bottleneck.css ==*/
.dash-bottleneck-body { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.dash-bottleneck { --dash-bn-label-w: 180px; --dash-bn-count-w: 64px; --dash-bn-bar-min: 64px; }
.dash-bottleneck .dash-bar-row {
display: grid;
grid-template-columns: minmax(0, var(--dash-bn-label-w, 180px)) minmax(var(--dash-bn-bar-min, 64px), 1fr) var(--dash-bn-count-w, 64px);
align-items: center;
gap: var(--space-3, 12px);
padding: var(--space-2, 8px) var(--space-2, 8px);
border-radius: var(--radius-sm);
background: var(--color-bg-muted);
border: none;
text-align: left;
transition: background var(--duration-quick) var(--ease-soft);
font-family: inherit;
color: inherit;
}
.dash-bottleneck .dash-bar-row .dash-bar-label {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-width: 0;
}
.dash-bottleneck .dash-bar-row .dash-bar-count,
.dash-bottleneck .dash-bar-row .dash-bar-ok {
text-align: right;
white-space: nowrap;
}
@media (max-width: 999px) {
.dash-bottleneck { --dash-bn-label-w: 168px; --dash-bn-count-w: 56px; }
.dash-bottleneck .dash-bar-row { min-height: var(--touch-ziel); }
}
@media (max-width: 599px) {
.dash-bottleneck { --dash-bn-count-w: 50px; }
.dash-bottleneck:not(.dash-bottleneck--reverse) .dash-bar-row {
grid-template-columns: minmax(0, 1fr) var(--dash-bn-count-w, 50px);
row-gap: var(--space-1, 4px);
}
.dash-bottleneck:not(.dash-bottleneck--reverse) .dash-bar-row .dash-bar-label {
grid-column: 1 / -1;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
}
.dash-bottleneck--reverse { --dash-bn-bar-w: 120px; --dash-bn-count-w: 38px; }
.dash-bottleneck--reverse .dash-bar-row {
grid-template-columns: minmax(0, 1fr) var(--dash-bn-bar-w, 120px) var(--dash-bn-count-w, 38px);
}
@media (max-width: 999px) {
.dash-bottleneck--reverse { --dash-bn-bar-w: 90px; --dash-bn-count-w: 38px; }
}
@media (max-width: 599px) {
.dash-bottleneck--reverse { --dash-bn-bar-w: 70px; --dash-bn-count-w: 34px; }
}
.dash-bottleneck .dash-bar-row.is-clickable { cursor: pointer; }
.dash-bottleneck .dash-bar-row.is-clickable:hover { background: var(--color-bg-subtle); }
.dash-bar-label {
font-size: var(--fs-caption);
color: var(--color-text-primary);
}
.dash-bar-track {
height: 8px;
background: var(--color-border);
border-radius: var(--radius-circular);
overflow: hidden;
}
.dash-bar-row--success .dash-bar-fill { background: var(--status-success-fg); }
.dash-bar-row--warning .dash-bar-fill { background: var(--status-warning-fg); }
.dash-bar-row--overdue .dash-bar-fill { background: var(--status-danger-fg); }
.dash-bar-row--default .dash-bar-fill { background: var(--color-brand); }
.dash-bar-row--info .dash-bar-fill { background: var(--color-brand); }
.dash-bar-fill { display: block; height: 100%; transition: width var(--duration-normal) var(--ease-soft); }
.dash-bar-count {
font-size: var(--fs-caption);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.dash-bar-ok {
font-size: var(--fs-caption);
color: var(--status-success-fg);
font-weight: var(--fw-semibold, 600);
}
/*== /styles/domain/dashboard/daily-chart.css ==*/
.dash-daily-head {
display: flex;
align-items: center;
gap: var(--space-1-5);
font-size: var(--fs-caption);
color: var(--color-text-muted);
}
.dash-legend-spacer { flex: 1; }
.dash-daily-chart-host {
position: relative;
width: 100%;
min-height: 150px;
}
.dash-daily-chart-host .dc-svg {
display: block;
width: 100%;
height: 150px;
}
.dash-daily-chart-host .dc-grid {
stroke: var(--color-border-light);
stroke-width: 1;
shape-rendering: crispEdges;
}
.dash-daily-chart-host .dc-y-label,
.dash-daily-chart-host .dc-x-label {
font-family: inherit;
font-size: 10.5px;
fill: var(--color-text-muted);
}
.dash-daily-chart-host .dc-bar {
transition: opacity var(--duration-quick);
cursor: pointer;
}
.dash-daily-chart-host .dc-bar:hover { opacity: 0.85; }
.dash-daily-chart-host .dc-hover {
cursor: pointer;
}
.dc-tooltip .kvc-tip-line { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: var(--space-1); }
.dash-daily-chart-host .y.axis text,
.dash-daily-chart-host .x.axis text,
.dash-daily-chart-host .chart-label,
.dash-daily-chart-host text.x-value-text,
.dash-daily-chart-host text.y-value-text {
fill: var(--color-text-muted) !important;
font-family: inherit !important;
font-size: 11px !important;
}
.dash-daily-chart-host .y.axis line,
.dash-daily-chart-host .x.axis line {
stroke: var(--color-border-light) !important;
}
.dash-daily-chart-host .chart-legend,
.dash-daily-chart-host g.legend,
.dash-daily-chart-host g.dataset-units g.legend {
display: none !important;
}
.dash-daily-legend {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: 0 var(--space-2-5) var(--space-1);
font-size: 11.5px;
color: var(--slate-600);
}
.dash-daily-legend-items {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-4);
flex: 1 1 auto;
min-width: 0;
height: var(--tbb-legend-h, auto);
max-height: var(--tbb-legend-h);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.dash-daily-legend-item {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
font-weight: 500;
max-width: 200px;
min-width: 0;
}
.dash-daily-legend-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-daily-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.dash-daily-legend-extra {
margin-left: auto;
flex: 0 0 auto;
font-size: 11.5px;
color: var(--lod-gray-600);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: var(--space-2-5);
}
@media (max-width: 599px) {
.dash-daily-legend { flex-wrap: wrap; }
.dash-daily-legend-extra {
margin-left: 0;
flex: 1 1 100%;
flex-wrap: wrap;
}
}
.dash-daily-legend-extra strong { color: var(--lod-darkblue); font-weight: 600; }
.dash-daily-legend-extra .delta-pos { color: var(--status-success-fg); }
.dash-daily-legend-extra .delta-neg { color: var(--status-danger-fg); }
.dash-daily-legend-extra .delta-zero { color: var(--lod-gray-500); }
.dash-range-pill {
--pill-thumb-bg: var(--color-surface);
}
/*== /styles/domain/charts/time-bucket-bars.css ==*/
.dash-daily-chart-host .tbb-svg,
.tbb-chart .tbb-svg { display: block; width: 100%; height: 100%; }
.tbb-chart .dash-daily-chart-host { min-height: var(--tbb-plot-h, 180px); }
.tbb-chart .dash-daily-chart-host .tbb-svg { height: var(--tbb-plot-h, 180px); }
.dash-daily-chart-host .tbb-grid,
.tbb-chart .tbb-grid { stroke: var(--color-border-light); stroke-width: 1; shape-rendering: crispEdges; }
.dash-daily-chart-host .tbb-y-label,
.dash-daily-chart-host .tbb-x-label,
.tbb-chart .tbb-y-label,
.tbb-chart .tbb-x-label { font-family: inherit; font-size: 10.5px; fill: var(--color-text-muted); }
.dash-daily-chart-host .tbb-val-label,
.tbb-chart .tbb-val-label {
font-family: inherit;
font-size: 10.5px;
font-weight: var(--fw-semibold);
fill: var(--color-text);
pointer-events: none;
}
.dash-daily-chart-host .tbb-bar,
.tbb-chart .tbb-bar { transition: opacity var(--duration-quick); cursor: pointer; }
.dash-daily-chart-host .tbb-bar:hover,
.tbb-chart .tbb-bar:hover { opacity: 0.85; }
.dash-daily-chart-host .tbb-hover,
.tbb-chart .tbb-hover { cursor: pointer; }
.dash-daily-chart-host,
.tbb-chart {
--tbb-ref-farbe: var(--lod-darkblue-900);
--tbb-ref-breite: 1.75;
--tbb-ref-deckung: 0.8;
--tbb-ref-halo-breite: 4;
--tbb-ref-muster: 5 4;
}
.dash-daily-chart-host .tbb-ref,
.tbb-chart .tbb-ref {
pointer-events: none;
stroke: var(--tbb-ref-farbe);
stroke-width: var(--tbb-ref-breite);
stroke-linecap: butt;
stroke-dasharray: var(--tbb-ref-muster);
opacity: var(--tbb-ref-deckung);
}
.dash-daily-chart-host .tbb-ref-halo,
.tbb-chart .tbb-ref-halo {
pointer-events: none;
stroke: var(--color-surface);
stroke-width: var(--tbb-ref-halo-breite);
stroke-linecap: butt;
opacity: 0.85;
}
.dash-daily-chart-host .tbb-legend-line,
.tbb-chart .tbb-legend-line {
border-color: var(--tbb-ref-farbe);
border-top-style: dashed;
opacity: var(--tbb-ref-deckung);
}
.dash-daily-chart-host .tbb-vgl,
.tbb-chart .tbb-vgl {
pointer-events: none;
fill: none;
stroke: var(--tbb-ref-farbe);
stroke-width: var(--tbb-ref-breite);
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.55;
}
.dash-daily-chart-host .tbb-vgl-halo,
.tbb-chart .tbb-vgl-halo {
pointer-events: none;
fill: none;
stroke: var(--color-surface);
stroke-width: var(--tbb-ref-halo-breite);
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.85;
}
.dash-daily-chart-host .tbb-vgl-punkt,
.tbb-chart .tbb-vgl-punkt {
pointer-events: none;
fill: var(--tbb-ref-farbe);
stroke: var(--color-surface);
stroke-width: 1.5;
opacity: 0.75;
}
.dash-daily-chart-host .tbb-legend-line--vgl,
.tbb-chart .tbb-legend-line--vgl {
border-top-style: solid;
opacity: 0.55;
}
.dash-daily-chart-host .tbb-ref-label,
.tbb-chart .tbb-ref-label {
font-family: inherit;
font-size: 10.5px;
font-weight: var(--fw-semibold);
fill: var(--tbb-ref-farbe);
opacity: 0.75;
pointer-events: none;
paint-order: stroke fill;
stroke: var(--color-surface);
stroke-width: 3px;
stroke-linejoin: round;
}
.tbb-chart .tbb-tooltip { }
.tbb-chart.is-loading {
position: relative;
pointer-events: none;
}
.tbb-chart.is-loading > * {
opacity: 0.45;
filter: grayscale(0.4);
transition: opacity var(--duration-quick);
}
.tbb-chart.is-loading::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.65) 50%,
transparent 100%
);
background-size: 50% 100%;
background-repeat: no-repeat;
animation: tbb-skeleton-shimmer var(--duration-shimmer) var(--ease-inout-soft) infinite;
pointer-events: none;
}
@keyframes tbb-skeleton-shimmer {
0% { background-position: -50% 0; }
100% { background-position: 150% 0; }
}
.dash-daily-legend .tbb-legend-line {
display: inline-block;
width: 14px;
height: 0;
border-top: 2px solid;
vertical-align: middle;
margin-right: var(--space-1);
}
.dash-daily-chart-host .tbb-track,
.tbb-chart .tbb-track {
fill: var(--lod-gray-100);
fill-opacity: 0.4;
pointer-events: none;
}
.dash-daily-chart-host .tbb-bar:hover,
.tbb-chart .tbb-bar:hover { filter: brightness(1.08); opacity: 1; }
/*== /styles/domain/dashboard/chart-tooltip.css ==*/
.dc-tooltip,
.sd-tooltip {
position: absolute;
z-index: 10;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 4px 16px color-mix(in srgb, var(--lod-darkblue-900) 12%, transparent);
padding: var(--space-2) var(--space-2-5);
min-width: 0;
max-width: 220px;
pointer-events: none;
opacity: 0;
transition: opacity var(--duration-instant);
font-size: var(--font-size-sm);
line-height: 1.3;
color: var(--color-text-primary);
}
.dc-tooltip.is-visible,
.sd-tooltip.is-visible { opacity: 1; }
.dc-tip-title {
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
color: var(--slate-900);
border-bottom: 1px solid var(--color-border-light);
padding: 0 0 var(--space-1) 0;
margin: 0 0 6px 0;
white-space: nowrap;
}
.dc-tooltip,
.sd-tooltip {
display: grid;
grid-template-columns: auto 1fr max-content;
align-items: center;
column-gap: var(--space-2);
row-gap: var(--space-px);
}
.dc-tip-row {
display: contents;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--color-text-secondary);
}
.dc-tip-row > * {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dc-tooltip > :not(.dc-tip-row),
.sd-tooltip > :not(.dc-tip-row) { grid-column: 1 / -1; }
.dc-tip-dot {
width: 8px; height: 8px;
border-radius: 50%;
display: inline-block;
}
.dc-tip-label { font-size: var(--font-size-sm); }
.dc-tip-value {
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
color: var(--color-text-primary);
text-align: right;
}
.dc-tip-sub {
font-size: 10.5px;
color: var(--color-text-muted);
margin-top: var(--space-1);
text-align: right;
}
.graph-svg-tip {
background: var(--color-surface) !important;
color: var(--color-text-primary) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-lg) !important;
box-shadow: 0 4px 16px color-mix(in srgb, var(--lod-darkblue-900) 12%, transparent) !important;
padding: var(--space-2) var(--space-2-5) !important;
font-family: inherit !important;
font-size: var(--font-size-sm) !important;
line-height: 1.3 !important;
width: auto !important;
min-width: 0 !important;
max-width: 220px !important;
pointer-events: none;
}
.graph-svg-tip * { box-sizing: border-box !important; }
.graph-svg-tip .title {
font-weight: var(--fw-semibold) !important;
color: var(--slate-900) !important;
border-bottom: 1px solid var(--color-border-light) !important;
padding: 0 0 var(--space-1) 0 !important;
margin: 0 0 6px 0 !important;
font-size: var(--font-size-sm) !important;
line-height: 1.3 !important;
white-space: nowrap !important;
}
.graph-svg-tip ul.data-point-list,
.graph-svg-tip ul {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.graph-svg-tip ul.data-point-list li,
.graph-svg-tip ul li {
display: flex !important;
align-items: center !important;
gap: var(--space-2) !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
color: var(--slate-600) !important;
font-variant-numeric: tabular-nums !important;
line-height: 1.4 !important;
white-space: nowrap !important;
min-width: 0 !important;
}
.graph-svg-tip ul li {
position: relative !important;
padding-left: 14px !important;
}
.graph-svg-tip ul li::before {
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 8px; height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.85;
}
.graph-svg-tip ul li strong {
margin-left: auto !important;
color: var(--slate-900) !important;
font-weight: var(--fw-semibold) !important;
padding-left: var(--space-2);
}
.graph-svg-tip .pointer { display: none !important; }
.graph-svg-tip .indicator {
display: inline-block !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
margin-right: 0 !important;
}
/*== /styles/domain/dashboard/gast-grid.css ==*/
.dash-gast-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2-5);
padding-right: var(--space-1);
grid-auto-rows: max-content;
}
.dash-gast-grid.gg-cols-1 { grid-template-columns: 1fr; }
.dash-gast-grid.gg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.dash-gast-grid.gg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.dash-gast-grid.gg-cols-4 { grid-template-columns: repeat(4, 1fr); }
.dash-gast-grid .gg-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
position: relative;
font-family: inherit;
color: inherit;
min-height: 0;
transition: box-shadow var(--duration-snappy) var(--ease-soft), border-color var(--duration-snappy) var(--ease-soft);
overflow: hidden;
}
.dash-gast-grid .gg-card:hover {
box-shadow: 0 2px 10px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
}
.dash-gast-grid .gg-card.is-expanded {
border-color: var(--color-brand);
}
.dash-gast-grid .gg-card-header {
display: flex;
align-items: stretch;
width: 100%;
border: none;
background: transparent;
padding: 0;
gap: 0;
}
.dash-gast-grid .gg-card-toggle {
appearance: none;
background: transparent;
border: none;
flex: 1;
display: grid;
grid-template-columns: 18px minmax(0, 1fr) auto auto auto;
align-items: center;
gap: var(--space-2);
padding: var(--space-2-5) var(--space-2) var(--space-2-5) var(--space-3);
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
min-width: 0;
}
@media (max-width: 999px) {
.dash-gast-grid.gg-cols-3 .gg-card-pl-name,
.dash-gast-grid.gg-cols-4 .gg-card-pl-name { display: none; }
}
.dash-gast-grid .gg-card-toggle:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: -2px;
}
.dash-gast-grid .gg-card-toggle:hover { background: var(--color-bg-muted); }
.gg-card-ico {
display: inline-flex;
width: 16px; height: 16px;
opacity: 0.55;
flex-shrink: 0;
}
.gg-card-ico img { width: 100%; height: 100%; display: block; }
.gg-card-text { min-width: 0; }
.gg-card-title {
font-size: 13px;
font-weight: var(--fw-semibold, 600);
color: var(--color-text-primary);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gg-card-sub {
font-size: 11px;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: var(--space-px);
}
.gg-card-badge {
font-size: 10.5px;
background: color-mix(in srgb, var(--brand-default) 10%, transparent);
color: var(--color-brand);
padding: var(--space-xxs) var(--space-2);
border-radius: var(--radius-circular);
font-weight: var(--fw-semibold, 600);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.gg-card-chevron {
width: 14px; height: 14px;
opacity: 0.55;
transition: transform var(--duration-balanced) var(--ease-soft);
flex-shrink: 0;
}
.dash-gast-grid .gg-card.is-expanded .gg-card-chevron { transform: rotate(180deg); }
.dash-gast-grid .gg-card-open {
appearance: none;
background: transparent;
border: none;
border-left: 1px solid var(--color-border-light);
width: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.55;
flex-shrink: 0;
transition: opacity var(--duration-quick), background var(--duration-quick);
}
@media (max-width: 999px) {
.dash-gast-grid .gg-card-open { width: var(--touch-ziel); }
}
.dash-gast-grid .gg-card-open:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: -2px;
}
.dash-gast-grid .gg-card-open:hover {
opacity: 1;
background: var(--color-bg-muted);
color: var(--color-brand);
}
.dash-gast-grid .gg-card-open img { width: 14px; height: 14px; }
.gg-card-pl-pill {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-xxs) var(--space-2) var(--space-xxs) var(--space-xxs);
border-radius: var(--radius-circular);
background: var(--color-bg-muted);
border: 1px solid var(--color-border-light);
font-size: 11px;
color: var(--color-text-muted);
font-weight: var(--fw-medium);
max-width: 140px;
white-space: nowrap;
}
.gg-card-pl-pill img,
.gg-card-pl-pill .al-avatar-fallback {
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
flex-shrink: 0;
}
.gg-card-pl-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100px;
}
.dash-gast-grid .gg-phasen {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-2) var(--space-2-5) var(--space-2-5);
border-top: 1px solid var(--color-border-light);
background: var(--color-bg-muted);
}
.dash-gast-grid .gg-phasen.is-collapsed { display: none; }
@media (max-width: 999px) {
.dash-gast-grid .gg-card-toggle,
.dash-gast-grid .gg-card-open,
.dash-gast-grid .gg-phase { min-height: var(--touch-ziel); }
}
.dash-gast-grid .gg-phase {
appearance: none;
background: var(--color-surface);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-sm);
padding: var(--space-1-5) var(--space-2-5);
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
display: flex;
flex-direction: column;
gap: var(--space-1);
transition: border-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft);
}
.dash-gast-grid .gg-phase:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: -2px;
}
.dash-gast-grid .gg-phase:hover {
border-color: var(--color-brand);
box-shadow: 0 1px 4px color-mix(in srgb, var(--lod-darkblue-900) 6%, transparent);
}
.gg-phase-head {
display: flex;
align-items: center;
gap: var(--space-1-5);
justify-content: space-between;
}
.gg-phase-name {
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold, 600);
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.gg-phase-status {
font-size: var(--font-size-xs);
padding: var(--space-px) var(--space-1-5);
border-radius: var(--radius-circular);
background: var(--color-bg-muted);
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.gg-phase-bar {
height: 3px;
background: var(--color-border-light);
border-radius: var(--radius-xxs);
overflow: hidden;
}
.gg-phase-bar-fill {
height: 100%;
background: var(--color-brand);
transition: width var(--duration-normal) var(--ease-soft);
}
.gg-phase-meta {
display: flex;
justify-content: space-between;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.gg-phase-pct {
font-weight: var(--fw-semibold, 600);
}
.gg-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-8) var(--space-4);
text-align: center;
}
.gg-empty-ico {
display: inline-flex;
width: 40px; height: 40px;
opacity: 0.35;
margin-bottom: var(--space-2);
}
.gg-empty-ico img { width: 100%; height: 100%; }
.gg-empty-title {
font-size: var(--font-size-base);
font-weight: var(--fw-semibold, 600);
color: var(--color-text-primary);
}
.gg-empty-msg {
font-size: 13px;
color: var(--color-text-muted);
max-width: 360px;
}
@media (max-width: 1399px) and (min-width: 1000px) {
.dash-gast-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 999px) {
.dash-gast-grid,
.dash-gast-grid.gg-cols-3,
.dash-gast-grid.gg-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
.dash-gast-grid,
.dash-gast-grid.gg-cols-2,
.dash-gast-grid.gg-cols-3,
.dash-gast-grid.gg-cols-4 { grid-template-columns: 1fr; }
}
/*== /styles/domain/dashboard/attention-banner.css ==*/
.attention-banner {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.attention-banner.is-empty { display: none; }
.attention-banner .ab-rows {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.attention-banner .ab-row {
display: grid;
grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3-5);
padding: 0;
}
.attention-banner .ab-row-bar {
height: 8px;
background: var(--color-border-light);
border-radius: var(--radius-circular);
overflow: hidden;
order: 1;
}
.attention-banner .ab-row-bar-fill {
height: 100%;
background: var(--status-warning-fg);
border-radius: var(--radius-circular);
transition: width var(--duration-relaxed) var(--ease-soft);
}
.attention-banner .ab-row-label {
font-size: 13px;
color: var(--color-text-primary);
order: 2;
min-width: 0;
}
.attention-banner .ab-row-label strong {
font-weight: var(--fw-semibold, 600);
color: var(--status-warning-fg);
}
.attention-banner .ab-row-cta {
appearance: none;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 5px var(--space-3);
font-size: 12px;
color: var(--color-text-primary);
font-weight: var(--fw-medium, 500);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-1);
white-space: nowrap;
transition: border-color var(--duration-quick) var(--ease-soft), background var(--duration-quick) var(--ease-soft), color var(--duration-quick) var(--ease-soft);
font-family: inherit;
order: 3;
justify-self: end;
}
.attention-banner .ab-row-cta:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: -2px;
}
.attention-banner .ab-row-cta:hover {
border-color: var(--color-brand);
color: var(--color-brand);
background: var(--color-bg-muted);
}
.attention-banner .ab-row-cta img { opacity: 0.6; }
@media (max-width: 999px) {
.attention-banner .ab-row {
grid-template-columns: 1fr auto;
gap: var(--space-2);
}
.attention-banner .ab-row-bar { grid-column: 1 / -1; }
}
/*== /styles/domain/dashboard/assignee-grid.css ==*/
.dash-assignee-list {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
}
.dash-assignee-list[data-ag-size="card-large"] {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: min-content;
align-content: start;
gap: var(--space-2);
}
.dash-assignee-list .dash-asg-card {
appearance: none;
background: var(--color-surface);
border: 1px solid var(--color-border-light);
border-left: 3px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-2-5) var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-2);
cursor: pointer;
text-align: left;
font-family: inherit;
transition: box-shadow var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft);
width: 100%;
overflow: visible;
min-height: 0;
}
.dash-assignee-list .dash-asg-card:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: -2px;
}
.dash-assignee-list .dash-asg-card:hover {
box-shadow: 0 2px 10px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
}
.dash-assignee-list .dash-asg-card.dash-asg-card--warn {
border-left-color: var(--status-warning-fg);
}
.dash-assignee-list .dash-asg-card-head {
display: flex;
align-items: center;
gap: var(--space-2-5);
min-width: 0;
}
.dash-assignee-list .dash-asg-card-avatar {
width: 32px; height: 32px;
flex-shrink: 0;
display: inline-flex;
}
.dash-assignee-list .dash-asg-card-avatar img {
width: 32px !important;
height: 32px !important;
border-radius: 50%;
}
.dash-assignee-list .dash-asg-card-text {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-px);
}
.dash-assignee-list .dash-asg-card-name {
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-assignee-list .dash-asg-card-sub {
font-size: 11px;
color: var(--color-text-muted);
line-height: 1.3;
}
.dash-assignee-list .dash-asg-card-chips {
display: flex;
gap: var(--space-1);
}
.dash-assignee-list .dash-asg-card-chip {
flex: 1;
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: var(--space-1);
padding: 3px var(--space-2);
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: var(--fw-semibold);
white-space: nowrap;
line-height: 1.4;
}
.dash-assignee-list .dash-asg-card-chip strong {
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.dash-assignee-list .dash-asg-card-chip--info { background: color-mix(in srgb, var(--brand-default) 10%, transparent); color: var(--color-brand); }
.dash-assignee-list .dash-asg-card-chip--danger { background: rgba(193, 55, 92, 0.12); color: var(--status-danger-fg); }
.dash-assignee-list .dash-asg-card-chip--muted { background: var(--color-bg-muted); color: var(--color-text-muted); }
.dash-assignee-list .dash-asg-row {
display: grid;
grid-template-columns: 32px minmax(110px, 1.4fr) minmax(0, 2fr) auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-md);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
width: 100%;
transition: background var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft);
}
.dash-assignee-list .dash-asg-row:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: -2px;
}
.dash-assignee-list .dash-asg-row:hover {
background: var(--color-bg-muted);
border-color: var(--color-border-light);
}
.dash-assignee-list .dash-asg-row-avatar {
display: inline-flex;
width: 32px; height: 32px;
flex-shrink: 0;
}
.dash-assignee-list .dash-asg-row-avatar img {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
}
.dash-assignee-list .dash-asg-row-text { min-width: 0; display: flex; flex-direction: column; gap: var(--space-px); }
.dash-assignee-list .dash-asg-row-name {
font-size: 13px;
font-weight: var(--fw-semibold, 600);
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-assignee-list .dash-asg-row-sub {
font-size: 11px;
color: var(--color-text-muted);
}
.dash-assignee-list .dash-asg-row-bar { min-width: 0; }
.dash-assignee-list .dash-asg-row-bar-track {
display: flex;
height: 6px;
background: var(--color-border-light);
border-radius: var(--radius-circular);
overflow: hidden;
}
.dash-assignee-list .dash-asg-row-bar-fill {
height: 100%;
transition: width var(--duration-relaxed) var(--ease-soft);
}
.dash-assignee-list .dash-asg-row-bar-fill--overdue { background: var(--status-danger-fg); }
.dash-assignee-list .dash-asg-row-bar-fill--offen { background: var(--color-brand); opacity: 0.55; }
.dash-assignee-list .dash-asg-row-stats {
display: flex;
gap: var(--space-3-5);
flex-shrink: 0;
}
.dash-assignee-list .dash-asg-row-stat {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-px);
}
.dash-assignee-list .dash-asg-row-stat-val {
font-size: var(--font-size-md);
font-weight: var(--fw-bold, 700);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.dash-assignee-list .dash-asg-row-stat-val--info { color: var(--color-brand); }
.dash-assignee-list .dash-asg-row-stat-val--overdue { color: var(--status-danger-fg); }
.dash-assignee-list .dash-asg-row-stat-val--muted { color: var(--color-text-muted); }
.dash-assignee-list .dash-asg-row-stat-lbl {
font-size: 9px;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: var(--fw-medium, 500);
}
.dash-asg-empty {
padding: var(--space-6) var(--space-3);
text-align: center;
color: var(--color-text-muted);
font-size: 13px;
}
@media (max-width: 599px) {
.dash-assignee-list .dash-asg-row {
grid-template-columns: 28px minmax(80px, 1fr) auto;
gap: var(--space-2);
}
.dash-assignee-list .dash-asg-row-bar { display: none; }
}
@media (max-width: 1399px) and (min-width: 1000px) {
.dash-assignee-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 999px) {
.dash-assignee-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
.dash-assignee-grid { grid-template-columns: 1fr; }
.dash-asg-stat-val { font-size: 17px; }
}
/*== /styles/domain/dashboard/pressure-monitor.css ==*/
.dash-pressure { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.pm-section { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.pm-section-head { display: inline-flex; align-items: center; gap: var(--space-2, 8px); font-size: var(--fs-caption); }
.pm-section-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--color-text-muted); }
.pm-section-dot--overdue { background: var(--status-danger-fg); }
.pm-section-dot--warning { background: var(--status-warning-fg); }
.pm-section-dot--success { background: var(--status-success-fg); }
.pm-section-title { font-weight: var(--fw-semibold, 600); color: var(--color-text-primary); }
.pm-section-count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.dash-pressure .pm-item {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-3, 12px);
align-items: center;
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border);
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
transition: border-color var(--duration-snappy) var(--ease-soft), box-shadow var(--duration-snappy) var(--ease-soft), transform var(--duration-snappy) var(--ease-soft), background var(--duration-snappy) var(--ease-soft);
box-sizing: border-box;
}
.dash-pressure .pm-item:focus-visible {
outline: 2px solid var(--lod-turquoise);
outline-offset: -2px;
}
.dash-pressure .pm-item:hover {
background: var(--color-surface);
box-shadow: 0 2px 10px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
transform: translateY(-1px);
border-color: var(--lod-darkblue-300);
}
.dash-pressure .pm-item:active { transform: translateY(0); }
.dash-pressure .pm-item[data-tone="overdue"] { border-left-color: var(--status-danger-fg); }
.dash-pressure .pm-item[data-tone="warning"] { border-left-color: var(--status-warning-fg); }
.dash-pressure .pm-item[data-tone="success"] { border-left-color: var(--status-success-fg); }
.dash-pressure .pm-item[data-tone="info"] { border-left-color: var(--brand-default); }
.pm-item-text { display: flex; flex-direction: column; gap: var(--space-xxs); min-width: 0; }
.pm-item-title { font-size: var(--fs-caption); font-weight: var(--fw-semibold, 600); color: var(--color-text-primary); }
.pm-item-badges { display: inline-flex; gap: var(--space-1, 4px); flex-wrap: wrap; }
.pm-item-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5); }
.pm-meta-avatar { display: inline-flex; align-items: center; flex-shrink: 0; }
.pm-meta-avatar img,
.pm-meta-avatar .avatar { width: 16px !important; height: 16px !important; border-radius: 50%; }
.pm-meta-name { font-weight: 500; color: var(--lod-darkblue); }
.pm-meta-sep { color: var(--lod-gray-400); }
.pm-meta-tasks { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.pm-meta-tasks img { opacity: 0.6; }
.pm-badge { display: inline-block; padding: var(--space-px) var(--space-2, 8px); border-radius: var(--radius-circular); font-size: var(--font-size-xs); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.pm-badge--overdue { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: transparent; }
.pm-badge--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: transparent; }
.pm-badge--info { background: var(--status-info-bg); color: var(--status-info-fg); border-color: transparent; }
.pm-item-value { font-size: var(--fs-caption); font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums; }
.pm-item-value--overdue { color: var(--status-danger-fg); }
.pm-item-value--warning { color: var(--status-warning-fg); }
/*== /styles/domain/dashboard/assignee-load.css ==*/
.dash-assignee { display: flex; flex-direction: column; gap: var(--space-1, 4px); }
.dash-assignee.dash-assignee--scroll {
scrollbar-gutter: stable;
}
.dash-assignee .al-row { display: grid; grid-template-columns: 32px minmax(120px, 1fr) auto; align-items: center; gap: var(--space-2, 8px); padding: var(--space-2, 8px); border-radius: var(--radius-sm); background: transparent; border: none; text-align: left; width: 100%; font-family: inherit; color: inherit; }
.dash-assignee .al-row.is-clickable { cursor: default; }
.dash-assignee .al-row.is-clickable:hover { background: var(--color-bg-muted); }
.dash-assignee .al-row .al-row-trigger {
display: contents;
cursor: inherit;
}
.dash-assignee .al-row.is-clickable .al-row-trigger {
cursor: pointer;
}
.dash-assignee .al-row .al-chip,
.dash-assignee .al-row .al-block {
appearance: none;
-webkit-appearance: none;
border: none;
font-family: inherit;
}
.dash-assignee .al-row .al-chip.is-clickable,
.dash-assignee .al-row .al-block.is-clickable {
cursor: pointer;
transition: filter var(--duration-quick), transform var(--duration-instant);
}
.dash-assignee .al-row .al-chip.is-clickable:hover,
.dash-assignee .al-row .al-block.is-clickable:hover {
filter: brightness(0.95);
transform: translateY(-1px);
}
.dash-assignee .al-row .al-chip.is-clickable:active,
.dash-assignee .al-row .al-block.is-clickable:active {
transform: translateY(0);
}
.dash-assignee .al-row--overdue { box-shadow: inset 3px 0 0 0 var(--status-danger-fg); }
.dash-assignee .al-row--warning { box-shadow: inset 3px 0 0 0 var(--status-warning-fg); }
.al-row-name { font-size: var(--fs-caption); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-row-chips { display: inline-flex; gap: var(--space-1, 4px); flex-wrap: wrap; justify-content: flex-end; }
.dash-assignee .al-chip,
.al-chip { display: inline-flex; align-items: center; gap: var(--space-1, 4px); padding: var(--space-xxs) var(--space-2, 8px); border-radius: var(--radius-circular); font-size: var(--font-size-xs); background: var(--color-bg-muted); color: var(--color-text-secondary); }
.al-chip-val { font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums; }
.dash-assignee .al-chip--overdue,
.al-chip--overdue { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.dash-assignee .al-chip--warning,
.al-chip--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.dash-assignee .al-chip--info,
.al-chip--info { background: var(--status-info-bg); color: var(--status-info-fg); }
.dash-assignee .al-chip--muted,
.al-chip--muted { background: transparent; color: var(--color-text-muted); }
.dash-assignee .al-row--blocks { grid-template-columns: 32px minmax(140px, 1.4fr) minmax(0, 5fr); }
.dash-assignee .al-row--blocks .al-row-chips {
display: grid;
grid-template-columns: repeat(var(--al-block-cols, 6), minmax(0, 1fr));
gap: var(--space-1);
justify-content: end;
}
.dash-assignee .al-block,
.al-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xxs);
padding: var(--space-1-5) var(--space-1);
border-radius: var(--radius-md);
background: var(--color-bg-muted);
color: var(--color-text-secondary);
min-width: 0;
text-align: center;
line-height: 1.1;
}
.al-block-val { font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums; font-size: 13px; }
.al-block-lbl {
font-size: 10.5px; opacity: 0.85; max-width: 100%;
white-space: normal; overflow-wrap: anywhere; hyphens: auto;
}
.dash-assignee .al-block--overdue,
.al-block--overdue { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.dash-assignee .al-block--warning,
.al-block--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.dash-assignee .al-block--info,
.al-block--info { background: var(--status-info-bg); color: var(--status-info-fg); }
.dash-assignee .al-block--success,
.al-block--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.dash-assignee .al-block--muted,
.al-block--muted { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.dash-assignee .al-block--default,
.al-block--default { background: var(--lod-darkblue-100); color: var(--lod-darkblue); }
.al-avatar-fallback { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-muted); color: var(--color-text-muted); border-radius: 50%; font-size: 11px; font-weight: var(--fw-semibold, 600); }
@media (max-width: 599px) {
.dash-assignee .al-row--blocks {
grid-template-columns: 32px minmax(0, 1fr);
row-gap: var(--space-1-5);
}
.dash-assignee .al-row--blocks .al-row-chips {
grid-column: 1 / -1;
}
}
/*== /styles/domain/dashboard/gast-list.css ==*/
.dash-gast-list .gl-rows { display: flex; flex-direction: column; gap: var(--space-1, 4px); }
.dash-gast-list .gl-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2, 8px); padding: var(--space-2, 8px); border-radius: var(--radius-sm); background: transparent; border: none; text-align: left; width: 100%; font-family: inherit; color: inherit; }
.dash-gast-list .gl-row.is-clickable { cursor: pointer; }
.dash-gast-list .gl-row.is-clickable:hover { background: var(--color-bg-muted); }
.gl-row-name { font-size: var(--fs-caption); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-row-value { font-size: var(--fs-caption); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/*== /styles/sections/mein-bereich/mein-bereich.css ==*/
#tab-content-mein-bereich,
#tab-content-gast-mein-bereich { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
#tab-content-mein-bereich.hidden,
#tab-content-gast-mein-bereich.hidden { display: none; }
.ich-tablist { display: none; }
.ich-tablist--single { display: none; }
.ich-tabpanel { min-height: 0; flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.ich-tabpanel.hidden { display: none; }
.ich-ub-wrap { padding: var(--space-6); flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ich-card {
background: var(--surface-bg);
border: var(--surface-border);
border-radius: var(--surface-radius);
box-shadow: var(--surface-shadow);
margin-bottom: var(--space-4);
}
.ich-card--full { margin-bottom: 0; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.ich-card-header {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-light);
}
.ich-card-title { font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; }
.ich-card-body { padding: var(--space-3) var(--space-4); }
.ich-card-body--scroll {
overflow-y: auto;
max-height: 320px;
flex: 1;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--color-border-hover) transparent;
}
.ich-card-body--scroll::-webkit-scrollbar { width: 6px; }
.ich-card-body--scroll::-webkit-scrollbar-track { background: transparent; }
.ich-card-body--scroll::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-pill);
}
.ich-card-body--scroll:hover::-webkit-scrollbar-thumb { background: var(--color-border-hover); }
.ich-ub-grid {
display: grid;
grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
gap: var(--space-4);
flex: 1;
min-height: 0;
grid-auto-rows: minmax(0, 1fr);
}
.ich-ub-left {
display: flex;
flex-direction: column;
min-height: 0;
gap: var(--space-4);
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.ich-ub-left > .ich-card { margin-bottom: 0; }
.ich-ub-left .ich-card.ich-card--antraege {
flex: 1;
display: flex;
flex-direction: column;
min-height: 240px;
margin-bottom: 0;
overflow: hidden;
}
.ich-ub-left .ich-card.ich-card--antraege .ich-card-body--scroll {
display: block;
flex: 1;
min-height: 0;
max-height: none;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
}
.ich-ub-left .ich-card.ich-card--antraege .subgrid-header {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
position: sticky;
top: 0;
z-index: 2;
background: var(--color-surface);
padding: var(--space-3) var(--space-4) var(--space-2);
gap: var(--space-2);
border-bottom: 1px solid var(--color-border-light);
}
.ich-ub-left .ich-card.ich-card--antraege .subgrid-filters {
max-width: 100%;
box-sizing: border-box;
overflow-x: auto;
scrollbar-width: none;
}
.ich-ub-left .ich-card.ich-card--antraege .subgrid-filters::-webkit-scrollbar { display: none; }
.ich-ub-left .ich-card.ich-card--antraege [data-subgrid-body] {
padding: var(--space-2) var(--space-4);
}
.ich-ub-left .ich-card.ich-card--antraege .subgrid-rows {
grid-template-columns: minmax(0, 1fr);
}
.ich-ub-mid {
display: flex;
flex-direction: column;
min-height: 0;
gap: var(--space-4);
grid-column: 2;
grid-row: 1 / span 2;
}
.ich-ub-right {
display: flex;
flex-direction: column;
min-height: 0;
gap: var(--space-4);
grid-column: 1;
overflow: hidden;
height: 100%;
}
.ich-ub-right #ich-team-events { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ich-ub-right #ich-team-events .te-card { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ich-ub-right #ich-team-events .te-list {
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-border-hover) transparent;
}
.ich-ub-right #ich-team-events .te-list::-webkit-scrollbar { width: 6px; }
.ich-ub-right #ich-team-events .te-list::-webkit-scrollbar-track { background: transparent; }
.ich-ub-right #ich-team-events .te-list::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-pill);
}
@media (min-width: 1400px) {
.ich-ub-grid {
grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(260px, 360px);
}
.ich-ub-left { grid-column: 1; grid-row: 1; }
.ich-ub-mid { grid-column: 2; grid-row: 1; }
.ich-ub-right { grid-column: 3; grid-row: 1; }
}
.ich-card-body--kal { min-height: 0; overflow: inherit; flex: 1; }
.ich-card--full > .ich-card-header { flex-shrink: 0; }
@media (max-width: 1399px) {
.ich-ub-grid { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
}
@media (max-width: 999px) {
.ich-tabpanel { overflow-y: auto; }
.ich-ub-wrap { padding: var(--space-3); overflow: visible; flex: none; }
.ich-ub-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
.ich-ub-left,
.ich-ub-mid,
.ich-ub-right { grid-column: 1; grid-row: auto; overflow: visible; max-height: none; height: auto; }
.ich-ub-right { display: none; }
.ich-card--full { height: auto; }
.ich-ub-mid { min-height: auto; }
.ich-card-body--kal { overflow-y: visible; }
}
@media (max-width: 599px) {
.ich-tabpanel { overflow-x: hidden; }
.ich-ub-wrap { padding: var(--space-3); overflow-x: hidden; max-width: 100%; box-sizing: border-box; }
.ich-ub-grid { gap: var(--space-2); max-width: 100%; }
.ich-ub-grid > * { min-width: 0; max-width: 100%; }
.ich-card { border-radius: var(--radius-md); overflow: hidden; min-width: 0; }
.ich-card-header { padding: var(--space-2) var(--space-3); }
.ich-card-body { padding: var(--space-2) var(--space-3); }
.bm-modal--sm { width: 100vw; max-width: 100vw; border-radius: 0; }
}
/*== /styles/sections/mein-bereich/mb-hero.css ==*/
.ich-hero {
display: grid;
grid-template-columns: auto minmax(180px, max-content) minmax(0, 1fr);
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
margin-bottom: var(--space-4);
}
.ich-hero-greeting { min-width: 0; }
.ich-hero-greeting-line { font-size: var(--font-size-xl); color: var(--color-text); line-height: 1.2; }
.ich-hero-greeting-line strong { font-weight: var(--fw-semibold); }
.ich-hero-date { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.ich-hero-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
justify-content: flex-end;
}
.ich-hero-btn-label { margin-left: var(--space-1); }
.ich-akte-hinweis { margin-top: var(--space-2); }
.ich-hero-act-gefaltet { display: none; }
.ich-hero-btn-akte {
background: var(--action-teal);
border-color: var(--action-teal);
color: var(--brand-text-on);
}
.ich-hero-btn-akte:hover {
background: color-mix(in srgb, var(--action-teal) 80%, #000);
border-color: color-mix(in srgb, var(--action-teal) 80%, #000);
}
.ich-hero-btn-akte .ui-ico img { filter: brightness(0) invert(1); }
.ich-persona-card {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 48px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
margin-bottom: 0;
}
.ich-persona-avatar { flex-shrink: 0; }
.ich-persona-text { min-width: 0; }
.ich-persona-name { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); color: var(--color-text); line-height: 1.3; }
.ich-persona-pos { font-size: var(--font-size-base); color: var(--color-text-secondary); margin-top: var(--space-xxs); }
.ich-persona-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-xxs); }
@media (max-width: 999px) {
.ich-persona-card { padding: var(--space-3); }
.ich-persona-name { font-size: var(--font-size-base); }
.ich-hero { grid-template-columns: 1fr; }
.ich-hero-actions { justify-content: flex-start; }
}
@media (max-width: 599px) {
.ich-persona-card {
padding: var(--space-3);
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-2);
}
.ich-persona-avatar { width: 96px; height: 96px; }
.ich-persona-avatar > .avatar {
width: 96px !important;
height: 96px !important;
font-size: var(--font-size-xxl, 28px) !important;
}
.ich-hero {
grid-template-columns: 1fr;
gap: var(--space-3);
padding: var(--space-3);
max-width: 100%;
box-sizing: border-box;
}
.ich-hero-greeting {
text-align: center;
min-width: 0;
}
.ich-hero-greeting-line { font-size: var(--font-size-lg); }
.ich-hero-actions {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: var(--space-2);
justify-content: stretch;
width: 100%;
}
.ich-hero-actions .btn {
font-size: var(--font-size-sm);
min-height: 64px;
width: 100%;
height: 100%;
line-height: 1.2;
justify-content: center;
}
}
/*== /styles/sections/mein-bereich/mb-team-events.css ==*/
.te-card {
display: flex;
flex-direction: column;
min-height: 0;
}
.te-card-head {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-light);
flex-shrink: 0;
}
.te-card-title { font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; flex: 1; }
.te-card-count {
font-size: var(--fs-badge);
color: var(--color-text-muted);
background: var(--color-bg-selected);
padding: var(--space-xxs) var(--space-2);
border-radius: var(--radius-full);
font-weight: var(--fw-medium);
}
.te-empty { padding: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }
.te-list {
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
flex: 1;
min-height: 0;
}
.te-row {
display: grid;
grid-template-columns: 28px 32px 1fr auto;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-bottom: 1px solid var(--color-border-light);
}
.te-row:last-child { border-bottom: none; }
.te-row-icon { display: flex; align-items: center; justify-content: center; }
.te-row--birthday .te-row-icon img { filter: hue-rotate(280deg); }
.te-row-avatar { display: flex; align-items: center; justify-content: center; }
.te-row-text { min-width: 0; }
.te-row-name { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-row-sub { font-size: var(--fs-badge); color: var(--color-text-muted); margin-top: var(--space-px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-row-when { flex-shrink: 0; }
.te-pill {
display: inline-block;
padding: var(--space-xxs) var(--space-2);
border-radius: var(--radius-full);
font-size: var(--fs-badge);
font-weight: var(--fw-medium);
background: var(--color-bg-selected);
color: var(--color-text-secondary);
white-space: nowrap;
}
.te-pill--today { background: var(--status-success-bg); color: var(--status-success-fg); }
.te-pill--soon { background: var(--status-info-bg); color: var(--status-info-fg); }
.te-pill--later { background: transparent; color: var(--color-text-muted); }
/*== /styles/sections/mein-bereich/mb-vollansichten.css ==*/
.mbv-scope { display: block; height: auto; }
.mbv-toolbar-bar {
position: sticky;
top: 0;
z-index: 5;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.mbv-toolbar-bar:has(> .mbv-toolbar:empty) { display: none; }
.mbv-toolbar { max-width: 1080px; margin: 0 auto; }
.mbv-body { max-width: 1080px; margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-8); }
.app-scope.mbv-scope [data-tb-tier] .app-search-input { flex-basis: 300px; }
.app-scope.mbv-scope [data-tb-tier] .cs-trigger {
max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-benachr-view--posteingang { display: block; }
.mb-benachr-view--einstellungen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mb-benachr-view.hidden { display: none; }
.mba-list { display: flex; flex-direction: column; gap: var(--space-4); }
.mba-list .gl-group-cards { display: flex; flex-direction: column; gap: var(--space-2-5); }
.mba-list .notif-event-item {
grid-template-columns: 40px 1fr auto;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
transition: background var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.mba-list .notif-prio-normal,
.mba-list .notif-prio-low { display: none; }
.mba-list .notif-event-item:hover {
border-color: var(--brand-default);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.mba-list .notif-event-item.is-unread {
background: var(--color-bg-subtle);
box-shadow: inset 3px 0 0 var(--notif-accent, var(--brand-default)), 0 1px 2px rgba(0, 0, 0, 0.03);
}
.mba-list .notif-event-indicator { display: none; }
.mba-list .notif-event-icon {
width: 40px; height: 40px; margin-top: 0; opacity: 1;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--notif-accent, var(--color-text-muted)) 16%, var(--color-surface));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--notif-accent, var(--color-text-muted)) 26%, transparent);
}
.mba-list .notif-event-icon img { display: none; }
.mba-list .notif-event-icon::after {
content: '';
width: 18px; height: 18px;
background-color: var(--notif-accent, var(--color-text-muted));
-webkit-mask: var(--notif-icon) center / 18px 18px no-repeat;
mask: var(--notif-icon) center / 18px 18px no-repeat;
}
.mba-list .notif-event-title { white-space: normal; font-size: var(--font-size-base); }
.mba-list .notif-event-desc {
white-space: normal; overflow: visible;
font-size: var(--font-size-sm); line-height: 1.45; margin-top: var(--space-1);
}
.mba-list .notif-event-aside { min-width: 56px; }
.mba-more {
display: block;
width: 100%;
margin-top: var(--space-2);
padding: var(--space-2-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--brand-default);
cursor: pointer;
transition: background var(--duration-fast);
}
.mba-more:hover { background: var(--color-bg-subtle); }
@media (max-width: 999px) {
.mba-more { min-height: var(--touch-ziel); }
}
#mb-neuigkeiten-content .mbv-toolbar,
#mb-neuigkeiten-content .mbv-body { max-width: 1060px; }
#mb-neuigkeiten-content .mbv-toolbar { padding-left: var(--space-6); padding-right: var(--space-6); }
#mb-neuigkeiten-content { --mb-nv-railtop: 64px; --mb-nv-railmax: 60vh; }
.mb-nv-layout {
display: grid;
grid-template-columns: 216px minmax(0, 1fr);
gap: var(--space-7);
align-items: start;
}
.mb-nv-main { min-width: 0; max-width: 760px; }
.mb-nv-rail { position: sticky; top: var(--mb-nv-railtop); align-self: start; min-width: 0; }
.mb-nv-rail-scroll {
display: flex; flex-direction: column; gap: var(--space-4);
max-height: var(--mb-nv-railmax);
overflow-y: auto;
--kleb-versatz: var(--space-4);
padding: var(--kleb-versatz);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--surface-radius);
box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04);
}
.mb-nv-railgruppe { display: flex; flex-direction: column; gap: var(--space-2); }
.mb-nv-raillabel {
font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--color-text-muted);
}
.mb-nv-seg {
display: flex; gap: var(--space-px);
padding: var(--space-px);
background: var(--color-bg-subtle);
border-radius: var(--radius-md);
}
.app-scope .mb-nv-segbtn {
flex: 1 1 0; min-width: 0;
padding: var(--space-1-5) var(--space-1);
border: none; background: transparent;
border-radius: var(--radius-sm);
font-family: var(--font-sans); font-size: var(--font-size-sm);
color: var(--color-text-secondary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
cursor: pointer;
transition: background var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}
.app-scope .mb-nv-segbtn:hover { color: var(--color-text); }
.app-scope .mb-nv-segbtn:focus-visible { outline: 2px solid var(--brand-default); outline-offset: -2px; }
.app-scope .mb-nv-segbtn.is-active {
background: var(--color-surface);
color: var(--color-text);
font-weight: var(--fw-semibold);
box-shadow: 0 1px 2px rgba(20, 20, 30, 0.10);
}
.mb-nv-achse { display: flex; flex-direction: column; gap: var(--space-1); }
.mb-nv-monat { display: flex; flex-direction: column; }
.app-scope .mb-nv-monatkopf {
position: sticky; top: calc(-1 * var(--kleb-versatz, 0px));
z-index: 1;
display: flex; align-items: center; gap: var(--space-1-5);
width: 100%;
padding: var(--space-1-5) var(--space-1);
border: none;
background: var(--color-surface);
font-family: var(--font-sans);
cursor: pointer;
}
.app-scope .mb-nv-monatkopf:focus-visible { outline: 2px solid var(--brand-default); outline-offset: -2px; }
.mb-nv-monatpfeil {
flex-shrink: 0; width: 12px; height: 12px;
background-color: var(--color-text-muted);
-webkit-mask: url(/assets/icons/fluent/chevron_down_24_regular.svg) center / 12px 12px no-repeat;
mask: url(/assets/icons/fluent/chevron_down_24_regular.svg) center / 12px 12px no-repeat;
transition: transform var(--duration-fast);
}
.mb-nv-monat.is-zu .mb-nv-monatpfeil { transform: rotate(-90deg); }
.mb-nv-monatname {
flex: 1 1 auto; min-width: 0;
text-align: left;
font-size: var(--fs-badge); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--color-text-secondary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-nv-monatzahl {
flex-shrink: 0;
font-size: var(--fs-badge); font-variant-numeric: tabular-nums;
color: var(--color-text-tertiary);
}
.mb-nv-monattage { display: flex; flex-direction: column; padding-left: var(--space-4); }
.mb-nv-monat.is-zu .mb-nv-monattage { display: none; }
.app-scope .mb-nv-tag {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
width: 100%;
padding: var(--space-1) var(--space-2);
border: none; border-left: 2px solid transparent;
background: transparent;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-family: var(--font-sans); font-size: var(--font-size-sm);
color: var(--color-text-secondary);
cursor: pointer;
transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.app-scope .mb-nv-tag:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.app-scope .mb-nv-tag:focus-visible { outline: 2px solid var(--brand-default); outline-offset: -2px; }
.app-scope .mb-nv-tag.is-active {
border-left-color: var(--brand-default);
background: var(--brand-light);
color: var(--brand-default);
font-weight: var(--fw-semibold);
}
.mb-nv-tagnr { font-variant-numeric: tabular-nums; }
.mb-nv-tagzahl { font-size: var(--fs-badge); font-variant-numeric: tabular-nums; color: var(--color-text-tertiary); }
.app-scope .mb-nv-tag.is-active .mb-nv-tagzahl { color: var(--brand-default); }
#mb-neuigkeiten-content .mb-nv-filterrow {
display: flex; align-items: center; gap: var(--space-3);
margin: 0 0 var(--space-5);
}
#mb-neuigkeiten-content .mb-nv-searchbar {
flex: 1 1 auto !important; min-width: 0 !important;
width: auto !important; max-width: none !important;
margin: 0;
}
.mb-nv-fsel { flex: 0 0 auto; }
.mb-nv-fsel .cs-wrap { width: 100%; flex: none; }
.mb-nv-fsel--modul { width: 180px; }
.mb-nv-fsel--ziel { width: 156px; }
.mb-nv-feed.cl-feed { display: flex; flex-direction: column; gap: var(--space-4); }
.mb-nv-feed .cl-version {
position: relative;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--surface-radius);
padding: var(--space-5) var(--space-6);
box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 12px 28px -16px rgba(20, 20, 30, 0.16);
transition: box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.mb-nv-feed .cl-version:hover {
box-shadow: 0 1px 2px rgba(20, 20, 30, 0.05), 0 20px 40px -18px rgba(20, 20, 30, 0.24);
}
.mb-nv-feed .cl-version--new { border-color: color-mix(in srgb, var(--brand-default) 26%, var(--color-border)); }
.mb-nv-feed .cl-version--new::before {
content: ''; position: absolute; left: 0; top: var(--space-5); bottom: var(--space-5);
width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-default);
}
.mb-nv-feed .cl-version-meta { margin-bottom: var(--space-1-5); padding-right: var(--space-8); }
.mb-nv-feed .cl-version-date {
font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.mb-nv-feed .cl-version--new .cl-version-date { color: var(--brand-default); }
.mb-nv-feed .cl-version-titel { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); letter-spacing: -0.022em; }
.mb-nv-feed .cl-list { margin-top: var(--space-3); gap: var(--space-2); }
.mb-nv-feed .cl-entry { gap: var(--space-3); }
.mb-nv-feed .cl-entry-badge { font-size: 10.5px; margin-top: 2px; }
.mb-nv-feed .cl-entry-ico { width: 14px; height: 14px; -webkit-mask-size: 14px 14px; mask-size: 14px 14px; }
.mb-nv-feed .cl-entry-text { font-size: var(--font-size-base); line-height: 1.62; }
.mb-nv-feed .cl-entry-modul { display: inline-block; padding-top: 4px; }
.mb-nv-feed .cl-entry--kompakt {
position: relative;
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-2);
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.mb-nv-feed .cl-entry--kompakt:hover { background: var(--color-bg-subtle); }
.mb-nv-feed .cl-entry--kompakt.is-offen {
background: var(--color-surface);
border-color: var(--color-border);
}
.mb-nv-feed .cl-entry--ganz { cursor: default; }
.mb-nv-feed .cl-entry--ganz:hover { background: transparent; }
.mb-nv-feed .cl-entry--kompakt .cl-entry-kurz {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden;
font-size: var(--font-size-sm); line-height: 1.5;
}
.mb-nv-feed .cl-entry--kompakt.is-offen .cl-entry-kurz { display: none; }
.mb-nv-feed .cl-entry--kompakt::after {
content: '';
position: absolute; top: var(--space-3); right: var(--space-2);
width: 14px; height: 14px;
background-color: var(--color-text-tertiary);
-webkit-mask: url(/assets/icons/fluent/chevron_down_24_regular.svg) center / 14px 14px no-repeat;
mask: url(/assets/icons/fluent/chevron_down_24_regular.svg) center / 14px 14px no-repeat;
transition: transform var(--duration-fast);
}
.mb-nv-feed .cl-entry--kompakt.is-offen::after { transform: rotate(180deg); }
.mb-nv-feed .cl-entry--ganz::after { display: none; }
.mb-nv-feed .cl-entry-voll {
font-size: var(--font-size-base); line-height: 1.62;
color: var(--color-text);
overflow-wrap: anywhere;
}
.mb-nv-feed .cl-copy {
display: inline-flex; align-items: center; justify-content: center;
position: absolute; top: var(--space-4); right: var(--space-4);
width: 30px; height: 30px; padding: 0;
border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer;
color: var(--color-text-muted); opacity: 0;
transition: opacity var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.mb-nv-feed .cl-version:hover .cl-copy,
.mb-nv-feed .cl-copy:focus-visible { opacity: 1; }
.mb-nv-feed .cl-copy:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.mb-nv-feed .cl-copy img { width: 16px; height: 16px; display: block; }
.mb-nv-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-base); }
.mb-nv-sentinel { height: 1px; }
@media (prefers-reduced-motion: reduce) {
.mb-nv-feed .cl-version { transition: none; }
.app-scope .mb-nv-segbtn, .app-scope .mb-nv-tag, .mb-nv-monatpfeil,
.mb-nv-feed .cl-entry--kompakt, .mb-nv-feed .cl-entry--kompakt::after { transition: none; }
}
@media (max-width: 1399px) {
.mb-nv-layout { grid-template-columns: 192px minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 1199px) {
#mb-neuigkeiten-content .mbv-toolbar,
#mb-neuigkeiten-content .mbv-body { max-width: 820px; }
.mb-nv-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
.mb-nv-main { max-width: 100%; }
.mb-nv-rail { position: static; margin-bottom: var(--space-4); }
.mb-nv-rail-scroll {
flex-direction: row; align-items: flex-end; flex-wrap: wrap;
gap: var(--space-4);
max-height: none; overflow: visible;
padding: var(--space-3) var(--space-4);
}
.mb-nv-railgruppe { flex: 0 1 auto; min-width: 0; }
.app-scope .mb-nv-seg { flex: 0 0 auto; }
.app-scope .mb-nv-segbtn { flex: 0 0 auto; padding-left: var(--space-3); padding-right: var(--space-3); }
.mb-nv-achse { display: none; }
}
@media (max-width: 999px) {
.mbv-toolbar, .mbv-body { max-width: 100%; }
.mbv-body { padding: var(--space-4) var(--space-4) var(--space-8); }
.app-scope .mb-nv-segbtn { min-height: var(--touch-ziel); }
.mb-nv-feed .cl-entry--kompakt { min-height: var(--touch-ziel); }
}
@media (max-width: 599px) {
.mbv-body { padding: var(--space-3) var(--space-3) var(--space-8); }
.mba-list .notif-event-item { padding: var(--space-3); }
.mb-nv-feed .cl-version { padding: var(--space-4); }
.mb-nv-feed .cl-entry { flex-direction: column; gap: var(--space-1); }
.mb-nv-feed .cl-entry-badge { width: auto; }
.mb-nv-feed .cl-entry-modul { display: none; }
#mb-neuigkeiten-content .mb-nv-filterrow { flex-wrap: wrap; }
#mb-neuigkeiten-content .mb-nv-searchbar { flex: 1 1 100% !important; }
.mb-nv-fsel { flex: 1 1 0; min-width: 0; }
.mb-nv-fsel--modul, .mb-nv-fsel--ziel { width: auto; }
.mb-nv-railgruppe { flex: 1 1 100%; }
.app-scope .mb-nv-seg { flex: 1 1 auto; }
.app-scope .mb-nv-segbtn { flex: 1 1 0; }
}
/*== /styles/sections/mein-bereich/mb-papierkorb.css ==*/
@media (min-width: 600px) {
.cs-wrap:has(> .pk-filter) { flex: 0 0 auto; }
}
.pk-hinweis {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin: 0 0 var(--space-4);
}
.pk-liste .gl-group-cards { display: flex; flex-direction: column; gap: var(--space-2-5); }
.pk-leer { min-height: 0; }
.pk-gekappt {
margin: var(--space-4) 0 0;
padding: var(--space-3) var(--space-4);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.pk-mehr {
display: inline-flex;
margin-top: var(--space-3);
}
.pk-sammel {
position: sticky;
top: var(--pk-toolbar-h, 0px);
z-index: 1;
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
padding: var(--space-2-5) var(--space-4);
border: 1px solid color-mix(in srgb, var(--brand-default) 35%, var(--color-border));
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--brand-default) 6%, var(--color-surface));
}
.pk-sammel:not(.hidden) + * { margin-top: var(--space-3); }
.pk-sammel-alle { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.pk-sammel-zahl { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pk-sammel-aktionen { display: flex; gap: var(--space-2); margin-left: auto; flex-wrap: wrap; }
.pk-item-check {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: var(--touch-ziel);
cursor: pointer;
}
.pk-item {
display: grid;
grid-template-columns: 24px 38px minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.pk-item:hover {
border-color: color-mix(in srgb, var(--brand-default) 40%, var(--color-border));
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.pk-item.ist-gewaehlt {
border-color: var(--brand-default);
background: color-mix(in srgb, var(--brand-default) 4%, var(--color-surface));
}
.pk-item-ico {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-bg-subtle);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.pk-item-ico img { width: 18px; height: 18px; opacity: 0.7; }
.pk-item-text { min-width: 0; }
.pk-item-kopf { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pk-item-titel {
font-weight: var(--fw-medium);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pk-item-art { flex: 0 0 auto; }
.pk-item-zurueck { flex: 0 0 auto; }
.pk-item-meta {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin-top: 2px;
}
.pk-item-gekappt { color: var(--color-warning-fg); font-weight: var(--fw-medium); }
.pk-item-rest { white-space: nowrap; }
.pk-item-rest.ist-knapp { color: var(--color-warning-fg); font-weight: var(--fw-medium); }
.pk-item-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; flex-wrap: wrap; }
.app-scope .pk-entsorgen { color: var(--color-text-muted); }
.app-scope .pk-entsorgen:hover { color: var(--color-danger-fg); }
@media (max-width: 999px) {
.pk-item {
gap: var(--space-2);
grid-template-columns: var(--touch-ziel) 38px minmax(0, 1fr);
align-items: start;
}
.pk-item-check { min-width: var(--touch-ziel); }
.pk-item-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 599px) {
.pk-sammel-aktionen { margin-left: 0; width: 100%; }
.pk-item-kopf { flex-wrap: wrap; }
.pk-item-titel { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.pk-item { transition: none; }
}
/*== /styles/sections/benachrichtigungen/benachrichtigungen.css ==*/
.benachr-wrap {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
background: var(--color-bg);
}
.benachr-header {
position: sticky;
top: 0;
z-index: 5;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
}
.benachr-header-text { flex: 1; min-width: 240px; }
.benachr-header--schlank { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.benachr-header--schlank .benachr-subtitle { margin: 0; }
.benachr-title {
margin: 0 0 var(--space-1);
font-size: var(--font-size-lg);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: 1.2;
}
.benachr-subtitle {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.benachr-header-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.benachr-save-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 var(--space-1-5);
margin-left: var(--space-1);
border-radius: var(--radius-circular);
background: rgba(255, 255, 255, 0.25);
color: var(--brand-text-on);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
line-height: 1;
}
button[disabled] .benachr-save-badge { display: none; }
.benachr-content {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-5) var(--space-6) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-4);
scrollbar-width: thin;
}
.benachr-content::-webkit-scrollbar { width: 10px; }
.benachr-content::-webkit-scrollbar-track { background: transparent; }
.benachr-content::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-circular);
border: 3px solid var(--color-bg);
}
.benachr-content::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }
[data-kat="zugang"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--status-info-fg); --kat-accent-bg: var(--status-info-bg); }
[data-kat="aufgabe"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--lod-amber-700); --kat-accent-bg: var(--lod-amber-50); }
[data-kat="mention"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--lod-violet-700); --kat-accent-bg: var(--lod-violet-50); }
[data-kat="anfrage"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--status-success-fg); --kat-accent-bg: var(--status-success-bg); }
[data-kat="verkaufschance"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--brand-default); --kat-accent-bg: var(--brand-light); }
[data-kat="vertrag"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--status-danger-fg); --kat-accent-bg: var(--status-danger-bg); }
[data-kat="kpi"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--lod-violet-700); --kat-accent-bg: var(--lod-violet-50); }
[data-kat="personal"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--status-success-fg); --kat-accent-bg: var(--status-success-bg); }
[data-kat="fuhrpark"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--lod-amber-700); --kat-accent-bg: var(--lod-amber-50); }
[data-kat="projekt"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--status-info-fg); --kat-accent-bg: var(--status-info-bg); }
.benachr-shell {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
}
.benachr-context { grid-column: 1 / -1; }
.benachr-context,
.benachr-rail,
.benachr-stage {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.benachr-context {
display: flex;
align-items: stretch;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-2);
flex-wrap: wrap;
}
.benachr-crown-profil {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1 1 240px;
min-width: 0;
padding: var(--space-1-5) var(--space-2);
border: 0;
background: none;
border-radius: var(--radius-md);
cursor: pointer;
font-family: var(--font-sans);
text-align: left;
transition: background var(--duration-fast);
}
.benachr-crown-profil:hover { background: var(--brand-light); }
.benachr-crown-profil-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--brand-light);
}
.benachr-crown-profil-icon img { width: 19px; height: 19px; }
.benachr-crown-profil-texts { display: flex; flex-direction: column; min-width: 0; }
.benachr-crown-caption {
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
.benachr-crown-value {
font-size: var(--font-size-md);
font-weight: var(--fw-semibold);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.benachr-crown-dev {
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
color: var(--brand-default);
background: var(--brand-light);
padding: 0 var(--space-1-5);
border-radius: var(--radius-circular);
}
.benachr-crown-profil-go { margin-left: auto; flex-shrink: 0; display: inline-flex; opacity: 0.45; }
.benachr-crown-profil-go img { width: 18px; height: 18px; }
.benachr-rail {
position: sticky;
top: var(--space-2);
align-self: start;
padding: var(--space-2);
display: flex;
flex-direction: column;
gap: var(--space-px);
min-height: 0;
max-height: calc(100vh - 150px);
overflow-y: auto;
scrollbar-width: thin;
}
.benachr-rail-group { display: flex; flex-direction: column; gap: var(--space-px); }
.benachr-rail-group + .benachr-rail-group {
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
}
.benachr-rail-caption {
padding: 0 var(--space-2) var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
.benachr-rail-item {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 40px;
padding: var(--space-1-5) var(--space-2);
border: 0;
border-left: 2px solid transparent;
border-radius: var(--radius-md);
background: none;
cursor: pointer;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text);
text-align: left;
transition: background var(--duration-fast);
}
.benachr-rail-item:hover { background: var(--brand-light); }
.benachr-rail-item.is-active {
background: var(--kat-accent-bg, var(--brand-light));
border-left-color: var(--kat-accent, var(--brand-default));
font-weight: var(--fw-semibold);
}
.benachr-rail-dot {
flex-shrink: 0;
width: 9px;
height: 9px;
border-radius: var(--radius-circular);
background: var(--kat-accent, var(--color-text-muted));
}
.benachr-rail-iconchip {
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--color-bg-muted);
transition: background var(--duration-fast);
}
.benachr-rail-iconchip img { width: 16px; height: 16px; opacity: 0.75; }
.benachr-rail-iconchip.is-kat {
background: var(--kat-accent-bg, var(--color-bg-muted));
}
.benachr-rail-iconchip.is-kat img { opacity: 1; }
.benachr-rail-item.is-active .benachr-rail-iconchip { background: var(--kat-accent-bg, var(--brand-light)); }
.benachr-rail-item.is-active .benachr-rail-iconchip img { opacity: 1; }
.benachr-rail-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.benachr-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benachr-rail-sub {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.benachr-rail-count {
flex-shrink: 0;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.benachr-rail-dirty {
flex-shrink: 0;
width: 7px;
height: 7px;
border-radius: var(--radius-circular);
background: var(--brand-default);
display: none;
}
.benachr-rail-item.has-dirty .benachr-rail-dirty { display: inline-block; }
.benachr-stage { padding: var(--space-4); min-width: 0; }
.benachr-stage-head { margin-bottom: var(--space-3); }
.benachr-stage-title {
margin: 0 0 var(--space-1);
font-size: var(--font-size-lg);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.benachr-stage-hint {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.5;
}
.benachr-katview-head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.benachr-katview-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--kat-accent-bg, var(--color-bg-muted));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kat-accent, var(--color-border)) 22%, transparent);
}
.benachr-katview-icon img { width: 20px; height: 20px; }
.benachr-katview-titles { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.benachr-katview-title {
margin: 0;
font-size: var(--font-size-lg);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: 1.2;
}
.benachr-katview-meta {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-weight: var(--fw-medium);
}
.benachr-kat-summary {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-left: auto;
flex-shrink: 0;
}
.benachr-kat-chip {
display: inline-flex;
align-items: center;
gap: var(--space-xxs);
padding: var(--space-px) var(--space-1-5);
border-radius: var(--radius-circular);
background: var(--kat-accent-bg, var(--color-bg-muted));
color: var(--kat-accent, var(--color-text-muted));
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
line-height: 1.5;
}
.benachr-kat-chip img { width: 12px; height: 12px; opacity: 0.75; }
.benachr-kat-chip--stumm {
background: transparent;
border: 1px dashed var(--color-border);
color: var(--color-text-muted);
font-style: italic;
font-weight: var(--fw-medium);
}
.benachr-section-head { margin-top: var(--space-2); }
.benachr-section-head:first-child { margin-top: 0; }
.benachr-section-title {
margin: 0 0 var(--space-1);
font-size: var(--font-size-md);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.benachr-section-hint {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.benachr-presets {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-3);
}
.benachr-preset-card {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
text-align: left;
cursor: pointer;
font-family: var(--font-sans);
transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
.benachr-preset-card:hover {
border-color: var(--color-border-hover);
box-shadow: var(--shadow-4);
}
.benachr-preset-card.is-active {
border-color: var(--brand-default);
box-shadow: 0 0 0 1px var(--brand-default);
background: color-mix(in srgb, var(--brand-default) 4%, var(--color-surface));
}
.benachr-preset-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--color-bg-muted);
}
.benachr-preset-card[data-preset="alles"] .benachr-preset-icon { background: var(--brand-light); }
.benachr-preset-card[data-preset="empfohlen"] .benachr-preset-icon { background: var(--lod-amber-50); }
.benachr-preset-card[data-preset="wichtig"] .benachr-preset-icon { background: var(--status-danger-bg); }
.benachr-preset-card[data-preset="ruhe"] .benachr-preset-icon { background: var(--status-info-bg); }
.benachr-preset-card.is-active .benachr-preset-icon {
background: color-mix(in srgb, var(--brand-default) 12%, transparent);
}
.benachr-preset-icon img { width: 20px; height: 20px; }
.benachr-preset-texts {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.benachr-preset-label {
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.benachr-preset-dev {
font-size: var(--font-size-xs);
font-weight: var(--fw-medium);
color: var(--brand-default);
white-space: nowrap;
}
.benachr-preset-desc {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
line-height: 1.4;
}
.benachr-preset-check {
position: absolute;
top: var(--space-2);
right: var(--space-2);
display: none;
}
.benachr-preset-check img { width: 18px; height: 18px; }
.benachr-preset-card.is-active .benachr-preset-check { display: inline-flex; }
.benachr-ruhezeit {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1 1 340px;
min-width: 0;
padding: var(--space-1-5) var(--space-2) var(--space-1-5) var(--space-4);
border-left: 1px solid var(--color-border);
}
.benachr-ruhezeit-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--color-bg-muted);
}
.benachr-ruhezeit[data-active="true"] .benachr-ruhezeit-icon {
background: var(--brand-light);
}
.benachr-ruhezeit-icon img { width: 19px; height: 19px; }
.benachr-ruhezeit-texts {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xxs);
}
.benachr-ruhezeit-label {
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.benachr-ruhezeit-desc {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.benachr-ruhezeit-firma {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-style: italic;
}
.benachr-ruhezeit-controls {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.benachr-ruhezeit-timehost { flex-shrink: 0; }
.benachr-ruhezeit-sep {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.benachr-ruhezeit-toggle { margin-left: var(--space-2); }
.benachr-profil {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.benachr-profil > [data-bnp-sec]:empty { display: none; }
.benachr-preset-pings {
display: inline-flex;
align-items: center;
gap: var(--space-1);
align-self: flex-start;
margin-top: var(--space-1);
padding: var(--space-px) var(--space-1-5) var(--space-px) var(--space-1);
border-radius: var(--radius-circular);
background: var(--color-bg-muted);
color: var(--color-text-secondary, var(--color-text-muted));
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
line-height: 1.6;
white-space: nowrap;
}
.benachr-preset-pings img { width: 12px; height: 12px; opacity: 0.65; }
.benachr-preset-card.is-active .benachr-preset-pings {
background: color-mix(in srgb, var(--brand-default) 10%, transparent);
color: var(--brand-default);
}
.benachr-preset-card.is-active .benachr-preset-pings img {
opacity: 0.9;
}
.benachr-preset-diffstrip {
min-height: 32px;
display: flex;
align-items: center;
margin-top: var(--space-2);
padding: var(--space-1-5) var(--space-2);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
line-height: 1.4;
}
.benachr-diffstrip-hint { color: var(--color-text-muted); }
.benachr-diffstrip-active { color: var(--color-text-muted); }
.benachr-diffstrip-diff { color: var(--color-text); }
.benachr-diffstrip-diff b { font-weight: var(--fw-semibold); }
.benachr-abw-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--space-1-5);
margin-left: var(--space-1);
border-radius: var(--radius-circular);
background: var(--brand-light);
color: var(--brand-default);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
vertical-align: middle;
}
.benachr-abw-list {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
}
.benachr-abw-row {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
flex-wrap: wrap;
}
.benachr-abw-texts {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: column;
gap: var(--space-xxs);
}
.benachr-abw-title {
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
color: var(--color-text);
}
.benachr-abw-diffs {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.benachr-abw-chip {
display: inline-flex;
align-items: center;
padding: 0 var(--space-1-5);
border-radius: var(--radius-circular);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
line-height: 1.7;
}
.benachr-abw-chip.is-plus { background: var(--brand-light); color: var(--brand-default); }
.benachr-abw-chip.is-minus { background: var(--color-bg-muted); color: var(--color-text-muted); }
.benachr-abw-revert {
flex-shrink: 0;
padding: var(--space-1) var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: var(--fw-medium);
cursor: pointer;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.benachr-abw-revert:hover {
background: var(--brand-light);
border-color: var(--brand-default);
color: var(--brand-default);
}
.benachr-reach {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1) var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-light, var(--color-border));
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.benachr-reach-lead {
font-weight: var(--fw-medium);
}
.benachr-reach-stats {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1) var(--space-3);
}
.benachr-reach-stat {
display: inline-flex;
align-items: center;
gap: var(--space-xxs);
color: var(--color-text-muted);
white-space: nowrap;
}
.benachr-reach-stat img { width: 13px; height: 13px; opacity: 0.55; }
.benachr-reach-stat b {
color: var(--color-text);
font-weight: var(--fw-semibold);
font-variant-numeric: tabular-nums;
}
.benachr-reach-stat.is-leer { opacity: 0.5; }
.benachr-reach-stat.is-leer b { color: var(--color-text-muted); font-weight: var(--fw-medium); }
.benachr-reach-puls {
margin-left: auto;
padding-left: var(--space-3);
border-left: 1px solid var(--color-border-light, var(--color-border));
white-space: nowrap;
}
.benachr-zustell {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
}
.benachr-zustell-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
flex-wrap: wrap;
}
.benachr-zustell-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--color-bg-muted);
}
.benachr-zustell-icon img { width: 19px; height: 19px; }
.benachr-zustell-texts {
flex: 1;
min-width: 220px;
display: flex;
flex-direction: column;
gap: var(--space-xxs);
}
.benachr-zustell-label {
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.benachr-zustell-desc {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.benachr-zustell-controls {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
flex-shrink: 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.benachr-zustell-timehost { flex-shrink: 0; }
.benachr-zustell-controls select {
padding: var(--space-1-5) var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.benachr-zustell-controls select:hover { border-color: var(--color-border-hover); }
.benachr-zustell-controls select:focus-visible {
outline: none;
border-color: var(--brand-default);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-default) 15%, transparent);
}
.benachr-row-prio {
display: inline-block;
padding: 0 var(--space-1-5);
border-radius: var(--radius-sm);
background: var(--status-warning-bg);
color: var(--status-warning-fg);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
line-height: 1.6;
vertical-align: middle;
}
@media (max-width: 1399px) {
.benachr-content { padding: var(--space-4) var(--space-4) var(--space-6); }
.benachr-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benachr-abw-texts { min-width: 160px; }
.benachr-zustell-texts { min-width: 160px; }
}
@media (max-width: 999px) {
.benachr-header { padding: var(--space-3) var(--space-4); }
.benachr-content { padding: var(--space-3) var(--space-3) var(--space-6); gap: var(--space-3); }
.benachr-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.benachr-context { flex-direction: column; align-items: stretch; }
.benachr-crown-profil,
.benachr-context .benachr-ruhezeit { flex: 0 0 auto; }
.benachr-ruhezeit { border-left: 0; border-top: 1px solid var(--color-border); padding-left: var(--space-2); flex-wrap: wrap; }
.benachr-ruhezeit-controls { width: 100%; justify-content: flex-end; }
.benachr-shell { grid-template-columns: 1fr; }
.benachr-rail {
position: static;
max-height: none;
overflow: visible;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-1);
}
.benachr-rail-group { flex-direction: row; flex-wrap: wrap; gap: var(--space-1); }
.benachr-rail-group + .benachr-rail-group { margin-top: 0; padding-top: 0; border-top: 0; }
.benachr-rail-caption { display: none; }
.benachr-rail-item { min-height: 44px; }
.benachr-rail-sub { display: none; }
.benachr-zustell-controls { width: 100%; justify-content: flex-end; }
.benachr-abw-texts { min-width: 0; }
.benachr-zustell-texts { min-width: 0; }
}
@media (max-width: 599px) {
.benachr-header {
flex-direction: column;
align-items: stretch;
padding: var(--space-3);
}
.benachr-header-actions { justify-content: flex-end; }
.benachr-content { padding: var(--space-3) var(--space-2) var(--space-6); }
.benachr-presets { grid-template-columns: 1fr; }
.benachr-preset-card { padding: var(--space-3); }
.benachr-stage { padding: var(--space-3); }
.benachr-kat-summary { display: none; }
.benachr-reach-puls { margin-left: 0; padding-left: 0; border-left: 0; }
.benachr-abw-revert { width: 100%; min-height: 40px; }
.benachr-zustell-controls select,
.benachr-zustell-timehost .app-time-picker-trigger,
.benachr-ruhezeit-timehost .app-time-picker-trigger { min-height: 40px; }
}
/*== /styles/sections/benachrichtigungen/bn-matrix.css ==*/
.benachr-matrix {
display: grid;
grid-template-columns: minmax(200px, 1fr) repeat(4, 64px) 16px repeat(2, 56px);
column-gap: 0;
align-items: stretch;
}
.benachr-matrix-grouprow { display: contents; }
.benachr-matrix-group-corner { grid-column: 1 / 2; }
.benachr-matrix-group-gap { grid-column: 6 / 7; }
.benachr-matrix-group--sofort { grid-column: 2 / 6; }
.benachr-matrix-group--digest { grid-column: 7 / 9; }
.benachr-matrix--extern { grid-template-columns: minmax(200px, 1fr) repeat(3, 64px) 16px repeat(2, 56px); }
.benachr-matrix--extern .benachr-matrix-group--sofort { grid-column: 2 / 5; }
.benachr-matrix--extern .benachr-matrix-group-gap { grid-column: 5 / 6; }
.benachr-matrix--extern .benachr-matrix-group--digest { grid-column: 6 / 8; }
.benachr-matrix-group {
align-self: end;
padding: 0 var(--space-1) var(--space-1);
font-size: 10px;
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.benachr-matrix-group::after {
content: "";
display: block;
height: 2px;
margin: var(--space-1) auto 0;
width: 60%;
max-width: 120px;
border-radius: var(--radius-circular);
background: var(--color-border);
}
.benachr-matrix-head {
display: contents;
}
.benachr-matrix-head > div {
padding: var(--space-2) var(--space-1);
font-size: 10px;
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: center;
background: transparent;
border-bottom: 1px solid var(--color-border);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xxs);
}
.benachr-matrix-head > div:first-child {
grid-column: 1 / 2;
text-align: left;
padding-left: var(--space-4);
align-items: flex-start;
}
.benachr-matrix-head-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.benachr-matrix-head-icon img { width: 16px; height: 16px; opacity: 0.7; }
.benachr-matrix-head-spacer {
background: transparent;
border-bottom: 1px solid var(--color-border);
}
.benachr-row {
display: contents;
}
.benachr-row > div {
padding: var(--space-2-5) var(--space-1);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--color-border-light);
transition: background var(--duration-fast);
}
.benachr-row:last-child > div { border-bottom: 0; }
.benachr-row.is-dirty > div { background: color-mix(in srgb, var(--brand-default) 4%, transparent); }
.benachr-row:hover > div { background: color-mix(in srgb, var(--brand-default) 3%, transparent); }
.benachr-row.is-dirty:hover > div { background: color-mix(in srgb, var(--brand-default) 7%, transparent); }
.benachr-row-label {
grid-column: 1 / 2;
flex-direction: column;
align-items: flex-start !important;
justify-content: center !important;
gap: var(--space-px);
padding-left: var(--space-4) !important;
padding-right: var(--space-3) !important;
padding-top: var(--space-2-5) !important;
padding-bottom: var(--space-2-5) !important;
overflow: hidden;
}
.benachr-row-title {
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
color: var(--color-text);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.benachr-row-hint {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
line-height: 1.35;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.benachr-row-spacer { background: transparent; }
.benachr-cell-check-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.benachr-cell-check {
cursor: pointer;
}
.benachr-cell-check input[type="checkbox"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
margin: 0;
cursor: pointer;
z-index: 2;
}
.benachr-cell-check.is-disabled input[type="checkbox"] { cursor: not-allowed; }
.benachr-cell-check-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: var(--radius-xs);
border: 1.5px solid var(--color-border);
background: var(--color-surface);
cursor: pointer;
transition: background var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.benachr-cell-check-box:hover {
border-color: var(--brand-default);
}
.benachr-cell-check input[type="checkbox"]:checked + .benachr-cell-check-box {
border-color: var(--brand-default);
background: var(--brand-default);
}
.benachr-cell-check input[type="checkbox"]:checked + .benachr-cell-check-box::after {
content: "";
width: 5px;
height: 10px;
border: solid var(--brand-text-on);
border-width: 0 2px 2px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
.benachr-cell-check input[type="checkbox"]:focus-visible + .benachr-cell-check-box {
outline: 2px solid var(--brand-default);
outline-offset: 2px;
}
.benachr-col-toggle {
padding: var(--space-1-5);
min-width: 28px;
min-height: 28px;
}
.benachr-col-toggle input[type="checkbox"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
margin: 0;
cursor: pointer;
}
.benachr-cell-check-box--sm {
width: 18px;
height: 18px;
}
.benachr-col-toggle input[type="checkbox"]:checked + .benachr-cell-check-box {
border-color: var(--brand-default);
background: var(--brand-default);
}
.benachr-col-toggle input[type="checkbox"]:checked + .benachr-cell-check-box::after {
content: "";
width: 5px;
height: 10px;
border: solid var(--brand-text-on);
border-width: 0 2px 2px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
.benachr-col-toggle input[type="checkbox"]:indeterminate + .benachr-cell-check-box {
border-color: var(--brand-default);
background: var(--brand-default);
}
.benachr-col-toggle input[type="checkbox"]:indeterminate + .benachr-cell-check-box::after {
content: "";
width: 8px;
height: 0;
border: 0;
border-top: 2px solid var(--brand-text-on);
transform: none;
}
.benachr-col-toggle input[type="checkbox"]:focus-visible + .benachr-cell-check-box {
outline: 2px solid var(--brand-default);
outline-offset: 2px;
}
.benachr-cell-check.is-disabled { cursor: not-allowed; }
.benachr-cell-check.is-disabled .benachr-cell-check-box {
opacity: 0.35;
cursor: not-allowed;
background: var(--color-bg-subtle);
}
.benachr-push-global-hint {
flex-shrink: 0;
padding: var(--space-3) var(--space-4);
background: var(--status-warning-bg);
color: var(--status-warning-fg);
font-size: var(--font-size-sm);
border: 1px solid var(--status-warning-fg);
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: var(--space-2);
line-height: 1.4;
}
.benachr-push-global-hint .ui-ico img { width: 16px; height: 16px; opacity: 0.9; }
.benachr-empty {
padding: var(--space-8) var(--space-4);
text-align: center;
color: var(--color-text-muted);
background: var(--color-surface);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
}
@media (max-width: 1399px) {
.benachr-matrix { grid-template-columns: minmax(180px, 1fr) repeat(4, 56px) 12px repeat(2, 52px); }
.benachr-matrix--extern { grid-template-columns: minmax(180px, 1fr) repeat(3, 56px) 12px repeat(2, 52px); }
}
@media (max-width: 999px) {
.benachr-matrix { grid-template-columns: minmax(140px, 1fr) repeat(4, 48px) 8px repeat(2, 44px); }
.benachr-matrix--extern { grid-template-columns: minmax(140px, 1fr) repeat(3, 48px) 8px repeat(2, 44px); }
.benachr-row-label { padding-left: var(--space-3) !important; padding-right: var(--space-2) !important; }
.benachr-matrix-head > div:first-child { padding-left: var(--space-3); }
}
@media (max-width: 599px) {
.benachr-matrix {
display: flex;
flex-direction: column;
gap: 0;
}
.benachr-matrix-head,
.benachr-matrix-grouprow { display: none; }
.benachr-row { display: flex !important; flex-direction: column; padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-light); gap: var(--space-2); }
.benachr-row:last-child { border-bottom: 0; }
.benachr-row > div {
border-bottom: 0;
padding: 0;
justify-content: flex-start;
}
.benachr-row.is-dirty { background: color-mix(in srgb, var(--brand-default) 4%, transparent); }
.benachr-row.is-dirty > div { background: transparent; }
.benachr-row:hover > div { background: transparent; }
.benachr-row.is-dirty:hover > div { background: transparent; }
.benachr-row-label {
padding-left: 0 !important;
padding-right: 0 !important;
}
.benachr-row-title { font-weight: var(--fw-semibold); white-space: normal; }
.benachr-row-hint { white-space: normal; }
.benachr-row-spacer { display: none; }
.benachr-cell-check {
width: 100%;
justify-content: space-between !important;
padding: var(--space-2-5) 0;
min-height: 44px;
}
.benachr-cell-check::before {
content: attr(data-label);
font-size: var(--font-size-sm);
color: var(--color-text);
flex: 1;
text-align: left;
}
}
/*== /styles/sections/benachrichtigungen/bn-devices.css ==*/
.benachr-devices {
flex-shrink: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
transition: box-shadow var(--duration-fast);
overflow: hidden;
}
.benachr-devices:hover { box-shadow: var(--shadow-4); }
.benachr-devices-head {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border-light);
}
.benachr-devices-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
flex-shrink: 0;
}
.benachr-devices-icon img { width: 20px; height: 20px; opacity: 0.7; }
.benachr-devices-titles { flex: 1; min-width: 0; }
.benachr-devices-title {
margin: 0;
font-size: var(--font-size-md);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: 1.2;
}
.benachr-devices-sub {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-top: var(--space-xxs);
}
.benachr-devices-testbtn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-subtle);
color: var(--color-text);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
font-size: var(--font-size-xs);
font-weight: var(--fw-medium);
cursor: pointer;
flex-shrink: 0;
transition: background var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft);
}
.benachr-devices-testbtn:hover { background: var(--color-bg-hover); border-color: var(--color-border); }
.benachr-devices-testbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.benachr-devices-testbtn:disabled { opacity: 0.6; cursor: wait; }
.benachr-devices-testbtn .ui-ico img { opacity: 0.8; }
.benachr-devices-empty {
padding: var(--space-3) var(--space-4);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
line-height: 1.45;
background: var(--color-bg-muted);
}
.benachr-devices-storelink {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-left: var(--space-1);
color: var(--brand-default);
font-weight: var(--fw-medium);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--duration-fast);
}
.benachr-devices-storelink:hover {
border-bottom-color: var(--brand-default);
}
.benachr-devices-list {
list-style: none;
margin: 0;
padding: 0;
}
.benachr-devices-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 11px var(--space-4);
border-top: 1px solid var(--color-border-light);
}
.benachr-devices-row:first-child { border-top: 0; }
.benachr-devices-row-main { flex: 1; min-width: 0; }
.benachr-devices-row-name {
font-weight: var(--fw-medium);
color: var(--color-text);
line-height: 1.2;
}
.benachr-devices-row-meta {
margin-top: var(--space-xxs);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: var(--space-2);
}
.benachr-devices-platform {
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
background: var(--color-bg-subtle);
padding: var(--space-px) var(--space-1-5);
border-radius: var(--radius-xs);
}
.benachr-devices-dot {
width: 3px; height: 3px;
border-radius: 50%;
background: var(--color-border);
flex-shrink: 0;
}
.benachr-devices-remove {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
padding: var(--space-1-5);
cursor: pointer;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.benachr-devices-remove:hover {
background: var(--status-danger-bg);
border-color: var(--status-danger-fg);
color: var(--status-danger-fg);
}
.benachr-devices-remove:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: 1px;
}
.benachr-devices-silencebtn {
appearance: none;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-1-5) var(--space-2-5);
margin-right: var(--space-1-5);
cursor: pointer;
color: var(--color-text);
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
font-size: 12px;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.benachr-devices-silencebtn:hover {
background: var(--color-bg-hover);
border-color: var(--color-border-strong);
}
.benachr-devices-silencebtn.is-silenced {
background: var(--status-warning-bg);
border-color: var(--status-warning-fg);
color: var(--status-warning-fg);
}
.benachr-devices-silencebtn:disabled { opacity: 0.6; cursor: wait; }
.benachr-devices-silencebtn .ui-ico img { opacity: 0.85; }
.benachr-devices-row.is-silenced .benachr-devices-row-name {
opacity: 0.6;
}
.benachr-devices-silenced-badge {
background: var(--status-warning-fg);
color: var(--brand-text-on);
border-radius: var(--radius-pill-sm);
padding: var(--space-px) var(--space-2);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
letter-spacing: 0.3px;
}
.benachr-devices-row.is-expired .benachr-devices-row-name { opacity: 0.6; }
.benachr-devices-expired-badge {
background: var(--status-danger-fg);
color: var(--brand-text-on);
border-radius: var(--radius-pill-sm);
padding: var(--space-px) var(--space-2);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
letter-spacing: 0.3px;
cursor: help;
}
.benachr-devices-enablebtn,
.benachr-devices-helpbtn {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
margin-top: var(--space-2);
padding: var(--space-2) var(--space-3-5);
background: var(--brand-primary);
color: var(--brand-text-on);
border: none;
border-radius: var(--radius-md);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.benachr-devices-enablebtn:hover,
.benachr-devices-helpbtn:hover { filter: brightness(1.08); }
.benachr-devices-enablebtn:active,
.benachr-devices-helpbtn:active { filter: brightness(0.95); }
@media (max-width: 599px) {
.benachr-devices-silencebtn,
.benachr-devices-remove,
.benachr-devices-testbtn,
.benachr-devices-enablebtn,
.benachr-devices-helpbtn { min-height: 44px; }
.benachr-devices-row {
flex-wrap: wrap;
gap: var(--space-2);
}
.benachr-devices-row-main { flex-basis: 100%; }
}
.benachr-devices-debug {
margin-top: var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-subtle);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.benachr-devices-debug summary {
cursor: pointer;
user-select: none;
}
.benachr-devices-debug-body {
margin-top: var(--space-2);
font-family: monospace;
}
.benachr-devices-debug-trace {
margin-top: var(--space-2-5);
border-top: 1px solid var(--color-border);
padding-top: var(--space-2);
font-family: monospace;
}
/*== /styles/components/calendar/absence-calendar.css ==*/
.abs-cal {
--abs-cal-urlaub: var(--lod-success);
--abs-cal-krank: var(--lod-danger);
--abs-cal-schule: var(--brand-default);
--abs-cal-schulung: var(--lod-turquoise-cyan);
--abs-cal-ausgleich: var(--lod-violet);
--abs-cal-feiertag: var(--lod-amber-500);
--abs-cal-sonstig: var(--lod-gray-400);
--abs-cal-we-bg: color-mix(in srgb, var(--lod-gray-200) 55%, white);
--abs-cal-feiertag-bg: color-mix(in srgb, var(--lod-amber-500) 12%, white);
--abs-cal-heute-bg: var(--lod-darkblue-50);
--abs-cal-heute-linie: color-mix(in srgb, var(--brand-default) 35%, transparent);
--abs-cal-grid-line: var(--color-border-light);
--abs-cal-row-hover: rgba(37, 60, 102, 0.05);
display: flex;
flex-direction: column;
gap: var(--space-3);
font-family: var(--lod-font-sans);
}
.abs-cal-scroll {
overflow-x: auto;
border: 1px solid var(--lod-gray-200);
border-radius: var(--radius-lg);
background: var(--lod-white);
}
.abs-cal-table {
table-layout: fixed;
width: 100%;
min-width: 1046px;
border-collapse: separate;
border-spacing: 0;
}
.abs-cal-col-name { width: 240px; }
.abs-cal-day-h {
position: relative;
padding: var(--space-1-5) 0;
text-align: center;
vertical-align: middle;
border-bottom: 1px solid var(--lod-gray-200);
border-right: 1px solid var(--abs-cal-grid-line);
font-weight: var(--fw-regular);
}
.abs-cal-day-h:last-child { border-right: none; }
.abs-cal-dow {
display: block;
font-size: var(--font-size-xs);
line-height: var(--lh-tight);
color: var(--lod-gray-500);
}
.abs-cal-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
margin-top: var(--space-xxs);
font-size: var(--font-size-sm);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--lod-gray-700);
font-variant-numeric: tabular-nums;
}
.abs-cal-name-h,
.abs-cal-name {
position: sticky;
left: 0;
z-index: 2;
background: var(--lod-white);
text-align: left;
border-right: 1px solid var(--lod-gray-200);
}
.abs-cal-name-h {
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
color: var(--lod-gray-600);
border-bottom: 1px solid var(--lod-gray-200);
vertical-align: bottom;
}
.abs-cal-name {
padding: var(--space-1) var(--space-3);
vertical-align: middle;
border-bottom: 1px solid var(--abs-cal-grid-line);
}
.abs-cal-name-inner {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
min-height: 28px;
}
.abs-cal-name.is-clickable { cursor: pointer; }
.abs-cal-name.is-clickable:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: -2px;
}
.abs-cal-avatar {
position: relative;
flex-shrink: 0;
display: inline-flex;
}
.abs-cal-avatar-slot { display: inline-flex; }
.abs-cal-avatar-dot {
position: absolute;
right: -2px;
bottom: -2px;
width: 10px;
height: 10px;
border-radius: var(--radius-circular);
--abs-chip: var(--abs-cal-sonstig);
background: var(--abs-chip);
box-shadow: 0 0 0 2px var(--lod-white);
}
.abs-cal-avatar-dot--urlaub { --abs-chip: var(--abs-cal-urlaub); }
.abs-cal-avatar-dot--krank { --abs-chip: var(--abs-cal-krank); }
.abs-cal-avatar-dot--schule { --abs-chip: var(--abs-cal-schule); }
.abs-cal-avatar-dot--schulung { --abs-chip: var(--abs-cal-schulung); }
.abs-cal-avatar-dot--ausgleich { --abs-chip: var(--abs-cal-ausgleich); }
.abs-cal-person {
display: flex;
flex-direction: column;
min-width: 0;
}
.abs-cal-person-name {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--lod-fg-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.abs-cal-person-bereich {
font-size: var(--fs-badge);
line-height: var(--lh-tight);
color: var(--lod-gray-500);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.abs-cal-cell {
position: relative;
height: 34px;
padding: 0;
text-align: center;
vertical-align: middle;
border-bottom: 1px solid var(--abs-cal-grid-line);
border-right: 1px solid var(--abs-cal-grid-line);
}
.abs-cal-cell:last-child { border-right: none; }
.abs-cal-row:last-child .abs-cal-cell,
.abs-cal-row:last-child .abs-cal-name { border-bottom: none; }
.abs-cal-row:hover .abs-cal-cell,
.abs-cal-row:hover .abs-cal-name {
background-image: linear-gradient(var(--abs-cal-row-hover), var(--abs-cal-row-hover));
}
.abs-cal-day-h.is-weekend,
.abs-cal-cell.is-weekend { background-color: var(--abs-cal-we-bg); }
.abs-cal-cell.is-weekend + .abs-cal-cell.is-weekend,
.abs-cal-day-h.is-weekend + .abs-cal-day-h.is-weekend { border-left: none; }
.abs-cal-cell.is-weekend:has(+ .abs-cal-cell.is-weekend),
.abs-cal-day-h.is-weekend:has(+ .abs-cal-day-h.is-weekend) { border-right-color: transparent; }
.abs-cal-day-h.is-weekend .abs-cal-dow,
.abs-cal-day-h.is-weekend .abs-cal-num { color: var(--lod-gray-400); }
.abs-cal-day-h.is-feiertag,
.abs-cal-cell.is-feiertag { background-color: var(--abs-cal-feiertag-bg); }
.abs-cal-day-h.is-feiertag .abs-cal-num { color: var(--lod-amber-700); }
.abs-cal-day-h.is-feiertag .abs-cal-dow { color: var(--lod-amber-600); }
.abs-cal-day-h.is-feiertag::after {
content: "";
position: absolute;
left: 50%;
bottom: 2px;
width: 4px;
height: 4px;
margin-left: -2px;
border-radius: var(--radius-circular);
background: var(--lod-amber-500);
}
.abs-cal-day-h.is-today,
.abs-cal-cell.is-today { background-color: var(--abs-cal-heute-bg); }
.abs-cal-day-h.is-today { box-shadow: inset 0 3px 0 var(--brand-default); }
.abs-cal-cell.is-today {
box-shadow: inset 1px 0 0 var(--abs-cal-heute-linie), inset -1px 0 0 var(--abs-cal-heute-linie);
}
.abs-cal-day-h.is-today .abs-cal-num {
background: var(--brand-default);
color: var(--lod-white);
border-radius: var(--radius-circular);
}
.abs-cal-day-h.is-today .abs-cal-dow {
color: var(--brand-default);
font-weight: var(--fw-semibold);
}
.abs-cal-seg {
--abs-chip: var(--abs-cal-sonstig);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-circular);
background: var(--abs-chip);
color: var(--lod-white);
font-size: 11px;
font-weight: var(--fw-semibold);
line-height: 1;
}
.abs-cal-seg--urlaub { --abs-chip: var(--abs-cal-urlaub); }
.abs-cal-seg--krank { --abs-chip: var(--abs-cal-krank); }
.abs-cal-seg--schule { --abs-chip: var(--abs-cal-schule); }
.abs-cal-seg--schulung { --abs-chip: var(--abs-cal-schulung); }
.abs-cal-seg--ausgleich { --abs-chip: var(--abs-cal-ausgleich); }
.abs-cal-seg--feiertag { --abs-chip: var(--abs-cal-feiertag); }
.abs-cal-seg--cell {
--abs-kappe: 3px;
--abs-halb: calc(50% - var(--abs-kappe));
position: absolute;
left: calc(var(--abs-kappe) + var(--abs-halb-start, 0) * var(--abs-halb));
top: 50%;
transform: translateY(-50%);
height: 22px;
width: calc(
var(--abs-span, 1) * 100% + (var(--abs-span, 1) - 1) * 1px
- 2 * var(--abs-kappe)
- var(--abs-halb-start, 0) * var(--abs-halb)
- var(--abs-halb-ende, 0) * var(--abs-halb)
);
z-index: 1;
cursor: pointer;
box-shadow: 0 1px 2px rgba(9, 24, 48, 0.14);
transition: filter var(--duration-quick), box-shadow var(--duration-quick);
}
.abs-cal-seg--cell:hover {
filter: brightness(1.07);
box-shadow: 0 2px 6px rgba(9, 24, 48, 0.22);
}
.abs-cal-seg-text {
padding: 0 var(--space-1-5);
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.abs-cal-seg.is-beantragt {
background: repeating-linear-gradient(135deg,
color-mix(in srgb, var(--abs-chip) 12%, white) 0 4px,
color-mix(in srgb, var(--abs-chip) 28%, white) 4px 8px);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--abs-chip) 55%, white);
color: color-mix(in srgb, var(--abs-chip) 78%, black);
}
.abs-cal-seg--cell.is-beantragt {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--abs-chip) 55%, white),
0 1px 2px rgba(9, 24, 48, 0.10);
}
.abs-cal-seg--cell.is-schmal .abs-cal-seg-text {
padding: 0 var(--space-xxs);
text-overflow: clip;
}
.abs-cal-row.is-plannable-row .abs-cal-name {
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand-default) 45%, transparent);
}
.abs-cal-cell.is-plannable { cursor: cell; }
.abs-cal-cell.is-plannable:hover::after,
.abs-cal-cell.is-plannable:focus-visible::after {
content: "";
position: absolute;
inset: 3px 2px;
border: 1px dashed color-mix(in srgb, var(--brand-default) 55%, white);
border-radius: var(--radius-circular);
background: color-mix(in srgb, var(--brand-default) 8%, transparent);
pointer-events: none;
}
.abs-cal-cell.is-plannable:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: -2px;
}
.abs-cal-cell.is-plan-sel {
background-image: linear-gradient(
color-mix(in srgb, var(--brand-default) 12%, transparent),
color-mix(in srgb, var(--brand-default) 12%, transparent));
}
.abs-cal-plan {
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
height: 22px;
width: calc(var(--abs-span, 1) * 100% + (var(--abs-span, 1) - 1) * 1px - 6px);
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-circular);
border: 1px dashed var(--brand-default);
background: color-mix(in srgb, var(--brand-default) 16%, white);
color: var(--lod-darkblue);
font-size: 11px;
font-weight: var(--fw-semibold);
line-height: 1;
pointer-events: none;
}
.abs-cal-plan-text {
padding: 0 var(--space-1-5);
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.abs-cal-legend {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
color: var(--lod-gray-600);
}
.abs-cal-legend-item {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
}
.abs-cal-legend .abs-cal-seg {
width: 26px;
height: 14px;
font-size: 9px;
flex-shrink: 0;
}
.abs-cal-legend-swatch {
width: 14px;
height: 14px;
border-radius: var(--radius-xs);
flex-shrink: 0;
}
.abs-cal-legend-swatch--feiertag {
background: var(--abs-cal-feiertag-bg);
box-shadow: inset 0 0 0 1px var(--lod-amber-500);
}
.abs-cal-legend-halb {
display: inline-flex;
align-items: center;
width: 26px;
height: 14px;
border-radius: var(--radius-circular);
background: color-mix(in srgb, var(--lod-gray-200) 70%, white);
overflow: hidden;
flex-shrink: 0;
}
.abs-cal-legend-halb .abs-cal-seg {
width: 50%;
height: 100%;
border-radius: var(--radius-circular);
}
@media (min-width: 1000px) and (max-width: 1399px) {
.abs-cal-col-name { width: 216px; }
.abs-cal-table { min-width: 992px; }
.abs-cal-seg--cell,
.abs-cal-plan { height: 20px; }
.abs-cal-seg,
.abs-cal-plan { font-size: 10px; }
}
@media (min-width: 600px) and (max-width: 999px) {
.abs-cal-col-name { width: 176px; }
.abs-cal-table { min-width: 920px; }
.abs-cal-name-h,
.abs-cal-name { padding-left: var(--space-2); padding-right: var(--space-2); }
.abs-cal-cell { height: 32px; }
.abs-cal-seg--cell,
.abs-cal-plan { height: 18px; }
.abs-cal-seg,
.abs-cal-plan { font-size: 10px; }
}
@media (max-width: 599px) {
.abs-cal-col-name { width: 140px; }
.abs-cal-table { min-width: 822px; }
.abs-cal-name-h,
.abs-cal-name { padding-left: var(--space-2); padding-right: var(--space-2); }
.abs-cal-person-bereich { display: none; }
.abs-cal-name-inner { min-height: 0; }
.abs-cal-cell { height: 30px; }
.abs-cal-seg--cell,
.abs-cal-plan { height: 15px; }
.abs-cal-seg,
.abs-cal-plan { font-size: 9px; }
.abs-cal-seg-text { padding: 0 var(--space-1); }
.abs-cal-avatar-dot { width: 8px; height: 8px; }
.abs-cal-num { min-width: 18px; height: 18px; }
.abs-cal-legend { gap: var(--space-1-5) var(--space-3); font-size: var(--font-size-xs); }
.abs-cal-legend .abs-cal-seg { width: 22px; height: 12px; font-size: 8px; }
}
/*== /styles/sections/einstellungen/einstellungen.css ==*/
.einst-root {
--einst-karte-standard: 1116px;
--einst-karte: var(--einst-karte-standard);
--einst-nav: 300px;
--einst-spalten-luecke: var(--space-5);
--einst-flaeche: calc(var(--einst-nav) + var(--einst-spalten-luecke) + var(--einst-karte));
--einst-flaeche-standard: calc(var(--einst-nav) + var(--einst-spalten-luecke) + var(--einst-karte-standard));
--einst-anker-rand: max(0px, calc((100% - var(--einst-flaeche-standard)) / 2));
--einst-nav-oben: 178px;
}
.einst-root.is-breit { --einst-karte: 1600px; }
.einst-wrap {
max-width: none;
margin: 0;
padding: 0 0 var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-4);
min-height: 100%;
}
.einst-toolbarzone { position: relative; flex-shrink: 0; }
.einst-sk { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.einst-sk-nav { padding: var(--space-4); }
.einst-sk-pane { padding: var(--space-4); min-height: 60vh; max-width: var(--einst-karte); }
.einst-sk-kopf { padding-bottom: var(--space-4); border-bottom: 1px solid var(--lod-gray-100); margin-bottom: var(--space-3); }
.einst-sk-row { display: grid; grid-template-columns: 240px minmax(0, 412px); gap: var(--space-3); padding: var(--space-3) 0; }
@media (max-width: 999px) {
.einst-sk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
.einst-sk-row { grid-template-columns: minmax(0, 1fr); }
}
.einst-search-panel {
position: absolute; top: 100%; z-index: 40;
left: max(var(--space-4), calc((100% - var(--einst-flaeche-standard)) / 2 + var(--einst-nav) + var(--einst-spalten-luecke)));
min-width: min(380px, 88vw); max-width: min(520px, 92vw); max-height: 360px; overflow-y: auto;
background: var(--color-surface); border: 1px solid var(--lod-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-8);
padding: var(--space-1);
}
.einst-search-panel[hidden] { display: none; }
.einst-search-hit {
display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
padding: var(--space-2) var(--space-2-5); border: none; background: none; cursor: pointer;
border-radius: var(--radius-sm);
}
.einst-search-hit:hover { background: var(--lod-gray-50); }
.einst-search-pfad { font-size: var(--fs-badge, 11px); color: var(--lod-gray-500); }
.einst-search-label { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--color-text); }
.einst-search-leer { padding: var(--space-3); font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.einst-banner-box {
display: flex; align-items: flex-start; gap: var(--space-2);
margin-top: 0;
}
.einst-banner-box .ui-ico { flex-shrink: 0; margin-top: 1px; }
.einst-banner-box + .einst-banner-box { margin-top: 0; }
.einst-einr { flex-wrap: nowrap; }
.einst-einr-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 auto; }
.einst-einr-titel { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); }
.einst-einr-hinweis { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.einst-einr-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); min-width: 0; }
.einst-einr .einst-einr-chip {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: 3px var(--space-2); border: 1px solid var(--color-border);
border-radius: var(--radius-pill); background: var(--color-surface);
font-size: var(--fs-meta, 12px); color: var(--color-text); cursor: pointer;
max-width: 100%; min-width: 0;
}
.einst-einr .einst-einr-chip:hover { background: var(--lod-gray-50); border-color: var(--color-border-strong, var(--color-border)); }
.einst-einr .einst-einr-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.einst-einr .einst-einr-chip-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.einst-einr .einst-einr-chip-n {
flex-shrink: 0; min-width: 16px; padding: 0 4px; border-radius: var(--radius-pill);
background: var(--lod-gray-100); color: var(--color-text-muted);
font-size: var(--fs-badge, 11px); font-weight: var(--fw-semibold); text-align: center;
}
.einst-einr .einst-einr-chip.is-betrieb { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.einst-einr .einst-einr-chip.is-betrieb .einst-einr-chip-n { background: var(--color-danger-fg); color: #fff; }
@media (max-width: 599px) {
.einst-einr { flex-wrap: wrap; }
}
.einst-layout {
display: grid;
grid-template-columns: var(--einst-nav) minmax(0, 1fr);
gap: var(--einst-spalten-luecke);
align-items: start;
flex: 1;
width: calc(100% - var(--einst-anker-rand)); max-width: var(--einst-flaeche);
margin-inline: var(--einst-anker-rand) auto;
}
.einst-layout.is-ohne-nav { grid-template-columns: minmax(0, 1fr); }
.einst-layout.is-ohne-nav .einst-nav,
.einst-layout.is-ohne-nav .einst-nav-toggle { display: none; }
@media (min-width: 1000px) {
.einst-root .app-page-toolbar {
padding-inline: max(var(--space-4), calc((100% - var(--einst-flaeche-standard)) / 2));
}
.einst-root .app-toolbar-left { flex: 1 1 auto; gap: var(--einst-spalten-luecke); }
.einst-root .app-toolbar-flex { display: none; }
.einst-root .app-board-switcher { width: var(--einst-nav); }
.einst-root .app-search-input { flex: 1 1 auto; max-width: none; }
}
.einst-nav {
display: flex; flex-direction: column; gap: var(--space-1);
position: sticky; top: 0;
padding: var(--space-4) var(--space-3) var(--space-5);
max-height: calc(100vh - var(--einst-nav-oben));
overflow-y: auto;
overscroll-behavior: contain;
}
.einst-filterleiste {
display: flex; align-items: center; gap: var(--space-2-5);
width: 100%; max-width: var(--einst-karte);
padding: var(--space-2) var(--space-3);
background: var(--brand-bg-subtle);
border: 1px solid var(--color-border);
border-left: var(--surface-accent-width) solid var(--lod-darkblue);
border-radius: var(--radius-md);
}
.einst-filterleiste-ico { flex-shrink: 0; display: inline-flex; color: var(--lod-darkblue); }
.einst-filterleiste-text { min-width: 0; font-size: var(--fs-body); color: var(--color-text); }
.einst-filterleiste-text strong { font-weight: var(--fw-semibold); }
.einst-filterleiste-zahl { margin-left: var(--space-2); font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.einst-filterleiste .einst-filter-aufheben { margin-left: auto; flex-shrink: 0; }
@media (max-width: 599px) {
.einst-filterleiste { flex-wrap: wrap; }
.einst-filterleiste .einst-filter-aufheben { margin-left: 0; width: 100%; }
}
.einst-nav-toggle { display: none; }
@media (max-width: 599px) {
.app-scope .einst-nav-toggle {
display: flex; align-items: center; gap: var(--space-3);
width: 100%; min-height: 44px;
padding: var(--space-2-5) var(--space-4);
background: var(--lod-white); cursor: pointer;
border: 1px solid var(--lod-gray-200); border-radius: var(--radius-md);
font-size: var(--fs-body); font-weight: var(--fw-semibold);
color: var(--lod-darkblue); text-align: left;
}
.einst-nav-toggle:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.einst-nav-toggle .einst-nav-ico img { opacity: .9; }
.einst-nav-toggle-label { flex: 1; min-width: 0; }
.einst-nav-toggle-chev { display: inline-flex; flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-soft); }
.einst-nav-toggle[aria-expanded="true"] .einst-nav-toggle-chev { transform: rotate(180deg); }
.einst-nav.is-zu { display: none; }
}
.einst-nav-group {
font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps, .08em); text-transform: uppercase;
color: var(--lod-gray-500);
padding: var(--space-2) var(--space-4) var(--space-1);
}
.einst-nav-group:not(:first-child) { margin-top: var(--space-4); border-top: 1px solid var(--lod-gray-100); padding-top: var(--space-4); }
.einst-nav-item { min-height: 40px; }
.einst-nav-item {
display: flex; align-items: center; gap: var(--space-3);
width: 100%; text-align: left; cursor: pointer;
padding: var(--space-2-5) var(--space-4);
background: transparent;
border: none; border-left: 3px solid transparent;
border-radius: var(--radius-md);
font-size: var(--fs-body); font-weight: var(--fw-medium);
color: var(--lod-gray-700);
transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}
.einst-nav-ico { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; flex-shrink: 0; }
.einst-nav-ico img { width: 20px; height: 20px; opacity: .7; }
.einst-nav-label {
flex: 1; min-width: 0;
overflow: hidden;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
hyphens: auto; overflow-wrap: break-word;
}
.einst-nav-dirty {
flex-shrink: 0; width: 6px; height: 6px; border-radius: var(--radius-circular);
background: var(--brand-default);
}
.einst-nav-fehlt {
flex-shrink: 0;
min-width: 16px; height: 16px; padding: 0 var(--space-1);
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-circular);
background: var(--status-warning-bg); color: var(--status-warning-fg);
font-size: var(--fs-caption); font-weight: 600; line-height: 1;
}
.einst-nav-item.is-active .einst-nav-fehlt { background: #fff; color: var(--lod-darkblue); }
.einst-nav-item:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.einst-nav-item:hover .einst-nav-ico img { opacity: .9; }
.einst-nav-item:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.einst-nav-item.is-active {
background: var(--lod-darkblue);
border-left-color: var(--lod-darkblue);
color: #fff;
font-weight: var(--fw-semibold);
box-shadow: 0 1px 2px rgba(15, 46, 72, 0.18);
}
.einst-nav-item.is-active:hover { background: var(--lod-darkblue); color: #fff; filter: brightness(1.1); }
.einst-nav-item.is-active .einst-nav-ico img { opacity: 1; filter: brightness(0) invert(1); }
.einst-nav-item.is-active .einst-nav-dirty { background: #fff; }
.einst-content { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.einst-crumbs { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--fs-meta, 12px); color: var(--lod-gray-500); }
.einst-crumbs a { color: var(--lod-gray-500); text-decoration: none; }
.einst-crumbs a:hover { color: var(--lod-darkblue); text-decoration: underline; }
.einst-crumb-sep { color: var(--lod-gray-300); }
.einst-crumb-cur { color: var(--color-text); font-weight: var(--fw-medium); }
.einst-intro {
display: flex; align-items: flex-start; gap: var(--space-3);
background: var(--surface-bg); border: var(--surface-border);
border-radius: var(--surface-radius); box-shadow: var(--surface-shadow);
padding: var(--space-4);
}
.einst-intro > .einst-card-icon { margin-top: 1px; }
.einst-intro .einst-verlauf-btn { margin-top: 2px; }
.einst-card-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; flex-shrink: 0;
border-radius: var(--radius-md);
background: var(--lod-darkblue-50);
}
.einst-card-icon img { width: 22px; height: 22px; }
.einst-card-titles { min-width: 0; }
.einst-card-title { margin: 0; font-size: var(--fs-section, 16px); font-weight: var(--fw-semibold); color: var(--color-text); line-height: 1.25; }
.einst-card-thema { margin: 2px 0 0; font-size: var(--fs-body); font-weight: var(--fw-regular, 400); color: var(--color-text-muted); }
.einst-subtabs {
display: flex; align-items: center;
background: var(--surface-bg); border: var(--surface-border); border-top: 0;
border-radius: 0 0 var(--surface-radius) var(--surface-radius);
box-shadow: var(--surface-shadow);
padding: var(--space-2) var(--space-4);
margin-top: calc(-1 * var(--einst-stapel));
max-width: var(--einst-karte);
overflow-x: auto;
}
.einst-intro:has(+ .einst-subtabs) { border-radius: var(--surface-radius) var(--surface-radius) 0 0; }
@media (max-width: 999px) {
.einst-subtabs { padding: var(--space-2); }
}
@media (min-width: 1000px) {
.einst-subtabs {
position: sticky; top: calc(-1 * var(--space-4)); z-index: 30;
transition: border-radius var(--duration-quick) var(--ease-soft),
box-shadow var(--duration-quick) var(--ease-soft);
}
.einst-subtabs.is-stuck {
border-radius: 0;
box-shadow: 0 4px 12px -8px rgba(15, 46, 72, 0.35);
}
}
.einst-subtabs--vz { gap: var(--space-3); flex-wrap: wrap; }
.einst-vz-suchfeld { position: relative; display: inline-flex; align-items: center; flex: 1 1 240px; max-width: 420px; }
.einst-vz-suchfeld .ui-ico { position: absolute; left: var(--space-2); pointer-events: none; opacity: 0.55; }
.app-scope .einst-vz-suche { width: 100%; padding-inline-start: calc(var(--space-2) + 22px); }
.einst-subtabs--vz .cs-wrap { margin-inline-start: auto; }
.einst-vz { display: flex; flex-direction: column; gap: var(--einst-stapel); }
.einst-vz-gruppe { display: flex; flex-direction: column; gap: var(--space-3); }
.einst-vz-kopf { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.einst-vz-name { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-semibold); color: var(--color-text); }
.einst-vz-zahl {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 20px; padding: 0 var(--space-1);
border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill);
font-size: 11px; font-weight: var(--fw-semibold); color: var(--color-text-secondary);
background: var(--color-surface);
}
.einst-vz-linie { flex: 1; border-top: 1px solid var(--color-border-subtle); }
.app-scope .einst-vz-aus { display: none; }
.einst-vz-leer {
padding: var(--space-6) var(--space-4);
text-align: center;
color: var(--color-text-secondary);
background: var(--surface-bg); border: var(--surface-border); border-radius: var(--surface-radius);
}
@media (max-width: 599px) {
.einst-vz-suchfeld { flex-basis: 100%; max-width: none; }
.einst-subtabs--vz .cs-wrap { margin-inline-start: 0; flex: 1 1 100%; }
}
.einst-pane {
display: flex; flex-direction: column;
--einst-stapel: var(--space-4);
gap: var(--einst-stapel);
min-height: 70vh;
}
.einst-pane .einst-intro { max-width: var(--einst-karte); }
.einst-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.einst-card-sec-title { margin: 0 0 var(--space-2); font-size: var(--fs-section, 16px); font-weight: var(--fw-semibold); color: var(--color-text); }
.einst-fields { display: flex; flex-direction: column; }
.einst-saved { display: inline-flex; }
.einst-saved .ui-ico img { width: 16px; height: 16px; }
.einst-row-error {
grid-column: 1 / -1; font-size: var(--fs-meta, 12px);
color: var(--status-danger-fg); padding-top: var(--space-1);
}
.app-scope .set-row--stapel .einst-textarea { min-height: 132px; }
.einst-farbe {
display: flex; align-items: center; gap: var(--space-2); min-width: 0;
grid-column: 1; width: var(--set-feld, 100%); max-width: 100%;
}
.einst-farbe-tupfer {
flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: none; cursor: pointer;
}
.einst-farbe-tupfer:disabled { cursor: default; opacity: .6; }
@media (max-width: 999px) {
.einst-farbe-tupfer { width: var(--touch-ziel); height: var(--touch-ziel); }
}
.einst-farbe-tupfer::-webkit-color-swatch-wrapper { padding: 2px; }
.einst-farbe-tupfer::-webkit-color-swatch { border: none; border-radius: 3px; }
.einst-farbe-hex {
flex: 1 1 auto; min-width: 0; max-width: 132px;
font-family: var(--font-mono, ui-monospace, monospace);
}
.einst-bild { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.einst-bild-vorschau {
flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
width: 200px; height: 72px; padding: var(--space-1-5);
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background-color: var(--color-surface);
background-image:
linear-gradient(45deg, var(--lod-gray-100) 25%, transparent 25%, transparent 75%, var(--lod-gray-100) 75%),
linear-gradient(45deg, var(--lod-gray-100) 25%, transparent 25%, transparent 75%, var(--lod-gray-100) 75%);
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
}
.einst-bild-vorschau img { max-width: 100%; max-height: 100%; object-fit: contain; }
.einst-row-gesperrt {
grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-1);
font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
padding-top: var(--space-1);
}
.einst-row-gesperrt .ui-ico img { width: 14px; height: 14px; opacity: .7; }
.einst-html-lesen {
max-height: 320px; overflow-y: auto;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--lod-gray-100); border-radius: var(--radius-md);
background: var(--lod-gray-50);
font-size: var(--fs-body); color: var(--color-text);
}
.einst-html-lesen.is-leer { color: var(--color-text-muted); font-style: italic; }
.einst-html-lesen img { max-width: 100%; height: auto; }
.einst-verlauf { display: flex; flex-direction: column; gap: var(--space-3); }
.einst-verlauf-tag { display: flex; flex-direction: column; gap: var(--space-2); }
.einst-verlauf-tag-titel {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: baseline; gap: var(--space-2);
margin: 0; padding: var(--space-1) 0;
background: var(--color-bg-surface);
font-size: var(--fs-caption); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted);
}
.einst-verlauf-tag-zahl { font-weight: var(--fw-regular, 400); text-transform: none; letter-spacing: 0; color: var(--lod-gray-400); }
.einst-verlauf-filter { display: block; }
.einst-verlauf-filter input { width: 100%; }
.einst-verlauf-leerfilter { margin: 0; font-size: var(--fs-body); color: var(--color-text-muted); }
.einst-verlauf-block { padding: var(--space-3); border-radius: var(--radius-md); }
.einst-verlauf-kopf {
display: flex; align-items: center; gap: var(--space-2);
padding-bottom: var(--space-2); margin-bottom: var(--space-2);
border-bottom: 1px solid var(--lod-gray-100);
}
.einst-verlauf-wann { margin-left: auto; font-size: var(--fs-meta, 12px); color: var(--color-text-muted); white-space: nowrap; }
.einst-verlauf-avatar { display: inline-flex; flex-shrink: 0; }
.einst-verlauf-wer { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); }
.einst-verlauf-betrifft { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.einst-verlauf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.einst-verlauf-zeile {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
font-size: var(--fs-body);
}
.einst-verlauf-zeile .ui-ico img { width: 14px; height: 14px; opacity: .55; }
.einst-verlauf-feld { flex: 1 1 100%; font-weight: var(--fw-medium, 500); color: var(--color-text); }
.einst-verlauf-wert {
max-width: 100%; overflow-wrap: anywhere;
padding: 2px var(--space-1); border-radius: var(--radius-sm);
background: var(--lod-gray-50); color: var(--color-text-muted);
}
.einst-verlauf-nach { color: var(--color-text); }
.einst-verlauf-zeile.is-kritisch .einst-verlauf-feld { border-left: 2px solid var(--status-warning-fg); padding-left: var(--space-2); }
.einst-verlauf-zurueck { margin-left: auto; flex-shrink: 0; opacity: .45; }
.einst-verlauf-zeile:hover .einst-verlauf-zurueck,
.einst-verlauf-zurueck:hover,
.einst-verlauf-zurueck:focus-visible { opacity: 1; }
@media (hover: none) {
.einst-verlauf-zurueck { opacity: 1; }
}
.einst-verlauf-detail { flex: 1 1 100%; display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-1); }
.einst-verlauf-detail-zeile {
font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
overflow-wrap: anywhere; padding-left: var(--space-2);
border-left: 2px solid var(--lod-gray-200);
}
.einst-verlauf-detail-art { font-weight: var(--fw-semibold); }
.einst-verlauf-detail-namen { color: var(--color-text); }
.einst-verlauf-detail-felder { margin-left: var(--space-1); font-family: var(--font-mono, ui-monospace, monospace); }
.einst-verlauf-detail-zeile.is-neu { border-left-color: var(--status-success-fg); }
.einst-verlauf-detail-zeile.is-weg { border-left-color: var(--status-danger-fg); }
.einst-verlauf-detail-zeile.is-mehr { border-left-color: transparent; font-style: italic; }
.einst-intro .einst-verlauf-btn { margin-left: auto; flex-shrink: 0; }
@media (max-width: 999px) {
.einst-intro { flex-wrap: wrap; }
.einst-intro .einst-verlauf-btn { margin-left: 52px; }
}
@media (max-width: 599px) {
.einst-intro .einst-verlauf-btn { margin-left: 0; }
.einst-verlauf-block { padding: var(--space-2); }
}
.einst-liste { display: flex; flex-direction: column; gap: var(--space-2); }
.einst-liste-actions { flex-shrink: 0; }
.einst-liste-loading, .einst-liste-empty { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); padding: var(--space-2) 0; }
.einst-liste-rows { display: flex; flex-direction: column; }
.einst-matrix { display: flex; flex-direction: column; padding: var(--space-1) 0 var(--space-2); }
.einst-matrix-zeile {
display: grid;
grid-template-columns:
var(--set-info, 20px)
minmax(0, calc(var(--set-label, 240px) - var(--set-info, 20px) - var(--space-3, 12px)))
repeat(var(--einst-matrix-cols, 2), minmax(0, 1fr));
gap: var(--space-3);
align-items: center;
padding: var(--space-2) 0;
}
.einst-matrix-info { display: flex; align-items: center; justify-content: center; min-width: 0; }
.einst-matrix-zeile + .einst-matrix-zeile { border-top: 1px solid var(--color-border-light); }
.einst-matrix-kopf {
padding-bottom: var(--space-1-5);
border-bottom: 1px solid var(--lod-gray-200);
font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps, .08em); text-transform: uppercase; color: var(--lod-gray-500);
}
.einst-matrix-kopf .einst-matrix-sp { display: flex; align-items: center; gap: var(--space-1); }
.einst-matrix-zl {
display: flex; align-items: center; gap: var(--space-1); min-width: 0;
font-size: var(--fs-meta, 12px); font-weight: var(--fw-medium); color: var(--color-text);
}
.einst-matrix-zelle { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.einst-matrix-zelle .einst-input { flex: 1; min-width: 0; }
.einst-matrix-einheit { flex-shrink: 0; font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.einst-matrix-zelle.is-fehlt { color: var(--status-danger-fg); font-weight: var(--fw-semibold); }
@media (max-width: 599px) {
.einst-matrix-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--space-1-5); }
.einst-matrix-kopf, .einst-matrix-info { display: none; }
}
.einst-kat-werkzeug {
display: flex; align-items: center; gap: var(--space-3);
padding: 0 0 var(--space-2-5);
}
.einst-kat-vorgaben {
display: flex; justify-content: flex-start;
padding: 0 0 var(--space-2-5);
}
.einst-kat-vorgaben.ist-leer {
padding: var(--space-3) 0 0; justify-content: center;
}
.einst-kat-suche {
display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0;
padding: 0 var(--space-2-5); height: 32px;
background: #fff; border: 1px solid var(--lod-gray-200); border-radius: var(--radius-md);
}
.einst-kat-suche:focus-within { border-color: var(--brand-default); box-shadow: var(--lod-shadow-focus); }
@media (max-width: 999px) {
.einst-kat-suche { height: var(--touch-ziel); }
}
.einst-kat-suche .ui-ico img { opacity: .5; }
@media (max-width: 999px) {
.app-scope .einst-kat-sucheingabe { min-height: var(--touch-ziel); }
}
.app-scope .einst-kat-sucheingabe {
flex: 1; min-width: 0; height: 100%;
border: none; background: none; outline: none; padding: 0;
font-size: var(--fs-body); color: var(--color-text);
}
.einst-kat-treffer { flex-shrink: 0; font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.einst-kat-keintreffer {
margin: 0; padding: var(--space-4) 0; text-align: center;
font-size: var(--fs-body); color: var(--color-text-muted);
}
.einst-kat-mehr { margin-top: var(--space-2); align-self: flex-start; }
.einst-kat-gruppen { display: flex; flex-direction: column; }
.einst-kat-gruppe:not(:first-child) { margin-top: var(--space-2); }
.einst-kat-gruppe-kopf {
display: flex; align-items: center; gap: var(--space-2-5); width: 100%;
min-height: 40px; padding: var(--space-2) var(--space-2-5);
background: none; border: 0;
border-bottom: 1px solid var(--color-border-light);
cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.einst-kat-gruppe-kopf:hover { background: var(--lod-gray-50, #f7f8fa); }
.einst-kat-gruppe-kopf:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); border-radius: var(--radius-sm); }
.einst-kat-gruppe-chev { flex-shrink: 0; width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-soft, ease); }
.einst-kat-gruppe-chev img { width: 14px; height: 14px; opacity: .55; }
.einst-kat-gruppe.is-zu .einst-kat-gruppe-chev { transform: rotate(-90deg); }
.einst-kat-gruppe-name { font-size: var(--fs-body, 13px); font-weight: var(--fw-semibold); color: var(--color-text); }
.einst-kat-gruppe-zahl {
margin-left: auto; flex-shrink: 0;
min-width: 22px; padding: 1px var(--space-1-5);
border-radius: var(--radius-pill);
background: var(--lod-gray-100, #eef0f3); color: var(--color-text-muted);
font-size: var(--fs-badge, 11px); font-weight: var(--fw-semibold); text-align: center;
}
.einst-kat-table {
display: flex; flex-direction: column;
--einst-kat-sw: 52px; --einst-kat-akt: 32px;
--einst-kat-cols: minmax(0, 1fr) var(--einst-kat-sw) var(--einst-kat-akt);
}
.einst-kat-table.has-regeln { --einst-kat-cols: minmax(0, 1fr) minmax(0, 1.4fr) var(--einst-kat-sw) var(--einst-kat-akt); }
.einst-kat-table.has-konto { --einst-kat-cols: minmax(0, 1fr) 150px var(--einst-kat-sw) var(--einst-kat-akt); }
.einst-kat-table.has-konto.has-regeln { --einst-kat-cols: minmax(0, 1fr) 150px minmax(0, 1.2fr) var(--einst-kat-sw) var(--einst-kat-akt); }
.einst-kat-head, .einst-kat-row {
display: grid; grid-template-columns: var(--einst-kat-cols);
align-items: center; gap: var(--space-3);
}
.einst-kat-head {
padding: 0 var(--space-2-5) var(--space-1-5);
font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps, .08em); text-transform: uppercase; color: var(--lod-gray-500);
border-bottom: 1px solid var(--lod-gray-200);
}
.einst-kat-c-art { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.einst-kat-c-konto, .einst-kat-c-regeln { min-width: 0; display: flex; align-items: center; gap: var(--space-1-5); }
.einst-kat-c-sw { display: flex; align-items: center; justify-content: center; }
.einst-kat-c-akt { display: flex; align-items: center; justify-content: flex-end; }
.einst-kat-leer { font-size: var(--fs-body); font-weight: var(--fw-regular, 400); color: var(--lod-gray-400); }
.einst-kat-row {
min-height: 52px; padding: var(--space-2) var(--space-2-5);
cursor: pointer; border-radius: var(--radius-md);
}
.einst-kat-row + .einst-kat-row { border-top: 1px solid var(--lod-gray-100); }
.einst-kat-row:hover { background: var(--lod-gray-50); }
.einst-kat-row:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.einst-kat-row.is-inaktiv { opacity: .6; }
.einst-kat-row.is-inaktiv .einst-kat-name { color: var(--lod-gray-500); }
.einst-kat-row.is-nurlesen { cursor: default; }
.einst-kat-row.is-nurlesen:hover { background: transparent; }
.einst-kat-chip {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; flex-shrink: 0;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--art-farbe, var(--lod-gray-400)) 14%, transparent);
}
.einst-kat-ico {
display: inline-block; width: 18px; height: 18px;
background-color: var(--art-farbe, var(--lod-gray-500));
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
.einst-kat-chip--preview { width: 40px; height: 40px; }
.einst-kat-chip--preview .einst-kat-ico { width: 22px; height: 22px; }
.einst-kat-chip--drawer { width: 28px; height: 28px; }
.einst-kat-name {
font-size: var(--fs-body); font-weight: var(--fw-medium, 500); color: var(--color-text);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.einst-kat-name-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.einst-kat-name-zeile { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.einst-kat-unter {
font-size: var(--fs-meta, 12px); color: var(--lod-gray-500);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.einst-kat-badges { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; overflow: hidden; }
.einst-kat-schnell { flex-shrink: 0; }
.einst-kat-edit { flex-shrink: 0; }
.einst-row-badge {
display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2);
font-size: var(--fs-meta, 12px); font-weight: var(--fw-semibold);
background: var(--lod-gray-100); color: var(--lod-gray-700);
border-radius: var(--radius-pill-sm); white-space: nowrap;
}
.einst-row-badge--konto { background: var(--lod-darkblue-50); color: var(--lod-darkblue); }
.einst-row-badge--angepasst { background: var(--lod-darkblue-50); color: var(--lod-darkblue); flex-shrink: 0; }
.einst-row-badge--off { background: var(--status-danger-soft, #fdecea); color: var(--lod-danger); }
.einst-row-badge[style*="--typ-farbe"] { background: color-mix(in srgb, var(--typ-farbe) 14%, #fff); color: var(--typ-farbe); }
.einst-konto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-4);
align-items: start;
}
.einst-konto-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); text-align: left; }
.einst-konto-card.is-inaktiv { opacity: .65; }
.einst-konto-head { display: flex; align-items: center; gap: var(--space-2); }
.einst-konto-name { font-size: var(--fs-card-title, 14px); font-weight: var(--fw-semibold); color: var(--color-text); flex: 1; min-width: 0; }
.einst-konto-card[data-kartenklick] { cursor: pointer; }
.einst-konto-card[data-kartenklick]:hover { border-color: var(--color-border-strong, var(--lod-gray-300)); }
.einst-konto-card[data-kartenklick]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.einst-konto-badges { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.einst-konto-vorschau {
position: relative; overflow: hidden;
height: 150px; border: 1px solid var(--lod-gray-100); border-radius: var(--radius-sm);
background: #fff;
}
.einst-konto-frame { display: block; border: 0; transform-origin: top left; }
.einst-konto-vorschau.is-beschnitten::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
background: linear-gradient(rgba(255, 255, 255, 0), #fff);
pointer-events: none;
}
.einst-konto-hinweis {
padding: var(--space-2) var(--space-3);
font-size: var(--fs-meta); color: var(--color-warning-fg);
background: var(--color-warning-bg); border: 1px solid var(--color-warning-border);
border-radius: var(--radius-md);
min-width: 0; overflow-wrap: anywhere;
}
.einst-konto-zeit {
font-size: var(--fs-meta); color: var(--lod-gray-500);
min-width: 0; overflow-wrap: anywhere;
}
.einst-konto-zeit[data-zeit-art="abgelaufen"],
.einst-konto-zeit[data-zeit-art="unklar"] {
padding: var(--space-1-5) var(--space-3);
color: var(--color-warning-fg);
background: var(--color-warning-bg); border: 1px solid var(--color-warning-border);
border-radius: var(--radius-md);
}
.einst-konto-kpis { display: flex; gap: var(--space-5); }
.einst-konto-kpi { display: flex; flex-direction: column; gap: 2px; }
.einst-konto-kpi-wert { font-size: 22px; font-weight: var(--fw-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; }
.einst-konto-zeilen { display: flex; flex-direction: column; gap: var(--space-1-5); }
.einst-konto-zeile { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.einst-konto-zeile-label {
flex: 0 0 auto; min-width: 148px;
font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps, .08em); text-transform: uppercase;
color: var(--lod-gray-500);
}
.einst-konto-zeile-wert {
flex: 1 1 auto; min-width: 0;
font-size: var(--fs-card-title, 14px); color: var(--color-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.einst-konto-kpi-label {
font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps, .08em); text-transform: uppercase;
color: var(--lod-gray-500);
}
.einst-konto-foot {
display: flex; align-items: center; gap: var(--space-2);
border-top: 1px solid var(--lod-gray-100); padding-top: var(--space-3); margin-top: auto;
}
.einst-konto-foot:has(.einst-konto-arten:empty) {
border-top: 0; padding-top: 0; margin-top: var(--space-1);
}
.einst-konto-arten { display: flex; flex-wrap: wrap; gap: var(--space-1-5); min-width: 0; margin-right: auto; }
.einst-konto-arten-leer { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.setx { display: flex; flex-direction: column; padding: var(--space-1) var(--space-1) var(--space-3); }
.setx-row-fehler {
grid-column: 1 / -1; padding-top: 2px;
font-size: var(--fs-meta, 12px); line-height: 1.4; color: var(--status-danger-fg);
}
.app-scope .setx-textarea { width: 100%; min-height: 92px; resize: vertical; font-size: var(--fs-body); line-height: 1.55; }
.einst-cell-label { font-size: var(--fs-body); font-weight: var(--fw-medium, 500); color: var(--color-text); }
.setx-konto-hint { grid-column: 1 / -1; padding: var(--space-1) 0 var(--space-2); }
.setx-ph-hinweis {
grid-column: 1 / -1; padding-top: 2px;
font-size: var(--fs-meta, 12px); line-height: 1.45; color: var(--color-text-muted);
}
.setx-ergebnis {
grid-column: 1 / -1; display: flex; gap: var(--space-1, 4px);
padding-top: 2px; font-size: var(--fs-meta, 12px); line-height: 1.45;
}
.setx-ergebnis-label { flex: 0 0 auto; color: var(--color-text-muted); }
.setx-ergebnis-wert { flex: 1 1 auto; min-width: 0; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.setx-ergebnis--block { flex-direction: column; gap: 2px; }
.setx-ergebnis--block .setx-ergebnis-wert {
white-space: pre-line;
padding: var(--space-1-5) var(--space-2);
border-left: 2px solid var(--color-border);
background: var(--lod-gray-50);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.setx-stand {
grid-column: 1 / -1; padding-top: 2px;
font-size: var(--fs-meta, 12px); line-height: 1.45; color: var(--color-text-muted);
}
.setx-stand.is-angepasst { color: var(--color-text-secondary); font-weight: var(--fw-semibold, 600); }
.setx-firmensitz-woche {
margin: 0; font-size: var(--fs-meta, 12px); line-height: 1.5; color: var(--color-text-muted);
}
.setx-firmensitz-woche-alt { display: block; margin-top: var(--space-1); color: var(--status-warning-fg); }
.einst-treffer {
grid-column: 1 / -1; margin: 0; padding-top: 2px;
font-size: var(--fs-meta, 12px); line-height: 1.45; color: var(--color-text-muted);
}
.einst-treffer.is-warn { color: var(--status-warning-fg); font-weight: var(--fw-semibold, 600); }
.setx-zeitraum { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.setx-zeitraum-feld { flex: 1 1 170px; min-width: 150px; }
.setx-zeitraum-feld .app-date-field { display: flex; min-width: 0; }
.setx-zeitraum-feld .app-date-field-trigger { flex: 1 1 auto; min-width: 0; }
.setx-zeitraum-bis {
flex: 0 0 auto;
font-size: var(--fs-body, 13px); color: var(--color-text-muted);
}
.setx-seg { height: auto; flex-wrap: wrap; row-gap: var(--space-xxs); }
@media (max-width: 640px) {
.setx-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xxs); }
.setx-seg .seg-item { justify-content: center; min-width: 0; }
}
.setx-regeln {
position: relative;
display: flex; flex-direction: column; gap: var(--space-2);
margin: var(--space-1) 0 var(--space-2);
padding: var(--space-3) var(--space-3) var(--space-2-5);
border: var(--surface-border);
border-radius: var(--surface-radius);
background: var(--surface-bg);
--cs-polster: 0 var(--space-8) 0 var(--space-2);
}
.setx-regeln-satz { margin: 0; }
.setx-regeln-info { position: absolute; top: var(--space-2); right: var(--space-2); }
.setx-mitglieder { margin-top: var(--space-4); }
.setx-mitglieder-h4 { margin: 0 0 var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.setx-mitglieder-satz { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.setx-mitglieder-liste { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.setx-mitglied { padding: var(--space-1) 0; border-top: 1px solid var(--color-border-light); }
.setx-mitglied--inaktiv { color: var(--color-text-muted); }
.setx-mitglied-hinweis { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.setx-regeln-liste { display: flex; flex-direction: column; }
.setx-regel-gruppe {
display: flex; flex-direction: column; gap: var(--space-1-5);
padding: var(--space-2-5) var(--space-3);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.setx-regel-gruppe-kopf {
display: grid; align-items: center; gap: var(--space-2);
grid-template-columns: minmax(0, 200px) minmax(0, 200px) minmax(0, 1fr);
}
.setx-regel-gruppe-werte { display: flex; flex-direction: column; }
.setx-regel {
display: grid; align-items: center; gap: var(--space-2);
grid-template-columns: 38px minmax(0, 1fr) auto;
padding: var(--space-1) var(--space-1-5);
border-radius: var(--radius-sm);
transition: background-color 120ms ease;
}
.setx-regel:hover { background: var(--color-bg); }
.setx-regel:focus-within { background: var(--color-bg); }
.setx-regeln-verb { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.setx-regeln-verb::before,
.setx-regeln-verb::after { content: ''; height: 1px; background: var(--color-border); }
.setx-regeln-verb::before { width: var(--space-4); }
.setx-regeln-verb::after { flex: 1; }
.setx-regel-verb {
justify-self: center;
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; box-sizing: border-box;
padding: 1px var(--space-1-5);
font-size: var(--fs-badge, 11px); font-weight: var(--fw-medium, 500); line-height: 1.6;
color: var(--color-text-muted);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-circular);
}
.setx-regel-verb--ausser {
font-weight: var(--fw-semibold, 600);
color: var(--color-text-secondary);
border-color: var(--color-border-strong);
}
.setx-regel-verb--start { visibility: hidden; }
.setx-regel-gruppe.is-ausschluss { border-left-color: var(--color-border-strong); }
.setx-regel-c { min-width: 0; display: flex; align-items: center; gap: var(--space-1); }
.setx-regel-c--akt { justify-content: flex-end; gap: 0; }
.app-scope .setx-regel-gruppe-kopf .select[data-cs-trigger],
.app-scope .setx-regel .setx-regel-wert { width: 100%; min-width: 0; }
.app-scope .setx-regeln .setx-regel-gruppe-weg { margin-left: var(--space-1); }
.setx-regel-vergleich-fest {
font-size: var(--fs-meta, 12px); color: var(--color-text-muted); white-space: nowrap;
}
.setx-regel.is-offen { background: var(--status-warning-bg); }
.setx-regel-fehlt {
grid-column: 2 / -1;
font-size: var(--fs-meta, 12px); line-height: 1.4; color: var(--status-warning-fg);
}
.setx-regeln-fuss { display: flex; align-items: center; gap: var(--space-2); }
.setx-regeln-neu { flex: 0 0 auto; }
.app-scope .setx-regeln button.app-cta-btn.setx-regeln-neu:not(.btn),
.app-scope .setx-regeln button.app-cta-btn.setx-regel-wert-neu:not(.btn) {
border: 1px dashed var(--color-border-hover);
border-radius: var(--radius-md);
color: var(--color-text-secondary);
}
.app-scope .setx-regeln button.app-cta-btn.setx-regeln-neu:not(.btn):hover:not(:disabled),
.app-scope .setx-regeln button.app-cta-btn.setx-regel-wert-neu:not(.btn):hover:not(:disabled) {
border-color: var(--brand-default);
color: var(--brand-default);
background: var(--brand-light);
}
.setx-regel-gruppe .setx-regel-wert-neu {
align-self: flex-start;
margin-left: calc(38px + var(--space-2) + var(--space-1-5));
}
.setx-regeln-treffer {
margin: 0; min-width: 0;
padding-top: var(--space-2);
border-top: 1px solid var(--color-border-light);
font-size: var(--fs-meta, 12px); line-height: 1.45; color: var(--color-text-muted);
}
.setx-regeln-treffer.is-warn { color: var(--status-warning-fg); font-weight: var(--fw-semibold, 600); }
.setx-regeln-leer .empty-state { padding: var(--space-2) 0; }
.setx-regeln-leer-text {
margin: 0; font-size: var(--fs-meta, 12px); line-height: 1.45; color: var(--color-text-muted);
}
@media (max-width: 640px) {
.setx-regel-gruppe-kopf { grid-template-columns: minmax(0, 1fr) auto; }
.setx-regel-gruppe-kopf .setx-regel-c--akt { grid-row: 1; grid-column: 2; }
.setx-regel-c--vergleich { grid-column: 1 / -1; }
}
.setx-hinweis {
margin: 0; font-size: var(--fs-meta, 12px); line-height: 1.5; color: var(--color-text-muted);
}
.setx-footer {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
margin-top: var(--space-5); padding-top: var(--space-4);
border-top: 1px solid var(--lod-border);
}
.setx-footer-actions { display: inline-flex; gap: var(--space-2); }
.setx-appearance { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-3) 0; }
.setx-appearance-preview { display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5); flex-shrink: 0; }
.setx-appearance-hint { font-size: var(--fs-badge, 11px); color: var(--lod-gray-500); }
.setx-appearance-ctl { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; }
.setx-appearance-symlabel { margin-top: var(--space-2); }
.setx-satz-hint { display: block; line-height: 1.5; margin-top: 2px; }
.setx-swatches { display: flex; flex-wrap: wrap; gap: var(--space-1-5); align-items: center; }
.setx-swatch img { pointer-events: none; filter: brightness(0) invert(1); }
.setx-swatch--custom img { filter: none; opacity: .75; }
.setx-swatch {
width: 24px; height: 24px; border-radius: var(--radius-circular);
border: 2px solid transparent; cursor: pointer; padding: 0; flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.setx-swatch:hover { transform: scale(1.1); }
.setx-swatch.is-sel { border-color: var(--brand-default); box-shadow: 0 0 0 2px var(--brand-light); }
.setx-swatch--custom {
display: inline-flex; align-items: center; justify-content: center;
background: var(--lod-gray-100); color: var(--lod-gray-600);
font-size: var(--fs-body); font-weight: var(--fw-bold);
position: relative; overflow: hidden;
}
.setx-swatch--custom .einst-color { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: none; }
.einst-icon-grid {
display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: var(--space-1);
padding: var(--space-2);
background: var(--lod-gray-50); border: 1px solid var(--lod-border); border-radius: var(--radius-md);
}
.einst-icon-grid[hidden] { display: none; }
.einst-icon-opt {
width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
}
.einst-icon-opt:hover { background: var(--color-surface); border-color: var(--lod-border); }
.einst-icon-opt.is-sel {
background: var(--lod-darkblue); border-color: var(--lod-darkblue);
box-shadow: 0 0 0 2px var(--brand-light);
}
.einst-icon-opt.is-sel img { filter: brightness(0) invert(1); }
.einst-color {
width: 40px; height: 28px; padding: 2px; cursor: pointer;
border: 1px solid var(--lod-gray-200); border-radius: var(--radius-md); background: var(--color-surface);
}
.einst-color::-webkit-color-swatch-wrapper { padding: 0; }
.einst-color::-webkit-color-swatch { border: none; border-radius: var(--radius-sm); }
@media (max-width: 1399px) {
.einst-konto-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.einst-kat-table.has-konto { --einst-kat-cols: minmax(0, 1fr) 120px var(--einst-kat-sw) var(--einst-kat-akt); }
.einst-kat-table.has-konto.has-regeln { --einst-kat-cols: minmax(0, 1fr) 120px minmax(0, 1fr) auto auto; }
}
@media (max-width: 999px) {
.einst-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.einst-kat-table { --einst-kat-cols: minmax(0, 1fr) auto auto; }
.einst-kat-table.has-konto, .einst-kat-table.has-konto.has-regeln { --einst-kat-cols: minmax(0, 1fr) 120px auto auto; }
.einst-kat-table.has-regeln { --einst-kat-cols: minmax(0, 1fr) auto auto; }
.einst-kat-c-regeln { display: none; }
.einst-nav {
position: static;
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-1) var(--space-2);
max-height: none;
overflow: visible;
}
.einst-nav-group { grid-column: 1 / -1; }
.einst-nav-group:not(:first-child) { margin-top: var(--space-2); padding-top: var(--space-3); }
.einst-search-panel { left: 0; right: 0; width: auto; max-width: none; }
.einst-sec, .einst-pane .einst-intro { max-width: none; }
.einst-layout, .einst-root .app-page-toolbar { max-width: none; margin-inline: 0; }
}
@media (max-width: 599px) {
.einst-wrap { padding: var(--space-4) 0 var(--space-6); }
.einst-input { width: 100%; max-width: none; }
.einst-sec-toggle { min-height: 44px; }
.einst-sec-kopfzeile { flex-wrap: wrap; }
.app-scope .einst-reset { min-width: 40px; min-height: 40px; }
.einst-kat-badges { display: none; }
.einst-kat-table, .einst-kat-table.has-konto,
.einst-kat-table.has-regeln, .einst-kat-table.has-konto.has-regeln { --einst-kat-cols: minmax(0, 1fr) auto auto; }
.einst-kat-c-konto { display: none; }
.einst-kat-head { display: none; }
.einst-konto-grid { grid-template-columns: minmax(0, 1fr); }
.setx-input { width: 100%; max-width: none; }
}
.einst-sec { overflow: hidden; }
.einst-sec { max-width: var(--einst-karte); }
.einst-sec-head {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: var(--space-3) calc(var(--space-4) + 32px) var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
transition: border-bottom-color var(--duration-flow) var(--ease-standard);
}
.einst-sec { position: relative; }
.einst-sec-infoslot {
position: absolute; top: var(--space-3); right: var(--space-4);
height: 28px; display: inline-flex; align-items: center;
}
.einst-sec.is-zu .einst-sec-head { border-bottom-color: transparent; }
.einst-sec-switch { flex-shrink: 0; margin-left: auto; }
.einst-sec--aus .einst-card-sec-title,
.einst-sec--aus .einst-sec-thema { color: var(--color-text-muted); }
.einst-pruef-ergebnis {
display: flex; flex-direction: column; gap: var(--space-2);
margin-top: var(--space-3); padding-top: var(--space-3);
border-top: 1px solid var(--color-border-subtle, var(--lod-gray-100));
font-size: var(--fs-meta, 12px); line-height: 1.5;
}
.einst-pruef-ergebnis[hidden] { display: none; }
.einst-pruef-laeuft { color: var(--color-text-muted); }
.einst-pruef-zeile { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.einst-pruef-zeile .ui-ico { flex-shrink: 0; margin-top: 1px; }
.einst-pruef-zeile.is-ok { color: var(--status-success-fg, var(--color-text)); }
.einst-pruef-zeile.is-fehler { color: var(--status-danger-fg); }
.einst-pruef-hinweis {
color: var(--color-text-secondary); padding-left: calc(20px + var(--space-2));
overflow-wrap: anywhere;
}
.einst-pruef-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.einst-pruef-chips-titel { color: var(--color-text-muted); }
.app-scope .einst-pruef-chip {
display: inline-flex; align-items: baseline; gap: var(--space-1-5);
padding: 3px var(--space-2-5); cursor: pointer;
border: 1px solid var(--color-border); border-radius: var(--radius-pill);
background: var(--color-surface); color: var(--color-text);
font-size: var(--fs-meta, 12px); font-family: inherit;
max-width: 100%; min-width: 0;
}
.app-scope .einst-pruef-chip:hover {
background: var(--lod-gray-50);
border-color: var(--color-border-strong, var(--color-border));
}
.einst-pruef-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.einst-pruef-chip.is-lesen { cursor: default; background: transparent; }
.app-scope .einst-pruef-chip.is-lesen:hover {
background: transparent; border-color: var(--color-border);
}
.einst-pruef-chip-intern { color: var(--color-text-muted); font-size: var(--fs-badge, 11px); }
.einst-weg {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1-5) var(--space-2);
margin: 0 0 var(--space-3); min-width: 0;
font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
}
.einst-weg-titel { flex-shrink: 0; }
.einst-weg-pfad {
display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px;
min-width: 0; color: var(--color-text);
}
.einst-weg-teil {
padding: 1px var(--space-1-5); border-radius: var(--radius-sm);
background: var(--lod-gray-100); overflow-wrap: anywhere;
}
.einst-weg-trenner { color: var(--color-text-muted); }
.einst-weg-marke { flex-shrink: 0; }
.einst-weg.is-fehler { color: var(--status-danger-fg); }
.einst-weg.is-fehler .ui-ico { flex-shrink: 0; }
.abl-pfad { min-width: 0; }
.abl-designer { display: flex; flex-direction: column; gap: var(--space-3); }
.abl-faelle { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; align-self: flex-start; }
.abl-faelle-label { font-size: var(--fs-meta); color: var(--color-text-muted); }
.abl-split {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: var(--space-3);
}
.abl-spalte {
display: flex; flex-direction: column; min-width: 0;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.abl-spalte-kopf {
display: flex; align-items: center; gap: var(--space-2); min-width: 0;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.abl-wurzel {
display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0;
font-size: var(--fs-meta); font-weight: var(--fw-semibold);
color: var(--color-text-muted); overflow-wrap: anywhere;
}
.abl-wurzel .ui-ico { flex-shrink: 0; }
.abl-marke { margin-left: auto; flex-shrink: 0; }
.abl-pane-titel { font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.abl-spalte-fuss { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3) var(--space-3); }
.abl-knoten-liste { padding: var(--space-2) var(--space-2) var(--space-1); min-width: 0; }
.abl-knoten {
display: flex; align-items: center; gap: var(--space-1); min-width: 0;
margin-left: calc(var(--abl-tiefe, 0) * 20px);
border-radius: var(--radius-sm);
}
.abl-knoten > .ui-ico { flex-shrink: 0; color: var(--color-text-muted); }
.abl-griff {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; flex-shrink: 0; cursor: grab;
color: var(--color-text-muted); opacity: 0; transition: opacity .12s ease;
}
.abl-knoten:hover .abl-griff, .abl-knoten:focus-within .abl-griff { opacity: .7; }
.abl-griff:active { cursor: grabbing; }
.abl-seg {
flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-2); min-width: 0;
padding: var(--space-1) var(--space-2);
background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--color-text); font: inherit; text-align: left; cursor: pointer;
transition: background-color .12s ease, border-color .12s ease;
}
span.abl-seg { cursor: default; }
.abl-seg .ui-ico { flex-shrink: 0; color: var(--color-text-muted); }
button.abl-seg:hover { background: var(--color-surface-hover); border-color: var(--color-border); }
button.abl-seg:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.abl-knoten-name { overflow-wrap: anywhere; min-width: 0; }
.abl-knoten.is-platzhalter .abl-knoten-name { color: var(--color-brand); font-weight: var(--fw-medium); }
.abl-knoten-meta {
margin-left: auto; flex-shrink: 0; white-space: nowrap;
font-size: var(--fs-badge); color: var(--color-text-muted);
}
.abl-knoten.is-gewaehlt .abl-seg { background: var(--color-brand-soft); border-color: var(--color-brand); }
.abl-knoten.is-inaktiv { opacity: .5; }
.abl-knoten.is-inaktiv .abl-knoten-name { text-decoration: line-through; }
.abl-knoten-status {
flex-shrink: 0; margin-left: var(--space-2); white-space: nowrap;
padding: 1px var(--space-1-5); border-radius: var(--radius-pill);
font-size: var(--fs-badge);
}
.abl-knoten-status.is-da { color: var(--status-success-fg); background: var(--status-success-bg); }
.abl-knoten-status.is-neu { color: var(--color-text-muted); background: var(--color-bg-muted); }
.abl-abgleich-block { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.abl-abgleich {
display: flex; align-items: flex-start; gap: var(--space-1-5); margin: 0; min-width: 0;
font-size: var(--fs-meta); overflow-wrap: anywhere;
}
.abl-abgleich .ui-ico { flex-shrink: 0; }
.abl-abgleich.is-ok { color: var(--status-success-fg); }
.abl-abgleich.is-warn { color: var(--color-warning-fg); }
.abl-abgleich.is-info { color: var(--color-text-muted); }
.abl-abgleich-vorgabe { padding-top: var(--space-1); border-top: 1px solid var(--color-border); }
.abl-probe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.abl-probe-zeile { font-size: var(--fs-meta); color: var(--color-text-muted); overflow-wrap: anywhere; }
.abl-probe-zeile.is-geltend { color: var(--color-text); font-weight: var(--fw-medium); }
.abl-knoten.is-datei { padding: var(--space-1) var(--space-2); color: var(--color-text-muted); }
.abl-knoten.is-datei .abl-knoten-name { font-style: italic; }
.abl-knoten-liste .sortable-ghost { opacity: .4; }
.abl-pane-koerper { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: var(--space-3); min-width: 0; }
.abl-pane-hinweis, .abl-pane-fuss { margin: 0; font-size: var(--fs-meta); color: var(--color-text-muted); }
.abl-weg {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1);
margin: 0; min-width: 0; font-size: var(--fs-card-title); color: var(--color-text);
}
.abl-weg-teil {
padding: 2px var(--space-1-5); border-radius: var(--radius-sm);
background: var(--color-bg-muted); overflow-wrap: anywhere;
}
.abl-weg-trenner { color: var(--color-text-muted); }
.abl-feld { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-2); align-items: center; }
.abl-feld-label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-meta); color: var(--color-text-muted); }
.abl-feld-ctrl { min-width: 0; }
.abl-feld-check { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--fs-body); }
.abl-edit-weg { margin: 0; font-size: var(--fs-meta); color: var(--color-text-muted); overflow-wrap: anywhere; }
.abl-edit-weg.is-fehler { color: var(--status-danger-fg); }
.abl-edit-warnung {
display: flex; align-items: flex-start; gap: var(--space-1-5); margin: 0;
font-size: var(--fs-meta); color: var(--color-text-muted);
}
.abl-edit-warnung .ui-ico { flex-shrink: 0; }
.abl-edit-fuss {
display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
padding: var(--space-2) var(--space-3) var(--space-3);
border-top: 1px solid var(--color-border);
}
.abl-edit-fuss-spacer { flex: 1; }
.abl-edit-entfernen { color: var(--status-danger-fg); }
.abl-abweichung {
display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0;
padding: var(--space-2) var(--space-3);
font-size: var(--fs-meta); color: var(--color-warning-fg);
background: var(--color-warning-bg); border: 1px solid var(--color-warning-border);
border-radius: var(--radius-md);
}
.abl-abweichung .ui-ico { flex-shrink: 0; }
.abl-abweichung-text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.abl-reset { flex-shrink: 0; }
.abl-fehler {
display: flex; align-items: center; gap: var(--space-1-5); margin: 0; min-width: 0;
font-size: var(--fs-meta); color: var(--status-danger-fg); overflow-wrap: anywhere;
}
.abl-fehler .ui-ico { flex-shrink: 0; }
.abl-baum { min-width: 0; }
.abl-baum-zeile { padding: var(--space-1) var(--space-2); }
.abl-baum-zeile:hover { background: var(--color-surface-hover); }
.abl-baum-badge {
flex-shrink: 0; padding: 1px var(--space-1-5);
font-size: 10px; color: var(--color-brand);
background: var(--color-brand-soft); border-radius: var(--radius-pill);
}
.abl-baum-akt { display: inline-flex; gap: var(--space-1); margin-left: auto; opacity: 0; transition: opacity .12s ease; }
.abl-baum-zeile:hover .abl-baum-akt,
.abl-baum-zeile:focus-within .abl-baum-akt { opacity: 1; }
.abl-baum-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0; cursor: pointer;
background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--color-text-muted);
}
.abl-baum-btn:hover { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.abl-baum-btn.is-danger:hover { color: var(--status-danger-fg); border-color: var(--status-danger-fg); }
.abl-baum-eingabe {
display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
padding: var(--space-1) var(--space-2);
margin-left: calc(var(--abl-tiefe, 0) * 20px);
min-width: 0;
}
.abl-baum-eingabe > .ui-ico { flex-shrink: 0; color: var(--color-text-muted); }
.abl-baum-feld { max-width: 280px; min-width: 0; }
@media (max-width: 999px) {
.abl-split { grid-template-columns: minmax(0, 1fr); }
.abl-baum-akt { opacity: 1; }
.abl-griff { opacity: .7; }
}
@media (max-width: 599px) {
.abl-feld { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.abl-knoten, .abl-seg { flex-wrap: wrap; }
.abl-knoten-meta { flex-basis: 100%; margin-left: 0; white-space: normal; }
.abl-knoten, .abl-baum-eingabe { margin-left: calc(var(--abl-tiefe, 0) * 14px); }
}
.einst-sec-aus {
margin: 0; padding: var(--space-3) 0;
font-size: var(--fs-body); color: var(--color-text-muted);
}
.einst-sec--aus .einst-fields .set-gruppe { display: none; }
.einst-sec-toggle {
display: flex; flex-direction: column; align-items: stretch; gap: 2px;
flex: 1; min-width: 0; padding: 0;
background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.einst-sec-kopfzeile {
display: flex; align-items: center; gap: var(--space-2);
min-width: 0; min-height: 28px;
}
.einst-sec-kopfzeile:empty { display: none; }
.einst-sec-toggle:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); border-radius: var(--radius-sm); }
.einst-sec-chev {
flex-shrink: 0; width: 20px; height: 28px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: transform var(--duration-fast) var(--ease-soft, ease);
}
.einst-sec-chev img { width: 16px; height: 16px; opacity: .45; transition: opacity var(--duration-fast) var(--ease-soft, ease); }
.einst-sec.is-zu .einst-sec-chev { transform: rotate(-90deg); }
.einst-sec-head:hover .einst-sec-chev img { opacity: .85; }
.einst-sec-head .einst-card-sec-title {
margin: 0; font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -.01em;
flex-shrink: 0; white-space: nowrap;
}
.einst-sec-thema {
font-size: var(--fs-meta, 12px); font-weight: var(--fw-regular, 400); color: var(--color-text-muted);
line-height: 1.45; min-width: 0; max-width: 62ch;
}
.einst-sec-count {
flex-shrink: 0; margin-left: calc(var(--space-1) * -1);
min-width: 22px; padding: 1px var(--space-1-5);
border-radius: var(--radius-pill);
background: var(--lod-gray-100, #eef0f3); color: var(--color-text-muted);
font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-align: center;
}
.einst-sec-neu, .einst-sec-pruefen { flex-shrink: 0; margin-top: calc((28px - 32px) / 2); }
@media (max-width: 999px) {
.einst-sec-neu, .einst-sec-pruefen { margin-top: calc((28px - 38px) / 2); }
}
.einst-sec-toggle--fix { cursor: default; background: none; border: none; }
.einst-sec-toggle--fix:hover { background: none; }
.einst-sec--fix .einst-fields { display: block; }
.einst-sec .einst-fields { padding: var(--space-2) var(--space-4) var(--space-3); }
.einst-row-hilfe {
font-size: var(--fs-body); font-weight: var(--fw-regular, 400);
color: var(--color-text-secondary); line-height: 1.5; max-width: 88ch;
}
.app-scope .einst-textarea {
width: 100%; min-height: 92px; resize: vertical;
font-size: var(--fs-body); line-height: 1.55;
}
.einst-wplan-table {
display: flex; flex-direction: column;
border: 1px solid var(--lod-border-light);
border-radius: var(--radius-md);
overflow: hidden;
}
.einst-wplan-head,
.einst-wplan-row {
display: grid;
grid-template-columns: minmax(120px, 1.4fr) 92px repeat(4, minmax(96px, 1fr));
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
}
.einst-wplan-table--z2 .einst-wplan-head,
.einst-wplan-table--z2 .einst-wplan-row {
grid-template-columns: minmax(120px, 1.4fr) 92px repeat(2, minmax(96px, 1fr));
}
.einst-wplan-head {
background: var(--lod-gray-50, #f7f8fa);
border-bottom: 1px solid var(--lod-border-light);
font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps, .08em); text-transform: uppercase;
color: var(--lod-gray-500);
}
.einst-wplan-row + .einst-wplan-row { border-top: 1px solid var(--lod-gray-100, #eef0f3); }
.einst-wplan-row:hover { background: var(--lod-gray-50); }
.einst-wplan-row .einst-wplan-c-tag {
font-size: var(--fs-body); font-weight: var(--fw-medium, 500);
color: var(--color-text); text-transform: none; letter-spacing: normal;
}
.einst-wplan-row.is-aus .einst-wplan-c-tag { color: var(--color-text-muted); }
.einst-wplan-dot {
width: 6px; height: 6px; border-radius: var(--radius-circular);
background: var(--brand-default); flex-shrink: 0;
}
.app-scope .einst-wplan-zeit {
width: 100%; min-width: 0; text-align: center;
font-variant-numeric: tabular-nums;
}
.einst-wplan-row.is-aus .einst-wplan-zeit { opacity: .45; }
.einst-wplan-fuss {
margin: var(--space-2) 0 0; font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
}
.einst-wplan-loading { padding: var(--space-3); font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
@media (max-width: 1399px) {
.einst-wplan-head,
.einst-wplan-row { grid-template-columns: minmax(100px, 1.2fr) 84px repeat(4, minmax(84px, 1fr)); gap: var(--space-2); }
.einst-wplan-table--z2 .einst-wplan-head,
.einst-wplan-table--z2 .einst-wplan-row { grid-template-columns: minmax(100px, 1.2fr) 84px repeat(2, minmax(84px, 1fr)); }
}
@media (max-width: 999px) {
.einst-wplan-head { display: none; }
.einst-wplan-row {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: 'tag tag sw sw' 'von bis pv pb';
row-gap: var(--space-2);
}
.einst-wplan-table--z2 .einst-wplan-row {
grid-template-columns: 1fr 1fr;
grid-template-areas: 'tag sw' 'von bis';
}
.einst-wplan-c-tag { grid-area: tag; }
.einst-wplan-c-sw { grid-area: sw; justify-self: end; }
}
#einst-banner:empty { display: none; }
.app-scope .einst-nav-item {
padding: var(--space-2-5) var(--space-4);
border-left: 3px solid transparent;
}
.app-scope .einst-nav-item.is-active { border-left-color: var(--lod-darkblue); }
.app-scope .einst-nav-group { padding: var(--space-2) var(--space-4) var(--space-1); }
.einst-setx-row--voll { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; }
.einst-setx-row--voll .einst-setx-label {
font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text);
}
.einst-wplan--sub .einst-wplan-head,
.einst-wplan--sub .einst-wplan-row {
grid-template-columns: minmax(88px, 1fr) 72px repeat(4, minmax(72px, 1fr));
gap: var(--space-2); padding: var(--space-1-5) var(--space-2);
}
.einst-wplan--sub .einst-wplan-fuss { display: none; }
.einst-wplan--sub { overflow-x: auto; }
.einst-wplan--sub .einst-wplan-table { min-width: 560px; }
.app-scope .einst-wplan--sub .einst-wplan-zeit { padding-left: var(--space-1); padding-right: var(--space-1); }
.einst-row-badge--std {
background: var(--lod-darkblue); color: #fff; border-color: var(--lod-darkblue);
}
.einst-var-host { min-width: 0; grid-column: 1 / -1; }
.tvar-leiste { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-1-5); }
.set-row--editor .einst-var-host .tvar-leiste {
margin-top: -9px;
padding: var(--space-1-5) var(--space-2);
border: 1px solid var(--color-border);
border-top: none;
border-radius: 0 0 var(--radius-md) var(--radius-md);
background: var(--color-bg-muted);
}
.tvar-warnung {
font-size: var(--fs-meta, 12px); color: var(--status-warning-fg);
background: var(--status-warning-bg); border-radius: var(--radius-sm);
padding: 2px var(--space-2); min-width: 0;
}
.tvar-warnung[hidden] { display: none; }
.tvar-vorschau-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-1) var(--space-1) var(--space-3); }
.tvar-vorschau-hinweis { margin: 0; font-size: var(--fs-body); color: var(--color-text-secondary); }
.tvar-vorschau-warn { margin: 0; font-size: var(--fs-meta, 12px); color: var(--status-warning-fg); }
.tvar-vorschau-termin {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-3-5);
border: 1px solid var(--lod-border-light); border-radius: var(--radius-md);
background: var(--color-surface, #fff);
}
.tvar-vorschau-termin-bar { width: 4px; align-self: stretch; min-height: 28px; border-radius: var(--radius-pill-sm); background: var(--lod-darkblue); }
.tvar-vorschau-termin-titel { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); }
.tvar-vorschau-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--lod-gray-100, #eef0f3); border-radius: var(--radius-md); align-self: flex-start; }
.app-scope .tvar-seg-btn {
padding: var(--space-1) var(--space-3); border: none; background: transparent; cursor: pointer;
font-size: var(--fs-meta, 12px); font-weight: var(--fw-medium); color: var(--lod-gray-700); border-radius: var(--radius-sm);
}
.app-scope .tvar-seg-btn.is-active { background: var(--color-surface, #fff); color: var(--lod-darkblue); font-weight: var(--fw-semibold); box-shadow: var(--shadow-2, 0 1px 2px rgba(0,0,0,.08)); }
.tvar-vorschau-mail { border: 1px solid var(--lod-border-light); border-radius: var(--radius-md); overflow: hidden; background: #fff; flex: 1 1 auto; min-height: 0; display: flex; }
.tvar-vorschau-frame { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.tvar-vorschau-body--voll { flex: 1 1 auto; min-height: 0; }
.tvar-vorschau-betreff {
display: flex; align-items: baseline; gap: var(--space-2);
padding: var(--space-2) var(--space-3);
margin-bottom: var(--space-3);
border: 1px solid var(--lod-border-light);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
flex: 0 0 auto;
}
.tvar-vorschau-betreff-label {
flex: 0 0 auto;
font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em;
color: var(--color-text-muted);
}
.tvar-vorschau-betreff-text {
flex: 1 1 auto; min-width: 0;
font-size: var(--fs-body); font-weight: var(--fw-medium, 500); color: var(--color-text);
overflow-wrap: anywhere;
}
@media (max-width: 999px) {
.tvar-vorschau-frame { min-height: 320px; }
}
@media (max-width: 599px) {
.tvar-vorschau-betreff { flex-direction: column; gap: var(--space-1); }
}
@media (max-width: 599px) {
.tvar-leiste { gap: var(--space-1-5); }
.tvar-leiste .app-cta-btn { flex: 1 1 auto; }
.tvar-vorschau-frame { min-height: 260px; }
}
.einst-html { grid-column: 1 / -1; min-width: 0; width: 100%; }
.einst-html-host { max-width: 100%; }
.app-scope .sun-editor .se-btn-select { min-width: 116px; max-width: 148px; }
.app-scope .sun-editor .se-btn-select > span:first-child {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-scope .sun-editor .se-btn-select.se-btn-select-font-size { min-width: 92px; max-width: 108px; }
@container drawer (max-width: 760px) {
.app-scope .sun-editor .se-btn-select { min-width: 88px; max-width: 104px; }
.app-scope .sun-editor .se-btn-select.se-btn-select-font-size { min-width: 72px; max-width: 84px; }
.app-scope .sun-editor .se-toolbar { min-width: 0; }
}
.app-scope .einst-html-host .sun-editor,
.app-scope .einst-html-host .se-toolbar { min-width: 0; max-width: 100%; }
@media (max-width: 1199px) {
.app-scope .einst-html-host .sun-editor .se-btn-select { min-width: 88px; max-width: 104px; }
.app-scope .einst-html-host .sun-editor .se-btn-select.se-btn-select-font-size { min-width: 72px; max-width: 84px; }
}
.lod-richtext
.einst-html-host .se-toolbar { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.einst-html-host .se-wrapper-inner { font-family: var(--font-sans); }
.rt-ph {
display: inline-block;
padding: 0 5px;
border: 1px dashed var(--lod-darkblue-300);
border-radius: var(--radius-sm);
background: var(--lod-darkblue-50);
color: var(--lod-darkblue);
font-size: .92em;
line-height: 1.5;
white-space: nowrap;
user-select: none;
}
@media (max-width: 599px) {
.einst-html-host .se-toolbar { overflow-x: auto; }
}
.ber-panel { display: flex; flex-direction: column; gap: var(--space-4); container-type: inline-size; }
.ber-kopf { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ber-vs { display: inline-flex; }
.ber-suche { margin-left: auto; min-width: 260px; }
.ber-suche input { width: 100%; }
.ber-liste { display: flex; flex-direction: column; }
.app-scope .ber-zeile-th, .app-scope .ber-zeile {
display: grid;
grid-template-columns: minmax(200px, 1.1fr) minmax(150px, 1.7fr) minmax(120px, 1fr) 72px;
align-items: center; gap: var(--space-3);
padding: var(--space-2) var(--space-2-5);
}
.ber-zeile-th {
font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase;
letter-spacing: .04em; color: var(--lod-gray-400);
border-bottom: 1px solid var(--color-border-light); padding-bottom: var(--space-1-5);
}
.ber-zeile-th-n { text-align: right; }
.app-scope .ber-zeile {
width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
border-radius: var(--radius-md);
}
.ber-zeile + .ber-zeile { border-top: 1px solid var(--lod-gray-100); }
.app-scope .ber-zeile:hover { background: var(--lod-gray-50); }
.app-scope .ber-zeile:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.ber-zeile-pers { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.ber-zeile-txt { display: flex; flex-direction: column; min-width: 0; }
.ber-zeile-name { font-weight: var(--fw-medium); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ber-zeile-mail { font-size: var(--fs-caption); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ber-zeile-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }
.ber-zeile-chips--rollen { align-content: center; }
.ber-zeile-chips--weite { align-content: center; }
.ber-zeile-n {
font-size: var(--fs-body); color: var(--color-text-secondary);
text-align: right; font-variant-numeric: tabular-nums;
}
.ber-chip {
display: inline-flex; align-items: center; padding: 1px var(--space-2);
border-radius: var(--radius-pill); background: var(--lod-gray-100);
color: var(--color-text-muted); font-size: var(--fs-caption); white-space: nowrap;
}
.ber-chip--extern { background: transparent; border: 1px dashed var(--lod-gray-300); }
.ber-legende {
display: flex; align-items: center; gap: var(--space-2);
margin: var(--space-3) 0 0; padding-top: var(--space-3);
border-top: 1px solid var(--color-border-subtle, var(--lod-gray-100));
font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
}
.ber-chip--scope { background: var(--status-info-bg); color: var(--brand-default); }
.ber-chip--durchgestrichen { text-decoration: line-through; opacity: .6; }
.ber-chip--faehig {
background: transparent; border: 1px solid var(--lod-darkblue-200, #cadce8);
color: var(--lod-darkblue);
}
.ber-chip--warn { background: var(--lod-amber-50); color: var(--lod-amber-700); }
.ber-chip--keine { background: transparent; color: var(--lod-gray-400); }
.ber-md { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ber-md-liste {
display: flex; flex-direction: column; gap: 2px;
position: sticky; top: var(--space-2);
}
.app-scope .ber-md-item {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
width: 100%; text-align: left; cursor: pointer;
border: 0; background: transparent;
padding: var(--space-2) var(--space-2-5);
border-radius: var(--radius-md);
border-left: 3px solid transparent;
transition: background var(--motion-fast) var(--ease-standard, ease);
}
.app-scope .ber-md-item:hover { background: var(--lod-gray-50); }
.app-scope .ber-md-item:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.app-scope .ber-md-item.is-aktiv { background: var(--lod-gray-50); border-left-color: var(--lod-darkblue); }
.ber-md-item-kopf { display: flex; align-items: baseline; gap: var(--space-1-5); min-width: 0; }
.ber-md-item-titel {
font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ber-md-item.is-aktiv .ber-md-item-titel { color: var(--lod-darkblue); }
.ber-md-item-meta { font-size: var(--fs-caption); color: var(--color-text-muted); }
.ber-md-detail { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.ber-rolle-txt { margin: 0; font-size: var(--fs-body); color: var(--color-text-muted); }
.ber-enthaelt-summe { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.ber-chip--destruktiv::before {
content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--status-danger-fg); margin-right: var(--space-1); vertical-align: middle;
}
.ber-det-kopf { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ber-det-titel { font-size: var(--fs-section, 16px); font-weight: var(--fw-semibold); }
.ber-det-akt { margin-left: auto; display: inline-flex; gap: var(--space-2); }
.ber-det-stats {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--space-1) var(--space-2);
font-size: var(--fs-body); color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
.ber-det-stat { white-space: nowrap; }
.ber-det-stat + .ber-det-stat::before {
content: '·'; margin-right: var(--space-2); color: var(--lod-gray-300);
}
.ber-det-stat--zusatz { font-size: var(--fs-meta); color: var(--lod-gray-400); }
.ber-det-spalten {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 0 var(--space-6); align-items: start;
}
.ber-det-sp { min-width: 0; }
@container (max-width: 899px) {
.ber-det-spalten { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.ber-klassensumme {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.ber-klassensumme-teil { display: inline-flex; align-items: center; gap: var(--space-1); }
.ber-klassensumme-teil::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--lod-gray-300); flex: 0 0 auto;
}
.ber-klassensumme-teil.is-fachrecht::before { background: var(--lod-darkblue); }
.ber-klassensumme-teil.is-einsicht::before { background: var(--lod-amber-700); }
.ber-klassensumme-teil.is-betrieb::before { background: var(--lod-gray-500); }
.ber-klassensumme-teil.is-destruktiv::before { background: var(--status-danger-fg); }
.ber-klassensumme-teil.is-ohne::before { background: var(--status-danger-fg); }
.ber-klassensumme-teil.is-ohne { color: var(--status-danger-fg); }
.ber-det-block {
display: grid; grid-template-columns: 96px minmax(0, 1fr);
gap: var(--space-2) var(--space-3); align-items: baseline;
padding: var(--space-2) 0;
}
.ber-det-block + .ber-det-block { border-top: 1px solid var(--color-border-light); }
.ber-det-wert { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.ber-det-block--scope { align-items: start; }
.ber-det-block--scope .ber-det-wert { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.ber-det-block--abd { border-bottom: 1px solid var(--color-border-light); }
.ber-chip--bereich {
background: var(--status-info-bg); color: var(--brand-default); font-weight: var(--fw-medium);
}
.ber-abdeckung { display: flex; flex-direction: column; }
.ber-abd { padding: var(--space-1) 0; }
.ber-abd + .ber-abd { border-top: 1px solid var(--color-border-light); }
.app-scope .ber-abd-kopf {
display: grid; grid-template-columns: 16px minmax(0, 1fr) 72px 84px;
align-items: center; gap: var(--space-2) var(--space-3);
width: 100%; padding: var(--space-1) 0; margin: 0;
border: 0; background: transparent; cursor: pointer; text-align: left;
border-radius: var(--radius-sm);
}
.app-scope .ber-abd-kopf:hover .ber-abd-name { color: var(--color-text); }
.app-scope .ber-abd-kopf:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.ber-abd-chev {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
transition: transform var(--motion-fast) var(--ease-standard);
}
.ber-abd-chev img { width: 16px; height: 16px; opacity: .55; }
.ber-abd:not(.is-offen) .ber-abd-chev { transform: rotate(-90deg); }
.ber-abd-name {
font-size: var(--fs-meta, 12px); font-weight: var(--fw-semibold); color: var(--color-text-muted);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ber-abd-zahl {
font-size: var(--fs-meta, 12px); font-variant-numeric: tabular-nums; color: var(--lod-gray-400);
text-align: right;
}
.ber-abd-zahl.is-voll { color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.ber-abd-chips {
display: flex; flex-wrap: wrap; gap: var(--space-1-5); min-width: 0;
padding: var(--space-1) 0 var(--space-1-5) calc(16px + var(--space-3));
}
.ber-meter {
display: block; height: 4px; border-radius: var(--radius-pill);
background: var(--lod-gray-200); overflow: hidden;
}
.ber-meter-fill {
display: block; height: 100%; width: var(--ber-fuell, 0%);
border-radius: inherit; background: var(--lod-darkblue-300);
}
.ber-meter.is-voll .ber-meter-fill { background: var(--lod-darkblue); }
.ber-md-item .ber-meter { width: 88px; margin-top: var(--space-1-5); }
.ber-label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-text-muted); min-width: 62px; }
.ber-badge { font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em;
padding: 1px var(--space-1-5); border-radius: var(--radius-sm); background: var(--lod-gray-100); color: var(--lod-gray-500); }
.ber-badge--eigen { background: var(--lod-darkblue-50); color: var(--lod-darkblue); }
.ber-badge--intern { background: var(--lod-gray-100); color: var(--lod-gray-500); }
.ber-scope { display: inline-flex; align-items: center; gap: var(--space-1) var(--space-2); flex-wrap: wrap; }
.ber-scope-name { font-size: var(--fs-caption); color: var(--color-text-muted); }
.ber-seg { display: inline-flex; background: var(--lod-gray-100); padding: 2px; border-radius: var(--radius-md); }
.app-scope .ber-seg-btn {
border: 0; background: transparent; cursor: pointer;
padding: 2px var(--space-2); border-radius: var(--radius-sm);
font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--color-text-muted);
transition: background var(--motion-fast) var(--ease-standard, ease), color var(--motion-fast) var(--ease-standard, ease);
}
.app-scope .ber-seg-btn:hover { color: var(--color-text); }
.app-scope .ber-seg-btn.is-aktiv { background: var(--lod-white, #fff); color: var(--lod-darkblue); font-weight: var(--fw-semibold); box-shadow: var(--shadow-2); }
.app-scope .ber-seg-btn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.ber-stapel { display: inline-flex; align-items: center; }
.ber-stapel-av { margin-left: -6px; }
.ber-stapel-av:first-child { margin-left: 0; }
.ber-stapel-rest { margin-left: var(--space-1-5); font-size: var(--fs-caption); color: var(--color-text-muted); }
.ber-neu-rolle { align-self: flex-start; }
.ber-abgrenzung { margin-top: var(--space-2); padding-top: var(--space-2);
border-top: 1px dashed var(--lod-gray-200); font-size: 13px; }
.ber-hzeile {
display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(0, 1.6fr) auto;
align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2-5);
}
.ber-hzeile + .ber-hzeile { border-top: 1px solid var(--lod-gray-100); }
.ber-hzeile-titel { font-weight: var(--fw-medium); }
.ber-hzeile-zahl { display: inline-flex; gap: var(--space-1); }
.ber-hzeile-namen { font-size: var(--fs-caption); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ber-hinweis { margin: 0 0 var(--space-2); max-width: 78ch; font-size: var(--fs-body); color: var(--color-text-muted); }
.ber-leer, .ber-leer-inline { color: var(--lod-gray-400); font-size: var(--fs-body); }
.ber-dr { display: flex; flex-direction: column; gap: var(--space-4); }
.ber-dr-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.ber-dr-panel[hidden] { display: none; }
.ber-dr-grp h4 { margin: 0 0 var(--space-1); font-size: var(--fs-card-title, 14px); font-weight: var(--fw-semibold); }
.ber-dr-h4l { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.ber-dr-hint { margin: 0 0 var(--space-2); font-size: 13px; color: var(--color-text-muted); }
.ber-dr-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-1); cursor: pointer; border-radius: var(--radius-sm); }
.ber-dr-row:hover { background: var(--lod-gray-50); }
.ber-dr-row.is-fix:hover { background: transparent; }
.ber-dr-row + .ber-dr-row { border-top: 1px solid var(--lod-gray-100); }
.ber-dr-row.is-fix { cursor: default; opacity: .75; }
.ber-dr-txt { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-body); }
.ber-dr-txt span { font-size: 13px; color: var(--color-text-muted); }
.ber-dr-quelle { font-style: italic; }
.ber-dr-av { flex-shrink: 0; }
.ber-dr-feld { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
.ber-dr-feld > span { font-size: 13px; font-weight: var(--fw-medium); }
.ber-dr-grp h4 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ber-dr-zahl { font-size: 12px; font-weight: var(--fw-regular); color: var(--color-text-muted); white-space: nowrap; }
.app-scope .ber-dr-sub {
display: flex; align-items: center; gap: var(--space-2);
width: 100%; margin: var(--space-3) 0 var(--space-1); padding: var(--space-1) 0;
background: none; border: 0; cursor: pointer; text-align: left;
font-size: 12px; font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted);
}
.app-scope .ber-dr-sub:hover { color: var(--color-text); }
.app-scope .ber-dr-sub:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.ber-dr-sub-chev { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 auto;
transition: transform var(--motion-fast) var(--ease-standard, ease); }
.ber-dr-sub-chev img { width: 16px; height: 16px; opacity: .55; }
.ber-dr-sub:not(.is-offen) .ber-dr-sub-chev { transform: rotate(-90deg); }
.ber-dr-sub-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ber-dr-sub-zahl { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: 0;
text-transform: none; font-weight: var(--fw-regular); color: var(--lod-gray-400); }
.ber-dr-zeile {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: var(--space-2) var(--space-1);
}
.ber-dr-zeile + .ber-dr-zeile { border-top: 1px solid var(--lod-gray-100); }
.ber-dr-zeile.is-vergeben:not(.ber-dr-karte) > .ber-dr-txt > b::before {
content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--lod-darkblue); margin-right: var(--space-1-5); vertical-align: middle;
}
.ber-dr-zeile > .ber-dr-txt { flex: 1; min-width: 0; }
.ber-dr-zeile:not(.is-nachweis):hover { background: var(--lod-gray-50); border-radius: var(--radius-sm); }
.app-scope .ber-dr-zeile .ber-dr-akt { opacity: .72; transition: opacity var(--motion-fast) var(--ease-standard); }
.ber-dr-zeile:hover .ber-dr-akt,
.app-scope .ber-dr-zeile .ber-dr-akt:focus-visible { opacity: 1; }
.ber-dr-zeile .ber-dr-akt { flex: 0 0 auto; align-self: center; }
.ber-dr-zeile.is-fix { opacity: .75; }
.ber-dr-zeile.is-nachweis { padding: var(--space-1-5) var(--space-1); align-items: center; }
.ber-dr-grpname {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
margin-top: var(--space-2); padding: var(--space-1) var(--space-1);
font-size: 11px; font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: .04em; color: var(--lod-gray-400);
border-bottom: 1px solid var(--color-border-light);
}
.ber-dr-grpzahl { font-variant-numeric: tabular-nums; font-weight: var(--fw-regular); }
.ber-dr-chip {
flex: 0 0 auto; align-self: center;
max-width: 45%; overflow: hidden; text-overflow: ellipsis;
}
.ber-dr-chip--fest { background: var(--status-info-bg); color: var(--brand-default); font-weight: var(--fw-semibold); }
.ber-dr-liste--karten { gap: var(--space-2); }
.ber-dr-zeile.ber-dr-karte {
padding: var(--space-3);
border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
background: var(--color-surface);
}
.ber-dr-zeile + .ber-dr-zeile.ber-dr-karte { border-top: 1px solid var(--color-border-light); }
.ber-dr-zeile.ber-dr-karte:hover { background: var(--color-surface); box-shadow: var(--shadow-2); }
.ber-dr-zeile.ber-dr-karte.is-fix { opacity: 1; border-style: dashed; }
.ber-dr-karte-ico {
flex: 0 0 auto; align-self: flex-start;
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: var(--radius-md);
background: var(--status-info-bg);
}
.ber-dr-karte-ico img { width: 18px; height: 18px; }
.ber-dr-karte-meta { font-size: var(--fs-caption); color: var(--color-text-muted); }
.ber-dr-leer {
margin: 0; padding: var(--space-2) var(--space-1);
font-size: 13px; color: var(--color-text-muted);
}
.app-scope .ber-dr-wahl {
display: flex; align-items: center; gap: var(--space-3);
width: 100%; text-align: left; cursor: pointer;
border: 0; background: transparent;
padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm);
}
.ber-dr-wahl + .ber-dr-wahl { border-top: 1px solid var(--lod-gray-100); }
.app-scope .ber-dr-wahl:hover { background: var(--lod-gray-50); }
.app-scope .ber-dr-wahl:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.ber-dr-wahl > .ber-dr-txt { flex: 1; min-width: 0; }
.ber-dr-wahl-ico { flex: 0 0 auto; opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard); }
.ber-dr-wahl:hover .ber-dr-wahl-ico,
.app-scope .ber-dr-wahl:focus-visible .ber-dr-wahl-ico { opacity: .7; }
.ber-dr-deckung { margin-left: auto; align-self: center; flex-shrink: 0; padding: 2px var(--space-2);
border-radius: var(--radius-sm); background: var(--status-info-bg); color: var(--brand-default);
font-size: 11px; font-weight: var(--fw-semibold); white-space: nowrap; }
.ber-avatar-fallback {
display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
border-radius: 50%; background: var(--lod-gray-200); font-size: 12px; font-weight: var(--fw-semibold);
}
.ber-gruppe { margin-top: var(--space-2); border-top: 1px solid var(--lod-gray-100); }
.app-scope .ber-gruppe-kopf {
display: flex; align-items: center; gap: var(--space-2);
width: 100%; padding: var(--space-2) var(--space-2-5); border: 0; background: transparent;
cursor: pointer; text-align: left;
font-size: var(--fs-caption); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted);
}
.app-scope .ber-gruppe-kopf:hover { color: var(--color-text); }
.app-scope .ber-gruppe-kopf:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.ber-gruppe-kopf .ui-ico { transition: transform var(--motion-fast) var(--ease-standard, ease); }
.ber-gruppe.is-offen .ber-gruppe-kopf .ui-ico { transform: rotate(90deg); }
.ber-mehr { align-self: flex-start; margin-top: var(--space-1); }
.ber-scope-herkunft { font-size: 11px; color: var(--lod-gray-400); font-style: italic; }
.ber-det-block--quelle .ber-det-wert {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2);
}
.ber-kopplung { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-body, 13px); }
.ber-kopplung.is-gekoppelt { color: var(--color-text); }
.ber-kopplung-name { font-weight: var(--fw-semibold); }
.ber-kopplung-modus {
font-size: 11px; padding: 0 var(--space-1); border-radius: var(--radius-sm);
background: var(--color-warning-bg); color: var(--color-text-muted);
}
.ber-kopplung-hinweis {
flex: 1 1 100%; min-width: 0; font-size: 11px; color: var(--lod-gray-400); font-style: italic;
overflow-wrap: anywhere;
}
.ber-dr-kopplung .ber-dr-folge {
margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-2-5);
border-left: 3px solid var(--brand-default); border-radius: var(--radius-sm);
background: var(--lod-gray-50); color: var(--color-text);
font-size: var(--fs-caption); overflow-wrap: anywhere;
}
.ber-dr-kopplung .ber-dr-warnung {
margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-2-5);
border-left: 3px solid var(--color-danger-fg); border-radius: var(--radius-sm);
background: var(--color-danger-bg); color: var(--color-text);
font-size: var(--fs-caption); overflow-wrap: anywhere;
}
.app-scope .ber-linkbtn {
border: 0; background: transparent; cursor: pointer; padding: 0 var(--space-1);
font-size: 11px; color: var(--brand-default); text-decoration: underline;
}
.app-scope .ber-linkbtn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.ber-fk-tab { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
.ber-fk-th, .ber-fk-tr {
display: grid;
grid-template-columns: minmax(200px, 2.2fr) minmax(120px, 1.2fr) minmax(110px, 1fr) 132px 132px;
gap: var(--space-3); align-items: center;
padding: var(--space-2) var(--space-2-5);
}
.ber-fk-th {
font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase;
letter-spacing: .04em; color: var(--lod-gray-400);
border-bottom: 1px solid var(--color-border-light); padding-bottom: var(--space-1-5);
}
.ber-fk-th-streng { text-align: center; }
.ber-fk-tr + .ber-fk-tr { border-top: 1px solid var(--lod-gray-100); }
.ber-fk-tr:hover { background: var(--lod-gray-50); }
.ber-fk-td { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); min-width: 0; }
.ber-fk-td--titel { flex-direction: column; align-items: flex-start; gap: 2px; }
.ber-fk-td--streng { justify-content: center; }
.ber-fk-td--akt { justify-content: flex-end; }
.ber-fk-titel { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--color-text); }
.ber-fk-titel--destruktiv::before {
content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--status-danger-fg); margin-right: var(--space-1); vertical-align: middle;
}
.ber-fk-txt { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.ber-fk-namen { font-size: var(--fs-caption); color: var(--color-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ber-fk-td--akt > .app-cta-btn { opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard, ease); }
.ber-fk-tr:hover .ber-fk-td--akt > .app-cta-btn,
.ber-fk-td--akt > .app-cta-btn:focus-visible { opacity: 1; }
.ber-fk-td--streng > .app-switch { opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard); }
.ber-fk-tr:hover .ber-fk-td--streng > .app-switch,
.ber-fk-tr.is-streng .ber-fk-td--streng > .app-switch,
.ber-fk-td--streng > .app-switch:focus-within { opacity: 1; }
.ber-fk-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); }
.app-scope .ber-fk-filter-btn {
display: inline-flex; align-items: center; gap: var(--space-1-5);
padding: var(--space-1) var(--space-2-5);
border: 1px solid var(--color-border-light); border-radius: var(--radius-pill);
background: var(--color-surface); cursor: pointer;
font-size: var(--fs-caption); color: var(--color-text-secondary);
transition: background var(--motion-fast) var(--ease-standard, ease);
}
.app-scope .ber-fk-filter-btn:hover { background: var(--lod-gray-50); color: var(--color-text); }
.app-scope .ber-fk-filter-btn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.app-scope .ber-fk-filter-btn.is-aktiv {
background: var(--lod-darkblue); border-color: var(--lod-darkblue);
color: var(--lod-white, #fff); font-weight: var(--fw-semibold);
}
.app-scope .ber-fk-filter-btn.is-ohne { border-color: var(--status-danger-fg); color: var(--status-danger-fg); }
.app-scope .ber-fk-filter-btn.is-ohne.is-aktiv { background: var(--status-danger-fg); border-color: var(--status-danger-fg); color: var(--lod-white, #fff); }
.ber-fk-filter-zahl { font-variant-numeric: tabular-nums; opacity: .7; }
.ber-chip--klasse {
background: transparent; border: 1px solid var(--lod-gray-200); color: var(--color-text-muted);
font-size: 11px;
}
.ber-chip--klasse.is-fachrecht { border-color: var(--lod-darkblue); color: var(--lod-darkblue); }
.ber-chip--klasse.is-einsicht { border-color: var(--lod-amber-700); color: var(--lod-amber-700); }
.ber-chip--klasse.is-ohne { border-color: var(--status-danger-fg); color: var(--status-danger-fg); }
.ber-fk-tr.is-zurueckhaltend .ber-fk-txt { opacity: .75; }
.ber-badge--streng { background: var(--lod-amber-50); color: var(--lod-amber-700); }
.ber-fk-meta-sep { color: var(--lod-gray-300); }
.ber-fk-meta-streng { color: var(--lod-amber-700); }
.ber-fk-meta-ohne { color: var(--color-text-muted); }
.ber-schritte { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ber-schritt {
display: flex; flex-direction: column; gap: var(--space-1);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border-light);
border-left: 3px solid var(--lod-gray-200); border-radius: var(--radius-sm);
background: var(--color-surface);
}
.ber-schritt > b { font-size: var(--fs-body); }
.ber-schritt > span { font-size: 13px; color: var(--color-text-muted); }
.ber-schritt.is-offen { border-left-color: var(--lod-amber-700); }
.ber-schritt.is-fertig { border-left-color: var(--status-success-fg); }
.ber-schritt-akt { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-1); }
.ber-dr-suche { display: block; margin-bottom: var(--space-2); }
.ber-dr-suche input { width: 100%; }
.ber-dr-liste { display: flex; flex-direction: column; }
.ber-dr-flaeche > .ber-dr-hint { margin: 0; padding: var(--space-1) var(--space-1); }
.ber-dr-fussnote { margin-top: var(--space-1-5); }
.ber-dr-flaeche > .ber-vl { padding: var(--space-1-5) var(--space-1); }
.ber-dr-flaeche > .ber-dr-liste > .ber-dr-grpname:first-child { margin-top: 0; }
.ber-dr-grp--ergebnis > h4 { margin-bottom: var(--space-1); }
.ber-dr-flaeche {
padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
border: 1px solid var(--color-border-light); background: var(--color-surface);
}
.ber-dr-hero { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); }
.ber-dr-hero-av { flex: 0 0 auto; }
.ber-dr-hero-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ber-dr-reichweite { display: flex; flex-direction: column; gap: var(--space-1); }
.ber-dr-scope { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ber-dr-scope-name { font-size: var(--fs-caption); color: var(--color-text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ber-dr-scope-wert.is-weit { background: var(--status-info-bg); color: var(--brand-default); font-weight: var(--fw-semibold); }
.ber-dr-scope-quelle { font-size: var(--fs-caption); color: var(--color-text-muted); white-space: nowrap; }
.ber-vl { display: flex; flex-direction: column; gap: var(--space-3); }
.ber-vl-item { display: flex; align-items: flex-start; gap: var(--space-2-5); }
.ber-vl-ico {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: var(--lod-gray-100); margin-top: 1px;
}
.ber-vl-ico img { width: 14px; height: 14px; opacity: .7; }
.ber-vl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ber-vl-diff { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ber-vl-feld {
font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase;
letter-spacing: .04em; color: var(--lod-gray-400);
}
.ber-vl-wert { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--color-text); overflow-wrap: anywhere; }
.ber-vl-von { font-size: var(--fs-caption); color: var(--color-text-muted); overflow-wrap: anywhere; }
.ber-vl-meta { font-size: var(--fs-caption); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
@container (max-width: 1049px) {
.app-scope .ber-zeile-th, .app-scope .ber-zeile {
grid-template-columns: minmax(160px, 1.4fr) minmax(120px, 1.2fr) minmax(100px, 1fr) 60px;
}
.ber-suche { min-width: 200px; }
}
@container (max-width: 639px) {
.app-scope .ber-zeile-th { display: none; }
.app-scope .ber-zeile {
grid-template-columns: minmax(0, 1fr) 44px;
grid-template-areas: "pers n" "rollen rollen" "weite weite";
}
.ber-zeile-pers { grid-area: pers; }
.ber-zeile-n { grid-area: n; }
.ber-zeile-chips--rollen { grid-area: rollen; margin-top: var(--space-1); }
.ber-zeile-chips--weite { grid-area: weite; }
.ber-hzeile { grid-template-columns: 1fr auto; }
.ber-hzeile-namen { display: none; }
.ber-suche { margin-left: 0; width: 100%; }
.ber-det-block--scope { align-items: flex-start; }
.ber-scope { flex-wrap: wrap; }
.ber-md { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.ber-md-liste {
position: static; flex-direction: row; gap: var(--space-1);
overflow-x: auto; padding-bottom: var(--space-1);
}
.app-scope .ber-md-item {
flex: 0 0 auto; max-width: 220px;
border-left: 0; border-bottom: 3px solid transparent; border-radius: var(--radius-sm);
}
.app-scope .ber-md-item.is-aktiv { border-bottom-color: var(--lod-darkblue); }
.ber-md-item .ber-meter { display: none; }
.ber-neu-rolle { flex: 0 0 auto; }
}
@container (max-width: 1049px) {
.ber-seg { flex-wrap: nowrap; }
.app-scope .ber-abd-kopf { grid-template-columns: 16px minmax(0, 1fr) 64px 84px; }
.ber-fk-th, .ber-fk-tr { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 108px 108px; }
.ber-fk-th > :nth-child(3), .ber-fk-td:nth-child(3) { display: none; }
}
@container (min-width: 640px) and (max-width: 1049px) {
.ber-md { grid-template-columns: 208px minmax(0, 1fr); gap: var(--space-3); }
}
@container (max-width: 949px) {
.ber-fk-th { display: none; }
.ber-fk-tr {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "titel streng" "meta akt";
gap: var(--space-1) var(--space-3);
}
.ber-fk-td--titel { grid-area: titel; }
.ber-fk-tr > .ber-fk-td:nth-child(2) { grid-area: meta; }
.ber-fk-td--streng { grid-area: streng; justify-content: flex-end; align-self: start; }
.ber-fk-td--akt { grid-area: akt; }
.ber-fk-txt {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.ber-fk-td--streng > .app-switch { opacity: 1; }
.ber-fk-td--akt > .app-cta-btn { opacity: .72; }
}
@container (max-width: 439px) {
.ber-vs { width: 100%; overflow-x: auto; }
.ber-det-akt { margin-left: 0; width: 100%; }
.ber-det-block { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.app-scope .ber-abd-kopf { grid-template-columns: 16px minmax(0, 1fr) auto; }
.app-scope .ber-abd-kopf .ber-meter { grid-column: 2 / -1; order: 4; }
.ber-fk-tr > .ber-fk-td:nth-child(2) { display: none; }
.ber-fk-td--akt { display: none; }
.ber-scope { flex-direction: column; align-items: flex-start; gap: var(--space-1); width: 100%; }
.ber-seg { width: 100%; }
.app-scope .ber-seg-btn { flex: 1; justify-content: center; }
}
@media (max-width: 599px) {
.ber-dr .ber-dr-scope { flex-wrap: wrap; }
}
.abrart { display: block; }
.app-scope .abrart .set-row-ctrl > .abrart-slot { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; }
.app-scope .abrart .abrart-slot > .app-drawer-input,
.app-scope .abrart .abrart-slot > .app-drawer-number-wrap { width: 100%; min-width: 0; }
.abrart-state { margin: 0; }
.abrart-state strong { display: block; margin-bottom: var(--space-1); }
.abrart-verweis {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: 0;
padding: var(--space-2) var(--space-3);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.abrart-verweis > span { min-width: 0; overflow-wrap: anywhere; }
.abrart-verweis .ui-ico { flex: 0 0 auto; opacity: 0.7; }
@media (max-width: 599px) {
.abrart .set-row { grid-template-columns: minmax(0, 1fr) var(--set-aktionen); }
.abrart .set-row > .set-row-ctrl { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-2); }
.abrart .set-row > .set-row-aktionen { align-self: start; }
}
.einst-tagmonat { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-2); min-width: 0; }
.app-scope .einst-tagmonat .select[data-cs-trigger] { width: 100%; min-width: 0; height: 32px; }
@media (max-width: 999px) {
.app-scope .einst-tagmonat .select[data-cs-trigger] { height: auto; min-height: var(--touch-ziel); }
}
@media (max-width: 599px) {
.app-scope .einst-tagmonat .select[data-cs-trigger] { height: 40px; }
}
.einst-var-host--kompakt { display: flex; justify-content: flex-end; }
.einst-var-host--kompakt .tvar-leiste { padding-top: var(--space-1); }
@media (max-width: 999px) {
.einst-var-host--kompakt { justify-content: flex-start; }
}
.einst-html { --einst-blatt: 700px; }
.einst-html .sun-editor .se-wrapper { background: var(--lod-gray-50, #f7f8fa); }
.einst-html .sun-editor .se-wrapper .se-wrapper-inner {
max-width: var(--einst-blatt); margin: var(--space-4) auto;
background: #fff;
border: 1px solid var(--lod-border-light);
border-radius: var(--radius-sm);
box-shadow: 0 1px 4px rgba(16, 24, 40, .06);
}
.einst-html .sun-editor .se-wrapper .se-placeholder {
left: 50%; transform: translateX(-50%);
width: 100%; max-width: var(--einst-blatt);
margin-top: var(--space-4); padding-left: var(--space-4); padding-right: var(--space-4);
box-sizing: border-box;
}
@media (max-width: 999px) {
.einst-html { --einst-blatt: none; }
.einst-html .sun-editor .se-wrapper .se-wrapper-inner { margin: var(--space-2); }
}
.einst-html .sun-editor-editable table { width: auto; border: 0; }
.einst-html .sun-editor-editable table td,
.einst-html .sun-editor-editable table th { border: 0; }
.einst-html .sun-editor .se-wrapper-inner:focus-within table td,
.einst-html .sun-editor .se-wrapper-inner:focus-within table th {
outline: 1px dashed var(--lod-gray-200, #dee2e8);
outline-offset: -1px;
}
.epjt-panel { container-type: inline-size; }
.epjt-banner { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.epjt-alles-gut {
display: flex; align-items: center; gap: var(--space-2);
margin: 0 0 var(--space-3);
color: var(--color-text-secondary);
font-size: var(--fs-body);
}
.epjt-alles-gut .ui-ico img { filter: none; opacity: .8; }
.epjt-liste { list-style: none; margin: 0; padding: 0; }
.epjt-th, .epjt-row {
display: grid;
grid-template-columns: minmax(180px, 1.6fr) 110px 160px minmax(0, 1fr) 132px;
align-items: center; gap: var(--space-3);
padding: var(--space-2) var(--space-2);
}
.epjt-th {
font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase;
letter-spacing: .04em; color: var(--lod-gray-400);
border-bottom: 1px solid var(--color-border-light); padding-bottom: var(--space-1-5);
min-height: 0;
}
.epjt-row {
border-bottom: 1px solid var(--color-border-subtle);
min-height: 44px;
}
.epjt-row:last-child { border-bottom: 0; }
.epjt-row > * { min-width: 0; }
.epjt-name {
min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: var(--fw-medium, 500);
}
.epjt-pill { white-space: nowrap; justify-self: start; }
.epjt-zahlen { white-space: nowrap; font-size: var(--fs-meta); color: var(--color-text-secondary); }
.epjt-zahlen--ok { color: var(--color-text-muted); }
.epjt-team {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: var(--fs-meta); color: var(--color-text-muted);
}
.epjt-aktion { min-width: 0; display: flex; justify-content: flex-end; }
.epjt-row--drift {
background: transparent;
box-shadow: inset 3px 0 0 0 var(--lod-amber-700);
}
@container (max-width: 1049px) {
.epjt-th, .epjt-row { grid-template-columns: minmax(140px, 1.4fr) 100px 140px minmax(0, 1fr) 120px; }
}
@container (max-width: 699px) {
.epjt-th, .epjt-row { grid-template-columns: minmax(140px, 1fr) 100px 140px 120px; }
.epjt-th > :nth-child(4), .epjt-team { display: none; }
}
@container (max-width: 459px) {
.epjt-th { display: none; }
.epjt-row {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "name name name" "pille zahlen aktion";
gap: var(--space-1) var(--space-2); padding: var(--space-3) var(--space-1);
}
.epjt-name { grid-area: name; white-space: normal; }
.epjt-pill { grid-area: pille; }
.epjt-zahlen { grid-area: zahlen; }
.epjt-aktion { grid-area: aktion; }
}
.epf-kopf,
.epf-row {
display: grid;
grid-template-columns: 110px minmax(0, 1fr) 200px minmax(0, 180px) 90px;
align-items: center;
gap: var(--space-3);
}
.epf-kopf {
padding: 0 var(--space-1) var(--space-2);
border-bottom: 1px solid var(--color-border);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-muted);
}
.epf-liste { list-style: none; margin: 0; padding: 0; }
.epf-row {
padding: var(--space-2) var(--space-1);
border-bottom: 1px solid var(--color-border-subtle);
min-height: 48px;
}
.epf-row:last-child { border-bottom: 0; }
.epf-aktiv { justify-self: start; }
.epf-label { min-width: 0; width: 100%; }
.epf-latent { justify-self: start; margin-left: calc(-1 * var(--space-2)); white-space: nowrap; }
.epf-thema { min-width: 0; width: 100%; }
.epf-paket {
min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: var(--fs-meta); color: var(--color-text-muted);
}
.epf-quittung { min-width: 84px; font-size: var(--fs-caption); }
@media (max-width: 1399px) {
.epf-kopf, .epf-row { grid-template-columns: 100px minmax(0, 1fr) 170px 90px; }
.epf-k-paket, .epf-paket { display: none; }
}
@media (max-width: 999px) {
.epf-kopf, .epf-row { grid-template-columns: 90px minmax(0, 1fr) 150px; }
.epf-k-quittung, .epf-quittung { display: none; }
}
@media (max-width: 599px) {
.epf-kopf { display: none; }
.epf-row {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "aktiv label" ". thema";
row-gap: var(--space-2);
padding: var(--space-3) var(--space-1);
}
.epf-aktiv { grid-area: aktiv; }
.epf-label { grid-area: label; }
.epf-thema { grid-area: thema; }
.epf-latent { display: none; }
}
.edx-kopf {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.edx-hinweis { margin: 0; color: var(--color-text-muted); font-size: var(--fs-caption); }
.edx-alles { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.edx-alles-hilfe { color: var(--color-text-muted); font-size: var(--fs-caption); min-width: 0; }
.edx-letzte { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--fs-caption); }
.edx-bereich { margin-top: var(--space-4); }
.edx-bereich-titel {
margin: 0 0 var(--space-2);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-muted);
}
.edx-liste { list-style: none; margin: 0; padding: 0; }
.edx-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 140px 140px;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-1);
border-bottom: 1px solid var(--color-border-subtle);
min-height: 44px;
}
.edx-row:last-child { border-bottom: 0; }
.edx-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edx-spalten { color: var(--color-text-muted); font-size: var(--fs-caption); white-space: nowrap; }
.edx-sperrgrund {
color: var(--color-text-muted); font-size: var(--fs-caption);
max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.edx-einzeln { justify-self: end; white-space: nowrap; }
@media (max-width: 1399px) {
.edx-row { grid-template-columns: minmax(0, 1fr) 120px 130px; }
}
@media (max-width: 999px) {
.edx-row { grid-template-columns: minmax(0, 1fr) 130px; }
.edx-spalten { display: none; }
.edx-sperrgrund { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
}
@media (max-width: 599px) {
.edx-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.edx-alles { align-items: flex-start; flex-direction: column; }
}
.edx-sicherung {
margin-top: var(--space-4);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.edx-sicherung.ist-veraltet,
.edx-sicherung.ist-warnung {
border-color: var(--color-warning-border);
background: var(--color-warning-bg);
}
.edx-sicherung.ist-veraltet {
border-color: color-mix(in srgb, var(--color-warning-border) 55%, var(--color-border));
background: color-mix(in srgb, var(--color-warning-bg) 55%, var(--color-surface));
}
.edx-sich-alt {
margin: 0 0 var(--space-3);
color: var(--color-warning-fg);
font-size: var(--fs-caption);
}
.edx-sich-titel {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-2);
font-size: var(--fs-section);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.edx-sich-titel .ui-ico img { width: 18px; height: 18px; }
.edx-sicherung.ist-warnung .edx-sich-titel { color: var(--color-warning-fg); }
.edx-sich-satz { margin: 0 0 var(--space-2); }
.edx-sicherung.ist-warnung .edx-sich-satz { color: var(--color-warning-fg); }
.edx-sich-fakten {
list-style: none;
margin: 0 0 var(--space-2);
padding: 0;
display: grid;
grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
column-gap: var(--space-3);
font-size: var(--font-size-sm);
}
.edx-sich-fakt { display: contents; }
.edx-sich-bericht {
margin: var(--space-3) 0 var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.edx-sich-bericht-stand { margin: 0 0 var(--space-2); font-size: var(--font-size-sm); }
.edx-sich-bericht-offen {
margin: 0 0 var(--space-2);
color: var(--color-text-tertiary);
font-size: var(--fs-caption);
}
.edx-sich-bericht-akt { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.edx-sich-label { color: var(--color-text-muted); padding: var(--space-1) 0; }
.edx-sich-wert { min-width: 0; padding: var(--space-1) 0; }
.edx-sicherung .edx-sich-label,
.edx-sicherung .edx-hinweis { color: var(--color-text-tertiary); }
.edx-hinweis.ist-warnung { color: var(--color-warning-fg); }
@media (max-width: 599px) {
.edx-sicherung { padding: var(--space-3); }
.edx-sich-fakten { grid-template-columns: minmax(0, 1fr); }
.edx-sich-label { padding-bottom: 0; }
.edx-sich-wert { padding-top: 0; }
}
.sigv-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.sigv-leiste { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.sigv-person-wahl { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sigv-person-suche { max-width: 260px; }
.sigv-person-deckel { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.sigv-vert {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--surface-radius);
background: var(--color-surface);
}
.sigv-vert-titel {
margin: 0;
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.sigv-vert-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sigv-vert-zeile {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: baseline;
padding: var(--space-1-5) 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.sigv-vert-zeile:last-child { border-bottom: 0; }
.sigv-vert-name { overflow-wrap: anywhere; color: var(--color-text); }
.sigv-vert-zahl { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.sigv-vert-zeile--eingebaut .sigv-vert-name { color: var(--color-text-muted); font-style: italic; }
.sigv-vert-fuss { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.sigv-vert-tote ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.sigv-tote-zeile {
display: flex; flex-direction: column; gap: var(--space-xxs);
padding: var(--space-1-5) 0;
border-top: 1px solid var(--status-warning-border);
}
.sigv-tote-name { font-weight: var(--fw-semibold, 600); color: var(--color-text); overflow-wrap: anywhere; }
.sigv-tote-grund { font-size: var(--fs-meta, 12px); line-height: 1.45; color: var(--color-text-secondary); }
.sigz-koerper { --sigz-namen-breite: 170px; }
.sigz-leiste { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin-bottom: var(--space-3); }
.sigz-feld { display: flex; flex-direction: column; gap: var(--space-1); }
.sigz-feld-label { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.sigz-monate { min-width: 200px; }
.sigz-skala {
position: relative; height: 18px; margin-left: var(--sigz-namen-breite);
border-bottom: 1px solid var(--color-border);
}
.sigz-tick {
position: absolute; left: var(--sigz-l); top: 0;
font-size: var(--fs-badge, 11px); color: var(--lod-gray-500);
padding-left: var(--space-1); border-left: 1px solid var(--color-border);
height: 100%; display: flex; align-items: center;
}
.sigz-spuren { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.sigz-spur { display: grid; grid-template-columns: var(--sigz-namen-breite) minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.sigz-spur-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-body); }
.sigz-spur-marken { font-size: var(--fs-badge, 11px); color: var(--color-text-muted); overflow-wrap: anywhere; }
.sigz-band {
position: relative; height: 22px; min-width: 0;
background: var(--color-bg-subtle); border-radius: var(--radius-sm);
display: flex; align-items: center;
}
.sigz-bar {
position: absolute; left: var(--sigz-l); width: var(--sigz-w); top: 3px; bottom: 3px;
background: var(--color-accent); border-radius: var(--radius-sm);
}
.sigz-bar.is-kollision { outline: 2px solid var(--color-warning-border); outline-offset: 1px; }
.sigz-leerspur { padding-left: var(--space-2); font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.sigz-satz, .sigz-dauer { margin: var(--space-2) 0 0; font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.sigz-kollisionen { margin-top: var(--space-3); }
.sigz-kollisionen ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
@media (max-width: 640px) {
.sigz-spur { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.sigz-skala { margin-left: 0; }
}
.sigv-feld { display: flex; flex-direction: column; gap: var(--space-1); }
.sigv-feld-label { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.sigv-person { min-width: 280px; }
.sigv-empf { min-width: 200px; max-width: 100%; }
.sigv-schalter { align-self: flex-start; }
.sigv-merkmale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.sigv-merkmal { display: flex; gap: var(--space-1); align-items: baseline; font-size: var(--fs-body); }
.sigv-merkmal + .sigv-merkmal::before { content: '·'; color: var(--lod-gray-300); margin-right: var(--space-2); }
.sigv-merkmal-label { color: var(--color-text-muted); }
.sigv-merkmal-wert { font-weight: var(--fw-medium, 500); color: var(--color-text); }
.sigv-merkmal.is-leer .sigv-merkmal-wert { color: var(--status-warning-fg); font-style: italic; font-weight: var(--fw-regular, 400); }
.sigv-hinweis { margin: 0; font-size: var(--fs-body); color: var(--color-text-muted); }
.sigv-karten { display: flex; flex-direction: column; gap: var(--space-3); }
.sigv-warum {
display: flex; flex-direction: column; gap: var(--space-1-5);
padding: var(--space-3); border: 1px solid var(--color-border);
border-radius: var(--radius-md); background: var(--color-bg-subtle);
}
.sigv-warum-titel {
margin: 0; font-size: var(--fs-meta, 12px); font-weight: var(--fw-semibold, 600);
letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted);
}
.sigv-warum-satz { margin: 0; font-size: var(--fs-body, 13px); line-height: 1.5; color: var(--color-text); }
.sigv-warum-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sigv-warum-aus { font-size: var(--fs-meta, 12px); line-height: 1.45; color: var(--color-text-muted); }
.sigv-warum-grund { font-weight: var(--fw-semibold, 600); color: var(--color-text-secondary); }
.sigv-warum-namen { overflow-wrap: anywhere; }
.sigv-karte,
.siggal-karte {
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface); padding: var(--space-3);
display: flex; flex-direction: column; gap: var(--space-2);
}
.sigv-karte.is-empfohlen { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent) inset; }
.sigv-karte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.sigv-karte .sigv-karte-toggle {
width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; color: inherit; min-height: 32px;
}
.sigv-karte .sigv-karte-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sigv-chev { transition: transform var(--duration-fast) var(--ease-out-soft, ease-out); }
.sigv-karte--zu .sigv-chev { transform: rotate(-90deg); }
.sigv-karte { transition: gap var(--duration-flow) var(--ease-standard); }
.sigv-karte--zu { gap: 0; }
.sigv-karte-inhalt { display: flex; flex-direction: column; gap: var(--space-2); }
.sigv-karte-name { font-weight: var(--fw-semibold); color: var(--color-text); }
.sigv-karte-meta { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.sigv-warn {
font-size: var(--fs-meta, 12px); color: var(--status-warning-fg);
border-left: 2px solid var(--status-warning-fg); padding-left: var(--space-2);
}
.sigv-rahmen {
border: 1px solid var(--lod-gray-100); border-radius: var(--radius-sm);
overflow: auto; background: #fff;
width: 100%; max-width: 700px;
}
.sigv-frame { display: block; width: 100%; border: 0; min-height: 40px; }
@media (max-width: 999px) {
.sigv-leiste { flex-direction: column; align-items: stretch; }
.sigv-person { min-width: 0; width: 100%; }
}
@media (max-width: 599px) {
.sigv-schalter { align-self: stretch; width: 100%; }
.seg-track .sigv-schalter-btn { flex: 1 1 0; justify-content: center; }
}
.sigv-test { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sigv-test-hinweis { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
.siggal-hinweis { margin: 0 0 var(--space-3) 0; font-size: var(--fs-body); color: var(--color-text-muted); }
.siggal-gitter {
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: var(--space-3);
}
.siggal-karte { min-width: 0; }
.siggal-rahmen {
border: 1px solid var(--lod-gray-100); border-radius: var(--radius-sm);
background: #fff; overflow: hidden; min-width: 0;
}
.siggal-frame { display: block; border: 0; transform-origin: top left; }
.siggal-text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; }
.siggal-name { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); }
.siggal-besch { margin: 0; font-size: var(--fs-meta, 12px); color: var(--color-text-muted); line-height: 1.5; }
.siggal-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.siggal-chip {
font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
background: var(--lod-gray-50); border: 1px solid var(--color-border);
border-radius: var(--radius-pill); padding: 1px var(--space-2);
}
.siggal-warn {
margin: 0; font-size: var(--fs-meta, 12px); color: var(--status-warning-fg);
border-left: 2px solid var(--status-warning-fg); padding-left: var(--space-2);
}
.siggal-aktion { display: flex; justify-content: flex-end; }
.siggal-rahmen { position: relative; }
.siggal-lupe {
position: absolute; top: var(--space-1); right: var(--space-1); z-index: 1;
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; padding: 0;
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface); cursor: pointer; opacity: 0.85;
}
.siggal-lupe:hover { opacity: 1; border-color: var(--color-accent); }
.siggal-gross { display: flex; flex-direction: column; gap: var(--space-3); }
.siggal-gross-kopf { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.siggal-gross-name { font-weight: var(--fw-semibold); color: var(--color-text); flex: 1 1 auto; }
.siggal-gross-rahmen {
border: 1px solid var(--lod-gray-100); border-radius: var(--radius-sm);
background: #fff; overflow: auto; min-width: 0;
}
.siggal-gross-frame { display: block; width: 100%; border: 0; min-height: 120px; }
@media (max-width: 599px) {
.siggal-gitter { grid-template-columns: minmax(0, 1fr); }
.siggal-aktion .app-cta-btn { width: 100%; }
}
.eth-wrap { container-type: inline-size; container-name: eth; }
.eth-kopf { display: none; }
.eth-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
'baum aktionen'
'meta meta';
align-items: center;
column-gap: var(--space-3);
row-gap: var(--space-2);
}
.eth-baum { grid-area: baum; }
.eth-meta { grid-area: meta; }
.eth-aktionen { grid-area: aktionen; }
.eth-k-meta,
.eth-meta {
display: grid;
grid-template-columns: minmax(0, 150px) 56px 44px minmax(0, 90px);
align-items: center;
gap: var(--space-3);
}
@container eth (min-width: 780px) {
.eth-kopf { display: grid; }
.eth-kopf,
.eth-row {
grid-template-columns: minmax(300px, 1fr) 376px 60px;
grid-template-areas: none;
column-gap: var(--space-3);
row-gap: 0;
}
.eth-baum,
.eth-meta,
.eth-aktionen { grid-area: auto; }
}
.eth-kopf {
padding: 0 var(--space-1) var(--space-2);
border-bottom: 1px solid var(--color-border);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-muted);
}
.eth-liste { list-style: none; margin: 0; padding: 0; }
.eth-row {
padding: var(--space-2) var(--space-1);
border-bottom: 1px solid var(--color-border-subtle);
min-height: 44px;
}
.eth-row:last-child { border-bottom: 0; }
.eth-baum {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
padding-left: calc(min(var(--eth-tiefe, 0), 5) * var(--space-3));
}
.eth-titel { min-width: 0; width: 100%; }
@container eth (min-width: 780px) {
.eth-baum { padding-left: calc(min(var(--eth-tiefe, 0), 8) * var(--space-4)); }
}
.eth-chevron {
flex: 0 0 auto;
width: 20px; height: 20px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
}
.eth-chevron img { opacity: .7; }
.eth-chevron--leer { visibility: hidden; }
.eth-liste .eth-chevron:hover { background: var(--color-bg-subtle); }
.eth-aktionen { display: flex; align-items: center; gap: var(--space-1); justify-self: end; }
@container eth (min-width: 780px) {
.eth-aktionen { justify-self: start; }
}
.eth-akt {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
}
.eth-akt:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.eth-akt--weg:hover { background: var(--status-danger-bg); color: var(--status-danger-fg); }
@media (max-width: 999px) {
.eth-chevron,
.eth-akt { width: var(--touch-ziel); height: var(--touch-ziel); }
.eth-row .eth-flaechen { min-height: var(--touch-ziel); }
}
.eth-quittung { min-width: 84px; font-size: var(--fs-caption); }
.eth-neu-zeile { padding-top: var(--space-3); }
@container eth (max-width: 460px) {
.eth-meta { display: flex; flex-wrap: wrap; }
.eth-row .eth-flaechen { flex: 1 1 140px; }
}
.eth-aktiv { justify-self: start; }
.eth-sort { width: 100%; min-width: 0; text-align: center; }
.eth-row .eth-flaechen {
min-width: 0; width: 100%;
padding: 4px var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: transparent;
font-size: var(--fs-meta);
color: var(--color-text-muted);
text-align: left;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
cursor: pointer;
}
.eth-row .eth-flaechen:hover:not(:disabled) { background: var(--color-bg-subtle); color: var(--color-text); }
.eth-row .eth-flaechen:disabled { cursor: default; opacity: .6; }
.eth-row .eth-titel,
.eth-row .eth-sort,
.eth-row .eth-flaechen {
border-color: transparent;
background: transparent;
}
.eth-row:hover .eth-titel:not(:focus),
.eth-row:hover .eth-sort:not(:focus),
.eth-row:hover .eth-flaechen:not(:focus),
.eth-row:focus-within .eth-titel:not(:focus),
.eth-row:focus-within .eth-sort:not(:focus),
.eth-row:focus-within .eth-flaechen:not(:focus) {
border-color: var(--lod-gray-200);
background: var(--color-surface);
}
.eth-row--aus .eth-titel { color: var(--color-text-muted); }
.eth-pop {
display: flex; flex-direction: column; gap: var(--space-2);
padding: var(--space-1);
}
.eth-pop-hinweis { font-size: var(--fs-meta); color: var(--color-text-muted); }
.eth-pop .eth-pop-select { width: 100%; min-width: 0; }
.eth-fz-liste { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.eth-pop .eth-fz-chip {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: 3px var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
font-size: var(--fs-meta);
cursor: pointer;
}
.eth-pop .eth-fz-chip.is-an { background: var(--lod-darkblue-100); border-color: var(--lod-darkblue); color: var(--lod-darkblue); }
.eth-pop .eth-fz-chip input { margin: 0; }
.eth-menue { display: flex; flex-direction: column; }
.eth-menue .eth-menue-item {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--fs-body);
color: var(--color-text);
text-align: left;
cursor: pointer;
}
.eth-menue .eth-menue-item:hover { background: var(--color-bg-subtle); }
.eth-menue .eth-menue-item--weg:hover { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.einst-entwurf-leiste {
position: sticky;
bottom: calc(-1 * var(--kleb-versatz-unten, 0px));
z-index: 5;
width: calc(100% - var(--einst-anker-rand));
max-width: var(--einst-flaeche);
margin-inline: var(--einst-anker-rand) auto;
padding: var(--space-2) 0 calc(var(--space-2) + var(--kleb-versatz-unten, 0px));
background: var(--color-bg);
}
.einst-entwurf-inner {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2-5) var(--space-4);
border: 1px solid var(--lod-darkblue);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-16);
}
.einst-entwurf-ico { flex-shrink: 0; color: var(--lod-darkblue); display: inline-flex; }
.einst-entwurf-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.einst-entwurf-text strong { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); }
.einst-entwurf-felder {
font-size: var(--fs-meta);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.einst-entwurf-aktionen { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.einst-wrap .set-row.is-entwurf {
box-shadow: inset 3px 0 0 var(--lod-darkblue);
background: var(--lod-darkblue-50, var(--lod-gray-50));
}
.einst-wrap .einst-sec-head.is-entwurf {
box-shadow: inset 3px 0 0 var(--lod-darkblue);
background: var(--lod-darkblue-50, var(--lod-gray-50));
}
@media (max-width: 999px) {
.einst-entwurf-leiste { max-width: none; }
}
@media (max-width: 599px) {
.einst-entwurf-inner { flex-wrap: wrap; }
.einst-entwurf-aktionen { width: 100%; justify-content: stretch; }
.einst-entwurf-aktionen .app-cta-btn { flex: 1 1 0; }
}
.eak-reiter { margin-bottom: var(--space-4); }
.eak-row:has(.eak-aktiv input:not(:checked)) { opacity: .6; }
.eth-row:has(.eth-aktiv input:not(:checked)) { opacity: .6; }
.einst-kat-row:has(.einst-kat-aktiv:not(:checked)) { opacity: .6; }
.eak-kopf,
.eak-row { display: grid; align-items: center; gap: var(--space-3); }
.eak-kopf--typ,
.eak-row--typ { grid-template-columns: 90px minmax(0, 1fr) 110px minmax(0, 160px) 90px; }
.eak-kopf--einfach,
.eak-row--einfach { grid-template-columns: 90px minmax(0, 1fr) 90px; }
.eak-kopf {
padding: 0 var(--space-1) var(--space-2);
border-bottom: 1px solid var(--color-border);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-muted);
}
.eak-liste { list-style: none; margin: 0; padding: 0; }
.eak-row {
padding: var(--space-2) var(--space-1);
border-bottom: 1px solid var(--color-border-subtle);
min-height: 48px;
}
.eak-row:last-child { border-bottom: 0; }
.eak-aktiv { justify-self: start; }
.eak-pflicht { justify-self: start; }
.eak-name { min-width: 0; width: 100%; }
.eak-intervall { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.eak-monate { width: 5.5rem; min-width: 0; }
.eak-einheit { font-size: var(--fs-meta); color: var(--color-text-muted); white-space: nowrap; }
.eak-quittung { min-width: 84px; font-size: var(--fs-caption); }
.eak-marke { margin-bottom: var(--space-4); }
.eak-liste--modelle { padding-left: var(--space-6); }
.eak-row--marke .eak-name { font-weight: var(--fw-semibold); }
.eak-gruppe {
margin: var(--space-5) 0 var(--space-2);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-muted);
}
.eak-gruppe:first-child { margin-top: 0; }
.eak-kein-modell,
.eak-leer {
padding: var(--space-2) 0 var(--space-2) var(--space-6);
font-size: var(--fs-meta);
color: var(--color-text-muted);
}
.eak-leer { padding-left: 0; }
.eak-hinweis {
margin: 0 0 var(--space-3);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border-subtle);
border-left: 3px solid var(--brand-default);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
font-size: var(--fs-meta);
color: var(--color-text-secondary);
line-height: 1.5;
overflow-wrap: anywhere;
}
.ezk-leiste {
display: flex; align-items: center; gap: var(--space-3);
margin-bottom: var(--space-4); flex-wrap: wrap;
}
.ezk-suche { flex: 1 1 220px; min-width: 0; }
.ezk-nuraktiv {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--fs-meta); color: var(--color-text-secondary); white-space: nowrap;
}
.ezk-zaehler {
margin-left: auto; font-size: var(--fs-caption); color: var(--color-text-muted);
white-space: nowrap;
}
.ezk-kopf,
.ezk-row {
display: grid; align-items: center; gap: var(--space-3);
grid-template-columns: 72px minmax(0, 1.6fr) 130px 140px minmax(0, 1.2fr) 96px;
}
.ezk-kopf {
padding: 0 var(--space-1) var(--space-2);
border-bottom: 1px solid var(--color-border);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-muted);
}
.ezk-liste { list-style: none; margin: 0; padding: 0; }
.ezk-row {
padding: var(--space-2) var(--space-1);
border-bottom: 1px solid var(--color-border-subtle);
min-height: 48px;
}
.ezk-row:last-child { border-bottom: 0; }
.ezk-row--inaktiv { opacity: .55; }
.ezk-row--neu {
background: var(--color-bg-subtle);
border-radius: var(--radius-md);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-2);
}
.ezk-aktiv--platzhalter { display: block; }
.ezk-aktiv { justify-self: start; }
.ezk-name, .ezk-link, .ezk-select { min-width: 0; width: 100%; }
.ezk-quittung { min-width: 84px; font-size: var(--fs-caption); }
.ezk-anlegen-btn { justify-self: start; }
.ezk-leer {
padding: var(--space-4) 0;
font-size: var(--fs-meta);
color: var(--color-text-muted);
}
@media (max-width: 999px) {
.ezk-kopf { display: none; }
.ezk-row {
grid-template-columns: 72px minmax(0, 1fr) 96px;
row-gap: var(--space-2);
}
.ezk-row .ezk-name { grid-column: 2 / 4; }
.ezk-row .ezk-select { grid-column: span 1; }
.ezk-row .ezk-link { grid-column: 2 / 4; }
.ezk-row--neu .ezk-anlegen-btn { grid-column: 2 / 4; justify-self: start; }
}
@media (max-width: 599px) {
.ezk-row { grid-template-columns: 56px minmax(0, 1fr); }
.ezk-row .ezk-name,
.ezk-row .ezk-link { grid-column: 1 / 3; }
.ezk-row .ezk-select { grid-column: span 1; }
.ezk-zaehler { margin-left: 0; }
}
@media (max-width: 999px) {
.eak-kopf--typ, .eak-row--typ { grid-template-columns: 80px minmax(0, 1fr) 90px minmax(0, 130px); }
.eak-kopf--einfach, .eak-row--einfach { grid-template-columns: 80px minmax(0, 1fr); }
.eak-quittung { display: none; }
.eak-kopf--typ > span:last-child { display: none; }
.eak-kopf--einfach > span:last-child { display: none; }
}
@media (max-width: 599px) {
.eak-kopf { display: none; }
.eak-row--typ {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "aktiv name" "pflicht intervall";
row-gap: var(--space-2);
padding: var(--space-3) var(--space-1);
}
.eak-row--typ .eak-aktiv { grid-area: aktiv; }
.eak-row--typ .eak-name { grid-area: name; }
.eak-row--typ .eak-pflicht { grid-area: pflicht; }
.eak-row--typ .eak-intervall { grid-area: intervall; }
.eak-liste--modelle { padding-left: var(--space-4); }
}
.of-kopf {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.of-kpi {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.of-kpi b { font-size: var(--font-size-md); color: var(--color-text-primary); }
.app-scope button.of-kpi {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
cursor: pointer;
}
.app-scope button.of-kpi:hover { border-color: var(--color-border-hover); }
.app-scope button.of-kpi:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.app-scope button.of-kpi.is-active { border-color: var(--lod-darkblue); background: var(--card-bg, #fff); }
@media (max-width: 999px) {
.app-scope button.of-kpi { min-height: var(--touch-ziel); align-items: center; }
.app-scope .of-zeile-recht { min-height: var(--touch-ziel); display: inline-flex; align-items: center; }
}
.of-suche { max-width: 240px; margin-left: auto; }
.of-mehr { margin-top: var(--space-2); }
.of-tabelle {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.of-tabelle th,
.of-tabelle td {
text-align: left;
padding: var(--space-1-5) var(--space-2);
border-bottom: 1px solid var(--color-border-subtle);
vertical-align: top;
}
.of-tabelle th { color: var(--color-text-secondary); font-weight: 600; }
.of-adr { overflow-wrap: anywhere; }
.of-befunde { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.of-befund {
display: inline-block;
padding: 0 var(--space-1);
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
}
.of-zeile:last-child td { border-bottom: none; }
.of-befund--ok { background: transparent; color: var(--lod-success-700); }
.app-scope .of-zeile-recht {
display: inline-block; padding: 0 var(--space-1);
border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
background: transparent; color: var(--lod-darkblue);
font-size: inherit; cursor: pointer;
}
.app-scope .of-zeile-recht:hover { background: var(--color-bg-subtle); border-color: var(--color-border-hover); }
.app-scope .of-zeile-recht:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.of-hinweis {
padding: var(--space-3);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.of-uebersprungen { margin-top: var(--space-4); }
.of-uebersprungen h4 {
margin: 0 0 var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.of-uebersprungen ul { margin: 0; padding-left: var(--space-4); font-size: var(--font-size-sm); }
.of-grund { color: var(--color-text-tertiary); }
@media (max-width: 999px) {
.of-tabelle { display: block; overflow-x: auto; white-space: nowrap; }
.of-befunde { white-space: normal; }
.of-tabelle th, .of-tabelle td { padding: var(--space-1) var(--space-1-5); }
}
@media (max-width: 599px) {
.of-kpi { font-size: var(--font-size-xs); }
}
.ekat-kopf {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--space-2);
padding: 0 0 var(--space-1-5);
border-bottom: 1px solid var(--color-border);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
color: var(--color-text-tertiary);
}
.ekat-kopf-meta { display: flex; align-items: center; gap: var(--space-2); }
.ekat-kopf-sort { width: 76px; }
.ekat-liste { list-style: none; margin: 0; padding: 0; }
.ekat-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.ekat-row:last-child { border-bottom: 0; }
.ekat-name { min-width: 0; padding-left: calc(min(var(--ekat-tiefe, 0), 8) * var(--space-4)); }
.ekat-meta { display: flex; align-items: center; gap: var(--space-2); }
.ekat-sort { width: 76px; }
.ekat-anzahl { font-size: var(--fs-caption); color: var(--color-text-tertiary); white-space: nowrap; }
.ekat-quittung { min-width: 84px; font-size: var(--fs-caption); }
.ekat-aktionen { display: flex; align-items: center; gap: var(--space-1); justify-self: end; }
.ekat-akt {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border: 0; border-radius: var(--radius-sm);
background: transparent; color: var(--color-text-secondary); cursor: pointer;
}
.ekat-akt:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.ekat-neu-zeile { padding-top: var(--space-3); }
@media (max-width: 999px) {
.ekat-row { grid-template-columns: minmax(0, 1fr) auto; }
.ekat-meta { grid-column: 1 / -1; flex-wrap: wrap; }
.ekat-kopf { display: none; }
.ekat-akt { min-width: var(--touch-ziel); min-height: var(--touch-ziel); }
}
.bcv-root { display: block; }
.bcv-quelle { margin-top: 0; }
.bcv-quelle-titel { font-weight: 600; margin-bottom: var(--space-1); }
.bcv-block {
display: flex; flex-direction: column; gap: var(--space-1-5);
margin-top: var(--space-3); padding-top: var(--space-3);
border-top: 1px solid var(--color-border-subtle);
max-width: 68ch;
}
.bcv-zeile {
display: flex; align-items: baseline; gap: var(--space-3);
justify-content: space-between; min-width: 0;
font-size: var(--fs-meta); line-height: 1.5;
}
.bcv-block-titel {
font-size: var(--fs-meta); font-weight: 600; color: var(--color-text-secondary);
margin-bottom: var(--space-1);
}
.bcv-label { color: var(--color-text-secondary); flex: 0 0 auto; }
.bcv-wert { color: var(--color-text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.bcv-wert.bcv-fehlt { color: var(--status-warning-fg); font-weight: 600; }
.bcv-wert.bcv-hinweis { color: var(--color-text-secondary); }
.bcv-aktionen {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
margin-top: var(--space-3);
}
.bcv-sperre { color: var(--color-text-secondary); font-size: var(--fs-meta); }
.einst-pruef-zeile.bcv-teilweise { color: var(--color-text-secondary); }
@media (max-width: 599px) {
.bcv-zeile { flex-direction: column; gap: 2px; }
.bcv-wert { text-align: left; }
}
/*== /styles/sections/einstellungen/einstellungen-flaechen.css ==*/
.einst-flaeche-host { display: block; }
.app-scope [data-einst-flaeche] { min-height: 47px; }
.einst-fl-karte {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.einst-fl-karte-info {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.einst-fl-karte-zeile {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.einst-fl-karte-stats {
display: inline-flex;
align-items: baseline;
gap: var(--space-4);
flex-wrap: wrap;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
overflow-wrap: anywhere;
}
.einst-fl-stat { white-space: nowrap; }
.einst-fl-stat b {
font-weight: 600;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.einst-fl-status { flex: 0 0 auto; }
.einst-fl-status.is-angepasst {
background: var(--color-brand-bg-subtle);
color: var(--color-brand);
}
.einst-fl-karte-register {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.einst-fl-reg-pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
}
.einst-fl-reg-zahl {
color: var(--color-text-tertiary);
font-variant-numeric: tabular-nums;
}
.einst-fl-reg-pill.is-angepasst::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-brand);
flex: 0 0 auto;
}
.einst-fl-karte-aktionen {
display: flex;
gap: var(--space-2);
flex: 0 0 auto;
}
.einst-fl-werkbank {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.einst-fl-werkbank .drawer-tabs-bar { position: static; }
.einst-fl-akte-body {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-height: 0;
}
.einst-fl-akte-seite { max-width: 720px; }
.einst-fl-leiste {
position: sticky;
top: calc(-1 * var(--kleb-versatz, 0px));
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
padding-block: var(--space-2);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border-subtle);
}
.einst-fl-reiterleiste {
display: flex;
gap: var(--space-1);
flex-wrap: wrap;
min-width: 0;
}
@media (max-width: 999px) {
.app-scope .einst-fl-reiter,
.app-scope .einst-fl-toggle,
.app-scope .einst-fl-baumreg-kopf,
.app-scope .einst-fl-baumzeile { min-height: var(--touch-ziel); }
}
.app-scope .einst-fl-reiter {
border: 0;
background: none;
padding: var(--space-2) var(--space-3);
border-bottom: 2px solid transparent;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
cursor: pointer;
white-space: nowrap;
}
.app-scope .einst-fl-reiter:hover { color: var(--color-text-primary); }
.app-scope .einst-fl-reiter.is-aktiv {
color: var(--color-brand);
border-bottom-color: var(--color-brand);
font-weight: 600;
}
.einst-fl-leiste-rechts {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 0 0 auto;
}
.einst-fl-befehl { white-space: nowrap; }
.einst-fl-haken {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
cursor: pointer;
}
.einst-fl-haken input { flex: 0 0 auto; }
.app-scope .einst-fl-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-pill);
background: var(--color-surface);
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
cursor: pointer;
white-space: nowrap;
}
.app-scope .einst-fl-toggle:hover { border-color: var(--color-border-hover); }
.app-scope .einst-fl-toggle.is-aktiv {
border-color: var(--color-brand);
background: var(--color-bg-selected);
color: var(--color-brand);
}
.einst-fl-leiste-status { flex: 0 0 auto; }
.einst-fl-csuche {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 0 1 220px;
}
.app-scope .einst-fl-csuche .input { min-width: 0; }
.einst-fl-hinweis {
margin: 0;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.einst-fl-befund,
.einst-fl-regellive {
margin: 0;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--color-danger-bg);
color: var(--color-danger-fg);
font-size: var(--font-size-sm);
overflow-wrap: anywhere;
}
.einst-fl-regellive {
background: var(--color-brand-bg-subtle);
color: var(--color-text-primary);
}
.einst-fl-buehne {
display: grid;
grid-template-columns: 230px minmax(0, 1fr) 300px;
gap: var(--space-4);
align-items: start;
}
.einst-fl-seite,
.einst-fl-inspektor,
.einst-fl-canvas {
min-width: 0;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
}
.einst-fl-seite,
.einst-fl-inspektor {
position: sticky;
top: var(--space-12);
background: var(--card-bg);
padding: var(--space-3);
max-height: calc(100vh - 260px);
overflow-y: auto;
}
.einst-fl-canvas {
background: var(--color-bg-subtle);
padding: var(--space-4);
min-height: calc(100vh - 320px);
}
.einst-fl-seitenwahl {
display: flex;
width: 100%;
margin-bottom: var(--space-3);
}
.einst-fl-seitenwahl .seg-item {
flex: 1 1 0;
justify-content: center;
min-width: 0;
padding: 0 var(--space-2);
overflow: hidden;
}
.einst-fl-segtext {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.einst-fl-seitenwahl .seg-item.is-active .einst-fl-zaehler {
background: var(--color-surface);
color: var(--lod-darkblue);
}
.einst-fl-baum {
display: flex;
flex-direction: column;
}
.einst-fl-baumreg { margin-bottom: var(--space-3); }
.einst-fl-baumreg:not(.is-aktiv) .einst-fl-baumzeile { color: var(--color-text-secondary); }
.einst-fl-zaehler {
margin-inline-start: var(--space-1);
padding: 0 var(--space-1);
border-radius: var(--radius-pill);
background: var(--color-brand);
color: var(--color-surface);
font-size: var(--font-size-xs);
}
.einst-fl-steck {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-bottom: var(--space-3);
}
.einst-fl-steckzeile {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
font-size: var(--font-size-sm);
}
.einst-fl-steckzeile > span {
color: var(--color-text-tertiary);
flex: 0 0 auto;
}
.einst-fl-steckzeile > b {
font-weight: 500;
color: var(--color-text-primary);
text-align: end;
overflow-wrap: anywhere;
font-variant-numeric: tabular-nums;
}
.app-scope .einst-fl-baumreg-kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
width: 100%;
border: 0;
background: none;
padding: var(--space-1) var(--space-2);
text-align: start;
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-tertiary);
cursor: pointer;
}
.einst-fl-baumreg-name { min-width: 0; overflow-wrap: anywhere; }
.einst-fl-baumzahl {
font-weight: 400;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
flex: 0 0 auto;
}
.app-scope .einst-fl-baumreg-kopf.is-gewaehlt {
background: var(--color-bg-selected);
color: var(--color-text-primary);
}
.app-scope .einst-fl-baumreg-kopf.is-angepasst {
box-shadow: inset 3px 0 0 var(--color-brand);
color: var(--color-text-primary);
}
.app-scope .einst-fl-baumzeile {
display: block;
width: 100%;
border: 0;
border-inline-start: 2px solid transparent;
background: none;
padding: var(--space-1) var(--space-2);
text-align: start;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
cursor: pointer;
overflow-wrap: anywhere;
}
.app-scope .einst-fl-baumzeile.is-element { font-weight: 600; }
.app-scope .einst-fl-baumzeile.is-feld { padding-inline-start: var(--space-5); }
.app-scope .einst-fl-baumzeile:hover { background: var(--color-bg-hover); }
.app-scope .einst-fl-baumzeile.is-gewaehlt {
background: var(--color-bg-selected);
border-inline-start-color: var(--color-brand);
color: var(--color-brand);
}
.app-scope .einst-fl-baumzeile.is-aus { color: var(--color-text-tertiary); }
.einst-fl-stern { color: var(--color-danger-fg); }
.einst-fl-suche {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.app-scope .einst-fl-suche .input { min-width: 0; }
.einst-fl-palettenliste {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.app-scope .einst-fl-palettenzeile {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--space-2);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
background: none;
padding: var(--space-2);
text-align: start;
cursor: pointer;
}
.app-scope .einst-fl-palettenzeile:hover {
border-style: solid;
border-color: var(--color-brand);
background: var(--color-bg-selected);
}
.einst-fl-palettenname {
font-size: var(--font-size-sm);
color: var(--color-text-primary);
overflow-wrap: anywhere;
}
.einst-fl-palettenheimat {
grid-column: 2;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
overflow-wrap: anywhere;
}
.einst-fl-cabschnitte {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.einst-fl-sekt,
.einst-fl-regelkarte,
.einst-fl-regelblatt,
.einst-fl-probe,
.einst-fl-regelleer,
.einst-fl-anskarte {
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
background: var(--color-surface);
padding: var(--space-3) var(--space-4) var(--space-4);
}
.einst-fl-sekt.is-gewaehlt { border-color: var(--color-brand); }
.einst-fl-sekt.is-angepasst { box-shadow: inset 3px 0 0 var(--color-brand); }
.einst-fl-sekt.is-aus { opacity: 0.55; }
.einst-fl-sekt.is-anhang {
margin-top: var(--space-3);
margin-left: var(--space-4);
border-style: dashed;
background: var(--color-surface-soft);
}
.einst-fl-feldzeile {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.einst-fl-feldzeile.is-aus { opacity: 0.55; }
.einst-fl-feldzeile-name {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.einst-fl-feldzeile-name code {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
.einst-fl-feldneu,
.einst-fl-probe {
margin-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.einst-fl-elfeldwahl {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
}
.einst-fl-elfeldwahl code {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
[data-fl-elneu-felder].is-aus { opacity: 0.55; }
.einst-fl-regelsatz {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
font-size: var(--font-size-sm);
}
.einst-fl-regelurteil.is-trifft {
border-color: var(--color-brand);
color: var(--color-brand);
}
.einst-fl-probe-zeile {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.einst-fl-sektkopf {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
cursor: pointer;
}
.einst-fl-sekt.is-fest .einst-fl-sektkopf { cursor: default; }
.einst-fl-sektkopf h4 {
margin: 0;
font-size: var(--font-size-md);
color: var(--color-text-primary);
overflow-wrap: anywhere;
}
.einst-fl-typ {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
border: 1px solid var(--color-border-subtle);
background: var(--color-surface);
}
.einst-fl-ausmarke {
display: inline-flex;
color: var(--color-text-tertiary);
flex: 0 0 auto;
}
.einst-fl-cfelder {
display: flex;
flex-direction: column;
}
.einst-fl-cfeld {
display: grid;
grid-template-columns: 14px minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-1) var(--space-1) 0;
border-inline-start: 3px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
}
.einst-fl-cfelder:has(> [data-fl-breite="halb"]) { flex-direction: row; flex-wrap: wrap; }
.einst-fl-cfelder:has(> [data-fl-breite="halb"]) > .einst-fl-cfeld:not([data-fl-breite="halb"]) { flex: 1 1 100%; }
.einst-fl-cfelder:has(> [data-fl-breite="halb"]) > .einst-fl-cfeld[data-fl-breite="halb"] {
flex: 1 1 calc(50% - var(--space-2));
}
.einst-fl-cfeld > .einst-fl-cgrid { grid-column: 2; }
.einst-fl-cfeld > .einst-fl-ausmarke { grid-column: 3; }
.einst-fl-cfeld > .einst-fl-stdmarke { grid-column: 3; }
.einst-fl-cfeld > .einst-fl-regelmarke { grid-column: 4; }
.einst-fl-regelmarke { border-style: solid; }
.einst-fl-stdmarke {
flex: 0 0 auto;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 var(--space-1-5);
border: 1px dashed var(--color-border);
border-radius: var(--radius-pill);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
background: var(--color-surface);
}
.einst-fl-cfeld:hover { background: var(--color-bg-hover); }
.einst-fl-cfeld.is-gewaehlt {
background: var(--color-bg-selected);
outline: 1px solid var(--color-brand);
}
.einst-fl-cfeld.is-angepasst { border-inline-start-color: var(--color-brand); }
.einst-fl-cfeld.is-aus { opacity: 0.55; }
.einst-fl-cgrid {
display: grid;
grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
align-items: center;
gap: var(--space-1) var(--space-3);
min-width: 0;
}
.einst-fl-cgrid .field-icon { width: 16px; height: 16px; }
.einst-fl-cgrid .field-value,
.einst-fl-cgrid .field-value-row {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.einst-fl-cgrid .field-value-content {
position: relative;
width: 100%;
}
.einst-fl-cgrid .field-value-content:empty::after {
content: "";
display: block;
height: 28px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
}
.einst-fl-cfeld[data-fl-widget="textarea"] .field-value-content:empty::after { height: 56px; }
.einst-fl-cfeld[data-fl-widget="select"] .field-value-content:empty::before,
.einst-fl-cfeld[data-fl-widget="multiselect"] .field-value-content:empty::before,
.einst-fl-cfeld[data-fl-widget="auswahl"] .field-value-content:empty::before,
.einst-fl-cfeld[data-fl-widget="text-vorschlag"] .field-value-content:empty::before,
.einst-fl-cfeld[data-fl-widget="datum"] .field-value-content:empty::before,
.einst-fl-cfeld[data-fl-widget="datum-zeit"] .field-value-content:empty::before {
content: "";
position: absolute;
top: 50%;
right: var(--space-2);
width: 14px;
height: 14px;
transform: translateY(-50%);
background-color: var(--color-text-tertiary);
-webkit-mask-image: url('/assets/icons/fluent/chevron_down_24_regular.svg');
mask-image: url('/assets/icons/fluent/chevron_down_24_regular.svg');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
z-index: 1;
}
.einst-fl-cfeld[data-fl-widget="datum"] .field-value-content:empty::before,
.einst-fl-cfeld[data-fl-widget="datum-zeit"] .field-value-content:empty::before {
-webkit-mask-image: url('/assets/icons/fluent/calendar_ltr_24_regular.svg');
mask-image: url('/assets/icons/fluent/calendar_ltr_24_regular.svg');
}
.einst-fl-ohneicon {
font-size: var(--font-size-xs);
font-style: italic;
color: var(--color-text-tertiary);
}
.einst-fl-cwert {
height: 0.75rem;
width: 60%;
align-self: center;
border-radius: var(--radius-pill);
background: var(--color-bg-subtle);
}
.einst-fl-ckacheln,
.einst-fl-caktionen {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.app-scope .einst-fl-ckachel,
.app-scope .einst-fl-caktion {
display: inline-flex;
align-items: center;
gap: var(--space-2);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
background: var(--color-surface);
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
cursor: pointer;
}
.app-scope .einst-fl-ckachel:hover,
.app-scope .einst-fl-caktion:hover { border-color: var(--color-border-hover); }
.app-scope .einst-fl-ckachel.is-gewaehlt,
.app-scope .einst-fl-caktion.is-gewaehlt {
border-color: var(--color-brand);
background: var(--color-bg-selected);
}
.app-scope .einst-fl-ckachel.is-angepasst,
.app-scope .einst-fl-caktion.is-angepasst { box-shadow: inset 3px 0 0 var(--color-brand); }
.app-scope .einst-fl-ckachel.is-aus,
.app-scope .einst-fl-caktion.is-aus { opacity: 0.55; }
.einst-fl-platzhalter {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
overflow-wrap: anywhere;
}
.einst-fl-schema {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.einst-fl-schema i {
display: block;
height: 10px;
border-radius: var(--radius-pill);
background: var(--color-bg-subtle);
}
.einst-fl-schema i:nth-child(1) { width: 78%; }
.einst-fl-schema i:nth-child(2) { width: 60%; }
.einst-fl-schema i:nth-child(3) { width: 42%; }
.einst-fl-inskopf {
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border-subtle);
margin-bottom: var(--space-3);
}
.einst-fl-inskopf .einst-fl-status {
display: inline-block;
margin-top: var(--space-2);
}
.einst-fl-insart {
display: block;
font-size: var(--font-size-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-tertiary);
}
.einst-fl-inskopf h4 {
margin: var(--space-1) 0 0;
font-size: var(--font-size-md);
color: var(--color-text-primary);
overflow-wrap: anywhere;
}
.einst-fl-insbody {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.einst-fl-inspgruppe {
margin: var(--space-2) 0 0;
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-tertiary);
}
.einst-fl-inspzeile {
display: flex;
flex-direction: column;
gap: var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.einst-fl-zellenbereich {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.einst-fl-zellenbereich:last-of-type { border-bottom: 0; }
.einst-fl-czeile {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) 0;
}
.einst-fl-czeilegruppe {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-1);
border-radius: var(--radius-md);
background: var(--color-surface-soft);
}
.einst-fl-czelle {
display: inline-flex;
align-items: center;
padding: 1px var(--space-2);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border-subtle);
background: var(--color-surface);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
white-space: nowrap;
}
.einst-fl-czelle.is-benannt {
border-color: var(--color-brand);
color: var(--color-brand);
}
.einst-fl-czelle.is-aus {
text-decoration: line-through;
opacity: 0.55;
}
.einst-fl-czeilename {
margin-top: var(--space-2);
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--color-text-secondary);
}
.einst-fl-czeilename:first-of-type { margin-top: 0; }
.einst-fl-zellenliste {
margin-top: var(--space-2);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text-primary);
}
.einst-fl-zellenliste:first-of-type { margin-top: 0; }
.einst-fl-zellenzeile {
display: grid;
grid-template-columns: 1fr auto 8rem;
align-items: center;
gap: var(--space-2);
}
.einst-fl-zellenordnen { display: flex; gap: var(--space-1); }
.app-scope .einst-fl-zellenname { width: 100%; }
@media (max-width: 999px) {
.einst-fl-zellenzeile { grid-template-columns: 1fr auto; }
.app-scope .einst-fl-zellenname { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
.einst-fl-zellenzeile { grid-template-columns: 1fr; }
.einst-fl-zellenordnen { justify-content: flex-start; }
}
.app-scope .einst-fl-label { width: 100%; }
.app-scope .einst-fl-umzug { width: 100%; }
.einst-fl-umzugzeile {
display: flex;
flex-direction: column;
gap: var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.einst-fl-umzuglabel { display: block; }
.einst-fl-umzugtrack {
display: flex;
flex-wrap: wrap;
height: auto;
max-width: 100%;
}
.app-scope .einst-fl-standard { width: 100%; }
.einst-fl-stdmenge {
display: flex;
flex-direction: column;
gap: var(--space-xxs);
max-height: 180px;
overflow-y: auto;
padding: var(--space-1);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
}
.einst-fl-stdmenge-zeile { font-size: var(--font-size-sm); }
.einst-fl-grund {
margin: 0;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
overflow-wrap: anywhere;
}
.einst-fl-insfuss {
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-subtle);
}
.einst-fl-insleer h4 {
margin: 0 0 var(--space-2);
font-size: var(--font-size-md);
color: var(--color-text-primary);
}
.einst-fl-insleer p {
margin: 0 0 var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
overflow-wrap: anywhere;
}
.einst-fl-insleer-umfang {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
.einst-fl-griff {
width: 14px;
height: 20px;
flex: 0 0 auto;
opacity: 0;
border-radius: var(--radius-sm);
cursor: grab;
background-color: transparent;
background-image:
radial-gradient(circle, var(--color-text-tertiary) 1px, transparent 1.5px),
radial-gradient(circle, var(--color-text-tertiary) 1px, transparent 1.5px);
background-size: 4px 6px;
background-repeat: repeat-y;
background-position: 2px 2px, 8px 2px;
transition: opacity 0.12s ease;
}
.einst-fl-cfeld:hover .einst-fl-griff,
.einst-fl-cfeld.is-gewaehlt .einst-fl-griff,
.einst-fl-cfeld:focus-within .einst-fl-griff,
.einst-fl-sektkopf:hover .einst-fl-griff,
.einst-fl-sekt.is-gewaehlt .einst-fl-griff { opacity: 1; }
.einst-fl-griff:active { cursor: grabbing; }
.einst-fl-drag-ghost { opacity: 0.4; }
.einst-fl-akte-seite--breit { max-width: 1160px; }
.einst-fl-regelseite { min-width: 0; }
.einst-fl-regelseite.hat-probe {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: var(--space-4);
align-items: start;
}
.einst-fl-regelspalte {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.einst-fl-probespalte { position: sticky; top: var(--space-3); min-width: 0; }
.einst-fl-probespalte .einst-fl-probe { margin-top: 0; }
.einst-fl-regelkopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
flex-wrap: wrap;
}
.einst-fl-regelanzahl {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.einst-fl-regelleer .app-cta-btn { margin-top: var(--space-2); }
.einst-fl-regelliste {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.einst-fl-regelzeile {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
min-width: 0;
}
.einst-fl-regelzeile + .einst-fl-regelzeile { margin-top: var(--space-2); }
.einst-fl-regelwort {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--color-brand-bg-subtle);
color: var(--color-brand);
}
.einst-fl-regelwort--dann {
background: var(--color-surface);
color: var(--color-text-secondary);
border: 1px solid var(--color-border-subtle);
}
.einst-fl-regelfolgen {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-1);
font-size: var(--font-size-sm);
}
.einst-fl-regelfolge { min-width: 0; overflow-wrap: anywhere; }
.einst-fl-regelfolge + .einst-fl-regelfolge::before {
content: "·";
margin-right: var(--space-1);
color: var(--color-text-tertiary);
}
.einst-fl-regeldrawer {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.einst-fl-regelblatt-titel {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
min-width: 0;
}
.einst-fl-regelblatt-satz {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
min-width: 0;
overflow-wrap: anywhere;
}
.einst-fl-regelblatt-kopf,
.einst-fl-regelblatt-zeile {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 0.7fr);
gap: var(--space-2);
align-items: center;
}
.einst-fl-regelblatt-kopf.hat-griff,
.einst-fl-regelblatt-zeile.hat-griff {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 0.7fr) auto;
}
.einst-fl-regelblatt-zeile + .einst-fl-regelblatt-zeile { margin-top: var(--space-2); }
.einst-fl-folge-neu { margin-top: var(--space-2); }
.einst-fl-regelblatt-kopf {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-1);
}
.einst-fl-regelblatt-kopf > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.einst-fl-regelblatt-zeile .select,
.einst-fl-regelblatt-zeile .input {
width: 100%;
min-width: 0;
}
.einst-fl-regelblatt-leer {
color: var(--color-text-tertiary);
text-align: center;
}
.einst-fl-regelblatt-hinweis { margin-top: var(--space-2); }
.einst-fl-regelverkn {
flex: 0 0 auto;
width: auto;
min-width: 0;
font-size: var(--font-size-sm);
}
.einst-fl-regelgruppe-kopf [data-fl-gruppe-weg] { margin-left: auto; }
.einst-fl-regelgruppe {
background: var(--color-bg-muted);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3) var(--space-3);
margin-top: var(--space-2);
}
.einst-fl-regelgruppe-kopf {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
min-width: 0;
}
.einst-fl-regelgruppe-wort {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.einst-fl-regelblatt-griffe {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.einst-fl-regelblatt-griffe .einst-fl-folge-neu { margin-top: 0; }
.einst-fl-regelleer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
text-align: center;
padding-block: var(--space-8);
}
.einst-fl-regelleer h5 { margin: 0; font-size: var(--font-size-md); }
.einst-fl-regelleer p {
margin: 0;
max-width: 46ch;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.einst-fl-regelleer .ui-ico img { width: 28px; height: 28px; opacity: 0.55; }
.einst-fl-probe-ergebnis:not(:empty) {
border-top: 1px solid var(--color-border-subtle);
padding-top: var(--space-2);
}
.einst-fl-inspregeln { display: flex; flex-direction: column; min-width: 0; }
.einst-fl-inspregel .einst-fl-regelsatz { font-size: var(--font-size-xs); }
.einst-fl-regelneumit { margin-top: var(--space-1); }
.einst-fl-anskarten {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
gap: var(--space-3);
align-items: start;
margin-top: var(--space-2);
}
.einst-fl-anskarte {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
}
.einst-fl-anskarte-kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
min-width: 0;
}
.einst-fl-anskeine {
flex: 0 0 auto;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
.einst-fl-anspillen {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.einst-fl-anskuer {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.einst-fl-anskuer .select {
flex: 1 1 180px;
min-width: 0;
width: auto;
}
@media (max-width: 1399px) {
.einst-fl-buehne { grid-template-columns: 200px minmax(0, 1fr) 270px; }
.einst-fl-cgrid { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); }
.einst-fl-regelseite.hat-probe { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 999px) {
.einst-fl-buehne { grid-template-columns: minmax(0, 1fr); }
.einst-fl-canvas { order: -1; }
.einst-fl-seite,
.einst-fl-inspektor { position: static; max-height: none; }
.einst-fl-leiste-rechts {
justify-content: flex-start;
flex: 0 1 auto;
flex-wrap: wrap;
min-width: 0;
row-gap: var(--space-2);
}
.einst-fl-regelseite.hat-probe { grid-template-columns: minmax(0, 1fr); }
.einst-fl-probespalte { position: static; }
}
@media (max-width: 599px) {
.einst-fl-karte { flex-direction: column; align-items: stretch; }
.einst-fl-karte-aktionen { justify-content: flex-end; }
.einst-fl-leiste { align-items: stretch; flex-direction: column; gap: var(--space-2); }
.einst-fl-csuche { flex: 1 1 100%; order: -1; }
.einst-fl-canvas { padding: var(--space-2); }
.einst-fl-sekt,
.einst-fl-regelkarte,
.einst-fl-regelblatt,
.einst-fl-probe,
.einst-fl-regelleer,
.einst-fl-anskarte { padding: var(--space-3); }
.einst-fl-cgrid { grid-template-columns: minmax(0, 1fr); }
.einst-fl-typ { display: none; }
.einst-fl-regelblatt-kopf { display: none; }
.einst-fl-regelblatt-zeile { grid-template-columns: minmax(0, 1fr); }
.einst-fl-regelblatt-leer { display: none; }
.einst-fl-regelblatt-zeile.hat-griff {
grid-template-columns: minmax(0, 1fr) auto;
}
.einst-fl-regelblatt-zeile.hat-griff > * { grid-column: 1; }
.einst-fl-regelblatt-zeile.hat-griff > [data-fl-bed-weg],
.einst-fl-regelblatt-zeile.hat-griff > [data-fl-gruppe-weg],
.einst-fl-regelblatt-zeile.hat-griff > [data-fl-folge-weg] {
grid-column: 2;
grid-row: 1;
align-self: start;
}
}
/*== /styles/components/drawers/prof-drawer.css ==*/
.prof-title { display: flex; align-items: center; gap: var(--space-3); }
.prof-avatar { flex-shrink: 0; }
.prof-title-text { min-width: 0; }
.prof-name { font-size: var(--font-size-xl); font-weight: var(--fw-semibold); color: var(--color-text); }
.prof-pos { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-xxs); }
.prof-readonly-hint { margin-bottom: var(--space-3); }
.app-scope .field-value[data-prof-slot="adresse"],
.app-scope .field-value[data-prof-slot="arbeitszeitText"] {
align-items: flex-start;
padding-top: var(--space-1-5);
}
/*== /styles/components/nachweis-liste.css ==*/
.nachweis-liste {
border-top: 1px solid var(--color-border-light);
padding: var(--space-2-5) var(--space-4);
}
.nachweis-summary {
display: flex; align-items: center; gap: var(--space-1-5);
cursor: pointer;
font-size: var(--fs-caption);
color: var(--color-text-secondary);
font-weight: var(--fw-medium);
list-style: none;
user-select: none;
padding: var(--space-1) 0;
}
.nachweis-summary::-webkit-details-marker { display: none; }
.nachweis-summary::after {
content: '▾';
margin-left: auto;
font-size: 10px;
transition: transform var(--duration-quick) var(--ease-soft);
}
.nachweis-liste[open] .nachweis-summary::after { transform: rotate(180deg); }
.nachweis-summary:hover { color: var(--color-text); }
@media (max-width: 999px) {
.nachweis-summary { min-height: var(--touch-ziel); }
}
.nachweis-count {
color: var(--color-text-muted);
font-weight: var(--fw-normal);
}
.nachweis-items {
list-style: none;
margin: var(--space-2) 0 0;
padding: 0;
display: flex; flex-direction: column; gap: var(--space-2);
max-height: 280px;
overflow-y: auto;
}
.nachweis-item {
padding: var(--space-2) var(--space-2-5);
background: var(--color-bg-subtle);
border-radius: var(--radius-md);
border-left: 3px solid var(--brand-default);
font-size: var(--fs-caption);
}
.nachweis-hd {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-xxs);
}
.nachweis-feld {
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.nachweis-datum {
color: var(--color-text-muted);
font-size: var(--fs-badge);
}
.nachweis-change {
color: var(--color-text-secondary);
line-height: 1.5;
}
.nachweis-vor { color: var(--color-text-muted); }
.nachweis-arrow { color: var(--color-text-muted); font-weight: var(--fw-semibold); margin: 0 var(--space-xxs); }
.nachweis-nach { color: var(--color-text); font-weight: var(--fw-medium); }
.nachweis-wer {
color: var(--color-text-muted);
font-size: var(--fs-badge);
font-style: italic;
margin-top: var(--space-xxs);
}
.nachweis-hint {
margin-top: var(--space-2);
font-size: var(--fs-badge);
color: var(--color-text-muted);
font-style: italic;
}