/* ========================================================================== Auto-Dienstplan MTR – Gestaltung „Frosted Glass“ -------------------------------------------------------------------------- Gestaltungsidee: Ein ruhiger, langsam fließender Farbhintergrund (Aurora) liegt unter schwebenden Milchglas-Flächen (Action-Bar, Statusleiste, Tabelle, Detailleiste). Dienste erscheinen als getönte Glasplättchen; Farbe trägt Bedeutung (Dienstart, Modalität, Status), nie bloße Dekoration. Aufbau 1 Schrift & Tokens (hell/dunkel, Dichte) 2 Hintergrund (Aurora) & Grundlayout 3 Glasflächen: Action-Bar, Statusleiste, Arbeitsbereich 4 Schaltflächen & Steuerelemente 5 Dienstplantabelle (Fixierung, Zellen, Kopf, Summen, Besetzungszeilen) 6 Detailleiste 7 Popover, Menüs, Editor 8 Tooltip, Toasts, Dialog, Warte-Overlay 9 Effekte & Animationen 10 Responsives Verhalten 11 Druck, reduzierte Bewegung ========================================================================== */ /* 1 ─── Schrift & Tokens ─────────────────────────────────────────────────── */ @font-face { font-family: 'InterVariable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../assets/fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'InterVariable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --font: 'InterVariable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Hintergrund & Glas */ --canvas: #E8ECF6; --aurora-1: rgba(118, 132, 255, .55); --aurora-2: rgba(92, 206, 240, .45); --aurora-3: rgba(246, 160, 208, .42); --aurora-4: rgba(132, 226, 186, .40); --glass: rgba(255, 255, 255, .56); --glass-strong: rgba(255, 255, 255, .78); --glass-solid: #F5F7FD; /* fixierte Tabellenbereiche: deckend, damit nichts durchscheint */ --glass-sheet: rgba(255, 255, 255, .62); /* Fläche der Tabelle */ --glass-border: rgba(255, 255, 255, .72); --glass-line: rgba(36, 46, 84, .09); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .9); --glass-blur: blur(22px) saturate(170%); --glass-shadow: 0 1px 2px rgba(30, 40, 90, .05), 0 12px 32px -14px rgba(30, 40, 90, .28); /* Flächen innerhalb von Glas */ --surface: rgba(255, 255, 255, .78); --surface-2: rgba(255, 255, 255, .5); --surface-3: rgba(40, 52, 96, .06); --elevated: rgba(255, 255, 255, .82); --border: rgba(36, 46, 84, .1); --border-strong: rgba(36, 46, 84, .18); --grid-line: rgba(36, 46, 84, .065); --grid-line-strong: rgba(36, 46, 84, .13); /* Text */ --text: #141A2A; --text-2: #353E55; --muted: #5F6880; --faint: #959DB2; /* Akzent */ --accent: #4A55D8; --accent-strong: #3640C0; --accent-2: #2BB3D9; --accent-soft: rgba(74, 85, 216, .12); --accent-ring: rgba(74, 85, 216, .36); --on-accent: #FFFFFF; /* Status */ --danger: #D92D20; --danger-soft: rgba(217, 45, 32, .1); --danger-ring: rgba(217, 45, 32, .5); --orange: #DD6510; --orange-soft: rgba(221, 101, 16, .11); --warn: #B87F00; --warn-soft: rgba(230, 170, 20, .15); --ok: #10915A; --ok-soft: rgba(16, 145, 90, .12); --info: #2E79D6; --info-soft: rgba(46, 121, 214, .12); --low: #6F7A90; --low-soft: rgba(111, 122, 144, .13); /* Sondertage & Wochenstruktur */ --special-col: rgba(128, 100, 255, .065); --special-col-strong: rgba(128, 100, 255, .13); --holiday-mark: #7F55E0; --today: #4A55D8; --today-col: rgba(74, 85, 216, .045); --week-sep: rgba(36, 46, 84, .2); --hover-col: rgba(74, 85, 216, .055); --sel-col: rgba(74, 85, 216, .1); /* Dienstarten – getönte Glasplättchen (Kontrast der Kürzel ≥ 4,5 : 1) */ --sh-F-bg: rgba(66, 156, 238, .17); --sh-F-fg: #0A5791; --sh-S-bg: rgba(255, 170, 46, .22); --sh-S-fg: #8E4304; --sh-N-bg: rgba(92, 96, 240, .17); --sh-N-fg: #322EA0; --sh-T-bg: rgba(38, 190, 120, .18); --sh-T-fg: #0A643B; --sh-FREI-bg: rgba(110, 124, 150, .11); --sh-FREI-fg: #46506A; --sh-U-bg: rgba(236, 72, 153, .14); --sh-U-fg: #A11460; --sh-K-bg: rgba(240, 68, 56, .14); --sh-K-fg: #A2251A; --sh-KK-bg: rgba(250, 112, 40, .15); --sh-KK-fg: #A03C09; --sh-WB-bg: rgba(150, 90, 240, .14); --sh-WB-fg: #5D33B2; --sh-DASH-bg: transparent; --sh-DASH-fg: #A3AABA; /* Modalitäten */ --mo-DISP: #343F55; --mo-DISP-bg: rgba(80, 92, 120, .13); --mo-MAMMO: #AE1767; --mo-MAMMO-bg: rgba(236, 72, 153, .14); --mo-ANGIO: #AE2A1F; --mo-ANGIO-bg: rgba(240, 68, 56, .13); --mo-MRT: #5D33B2; --mo-MRT-bg: rgba(150, 90, 240, .14); --mo-CT: #07627C; --mo-CT-bg: rgba(20, 170, 210, .15); --mo-RX: #844C00; --mo-RX-bg: rgba(240, 160, 30, .17); --mo-QM: #08665A; --mo-QM-bg: rgba(20, 184, 166, .15); --mo-SPR: #3E690D; --mo-SPR-bg: rgba(120, 190, 40, .17); --rd-M: #7A45E0; --rd-A: #D63A55; /* Form */ --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 15px; --r-xl: 20px; --r-pill: 999px; --shadow-xs: 0 1px 2px rgba(30, 40, 90, .07); --shadow-sm: 0 1px 2px rgba(30, 40, 90, .06), 0 4px 12px -4px rgba(30, 40, 90, .12); --shadow-md: 0 6px 16px -6px rgba(30, 40, 90, .18), 0 18px 40px -16px rgba(30, 40, 90, .22); --shadow-lg: 0 10px 24px -8px rgba(30, 40, 90, .2), 0 32px 70px -20px rgba(30, 40, 90, .35); --shadow-sticky-x: 8px 0 14px -10px rgba(30, 40, 90, .3); --shadow-sticky-y: 0 8px 14px -10px rgba(30, 40, 90, .3); /* Bewegung */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --t-fast: 130ms; --t-base: 210ms; --t-slow: 340ms; /* Tabellenmaße (per JS je Viewport angepasst) */ --name-w: 176px; --day-w: 46px; --sum-w: 38px; --row-h: 36px; --week-h: 22px; --head-h: 50px; --foot-row-h: 24px; --panel-w: 360px; --gap: 10px; color-scheme: light; } :root[data-density="comfort"] { --row-h: 46px; --head-h: 56px; --foot-row-h: 26px; } :root[data-theme="dark"] { --canvas: #070A12; --aurora-1: rgba(84, 92, 230, .42); --aurora-2: rgba(22, 140, 180, .32); --aurora-3: rgba(170, 52, 130, .3); --aurora-4: rgba(28, 140, 96, .26); --glass: rgba(20, 25, 40, .52); --glass-strong: rgba(24, 30, 46, .78); --glass-solid: #121621; --glass-sheet: rgba(15, 19, 30, .58); --glass-border: rgba(255, 255, 255, .09); --glass-line: rgba(0, 0, 0, .45); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .07); --glass-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -16px rgba(0, 0, 0, .7); --surface: rgba(255, 255, 255, .07); --surface-2: rgba(255, 255, 255, .045); --surface-3: rgba(255, 255, 255, .07); --elevated: rgba(26, 32, 48, .86); --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .17); --grid-line: rgba(255, 255, 255, .055); --grid-line-strong: rgba(255, 255, 255, .11); --text: #E9EDF5; --text-2: #C4CBD9; --muted: #8F99AD; --faint: #626C80; --accent: #8E98FF; --accent-strong: #A9B0FF; --accent-2: #5FD3F3; --accent-soft: rgba(142, 152, 255, .15); --accent-ring: rgba(142, 152, 255, .48); --on-accent: #0B0E17; --danger: #FF6B5E; --danger-soft: rgba(255, 107, 94, .14); --danger-ring: rgba(255, 107, 94, .7); --orange: #FF9A4D; --orange-soft: rgba(255, 154, 77, .14); --warn: #F2BE3B; --warn-soft: rgba(242, 190, 59, .14); --ok: #3CCB8A; --ok-soft: rgba(60, 203, 138, .14); --info: #6AB0FF; --info-soft: rgba(106, 176, 255, .14); --low: #8E98AB; --low-soft: rgba(142, 152, 171, .15); --special-col: rgba(150, 120, 255, .06); --special-col-strong: rgba(150, 120, 255, .13); --holiday-mark: #B49BFF; --today: #8E98FF; --today-col: rgba(142, 152, 255, .05); --week-sep: rgba(255, 255, 255, .16); --hover-col: rgba(142, 152, 255, .06); --sel-col: rgba(142, 152, 255, .12); --sh-F-bg: rgba(84, 172, 255, .17); --sh-F-fg: #94CCFF; --sh-S-bg: rgba(255, 170, 64, .17); --sh-S-fg: #FFC47D; --sh-N-bg: rgba(128, 132, 255, .22); --sh-N-fg: #B9BCFF; --sh-T-bg: rgba(60, 203, 138, .17); --sh-T-fg: #84E2B5; --sh-FREI-bg: rgba(160, 172, 196, .1); --sh-FREI-fg: #AAB3C6; --sh-U-bg: rgba(240, 98, 172, .17); --sh-U-fg: #F7A0CF; --sh-K-bg: rgba(255, 107, 94, .18); --sh-K-fg: #FFA197; --sh-KK-bg: rgba(255, 140, 70, .17); --sh-KK-fg: #FFB485; --sh-WB-bg: rgba(170, 120, 255, .18); --sh-WB-fg: #CBAEFF; --sh-DASH-fg: #4E586B; --mo-DISP: #BAC3D6; --mo-DISP-bg: rgba(183, 193, 212, .14); --mo-MAMMO: #F59ACB; --mo-MAMMO-bg: rgba(245, 154, 203, .15); --mo-ANGIO: #FF9C92; --mo-ANGIO-bg: rgba(255, 156, 146, .15); --mo-MRT: #C8A8FF; --mo-MRT-bg: rgba(200, 168, 255, .15); --mo-CT: #79D4F0; --mo-CT-bg: rgba(121, 212, 240, .14); --mo-RX: #FFC27A; --mo-RX-bg: rgba(255, 194, 122, .14); --mo-QM: #6FDCC8; --mo-QM-bg: rgba(111, 220, 200, .14); --mo-SPR: #B5E27A; --mo-SPR-bg: rgba(181, 226, 122, .14); --rd-M: #A47CFF; --rd-A: #FF7E95; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px -4px rgba(0, 0, 0, .4); --shadow-md: 0 6px 16px -6px rgba(0, 0, 0, .5), 0 18px 40px -16px rgba(0, 0, 0, .6); --shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, .55), 0 32px 70px -20px rgba(0, 0, 0, .7); --shadow-sticky-x: 8px 0 14px -10px rgba(0, 0, 0, .7); --shadow-sticky-y: 0 8px 14px -10px rgba(0, 0, 0, .7); color-scheme: dark; } /* 2 ─── Hintergrund & Grundlayout ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.4; color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; overflow: hidden; text-rendering: optimizeLegibility; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: default; } kbd { font-family: var(--font); font-size: 10.5px; font-weight: 600; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--surface); color: var(--muted); } .ico { width: 18px; height: 18px; flex: none; display: block; } .ico--sm { width: 15px; height: 15px; } .ico--xs { width: 13px; height: 13px; } .ico--lg { width: 22px; height: 22px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } ::selection { background: var(--accent-soft); } /* Aurora-Hintergrund: vier weichgezeichnete Farbfelder, langsam driftend */ .aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .aurora span { position: absolute; border-radius: 50%; /* weiche Farbfelder als Radialverläufe: statisch, damit die Milchglas-Unschärfe nicht in jedem Frame neu berechnet werden muss */ background: radial-gradient(closest-side, var(--c), transparent); } .aurora span:nth-child(1) { width: 78vw; height: 78vw; left: -26vw; top: -32vw; --c: var(--aurora-1); } .aurora span:nth-child(2) { width: 66vw; height: 66vw; right: -22vw; top: -18vw; --c: var(--aurora-2); } .aurora span:nth-child(3) { width: 72vw; height: 72vw; left: 10vw; bottom: -40vw; --c: var(--aurora-3); } .aurora span:nth-child(4) { width: 56vw; height: 56vw; right: -8vw; bottom: -26vw; --c: var(--aurora-4); } .aurora::after { content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; background-image: radial-gradient(rgba(255, 255, 255, .5) .6px, transparent .6px); background-size: 3px 3px; } :root[data-theme="dark"] .aurora::after { opacity: .12; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 8px 14px; background: var(--accent); color: var(--on-accent); border-radius: var(--r-md); font-weight: 600; text-decoration: none; transition: top var(--t-base) var(--ease-out); } .skip-link:focus { top: 12px; } .app { position: relative; z-index: 1; height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: var(--gap); padding: var(--gap) calc(var(--gap) + 2px) calc(var(--gap) + 2px); } .app > * { min-width: 0; } /* 3 ─── Glasflächen ─────────────────────────────────────────────────────── */ .glass, .topbar, .subbar, .grid-shell, .sidepanel { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--glass-shadow); border-radius: var(--r-xl); } /* Feste Flächen ohne Echtzeit-Unschärfe: Der Hintergrund besteht aus weichen Verläufen, eine Unschärfe wäre optisch identisch, kostet aber bei jedem Scrollschritt Rechenzeit (insbesondere ohne Grafikbeschleunigung, z. B. Remote-Desktop). */ .topbar, .subbar, .grid-shell, .sidepanel { -webkit-backdrop-filter: none; backdrop-filter: none; } /* Lichtreflex, der dem Mauszeiger folgt (gesetzt durch effects.js) */ .spot { position: relative; isolation: isolate; } .spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, .34), transparent 60%); opacity: var(--spot, 0); transition: opacity var(--t-slow); } :root[data-theme="dark"] .spot::before { background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(142, 152, 255, .1), transparent 60%); } .spot > * { position: relative; z-index: 1; } /* Action-Bar */ .topbar { display: flex; align-items: center; gap: 16px; padding: 9px 12px 9px 14px; position: relative; z-index: 30; animation: enterDown 600ms var(--ease-out) both; } .topbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; } .brand-mark { flex: none; width: 36px; height: 36px; display: grid; place-items: center; filter: drop-shadow(0 6px 14px rgba(74, 85, 216, .45)); transition: transform var(--t-slow) var(--ease-spring); } .brand-mark:hover { transform: rotate(-8deg) scale(1.06); } .brand-mark svg { width: 36px; height: 36px; } .brand-text { display: flex; flex-direction: column; min-width: 0; } .brand-eyebrow { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .page-title { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 720; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-title .title-month { background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientPan 9s linear infinite; } .page-title .title-anim { display: inline-block; animation: titleIn 520ms var(--ease-out); } .page-title .title-anim.from-next { animation: titleInNext 560ms 140ms var(--ease-out) both; } .page-title .title-anim.from-prev { animation: titleInPrev 560ms 140ms var(--ease-out) both; } .topbar__nav { display: flex; align-items: center; gap: 6px; flex: none; } .topbar__actions { display: flex; align-items: center; gap: 8px; flex: none; } .topbar__sep { width: 1px; height: 26px; background: var(--border); margin: 0 2px; } .btn-cluster { display: flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: var(--surface-3); } /* Statusleiste */ .subbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 12px 7px 14px; border-radius: var(--r-lg); position: relative; z-index: 20; min-height: 50px; animation: enterDown 600ms 80ms var(--ease-out) both; } .subbar__left, .subbar__right { display: flex; align-items: center; gap: 12px; min-width: 0; } .subbar__right { flex: 0 1 auto; } .fill-meter { display: flex; align-items: center; gap: 9px; padding-right: 4px; } .ring { width: 34px; height: 34px; transform: rotate(-90deg); overflow: visible; } .ring circle { fill: none; stroke-width: 4; } .ring__bg { stroke: var(--surface-3); } .ring__fg { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset 900ms var(--ease-out); filter: drop-shadow(0 0 4px var(--accent-ring)); } .fill-meter.is-full .ring__fg { stroke: var(--ok); filter: drop-shadow(0 0 5px rgba(16, 145, 90, .45)); } .fill-meter__text { display: flex; flex-direction: column; line-height: 1.1; } .fill-meter__text strong { font-size: 14px; font-variant-numeric: tabular-nums; } .fill-meter__text span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .conflict-chips { display: flex; gap: 6px; flex-wrap: nowrap; } .cchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 7px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 650; color: var(--text-2); box-shadow: var(--glass-hi); transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); } .cchip:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .cchip:active { transform: translateY(0) scale(.96); } .cchip__cls { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 7px; font-size: 11px; font-weight: 800; color: #fff; } .cchip__n { font-variant-numeric: tabular-nums; min-width: 8px; text-align: center; } .cchip--A .cchip__cls { background: var(--danger); } .cchip--B .cchip__cls { background: var(--orange); } .cchip--C .cchip__cls { background: var(--warn); } .cchip--D .cchip__cls { background: var(--low); } .cchip.is-zero { opacity: .55; } .cchip.is-zero .cchip__cls { background: var(--faint); } .cchip--A:not(.is-zero) { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); color: var(--danger); animation: alarm 2.4s var(--ease-in-out) infinite; } .cchip.bump { animation: bump 460ms var(--ease-spring); } .cchip--A.bump:not(.is-zero) { animation: bump 460ms var(--ease-spring), alarm 2.4s 460ms var(--ease-in-out) infinite; } .plan-state { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; } .plan-state .ico { width: 15px; height: 15px; } .plan-state.is-ok { color: var(--ok); } .search { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); width: 220px; transition: border-color var(--t-fast), box-shadow var(--t-fast), width var(--t-base) var(--ease-out), background var(--t-fast); } .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); background: var(--surface); width: 250px; } .search__icon { color: var(--muted); display: flex; } .search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font-size: 13px; } .search input::placeholder { color: var(--muted); } .search__kbd { flex: none; } .search:focus-within .search__kbd { display: none; } .save-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 108px; justify-content: flex-end; } .save-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft), 0 0 8px var(--ok); } .save-state.is-pending .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); animation: pulse 1s infinite; } .save-state.is-error { color: var(--danger); } .save-state.is-error .dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } /* Arbeitsbereich */ .workspace { display: flex; gap: var(--gap); min-height: 0; position: relative; } .grid-shell { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--glass-sheet); animation: enterUp 700ms 140ms var(--ease-out) both; } .grid-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; overscroll-behavior: contain; scroll-padding-top: calc(var(--week-h) + var(--head-h) + 4px); scroll-padding-left: calc(var(--name-w) + 4px); scroll-padding-right: calc(var(--sum-cols, 3) * var(--sum-w) + 4px); scroll-padding-bottom: calc(var(--foot-rows, 3) * var(--foot-row-h) + 4px); -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; border-radius: var(--r-xl) var(--r-xl) 0 0; } .grid-scroll::-webkit-scrollbar { width: 11px; height: 11px; } .grid-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; } .grid-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--faint); } .grid-scroll::-webkit-scrollbar-track, .grid-scroll::-webkit-scrollbar-corner { background: transparent; } /* 4 ─── Schaltflächen ───────────────────────────────────────────────────── */ .btn-round, .btn-icon, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .month-btn { border: 1px solid transparent; background: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out), opacity var(--t-fast); -webkit-tap-highlight-color: transparent; user-select: none; white-space: nowrap; position: relative; overflow: hidden; } .btn-round { width: 38px; height: 38px; border-radius: 50%; border-color: var(--glass-border); background: var(--surface); color: var(--text-2); box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--shadow-xs); font-size: 17px; font-weight: 600; } .btn-round:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--shadow-sm); } .btn-round:active { transform: translateY(0) scale(.94); } .btn-round--text { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; } #btnPdf:hover { color: var(--danger); } #btnXlsx:hover { color: var(--ok); } #btnReset { font-size: 19px; line-height: 1; } #btnReset:hover { color: var(--orange); } #btnReset:hover > * , #btnReset:hover { transition: transform 500ms var(--ease-spring), color var(--t-fast); } .btn-icon { width: 36px; height: 36px; border-radius: var(--r-md); color: var(--muted); } .btn-icon:hover:not(:disabled) { background: var(--surface-3); color: var(--text); } .btn-icon:active:not(:disabled) { transform: scale(.92); } .btn-icon:disabled { opacity: .35; } .btn-icon[aria-pressed="true"], .btn-icon[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); } .btn-icon--sm { width: 30px; height: 30px; border-radius: var(--r-sm); } .btn-cluster .btn-icon { width: 32px; height: 32px; border-radius: var(--r-pill); } .btn-cluster .btn-icon:hover:not(:disabled) { background: var(--surface); box-shadow: var(--shadow-xs); } .split-btn { display: inline-flex; border-radius: var(--r-pill); box-shadow: 0 10px 22px -10px rgba(74, 85, 216, .8), 0 0 0 1px rgba(255, 255, 255, .25) inset; position: relative; } .split-btn::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; opacity: .55; filter: blur(10px); background: linear-gradient(90deg, var(--accent), var(--accent-2), #B07CFF, var(--accent)); background-size: 300% 100%; animation: gradientPan 6s linear infinite; } .btn-primary { height: 38px; padding: 0 16px 0 13px; border-radius: var(--r-pill); background: linear-gradient(135deg, #6976FF 0%, var(--accent) 45%, #3B3FBF 100%); color: #fff; font-weight: 650; font-size: 13.5px; letter-spacing: -.005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); } :root[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #B4BAFF 0%, var(--accent) 55%, #6E79F0 100%); color: #0B0E17; } .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translateX(-120%); transition: transform 800ms var(--ease-out); } .btn-primary:hover::after { transform: translateX(120%); } .btn-primary:hover { filter: brightness(1.07); } .btn-primary:active { transform: scale(.97); } .btn-primary:disabled { opacity: .6; filter: grayscale(.25); } .split-btn .btn-primary:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); } .btn-primary--caret { width: 34px; padding: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; border-left: 1px solid rgba(255, 255, 255, .25); } .btn-primary__icon { display: flex; } .btn-primary:hover .btn-primary__icon { animation: wiggle 700ms var(--ease-out); } .btn-primary.is-busy .btn-primary__icon { animation: spin 1s linear infinite; } .btn-secondary { height: 36px; padding: 0 14px; border-radius: var(--r-md); border-color: var(--border-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13px; box-shadow: var(--glass-hi); } .btn-secondary:hover { background: var(--elevated); box-shadow: var(--glass-hi), var(--shadow-sm); } .btn-secondary:active { transform: scale(.98); } .btn-danger { height: 36px; padding: 0 14px; border-radius: var(--r-md); background: var(--danger); color: #fff; font-weight: 650; font-size: 13px; box-shadow: 0 8px 18px -10px var(--danger); } .btn-danger:hover { filter: brightness(1.08); } .btn-danger.is-neutral { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 18px -10px var(--accent); } .btn-ghost { height: 32px; padding: 0 11px; border-radius: var(--r-pill); color: var(--text-2); font-weight: 600; font-size: 12.5px; border-color: var(--border); background: var(--surface-2); } .btn-ghost:hover { background: var(--surface); color: var(--text); } .btn-ghost:disabled { opacity: .5; } .btn-today.is-current { color: var(--muted); } .month-btn { height: 38px; padding: 0 12px 0 14px; border-radius: var(--r-pill); font-weight: 680; font-size: 14px; min-width: 156px; justify-content: space-between; color: var(--text); background: var(--surface-3); font-variant-numeric: tabular-nums; } .month-btn:hover { background: var(--surface); box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line); } .month-btn .ico { color: var(--muted); transition: transform var(--t-base) var(--ease-out); } .month-btn[aria-expanded="true"] .ico { transform: rotate(180deg); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button:focus:not(:focus-visible) { outline: none; } /* Klickwelle (effects.js) */ .ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); background: currentColor; opacity: .22; animation: ripple 620ms var(--ease-out) forwards; } .btn-primary .ripple { background: #fff; opacity: .4; } /* Segmentierte Auswahl */ .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--surface-3); position: relative; } .seg button { height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 0; background: none; font-size: 12px; font-weight: 620; color: var(--muted); position: relative; transition: background var(--t-base) var(--ease-out), color var(--t-fast), box-shadow var(--t-base); } .seg button:hover { color: var(--text); } .seg--sm { padding: 2px; } .seg--sm button { height: 22px; padding: 0 8px; font-size: 11px; white-space: nowrap; } .stable__note { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin: 2px 0 8px; } .seg button[aria-checked="true"], .seg button.is-on { background: var(--elevated); color: var(--text); box-shadow: var(--glass-hi), var(--shadow-xs); } .seg button:disabled { opacity: .4; cursor: not-allowed; } /* 5 ─── Dienstplantabelle ───────────────────────────────────────────────── */ .plan { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-variant-numeric: tabular-nums; width: var(--table-w, 100%); user-select: none; -webkit-user-select: none; } .plan.is-entering { animation: planIn 460ms var(--ease-out); } .plan.is-entering.from-left { animation-name: planInLeft; } .plan col.c-name { width: var(--name-w); } .plan col.c-day { width: var(--day-w); } .plan col.c-sum { width: var(--sum-w); } .plan th, .plan td { padding: 0; border: 0; } /* Kopfbereich – fixiert (UI-03) */ .plan thead th { position: sticky; z-index: 4; background: var(--glass-solid); } .plan .row-weeks th { top: 0; height: var(--week-h); } .plan .row-days th { top: var(--week-h); height: var(--head-h); box-shadow: inset 0 -1px 0 var(--grid-line-strong); } .plan .corner { left: 0; z-index: 8 !important; text-align: left; vertical-align: bottom; box-shadow: inset -1px -1px 0 var(--grid-line-strong) !important; padding: 0 12px 8px !important; } .corner__inner { display: flex; flex-direction: column; gap: 2px; } .corner__title { font-size: 10.5px; font-weight: 750; color: var(--muted); letter-spacing: .07em; text-transform: uppercase; } .corner__count { font-size: 12px; color: var(--faint); } .week-h { font-size: 10px; font-weight: 750; color: var(--muted); letter-spacing: .07em; text-transform: uppercase; text-align: left; padding: 0 0 0 7px !important; box-shadow: inset 1px 0 0 var(--week-sep), inset 0 -1px 0 var(--grid-line); white-space: nowrap; overflow: hidden; } .week-h.is-first { box-shadow: inset 0 -1px 0 var(--grid-line); } .day-h { text-align: center; vertical-align: middle; box-shadow: inset 0 -1px 0 var(--grid-line-strong), inset -1px 0 0 var(--grid-line) !important; } .day-h.is-monday { box-shadow: inset 0 -1px 0 var(--grid-line-strong), inset -1px 0 0 var(--grid-line), inset 1.5px 0 0 var(--week-sep) !important; } .day-h.is-special { background-image: linear-gradient(var(--special-col-strong), var(--special-col-strong)); } .day-h__btn { width: 100%; height: 100%; border: 0; background: none; padding: 4px 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative; color: var(--text); transition: background var(--t-fast); } .day-h__btn:hover { background: var(--hover-col); } .day-h__btn:hover .day-h__num { transform: translateY(-1px) scale(1.08); } .day-h__dow { font-size: 10px; font-weight: 680; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; } .day-h__num { font-size: 15px; font-weight: 740; line-height: 1.1; letter-spacing: -.02em; transition: transform var(--t-base) var(--ease-spring); } .day-h.is-special .day-h__dow { color: var(--holiday-mark); } .day-h__hol { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--holiday-mark); box-shadow: 0 0 6px var(--holiday-mark); } .day-h__status { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--grid-line-strong); transition: background var(--t-slow), box-shadow var(--t-slow); } .day-h__status.st-ok, .day-h__status.st-D { background: var(--ok); box-shadow: 0 0 6px -1px var(--ok); } .day-h__status.st-open { background: var(--grid-line-strong); } .day-h__status.st-A { background: var(--danger); box-shadow: 0 0 7px var(--danger); } .day-h__status.st-B { background: var(--orange); box-shadow: 0 0 6px var(--orange); } .day-h__status.st-C { background: var(--warn); } .day-h.is-today .day-h__num { color: #fff; background: linear-gradient(135deg, #6976FF, var(--today)); border-radius: 8px; padding: 0 5px; min-width: 24px; box-shadow: 0 4px 10px -3px var(--accent-ring); } :root[data-theme="dark"] .day-h.is-today .day-h__num { color: #0B0E17; background: linear-gradient(135deg, #C3C8FF, var(--today)); } .day-h.is-colsel .day-h__btn { background: var(--sel-col); } .day-h.is-colsel .day-h__btn::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: growX 360ms var(--ease-out); } .day-h.is-hover .day-h__btn { background: var(--hover-col); } .sum-h { font-size: 10px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; right: 0; } .plan thead .sum-h { z-index: 7; } .sum-h__inner { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; } .sum-h__inner small { font-size: 9.5px; font-weight: 600; color: var(--faint); text-transform: none; letter-spacing: 0; } /* Linke Spalte – fixiert */ .emp-h { position: sticky; left: 0; z-index: 3; background: var(--glass-solid); text-align: left; height: var(--row-h); box-shadow: inset -1px 0 0 var(--grid-line-strong), inset 0 -1px 0 var(--grid-line); } .emp-h__btn { width: 100%; height: 100%; border: 0; background: none; display: flex; align-items: center; gap: 9px; padding: 0 8px 0 10px; text-align: left; color: var(--text); min-width: 0; transition: background var(--t-fast); } .emp-h__btn:hover { background: var(--hover-col); } .emp-h__btn:hover .avatar { transform: scale(1.1) rotate(-4deg); } .avatar { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 10px; font-weight: 760; letter-spacing: .02em; color: var(--av-fg, var(--text-2)); background: var(--av-bg, var(--surface-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av-fg, var(--text-2)) 16%, transparent); transition: transform var(--t-base) var(--ease-spring); } .avatar--lg { width: 40px; height: 40px; border-radius: 13px; font-size: 14px; } .emp-h__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .emp-h__name { font-size: 13px; font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emp-h__meta { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emp-h__meta b { font-weight: 680; color: var(--text-2); } .emp-h__flag { margin-left: auto; flex: none; width: 16px; height: 16px; border-radius: 6px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; } :root[data-density="compact"] .emp-h__meta { font-size: 10px; } .emp-row.is-hover .emp-h, .emp-row.is-rowsel .emp-h { background-image: linear-gradient(var(--hover-col), var(--hover-col)); } .emp-row.is-hover .emp-h { box-shadow: inset -1px 0 0 var(--grid-line-strong), inset 0 -1px 0 var(--grid-line), inset 3px 0 0 var(--accent); } .emp-row.is-hit .emp-h__name { color: var(--accent); } .emp-row.is-hit .emp-h { box-shadow: inset -1px 0 0 var(--grid-line-strong), inset 0 -1px 0 var(--grid-line), inset 3px 0 0 var(--accent); } /* Zellen */ .cell { height: var(--row-h); position: relative; text-align: center; vertical-align: middle; box-shadow: inset -1px 0 0 var(--grid-line), inset 0 -1px 0 var(--grid-line); background: transparent; cursor: pointer; outline: none; } .cell.is-monday { box-shadow: inset -1px 0 0 var(--grid-line), inset 0 -1px 0 var(--grid-line), inset 1.5px 0 0 var(--week-sep); } .cell.is-special { background: var(--special-col); } .cell.is-today { background-image: linear-gradient(var(--today-col), var(--today-col)); } .cell.is-colhover { background-image: linear-gradient(var(--hover-col), var(--hover-col)); } .cell.is-colsel { background-image: linear-gradient(var(--sel-col), var(--sel-col)); } .emp-row.is-hover .cell { background-image: linear-gradient(var(--hover-col), var(--hover-col)); } .emp-row.is-hover .cell.is-colhover { background-image: linear-gradient(var(--sel-col), var(--sel-col)); } .tile { position: absolute; inset: 3px 2px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: var(--tile-bg, transparent); color: var(--tile-fg, var(--text)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile-fg, transparent) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base), background var(--t-slow); overflow: hidden; } :root[data-theme="dark"] .tile { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile-fg, transparent) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06); } :root[data-density="comfort"] .tile { inset: 4px 3px; border-radius: 10px; } .cell:hover .tile { transform: translateY(-2px) scale(1.045); z-index: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile-fg, var(--accent)) 30%, transparent), 0 8px 16px -8px color-mix(in srgb, var(--tile-fg, var(--accent)) 70%, transparent); } .cell.sh-DASH .tile, .cell.is-empty .tile { box-shadow: none; } .cell.is-empty:hover .tile { background: var(--surface-3); outline: 1px dashed var(--border-strong); outline-offset: -1px; } .cell.is-empty:hover .tile::after { content: '+'; font-size: 16px; color: var(--accent); font-weight: 500; } .tile__s { font-size: 12.5px; font-weight: 780; line-height: 1.05; letter-spacing: -.01em; } .tile__m { font-size: 9.5px; font-weight: 720; line-height: 1.1; letter-spacing: .01em; color: var(--mo, currentColor); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; } .tile__sub { font-size: 8.5px; font-weight: 620; line-height: 1.1; opacity: .78; letter-spacing: .01em; } :root[data-density="comfort"] .tile__s { font-size: 14px; } :root[data-density="comfort"] .tile__m { font-size: 10.5px; } :root[data-density="comfort"] .tile__sub { font-size: 9.5px; } .sh-F { --tile-bg: var(--sh-F-bg); --tile-fg: var(--sh-F-fg); } .sh-S { --tile-bg: var(--sh-S-bg); --tile-fg: var(--sh-S-fg); } .sh-N { --tile-bg: var(--sh-N-bg); --tile-fg: var(--sh-N-fg); } .sh-T { --tile-bg: var(--sh-T-bg); --tile-fg: var(--sh-T-fg); } .sh-FREI { --tile-bg: var(--sh-FREI-bg); --tile-fg: var(--sh-FREI-fg); } .sh-U { --tile-bg: var(--sh-U-bg); --tile-fg: var(--sh-U-fg); } .sh-K { --tile-bg: var(--sh-K-bg); --tile-fg: var(--sh-K-fg); } .sh-KK { --tile-bg: var(--sh-KK-bg); --tile-fg: var(--sh-KK-fg); } .sh-WB { --tile-bg: var(--sh-WB-bg); --tile-fg: var(--sh-WB-fg); } .sh-DASH { --tile-bg: transparent; --tile-fg: var(--sh-DASH-fg); } .sh-DASH .tile__s { font-weight: 500; } .sh-FREI.note-rest .tile { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--sh-FREI-fg) 10%, transparent) 5px 6px); } .sh-N .tile { background-image: linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 60%); } .mo-DISP { --mo: var(--mo-DISP); } .mo-MAMMO { --mo: var(--mo-MAMMO); } .mo-ANGIO { --mo: var(--mo-ANGIO); } .mo-MRT { --mo: var(--mo-MRT); } .mo-CT { --mo: var(--mo-CT); } .mo-RX { --mo: var(--mo-RX); } .mo-QM { --mo: var(--mo-QM); } .mo-SPR { --mo: var(--mo-SPR); } /* Einfärbung nach Modalität (Ansichtsoption) */ .color-by-modality .cell.has-mod .tile { background: var(--mo-bg); color: var(--mo); --tile-fg: var(--mo); } .color-by-modality .cell.has-mod .tile__m { color: inherit; } .color-by-modality .mo-DISP { --mo-bg: var(--mo-DISP-bg); } .color-by-modality .mo-MAMMO { --mo-bg: var(--mo-MAMMO-bg); } .color-by-modality .mo-ANGIO { --mo-bg: var(--mo-ANGIO-bg); } .color-by-modality .mo-MRT { --mo-bg: var(--mo-MRT-bg); } .color-by-modality .mo-CT { --mo-bg: var(--mo-CT-bg); } .color-by-modality .mo-RX { --mo-bg: var(--mo-RX-bg); } .color-by-modality .mo-QM { --mo-bg: var(--mo-QM-bg); } .color-by-modality .mo-SPR { --mo-bg: var(--mo-SPR-bg); } /* Markierungen in der Zelle */ .cell.is-manual .tile::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 0; border-color: color-mix(in srgb, var(--tile-fg) 72%, transparent) transparent transparent transparent; border-top-left-radius: 7px; } .c-rd { position: absolute; right: 2px; top: 2px; min-width: 15px; height: 12px; padding: 0 2px; border-radius: 4px; z-index: 2; font-size: 8px; font-weight: 800; line-height: 12px; color: #fff; letter-spacing: .02em; box-shadow: 0 0 0 1.5px var(--glass-solid), 0 2px 6px -2px currentColor; } .c-rd.rd-M { background: var(--rd-M); } .c-rd.rd-A { background: var(--rd-A); } .cell.cf-A, .cell.cf-B { --cf-color: var(--danger); } .cell.cf-B { --cf-color: var(--orange); } .cell.cf-A .tile, .cell.cf-B .tile { box-shadow: inset 0 0 0 2px var(--cf-color), 0 0 12px -4px var(--cf-color); } .cell.cf-A .tile::after, .cell.cf-B .tile::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--cf-color); box-shadow: 0 0 6px var(--cf-color); } .cell.cf-C .tile::after, .cell.cf-D .tile::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 1.5px var(--glass-solid); } .cell.cf-D .tile::after { background: var(--low); } .cell.is-new-conflict .tile { animation: conflictPulse 1s var(--ease-out); } /* Auswahl & Fokus */ .cell.is-sel::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); pointer-events: none; } .cell.is-focus::after { content: ''; position: absolute; inset: 1px; border-radius: 9px; pointer-events: none; box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-ring), 0 0 18px -2px var(--accent-ring); z-index: 3; animation: focusIn 260ms var(--ease-spring); } .cell.is-sel.is-focus::after { background: color-mix(in srgb, var(--accent) 15%, transparent); } .cell.is-flash .tile { animation: flash 1.2s var(--ease-out); } .cell.is-pop .tile { animation: flapIn 620ms var(--d, 0ms) cubic-bezier(.22, .9, .3, 1) both; transform-origin: 50% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .foot-c.is-pop .fv { animation: popBadge 460ms var(--d, 0ms) var(--ease-spring) both; } /* Lamellen der automatischen Planung (effects.lamellae): decken je Tagesspalte ab und klappen nach hinten weg */ .fill-lam { position: absolute; z-index: 14; pointer-events: none; transform-origin: 50% 0; backface-visibility: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--glass-solid)) 0%, var(--glass-solid) 22%, var(--glass-solid) 78%, color-mix(in srgb, var(--accent-2) 10%, var(--glass-solid)) 100%); box-shadow: inset -1px 0 0 var(--grid-line), inset 1px 0 0 rgba(255, 255, 255, .5); } :root[data-theme="dark"] .fill-lam { box-shadow: inset -1px 0 0 var(--grid-line), inset 1px 0 0 rgba(255, 255, 255, .05); } /* Lichtstrahl der automatischen Planung (effects.beam) – Taktgeber der Welle */ .fill-beam { position: absolute; z-index: 15; width: 180px; margin-left: -90px; pointer-events: none; will-change: transform, opacity; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 7%, transparent) 30%, color-mix(in srgb, var(--accent-2) 22%, transparent) 50%, color-mix(in srgb, var(--accent) 7%, transparent) 70%, transparent 100%); } .fill-beam::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--accent-2) 18%, #fff 50%, var(--accent) 82%, transparent); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent-2) 55%, transparent); } :root[data-theme="dark"] .fill-beam::after { background: linear-gradient(180deg, transparent, var(--accent-2) 18%, #dfe4ff 50%, var(--accent) 82%, transparent); } /* Schmale Spalten (Monat passend in den Viewport) */ .plan.is-narrow .tile { inset: 3px 1px; border-radius: 7px; } .plan.is-narrow .tile__s { font-size: 12px; } .plan.is-narrow .tile__m { font-size: 9px; letter-spacing: -.01em; } .plan.is-narrow .tile__sub { font-size: 8px; letter-spacing: -.02em; } .plan.is-narrow .c-rd { min-width: 12px; font-size: 7px; height: 10px; line-height: 10px; padding: 0 1px; right: 1px; top: 1px; } .plan.is-narrow .day-h__num { font-size: 13.5px; } .plan.is-narrow .day-h__dow { font-size: 9.5px; } .plan.is-narrow .week-h { font-size: 9.5px; padding-left: 4px !important; } .plan.is-tight-name .avatar { display: none; } .plan.is-tight-name .emp-h__btn { padding-left: 10px; } .plan.is-tight-name .emp-h__flag { display: none; } /* Summenspalten rechts – fixiert */ .sum { position: sticky; right: calc(var(--sum-i) * var(--sum-w)); z-index: 3; background: var(--glass-solid); font-size: 11.5px; font-weight: 680; color: var(--text-2); text-align: center; box-shadow: inset 0 -1px 0 var(--grid-line), inset 1px 0 0 var(--grid-line); } .sum.is-first { box-shadow: inset 0 -1px 0 var(--grid-line), inset 1px 0 0 var(--grid-line-strong), var(--shadow-sticky-x), -8px 0 14px -10px rgba(30, 40, 90, .3); } .sum small { color: var(--faint); font-weight: 600; font-size: 10px; } .sum.is-max { color: var(--warn); } .sum.is-over { color: var(--danger); } .plan thead .sum-h { position: sticky; right: calc(var(--sum-i) * var(--sum-w)); background: var(--glass-solid); box-shadow: inset 1px 0 0 var(--grid-line), inset 0 -1px 0 var(--grid-line-strong); } .plan thead .sum-h.is-first { box-shadow: inset 1px 0 0 var(--grid-line-strong), inset 0 -1px 0 var(--grid-line-strong), -8px 0 14px -10px rgba(30, 40, 90, .3); } .plan.no-sums .sum, .plan.no-sums .sum-h, .plan.no-sums col.c-sum { display: none; } .plan.no-sums col.c-sum { width: 0; } /* Besetzungszeilen unten – fixiert */ .plan tfoot th, .plan tfoot td { position: sticky; z-index: 4; height: var(--foot-row-h); background: var(--glass-solid); font-size: 11px; font-weight: 680; text-align: center; color: var(--text-2); bottom: calc(var(--foot-i) * var(--foot-row-h)); } .plan tfoot tr:first-child th, .plan tfoot tr:first-child td { box-shadow: inset 0 1px 0 var(--grid-line-strong), 0 -8px 14px -10px rgba(30, 40, 90, .3); } .plan tfoot .foot-h { left: 0; z-index: 7; text-align: left; padding: 0 12px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; box-shadow: inset -1px 0 0 var(--grid-line-strong); } .plan tfoot tr:first-child .foot-h { box-shadow: inset 0 1px 0 var(--grid-line-strong), inset -1px 0 0 var(--grid-line-strong), 0 -8px 14px -10px rgba(30, 40, 90, .3); } .plan tfoot .sum-f { right: calc(var(--sum-i) * var(--sum-w)); z-index: 7; } .foot-c { cursor: pointer; } .foot-c.is-special { background-image: linear-gradient(var(--special-col-strong), var(--special-col-strong)); } .foot-c.is-monday { box-shadow: inset 1.5px 0 0 var(--week-sep); } .plan tfoot tr:first-child .foot-c.is-monday { box-shadow: inset 0 1px 0 var(--grid-line-strong), inset 1.5px 0 0 var(--week-sep), 0 -8px 14px -10px rgba(30, 40, 90, .3); } .fv { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 17px; padding: 0 4px; border-radius: 6px; font-variant-numeric: tabular-nums; transition: background var(--t-slow), color var(--t-slow); } .fv.ok { color: var(--ok); } .fv.warn { color: var(--warn); background: var(--warn-soft); } .fv.err { color: var(--danger); background: var(--danger-soft); } .fv.na { color: var(--faint); font-weight: 500; } .plan.no-coverage tfoot { display: none; } /* Sticky-Schatten bei horizontalem/vertikalem Scrollen */ .grid-scroll.is-scrolled-x .emp-h, .grid-scroll.is-scrolled-x .corner, .grid-scroll.is-scrolled-x .foot-h { box-shadow: inset -1px 0 0 var(--grid-line-strong), var(--shadow-sticky-x) !important; } .grid-scroll.is-scrolled-y .row-days th { box-shadow: inset 0 -1px 0 var(--grid-line-strong), var(--shadow-sticky-y) !important; } .grid-scroll.is-scrolled-y .row-days th.corner { box-shadow: inset -1px -1px 0 var(--grid-line-strong), var(--shadow-sticky-y) !important; } .plan tbody tr:last-child .cell, .plan tbody tr:last-child .emp-h { box-shadow: inset -1px 0 0 var(--grid-line); } .plan-empty { padding: 60px 20px; text-align: center; color: var(--muted); } /* Glanzlicht nach der Automatik */ .grid-shell.is-sweeping::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 48%, rgba(140, 150, 255, .25) 52%, transparent 65%); background-size: 250% 100%; animation: sweep 1.3s var(--ease-out) forwards; } :root[data-theme="dark"] .grid-shell.is-sweeping::after { background: linear-gradient(105deg, transparent 35%, rgba(142, 152, 255, .2) 50%, transparent 65%); background-size: 250% 100%; } /* Legende */ .legend { flex: none; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--grid-line-strong); background: var(--glass-solid); font-size: 11.5px; color: var(--muted); border-radius: 0 0 var(--r-xl) var(--r-xl); } .legend[hidden] { display: none; } .legend__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .legend__title { font-weight: 750; color: var(--text-2); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; } .lg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .lg__sw { min-width: 22px; height: 18px; padding: 0 4px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 780; background: var(--tile-bg); color: var(--tile-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile-fg) 14%, transparent); } .lg__mo { font-weight: 780; font-size: 10.5px; color: var(--mo); } .lg__mark { width: 14px; height: 14px; border-radius: 4px; position: relative; background: var(--surface-3); } .lg__mark--manual::before { content: ''; position: absolute; left: 0; top: 0; border-style: solid; border-width: 7px 7px 0 0; border-color: var(--text-2) transparent transparent transparent; border-top-left-radius: 4px; } .lg__mark--A { box-shadow: inset 0 0 0 2px var(--danger); } .lg__mark--C::after { content: ''; position: absolute; right: 2px; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); } .lg__rd { font-size: 8px; font-weight: 800; color: #fff; padding: 1px 3px; border-radius: 3px; } /* 6 ─── Detailleiste ─────────────────────────────────────────────────────── */ .sidepanel { flex: 0 0 var(--panel-w); width: var(--panel-w); display: flex; flex-direction: column; min-height: 0; overflow: hidden; transition: flex-basis var(--t-slow) var(--ease-out), width var(--t-slow) var(--ease-out), margin var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); position: relative; z-index: 15; animation: enterLeft 700ms 200ms var(--ease-out) backwards; /* nur Einblendung – darf Transform des geschlossenen Zustands nicht überschreiben */ } .sidepanel > * { min-width: calc(var(--panel-w) - 2px); } .app.panel-closed .sidepanel { flex-basis: 0; width: 0; margin-left: calc(-1 * var(--gap)); opacity: 0; transform: translateX(28px); pointer-events: none; border-width: 0; } .sidepanel__tabs { display: flex; align-items: center; gap: 2px; padding: 8px 8px 0 10px; border-bottom: 1px solid var(--grid-line-strong); flex: none; position: relative; } .tab { position: relative; height: 38px; padding: 0 11px; border: 0; background: none; font-size: 13px; font-weight: 620; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--t-fast), background var(--t-fast); } .tab:hover { color: var(--text); background: var(--surface-3); } .tab[aria-selected="true"] { color: var(--text); } .tab[aria-selected="true"]::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent-ring); animation: tabLine 300ms var(--ease-out); } .tab__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10.5px; font-weight: 760; display: inline-grid; place-items: center; background: var(--surface-3); color: var(--muted); } .tab__badge.is-A { background: var(--danger); color: #fff; box-shadow: 0 0 10px -2px var(--danger); } .tab__badge:empty { display: none; } .sidepanel__close { margin-left: auto; } .sidepanel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 28px; outline: none; } .sidepanel__body::-webkit-scrollbar { width: 9px; } .sidepanel__body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; } .sidepanel__body > div > * { animation: rise 420ms var(--ease-out) both; } .sidepanel__body > div > *:nth-child(2) { animation-delay: 40ms; } .sidepanel__body > div > *:nth-child(3) { animation-delay: 80ms; } .sidepanel__body > div > *:nth-child(4) { animation-delay: 120ms; } .sidepanel__body > div > *:nth-child(5) { animation-delay: 160ms; } .sidepanel__body > div > *:nth-child(6) { animation-delay: 200ms; } .sidepanel__body > div > *:nth-child(n+7) { animation-delay: 240ms; } .sidepanel__body.is-static > div > * { animation: none; } .sidepanel-scrim { display: none; } .ph { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .ph__main { flex: 1; min-width: 0; } .ph__eyebrow { font-size: 10.5px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .ph__title { margin: 2px 0 0; font-size: 18px; font-weight: 740; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; } .ph__nav { display: flex; gap: 2px; } .badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 660; background: var(--surface-3); color: var(--text-2); white-space: nowrap; } .badge .ico { width: 13px; height: 13px; } .badge--special { background: var(--special-col-strong); color: var(--holiday-mark); } .badge--ok { background: var(--ok-soft); color: var(--ok); } .badge--A { background: var(--danger-soft); color: var(--danger); } .badge--B { background: var(--orange-soft); color: var(--orange); } .badge--C { background: var(--warn-soft); color: var(--warn); } .badge--D { background: var(--low-soft); color: var(--low); } .badge--open { background: var(--surface-3); color: var(--muted); } .badge--accent { background: var(--accent-soft); color: var(--accent); } .psec { margin-top: 18px; } .psec__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .psec__title { font-size: 11px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 7px; } .psec__title .dotc { width: 8px; height: 8px; border-radius: 3px; background: var(--c, var(--accent)); box-shadow: 0 0 8px var(--c, var(--accent)); } .psec__count { font-size: 12px; font-weight: 720; font-variant-numeric: tabular-nums; } .cov { display: grid; gap: 6px; } .cov-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label val" "names names"; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--glass-hi); transition: transform var(--t-base) var(--ease-out), border-color var(--t-fast); } .cov-row:hover { border-color: var(--border-strong); } .cov-row__label { grid-area: label; font-size: 12.5px; font-weight: 660; display: flex; align-items: center; gap: 7px; color: var(--text); } .cov-row__label i { width: 8px; height: 8px; border-radius: 3px; background: var(--mo, var(--accent)); flex: none; box-shadow: 0 0 6px var(--mo, var(--accent)); } .cov-row__names { grid-area: names; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .cov-row__names:empty { display: none; } .cov-row__val { grid-area: val; font-size: 12px; font-weight: 720; font-variant-numeric: tabular-nums; display: flex; flex-direction: row; align-items: center; gap: 8px; } .meter { width: 54px; height: 5px; border-radius: 5px; background: var(--surface-3); overflow: hidden; } .meter > span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 60%, var(--accent-2))); transform-origin: left; animation: meterIn 800ms var(--ease-out); } .meter.warn > span { background: var(--warn); } .meter.err > span { background: var(--danger); } .cov-row.is-err { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-soft); } .cov-row.is-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .val-err { color: var(--danger); } .val-warn { color: var(--warn); } .val-ok { color: var(--ok); } .nchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 3px; border-radius: var(--r-pill); font-size: 12px; font-weight: 620; background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: border-color var(--t-fast), transform var(--t-base) var(--ease-spring), box-shadow var(--t-fast); max-width: 100%; } .nchip:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 14px -8px var(--accent-ring); } .nchip .avatar { width: 18px; height: 18px; border-radius: 6px; font-size: 8.5px; } .nchip__tag { font-size: 10px; font-weight: 720; color: var(--muted); } .nchip.is-manual { border-color: var(--border-strong); } .nchip.has-cf { border-color: color-mix(in srgb, var(--danger) 60%, transparent); } .names-empty { font-size: 12px; color: var(--faint); font-style: italic; } .mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stat { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--glass-hi); display: flex; flex-direction: column; gap: 2px; } .stat__label { font-size: 11px; color: var(--muted); font-weight: 620; } .stat__value { font-size: 20px; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat__value small { font-size: 12px; color: var(--faint); font-weight: 620; } .stat.is-max .stat__value { color: var(--warn); } .stat.is-over .stat__value { color: var(--danger); } .kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 12.5px; } .kv dt { color: var(--muted); font-weight: 620; } .kv dd { margin: 0; color: var(--text); } .pills { display: flex; flex-wrap: wrap; gap: 4px; } .pill { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 660; background: var(--mo-bg, var(--surface-3)); color: var(--mo, var(--text-2)); } .pill--spec { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mo, var(--text-2)) 40%, transparent); } .strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .strip__dow { font-size: 10px; font-weight: 720; color: var(--faint); text-align: center; text-transform: uppercase; } .strip__d { aspect-ratio: 1 / 1; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--tile-bg, var(--surface-2)); color: var(--tile-fg, var(--faint)); border: 1px solid transparent; font-size: 11px; font-weight: 760; position: relative; cursor: pointer; transition: transform var(--t-base) var(--ease-spring); } .strip__d:hover { transform: scale(1.1); z-index: 1; } .strip__d small { font-size: 8.5px; font-weight: 620; opacity: .85; } .strip__d.is-special { border-color: var(--special-col-strong); } .strip__d.is-out { visibility: hidden; } .strip__d .num { position: absolute; top: 2px; left: 4px; font-size: 8.5px; font-weight: 620; opacity: .55; } .strip__d.cf::after { content: ''; position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 6px var(--danger); } .clist { display: flex; flex-direction: column; gap: 6px; } .citem { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; text-align: left; width: 100%; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); box-shadow: var(--glass-hi); transition: border-color var(--t-fast), transform var(--t-base) var(--ease-out), box-shadow var(--t-fast); } button.citem:hover { border-color: var(--border-strong); transform: translateX(3px); box-shadow: var(--glass-hi), var(--shadow-sm); } .citem__cls { grid-row: span 2; align-self: start; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; } .citem__cls.A { background: var(--danger); box-shadow: 0 0 10px -3px var(--danger); } .citem__cls.B { background: var(--orange); } .citem__cls.C { background: var(--warn); } .citem__cls.D { background: var(--low); } .citem__top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); font-weight: 620; } .citem__rule { font-weight: 800; color: var(--text-2); } .citem__msg { font-size: 12.5px; color: var(--text); line-height: 1.35; } .cgroup { margin-top: 16px; } .cgroup__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 720; color: var(--text-2); } .cgroup__head .n { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; } .empty-state { text-align: center; padding: 34px 12px; color: var(--muted); } .empty-state__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok-soft) 50%, transparent); animation: popBadge 700ms var(--ease-spring); } .empty-state__icon .ico { width: 26px; height: 26px; } .empty-state h3 { margin: 0 0 4px; font-size: 15px; color: var(--text); } .empty-state p { margin: 0; font-size: 12.5px; } .stable { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .stable th { text-align: right; font-size: 10px; font-weight: 720; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 6px 4px; border-bottom: 1px solid var(--border); position: sticky; top: -16px; background: var(--glass-solid); cursor: pointer; user-select: none; white-space: nowrap; } .stable th:first-child, .stable td:first-child { text-align: left; } .stable th.is-sorted { color: var(--accent); } .stable td { text-align: right; padding: 5px 4px; border-bottom: 1px solid var(--grid-line); } .stable tr:hover td { background: var(--hover-col); } .stable td.is-max { color: var(--warn); font-weight: 720; } .stable td.is-over { color: var(--danger); font-weight: 800; } .stable .bar { display: inline-block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: .7; vertical-align: middle; margin-left: 4px; } .stable button { border: 0; background: none; padding: 0; font-weight: 620; color: var(--text); } .stable button:hover { color: var(--accent); } /* 7 ─── Popover, Menüs, Editor ──────────────────────────────────────────── */ .pop-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; } .pop { position: absolute; pointer-events: auto; background: var(--elevated); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--shadow-lg); border-radius: var(--r-lg); min-width: 200px; max-width: calc(100vw - 16px); transform-origin: var(--origin, top left); animation: popIn 220ms var(--ease-spring); } .pop.is-closing { animation: popOut 130ms var(--ease-in-out) forwards; } .menu { padding: 6px; min-width: 240px; } .menu__label { padding: 8px 10px 4px; font-size: 10px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .menu__item { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; border-radius: var(--r-sm); text-align: left; font-size: 13px; font-weight: 580; color: var(--text); transition: background var(--t-fast), transform var(--t-fast) var(--ease-out); } .menu__item:hover, .menu__item:focus-visible { background: var(--surface-3); outline: none; transform: translateX(2px); } .menu__item .ico { color: var(--muted); } .menu__item:hover .ico { color: var(--accent); } .menu__item small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 450; margin-top: 1px; } .menu__item.is-danger, .menu__item.is-danger .ico { color: var(--danger); } .menu__item .check { margin-left: auto; color: var(--accent); } .menu__sep { height: 1px; background: var(--border); margin: 5px 4px; } .menu__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; font-size: 13px; } .menu__row .seg button { height: 26px; font-size: 11.5px; } .menu > * , .menu > div > * { animation: rise 260ms var(--ease-out) both; } .switch { position: relative; width: 36px; height: 21px; flex: none; } .switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; } .switch span { position: absolute; inset: 0; border-radius: 21px; background: var(--border-strong); transition: background var(--t-base); pointer-events: none; } .switch span::after { content: ''; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t-base) var(--ease-spring); } .switch input:checked + span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .switch input:checked + span::after { transform: translateX(15px); } .switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); } .mp { padding: 12px; width: 300px; } .mp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mp__year { font-size: 15px; font-weight: 740; font-variant-numeric: tabular-nums; } .mp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .mp__m { height: 40px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: 13px; font-weight: 620; position: relative; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-base) var(--ease-spring), box-shadow var(--t-fast); animation: rise 300ms var(--ease-out) both; } .mp__m:nth-child(3n+2) { animation-delay: 30ms; } .mp__m:nth-child(3n) { animation-delay: 60ms; } .mp__m:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 16px -10px var(--accent-ring); } .mp__m.is-current { background: linear-gradient(135deg, #6976FF, var(--accent)); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px var(--accent); } :root[data-theme="dark"] .mp__m.is-current { color: #0B0E17; background: linear-gradient(135deg, #C3C8FF, var(--accent)); } .mp__m.is-today::before { content: ''; position: absolute; left: 50%; bottom: 4px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--accent); } .mp__m.is-current.is-today::before { background: currentColor; } .mp__m.has-data::after { content: ''; position: absolute; right: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); } /* Editor */ .editor { width: 460px; } .editor__head { display: flex; align-items: center; gap: 11px; padding: 14px 14px 12px; border-bottom: 1px solid var(--border); position: relative; } .editor__title { font-size: 15px; font-weight: 740; letter-spacing: -.01em; line-height: 1.2; } .editor__sub { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; } .editor__head .btn-icon { margin-left: auto; align-self: flex-start; } .editor__body { padding: 12px 14px 4px; display: grid; gap: 14px; max-height: min(64vh, 560px); overflow-y: auto; } .editor__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .editor__col h4, .editor__sec h4 { margin: 0 0 7px; font-size: 10px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; } .opts { display: grid; gap: 3px; } .opt { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 8px 0 6px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; text-align: left; font-size: 13px; font-weight: 580; color: var(--text); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-base) var(--ease-spring); animation: rise 260ms var(--ease-out) both; } .opts .opt:nth-child(2) { animation-delay: 20ms; } .opts .opt:nth-child(3) { animation-delay: 40ms; } .opts .opt:nth-child(4) { animation-delay: 60ms; } .opts .opt:nth-child(5) { animation-delay: 80ms; } .opts .opt:nth-child(6) { animation-delay: 100ms; } .opts .opt:nth-child(n+7) { animation-delay: 120ms; } .opt:hover { background: var(--surface-3); transform: translateX(2px); } .opt:active { transform: scale(.98); } .opt__sw { flex: none; min-width: 28px; height: 22px; padding: 0 4px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--tile-bg, var(--mo-bg)); color: var(--tile-fg, var(--mo)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile-fg, var(--mo)) 18%, transparent); transition: transform var(--t-base) var(--ease-spring); } .opt:hover .opt__sw { transform: scale(1.1); } .opt__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .opt__label small { color: var(--muted); font-weight: 450; font-size: 11px; margin-left: 4px; } .opt kbd { flex: none; opacity: .8; } .opt[aria-checked="true"], .opt.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 0 14px -6px var(--accent-ring); } .opt[aria-checked="true"] .opt__label, .opt.is-on .opt__label { font-weight: 720; } .opt__check { color: var(--accent); flex: none; animation: popBadge 360ms var(--ease-spring); } .opt:disabled { opacity: .45; cursor: not-allowed; transform: none; } .opt-note { font-size: 12px; color: var(--muted); padding: 9px 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--border-strong); line-height: 1.4; margin: 0; } .opt-note b { color: var(--text-2); } .editor__sec .seg { width: 100%; display: flex; } .editor__sec .seg button { flex: 1; height: 30px; } .editor__conf { display: grid; gap: 6px; } .editor__conf .citem { padding: 8px 10px; } .editor__foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px 14px; flex-wrap: wrap; } .src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 620; margin-right: auto; } .src .ico { width: 14px; height: 14px; } .src.is-manual { color: var(--text-2); } .editor__foot .btn-ghost .ico { width: 15px; height: 15px; } .editor--bulk { width: 390px; } .editor--bulk .opts { grid-template-columns: 1fr 1fr; } .opt__count { font-size: 10.5px; color: var(--muted); font-weight: 680; } .sheet-grip { display: none; } .only-narrow, .only-tablet { display: none; } /* 8 ─── Tooltip, Toasts, Dialog, Overlay ──────────────────────────────────── */ .tooltip { position: fixed; z-index: 80; pointer-events: none; max-width: 320px; background: var(--elevated); color: var(--text); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--shadow-md); padding: 9px 11px; font-size: 12px; line-height: 1.4; animation: tipIn 170ms var(--ease-out); } .tooltip[hidden] { display: none; } .tip__title { font-weight: 740; font-size: 12.5px; } .tip__sub { color: var(--muted); font-size: 11.5px; margin-bottom: 4px; } .tip__row { display: flex; gap: 6px; align-items: center; } .tip__cf { display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); } .tip__cf b { font-size: 10.5px; font-weight: 800; padding: 0 4px; border-radius: 4px; color: #fff; height: 16px; line-height: 16px; align-self: start; } .tip__cf b.A { background: var(--danger); } .tip__cf b.B { background: var(--orange); } .tip__cf b.C { background: var(--warn); } .tip__cf b.D { background: var(--low); } .tip--simple { padding: 5px 9px; font-weight: 620; font-size: 11.5px; } .toasts { position: fixed; right: 18px; bottom: max(18px, var(--toast-lift, 0px)); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; } .toast { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 11px; align-items: start; min-width: 300px; max-width: 420px; padding: 12px 12px 12px 14px; border-radius: var(--r-lg); background: var(--elevated); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--shadow-lg); position: relative; overflow: hidden; animation: toastIn 420ms var(--ease-spring); } .toast.is-leaving { animation: toastOut 240ms var(--ease-in-out) forwards; } .toast__icon { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; background: var(--info-soft); color: var(--info); grid-row: span 2; animation: popBadge 600ms var(--ease-spring); } .toast--ok .toast__icon { background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 16px -6px var(--ok); } .toast--warn .toast__icon { background: var(--warn-soft); color: var(--warn); } .toast--err .toast__icon { background: var(--danger-soft); color: var(--danger); box-shadow: 0 0 16px -6px var(--danger); } .toast__title { font-size: 13px; font-weight: 720; line-height: 1.3; padding-top: 1px; } .toast__text { font-size: 12.5px; color: var(--muted); line-height: 1.4; grid-column: 2; } .toast__close { grid-row: 1; grid-column: 3; width: 26px; height: 26px; } .toast__actions { grid-column: 2 / 4; display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .toast__actions button { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--r-sm); } .toast__timer { position: absolute; left: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: .7; transform-origin: left; animation: timer linear forwards; } .toast__stats { grid-column: 2 / 4; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .dialog { border: 0; padding: 0; background: transparent; color: var(--text); max-width: 440px; width: calc(100vw - 32px); } .dialog::backdrop { background: rgba(10, 14, 26, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn 220ms; } .dialog[open] .dialog__card { animation: dialogIn 360ms var(--ease-spring); } .dialog__card { background: var(--elevated); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--shadow-lg); padding: 22px; margin: 0; } .dialog__icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); margin-bottom: 12px; animation: popBadge 600ms var(--ease-spring); } .dialog__icon.is-danger { background: var(--danger-soft); color: var(--danger); } .dialog__icon.is-info { background: var(--accent-soft); color: var(--accent); } .dialog__title { margin: 0 0 6px; font-size: 17px; font-weight: 740; letter-spacing: -.01em; } .dialog__text { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; } .dialog__text b { color: var(--text); } .dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--canvas) 40%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); animation: fadeIn 260ms var(--ease-out); } .overlay[hidden] { display: none; } .overlay.is-closing { animation: fadeOut 260ms var(--ease-in-out) forwards; } .overlay.is-closing .ov-card { animation: cardOut 260ms var(--ease-in-out) forwards; } .ov-card { width: min(540px, 100%); position: relative; overflow: hidden; background: var(--elevated); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--shadow-lg); padding: 22px 22px 18px; animation: dialogIn 460ms var(--ease-spring); } .ov-card::before { content: ''; position: absolute; inset: -40% -20% auto; height: 220px; z-index: 0; pointer-events: none; filter: blur(40px); opacity: .55; background: conic-gradient(from 0deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-1)); animation: spin 14s linear infinite; } .ov-card > * { position: relative; z-index: 1; } .ov-head { display: flex; align-items: center; gap: 14px; } .ov-head__text { flex: 1; min-width: 0; } .ov-head h2 { margin: 0; font-size: 17px; font-weight: 740; letter-spacing: -.01em; } .ov-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; } .ov-time { font-size: 13px; font-weight: 720; color: var(--muted); font-variant-numeric: tabular-nums; padding: 5px 9px; border-radius: var(--r-pill); background: var(--surface-3); } .ov-orb { width: 46px; height: 46px; position: relative; flex: none; } .ov-orb span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--accent); animation: spin 1.1s linear infinite; filter: drop-shadow(0 0 4px var(--accent-ring)); } .ov-orb span:nth-child(2) { inset: 7px; border-top-color: var(--mo-MRT); animation-duration: 1.6s; animation-direction: reverse; } .ov-orb span:nth-child(3) { inset: 14px; border-top-color: var(--accent-2); animation-duration: .9s; } .ov-progress { margin-top: 18px; height: 10px; border-radius: 10px; background: var(--surface-3); overflow: hidden; position: relative; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); } .ov-progress__bar { height: 100%; width: 0; border-radius: 10px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 55%, #B07CFF 100%); box-shadow: 0 0 14px var(--accent-ring); transition: width 320ms var(--ease-out); position: relative; overflow: hidden; } .ov-progress__bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); animation: shimmer 1.3s infinite; } .ov-progress__meta { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: var(--muted); font-weight: 620; font-variant-numeric: tabular-nums; } .ov-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; } .ov-step { display: grid; grid-template-columns: 24px 1fr; gap: 0 10px; padding: 6px 8px; border-radius: var(--r-md); align-items: start; transition: background var(--t-base); } .ov-step__ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 760; background: var(--surface-3); color: var(--faint); transition: background var(--t-base), color var(--t-base), transform var(--t-base) var(--ease-spring); } .ov-step__t { font-size: 13px; font-weight: 620; color: var(--faint); padding-top: 2px; transition: color var(--t-base); } .ov-step__s { grid-column: 2; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; display: none; } .ov-step.is-active { background: var(--accent-soft); } .ov-step.is-active .ov-step__ic { background: var(--accent); color: var(--on-accent); animation: pulseRing 1.4s infinite; } .ov-step.is-active .ov-step__t { color: var(--text); } .ov-step.is-active .ov-step__s { display: block; animation: fadeIn 260ms; } .ov-step.is-done .ov-step__ic { background: var(--ok-soft); color: var(--ok); animation: popBadge 420ms var(--ease-spring); } .ov-step.is-done .ov-step__t { color: var(--text-2); } .ov-meta { margin-top: 12px; font-size: 11.5px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; font-variant-numeric: tabular-nums; } .ov-actions { display: flex; justify-content: flex-end; margin-top: 14px; } /* Erfolgsimpuls (effects.js): weicher grüner Lichtring um die Planungsschaltfläche */ .fx-success { animation: successRing 1.4s var(--ease-out); } /* 9 ─── Effekte & Animationen ───────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: .45; } } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 var(--accent-ring); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes alarm { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px var(--danger-soft), 0 0 14px -4px var(--danger); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { to { opacity: 0; } } @keyframes gradientPan { to { background-position: 200% 0; } } @keyframes enterDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } @keyframes enterUp { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } } @keyframes enterLeft { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes titleIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @keyframes planIn { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } } @keyframes planInLeft { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } } @keyframes flapIn { 0% { opacity: 0; transform: perspective(260px) rotateX(-96deg); } 40% { opacity: 1; transform: perspective(260px) rotateX(16deg); } 68% { transform: perspective(260px) rotateX(-6deg); } 86% { transform: perspective(260px) rotateX(2deg); } 100% { opacity: 1; transform: perspective(260px) rotateX(0deg); } } @keyframes tileFade { from { opacity: 0; } to { opacity: 1; } } @keyframes titleInNext { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } } @keyframes titleInPrev { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } } /* Kalenderblatt: altes Blatt dreht sich zur Seite weg, neues schwingt von der Gegenseite herein */ @keyframes sheetOutLeft { 0% { transform: none; opacity: 1; } 35% { opacity: 1; } 100% { transform: translate3d(-64%, -3%, 0) rotateY(32deg) rotateZ(-5deg) scale(.78); opacity: 0; } } @keyframes sheetOutRight { 0% { transform: none; opacity: 1; } 35% { opacity: 1; } 100% { transform: translate3d(64%, -3%, 0) rotateY(-32deg) rotateZ(5deg) scale(.78); opacity: 0; } } @keyframes sheetInRight { 0% { transform: translate3d(56%, 4%, 0) rotateY(-30deg) rotateZ(4deg) scale(.84); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes sheetInLeft { 0% { transform: translate3d(-56%, 4%, 0) rotateY(30deg) rotateZ(-4deg) scale(.84); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes sheetFadeOutL { to { transform: translateX(-6%); opacity: 0; } } @keyframes sheetFadeOutR { to { transform: translateX(6%); opacity: 0; } } @keyframes sheetFadeInR { from { transform: translateX(6%); opacity: 0; } } @keyframes sheetFadeInL { from { transform: translateX(-6%); opacity: 0; } } @keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(-6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } } @keyframes popOut { to { opacity: 0; transform: scale(.96); } } @keyframes tipIn { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateX(30px) scale(.97); } } @keyframes timer { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes dialogIn { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } } @keyframes cardOut { to { opacity: 0; transform: scale(.96) translateY(8px); } } @keyframes flash { 0%, 45% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px var(--accent-ring), 0 0 24px var(--accent-ring); } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes focusIn { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } } @keyframes conflictPulse { 0% { transform: scale(1); } 25% { transform: scale(1.12); box-shadow: inset 0 0 0 2px var(--cf-color, var(--warn)), 0 0 0 0 var(--danger-ring); } 60% { box-shadow: inset 0 0 0 2px var(--cf-color, var(--warn)), 0 0 0 10px transparent; } 100% { transform: none; } } @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes shimmer { to { transform: translateX(100%); } } @keyframes sweep { from { background-position: 150% 0; opacity: 1; } to { background-position: -60% 0; opacity: 0; } } @keyframes meterIn { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes tabLine { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } } @keyframes successRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent), 0 0 0 0 color-mix(in srgb, var(--ok) 35%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 30%, transparent), 0 0 24px 4px color-mix(in srgb, var(--ok) 30%, transparent); } 100% { box-shadow: 0 0 0 16px transparent, 0 0 30px 8px transparent; } } @keyframes ripple { to { transform: scale(1); opacity: 0; } } @keyframes popBadge { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } } @keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.1); } 60% { transform: rotate(10deg) scale(1.1); } } /* View Transition beim Wechsel des Farbschemas (kreisförmige Enthüllung, effects.js) */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* Monatswechsel: Kalenderblatt fliegt (effects.sheetTransition) – nur während des Übergangs benannt */ :root.vt-sheet .grid-shell { view-transition-name: plan-sheet; } :root.vt-sheet::view-transition-old(root) { display: none; } /* vom deckenden neuen Zustand ohnehin verdeckt */ ::view-transition-group(plan-sheet) { animation: none; } ::view-transition-image-pair(plan-sheet) { isolation: auto; perspective: 1800px; } ::view-transition-old(plan-sheet), ::view-transition-new(plan-sheet) { mix-blend-mode: normal; backface-visibility: hidden; } ::view-transition-old(plan-sheet) { animation: sheetOutLeft 560ms cubic-bezier(.5, 0, .75, .35) both; transform-origin: 0% 50%; z-index: 1; } /* altes Blatt fliegt über das neue */ ::view-transition-new(plan-sheet) { animation: sheetInRight 780ms 130ms cubic-bezier(.16, 1, .3, 1) both; transform-origin: 100% 50%; } :root[data-vt-dir="prev"]::view-transition-old(plan-sheet) { animation-name: sheetOutRight; transform-origin: 100% 50%; } :root[data-vt-dir="prev"]::view-transition-new(plan-sheet) { animation-name: sheetInLeft; transform-origin: 0% 50%; } :root[data-effects="reduced"]::view-transition-old(plan-sheet) { animation: sheetFadeOutL 220ms var(--ease-in-out) both; } :root[data-effects="reduced"]::view-transition-new(plan-sheet) { animation: sheetFadeInR 300ms 60ms var(--ease-out) both; } :root[data-effects="reduced"][data-vt-dir="prev"]::view-transition-old(plan-sheet) { animation-name: sheetFadeOutR; } :root[data-effects="reduced"][data-vt-dir="prev"]::view-transition-new(plan-sheet) { animation-name: sheetFadeInL; } /* 9b ─── Assistentin „Birgit“ (assistant.js / assistant3d.js) ────────────────── */ .asst { position: fixed; z-index: 86; width: 128px; height: 160px; left: -400px; top: -400px; pointer-events: none; opacity: 0; transform-origin: 50% 100%; } .asst.is-in { opacity: 1; animation: asstIn 700ms var(--ease-spring) both; } .asst.is-busy { z-index: 101; } /* über dem Fortschritts-Overlay */ .asst.is-busy .asst__fig { pointer-events: none; } .asst.is-dragging { transition: none; z-index: 120; } .asst.is-dragging .asst__fig { cursor: grabbing; } .asst__fig { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: grab; pointer-events: auto; border-radius: 46% 46% 18px 18px; touch-action: none; -webkit-tap-highlight-color: transparent; } .asst__fig:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .asst__stage { position: absolute; inset: 0; display: block; overflow: visible; } .asst__canvas { position: absolute; left: -16px; right: -16px; top: -14px; bottom: 0; width: calc(100% + 32px); height: calc(100% + 14px); display: block; } .asst__glow { /* weicher Bodenschatten / Lichtfleck */ position: absolute; left: 14%; right: 14%; bottom: -4px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 40, 90, .22), transparent); transition: background var(--t-slow); } .asst[data-mood="happy"] .asst__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--ok) 45%, transparent), transparent); } .asst[data-mood="worried"] .asst__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--orange) 45%, transparent), transparent); } .asst[data-mood="thinking"] .asst__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent); animation: asstThink 1.6s ease-in-out infinite; } .asst__fig:hover .asst__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 35%, transparent), transparent); } /* verkleinert: runder Kopf-Avatar */ .asst.is-min { width: 64px; height: 64px; } .asst.is-min .asst__fig { border-radius: 50%; overflow: hidden; background: var(--elevated); box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--shadow-md, 0 8px 22px -8px rgba(30,40,90,.35)); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } .asst.is-min .asst__canvas { left: -8px; right: -8px; top: -8px; bottom: -8px; width: calc(100% + 16px); height: calc(100% + 16px); } .asst.is-min .asst__glow { display: none; } .asst.is-min[data-mood="worried"] .asst__fig { box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 70%, transparent), var(--shadow-md, 0 8px 22px -8px rgba(30,40,90,.35)); } .asst.is-min[data-mood="happy"] .asst__fig { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 70%, transparent), var(--shadow-md, 0 8px 22px -8px rgba(30,40,90,.35)); } /* Sprechblase */ .asst__bubble { position: absolute; bottom: calc(100% + 10px); right: 0; width: min(340px, calc(100vw - 24px)); pointer-events: auto; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--elevated); color: var(--text); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--shadow-lg); font-size: 13px; line-height: 1.45; transform-origin: 88% 100%; } .asst[data-dock="left"] .asst__bubble { right: auto; left: 0; transform-origin: 12% 100%; } .asst__bubble::after { /* Sprechblasen-Spitze */ content: ''; position: absolute; bottom: -7px; right: 42px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--elevated); border-right: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); box-shadow: 4px 4px 8px -4px rgba(30, 40, 90, .18); } .asst[data-dock="left"] .asst__bubble::after { right: auto; left: 42px; } .asst.is-min .asst__bubble::after { right: 22px; } .asst.is-min[data-dock="left"] .asst__bubble::after { left: 22px; } .asst__bubble.is-show { animation: asstBubbleIn 420ms var(--ease-spring) both; } .asst__bubble.is-out { animation: asstBubbleOut 200ms var(--ease-in-out) forwards; } .asst__bubble.is-worried { box-shadow: var(--glass-hi), 0 0 0 1px color-mix(in srgb, var(--orange) 40%, transparent), var(--shadow-lg); } .asst__bubble.is-happy { box-shadow: var(--glass-hi), 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent), var(--shadow-lg); } .asst__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .asst__name { flex: none; font-size: 10.5px; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); padding: 2px 7px; border-radius: var(--r-pill); background: var(--accent-soft); } .asst__bubble.is-worried .asst__name { color: var(--orange); background: var(--orange-soft); } .asst__bubble.is-happy .asst__name { color: var(--ok); background: var(--ok-soft); } .asst__title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .asst__x { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; } .asst__x:hover { background: var(--surface-3); color: var(--text); } .asst__text p { margin: 4px 0 0; color: var(--text-2); } .asst__text kbd { font-size: 11px; } .asst__who { color: var(--text) !important; } .asst__tip { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px !important; padding: 7px 9px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--text) !important; font-size: 12.5px; } .asst__tip .ico { flex: none; margin-top: 2px; color: var(--accent); } .asst__conf { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .asst__stats { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .asst__stats li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; background: var(--surface-3); font-size: 12px; color: var(--text-2); } .asst__stats li b { font-variant-numeric: tabular-nums; color: var(--text); } .asst__stats li.is-a b { color: var(--danger); } .asst__stats li.is-b b { color: var(--orange); } .asst__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .asst__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .asst__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .asst__btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-1px); } .asst__btn:active:not(:disabled) { transform: translateY(0) scale(.98); } .asst__btn:disabled { opacity: .45; cursor: default; } .asst__btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .asst__btn.is-primary:hover:not(:disabled) { background: var(--accent-strong); } .asst__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .asst__bubble.is-menu .asst__acts { gap: 5px; } .asst__btn.is-wide { width: 100%; height: auto; min-height: 42px; padding: 6px 12px; border-radius: 12px; justify-content: flex-start; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; text-align: left; } .asst__btn.is-wide .ico { grid-row: 1 / 3; align-self: center; color: var(--accent); } .asst__btn.is-wide small { grid-column: 2; font-size: 11px; font-weight: 500; color: var(--muted); } .asst__bubble.is-walk .asst__acts { justify-content: space-between; } /* Birgit – Inhalte der Sprechblase (Tagesüberblick, Engpässe, Fairness, Personensuche, Vorschlag) */ .asst__bubble.is-wide { width: min(390px, calc(100vw - 24px)); } .asst__btn.is-small { padding: 0 9px; height: 28px; font-size: 12px; } .asst__bubble.is-menu .asst__acts { display: grid; grid-template-columns: 1fr 1fr; } .asst__bubble.is-menu .asst__btn.is-wide { grid-column: span 1; min-height: 50px; } .asst__bubble.is-menu .asst__btn.is-small { justify-content: center; } .asst__bubble.is-menu .asst__btn.is-small:last-child:nth-child(odd) { grid-column: span 2; } .asst__bubble.is-menu .asst__acts { max-height: min(58vh, 540px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin-left: -2px; margin-right: -2px; } .asst__small { font-size: 11.5px; color: var(--muted) !important; } .asst__small.is-warn { color: var(--orange) !important; font-weight: 600; } .asst__day { display: grid; gap: 6px; margin-top: 6px; } .asst__day > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; } .asst__lbl { flex: 0 0 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .asst__chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--text); font-size: 12px; font-weight: 600; } .asst__chip.is-muted { background: var(--surface-3); color: var(--text-2); font-weight: 550; } .asst__mod { display: inline-flex; gap: 4px; align-items: baseline; padding: 2px 8px; border-radius: 8px; background: var(--surface-3); font-size: 11.5px; color: var(--text-2); } .asst__mod b { color: var(--accent); font-size: 10.5px; } .asst__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; } .asst__list li { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 5px 8px; border-radius: 9px; font-size: 12px; background: var(--surface-3); } .asst__list li.is-def { background: var(--danger-soft); } .asst__list li.is-def b { color: var(--danger); } .asst__list li.is-tight { background: var(--warn-soft); } .asst__fair { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; } .asst__fair li > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; } .asst__fair li span { color: var(--muted); font-size: 11.5px; } .asst__fair small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; } .asst__bar { height: 6px; margin-top: 4px; border-radius: 6px; background: var(--surface-3); overflow: hidden; } .asst__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 60%, var(--accent-2))); transform-origin: left; animation: growX 700ms var(--ease-out) both; } .asst__fair li.is-off .asst__bar i { background: linear-gradient(90deg, var(--warn), var(--orange)); } .asst__search input { width: 100%; height: 34px; margin-top: 4px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; outline: none; } .asst__search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .asst__person:empty { display: none; } .asst__person { margin-top: 6px; animation: rise 320ms var(--ease-out) both; } .asst__stats.is-6 { grid-template-columns: 1fr 1fr 1fr; } .asst__gain { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: 11.5px; font-weight: 700; } .asst__gain.is-neg { background: var(--warn-soft); color: var(--warn); } .asst__change { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; } .asst__change .is-old { padding: 3px 9px; border-radius: 8px; background: var(--surface-3); color: var(--muted); text-decoration: line-through; font-size: 12.5px; } .asst__change .is-new { padding: 3px 9px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: 12.5px; } .asst__bubble.is-analyze .asst__name, .asst__bubble.is-proud .asst__name, .asst__bubble.is-celebrate .asst__name { color: var(--ok); background: var(--ok-soft); } .asst__bubble.is-shrug .asst__name, .asst__bubble.is-confused .asst__name { color: var(--muted); background: var(--surface-3); } .asst[data-mood="happy"] .asst__fig, .asst[data-mood="thinking"] .asst__fig { cursor: pointer; } /* 2D-Ersatzfigur ohne WebGL (assistant-figure.js) */ .asst.is-svg .as-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .asst.is-svg .as-pose, .asst.is-svg .as-mouth, .asst.is-svg .as-brows, .asst.is-svg .as-eyes--happy, .asst.is-svg .as-drop, .asst.is-svg .as-sparkles, .asst.is-svg .as-think { display: none; } .asst.is-svg[data-mood="idle"] .as-pose--idle, .asst.is-svg[data-mood="talk"] .as-pose--talk, .asst.is-svg[data-mood="happy"] .as-pose--happy, .asst.is-svg[data-mood="worried"] .as-pose--worried, .asst.is-svg[data-mood="thinking"] .as-pose--thinking { display: inline; } .asst.is-svg[data-mood="idle"] .as-mouth--smile, .asst.is-svg[data-mood="talk"] .as-mouth--smile, .asst.is-svg[data-mood="happy"] .as-mouth--happy, .asst.is-svg[data-mood="worried"] .as-mouth--worried, .asst.is-svg[data-mood="thinking"] .as-mouth--thinking { display: inline; } .asst.is-svg[data-mood="idle"] .as-brows--idle, .asst.is-svg[data-mood="talk"] .as-brows--idle, .asst.is-svg[data-mood="happy"] .as-brows--happy, .asst.is-svg[data-mood="worried"] .as-brows--worried, .asst.is-svg[data-mood="thinking"] .as-brows--thinking { display: inline; } .asst.is-svg[data-mood="happy"] .as-eyes--open { display: none; } .asst.is-svg[data-mood="happy"] .as-eyes--happy, .asst.is-svg[data-mood="worried"] .as-drop, .asst.is-svg[data-mood="happy"] .as-sparkles, .asst.is-svg[data-mood="thinking"] .as-think { display: inline; } .asst.is-svg .as-cheek { opacity: .4; } .asst.is-min.is-svg .as-svg { transform: scale(2.1) translateY(14%); transform-origin: 50% 30%; } @keyframes asstIn { from { opacity: 0; transform: translateY(26px) scale(.7); } to { opacity: 1; transform: none; } } @keyframes asstBubbleIn { from { opacity: 0; transform: translateY(10px) scale(.88); } to { opacity: 1; transform: none; } } @keyframes asstBubbleOut { to { opacity: 0; transform: translateY(6px) scale(.94); } } @keyframes asstThink { 50% { opacity: .55; transform: scaleX(.85); } } /* 10 ─── Responsives Verhalten ───────────────────────────────────────────── */ @media (max-width: 1500px) { .search { width: 170px; } .search:focus-within { width: 210px; } .plan-state { display: none; } } @media (max-width: 1320px) { .topbar { gap: 12px; padding: 8px 10px 8px 12px; } .brand-eyebrow { display: none; } .page-title { font-size: 17px; } .btn-primary__label { display: none; } .btn-primary { padding: 0 12px; } .seg--filter { display: none; } } @media (max-width: 1180px) { :root { --panel-w: 360px; } .btn-cluster, #btnView, .btn-today, .topbar__sep { display: none; } .only-tablet { display: block; } .sidepanel { position: absolute; right: 0; top: 0; bottom: 0; flex-basis: auto; box-shadow: var(--glass-hi), 0 0 0 1px var(--glass-line), var(--shadow-lg); background: var(--elevated); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow); } .app.panel-closed .sidepanel { width: var(--panel-w); margin-left: 0; transform: translateX(110%); opacity: 1; border-width: 1px; } .sidepanel-scrim { display: block; position: absolute; inset: 0; z-index: 14; border-radius: var(--r-xl); background: rgba(10, 14, 26, .16); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fadeIn 220ms; } .sidepanel-scrim[hidden] { display: none; } } @media (max-width: 900px) { :root { --name-w: 118px; --gap: 8px; } .topbar { flex-wrap: wrap; row-gap: 8px; } .topbar__brand { order: 1; flex: 1 1 100%; } .brand-mark, .brand-mark svg { width: 30px; height: 30px; } .topbar__nav { order: 2; } .topbar__actions { order: 3; margin-left: auto; gap: 4px; } .month-btn { min-width: 132px; font-size: 13px; } .subbar { flex-wrap: wrap; row-gap: 6px; } .subbar__right { width: 100%; } .search { flex: 1; width: auto; } .search:focus-within { width: auto; } .search__kbd { display: none; } .emp-h__meta, .emp-h__flag { display: none; } .emp-h__btn { gap: 7px; padding: 0 6px 0 8px; } .legend { display: none; } .grid-scroll { border-radius: var(--r-xl); } } @media (max-width: 900px) { .asst { width: 100px; height: 126px; } .asst.is-min { width: 56px; height: 56px; } } @media (max-width: 640px) { :root { --name-w: 96px; --panel-w: 100vw; --row-h: 40px; --day-w: 44px; --gap: 6px; } .app { padding: 6px 6px 6px; } .topbar, .subbar, .grid-shell { border-radius: 16px; } .page-title { font-size: 16px; } .topbar { padding: 8px 10px; row-gap: 6px; column-gap: 8px; } .topbar__brand { gap: 9px; } .topbar__nav { gap: 4px; } .topbar__actions { gap: 4px; } .topbar__nav .btn-round { width: 34px; height: 34px; } #btnReset, #btnPdf, #btnXlsx, #btnTheme, #btnPanel { display: none; } .only-narrow { display: block; } .split-btn .btn-primary { height: 36px; } .btn-today { display: none; } .month-btn { min-width: 0; padding: 0 10px; height: 34px; } .avatar { display: none; } .conflict-chips .cchip { padding: 0 8px 0 6px; height: 28px; } .fill-meter__text span { display: none; } .save-state { min-width: 0; } .save-state .txt { display: none; } .sidepanel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; height: 82%; width: 100%; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .sidepanel > * { min-width: 0; } .app.panel-closed .sidepanel { transform: translateY(110%); width: 100%; } .sidepanel-scrim { position: fixed; border-radius: 0; } .sheet-grip { display: block; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--border-strong); } .editor__head { padding-top: 18px; } .sidepanel__tabs { padding-top: 14px; } .sidepanel::before { content: ''; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--border-strong); } .pop.editor, .pop.editor--bulk { position: fixed; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; max-width: 100%; border-radius: 22px 22px 0 0; animation: sheetIn 300ms var(--ease-out); padding-bottom: env(safe-area-inset-bottom, 0px); } .editor__body { max-height: 58vh; } .opt { height: 40px; } .toasts { left: 10px; right: 10px; bottom: 10px; align-items: stretch; } .toast { min-width: 0; max-width: none; } /* Summenspalten scrollen auf dem Smartphone mit – mehr Platz für die Tage */ .sum, .plan thead .sum-h, .plan tfoot .sum-f { position: static; box-shadow: inset 0 -1px 0 var(--grid-line), inset 1px 0 0 var(--grid-line); } .grid-scroll { scroll-padding-right: 0; } } @media (pointer: coarse) { .btn-icon { width: 40px; height: 40px; } .opt { height: 42px; } .opt kbd { display: none; } .cell:hover .tile { transform: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile-fg, transparent) 14%, transparent); } } /* Ansichtsoption „Effekte reduziert“ (z. B. Remote-Desktop ohne Grafikbeschleunigung) */ :root[data-effects="reduced"] { --glass: rgba(255, 255, 255, .9); --glass-sheet: rgba(255, 255, 255, .93); --elevated: rgba(255, 255, 255, .97); } :root[data-effects="reduced"][data-theme="dark"] { --glass: rgba(20, 25, 38, .95); --glass-sheet: rgba(15, 19, 30, .96); --elevated: rgba(26, 32, 48, .98); } :root[data-effects="reduced"] *, :root[data-effects="reduced"] *::before, :root[data-effects="reduced"] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root[data-effects="reduced"] .split-btn::after, :root[data-effects="reduced"] .spot::before, :root[data-effects="reduced"] .ov-card::before { display: none; } :root[data-effects="reduced"] .page-title .title-month, :root[data-effects="reduced"] .cchip--A:not(.is-zero) { animation: none; } :root[data-effects="reduced"] .cell.is-pop .tile { animation: tileFade 320ms var(--d, 0ms) ease-out both; } /* Browser ohne backdrop-filter: deckendere Glasflächen */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass: rgba(255, 255, 255, .9); --glass-sheet: rgba(255, 255, 255, .93); --elevated: rgba(255, 255, 255, .97); } :root[data-theme="dark"] { --glass: rgba(20, 25, 38, .94); --glass-sheet: rgba(15, 19, 30, .95); --elevated: rgba(26, 32, 48, .98); } } /* 11 ─── Druck, reduzierte Bewegung ──────────────────────────────────────── */ @media print { body { overflow: visible; background: #fff; } .aurora, .topbar__actions, .topbar__nav, .subbar, .sidepanel, .legend, .toasts, .asst { display: none !important; } .app { display: block; height: auto; padding: 0; } .grid-shell { box-shadow: none; border: 0; background: #fff; backdrop-filter: none; } .grid-scroll { overflow: visible; } .plan thead th, .emp-h, .sum, .plan tfoot th, .plan tfoot td { position: static; } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .fill-beam, .fill-lam { display: none; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }