selbst trägt in adminTabUnternehmen.js EIN Inline-`style="display:grid;..."` (anders als `.admin-grid9-head`, dessen einzelne Zellen-

s KEIN Inline-`display` tragen — dort funktioniert die Regel darum bereits ohne `!important`, geprüft) — ein Inline-Style schlägt IMMER eine Stylesheet-Regel ohne `!important`, unabhängig von der Media-Query. Der Header blieb dadurch auf jedem Viewport <600px sichtbar UND als 6-spaltiges CSS-Grid gerendert (`grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr`), das auf 375px jede Spalte auf ~30-45px quetscht — Labels wie „Pensum"/„Tag (h)" überlappten sich sichtbar (genau das gemeldete Symptom: "unter dem Button Unternehmen zu unterst ... Auflistungen nicht korrekt angezeigt"). Live gegen einen frisch signup'ten Testtenant + echten Mitarbeiter-Datensatz auf 375px verifiziert: mit `!important` verschwindet der Header korrekt, nur die gestapelte label:value-Zeile bleibt sichtbar. */ @media(max-width:600px){ .admin-grid-header{ display:none !important; } .admin-grid-row{ display:flex !important; flex-direction:column; gap:2px; padding:8px 10px !important; } .admin-grid-row > span[data-label]::before{ content:attr(data-label) ": "; font-weight:600; color:var(--muted); } .admin-grid9{ grid-template-columns:1fr !important; } .admin-grid9-head{ display:none; } .admin-grid9 > div[data-label]::before{ content:attr(data-label) ": "; font-weight:600; color:var(--muted); margin-right:4px; } } /* Mobile-Topbar — 2 Reihen: Reihe 1: Logo links (.topbar-left) + Icons rechts (.topbar-right). Reihe 2: Scrollbare Tabs (.topbar-center, order:3). Fund 2026-07-07 (Flo): .topbar-right hatte hier bewusst flex-wrap:nowrap, damit alle 7 Controls (Sprache/Modus-Pills/Hilfe/Profil/Logout/Glocke) in Reihe 1 bleiben — auch mit max-width:52px auf #langSelect passen sie bei schmalen Phones (<400px) nicht in den verfügbaren Platz. Da nur #langSelect schrumpfen darf (die übrigen sind flex-shrink:0), rechnet Flexbox es dabei in negative X-Koordinaten statt es sichtbar zu lassen — es rendert dann links unter dem Logo und wirkt wie vom Logo überdeckt (kein Logo-Bug). flex-wrap:wrap lässt den Überschuss in eine eigene Zeile fallen, statt ihn unsichtbar zu verschieben. */ @media(max-width:768px){ .topbar{ flex-wrap:wrap; padding:6px 10px; gap:4px; align-items:center; } .topbar-left{ flex:0 0 auto; display:flex; align-items:center; margin-bottom:0; text-align:left; } .topbar-left .topbar-logo{ margin-left:0; max-width:none; } .topbar-right{ flex:1; justify-content:flex-end; flex-wrap:wrap; row-gap:4px; gap:4px; min-width:0; } .topbar-right .user-badge{ display:none; } .topbar-right select{ max-width:52px;flex-shrink:1; } .topbar-right .mode-pills,.topbar-right .icon-btn,.topbar-right .alert-bell{ flex-shrink:0; } .topbar-center{ order:3; flex:0 0 100%; overflow-x:auto; display:flex; flex-wrap:nowrap; gap:2px; padding:2px 0; justify-content:flex-start; scrollbar-width:none; } .topbar-center::-webkit-scrollbar{ display:none; } .topbar-center .tab-btn{ flex-shrink:0; white-space:nowrap; font-size:var(--fs-12); padding:4px 10px; } } /* Globaler Atem: Kacheln/Karten bekommen mehr Luft (Top-Level-Cards in Tab-Inhalten). Greift nur auf direkte Karten-Kinder, damit Grid-Layouts (admin-grid etc.) ihre eigenen Gaps behalten. */ .tab-content > .card, .tab-content > #shiftViewContainer > .card, .tab-content > #shiftViewContainer > div > .card{ margin-bottom:18px; } .tab-content{ padding:22px; } .shift-card-head{ padding:14px 16px; } .card-body{ padding:18px; } @media(max-width:1024px){ .tab-content{ padding:16px; } .tab-content > .card, .tab-content > #shiftViewContainer > .card, .tab-content > #shiftViewContainer > div > .card{ margin-bottom:14px; } } @media(max-width:600px){ .tab-content{ padding:12px; } .tab-content > .card, .tab-content > #shiftViewContainer > .card, .tab-content > #shiftViewContainer > div > .card{ margin-bottom:12px; } .card-body{ padding:12px; } } /* ════════════════ r145: 11-Punkte UX-Feinschliff ════════════════ */ /* P11: MA-Ansichten (role-employee) im Dienstplanungs- und Ideen-Tab balancieren. Wenn Admin-/Planer-Karten fehlen, sieht der MA-Tab leer aus → Kacheln werden zentriert + auf max-Width gecappt → angenehme Lesbarkeit auf grossen Screens. */ body.role-employee #tabIdeas .ideas-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; max-width:920px; margin:0 auto; } body.role-employee #tabIdeas .ideas-grid > .card{ align-self:start; } /* Wenn nur eine Karte sichtbar ist (admin-card via .role-hidden weg), zentriert sie sich → keine einsame Linksbündigkeit. */ body.role-employee #tabIdeas .ideas-grid > .card:only-of-type{ grid-column:1 / -1; max-width:640px; margin-left:auto; margin-right:auto; } /* Dienstplanung — MA: grosszügigere Mittenbreite, balanciertes Spacing. MA hat Kalender + (evtl.) eigene Karten — kein 4-Spalten-Grid-Gefühl mehr. */ body.role-employee #tabShifts{ max-width:1400px; margin:0 auto; } body.role-employee #tabShifts > .card, body.role-employee #tabShifts #shiftViewContainer > .card{ margin-left:auto; margin-right:auto; } /* Hero-Tools die für MA leer wären, kollabieren */ body.role-employee #shiftAdminTools.rosie-hero-tools{ display:none !important; } /* P7: Kachel-Tops bekommen eine leichte, brand-passende Tönung + subtile diagonale Schraffur. Reduziert kognitive Last durch klarere visuelle Hierarchie zwischen Karten-Kopf und Karten-Body. Inspiriert von Linear/Stripe/Notion-Pattern. Light: dezente Teal-Tönung. Dark: heller Teal-Hauch über Panel-Hintergrund. Schraffur: nur 2% Opazität → wahrnehmbar, nicht aufdringlich. */ .card-head{ position:relative; background: repeating-linear-gradient(135deg, rgba(20,184,166,.025) 0 8px, transparent 8px 16px), linear-gradient(180deg, var(--teal-dim) 0%, transparent 100%); border-bottom:1px solid var(--panel-border); border-top-left-radius:inherit; border-top-right-radius:inherit; } .card-head .card-title{ font-weight:700; letter-spacing:.01em; } /* Akzent-Linie links — wie ein subtiler Tab-Indikator */ .card-head::before{ content:''; position:absolute; left:0; top:10%; bottom:10%; width:3px; background:linear-gradient(180deg, var(--teal) 0%, transparent 100%); border-radius:0 2px 2px 0; opacity:.6; } /* Im Dark stärker tönen, weil sonst kaum sichtbar */ :root:not(.light) .card-head{ background: repeating-linear-gradient(135deg, rgba(20,184,166,.04) 0 8px, transparent 8px 16px), linear-gradient(180deg, rgba(20,184,166,.10) 0%, transparent 100%); } /* Rose-Preset: Magenta statt Teal in der Schraffur */ .preset-rose .card-head{ background: repeating-linear-gradient(135deg, rgba(217,70,239,.035) 0 8px, transparent 8px 16px), linear-gradient(180deg, var(--teal-dim) 0%, transparent 100%); } /* P4: Darkmode-Kontrast überall anheben. Wirkt auf alle dunklen Theme-Varianten (default = dark, ohne .light Klasse). Hebt --text-secondary, --muted, --panel-border so weit an, dass WCAG-AA für Label-Text gegen Panel/BG erfüllt ist. .light-Modi bleiben unverändert. */ :root:not(.light){ --text-secondary:#cbd5e1; --muted:#a3aab4; --panel-border:#3a3a42; --hairline:#2a2a30; } .preset-rose:not(.light){ --text-secondary:#fbcfe8; --muted:#e2a7c1; --panel-border:#4a2a38; } .nightshift:not(.light){ --text-secondary:#cbd5e1; --muted:#9ca3af; --panel-border:#3a3a42; } /* Buttons: Outline-Border + Hover-Kontrast im Dark */ :root:not(.light) .btn-outline{ border-color:var(--panel-border); color:var(--text); } :root:not(.light) .btn-outline:hover{ border-color:var(--teal); color:var(--teal); } /* Inputs/Selects: heller Rand im Dark, damit Felder klar abgrenzen. B-04 (Beta-Feedback Welle 3, FN-365): background-color ergänzt — die Regel setzte bislang Rand+Schrift, aber KEINEN Hintergrund; ein Select AUSSERHALB `.form-group` (die einzige Stelle, die bisher `background:var(--bg)` beisteuerte) blieb dadurch im Dark-Mode weiss auf hell-Rand-Schwarzschrift statt dunkel auf dunkel — s. Kopfkommentar am Dateiende für den vollen B-04-Befund. */ :root:not(.light) input, :root:not(.light) select, :root:not(.light) textarea{ border-color:var(--panel-border) !important; color:var(--text) !important; background-color:var(--bg) !important; } :root:not(.light) input::placeholder, :root:not(.light) textarea::placeholder{ color:var(--muted) !important; opacity:.85; } /* Card-Heads bekommen klare Trennung */ :root:not(.light) .card-head{ border-bottom-color:var(--panel-border); } /* Tabellen-Linien sichtbarer */ :root:not(.light) table, :root:not(.light) th, :root:not(.light) td{ border-color:var(--panel-border); } /* P5: Logo-„breathing"-Effekt — entschärft das „reingeschnitten"-Gefühl. Subliminales Pulsen via drop-shadow + sanftes Up-/Down-Scale (nur Topbar-Logo). Respektiert prefers-reduced-motion. */ @keyframes rosie-logo-breathe{ 0%,100%{ filter:drop-shadow(0 1px 3px rgba(72,72,96,.10)) drop-shadow(0 0 0 rgba(59,42,99,0)); transform:scale(1); } 50% { filter:drop-shadow(0 2px 6px rgba(72,72,96,.14)) drop-shadow(0 0 10px rgba(59,42,99,.28)); transform:scale(1.015); } } .topbar-logo-img{ animation:rosie-logo-breathe 4.5s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ .topbar-logo-img{ animation:none !important; } } /* P9: Brush-Palette darf den Dienstplan nicht verdecken. Bei offener Palette (body.paint-mode-active) erhält der Dienstplan-Bereich Padding rechts, damit die gesamte Tabelle ohne Überlappung sichtbar bleibt. */ @media(min-width:769px){ body.paint-mode-active #tabShifts{ padding-right:210px; transition:padding-right .18s ease; } } @media(max-width:768px){ /* Mobile: Palette ist klein und dockt unten — nur kleiner Bottom-Abstand. */ body.paint-mode-active #tabShifts{ padding-bottom:160px; } .paint-palette{ right:8px; left:8px; bottom:8px; width:auto; max-width:none; max-height:38vh; justify-content:flex-start; } } /* P6: Desktop-Kalendernav zentrieren (mobile war schon in r144 zentriert). */ .calendar-nav{ justify-content:center; } .calendar-nav > span[style*="flex:1"]{ display:none; } /* P2: Topbar-Sprung beim Settings-Tab-Wechsel. (a) .btn-outline hat 1px Border, .btn-primary keinen → 2px Layout-Shift beim Active-Toggle. (b) Bei Tab-Wechsel ändert sich die Content-Höhe — wenn der vertikale Scrollbar auftaucht/verschwindet, ändert sich die verfügbare Viewport-Breite → Topbar reflowt. */ .btn-primary{ border:1px solid transparent; } html{ scrollbar-gutter:stable; } #adminSettingsTabs{ scroll-behavior:auto; } #adminSettingsTabs button{ flex-shrink:0; } /* ════════════════ Ende r145 ════════════════ */ /* ════════════════ r146: Schicht-Tasks (Phase 1) ════════════════ */ /* Brief: ROSIE-SchichtTasks-KI-Engineering-Brief.md §6 */ /* Kalender-Grid für Aufgaben — sticky linke Spalte (MA-Name) */ .tasks-grid{ display:grid; width:100%; font-size:var(--fs-12); border-collapse:separate; background:var(--panel); } .tasks-grid-header{ display:contents; } .tasks-grid-header > div{ position:sticky; top:0; background:var(--panel); padding:6px 4px; border-bottom:1px solid var(--panel-border); font-weight:700; text-align:center; font-size:var(--fs-12); z-index:2; } .tasks-grid-header > div:first-child{ position:sticky; left:0; z-index:3; } .tasks-row{ display:contents; } .tasks-row > .tasks-staffcell{ position:sticky; left:0; background:var(--panel); padding:6px 8px; border-right:1px solid var(--panel-border); border-bottom:1px solid var(--hairline); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:1; max-width:180px; } .tasks-cell{ border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:4px 2px; text-align:center; cursor:pointer; transition:background .12s; min-height:36px; position:relative; } .tasks-cell:hover{ background:var(--teal-dim); } .tasks-cell.has-tasks{ background:rgba(20,184,166,.08); } /* Dienstplan-Projektion (2026-07-06): publizierte Schicht tönt die ganze Zelle transluzent in der Schichtfarbe (--tc-proj aus tasksTab.js). background-image layert ÜBER die background-color-Regeln (weekend/has-tasks) und lässt die box-shadow-Marker (is-today/is-selected) unangetastet. */ .tasks-cell.has-shift{ background-image:linear-gradient(var(--tc-proj), var(--tc-proj)); } .tasks-cell .tc-shift{ font-weight:700; color:var(--text); } .tasks-cell .tc-count{ display:inline-block; min-width:16px; height:16px; line-height:16px; padding:0 4px; border-radius:8px; background:var(--teal); color:#fff; font-size:var(--fs-12); font-weight:700; margin-top:2px; } .tasks-cell .tc-count.tc-done{ background:#10b981; } .tasks-cell .tc-count.tc-returned{ background:#f59e0b; } .tasks-cell.is-weekend{ background:rgba(0,0,0,.02); } :root:not(.light) .tasks-cell.is-weekend{ background:rgba(255,255,255,.02); } .tasks-cell.is-today{ box-shadow:inset 0 0 0 2px var(--teal); } .tasks-cell.is-selected{ box-shadow:inset 0 0 0 2px var(--amber); background:var(--amber-dim); } /* Side-Panel: feste Position rechts, slide-in */ .tasks-side-panel{ position:fixed; top:0; right:-460px; bottom:0; width:420px; max-width:90vw; background:var(--panel); border-left:1px solid var(--panel-border); box-shadow:-4px 0 18px rgba(0,0,0,.18); z-index:9990; display:flex; flex-direction:column; transition:right .22s ease; overflow:hidden; } .tasks-side-panel.is-open{ right:0; } .tasks-side-panel[aria-hidden="false"]{ right:0; } .tasks-side-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--panel-border); background:linear-gradient(180deg, var(--teal-dim) 0%, transparent 100%); } .tasks-side-body{ flex:1; overflow-y:auto; padding:12px 14px; } .task-card{ background:var(--bg); border:1px solid var(--panel-border); border-radius:8px; padding:8px 10px; font-size:12px; } .task-card .tc-title{ font-weight:700; } .task-card .tc-meta{ font-size:var(--fs-12); color:var(--muted); margin-top:2px; } .task-card[data-status="done"]{ opacity:.65; } .task-card[data-status="returned"]{ border-color:var(--amber); background:var(--amber-dim); } .task-card[data-status="in_progress"]{ border-left:3px solid var(--teal); } .task-card .tc-actions{ display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; } .task-prio-urgent{ color:#dc2626; font-weight:700; } .task-prio-high { color:#f59e0b; font-weight:700; } .task-prio-low { color:var(--muted); } @media(max-width:768px){ .tasks-side-panel{ width:96vw; right:-100vw; } .tasks-side-panel.is-open, .tasks-side-panel[aria-hidden="false"]{ right:0; } } /* ──── r147 P2: Task-Detail-View + Messages-Thread ──── */ .task-detail-head{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; } .task-detail-head .td-prio{ font-size:22px; line-height:1; } .td-title{ font-weight:700; font-size:14px; line-height:1.3; word-wrap:break-word; } .td-meta{ font-size:var(--fs-12); color:var(--muted); margin-top:4px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .td-chip{ display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:10px; background:var(--teal-dim); color:var(--text-secondary); font-size:var(--fs-12); } .td-desc{ background:var(--bg); border-left:3px solid var(--teal); padding:8px 10px; border-radius:0 6px 6px 0; font-size:12px; line-height:1.5; margin-bottom:10px; white-space:pre-wrap; } .td-return-reason{ background:var(--amber-dim); border:1px solid var(--amber); padding:8px 10px; border-radius:6px; font-size:12px; margin-bottom:10px; color:var(--text); } .td-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; } .td-thread-head{ font-size:var(--fs-12); font-weight:700; color:var(--text-secondary); margin-bottom:6px; display:flex; align-items:center; gap:6px; padding-top:8px; border-top:1px solid var(--panel-border); } .td-thread-count{ display:inline-block; min-width:16px; height:16px; line-height:16px; padding:0 5px; border-radius:8px; background:var(--teal); color:#fff; font-size:var(--fs-12); font-weight:700; } .td-thread{ max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:4px; margin-bottom:10px; background:var(--bg); border-radius:6px; border:1px solid var(--hairline); } .td-msg{ background:var(--panel); border:1px solid var(--panel-border); border-radius:8px; padding:6px 9px; font-size:12px; line-height:1.4; } .td-msg-head{ font-size:var(--fs-12); color:var(--muted); margin-bottom:2px; font-weight:600; } .td-msg-body{ word-wrap:break-word; white-space:pre-wrap; } .td-msg-mine{ background:var(--teal-dim); border-color:var(--teal); } .td-msg-mine .td-msg-head{ color:var(--teal); } .td-msg-sys{ background:rgba(0,0,0,.04); font-style:italic; border-style:dashed; } :root:not(.light) .td-msg-sys{ background:rgba(255,255,255,.03); } .td-compose{ display:flex; gap:6px; align-items:flex-end; } .td-compose textarea{ flex:1; font-size:12px; padding:8px 10px; border-radius:6px; border:1px solid var(--panel-border); background:var(--bg); color:var(--text); resize:vertical; min-height:36px; max-height:160px; } .td-compose textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 2px var(--teal-dim); } .td-compose .btn{ flex:0 0 auto; } /* ──── r147 P3.3: KI-Panel (Autonomie + Suggestions + Templates) ──── */ .tasks-ai-panel{ width:480px; max-width:92vw; } @media(max-width:768px){ .tasks-ai-panel{ width:96vw; } } .ki-section{ margin-bottom:18px; padding-bottom:14px; border-bottom:1px dashed var(--panel-border); } .ki-section:last-child{ border-bottom:0; } .ki-section-head{ font-size:12px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:6px; color:var(--text); } .ki-section-icon{ font-size:14px; } .ki-count{ display:inline-block; min-width:18px; padding:0 5px; background:var(--teal); color:#fff; border-radius:9px; font-size:var(--fs-12); font-weight:700; text-align:center; margin-left:auto; } .ki-slider-wrap{ display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; padding:4px; background:var(--bg); border-radius:10px; border:1px solid var(--panel-border); } .ki-slider-pos{ background:transparent; border:none; padding:8px 6px; border-radius:8px; cursor:pointer; text-align:center; transition:background .15s, transform .12s; display:flex; flex-direction:column; gap:2px; align-items:center; } .ki-slider-pos:hover{ background:var(--teal-dim); } .ki-slider-pos.is-active{ background:var(--teal); color:#fff; box-shadow:0 2px 6px rgba(20,184,166,.35); } .ki-slider-pos.is-active .ki-slider-pos-hint{ color:rgba(255,255,255,.85); } .ki-slider-pos-label{ font-size:var(--fs-12); font-weight:700; }.ki-card{ background:var(--bg); border:1px solid var(--panel-border); border-radius:8px; padding:10px 12px; margin-bottom:8px; } .ki-card-title{ font-weight:700; font-size:12px; margin-bottom:4px; } .ki-card-meta{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:4px; }.ki-card-stats{ font-size:var(--fs-12); color:var(--muted); margin-bottom:6px; } .ki-card-actions{ display:flex; gap:4px; } .ki-tmpl{ padding:6px 8px; background:var(--bg); border:1px solid var(--panel-border); border-radius:6px; } .ki-tmpl[data-locked="1"]{ border-color:var(--amber); background:var(--amber-dim); } .ki-tmpl[data-active="0"]{ opacity:.6; } /* ──── r147 P4.1: Wochen- + Tagesansicht ──── */ .tasks-cell-week{ min-height:60px; padding:6px 4px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; } .tasks-cell-week .tc-shift{ font-size:14px; } .tasks-cell-week .tc-count{ margin-top:4px; } .tc-progress{ width:80%; height:3px; background:var(--hairline); border-radius:2px; margin-top:4px; overflow:hidden; } .tc-progress-bar{ height:100%; background:var(--teal); transition:width .3s ease; } .tasks-day-view{ padding:14px; display:flex; flex-direction:column; gap:16px; } .day-group-head{ font-size:13px; font-weight:700; margin-bottom:8px; padding:6px 10px; background:var(--teal-dim); color:var(--teal); border-radius:6px; display:flex; align-items:center; gap:8px; } .day-group-body{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; } .day-staff-card{ background:var(--bg); border:1px solid var(--panel-border); border-radius:10px; padding:10px 12px; transition:transform .12s, box-shadow .12s; } .day-staff-card:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(20,184,166,.18); border-color:var(--teal); } .dsc-head{ display:flex; align-items:baseline; justify-content:space-between; } .dsc-name{ font-weight:700; font-size:12px; } .dsc-meta{ font-size:var(--fs-12); color:var(--muted); font-weight:600; } .dsc-progress{ height:4px; background:var(--hairline); border-radius:2px; margin-top:6px; overflow:hidden; } .dsc-progress-bar{ height:100%; background:linear-gradient(90deg, var(--teal) 0%, var(--green) 100%); transition:width .3s ease; } .dsc-task-list{ display:flex; flex-direction:column; gap:3px; margin-top:8px; border-top:1px dashed var(--hairline); padding-top:6px; } .dsc-task{ font-size:var(--fs-12); line-height:1.3; color:var(--text); } .dsc-task-more{ color:var(--muted); font-style:italic; } /* ──── r147 P4.2: Audit-Panel ──── */ .tasks-audit-panel{ width:520px; max-width:96vw; } @media(max-width:768px){ .tasks-audit-panel{ width:96vw; } } .audit-filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--panel-border); } .audit-verify{ padding:8px 12px; border-radius:8px; margin-bottom:10px; font-size:12px; font-weight:700; text-align:center; } .audit-verify-ok{ background:rgba(16,185,129,.12); color:#10b981; border:1px solid #10b981; } .audit-verify-fail{ background:var(--amber-dim); color:var(--amber); border:1px solid var(--amber); } .audit-list{ display:flex; flex-direction:column; gap:4px; } .audit-item{ background:var(--bg); border:1px solid var(--panel-border); border-radius:6px; font-size:var(--fs-12); } .audit-item summary{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; padding:6px 10px; cursor:pointer; list-style:none; align-items:center; } .audit-item summary::-webkit-details-marker{ display:none; } .audit-type{ font-weight:700; color:var(--teal); font-size:var(--fs-12); padding:2px 6px; background:var(--teal-dim); border-radius:4px; } .audit-actor{ color:var(--text-secondary); font-size:var(--fs-12); } .audit-time{ color:var(--muted); font-size:var(--fs-12); } .audit-detail{ padding:6px 10px 10px; border-top:1px dashed var(--hairline); font-size:var(--fs-12); color:var(--text-secondary); } .audit-detail code{ background:var(--panel); padding:1px 4px; border-radius:3px; font-family:'SF Mono', 'Consolas', monospace; font-size:var(--fs-12); } .audit-payload{ background:var(--panel); border:1px solid var(--hairline); border-radius:4px; padding:6px; font-family:'SF Mono', 'Consolas', monospace; font-size:var(--fs-12); line-height:1.4; margin-top:4px; overflow-x:auto; white-space:pre-wrap; word-break:break-word; } /* ──── r148 Polish 3: Wochen-View Pagination ──── */ .tasks-pagination{ display:flex; gap:8px; align-items:center; padding:10px 14px; background:var(--panel); border-top:1px solid var(--panel-border); font-size:var(--fs-12); color:var(--muted); position:sticky; bottom:0; } .tasks-pagination > span{ flex:1; } /* ──── r148 Polish 2: Audit Date-Range-Picker ──── */ .audit-date-range{ display:flex; gap:6px; align-items:center; flex-basis:100%; padding-top:4px; border-top:1px dashed var(--hairline); margin-top:4px; } .audit-date-range label{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-12); color:var(--text-secondary); } .audit-date-range input[type="date"]{ font-size:var(--fs-12); padding:3px 5px; border-radius:4px; border:1px solid var(--panel-border); background:var(--bg); color:var(--text); font-family:inherit; } .audit-date-range input[type="date"]:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 2px var(--teal-dim); } /* ──── r148 Polish: Template-Edit-Form (Details-basiert) ──── */ .ki-tmpl{ padding:0; background:var(--bg); border:1px solid var(--panel-border); border-radius:6px; } .ki-tmpl[open]{ background:var(--panel); border-color:var(--teal); } .ki-tmpl-summary{ display:flex; align-items:center; gap:6px; padding:6px 8px; cursor:pointer; list-style:none; } .ki-tmpl-summary::-webkit-details-marker{ display:none; }.ki-tmpl[open] > .ki-tmpl-summary::before{ transform:rotate(90deg); } .ki-tmpl-edit{ padding:8px 10px 10px; border-top:1px dashed var(--panel-border); display:flex; flex-direction:column; gap:4px; } .ki-edit-input{ font-size:var(--fs-12); padding:4px 6px; border-radius:4px; border:1px solid var(--panel-border); background:var(--bg); color:var(--text); width:100%; font-family:inherit; } .ki-edit-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 2px var(--teal-dim); } .ki-edit-input:disabled{ opacity:0.5; cursor:not-allowed; } .ki-edit-input[type="checkbox"]{ width:auto; } .ki-edit-input[type="time"]{ width:auto; } /* ════════════════ Ende r147 P4 ════════════════ */ /* ════════════════ Ende r147 P3 ════════════════ */ /* ════════════════ Ende r147 P2 ════════════════ */ /* ════════════════ Ende r146 ════════════════ */ /* ════════════════ Ende Brand Kit r127/r128/r135/r136/r140 ════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ */ /* r150: Lebendige UX — Organic Animations, Healthcare Colors, Ambient */ /* Gated behind body.rosie-alive — user can toggle off in profile */ /* ════════════════════════════════════════════════════════════════════════════ */ :root{ --sage:#7c9a82;--sage-dim:rgba(124,154,130,.12); --terracotta:#c4704b;--terracotta-dim:rgba(196,112,75,.12); --sand:#d4c5a9;--sand-dim:rgba(212,197,169,.12); --ocean:#2d6a7f;--ocean-dim:rgba(45,106,127,.12); --ease-bounce:cubic-bezier(.34,1.56,.64,1); --ease-silk:cubic-bezier(.25,.8,.25,1); --ease-decel:cubic-bezier(0,0,.2,1); --crc-tint:transparent;--crc-opacity:0 } /* ── prefers-reduced-motion: suppress all living animation ── */ @media(prefers-reduced-motion:reduce){ body.rosie-alive *,body.rosie-alive *::before,body.rosie-alive *::after{ animation-duration:.001s!important;transition-duration:.001s!important} } /* ── Circadian Ambient Lens (overlay, pointer-events:none) ── */ #crcLens{position:fixed;inset:0;z-index:99990;pointer-events:none; background:var(--crc-tint);opacity:var(--crc-opacity); mix-blend-mode:soft-light;transition:background 120s linear,opacity 120s linear} /* ── Organic Easing on Core Elements ── */ body.rosie-alive .card{ transition:transform .35s var(--ease-bounce),box-shadow .35s var(--ease-silk),border-color .2s var(--ease-silk)} body.rosie-alive .card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.1)} body.rosie-alive .btn{transition:all .25s var(--ease-bounce)} body.rosie-alive .btn:active{transform:scale(.95)!important;transition-duration:.1s} body.rosie-alive .btn-primary:active{box-shadow:0 0 0 4px var(--teal-dim)} body.rosie-alive .tab-btn{transition:all .2s var(--ease-silk)} body.rosie-alive .staff-card{transition:transform .3s var(--ease-bounce),box-shadow .3s var(--ease-silk),border-color .2s var(--ease-silk)} body.rosie-alive .staff-card:hover{transform:translateY(-3px) scale(1.01)} /* ── Elastic Overscroll ── */ body.rosie-alive .sq-grid, body.rosie-alive .staff-grid, body.rosie-alive .chat-messages, body.rosie-alive .feed-list, body.rosie-alive .signal-list, body.rosie-alive .alarm-section, body.rosie-alive .conv-item + .conv-item{ scroll-behavior:smooth} body.rosie-alive{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch} /* ── Modal Entrance (organic bounce) ── */ body.rosie-alive .modal-box{animation:aliveModalIn .4s var(--ease-bounce)} @keyframes aliveModalIn{ 0%{opacity:0;transform:scale(.92) translateY(12px)} 60%{transform:scale(1.02) translateY(-2px)} 100%{opacity:1;transform:scale(1) translateY(0)} } /* ── Sidebar Slide (organic) ── */ body.rosie-alive #liveBrowserSidebar{transition:transform .35s var(--ease-bounce)} body.rosie-alive #alarmSidebar{transition:transform .35s var(--ease-bounce)} /* ── Toast Alive (replaces inline styles) ── */ .rosie-toast-alive{ position:fixed;bottom:80px;left:50%;z-index:99999; padding:12px 22px;border-radius:14px; font-size:13px;font-weight:600; box-shadow:0 8px 32px rgba(0,0,0,.2); max-width:88vw;text-align:center;pointer-events:none; animation:toastIn .5s var(--ease-bounce) forwards} .rosie-toast-alive.toast-out{animation:toastOut .4s var(--ease-silk) forwards} .rosie-toast-alive.toast-success{background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff} .rosie-toast-alive.toast-error{background:linear-gradient(135deg,#92400e,#b8860b);color:#fff} .rosie-toast-alive.toast-info{background:linear-gradient(135deg,#1e3a5f,#3b82f6);color:#fff} /* FN-307/1a — Gold-Soft-Warndarstellung (vorher: 'warning' lief unsichtbar als '.toast-info'). Hintergrund-Token bewusst wiederverwendet statt neu erfunden: --soft-warn/--rosie-gold tragen im Rest dieser Datei bereits exakt diese Bedeutung ("warm amber statt aggressivem Rot", s. .sq-cell-error-Konfliktanimation) und sind — wie bei den 3 Geschwister-Toasts oben, die ebenfalls literale statt themenabhängige Werte nutzen — in JEDEM der 3 Farbmodi identisch definiert (kein .light/.nightshift/.preset-rose-Override). Textfarbe bewusst NICHT var(--bg) (das wäre in .light hell auf hell — --bg wechselt dort auf #f0f4f8) — literal dunkel für stabilen Kontrast (≥6:1 gegen beide Gradient-Enden) unabhängig vom Farbmodus. */ .rosie-toast-alive.toast-warning{background:linear-gradient(135deg,var(--soft-warn),var(--rosie-gold));color:#241a00} @keyframes toastIn{ 0%{transform:translateX(-50%) translateY(20px) scale(.9);opacity:0} 100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1} } @keyframes toastOut{ 0%{transform:translateX(-50%) translateY(0) scale(1);opacity:1} 100%{transform:translateX(-50%) translateY(-10px) scale(.95);opacity:0} } /* ── Transparency Gate (v9.2, revDSG Art. 6 Informed Consent) ── */ .transparency-step{display:none} .transparency-step.active{display:block} /* ── Celebration Pulse (on success) ── */ @keyframes celebratePulse{ 0%{box-shadow:0 0 0 0 rgba(20,184,166,.4)} 50%{box-shadow:0 0 0 12px rgba(20,184,166,0)} 100%{box-shadow:0 0 0 0 rgba(20,184,166,0)} } .rosie-celebrate{animation:celebratePulse .8s var(--ease-bounce)} /* ── Success Glow (brief flash on element) ── */ @keyframes successGlow{ 0%{outline:2px solid transparent;outline-offset:0} 40%{outline:2px solid var(--teal);outline-offset:4px} 100%{outline:2px solid transparent;outline-offset:0} } body.rosie-alive .rosie-glow{animation:successGlow .6s var(--ease-silk)} /* ── Soft Conflict (warm amber statt aggressivem Rot) ── */ body.rosie-alive .sq-cell-error{animation:softConflict .5s var(--ease-silk)} @keyframes softConflict{ 0%{background:var(--soft-warn-dim);transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} 100%{background:transparent;transform:translateX(0)} } /* ── KPI Card Staggered Appear ── */ body.rosie-alive .kpi-item{animation:kpiAppear .4s var(--ease-bounce) both} @keyframes kpiAppear{ 0%{opacity:0;transform:translateY(8px) scale(.97)} 100%{opacity:1;transform:translateY(0) scale(1)} } body.rosie-alive .kpi-item:nth-child(1){animation-delay:.05s} body.rosie-alive .kpi-item:nth-child(2){animation-delay:.1s} body.rosie-alive .kpi-item:nth-child(3){animation-delay:.15s} body.rosie-alive .kpi-item:nth-child(4){animation-delay:.2s} body.rosie-alive .kpi-item:nth-child(5){animation-delay:.25s} body.rosie-alive .kpi-item:nth-child(6){animation-delay:.3s} /* ── Calendar Day Hover (organic lift) ── */ body.rosie-alive .cal-day{transition:all .2s var(--ease-silk)} body.rosie-alive .cal-day:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 4px 12px rgba(0,0,0,.08)} /* ── Tab Content Fade ── */ body.rosie-alive .tab-content.active{animation:tabFadeIn .3s var(--ease-decel)} @keyframes tabFadeIn{0%{opacity:.6;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}} /* ── Feierabend Card ── */ .feierabend-card{ background:linear-gradient(135deg,var(--ocean),var(--sage),var(--terracotta)); background-size:200% 200%; border-radius:16px;padding:24px 28px;color:#fff;text-align:center; margin:16px auto;max-width:480px; box-shadow:0 8px 32px rgba(0,0,0,.15); animation:feierabendShift 6s ease-in-out infinite alternate} .feierabend-card h3{font-size:20px;font-weight:800;margin-bottom:6px;text-shadow:0 1px 4px rgba(0,0,0,.15)} .feierabend-card p{font-size:13px;opacity:.9;line-height:1.6} @keyframes feierabendShift{0%{background-position:0% 50%}100%{background-position:100% 50%}} /* ── UX-Alive Toggle (Profile) ── */ .ux-alive-toggle,.sound-toggle{display:flex;align-items:center;gap:12px;padding:10px 12px; background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--panel-border); margin-bottom:8px;cursor:pointer;transition:opacity .2s} .ux-alive-toggle:hover,.sound-toggle:hover{border-color:var(--teal)} .toggle-track{width:36px;height:20px;border-radius:10px;flex-shrink:0; background:var(--panel-border);position:relative;transition:background .3s var(--ease-bounce)} .toggle-track.on{background:var(--teal)} .toggle-thumb{width:16px;height:16px;border-radius:50%; background:#fff;position:absolute;top:2px;left:2px; transition:left .3s var(--ease-bounce);box-shadow:0 1px 3px rgba(0,0,0,.2)} .toggle-track.on .toggle-thumb{left:18px} .toggle-label{font-size:var(--fs-12);font-weight:600;color:var(--text)} /* ── Bounty Item Pulse (on new bounty) ── */ body.rosie-alive .bounty-item{transition:all .25s var(--ease-silk)} body.rosie-alive .bounty-item:hover{transform:translateX(4px)} /* ── Healthcare Accent (subtle in Admin grids) ── */ body.rosie-alive .admin-grid .card{transition:transform .3s var(--ease-bounce),border-color .2s} body.rosie-alive .admin-grid .card:hover{transform:translateY(-2px);border-color:var(--sage)} /* ── Paint Tool Magnetic Snap Feel ── */ body.rosie-alive .paint-tool{transition:all .2s var(--ease-bounce)} body.rosie-alive .paint-tool:hover{transform:scale(1.15);box-shadow:0 0 16px var(--teal-dim)} /* ════════════════ Ende r150: Lebendige UX ════════════════ */ /* ════════════════ TimeFlow v2 (2026-07-06): Tagesablauf-Panorama ════════════════ * Kompletter Neubau der r157/r159-Schicht-Flow-Grafik (Mandat Flo): foto- * realistisch anmutende Alpen-Szene (SVG-Panorama aus tasksTab.js: Bergkämme, * See-Spiegelung, Talnebel, Chalet, prozedurale Sterne) + Tagesablauf-Zeitleiste * mit klickbaren Task-Punkten + Ansicht-Umschalter für Admin/Planer/Verantwortliche. * Alles CSS/SVG, keine Bild-Assets. Reduced-Motion deaktiviert alle Loops. */ .task-flow-card{position:relative;border:none;border-radius:16px; box-shadow:0 18px 60px rgba(4,10,30,.28), 0 6px 16px rgba(4,10,30,.14); min-height:400px} /* ── Himmel: 9 Tagesphasen, feiner abgestufte Verläufe (Rayleigh-Look) ── */ .tf-sky{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:16px; background:linear-gradient(180deg,#1a2540 0%,#2b3a6a 35%,#3d5294 60%,#5e74b8 90%,#8b9dcf 100%); transition:background 1.5s ease} .tf-sky.is-dawn {background:linear-gradient(180deg,#1f2a5e 0%,#3a3474 18%,#6c4b6e 38%,#a8636a 55%,#d88a62 70%,#f2ae6e 84%,#ffd9a0 100%)} .tf-sky.is-morning {background:linear-gradient(180deg,#3a62a4 0%,#4a73b0 22%,#6a98cc 45%,#8fb6df 65%,#c5dcef 84%,#ffedc9 100%)} .tf-sky.is-day {background:linear-gradient(180deg,#2f6fb0 0%,#3c7fb8 20%,#5b9bd2 42%,#82b6df 64%,#b4d4ec 86%,#e8f4fa 100%)} .tf-sky.is-noon {background:linear-gradient(180deg,#1f64a2 0%,#2b6ea6 18%,#4a8dc5 40%,#7eb4df 62%,#c0dbef 85%,#fef9e0 100%)} .tf-sky.is-afternoon {background:linear-gradient(180deg,#33629a 0%,#3c6da0 20%,#5a8dc4 42%,#94b3da 62%,#d9b58a 84%,#f6cf92 100%)} .tf-sky.is-evening {background:linear-gradient(180deg,#1c2450 0%,#29325b 16%,#5d3e6d 34%,#a85572 52%,#d97954 70%,#f3a256 85%,#ffca7a 100%)} .tf-sky.is-dusk {background:linear-gradient(180deg,#0b0f30 0%,#11163a 18%,#2c2b5b 38%,#5a3268 56%,#95425e 74%,#c66c4d 90%,#e8935e 100%)} .tf-sky.is-night {background:linear-gradient(180deg,#030614 0%,#050a1f 22%,#0d1a3a 45%,#1a2d5a 68%,#243d75 88%,#345494 100%)} .tf-sky.is-deep-night{background:linear-gradient(180deg,#000004 0%,#000007 24%,#050a1f 48%,#0a1535 70%,#0f1f4a 90%,#18306a 100%)} /* ── Prozeduraler Sternenhimmel (SVG aus JS) + Milchstrasse ── */ .tf-stars-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1; pointer-events:none;opacity:0;transition:opacity 2s ease} .tf-sky.is-night ~ .tf-stars-svg, .tf-sky.is-deep-night ~ .tf-stars-svg{opacity:1} .tf-sky.is-dusk ~ .tf-stars-svg{opacity:.7} .tf-sky.is-dawn ~ .tf-stars-svg{opacity:.3} .tf-star-tw{animation:tf-twinkle 4s ease-in-out infinite} @keyframes tf-twinkle{0%,100%{opacity:.25} 50%{opacity:1}} /* ── Panorama-Szene (SVG aus JS) ── */ .tf-scene-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2; pointer-events:none;border-radius:16px} .tf-cloud-g{animation:tf-drift2 46s ease-in-out infinite alternate;will-change:transform} .tf-cloud-g.tf-cloud-b{animation-duration:64s;animation-delay:-18s} .tf-cloud-g.tf-cloud-c{animation-duration:82s;animation-delay:-40s} @keyframes tf-drift2{from{transform:translateX(-46px)} to{transform:translateX(46px)}} .tf-waves path{animation:tf-shimmer 7s ease-in-out infinite} .tf-waves path:nth-child(2){animation-delay:-2.4s} .tf-waves path:nth-child(3){animation-delay:-4.1s} .tf-waves path:nth-child(4){animation-delay:-5.6s} @keyframes tf-shimmer{0%,100%{opacity:.16} 50%{opacity:.55}} .tf-rays{animation:tf-rays-breathe 9s ease-in-out infinite} @keyframes tf-rays-breathe{0%,100%{opacity:.10} 50%{opacity:.22}} /* ── Sonne & Mond (fotorealistischere Körper, wandern auf dem Bogen) ── */ .tf-celestial{position:absolute;width:88px;height:88px;z-index:4;pointer-events:none; transition:left 2s cubic-bezier(.4,0,.2,1), top 2s cubic-bezier(.4,0,.2,1); animation:tf-celestial-sway 9s ease-in-out infinite} @keyframes tf-celestial-sway{0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(4px)}} .tf-sun{width:100%;height:100%;border-radius:50%;position:relative; background:radial-gradient(circle at 34% 32%, #fffdf2 0%, #fff3c4 18%, #ffe28e 40%, #ffc554 66%, #ff9d2e 86%, #ff861c 100%); box-shadow: 0 0 34px 6px rgba(255,224,140,.95), 0 0 90px 22px rgba(255,190,80,.6), 0 0 170px 60px rgba(255,150,50,.34), 0 0 300px 120px rgba(255,120,40,.16), inset -10px -12px 26px rgba(224,110,20,.45), inset 6px 8px 18px rgba(255,255,240,.65); animation:tf-sun-pulse 4s ease-in-out infinite} @keyframes tf-sun-pulse{0%,100%{filter:brightness(1) saturate(1)} 50%{filter:brightness(1.07) saturate(1.12)}} .tf-sun::before{content:'';position:absolute;inset:-34%;border-radius:50%;z-index:-1; background:conic-gradient(from 0deg, transparent 0deg, rgba(255,224,150,.32) 8deg, transparent 13deg, transparent 30deg, rgba(255,224,150,.26) 38deg, transparent 43deg, transparent 60deg, rgba(255,224,150,.32) 68deg, transparent 73deg, transparent 90deg, rgba(255,224,150,.26) 98deg, transparent 103deg, transparent 120deg, rgba(255,224,150,.32) 128deg, transparent 133deg, transparent 150deg, rgba(255,224,150,.26) 158deg, transparent 163deg, transparent 180deg, rgba(255,224,150,.32) 188deg, transparent 193deg, transparent 210deg, rgba(255,224,150,.26) 218deg, transparent 223deg, transparent 240deg, rgba(255,224,150,.32) 248deg, transparent 253deg, transparent 270deg, rgba(255,224,150,.26) 278deg, transparent 283deg, transparent 300deg, rgba(255,224,150,.32) 308deg, transparent 313deg, transparent 330deg, rgba(255,224,150,.26) 338deg, transparent 343deg, transparent 360deg); animation:tf-rays-rotate 30s linear infinite} @keyframes tf-rays-rotate{from{transform:rotate(0deg)} to{transform:rotate(360deg)}} .tf-sun::after{content:'';position:absolute;inset:14%;border-radius:50%; background:radial-gradient(circle at 40% 36%, rgba(255,255,250,.85) 0%, rgba(255,244,200,.25) 45%, transparent 70%)} .tf-moon{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden; background:radial-gradient(circle at 36% 30%, #fffef8 0%, #f4efdb 24%, #ddd6ba 48%, #b3ac93 72%, #837d67 92%, #5f5a48 100%); box-shadow: 0 0 26px 4px rgba(240,236,205,.75), 0 0 70px 18px rgba(205,214,255,.42), 0 0 150px 50px rgba(160,180,240,.24), inset -12px -14px 30px rgba(52,52,64,.55), inset 5px 6px 14px rgba(255,255,248,.5); animation:tf-moon-drift 22s ease-in-out infinite} @keyframes tf-moon-drift{0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)}} .tf-moon-crater{position:absolute;border-radius:50%; background:radial-gradient(circle at 38% 34%, rgba(120,118,96,.4), rgba(84,82,64,.22) 60%, transparent 100%); box-shadow:inset 1.5px 1.5px 4px rgba(44,44,36,.4), inset -1px -1px 2px rgba(255,255,240,.18)} .tf-moon-crater.c1{width:20px;height:20px;top:20%;left:54%} .tf-moon-crater.c2{width:12px;height:12px;top:60%;left:26%} .tf-moon-crater.c3{width:9px;height:9px;top:42%;left:14%} .tf-moon-crater.c4{width:14px;height:14px;top:68%;left:60%} /* ── Tagesablauf-Zeitleiste (Bogen + Zeiten + Task-Punkte) ── */ .tf-tl-arc{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none} .tf-tl-arc path{fill:none;stroke-linecap:round} .tf-tl-arc-rest{stroke:rgba(255,255,255,.30);stroke-width:2px;stroke-dasharray:.2 2.2} .tf-tl-arc-done{stroke:rgba(255,232,170,.95);stroke-width:2.5px; filter:drop-shadow(0 0 5px rgba(255,215,120,.8))} .tf-tl-time{position:absolute;z-index:5;font-size:var(--fs-12);font-weight:700;color:#fff; background:rgba(6,12,30,.42);border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); padding:2px 8px;border-radius:10px;letter-spacing:.4px; text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none} .tf-tl-start{left:calc(6% - 16px);top:calc(66% + 12px)} .tf-tl-end{left:calc(94% - 26px);top:calc(66% + 12px)} .tf-tl-dot{position:absolute;z-index:6;width:16px;height:16px;border-radius:50%; border:2px solid rgba(255,255,255,.9);background:rgba(255,255,255,.28); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center; box-shadow:0 0 10px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.35); transition:transform .18s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1))} .tf-tl-dot:hover,.tf-tl-dot:focus{transform:scale(1.45);outline:none;z-index:7} .tf-tl-dot span{width:6px;height:6px;border-radius:50%;background:#fff;display:block} .tf-tl-dot.is-done{border-color:rgba(140,235,170,.95);background:rgba(48,160,90,.55)} .tf-tl-dot.is-done span{background:#bdf5cf} .tf-tl-dot.is-in_progress{border-color:rgba(150,205,255,.95);background:rgba(60,130,220,.5)} .tf-tl-dot.is-in_progress span{background:#cde6ff;animation:tf-dot-pulse 1.8s ease-in-out infinite} .tf-tl-dot.is-returned{border-color:rgba(255,170,150,.95);background:rgba(200,80,60,.5)} .tf-tl-dot.is-open span{animation:tf-dot-pulse 2.6s ease-in-out infinite} @keyframes tf-dot-pulse{0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.7}} /* ── Kopf: Titel + (Alles-Seher) Ansicht-Umschalter + Fortschritt ── */ .tf-header{position:absolute;left:16px;top:12px;right:16px;z-index:8; color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.35); display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap} .tf-shift-title{font-size:16px;font-weight:800;line-height:1.2;letter-spacing:.2px} .tf-shift-sub{font-size:var(--fs-12);opacity:.94;margin-top:2px;font-weight:500} .tf-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px} .tf-progress-box{background:rgba(6,12,30,.40);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.20);padding:6px 12px;border-radius:14px;font-size:var(--fs-12);font-weight:600} .tf-progress-bar{width:130px;height:5px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden;margin-top:4px} .tf-progress-fill{height:100%;background:linear-gradient(90deg,#ffd76b,#ff8533);border-radius:3px;transition:width 1s ease} .tf-filterbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end; pointer-events:auto} .tf-filterbar .tf-filter-select{font-size:var(--fs-12);font-weight:600;color:#fff; background:rgba(6,12,30,.46);border:1px solid rgba(255,255,255,.26);border-radius:12px; padding:5px 9px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); cursor:pointer;max-width:180px;text-overflow:ellipsis} .tf-filterbar .tf-filter-select:hover,.tf-filterbar .tf-filter-select:focus{ border-color:rgba(255,255,255,.55);outline:none;background:rgba(10,18,42,.6)} .tf-filterbar .tf-filter-select option{color:#1a1f3a;background:#fff} /* Standalone-Position (Leer-/Prompt-Zustände ohne .tf-header) */ .task-flow-card > .tf-filterbar{position:absolute;top:12px;right:16px;z-index:9} /* ── Task-Karten (Glass, klickbar, Prioritäts-Kante, Chips) ── */ .tf-tasks{position:absolute;right:18px;top:64px;bottom:26px;width:min(52%, 380px);z-index:7; display:flex;flex-direction:column;gap:8px;overflow:hidden;padding-right:4px} .tf-tasks.tf-tasks-wide{width:min(58%, 430px)} .tf-task{background:rgba(255,255,255,.20);backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5); border:1px solid rgba(255,255,255,.30);border-left:3px solid rgba(255,255,255,.35); border-radius:12px;padding:9px 12px;color:#fff;font-size:12px;line-height:1.35; box-shadow:0 8px 28px rgba(2,8,24,.28), inset 0 1px 0 rgba(255,255,255,.28); text-shadow:0 1px 3px rgba(0,0,0,.4); display:flex;align-items:center;gap:10px;cursor:pointer; transition:transform .16s ease, background .16s ease; animation:tf-pop 0.7s cubic-bezier(.34,1.56,.64,1) both;position:relative} .tf-task:hover{transform:translateX(-3px);background:rgba(255,255,255,.30)} .tf-task.tf-task-empty{cursor:default;text-align:center;display:block;font-size:var(--fs-12)} .tf-task.tf-task-empty:hover{transform:none;background:rgba(255,255,255,.20)} .tf-sky.is-day ~ .tf-tasks .tf-task, .tf-sky.is-noon ~ .tf-tasks .tf-task, .tf-sky.is-morning ~ .tf-tasks .tf-task{ background:rgba(255,255,255,.34);color:#14203a;text-shadow:none;border-color:rgba(255,255,255,.55)} .tf-sky.is-day ~ .tf-tasks .tf-task:hover, .tf-sky.is-noon ~ .tf-tasks .tf-task:hover, .tf-sky.is-morning ~ .tf-tasks .tf-task:hover{ background:rgba(255,255,255,.46)} .tf-task.is-prio-urgent{border-left-color:#ff5c5c} .tf-task.is-prio-high{border-left-color:#ffb020} .tf-task.is-prio-low{border-left-color:rgba(160,190,255,.7)} .tf-task .tf-task-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0; background:rgba(255,255,255,.22);box-shadow:inset 0 1px 2px rgba(255,255,255,.3)} .tf-task .tf-task-body{flex:1;min-width:0;overflow:hidden} .tf-task .tf-task-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tf-task .tf-task-meta{font-size:var(--fs-12);opacity:.82;margin-top:1px} .tf-task .tf-task-shiftchip{flex-shrink:0;min-width:20px;height:20px;border-radius:6px; display:flex;align-items:center;justify-content:center;padding:0 5px; font-size:var(--fs-12);font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45); box-shadow:0 1px 4px rgba(0,0,0,.3)} .tf-task .tf-task-assignee{flex-shrink:0;width:24px;height:24px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:var(--fs-12);font-weight:800;letter-spacing:.3px; background:rgba(6,12,30,.45);border:1px solid rgba(255,255,255,.4);color:#fff;text-shadow:none} .tf-sky.is-day ~ .tf-tasks .tf-task .tf-task-assignee, .tf-sky.is-noon ~ .tf-tasks .tf-task .tf-task-assignee, .tf-sky.is-morning ~ .tf-tasks .tf-task .tf-task-assignee{ background:rgba(20,32,58,.75)} .tf-task.is-done{opacity:.45;text-decoration:line-through;animation:tf-fade-down 0.8s ease forwards} .tf-task.is-new{animation:tf-pop-bounce 0.9s cubic-bezier(.34,1.56,.64,1) both} .tf-task.is-current{border-color:rgba(255,200,90,.7);box-shadow:0 8px 30px rgba(255,170,60,.45), inset 0 1px 0 rgba(255,255,255,.35); animation:tf-glow 2.5s ease-in-out infinite} .tf-more-hint{color:#fff;text-align:center;font-size:var(--fs-12);opacity:.75;text-shadow:0 1px 3px rgba(0,0,0,.4)} @keyframes tf-pop{0%{opacity:0;transform:translateY(-20px) scale(.85)} 100%{opacity:1;transform:translateY(0) scale(1)}} @keyframes tf-pop-bounce{ 0%{opacity:0;transform:translateY(-32px) scale(.7)} 50%{opacity:1;transform:translateY(4px) scale(1.04)} 70%{transform:translateY(-2px) scale(.99)} 100%{transform:translateY(0) scale(1)} } @keyframes tf-fade-down{0%{opacity:.7;transform:translateY(0)} 100%{opacity:.2;transform:translateY(12px) scale(.95)}} @keyframes tf-glow{ 0%,100%{box-shadow:0 8px 30px rgba(255,170,60,.45), inset 0 1px 0 rgba(255,255,255,.35)} 50% {box-shadow:0 8px 40px rgba(255,200,90,.7), inset 0 1px 0 rgba(255,255,255,.55)} } /* ── Leer-/Prompt-Zustand ── */ .tf-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;color:#fff;z-index:6;padding:20px;text-shadow:0 2px 8px rgba(0,0,0,.5)} .tf-empty .tf-empty-icon{font-size:48px;margin-bottom:8px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))} .tf-empty .tf-empty-title{font-size:16px;font-weight:700;margin-bottom:4px} .tf-empty .tf-empty-sub{font-size:12px;opacity:.88;max-width:360px} /* ── Lebendige Layer (r159 übernommen: Vögel/Blitz-Sterne/Sternschnuppe) ── */ .tf-stars-flash{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity 2s ease} .tf-sky.is-night ~ .tf-stars-flash, .tf-sky.is-deep-night ~ .tf-stars-flash, .tf-sky.is-dusk ~ .tf-stars-flash{opacity:1} .tf-stars-flash .tf-flash{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff; box-shadow:0 0 4px #fff, 0 0 10px rgba(255,255,255,.7);animation:tf-flash 6s ease-in-out infinite;opacity:0} @keyframes tf-flash{ 0%,40%,60%,100%{opacity:0;transform:scale(.4)} 48%,52%{opacity:1;transform:scale(1.6)} } .tf-birds{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity 2s ease} .tf-sky.is-morning ~ .tf-birds, .tf-sky.is-day ~ .tf-birds, .tf-sky.is-noon ~ .tf-birds, .tf-sky.is-afternoon ~ .tf-birds, .tf-sky.is-dawn ~ .tf-birds{opacity:.75} .tf-bird{position:absolute;width:24px;height:14px;left:0;animation:tf-bird-fly 75s linear infinite;will-change:transform} .tf-bird svg{width:100%;height:100%;display:block;transform-origin:center;animation:tf-bird-flap .45s ease-in-out infinite alternate} @keyframes tf-bird-fly{ 0% {transform:translate(-12vw,0)} 45% {transform:translate(40vw,-8px)} 60% {transform:translate(58vw,4px)} 100% {transform:translate(112vw,-3px)} } @keyframes tf-bird-flap{0%{transform:scaleY(1)} 100%{transform:scaleY(.55)}} .tf-shootingstar{position:absolute;width:90px;height:2px;z-index:2;border-radius:2px;opacity:0;pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); filter:drop-shadow(0 0 4px rgba(255,255,255,.7)); animation:tf-shoot 18s ease-in infinite} .tf-sky.is-night ~ .tf-shootingstar, .tf-sky.is-deep-night ~ .tf-shootingstar{display:block} .tf-sky:not(.is-night):not(.is-deep-night) ~ .tf-shootingstar{display:none} @keyframes tf-shoot{ 0%,82%,100%{opacity:0;transform:translate(-15vw,-2vh) rotate(-22deg)} 84%{opacity:1} 92%{opacity:1;transform:translate(45vw,22vh) rotate(-22deg)} 100%{opacity:0;transform:translate(70vw,35vh) rotate(-22deg)} } /* ── Datums-Navigation + Swipe-Hinweis ── */ .tf-datenav{position:absolute;left:14px;bottom:12px;z-index:8; display:flex;align-items:center;gap:6px; background:rgba(6,12,30,.40);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); border-radius:14px;padding:4px 6px;font-size:var(--fs-12);color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45)} .tf-datenav button{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22); color:#fff;width:24px;height:24px;border-radius:8px;font-size:13px;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0; font-family:inherit;transition:background .15s ease} .tf-datenav button:hover, .tf-datenav button:focus{background:rgba(255,255,255,.3);outline:none} .tf-datenav .tf-datelabel{padding:0 6px;font-weight:600;min-width:96px;text-align:center;white-space:nowrap;letter-spacing:.2px} .tf-datenav .tf-today-btn{padding:2px 10px;width:auto;font-size:var(--fs-12);border-radius:10px;font-weight:600;margin-left:2px} .tf-swipe-hint{position:absolute;right:18px;bottom:14px;z-index:8; font-size:var(--fs-12);color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.5); pointer-events:none;letter-spacing:.4px} /* ════════════════ Bauplan Paket 6 (6b): AMBIENT-BAND ════════════════ Default-Ansicht (docs/konzepte/DRAFT_UI-UX-GESAMTKONZEPT_v2_2026-08-12.md §1.2, Flo- Entscheid E6): kompaktes ~120px-Band statt der vollen Panorama-Szene. Himmel-Verlauf ist der FIXE Marken-Farbweg Gold→Coral→Plum (s. tasksTabAmbientBand.js-Kopfkommentar für die Begründung, warum als SVG-Literal statt CSS-Variable) — hier nur die UMLIEGENDE UI (Scrim/Label/Hint/Kollaps-Button + das re-themte Kopf/Task/Datumsnav darunter). */ .task-flow-card .tf-amb{all:unset;display:block;position:relative;width:100%;height:120px; border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 8px 24px rgba(36,22,64,.22); -webkit-tap-highlight-color:transparent} .task-flow-card .tf-amb:focus-visible{outline:3px solid var(--teal, #14b8a6);outline-offset:2px} .tf-amb-svg{display:block;width:100%;height:100%} /* Text-Kontrast-Schutzband (Auftragspunkt 5) — palettenunabhängig, deckt die Label-Zeile unabhängig davon ab, wo genau Sonne/Mond/Silhouette gerade liegen. */ .tf-amb-scrim{position:absolute;left:0;right:0;bottom:0;height:56%;pointer-events:none; background:linear-gradient(to top, rgba(10,8,24,.62), rgba(10,8,24,0))} .tf-amb-label{position:absolute;left:14px;bottom:10px;right:78px;color:#fff;font-weight:600; font-size:13px;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.55); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tf-amb-hint{position:absolute;right:12px;bottom:10px;color:#fff;font-size:var(--fs-12); font-weight:600;background:rgba(10,8,24,.42);border:1px solid rgba(255,255,255,.28); border-radius:999px;padding:3px 10px;text-shadow:none;pointer-events:none;white-space:nowrap} .tf-amb-celestial{transition:transform 2s cubic-bezier(.4,0,.2,1)} /* Kollaps-Button (Panorama-Modus) — läuft im .tf-datenav-Flexrow mit (s. tasksTabTimeflow.js _tfDateNavHtml extraHtml), identisches Styling wie das dortige .tf-today-btn-Pendant. */ .tf-amb-collapse-btn{padding:2px 10px;width:auto;font-size:var(--fs-12);border-radius:10px; font-weight:600;margin-left:2px;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;font-family:inherit} .tf-amb-collapse-btn:hover,.tf-amb-collapse-btn:focus{background:rgba(255,255,255,.3);outline:none} /* ── Band-Modus: Kopf/Task-Liste/Datumsnav sind hier NORMALER DOKUMENT-FLUSS unterhalb des Bandes (statt Panorama-Overlay) — dieselben Bausteine (contentHtml, s. tasksTabTimeflow.js), nur re-themt auf die App-Tokens statt Glas-über-Foto-Optik, weil sie jetzt auf der normalen Karten-Fläche statt auf dem Himmel-SVG sitzen. Der Karten- Rahmen selbst bekommt hier — anders als im Panorama-Modus, wo `.tf-sky` die komplette Fläche füllt — die ganz normale `.card`-Optik des restlichen App-Shells (panel/border), damit Kopf/Task-Liste nicht wie freischwebender Text auf der Seiten-Hintergrundfarbe wirken. Das Band selbst verliert dabei seinen eigenen Radius/Schatten (sitzt flächenbündig oben in diesem Rahmen statt als separat schwebende Kachel). */ .task-flow-card.tf-mode-band{min-height:0;box-shadow:var(--shadow);background:var(--panel); border:1px solid var(--panel-border);border-radius:16px;overflow:hidden} .task-flow-card.tf-mode-band .tf-amb{border-radius:0;box-shadow:none} .tf-band-content{position:relative} .task-flow-card.tf-mode-band .tf-header{position:static;color:var(--text);text-shadow:none; padding:12px 14px 0;flex-direction:column;align-items:stretch;gap:8px} .task-flow-card.tf-mode-band .tf-header-right{flex-direction:row;justify-content:space-between; align-items:center;width:100%} .task-flow-card.tf-mode-band .tf-progress-box{background:var(--bg);border:1px solid var(--panel-border); color:var(--text)} .task-flow-card.tf-mode-band .tf-progress-bar{background:var(--panel-border)} .task-flow-card.tf-mode-band .tf-filterbar .tf-filter-select{background:var(--bg); border:1px solid var(--panel-border);color:var(--text)} .task-flow-card.tf-mode-band .tf-filterbar .tf-filter-select option{color:var(--text);background:var(--panel)} .task-flow-card.tf-mode-band .tf-tasks{position:static;width:auto;right:auto;bottom:auto;top:auto; padding:10px 14px 4px;gap:8px;max-height:none;overflow:visible} .task-flow-card.tf-mode-band .tf-task{background:var(--bg);color:var(--text);text-shadow:none; border-color:var(--panel-border);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none} .task-flow-card.tf-mode-band .tf-task:hover{transform:none;background:var(--panel)} .task-flow-card.tf-mode-band .tf-task .tf-task-icon{background:var(--panel)} .task-flow-card.tf-mode-band .tf-task .tf-task-assignee{background:var(--panel-border);color:var(--text)} .task-flow-card.tf-mode-band .tf-empty{position:static;color:var(--text);text-shadow:none; padding:20px 14px;min-height:0} .task-flow-card.tf-mode-band .tf-empty .tf-empty-icon{filter:none} .task-flow-card.tf-mode-band .tf-empty .tf-empty-sub{color:var(--muted)} .task-flow-card.tf-mode-band .tf-datenav{position:static;width:auto;margin:0 14px 12px; justify-content:space-between;background:var(--bg);border:1px solid var(--panel-border); color:var(--text);text-shadow:none} .task-flow-card.tf-mode-band .tf-datenav button{background:var(--panel);border-color:var(--panel-border);color:var(--text)} .task-flow-card.tf-mode-band .tf-swipe-hint{display:none} /* für den Overlay-Kontext designt, im Band-Flow ohne Sinn */ /* ════════════════ Ende Ambient-Band ════════════════ */ /* ════════════════ Bauplan Paket M-C (2026-08-20): Aufgaben-Tab V1-Kartenstil ════════════════ NUR CSS. `tasksTabAmbientBand.js`/`tasksTabScene.js`/`tasksTabTimeflow.js` bleiben laut Bauplan §4/§10 „PIXELGENAU"/byte-identisch — das bereits bestehende .tf-mode-band-Re-Theming (Paket 6b, oben) liefert exakt die DOM-Struktur/Klassen, die hier nur visuell auf den V1-Kartenstil (Icon-Kreis mit Marken-Akzent aus dem --heute-*-Namespace, ruhigere Radien/ Abstände) gehoben wird — mobile-only (html.view-mobile), Desktop bleibt Pixel für Pixel unangetastet. Bewusst NICHT die bestehenden Emoji (⏰/📄/✨/🌙/☀️/🏥/🔭) aus tasksTabTimeflow.js entfernt, obwohl §1.2 das für „bestehende Emoji-Reste im Mobile-Pfad" generell verlangt — diese Datei gehört zu den drei explizit geschützten, ein Textänderung wäre keine byte-identische Datei mehr. Scope-Ausnahme dokumentiert, s. BACKLOG-Nachtrag „Paket M-C". Ebenso bewusst NICHT `.tf-sky`/`.tf-scene-svg`/`.tf-celestial` (Panorama-Modus) angefasst — das IST die geschützte Ambient-Band-Szene selbst, nicht die Aufgabenliste. */ html.view-mobile .task-flow-card.tf-mode-band{border-radius:var(--radius-lg)} html.view-mobile .task-flow-card.tf-mode-band .tf-tasks{gap:9px} html.view-mobile .task-flow-card.tf-mode-band .tf-task{ border-radius:var(--radius);border-width:1px;padding:10px 12px;gap:11px; transition:transform .16s ease, background .16s ease, box-shadow .16s ease; } html.view-mobile .task-flow-card.tf-mode-band .tf-task:hover, html.view-mobile .task-flow-card.tf-mode-band .tf-task:active{ background:var(--heute-mist);border-color:var(--heute-coral); } html.view-mobile .task-flow-card.tf-mode-band .tf-task .tf-task-icon{ width:30px;height:30px;background:var(--heute-mist);color:var(--heute-plum);font-size:15px; } html.view-mobile .task-flow-card.tf-mode-band .tf-task.is-current .tf-task-icon{ background:rgba(255,106,61,.16);color:var(--heute-coral); } html.view-mobile .task-flow-card.tf-mode-band .tf-task.is-prio-urgent{border-left-color:var(--heute-coral)} html.view-mobile .task-flow-card.tf-mode-band .tf-task.is-prio-high{border-left-color:var(--heute-gold)} html.view-mobile .task-flow-card.tf-mode-band .tf-task .tf-task-assignee{ background:var(--heute-mist);color:var(--heute-plum);border-color:transparent; } html.view-mobile .task-flow-card.tf-mode-band .tf-datenav .tf-today-btn{ background:var(--heute-coral);color:#fff;border-color:var(--heute-coral); } /* ── Planer/Admin: reines Farb-/Akzent-Restyling der bestehenden Zeitplan-Matrix (tasksTab.js renderTasksCalendar/_renderTasksWeekView/_renderTasksDayView) — keine Struktur-Änderung, kein JS-Touch nötig (Bauplan §4: „genügt reines V1-Restyling"). */ html.view-mobile .tasks-cell:hover{background:var(--heute-mist)} html.view-mobile .tasks-cell.has-tasks{background:rgba(255,106,61,.08)} html.view-mobile .tasks-cell.is-today{box-shadow:inset 0 0 0 2px var(--heute-coral)} html.view-mobile .tasks-cell .tc-count{background:var(--heute-coral)} html.view-mobile .tasks-cell .tc-count.tc-returned{background:var(--heute-gold);color:var(--heute-plum-deep)} /* ════════════════ Ende Paket M-C ════════════════ */ /* ── Responsive ── */ @media (max-width: 768px){ .task-flow-card{min-height:400px} .tf-celestial{width:62px;height:62px} /* Kopf stapelt: Titel-Zeile, darunter Umschalter+Fortschritt nebeneinander — sonst überlappte die Filterbar die Task-Karten (Mobile-Verifikation 2026-07-07) */ .tf-header{flex-direction:column;align-items:stretch;gap:6px} .tf-header-right{flex-direction:row;justify-content:space-between;align-items:center;width:100%;flex-wrap:wrap;gap:6px} .tf-progress-box{padding:4px 8px;font-size:var(--fs-12)} .tf-tasks, .tf-tasks.tf-tasks-wide{width:auto;left:18px;right:18px;top:186px;bottom:60px} .tf-task{font-size:var(--fs-12);padding:7px 10px} .tf-shift-title{font-size:13px} .tf-progress-bar{width:80px} .tf-header-right{align-items:flex-end} .tf-filterbar .tf-filter-select{max-width:140px;font-size:var(--fs-12)} .tf-tl-time{font-size:var(--fs-12)} .tf-swipe-hint{font-size:var(--fs-12);right:14px;bottom:11px} .tf-datenav{left:10px;bottom:9px;font-size:var(--fs-12)} .tf-datenav .tf-datelabel{min-width:78px;padding:0 4px} .tf-datenav button{width:22px;height:22px;font-size:12px} .tf-bird{width:18px;height:11px} /* Bauplan Paket 6 (6b) — Band bleibt weit über der 44px-Touch-Ziel-Norm, wird auf sehr schmalen Viewports aber etwas kompakter (Label/Hint-Text hätten sonst kaum Platz). Paket 6/3-Nachzug (2026-08-18, R-32/FN-89-Fund): .tf-amb-hint blieb hier unter der 12px-Mindestschrift (Grundschrift-Konvention, Pflegepersonal-Lesbarkeit auf Mobil- geräten) — auf 12px korrigiert (identisch zum Default var(--fs-12) UND zum Geschwister .tf-amb-label direkt darüber, das im selben Block bereits korrekt bei 12px steht), nur das Padding bleibt kompakter. */ .task-flow-card .tf-amb{height:96px} .tf-amb-label{font-size:12px;right:66px} .tf-amb-hint{font-size:12px;padding:2px 8px} } @media (prefers-reduced-motion: reduce){ .tf-celestial, .tf-moon, .tf-sun, .tf-sun::before, .tf-bird, .tf-bird svg, .tf-shootingstar, .tf-stars-flash .tf-flash, .tf-star-tw, .tf-cloud-g, .tf-waves path, .tf-rays, .tf-tl-dot span, .tf-task.is-current{animation:none !important} .tf-amb-celestial{transition:none !important} } /* ════════════════ Ende TimeFlow v2 ════════════════ */ /* ════════════════ r160: Task-Presets + QMS-Rebuild ════════════════ Silicon-Valley-Pass — durchgängige Tokens (CSS-Variablen), klare Hierarchie, keyboard-tauglich, mobile-first. Modal nutzt Backdrop-Blur + ESC-Close. QMS-Viewer ist Fullscreen mit dunklem Backdrop, paged via Browser-PDF-Viewer (PDF) bzw. nativem Scroll-Container (DOCX/mammoth.js). */ .r160-preset-list{display:flex;flex-direction:column} .r160-preset-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--panel-border);transition:background .15s ease} .r160-preset-row:first-child{border-top:none} .r160-preset-row:hover{background:var(--bg)} .r160-preset-main{flex:1;min-width:0} .r160-preset-title{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;line-height:1.3} .r160-preset-desc{font-size:var(--fs-12);color:var(--muted);margin-top:2px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .r160-preset-meta{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap} .r160-preset-meta:empty{display:none} .r160-preset-actions{display:flex;gap:4px;flex-shrink:0} .r160-meta{font-size:var(--fs-12);color:var(--muted)} .r160-prio{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;font-size:var(--fs-12);flex-shrink:0} .r160-prio-urgent{background:rgba(239,68,68,.15);color:#dc2626} .r160-prio-high{background:rgba(245,158,11,.15);color:#d97706} .r160-prio-normal{background:var(--teal-dim);color:var(--teal)} .r160-prio-low{background:rgba(148,163,184,.15);color:#64748b} /* Preset-Editor Modal */ .r160-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;animation:r160-fade-in .18s ease} @keyframes r160-fade-in{from{opacity:0}to{opacity:1}} .r160-modal{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35);width:100%;max-width:580px;max-height:90vh;display:flex;flex-direction:column;animation:r160-pop-in .22s cubic-bezier(.34,1.56,.64,1)} @keyframes r160-pop-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} .r160-modal-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--panel-border)} .r160-modal-title{font-size:15px;font-weight:700;color:var(--text);flex:1;display:flex;align-items:center;gap:8px} .r160-modal-close{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 10px;border-radius:8px;line-height:1} .r160-modal-close:hover{background:var(--bg);color:var(--text)} .r160-modal-body{padding:16px 18px;overflow-y:auto;flex:1} .r160-modal-foot{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--panel-border);justify-content:flex-end} .r160-lbl{display:block;font-size:var(--fs-12);font-weight:600;color:var(--text-secondary,#475569);margin:8px 0 4px} .r160-input{width:100%;font-size:12px;padding:7px 10px;border-radius:6px;border:1px solid var(--panel-border);background:var(--bg);color:var(--text);font-family:inherit;box-sizing:border-box} .r160-input:focus{outline:2px solid var(--teal);outline-offset:-1px;border-color:transparent} textarea.r160-input{resize:vertical;min-height:60px;line-height:1.45} .r160-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:4px} .r160-row > div{min-width:0} /* QMS-Doc Picker im Preset-Editor */ .r160-doc-picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .r160-doc-pick{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg);border:1px solid var(--panel-border);border-radius:6px;font-size:var(--fs-12);cursor:pointer;transition:background .12s ease,border-color .12s ease} .r160-doc-pick:hover{background:var(--teal-dim);border-color:var(--teal)} .r160-doc-pick.is-on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);font-weight:600} .r160-doc-pick input{margin:0} /* Verlinkte Docs im Task-Editor */ .r160-doc-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--teal-dim);color:var(--teal);border:1px solid var(--teal);border-radius:14px;font-size:var(--fs-12);cursor:pointer;margin:2px 4px 2px 0;transition:transform .12s ease} .r160-doc-chip:hover{transform:translateY(-1px)} .r160-doc-chip.is-missing{background:var(--bg);color:var(--muted);border-color:var(--panel-border);cursor:default} /* QMS-Tab */ .r160-qms-upload{margin:0;padding:24px;border-bottom:1px solid var(--panel-border);background:linear-gradient(180deg, var(--bg) 0%, var(--panel) 100%);transition:background .15s ease,border-color .15s ease;text-align:center} .r160-qms-upload.is-drag{background:var(--teal-dim);border-color:var(--teal)} .r160-qms-upload-inner{max-width:380px;margin:0 auto} .r160-qms-upload-icon{font-size:32px;color:var(--teal);margin-bottom:6px;opacity:.8} .r160-qms-list{display:flex;flex-direction:column} .r160-qms-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--panel-border);transition:background .12s ease} .r160-qms-row:hover{background:var(--bg)} .r160-qms-main{flex:1;min-width:0} .r160-qms-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.3;display:flex;align-items:center;gap:6px} .r160-qms-desc{font-size:var(--fs-12);color:var(--muted);margin-top:3px;line-height:1.4} .r160-qms-meta{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap} .r160-qms-actions{display:flex;gap:6px;flex-shrink:0} /* QMS-Viewer (Fullscreen) */ .qms-viewer-overlay{position:fixed;inset:0;background:rgba(8,12,24,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9500;display:none;align-items:stretch;justify-content:center;padding:24px} .qms-viewer-overlay.is-open{display:flex;animation:r160-fade-in .2s ease} .qms-viewer-shell{background:var(--panel);border-radius:14px;box-shadow:0 32px 80px rgba(0,0,0,.5);width:100%;max-width:1100px;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.08)} .qms-viewer-head{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--panel-border);background:var(--panel)} .qms-viewer-title{font-size:15px;font-weight:700;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qms-viewer-meta{font-size:var(--fs-12);color:var(--muted);margin-right:12px;white-space:nowrap} .qms-viewer-close{background:rgba(0,0,0,.25);border:1px solid var(--panel-border);color:var(--text);width:32px;height:32px;border-radius:8px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s ease} .qms-viewer-close:hover{background:rgba(239,68,68,.2);color:#dc2626} .qms-viewer-body{flex:1;overflow:auto;background:#1a1f2e;min-height:0} .qms-viewer-iframe{width:100%;height:100%;min-height:600px;border:none;display:block;background:#fff} .qms-viewer-docx{padding:32px 48px;background:#fff;color:#1a1f2e;max-width:820px;margin:24px auto;font-family:'Segoe UI',Tahoma,sans-serif;line-height:1.55;font-size:13px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.3)} .qms-viewer-docx p{margin:0 0 8px} .qms-viewer-docx h1,.qms-viewer-docx h2,.qms-viewer-docx h3{color:#1a1f2e;font-weight:700;margin:18px 0 10px} .qms-viewer-docx table{border-collapse:collapse;margin:10px 0;width:100%} .qms-viewer-docx table td,.qms-viewer-docx table th{border:1px solid #ccc;padding:6px 10px;text-align:left} .qms-viewer-docx img{max-width:100%;height:auto} .qms-viewer-loading,.qms-viewer-error{padding:48px 24px;text-align:center;color:#94a3b8;font-size:13px} .qms-viewer-error{color:#fca5a5} .qms-viewer-foot{padding:10px 18px;border-top:1px solid var(--panel-border);display:flex;gap:8px;justify-content:flex-end;background:var(--panel)} .qms-viewer-foot:empty{display:none} @media (max-width:768px){ .r160-modal{max-width:none;max-height:100vh;border-radius:0;height:100%} .r160-modal-overlay{padding:0;align-items:stretch} .qms-viewer-overlay{padding:0} .qms-viewer-shell{border-radius:0;max-width:none} .qms-viewer-iframe{min-height:0;height:calc(100vh - 100px)} .qms-viewer-docx{padding:18px 16px;margin:12px 0} .r160-preset-actions{flex-direction:column} .r160-qms-row{flex-direction:column;align-items:stretch} .r160-qms-actions{justify-content:flex-end} } @media (prefers-reduced-motion: reduce){ .r160-modal-overlay,.r160-modal,.qms-viewer-overlay{animation:none} } /* ════════════════ Ende r160 ════════════════ */ /* ════════════════════════════════════════════════════════════════ r261 — Bug 3 FIX: r161-Ausblendung der KI/Audit-Side-Panels entfernt. Der alte r161-Patch versteckte `#tabTasks #tasksAiSidePanel` / `#tasksAuditSidePanel` (+ die beiden Header-Buttons) mit `display:none !important`. Dadurch wechselte `openTasksAiPanel()` zwar korrekt auf den Aufgaben-Tab und `renderKiPanel()` füllte den Panel-Body — das Panel blieb aber unsichtbar (0×0). Symptom: „KI-Panel leitet nur auf Aufgaben weiter, ohne eigene Funktion." Die Panels sind voll implementiert (renderKiPanel / renderTaskAuditPanel) → Buttons + Panels wieder freigeben, Funktion wiederhergestellt. Die Buttons tragen weiterhin data-requires="scheduler" (für MA via `body.role-employee [data-requires="scheduler"]` ausgeblendet). ──────────────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────────────── r171: Wunsch-eintragen Formular — strukturierte Sektionen, 3-Spalten-Grid für Details, klares Toggle-Pair, volle Lesbarkeit. Ersetzt die alte .wish-form (flex-wrap mit gemischten Breiten). ──────────────────────────────────────────────────────────────── */ .wish-form-v2{ display:flex;flex-direction:column;gap:14px; padding:16px; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-lg,12px); margin-bottom:14px; } .wish-form-v2 .wish-section{ border:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } .wish-form-v2 .wish-section + .wish-section{ padding-top:14px; border-top:1px dashed var(--panel-border); } .wish-form-v2 .wish-section > legend{ font-size:var(--fs-12); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:0; margin:0 0 4px 0; } .wish-form-v2 .wish-legend-hint{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted); margin-left:4px; } /* Toggle-Pair für Eigen-/Fremdwunsch */ .wish-form-v2 .wish-toggle-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .wish-form-v2 .wish-toggle-btn{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border-radius:10px; border:2px solid var(--panel-border); background:var(--bg); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:transform .12s,border-color .15s,background .15s; min-height:48px; } .wish-form-v2 .wish-toggle-btn:hover{ border-color:var(--teal); background:var(--teal-dim); } .wish-form-v2 .wish-toggle-btn.is-active{ border-color:var(--teal); background:var(--teal-dim); color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal); } .wish-form-v2 .wish-toggle-emoji{ font-size:18px; line-height:1; } .wish-form-v2 .wish-toggle-label{ font-weight:600; } /* Kolleg:in-Picker */ .wish-form-v2 .wish-fremd-select{ width:100%; padding:10px 12px; font-size:13px; border-radius:8px; border:1px solid var(--panel-border); background:var(--bg); color:var(--text); } /* Info-Hinweis bei Fremdwunsch */ .wish-form-v2 .wish-info-note{ font-size:12px; line-height:1.5; color:var(--text); padding:10px 12px; background:var(--amber-dim); border-left:3px solid var(--amber); border-radius:6px; } /* 3-Spalten-Grid für Datum / Schichttyp / Priorität */ .wish-form-v2 .wish-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } @media(max-width:600px){ .wish-form-v2 .wish-grid-3{ grid-template-columns:1fr; } } .wish-form-v2 .wish-field{ display:flex; flex-direction:column; gap:4px; } .wish-form-v2 .wish-field > label{ font-size:var(--fs-12); font-weight:600; color:var(--text-secondary,var(--muted)); letter-spacing:.02em; } .wish-form-v2 .wish-field > input, .wish-form-v2 .wish-field > select{ width:100%; padding:10px 12px; font-size:13px; border-radius:8px; border:1px solid var(--panel-border); background:var(--bg); color:var(--text); min-height:40px; } .wish-form-v2 .wish-field > input:focus, .wish-form-v2 .wish-field > select:focus, .wish-form-v2 .wish-fremd-select:focus, .wish-form-v2 .wish-note-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-dim); } .wish-form-v2 .wish-allowance{ font-size:var(--fs-12); color:var(--muted); margin-top:2px; padding:4px 6px; border-radius:4px; display:none; } /* Notiz (Vollbreite) */ .wish-form-v2 .wish-note-input{ width:100%; padding:10px 12px; font-size:13px; border-radius:8px; border:1px solid var(--panel-border); background:var(--bg); color:var(--text); min-height:40px; } /* Conflict-Warnung */ .wish-form-v2 .wish-conflict-warn{ padding:10px 12px; border-radius:8px; background:var(--amber-dim); border:1px solid var(--amber); font-size:12px; color:var(--text); line-height:1.5; } /* Paket M-D (§5, „Konflikt-Hinweis rot/Coral") — Coral ist im Bauplan-Wortlaut bewusst zugleich Warnfarbe UND Aktionsfarbe, kein zweiter Namespace. `#wishConflictWarn` lebt im Desktop-Formular `#shiftWishForm`, das `renderWishCalendar()` unter Mobile per JS `display:none` verdeckt (Desktop-Freeze) — hier trotzdem mit-restyled, damit KEIN toter/ inkonsistenter Sonderfall entsteht, falls das Formular je wieder sichtbar wird; Desktop selbst bleibt unangetastet (dort greift `html.view-mobile` nicht). */ html.view-mobile .wish-form-v2 .wish-conflict-warn{ background:rgba(255,106,61,.10); border-color:var(--heute-coral); } /* Submit-Button */ .wish-form-v2 .wish-submit-btn{ width:100%; padding:12px 16px; font-size:14px; font-weight:700; border-radius:10px; margin-top:2px; } /* Liste eigener Wünsche */ #myWishList.wish-list-box{ margin:0; padding:14px 16px; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-lg,12px); font-size:12px; } .wish-list-header{ font-weight:700; margin-bottom:10px; font-size:13px; color:var(--text); } .wish-list-items{ display:flex; flex-direction:column; gap:6px; } /* ──────────────────────────────────────────────────────────────── r171: QMS-Upload — größere, prominentere Progress-Bar + bessere Drop-Zone + persistente Erfolgs-Bestätigung. ──────────────────────────────────────────────────────────────── */ .r160-qms-upload .qms-progress-shell{ height:14px; background:var(--panel-border); border-radius:7px; overflow:hidden; margin:8px 0 4px; position:relative; } .r160-qms-upload .qms-progress-fill{ height:100%; background:linear-gradient(90deg,var(--teal),var(--blue,var(--teal))); transition:width .25s ease-out; border-radius:7px; } .r160-qms-upload .qms-progress-label{ font-size:12px; font-weight:700; color:var(--teal); text-align:center; margin-top:4px; } .qms-upload-success-banner{ display:flex; align-items:center; gap:10px; padding:12px 14px; margin:0 0 12px 0; background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(16,185,129,.05)); border:1px solid var(--green,#10b981); border-left:4px solid var(--green,#10b981); border-radius:8px; font-size:13px; color:var(--text); animation:qmsSuccessSlide .3s ease-out; } .qms-upload-success-banner .qms-banner-icon{ font-size:22px; line-height:1; } .qms-upload-success-banner .qms-banner-text{ flex:1; line-height:1.5; } .qms-upload-success-banner .qms-banner-text b{ display:block; font-weight:700; margin-bottom:2px; } .qms-upload-success-banner .qms-banner-close{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; padding:4px 8px; border-radius:4px; } .qms-upload-success-banner .qms-banner-close:hover{ background:var(--panel-border); color:var(--text); } @keyframes qmsSuccessSlide{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } } /* r174: Error-Banner (rot, mit Schließen-Button) — bei Upload-Fehler persistent */ .qms-upload-error-banner{ display:flex; align-items:center; gap:10px; padding:12px 14px; margin:0 0 12px 0; background:linear-gradient(135deg,rgba(220,38,38,.12),rgba(220,38,38,.04)); border:1px solid var(--red); border-left:4px solid var(--red); border-radius:8px; font-size:13px; color:var(--text); animation:qmsSuccessSlide .3s ease-out; } .qms-upload-error-banner .qms-banner-icon{ font-size:22px; line-height:1; } .qms-upload-error-banner .qms-banner-text{ flex:1; line-height:1.5; } .qms-upload-error-banner .qms-banner-text b{ display:block; font-weight:700; margin-bottom:2px; color:var(--red); } .qms-upload-error-banner .qms-banner-close{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; padding:4px 8px; border-radius:4px; } .qms-upload-error-banner .qms-banner-close:hover{ background:var(--panel-border); color:var(--text); } /* r174: Load-Error-Banner (orange, mit Reload-Button) — wenn Server beim Listen-Laden fehlschlägt */ .qms-load-error-banner{ display:flex; align-items:center; gap:10px; padding:12px 14px; margin:0 0 12px 0; background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.04)); border:1px solid var(--amber); border-left:4px solid var(--amber); border-radius:8px; font-size:13px; color:var(--text); animation:qmsSuccessSlide .3s ease-out; } .qms-load-error-banner .qms-banner-icon{ font-size:22px; line-height:1; } .qms-load-error-banner .qms-banner-text{ flex:1; line-height:1.5; } .qms-load-error-banner .qms-banner-text b{ display:block; font-weight:700; margin-bottom:2px; color:var(--amber); } /* W3-22: Mobile-Roster — Tages-Karten unter 600px. Ersetzt die dichte Staff×Tage-Matrix durch pro Tag eine Karte mit lesbarer Dienst-Liste (Zeiten SICHTBAR statt title-Hover, 44px Touch-Targets, Light-Mode-First). Wird vom JS-Render (_renderRosterMobileCards) erzeugt; CSS macht's bedienbar. */ .sq-mobile{ display:flex; flex-direction:column; gap:8px; padding:2px 0; } .sq-mcard{ border:1px solid var(--panel-border); border-radius:10px; background:var(--panel); overflow:hidden; } .sq-mcard.is-weekend{ background:var(--bg); } .sq-mcard.is-holiday{ border-color:var(--teal); } .sq-mcard-head{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--bg); border-bottom:1px solid var(--panel-border); font-weight:700; font-size:0.8125rem; color:var(--text); } .sq-mcard-day{ flex:0 0 auto; } .sq-mcard-hol{ font-size:var(--fs-12); color:var(--teal); font-weight:600; } .sq-mcard-count{ margin-left:auto; font-size:var(--fs-12); font-weight:600; color:var(--text-secondary); background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; padding:1px 8px; min-width:22px; text-align:center; } .sq-mcard-empty{ padding:8px 12px; font-size:0.75rem; color:var(--text-secondary); } .sq-mrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:44px; padding:8px 12px; border:none; border-top:1px solid var(--panel-border); background:transparent; text-align:left; font:inherit; color:var(--text); cursor:pointer; } .sq-mrow:first-of-type{ border-top:none; } .sq-mrow:active{ background:var(--teal-dim); } .sq-mrow:focus-visible{ outline:2px solid var(--teal); outline-offset:-2px; } .sq-mrow-name{ display:flex; align-items:center; gap:6px; font-size:0.8125rem; font-weight:600; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sq-mrow .sq-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; flex:0 0 auto; } .sq-mrow-shift{ display:flex; align-items:center; gap:6px; flex:0 0 auto; font-size:0.75rem; color:var(--text-secondary); } .sq-mrow-lbl{ font-weight:700; color:var(--text); } .sq-mrow-time{ font-variant-numeric:tabular-nums; color:var(--text); } /* W3-22: Zeit-Override (actual_start_time) — Amber 3.19:1 verfehlte AA. Statt Farbe ein NICHT-Farb-Cue (gepunktete Unterstreichung) + voller --text-Kontrast → AA-konform und farbenblind-robust. */ .sq-mrow-time.is-override{ color:var(--text); font-weight:700; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; } .sq-mrow-spr, .sq-mrow-mtg{ font-size:var(--fs-12); color:var(--text-secondary); white-space:nowrap; } /* W3-22: Tages-Zustand (Absenz/Ferien/Sperre/krank) als nicht-interaktive Zeile — Parität zur Desktop-Zelle. */ .sq-mrow--status{ cursor:default; } .sq-mrow--status:active{ background:transparent; } .sq-mrow-status{ font-size:0.75rem; font-weight:600; color:var(--text-secondary); white-space:nowrap; } /* Fix: freie (unbelegte) Tage — jetzt antippbar fürs Brushtool (Parität zur leeren Desktop-Zelle), optisch gedämpft */ .sq-mrow--free{ opacity:.55; } .sq-mrow--free:hover, .sq-mrow--free:focus-visible{ opacity:1; background:var(--teal-dim); } .sq-mrow--free .sq-mrow-status{ font-weight:400; font-style:italic; } /* W3-23 (iOS-Zoom-on-Focus): iOS Safari zoomt beim Fokus auf TEXT-Eingabefelder mit font-size < 16px hinein (und re-zoomt nicht zurück). Fix: auf Touch-Geräten bzw. schmalen Viewports alle Text-Inputs + Textareas auf >=16px zwingen. !important + Datei-Ende → gewinnt die Cascade über die kompakten Desktop- Dichte-Grössen (8–14px) UND über die zuvor von der Basis-Regel überschattete Mobile-Regel (der gemeldete :395-vs-:2233-Konflikt).