/* ============================================================ @vw/ui — Design-Tokens (Single Source of Truth). Werte 1:1 aus der Design-Wahrheit: Design-Export „AI Workspace" Theme v2 „Kit Look" (claude.ai/design, 2026-06-11) — Indigo-Brand #5F57FF, helle Flächen, feine Borders, Candy-Gradients, lebendige Motion. Schriften Schibsted Grotesk / Instrument Serif / Geist Mono. Tailwind liest diese Variablen (preset.ts), Komponenten lesen sie — nie umgekehrt, nie hartkodiert. Tweak-Hooks auf (siehe VwTweaksPanel / Export theme.css): data-motion (calm|lively|max|off), data-surface (shadow), data-density (compact|roomy), data-font (schibsted|hanken|geist), data-accent (brand), --brand, --rf (Radius-Faktor), --mo (Motion- Multiplikator). ============================================================ */ /* Schriften — self-hosted (DSGVO; ersetzt den Google-Fonts-@import). */ /* ============================================================ @vw/ui — Self-hosted Schriften (DSGVO: KEINE Google-Fonts- Laufzeitabhängigkeit; ersetzt den früheren fonts.googleapis.com- @import in tokens.css). Quelle der woff2-Dateien: npm-Pakete @fontsource-variable/* bzw. @fontsource/instrument-serif (devDependencies dieses Pakets, Lizenz SIL OFL 1.1) — beim Versions-Update Dateien neu nach ./fonts/ kopieren. Familien (Theme v2 „Kit Look", Design-Export 2026-06-11): - Schibsted Grotesk (variable 400–900) — UI-Hauptschrift - Geist (variable 100–900) — Fallback + data-font="geist" - Hanken Grotesk (variable 100–900) — data-font="hanken" - Geist Mono (variable 100–900) — Mono - Instrument Serif (400 + italic) — Display-/Serif-Akzente ============================================================ */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900; src: url('/assets/schibsted-grotesk-latin-wght-normal-Bb8VGrTG.woff2') format('woff2-variations'); } @font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/assets/geist-latin-wght-normal-BgDaEnEv.woff2') format('woff2-variations'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/assets/hanken-grotesk-latin-wght-normal-CaVRRdDk.woff2') format('woff2-variations'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/assets/geist-mono-latin-wght-normal-B_7UjwxQ.woff2') format('woff2-variations'); } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-display: swap; font-weight: 400; src: url('/assets/instrument-serif-latin-400-normal-DnYpCC2O.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-display: swap; font-weight: 400; src: url('/assets/instrument-serif-latin-400-italic-DKMiL14s.woff2') format('woff2'); } /* Motion-Foundation (Pflicht, Design-Language §7) + Theme-v2-Motion-Layer: --theme-motion-*-Tokens, mo-*-Keyframes/Utilities, View-Transitions, Motion-Level-Hooks und der prefers-reduced-motion-Override. */ /* ============================================================ @vw/ui — Motion-Foundation (Pflicht-Foundation, NICHT Kuer). Spec: doc/design/2026-06-11-vw-design-language.md §7 (Motion-System). Warum diese Datei (Lars 2026-06-11): Das heutige UI wirkt „langweilig, statisch, unfertig". Motion ist Foundation — JEDE Komponente bekommt per Default lebendiges Feedback (Hover/Press/Fokus/Auftauchen/Zustand). „Statisch" ist ein Bug, kein Default. Diese Datei liefert: (1) die --theme-motion-*-Token-Ebene (Website-/Theme-Render), die die bestehenden @vw/ui-Tokens (--motion-* und --ease-*) 1:1 spiegelt; (2) wiederverwendbare CSS-Utility-Klassen fuer die Pflicht-Interaktionen (Hover-Lift, Press-Scale, Hover-Elevation) und die Keyframes der Transition-Primitives (Fade/SlideIn/Collapse/StaggerList/Shimmer); (3) den prefers-reduced-motion-Override (Dauern → 0ms, Loops aus). Regeln (Spec §7.6): NUR transform/opacity animieren (Compositor, kein Layout/Paint). Nie Roh-Werte (200ms, cubic-bezier(...)) in Komponenten — immer ueber Token. Editor-Chrome liest @vw/ui --motion-* und --ease-*, Website-/Theme-Render liest --theme-motion-*. ============================================================ */ :root { /* === MOTION-DAUERN (additiv, --theme-*-Ebene; spiegelt @vw/ui 1:1) === */ --theme-motion-duration-fast: 120ms; /* = @vw/ui --motion-fast: Hover-Tint, Press, Fokus, Tab-Indicator */ --theme-motion-duration-base: 200ms; /* = @vw/ui --motion-base (180–200ms-Band): Elevation, Slide, Toast */ --theme-motion-duration-slow: 320ms; /* = @vw/ui --motion-slow: Dialog/Drawer, Stagger-Gesamt */ /* === EASING-KURVEN === */ --theme-motion-ease-standard: cubic-bezier(0.2, 0.8, 0.3, 1); /* Default (≈ @vw/ui --ease-spring) */ --theme-motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1); /* Auftauchen (= @vw/ui --ease-out) */ --theme-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Verschwinden/Schliessen */ /* === ABGELEITETE BEWEGUNGS-DISTANZEN (klein, Produkt-Tempo) === */ --theme-motion-lift: -1px; /* Button hover-lift translateY */ --theme-motion-elevate: -2px; /* Card hover-elevation translateY */ --theme-motion-press: 0.97; /* Press-Scale */ --theme-motion-slide: 8px; /* Slide-Strecke (Dialog/Toast/Stagger-Items) */ --theme-motion-drawer-slide: 16px; /* Drawer-Slide von der Kante */ --theme-motion-stagger-step: 35ms; /* Versatz je Stagger-Item (Spec §7.4: ~30–40ms) */ } /* ------------------------------------------------------------ CSS-UTILITY-KLASSEN — Pflicht-Interaktionen (Spec §7.4). Komponenten haengen sie additiv an; nur transform/opacity/box-shadow. ------------------------------------------------------------ */ /* WICHTIG: Diese Klassen deklarieren KEINE `transition`-Kurzform — sie setzen nur transform im :hover/:active-Zustand. Die `transition`-Eigenschaft besitzt die Komponente selbst (z. B. Tailwind `transition-[…,transform] duration-fast ease-spring`), damit es keinen Kaskaden-Konflikt zweier transition-Shorthands gibt. So bleibt transform/opacity-only (§7.6) und 60fps in Listen-Hotpaths. */ /* Button: hover-lift (translateY −1px) + press-scale. */ .vw-motion-lift:hover:not(:disabled):not([aria-disabled='true']) { transform: translateY(var(--theme-motion-lift)); } .vw-motion-lift:active:not(:disabled):not([aria-disabled='true']) { transform: scale(var(--theme-motion-press)); } /* Press-Scale ohne Lift (Icon-Button, kompakte Controls). */ .vw-motion-press:active:not(:disabled):not([aria-disabled='true']) { transform: scale(var(--theme-motion-press)); } /* Card/Kachel: hover-elevation (translateY −2px; Schatten setzt die Komponente). */ .vw-motion-elevate:hover { transform: translateY(var(--theme-motion-elevate)); } /* ------------------------------------------------------------ KEYFRAMES + LOOP-KLASSEN. Loops tragen data-motion-loop, damit der reduced-motion-Block (animation:none) sie sicher stoppt (0ms-Dauer stoppt keinen Loop). ------------------------------------------------------------ */ @keyframes vw-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* Skeleton-Shimmer: gleichfoermiges Lauflicht (Spec §7.4: ~1.2–1.5s linear). transform-basiert (Spec §7.6 erlaubt nur transform/opacity) — die Klasse gehoert auf ein Overlay-Element ueber der Skeleton-Flaeche. */ .vw-skeleton-shimmer { position: relative; overflow: hidden; } .vw-skeleton-shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100% ); transform: translateX(-100%); animation: vw-shimmer 1.4s linear infinite; } .vw-skeleton-shimmer[data-motion-loop]::after { animation: vw-shimmer 1.4s linear infinite; } /* ------------------------------------------------------------ TRANSITION-PRIMITIVE — -Klassen. Vue-Transition-Komponenten (VwFade/VwSlideIn/VwCollapse/VwStaggerList) geben diese Klassen-Praefixe als `name` durch. transform/opacity only. ------------------------------------------------------------ */ /* VwFade — reines Auf-/Abblenden. */ .vw-fade-enter-active { transition: opacity var(--theme-motion-duration-base) var(--theme-motion-ease-enter); } .vw-fade-leave-active { transition: opacity var(--theme-motion-duration-base) var(--theme-motion-ease-exit); } .vw-fade-enter-from, .vw-fade-leave-to { opacity: 0; } /* VwSlideIn — fade + slide aus einer Richtung (Dialog/Toast/Drawer/Popover). Richtung steuert die Komponente per --vw-slide-x/--vw-slide-y (CSS-Var), sodass ein Klassen-Satz alle vier Richtungen bedient. */ .vw-slide-enter-active { transition: opacity var(--theme-motion-duration-slow) var(--theme-motion-ease-enter), transform var(--theme-motion-duration-slow) var(--theme-motion-ease-enter); } .vw-slide-leave-active { transition: opacity var(--theme-motion-duration-base) var(--theme-motion-ease-exit), transform var(--theme-motion-duration-base) var(--theme-motion-ease-exit); } .vw-slide-enter-from, .vw-slide-leave-to { opacity: 0; transform: translate(var(--vw-slide-x, 0), var(--vw-slide-y, var(--theme-motion-slide))); } /* VwCollapse — Accordion/Collapse via grid-template-rows (Spec §7.6: height-Ausnahme ueber grid-rows-Technik statt animiertem height). */ .vw-collapse-enter-active, .vw-collapse-leave-active { transition: grid-template-rows var(--theme-motion-duration-base) var(--theme-motion-ease-standard), opacity var(--theme-motion-duration-base) var(--theme-motion-ease-standard); } .vw-collapse-enter-from, .vw-collapse-leave-to { grid-template-rows: 0fr; opacity: 0; } .vw-collapse-enter-to, .vw-collapse-leave-from { grid-template-rows: 1fr; opacity: 1; } /* VwStaggerList — Items erscheinen versetzt (fade + slide-up). Der Versatz wird per inline --vw-stagger-index gesetzt (Komponente). */ .vw-stagger-enter-active { transition: opacity var(--theme-motion-duration-base) var(--theme-motion-ease-enter), transform var(--theme-motion-duration-base) var(--theme-motion-ease-enter); transition-delay: calc(var(--vw-stagger-index, 0) * var(--theme-motion-stagger-step)); } .vw-stagger-leave-active { transition: opacity var(--theme-motion-duration-fast) var(--theme-motion-ease-exit), transform var(--theme-motion-duration-fast) var(--theme-motion-ease-exit); position: absolute; } .vw-stagger-enter-from, .vw-stagger-leave-to { opacity: 0; transform: translateY(var(--theme-motion-slide)); } /* FLIP: verschobene Items gleiten an ihre neue Position. */ .vw-stagger-move { transition: transform var(--theme-motion-duration-base) var(--theme-motion-ease-standard); } /* ------------------------------------------------------------ prefers-reduced-motion (Pflicht-Regel, Spec §7.5). ALLE Motion aus: Dauern → 0ms (Zustaende wechseln instant), Loops zusaetzlich per animation:none (0ms-Dauer stoppt keinen Endlos-Loop). Funktionalitaet bleibt IMMER erhalten — reduzierte Motion heisst „kein Augen-Reiz", nicht „weniger Bedienbarkeit". ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --theme-motion-duration-fast: 0ms; --theme-motion-duration-base: 0ms; --theme-motion-duration-slow: 0ms; --theme-motion-stagger-step: 0ms; } /* Loops separat killen (0ms-Dauer stoppt keine Endlos-Animation). */ .vw-skeleton-shimmer::after, .vw-spinner, [data-motion-loop] { animation: none !important; } /* Lift/Press/Elevate-Transforms neutralisieren (kein Augen-Reiz, aber Hover/Active bleiben funktional erkennbar ueber andere Stile). */ .vw-motion-lift:hover, .vw-motion-lift:active, .vw-motion-press:active, .vw-motion-elevate:hover { transform: none; } } /* ============================================================ THEME v2 „KIT LOOK" — MOTION-LAYER (Design-Export „AI Workspace", claude.ai/design 2026-06-11, theme.css §MOTION LAYER — verbindliches Soll). Additiv zur bestehenden Motion-Foundation oben; nutzt die neuen Tokens aus tokens.css: --mo (Multiplikator), --t-fast/--t-med/ --t-slow, --ease-out / --ease-spring (Spring mit Overshoot). JS-Gegenstücke: packages/ui/src/motion/ (moStagger, moCountUp, v-ripple, moEnabled). ============================================================ */ /* Sanfte Zustandswechsel auf allen Buttons (Hover-Styles gleiten gratis). */ button { transition: background-color var(--t-fast, 130ms) var(--ease-out), color var(--t-fast, 130ms) var(--ease-out), box-shadow var(--t-fast, 130ms) var(--ease-out), border-color var(--t-fast, 130ms) var(--ease-out), opacity var(--t-fast, 130ms) var(--ease-out), scale calc(90ms * var(--mo, 1)) var(--ease-out); } button:active { scale: 0.97; } button:disabled { cursor: default; } /* Fokus-Ringe — nur Tastatur. */ :focus-visible { outline: 2px solid color-mix(in oklab, var(--brand, var(--c-brand)) 65%, white); outline-offset: 1px; border-radius: 4px; } input:focus-visible, textarea:focus-visible { outline-offset: 0; } /* Keyframes (nur transform/translate/scale/opacity/filter — §7.6). */ @keyframes mo-rise { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } } @keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mo-pop { from { opacity: 0; scale: 0.965; translate: 0 6px; } to { opacity: 1; scale: 1; translate: 0 0; } } @keyframes mo-slide-r { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } } @keyframes mo-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .pulse { animation: pulse 2s ease-in-out infinite; } /* Utility-Einblendungen. */ .mo-rise { animation: mo-rise var(--t-med, 220ms) var(--ease-out) both; } .mo-pop { animation: mo-pop var(--t-med, 220ms) var(--ease-spring) both; } .mo-fade { animation: mo-fade var(--t-med, 220ms) var(--ease-out) both; } .mo-stagger > * { animation: mo-rise var(--t-med, 220ms) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 26ms * var(--mo, 1)); } /* Popup-Spring — Dialoge, Panels, Menüs (Overshoot via ease-spring). */ .mo-popup { animation: mo-popup calc(430ms * var(--mo, 1)) var(--ease-spring) both; } @keyframes mo-popup { from { opacity: 0; scale: 0.84; translate: 0 16px; filter: blur(2px); } 40% { opacity: 1; filter: blur(0); } to { opacity: 1; scale: 1; translate: 0 0; filter: blur(0); } } .mo-popup-out { animation: mo-popup-out calc(180ms * var(--mo, 1)) var(--ease-out) both; } @keyframes mo-popup-out { to { opacity: 0; scale: 0.92; translate: 0 10px; } } /* FAB-Juice. */ .vw-fab { transition: scale var(--t-fast, 130ms) var(--ease-spring), box-shadow var(--t-fast, 130ms) var(--ease-out), filter var(--t-fast, 130ms) var(--ease-out); } .vw-fab:hover { scale: 1.08; filter: brightness(1.06); } .vw-fab:active { scale: 0.92; } /* Skeleton-Shimmer (Kit-Look: neutraler Inset-Gradient). */ .skeleton { background: linear-gradient(100deg, var(--bg-inset) 40%, #fff 50%, var(--bg-inset) 60%); background-size: 200% 100%; animation: mo-shimmer calc(1400ms * var(--mo, 1)) linear infinite; border-radius: var(--radius-sm); color: transparent !important; } /* Ripple (injiziert von v-ripple, packages/ui/src/motion/). */ .mo-ripple-host { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .mo-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: 0.16; transform: scale(0); animation: mo-ripple calc(560ms * var(--mo, 1)) var(--ease-out) forwards; } @keyframes mo-ripple { to { transform: scale(2.6); opacity: 0; } } /* ---------- View-Transitions (App-Wechsel) ---------- */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: mo-fade-out 140ms ease both; } ::view-transition-new(root) { animation: mo-fade 200ms ease both; } ::view-transition-old(app-canvas) { animation: mo-canvas-out calc(170ms * var(--mo, 1)) var(--ease-out) both; } ::view-transition-new(app-canvas) { animation: mo-canvas-in calc(330ms * var(--mo, 1)) var(--ease-out) both; } ::view-transition-group(nav-pill) { animation-duration: calc(300ms * var(--mo, 1)); animation-timing-function: var(--ease-spring); } } @keyframes mo-fade-out { to { opacity: 0; } } @keyframes mo-canvas-out { to { opacity: 0; translate: 0 -8px; scale: 0.992; } } @keyframes mo-canvas-in { from { opacity: 0; translate: 0 12px; scale: 0.992; } } /* ---------- Motion-Level (Tweak-Hook data-motion auf ) ---------- */ html[data-motion="calm"] { --mo: 0.6; } html[data-motion="lively"] { --mo: 1; } html[data-motion="max"] { --mo: 1.18; } html[data-motion="off"] { --mo: 0; } html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; } html[data-motion="off"] button:active { scale: 1; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Toast in/out (Spring rein, Ease raus; genutzt von VwToastViewport). */ .vw-toast { animation: mo-toast-in calc(380ms * var(--mo, 1)) var(--ease-spring) both; } .vw-toast.out { animation: mo-toast-out calc(220ms * var(--mo, 1)) var(--ease-out) both; } @keyframes mo-toast-in { from { opacity: 0; translate: 0 16px; scale: 0.9; } } @keyframes mo-toast-out { to { opacity: 0; translate: 0 10px; scale: 0.95; } } /* ============================================================ THEME v2 — KOMPONENTEN-LEVEL-HELFER (theme.css §COMPONENT-LEVEL) ============================================================ */ /* Karten-Hover-Lift — für klickbare Karten. */ .card-hover { transition: box-shadow var(--t-fast, 130ms) var(--ease-out), transform var(--t-fast, 130ms) var(--ease-out), border-color var(--t-fast, 130ms) var(--ease-out); cursor: pointer; } .card-hover:hover { box-shadow: var(--shadow); transform: translateY(-1.5px); border-color: var(--border-strong); } .card-hover:active { transform: translateY(0); } /* Akzent-Zone — farbiges Top-Band auf Karten (--az-c = App-Farbe). */ .accent-zone { background: linear-gradient(180deg, color-mix(in oklab, var(--az-c, var(--brand, var(--c-brand))) 7%, var(--bg-panel)) 0%, var(--bg-panel) 100%); } /* Segment-Control — Kit-Stil (auch als Klassen-Hook für Fremd-Markup). */ .seg-ctrl { display: inline-flex; background: var(--bg-inset); border-radius: var(--radius-sm); padding: 2px; gap: 1px; } .seg-ctrl button { padding: 4px 12px; border: none; background: transparent; border-radius: calc(var(--radius-sm) - 2px); font-size: 12px; font-weight: 500; color: var(--text-2); transition: background var(--t-fast, 130ms) var(--ease-out), color var(--t-fast, 130ms) var(--ease-out), box-shadow var(--t-fast, 130ms) var(--ease-out); } .seg-ctrl button[data-active="true"] { background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-sm); } /* Häkchen-Spring. */ @keyframes mo-check-pop { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.3) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } .mo-check-anim { animation: mo-check-pop calc(340ms * var(--mo, 1)) var(--ease-spring) both; } /* Progress-Bar mit Gradient-Fill (--pc = Akzent). */ .prog-bar { height: 4px; background: var(--bg-inset); border-radius: 99px; overflow: hidden; } .prog-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in oklab, var(--pc, var(--brand, var(--c-brand))) 70%, white), var(--pc, var(--brand, var(--c-brand)))); transition: width calc(600ms * var(--mo, 1)) var(--ease-out); } /* Feature-Card-Header-Gradient (--fc-c = Akzent). */ .feat-card-head { position: relative; overflow: hidden; } .feat-card-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in oklab, var(--fc-c, var(--brand, var(--c-brand))) 12%, white) 0%, color-mix(in oklab, var(--fc-c, var(--brand, var(--c-brand))) 4%, white) 50%, transparent 100%); pointer-events: none; border-radius: inherit; } /* Thread-Listen-Zeile. */ .thread-row { transition: background var(--t-fast, 130ms) var(--ease-out); border-left: 2px solid transparent; } .thread-row[data-active="true"] { border-left-color: var(--c-mail); background: color-mix(in oklab, var(--c-mail) 7%, white); } .thread-row:hover:not([data-active="true"]) { background: var(--bg-hover); } /* Hover-Actions-Pill — schwebt bei Hover über Listenzeilen. */ .hover-actions { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) translateX(6px); opacity: 0; transition: opacity var(--t-fast, 130ms) var(--ease-out), transform var(--t-fast, 130ms) var(--ease-spring); pointer-events: none; } .thread-row:hover .hover-actions { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; } /* Kalender-Event-Block (--ev-c = Akzent). */ .cal-event { position: absolute; left: 4px; right: 4px; border-radius: 6px; padding: 4px 7px; font-size: 11.5px; font-weight: 500; overflow: hidden; cursor: pointer; border-left: 3px solid var(--ev-c, var(--brand, var(--c-brand))); background: linear-gradient(160deg, color-mix(in oklab, var(--ev-c, var(--brand, var(--c-brand))) 16%, white) 0%, color-mix(in oklab, var(--ev-c, var(--brand, var(--c-brand))) 10%, white) 100%); transition: transform var(--t-fast, 130ms) var(--ease-spring), box-shadow var(--t-fast, 130ms) var(--ease-out); } .cal-event:hover { transform: scale(1.015) translateX(-1px); box-shadow: 0 4px 14px color-mix(in oklab, var(--ev-c, var(--brand, var(--c-brand))) 22%, transparent); z-index: 2; } /* Reminder-Zeile. */ .rem-row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); align-items: flex-start; transition: background var(--t-fast, 130ms) var(--ease-out); border-radius: var(--radius-sm); } .rem-row:hover { background: var(--bg-hover); padding-left: 8px; padding-right: 8px; } /* ---------- Tab-Pane Fade+Slide ---------- */ @keyframes mo-tab-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } } @keyframes mo-tab-out { to { opacity: 0; translate: 0 -6px; } } .mo-tab-pane { animation: mo-tab-in calc(200ms * var(--mo, 1)) var(--ease-out) both; } /* Animierte Tab-Bar-Underline (--tl/--tw/--ta von der Komponente gesetzt). */ .tab-bar { position: relative; display: flex; gap: 2px; } .tab-bar::after { content: ""; position: absolute; bottom: -1px; left: var(--tl, 0); width: var(--tw, 0); height: 2px; background: var(--ta, var(--brand, var(--c-brand))); border-radius: 2px 2px 0 0; transition: left calc(240ms * var(--mo, 1)) var(--ease-spring), width calc(200ms * var(--mo, 1)) var(--ease-out); } /* Modal-Overlay / Sheet / Drawer. */ .mo-overlay { position: fixed; inset: 0; background: rgba(36, 36, 48, 0.28); backdrop-filter: blur(3px); z-index: 80; display: flex; align-items: center; justify-content: center; animation: mo-fade calc(160ms * var(--mo, 1)) var(--ease-out) both; } .mo-sheet { position: fixed; inset: 0; background: rgba(36, 36, 48, 0.22); backdrop-filter: blur(2px); animation: mo-fade calc(120ms * var(--mo, 1)) var(--ease-out) both; } .mo-drawer { position: absolute; right: 0; top: 0; bottom: 0; animation: mo-drawer-in calc(300ms * var(--mo, 1)) var(--ease-out) both; } @keyframes mo-drawer-in { from { translate: 100% 0; } } @keyframes mo-drawer-out { to { translate: 100% 0; opacity: 0; } } /* Empty-State. */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 40px; text-align: center; color: var(--text-3); gap: 10px; } .empty-state svg { color: var(--text-4); } /* ---------- Kit-Stil-Helfer ---------- */ .card { background: var(--grad-panel); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .vw-search { background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow var(--t-fast, 130ms) var(--ease-out); } .vw-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand, var(--c-brand)), 0 0 0 3px var(--brand-softer); color: var(--text-2); } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.6; background: var(--bg-inset); color: var(--text-2); white-space: nowrap; } /* ---------- Wiki-/Notion-Editor + CMS-Core (Export .wk-*/ .co-*) ---------- */ .wk-editable:empty::before { content: attr(data-ph); color: var(--text-4); pointer-events: none; } .wk-editable:not(:focus):empty::before { content: ""; } .wk-editable[data-ph="To-do"]:empty::before, .wk-editable[data-ph="Toggle"]:empty::before { content: attr(data-ph); } .wk-dbrow:hover .wk-dbrow-del { opacity: 1 !important; } .wk-cover:hover .wk-cover-tools { opacity: 1 !important; } .co-sec:hover .co-sec-edit { opacity: 1 !important; } .co-sec[data-clickable="true"] { cursor: pointer; } .co-sec[data-clickable="true"]:hover { outline: 2px solid color-mix(in oklab, var(--c-core) 55%, transparent); outline-offset: -2px; } .co-addzone > button { opacity: 0; transition: opacity 130ms ease; } .co-addzone:hover > button { opacity: 1; } .co-sec-tools { opacity: 0; transition: opacity 130ms ease; } .co-sec:hover .co-sec-tools { opacity: 1; } /* Basis-Theme-Ebene (Design-Language §4): macht die --theme-*-Tokens inkl. Gradients GLOBAL verfuegbar (Shell-Hero, Stat-Karten, Akzentbalken-Konsumenten mit var(--theme-primary)). Der ThemeProvider ueberschreibt sie pro Teilbaum (Kunde/Mandant) fuer den Website-Render — das Editor-Chrome liest weiterhin die --c-*-Werte unten. */ /* ============================================================ @vw/ui — Theme-Token-Architektur (Website-CSS-Ebene `--theme-*`). WP CUI-WB-13 (CMS-UI-UBG-Konvergenz, Welle B). Das ist die WEBSITE-CSS-Ebene des CMS (3-Ebenen-Vererbung Base -> Kunden-Theme -> Mandanten-Variante; ThemeProvider.vue / WB-14 injiziert die aufgeloeste Kaskade). Sie ist STRIKT getrennt von der Editor-Chrome-Ebene (`--bg`/`--text`/`--c-*` in tokens.css): Editor-CSS und Website-CSS mischen sich NIE (Konvergenz-Plan §1, Design-Language §0/§10). Namenswahrheit: Die Token-Namen folgen der echten UBG-THEME-ARCHITEKTUR.md (kebab-case: --theme-primary, --theme-primary-hover, --theme-on-primary, --theme-surface, --theme-surface-alt, --theme-text, --theme-text-muted, --theme-border, --theme-accent, --theme-font-headline/-body/-ui, --theme-button-radius, --theme-card-radius). Bei Konflikt gewinnt die echte UBG-Datei gegen den Plan. Werte: Theme v2 „Kit Look" (Design-Export „AI Workspace", claude.ai/design, Stand 2026-06-11 — verbindliches Soll, supersedet die Figma-Werte des Erststands): Primaer Indigo #5F57FF (vorher Lila #6D40E6), Schibsted Grotesk als UI-Schrift (vorher Geist). Diese Datei ist ADDITIV: sie aendert KEINE bestehenden Tokens in tokens.css und bricht damit keinen der ~58 Remotes. Konsumierende Editor-Shells koennen den Alias-Bridge-Scope (`.vw-theme-bridge`, unten) OPT-IN setzen, um die `@vw/ui`-`--c-*`-Editor-Tokens auf die Konvergenz-Werte zu heben. Dark Mode (Lars 2026-06-11): Light zuerst. Alle Farben laufen ueber Tokens (kein Hardcode), sodass ein Dark-Wertesatz spaeter rein additiv ueber [data-theme="dark"] / @media (prefers-color-scheme: dark) nachgereicht werden kann, ohne Komponenten anzufassen. Konkrete Dark-Werte bewusst spaeter. ============================================================ */ :root { /* === FARBE === (kebab-case, gemaess echter THEME-ARCHITEKTUR.md) === Marken-Primaer Indigo #5F57FF (Theme v2 Design-Export, 2026-06-11). */ --theme-primary: #5F57FF; /* Buttons, Active-Nav, Links, Slider, Progress-Fill */ --theme-primary-hover: #4B44D6; /* Hover / gedrueckter Zustand (echt: --theme-primary-hover) */ --theme-on-primary: #FFFFFF; /* Text/Icon auf Primary-Flaechen (echt: --theme-on-primary) */ --theme-primary-tint: #EFEEFF; /* Active-/Hover-Background, ausgewaehlte Zeile (additiv) */ --theme-primary-wash: #F7F7FF; /* sehr leichte Sektions-Hinterlegung (additiv) */ --theme-accent: #2C72FF; /* Sekundaerakzent (Links, Info) */ --theme-on-accent: #FFFFFF; /* Text/Icon auf Accent-Flaechen (additiv) */ /* Flaechen / Text / Border (Design-Language §2.4). */ --theme-surface: #FFFFFF; /* Karten/Panels (echt: --theme-surface) */ --theme-surface-alt: #F7F8FA; /* Seite/Background (echt: --theme-surface-alt — der Background-Ton) */ --theme-surface-sunken: #F0F1F3; /* Icon-Rail / Tab-Container (additiv) */ --theme-border: #E5E7EE; /* Default-Border (echt: --theme-border) */ --theme-border-strong: #D5D8E2; /* Inputs, getrennte Tabellenzellen (additiv) */ --theme-text: #1A1B2E; /* Primaertext, leicht violett unterlegt (echt: --theme-text) */ --theme-text-muted: #5C6275; /* Nav-inaktiv, Subtexte (echt: --theme-text-muted) */ --theme-text-subtle: #9095A3; /* Placeholder, Meta, Section-Labels (additive 3. Stufe) */ /* === SEMANTIK === (Design-Language §2.3) === */ --theme-success: #37C390; --theme-warning: #FBC025; --theme-danger: #F65428; --theme-info: #2C72FF; /* Text-Varianten der Semantik (AA auf neutralem Grund — als TEXTfarbe nutzen). */ --theme-success-text: #15803D; --theme-warning-text: #A35A00; --theme-danger-text: #D70015; --theme-info-text: #1D5FD6; /* === TYPOGRAFIE === (echte Token-Namen: headline/body/ui; Theme v2: Schibsted Grotesk mit Geist-Fallback, self-hosted via fonts.css) === */ --theme-font-headline: "Schibsted Grotesk", "Geist", system-ui, -apple-system, sans-serif; /* echt: --theme-font-headline */ --theme-font-body: "Schibsted Grotesk", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; /* echt: --theme-font-body */ --theme-font-ui: "Schibsted Grotesk", "Geist", system-ui, -apple-system, sans-serif; /* echt: --theme-font-ui */ --theme-font-mono: "Geist Mono", ui-monospace, monospace; /* additiv (Codes/IDs) */ --theme-font-scale: 1; /* Mandanten-Skalierfaktor 0.9–1.15 (additiv) */ /* === FORM === (echte Token-Namen: button-radius/card-radius; Kit-Konsens §6) === */ --theme-card-radius: 12px; /* Karten/Panels/Dialoge (echt: --theme-card-radius) */ --theme-button-radius: 8px; /* Buttons/Inputs/aktive Nav-Items (echt: --theme-button-radius) */ --theme-radius-pill: 999px; /* Badges/Avatare/Progress (additiv) */ --theme-radius-chip: 6px; /* Inline-Tags, Logo-Tile, Icon-Wrapper (additiv) */ --theme-radius-section: 16px; /* grosse Container/Stat-Container/Upsell-Karte (additiv) */ --theme-shadow: 0 1px 2px rgba(9, 25, 72, 0.06); /* Standard-Mikro-Schatten (= shadow-sm) */ /* ======================================================== ADDITIVE GRADIENTS (Design-Language §3 — max. 5 kanonische Verlaeufe, dekorativ/punktuell: Logo-Tiles, Stat-Badges, CTA, Upsell-Karte). Alle kebab-case, namespaced `--theme-gradient-*`. ======================================================== */ --theme-gradient-brand: linear-gradient(180deg, #8C86FF 0%, #5F57FF 100%); /* G1 Logo-Tiles/Icon-Badges */ --theme-gradient-cta: linear-gradient(115deg, #5F57FF 0%, #4B44D6 45%, #2C72FF 115%); /* G2 Hero-CTA/Trial-Badge */ --theme-gradient-dark: linear-gradient(160deg, #4C4C4D 0%, #2D2F30 50%, #1A1B2E 100%); /* G4 Dark Upsell/Hero */ --theme-gradient-gloss: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 100%); /* G5 Glanz-Overlay */ --theme-gradient-stat-blue: linear-gradient(151deg, #A5C7FE 18%, #5F57FF 89%); /* G3 Stat-Badge je Kategorie */ --theme-gradient-stat-green: linear-gradient(137deg, #86B9ED 18%, #3FC4A9 80%); --theme-gradient-stat-pink: linear-gradient(121deg, #FF4AA1 20%, #FBC025 81%); --theme-gradient-stat-cyan: linear-gradient(142deg, #2C72FF 22%, #35CFFF 72%); /* ======================================================== ADDITIVE SCHATTEN-STUFEN (Design-Language §4/§6 — Mikro-Schatten-System; keine schweren Drop-Shadows). Alle kebab-case `--theme-shadow-*`. ======================================================== */ --theme-shadow-xs: 0 1px 1px rgba(9, 25, 72, 0.06); /* Search/Input in Sidebar */ --theme-shadow-sm: 0 1px 2px rgba(9, 25, 72, 0.06); /* Karten, Buttons (= --theme-shadow) */ --theme-shadow-md: 0 6px 10px rgba(27, 28, 29, 0.06), 0 2px 4px rgba(27, 28, 29, 0.02); /* aktiver Tab, Popover */ --theme-shadow-lg: 0 5px 20px rgba(95, 87, 255, 0.12); /* Modal, Floating (Marken-getoent) */ --theme-ring-active: 0 0 0 1px #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.08); /* Active-Nav Weiss-Ring (Sonderfall) */ /* Elevation-Tints (Stat-Chip-Backgrounds, je Kategorie; Design-Language §4). */ --theme-elevation-blue: #EFEEFF; --theme-elevation-green: #E8FDFB; --theme-elevation-pink: #FBE6F8; --theme-elevation-amber: #FCECE6; /* ======================================================== ADDITIVE MOTION (Design-Language §7.3 — spiegelt @vw/ui 1:1, aliased auf die Editor-Motion-Tokens aus tokens.css). Damit fahren Editor-Chrome und Website-Render dasselbe Tempo. Alle kebab-case `--theme-motion-*`. Regel: Komponenten nutzen NIE Roh-Werte (200ms / cubic-bezier(...)), immer den Token. Website-/Theme-Render liest --theme-motion-*, Editor-Chrome liest --motion-* und --ease-* (gleiche Trennung wie Farb-Tokens). Fallback-Werte (rechts vom var()) greifen, falls tokens.css nicht geladen ist; sind identisch zu den @vw/ui-Werten und werden von der reduced-motion-Mechanik unten korrekt auf 0ms gezogen. */ --theme-motion-duration-fast: var(--motion-fast, 120ms); /* Hover-Tints, Press-Scale, Fokus-Ring, Icon-Color, Tab-Indicator */ --theme-motion-duration-base: var(--motion-base, 200ms); /* Elevation, Background, Toast-In, kurze Slides */ --theme-motion-duration-slow: var(--motion-slow, 320ms); /* Dialog/Drawer-Auftritt, Listen-Stagger-Gesamtdauer */ --theme-motion-ease-standard: var(--ease-spring, cubic-bezier(0.2, 0.8, 0.3, 1)); /* Default (≈ --ease-spring) */ --theme-motion-ease-enter: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); /* Auftauchen (= --ease-out) */ --theme-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Verschwinden/Schliessen */ } /* ======================================================== REDUCED-MOTION (Design-Language §7.5 — Pflicht-Regel). Bei prefers-reduced-motion wird ALLE Motion abgeschaltet: Dauer-Tokens -> 0ms. Loops (Shimmer/Spinner) separat per `animation: none`, da 0ms-Dauer eine Endlos-Animation nicht stoppt. Funktionalitaet bleibt IMMER erhalten. (Spiegelt den bestehenden @vw/ui-Block in tokens.css; falls dieses File ohne tokens.css geladen wird, setzt es die --theme-motion-*-Dauern selbst.) ======================================================== */ @media (prefers-reduced-motion: reduce) { :root { --theme-motion-duration-fast: 0ms; --theme-motion-duration-base: 0ms; --theme-motion-duration-slow: 0ms; } /* Loops separat killen (0ms-Dauer stoppt keine Endlos-Animation). */ .vw-skeleton, .vw-spinner, [data-motion-loop] { animation: none !important; } } /* ======================================================== ALIAS-BRIDGE (OPT-IN, kein Breaking Change). Hebt die @vw/ui-Editor-Tokens (--c-*) auf die Konvergenz-Werte — NUR innerhalb des explizit gesetzten Scopes `.vw-theme-bridge` (z.B. die CMS-Editor-Shell), damit die ~58 anderen Remotes, die `@vw/ui` nutzen, UNBERUEHRT bleiben (sie setzen diesen Scope nicht). Design-Language §4 „Bruecke zu @vw/ui": Werte werden GESETZT, nicht neu erfunden. So koennen Bestands-Komponenten in der CMS-Shell die Marken-Optik tragen, ohne dass ihre Templates Token-Namen tauschen muessen. ======================================================== */ .vw-theme-bridge { /* Marke/Akzent -> Lila-Primaer. */ --c-brand: var(--theme-primary); --c-app-accent: var(--theme-primary); --c-app-accent-on: var(--theme-on-primary); --c-focus: var(--theme-primary); /* Karten-Kontext-Radius auf den 12px-Kit-Konsens. */ --radius: var(--theme-card-radius); --radius-sm: var(--theme-button-radius); /* Mikro-Schatten-System. */ --shadow-sm: var(--theme-shadow-sm); --shadow: var(--theme-shadow-md); --shadow-lg: var(--theme-shadow-lg); } :root { /* --- Marke (Theme v2: Indigo #5F57FF, vorher Lila #6D40E6) ------------ --brand ist der Tweak-Hook (VwTweaksPanel schreibt ihn auf ); --c-brand bleibt der historische Editor-Token-Name und folgt --brand. */ --brand: #5f57ff; --brand-ink: color-mix(in oklab, var(--brand) 86%, #1d1d3a); --brand-soft: color-mix(in oklab, var(--brand) 10%, white); --brand-softer: color-mix(in oklab, var(--brand) 5%, white); --brand-line: color-mix(in oklab, var(--brand) 26%, white); /* Candy-Gradients (Theme v2, exakt aus dem Export). */ --grad-brand: linear-gradient(150deg, color-mix(in oklab, var(--brand) 72%, #C9B8FF) 0%, var(--brand) 55%, color-mix(in oklab, var(--brand) 78%, #221A5E) 100%); --grad-brand-soft: linear-gradient(180deg, color-mix(in oklab, var(--brand) 13%, white) 0%, color-mix(in oklab, var(--brand) 7%, white) 100%); --grad-panel: linear-gradient(180deg, #FFFFFF 0%, #FBFBFE 100%); /* --- Flächen & Text (Theme v2 „Kit Look") --- */ --bg: #f6f7f9; --bg-panel: #ffffff; --bg-elev: #ffffff; /* ACHTUNG: --bg-sidebar ist seit Theme v2 ein GRADIENT (Export-Soll) — nur in background/background-image verwenden, nie in background-color. Das Tailwind-Preset mappt `bg-sidebar` darum auf background-image. */ --bg-sidebar: linear-gradient(180deg, color-mix(in oklab, var(--brand) 3%, #FBFBFD) 0%, #F8F9FB 45%, color-mix(in oklab, #4FB3DC 3%, #F6F8FA) 100%); --bg-inset: #f1f2f6; --bg-hover: rgba(46, 46, 56, 0.05); /* Aktive Zeile/Item = Brand-Tint (Duo-Logik: Indigo für UI-Chrome). */ --bg-active: var(--brand-soft); --border: #e6e7ec; --border-soft: #edeff3; --border-strong: #d8d9e0; --text: #2e2e38; --text-2: #5f6678; /* WCAG-AA-Kontrast (W6.a11y-fix-tokens, Audit F1 / SC 1.4.3) — BEWUSSTE Abweichung vom Export (dessen --text-3 #9AA0AD ≈ 2.9:1 fällt durch): --text-2/3/4 werden in App-Chrome, Chips, Badges und Statuszeilen als echter UI-Text genutzt und müssen deshalb auch auf --bg-inset/--bg-hover ≥ 4.5:1 erreichen. */ --text-3: #646b7e; --text-4: #5f6678; /* --- Status (Theme v2: ok/warn/bad mit Soft-Flächen) --- */ --ok: #15997b; --ok-soft: #e5f6f1; --warn: #b07c10; --warn-soft: #fbf2dc; --bad: #d6455d; --bad-soft: #fbeaed; /* --- App-Akzentfarben — Theme-v2-Kit-Palette (rekalibriert) --- Token-NAMEN unverändert (63 Remotes), nur Werte gehoben. */ --c-mail: #336bb7; --c-calendar: #e25c5c; --c-files: #2ba3b4; --c-docs: #e8762d; --c-slides: #2d7fe8; --c-notes: #e5a819; --c-reminders: #ed8936; --c-contacts: #a0795a; --c-wiki: #5f57ff; --c-crm: #2fa463; --c-finance: #15997b; --c-dam: #b42355; --c-automation: #8b5cf6; --c-events: #a855e8; --c-projects: #3d8fe0; --c-build: #5f57ff; --c-support: #4fb3dc; --c-people: #f06a8a; --c-marketing: #f0764f; --c-analytics: #38a8de; --c-commerce: #a8895f; --c-admin: #8e929e; --c-sites: #b42355; --c-core: #8b5cf6; --c-surveys: #dfae15; --c-tables: #14b8a6; --c-domains: #3d7be0; --c-subsystems: #5f57ff; --c-assist: #8b5cf6; --c-whiteboard: #ef9a2d; --c-studio: #b42355; /* Extended subsystems (Kit-Palette, unverändert kompatibel) */ --c-legal: #4f46e5; --c-research: #db2777; --c-logistics: #0891b2; --c-aistudio: #7c3aed; /* Video-Editor-Akzent (Design-Wahrheit theme.css: --c-video #C44FE9). Zentral hier, damit das Video-Remote ihn nicht remote-lokal overriden muss. */ --c-video: #c44fe9; /* --- Text-auf-Akzent (Audit F2, SC 1.4.3 / 1.4.11) -------------------- useOnAccent wählt den Vordergrund automatisch nach Luminanz. Für die "Totband"-Akzente (Luminanz nahe der Schwelle → WEDER Weiß NOCH dunkler Text erreicht auf der Basis 4.5:1) gibt es vertiefte, hue-gleiche `*-fill`-Varianten, auf denen WEISS sicher ≥ 4.5:1 erreicht. Gefüllte Buttons/Icons (VwButton/VwAppIcon) substituieren die Basis durch den Fill (FILL_SUBSTITUTE). Mit der Theme-v2-Palette berechnet (validierte WCAG-2.1-Kontraste): --c-mail #336bb7 → weiß 5.3:1 ✓ (Fill = Basiston, trägt selbst) --c-events #a855e8 → weiß 4.09 ✗ / dunkel 4.11 ✗ → Fill #9333ea (5.4) --c-danger/bad #d6455d → weiß 4.31 ✗ / dunkel 3.90 ✗ → Fill #c2334b (5.4) --c-automation #8b5cf6 → weiß 4.23 ✗ / dunkel 3.97 ✗ → Fill #7c3aed (5.7) (gilt identisch für --c-core/--c-assist = #8b5cf6) --c-domains #3d7be0 → weiß 4.11 ✗ / dunkel 4.09 ✗ → Fill #2f6ad0 (5.1) --c-slides #2d7fe8 → weiß 3.95 ✗ / dunkel 4.26 ✗ → Fill #1f6fd8 (4.9) --c-contacts #a0795a → weiß 3.91 ✗ / dunkel 4.31 ✗ → Fill #b08b6e (dunkler Text 5.4 — heller Fill, da brauner Mid-Ton) */ --c-mail-fill: #336bb7; --c-events-fill: #9333ea; --c-danger-fill: #c2334b; --c-automation-fill: #7c3aed; --c-core-fill: #7c3aed; --c-assist-fill: #7c3aed; --c-domains-fill: #2f6ad0; --c-slides-fill: #1f6fd8; --c-contacts-fill: #b08b6e; /* Suite-Akzent + pro-App überschreibbarer App-Akzent (AppShell/AppHeader setzen ihn). Theme v2 (Design-Export 2026-06-11): Primary ist das Marken-Indigo #5F57FF — Buttons, aktive Navigation, Links, Fokus. */ --c-brand: var(--brand); --c-brand-hover: var(--brand-ink); /* Hover/Pressed */ --c-brand-tint: var(--brand-soft); /* Active-/Hover-Fläche */ --c-app-accent: var(--c-brand); /* Default-Vordergrund auf dem App-Akzent (Weiß auf #5F57FF = 5.0:1). */ --c-app-accent-on: #ffffff; /* Fokusring — Marken-Indigo, ≥ 3:1 auf --bg. */ --c-focus: var(--brand); /* Semantik: danger/success/warning auf der Theme-v2-Statusfamilie. */ --c-danger: var(--bad); --c-success: var(--ok); --c-warning: #e5a819; /* Warn-FLÄCHE (Dots/Badges); Text nutzt *-text. */ /* Semantische Farben als TEXT/Glyph auf neutraler Standardfläche (AA): --c-danger-text #c23148 → 5.0:1 (Hue von --bad #d6455d) --c-warning-text #8d6a00 → 5.6:1 --c-success-text #117a62 → 5.1:1 (Hue von --ok #15997b) */ --c-danger-text: #c23148; --c-warning-text: #8d6a00; --c-success-text: #117a62; /* Status-Set INFO / LINK / NEUTRAL (CUI-KIT-01). Vollfarbe nur für Flächen/Punkte/Badges; als TEXTfarbe die dunklere `*-text`-Variante. */ --c-info: #5f57ff; --c-info-text: #4845c9; --c-link: #2d7fe8; --c-link-text: #1d5fd6; --c-neutral: #8e929e; --c-neutral-text: #646b7e; /* --- Live-/Review-Status + On-Accent (CUI-KIT-02) --- */ --c-live-active: #2fa463; --c-live-paused: #dfae15; --c-review: #8b5cf6; --c-review-text: #7c3aed; --c-on-accent: #ffffff; /* --- Soft-/Tint-Flächen für Status-Hintergründe (CUI-KIT-02) --- Theme v2: feste Soft-Töne statt rgba()-Mischung (Kit-Look). */ --c-info-soft: var(--brand-soft); --c-success-soft: var(--ok-soft); --c-warning-soft: var(--warn-soft); --c-danger-soft: var(--bad-soft); --c-neutral-soft: #eef0f3; --c-review-soft: #f1ebfd; /* --- Radius (Theme v2: skaliert über den --rf-Tweak) --- */ --rf: 1; --radius-sm: calc(8px * var(--rf)); --radius: calc(11px * var(--rf)); --radius-lg: calc(15px * var(--rf)); --radius-xl: calc(22px * var(--rf)); --radius-full: 999px; /* --- Tiefe (Theme v2 Default: FEINE BORDERS statt Schatten; Variante „Schatten" über html[data-surface="shadow"] unten) --- */ --shadow-sm: 0 0 0 1px var(--border-soft); --shadow: 0 0 0 1px var(--border), 0 2px 10px rgba(82, 88, 102, 0.05); --shadow-lg: 0 0 0 1px var(--border), 0 24px 60px rgba(46, 46, 56, 0.16); /* --- Schriften (Theme v2: Schibsted Grotesk; self-hosted) --- */ --font: "Schibsted Grotesk", "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: "Geist Mono", "SF Mono", ui-monospace, monospace; --font-serif: "Instrument Serif", "New York", "Times New Roman", serif; /* Typo-Skala (Theme v2: 13.5px-Body). */ --text-xs: 11px; --text-sm: 12px; --text-base: 13.5px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 28px; --leading-tight: 1.2; --leading-normal: 1.5; /* Spacing (4er-Raster, ergänzend). */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* Motion (Theme v2 „lebendig": Dauern skalieren über --mo; reduced-motion-Override unten zieht sie auf 0ms). */ --mo: 1; /* Motion-Multiplikator (Tweak: calm 0.6 / lively 1 / max 1.18 / off 0) */ --t-fast: calc(130ms * var(--mo)); --t-med: calc(220ms * var(--mo)); --t-slow: calc(360ms * var(--mo)); --motion-fast: var(--t-fast); --motion-base: var(--t-med); --motion-slow: var(--t-slow); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1); } /* ---------- Tweak: Flächen-Tiefe (Default = Borders, Variante Schatten) -- */ html[data-surface="shadow"] { --shadow-sm: 0 1px 2px rgba(46, 46, 56, 0.05), 0 0 0 0.5px rgba(46, 46, 56, 0.05); --shadow: 0 4px 18px rgba(46, 46, 56, 0.07), 0 0 0 0.5px rgba(46, 46, 56, 0.05); --shadow-lg: 0 24px 64px rgba(46, 46, 56, 0.18), 0 0 0 0.5px rgba(46, 46, 56, 0.06); } /* ---------- Tweak: Typografie ---------- */ html[data-font="geist"] { --font: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } html[data-font="hanken"] { --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } html[data-font="schibsted"]{ --font: "Schibsted Grotesk", "Geist", -apple-system, system-ui, sans-serif; } /* ---------- Tweak: Dichte ---------- */ html[data-density="compact"] body { zoom: 0.93; } html[data-density="roomy"] body { zoom: 1.07; } /* ---------- Tweak: Farblogik „Nur Marke" (Duo ist Default) ---------- data-accent="brand": alle App-Akzente kollabieren auf die Marke. */ html[data-accent="brand"] { --c-mail: var(--brand); --c-calendar: var(--brand); --c-files: var(--brand); --c-docs: var(--brand); --c-slides: var(--brand); --c-notes: var(--brand); --c-reminders: var(--brand); --c-contacts: var(--brand); --c-wiki: var(--brand); --c-crm: var(--brand); --c-finance: var(--brand); --c-dam: var(--brand); --c-automation: var(--brand); --c-events: var(--brand); --c-projects: var(--brand); --c-build: var(--brand); --c-support: var(--brand); --c-people: var(--brand); --c-marketing: var(--brand); --c-analytics: var(--brand); --c-commerce: var(--brand); --c-admin: var(--brand); --c-sites: var(--brand); --c-core: var(--brand); --c-surveys: var(--brand); --c-tables: var(--brand); --c-domains: var(--brand); --c-subsystems: var(--brand); --c-assist: var(--brand); --c-whiteboard: var(--brand); --c-studio: var(--brand); --c-legal: var(--brand); --c-research: var(--brand); --c-logistics: var(--brand); --c-aistudio: var(--brand); --c-video: var(--brand); --c-events-fill: var(--brand); --c-mail-fill: var(--brand); /* danger bleibt semantisch rot (kein App-Akzent) → --c-danger-fill NICHT auf die Marke kollabieren. */ --c-automation-fill: var(--brand); --c-core-fill: var(--brand); --c-assist-fill: var(--brand); --c-domains-fill: var(--brand); --c-slides-fill: var(--brand); --c-contacts-fill: var(--brand); } /* ---------- Basis-Typografie (Theme v2: 13.5px / 1.5, antialiased) ------ */ body { font-family: var(--font); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 13.5px; line-height: 1.5; } /* Selektion theme-bewusst gegen die Panel-Fläche mischen (nicht hart gegen white) — sonst wird der Auswahl-Hintergrund im Dark Mode fast weiß und der Auswahl-Text (--text ≈ #f5f5f7) unsichtbar. */ ::-moz-selection { background: color-mix(in oklab, var(--brand) 28%, var(--bg-panel)); } ::selection { background: color-mix(in oklab, var(--brand) 28%, var(--bg-panel)); } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #d6d8df; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: #bfc2cc; background-clip: content-box; border: 2px solid transparent; } /* Dunkler Modus: Flächen/Text invertieren, App-Akzente bleiben (Kit-Palette trägt auf dunkel). Theme v2 ist Light-first; Dark bleibt funktional. */ @media (prefers-color-scheme: dark) { :root { --bg: #1c1c1e; --bg-panel: #2c2c2e; --bg-elev: #3a3a3c; --bg-sidebar: linear-gradient(180deg, rgba(28, 28, 30, 0.96) 0%, rgba(28, 28, 30, 0.9) 100%); --bg-inset: #3a3a3c; --bg-hover: rgba(255, 255, 255, 0.06); --bg-active: rgba(139, 133, 255, 0.16); --grad-panel: linear-gradient(180deg, #2c2c2e 0%, #29292c 100%); --border: rgba(255, 255, 255, 0.10); --border-soft: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.16); --text: #f5f5f7; --text-2: #aeaeb2; /* WCAG-AA-Kontrast (Audit F1), Dark Mode. */ --text-3: #9a9aa0; --text-4: #86868b; /* Dark-Brand: helleres Indigo der Gradient-Familie, damit der Akzent auf dunklen Flächen trägt. */ --brand: #8b85ff; --brand-ink: color-mix(in oklab, var(--brand) 80%, white); --brand-soft: color-mix(in oklab, var(--brand) 18%, #1c1c1e); --brand-softer: color-mix(in oklab, var(--brand) 10%, #1c1c1e); --brand-line: color-mix(in oklab, var(--brand) 32%, #1c1c1e); --c-brand-hover: #9d98ff; --c-brand-tint: rgba(139, 133, 255, 0.16); /* Status-Soft-Flächen auf dunkel: Hue-Tints mit höherer Deckung. */ --ok-soft: rgba(21, 153, 123, 0.22); --warn-soft: rgba(229, 168, 25, 0.20); --bad-soft: rgba(214, 69, 93, 0.22); /* Semantische Text-Varianten im Dark Mode (AA, Audit F2). */ --c-danger-text: #ff8094; --c-warning-text: #e5a819; --c-success-text: #34c79b; /* Status-Set INFO / LINK / NEUTRAL im Dark Mode (CUI-KIT-01). */ --c-info-text: #a5a3f5; --c-link-text: #6ea8ff; --c-neutral-text: #9a9aa0; /* Live-/Review-Status (CUI-KIT-02). */ --c-review-text: #c4a7fa; /* Soft-/Tint-Flächen im Dark Mode. */ --c-info-soft: rgba(139, 133, 255, 0.18); --c-success-soft: rgba(47, 164, 99, 0.20); --c-warning-soft: rgba(229, 168, 25, 0.20); --c-danger-soft: rgba(214, 69, 93, 0.20); --c-neutral-soft: rgba(142, 146, 158, 0.22); --c-review-soft: rgba(139, 92, 246, 0.22); --shadow-sm: 0 0 0 1px var(--border-soft); --shadow: 0 0 0 1px var(--border), 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 0 0 1px var(--border), 0 16px 48px rgba(0, 0, 0, 0.6); } } @media (prefers-reduced-motion: reduce) { :root { --mo: 0; --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } } /* Basale Typografie-Grundlage. Optional von der App geladen. */ .vw-root, :root { color-scheme: light dark; } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com *//* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: var(--font); /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: var(--font-mono); /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } .\!container { width: 100% !important; } .container { width: 100%; } @media (min-width: 640px) { .\!container { max-width: 640px !important; } .container { max-width: 640px; } } @media (min-width: 768px) { .\!container { max-width: 768px !important; } .container { max-width: 768px; } } @media (min-width: 1024px) { .\!container { max-width: 1024px !important; } .container { max-width: 1024px; } } @media (min-width: 1280px) { .\!container { max-width: 1280px !important; } .container { max-width: 1280px; } } @media (min-width: 1536px) { .\!container { max-width: 1536px !important; } .container { max-width: 1536px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } .visible { visibility: visible; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { inset: 0px; } .-bottom-0\.5 { bottom: -0.125rem; } .-left-\[70px\] { left: -70px; } .-right-0\.5 { right: -0.125rem; } .-top-0\.5 { top: -0.125rem; } .-top-12 { top: -3rem; } .-top-px { top: -1px; } .bottom-0 { bottom: 0px; } .bottom-5 { bottom: 1.25rem; } .bottom-\[22px\] { bottom: 22px; } .bottom-\[56px\] { bottom: 56px; } .left-0 { left: 0px; } .left-1\/2 { left: 50%; } .left-2\.5 { left: 0.625rem; } .left-3 { left: 0.75rem; } .right-0 { right: 0px; } .right-1\.5 { right: 0.375rem; } .right-2 { right: 0.5rem; } .right-3 { right: 0.75rem; } .right-\[22px\] { right: 22px; } .top-0 { top: 0px; } .top-1\/2 { top: 50%; } .top-8 { top: 2rem; } .top-\[3px\] { top: 3px; } .top-\[58px\] { top: 58px; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-50 { z-index: 50; } .z-\[120\] { z-index: 120; } .z-\[200\] { z-index: 200; } .z-\[5\] { z-index: 5; } .z-\[60\] { z-index: 60; } .order-2 { order: 2; } .m-0 { margin: 0px; } .m-auto { margin: auto; } .mx-\[18px\] { margin-left: 18px; margin-right: 18px; } .mx-auto { margin-left: auto; margin-right: auto; } .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-1\.5 { margin-top: 0.375rem; margin-bottom: 0.375rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-1\.5 { margin-bottom: 0.375rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-2\.5 { margin-bottom: 0.625rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-8 { margin-bottom: 2rem; } .mb-9 { margin-bottom: 2.25rem; } .mb-px { margin-bottom: 1px; } .ml-0 { margin-left: 0px; } .ml-0\.5 { margin-left: 0.125rem; } .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .ml-auto { margin-left: auto; } .mr-0 { margin-right: 0px; } .mr-auto { margin-right: auto; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-1\.5 { margin-top: 0.375rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-5 { margin-top: 1.25rem; } .mt-\[11px\] { margin-top: 11px; } .mt-\[12vh\] { margin-top: 12vh; } .mt-\[1px\] { margin-top: 1px; } .mt-\[3px\] { margin-top: 3px; } .mt-\[7px\] { margin-top: 7px; } .mt-px { margin-top: 1px; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .grid { display: grid; } .contents { display: contents; } .hidden { display: none; } .size-1\.5 { width: 0.375rem; height: 0.375rem; } .size-12 { width: 3rem; height: 3rem; } .size-2 { width: 0.5rem; height: 0.5rem; } .size-3\.5 { width: 0.875rem; height: 0.875rem; } .size-4 { width: 1rem; height: 1rem; } .size-5 { width: 1.25rem; height: 1.25rem; } .size-6 { width: 1.5rem; height: 1.5rem; } .size-7 { width: 1.75rem; height: 1.75rem; } .size-8 { width: 2rem; height: 2rem; } .size-\[10px\] { width: 10px; height: 10px; } .size-\[18px\] { width: 18px; height: 18px; } .size-\[19px\] { width: 19px; height: 19px; } .size-\[22px\] { width: 22px; height: 22px; } .size-\[26px\] { width: 26px; height: 26px; } .size-\[38px\] { width: 38px; height: 38px; } .size-\[52px\] { width: 52px; height: 52px; } .size-\[5px\] { width: 5px; height: 5px; } .size-\[6px\] { width: 6px; height: 6px; } .size-\[7px\] { width: 7px; height: 7px; } .h-1 { height: 0.25rem; } .h-10 { height: 2.5rem; } .h-16 { height: 4rem; } .h-24 { height: 6rem; } .h-7 { height: 1.75rem; } .h-8 { height: 2rem; } .h-9 { height: 2.25rem; } .h-\[18px\] { height: 18px; } .h-\[220px\] { height: 220px; } .h-\[26px\] { height: 26px; } .h-\[30px\] { height: 30px; } .h-\[34px\] { height: 34px; } .h-\[38px\] { height: 38px; } .h-dvh { height: 100dvh; } .h-full { height: 100%; } .h-px { height: 1px; } .max-h-\[320px\] { max-height: 320px; } .max-h-\[380px\] { max-height: 380px; } .max-h-dvh { max-height: 100dvh; } .min-h-0 { min-height: 0px; } .min-h-\[120px\] { min-height: 120px; } .min-h-\[60px\] { min-height: 60px; } .w-10 { width: 2.5rem; } .w-56 { width: 14rem; } .w-7 { width: 1.75rem; } .w-\[280px\] { width: 280px; } .w-\[284px\] { width: 284px; } .w-\[30px\] { width: 30px; } .w-\[318px\] { width: 318px; } .w-\[380px\] { width: 380px; } .w-\[384px\] { width: 384px; } .w-\[3px\] { width: 3px; } .w-\[42px\] { width: 42px; } .w-\[600px\] { width: 600px; } .w-\[66px\] { width: 66px; } .w-\[min\(580px\2c 92vw\)\] { width: min(580px, 92vw); } .w-full { width: 100%; } .min-w-0 { min-width: 0px; } .min-w-4 { min-width: 1rem; } .min-w-\[150px\] { min-width: 150px; } .min-w-\[16px\] { min-width: 16px; } .min-w-\[180px\] { min-width: 180px; } .min-w-\[18px\] { min-width: 18px; } .min-w-\[192px\] { min-width: 192px; } .min-w-\[240px\] { min-width: 240px; } .min-w-\[260px\] { min-width: 260px; } .max-w-\[1180px\] { max-width: 1180px; } .max-w-\[320px\] { max-width: 320px; } .max-w-\[420px\] { max-width: 420px; } .max-w-\[560px\] { max-width: 560px; } .max-w-\[640px\] { max-width: 640px; } .max-w-\[78\%\] { max-width: 78%; } .max-w-\[80\%\] { max-width: 80%; } .max-w-\[92vw\] { max-width: 92vw; } .max-w-\[\2026px\] { max-width: …px; } .max-w-full { max-width: 100%; } .flex-1 { flex: 1 1 0%; } .flex-\[1_0_100\%\] { flex: 1 0 100%; } .flex-shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .border-collapse { border-collapse: collapse; } .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } .cursor-grab { cursor: grab; } .cursor-not-allowed { cursor: not-allowed; } .cursor-pointer { cursor: pointer; } .touch-pan-x { --tw-pan-x: pan-x; touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } .touch-pan-y { --tw-pan-y: pan-y; touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize-none { resize: none; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-0\.5 { gap: 0.125rem; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-2\.5 { gap: 0.625rem; } .gap-3 { gap: 0.75rem; } .gap-3\.5 { gap: 0.875rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-\[11px\] { gap: 11px; } .gap-\[3px\] { gap: 3px; } .gap-\[5px\] { gap: 5px; } .gap-\[6px\] { gap: 6px; } .gap-\[7px\] { gap: 7px; } .gap-\[9px\] { gap: 9px; } .gap-px { gap: 1px; } .gap-x-4 { -moz-column-gap: 1rem; column-gap: 1rem; } .gap-x-\[14px\] { -moz-column-gap: 14px; column-gap: 14px; } .gap-y-1 { row-gap: 0.25rem; } .gap-y-2 { row-gap: 0.5rem; } .self-stretch { align-self: stretch; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-ellipsis { text-overflow: ellipsis; } .whitespace-nowrap { white-space: nowrap; } .text-wrap { text-wrap: wrap; } .rounded { border-radius: var(--radius); } .rounded-2xl { border-radius: 1rem; } .rounded-\[--radius-lg\] { border-radius: var(--radius-lg); } .rounded-\[10px\] { border-radius: 10px; } .rounded-\[11px\] { border-radius: 11px; } .rounded-\[12px\] { border-radius: 12px; } .rounded-\[26px\] { border-radius: 26px; } .rounded-\[3px\] { border-radius: 3px; } .rounded-\[4px\] { border-radius: 4px; } .rounded-\[5px\] { border-radius: 5px; } .rounded-\[6px\] { border-radius: 6px; } .rounded-\[7px\] { border-radius: 7px; } .rounded-\[8px\] { border-radius: 8px; } .rounded-\[9px\] { border-radius: 9px; } .rounded-\[calc\(var\(--radius-sm\)-2px\)\] { border-radius: calc(var(--radius-sm) - 2px); } .rounded-\[var\(--radius\)\] { border-radius: var(--radius); } .rounded-\[var\(--radius-lg\)\] { border-radius: var(--radius-lg); } .rounded-\[var\(--radius-sm\)\] { border-radius: var(--radius-sm); } .rounded-full { border-radius: var(--radius-full); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-t-3xl { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; } .rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .border { border-width: 1px; } .border-0 { border-width: 0px; } .border-2 { border-width: 2px; } .border-y { border-top-width: 1px; border-bottom-width: 1px; } .border-b { border-bottom-width: 1px; } .border-r { border-right-width: 1px; } .border-t { border-top-width: 1px; } .border-none { border-style: none; } .border-\[--border\] { border-color: var(--border); } .border-\[var\(--c-app-accent\)\] { border-color: var(--c-app-accent); } .border-border { border-color: var(--border); } .border-border-soft { border-color: var(--border-soft); } .border-border-strong { border-color: var(--border-strong); } .border-brand { border-color: var(--c-brand); } .border-current { border-color: currentColor; } .border-danger-text { border-color: var(--c-danger-text); } .border-text-3 { border-color: var(--text-3); } .border-theme-border { border-color: var(--theme-border); } .border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); } .border-t-transparent { border-top-color: transparent; } .bg-\[--bg-panel\] { background-color: var(--bg-panel); } .bg-\[var\(--bg\)\] { background-color: var(--bg); } .bg-\[var\(--brand-soft\)\] { background-color: var(--brand-soft); } .bg-\[var\(--c-brand-tint\)\] { background-color: var(--c-brand-tint); } .bg-activebg { background-color: var(--bg-active); } .bg-bg { background-color: var(--bg); } .bg-border { background-color: var(--border); } .bg-border-strong { background-color: var(--border-strong); } .bg-brand { background-color: var(--c-brand); } .bg-brand-soft { background-color: var(--brand-soft); } .bg-elev { background-color: var(--bg-elev); } .bg-hover { background-color: var(--bg-hover); } .bg-info-soft { background-color: var(--c-info-soft); } .bg-inset { background-color: var(--bg-inset); } .bg-panel { background-color: var(--bg-panel); } .bg-text-4 { background-color: var(--text-4); } .bg-transparent { background-color: transparent; } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-grad-panel { background-image: var(--grad-panel); } .bg-sidebar { background-image: var(--bg-sidebar); } .p-0 { padding: 0px; } .p-0\.5 { padding: 0.125rem; } .p-1 { padding: 0.25rem; } .p-1\.5 { padding: 0.375rem; } .p-2 { padding: 0.5rem; } .p-2\.5 { padding: 0.625rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-\[2px\] { padding: 2px; } .px-0\.5 { padding-left: 0.125rem; padding-right: 0.125rem; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } .px-12 { padding-left: 3rem; padding-right: 3rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-\[11px\] { padding-left: 11px; padding-right: 11px; } .px-\[14px\] { padding-left: 14px; padding-right: 14px; } .px-\[18\/22px\] { padding-left: 18/22px; padding-right: 18/22px; } .px-\[18px\] { padding-left: 18px; padding-right: 18px; } .px-\[5px\] { padding-left: 5px; padding-right: 5px; } .px-\[7px\] { padding-left: 7px; padding-right: 7px; } .px-\[9px\] { padding-left: 9px; padding-right: 9px; } .py-0 { padding-top: 0px; padding-bottom: 0px; } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-\[11px\] { padding-top: 11px; padding-bottom: 11px; } .py-\[14px\] { padding-top: 14px; padding-bottom: 14px; } .py-\[26px\] { padding-top: 26px; padding-bottom: 26px; } .py-\[2px\] { padding-top: 2px; padding-bottom: 2px; } .py-\[3px\] { padding-top: 3px; padding-bottom: 3px; } .py-\[5px\] { padding-top: 5px; padding-bottom: 5px; } .py-\[7px\] { padding-top: 7px; padding-bottom: 7px; } .py-\[9px\] { padding-top: 9px; padding-bottom: 9px; } .py-px { padding-top: 1px; padding-bottom: 1px; } .pb-1 { padding-bottom: 0.25rem; } .pb-1\.5 { padding-bottom: 0.375rem; } .pb-14 { padding-bottom: 3.5rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-2\.5 { padding-bottom: 0.625rem; } .pb-3 { padding-bottom: 0.75rem; } .pb-3\.5 { padding-bottom: 0.875rem; } .pb-8 { padding-bottom: 2rem; } .pb-\[14px\] { padding-bottom: 14px; } .pb-\[7px\] { padding-bottom: 7px; } .pl-2 { padding-left: 0.5rem; } .pl-2\.5 { padding-left: 0.625rem; } .pl-3 { padding-left: 0.75rem; } .pl-8 { padding-left: 2rem; } .pl-\[31px\] { padding-left: 31px; } .pl-\[7px\] { padding-left: 7px; } .pr-2\.5 { padding-right: 0.625rem; } .pr-3 { padding-right: 0.75rem; } .pr-8 { padding-right: 2rem; } .pr-\[9px\] { padding-right: 9px; } .pt-0\.5 { padding-top: 0.125rem; } .pt-1 { padding-top: 0.25rem; } .pt-1\.5 { padding-top: 0.375rem; } .pt-2 { padding-top: 0.5rem; } .pt-2\.5 { padding-top: 0.625rem; } .pt-3 { padding-top: 0.75rem; } .pt-3\.5 { padding-top: 0.875rem; } .pt-9 { padding-top: 2.25rem; } .pt-\[14px\] { padding-top: 14px; } .pt-\[15px\] { padding-top: 15px; } .pt-px { padding-top: 1px; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .font-display { font-family: var(--font-serif); } .font-mono { font-family: var(--font-mono); } .font-ui { font-family: var(--font); } .text-\[10\.5px\] { font-size: 10.5px; } .text-\[10px\] { font-size: 10px; } .text-\[11\.5px\] { font-size: 11.5px; } .text-\[11px\] { font-size: 11px; } .text-\[12\.5px\] { font-size: 12.5px; } .text-\[12px\] { font-size: 12px; } .text-\[13\.5px\] { font-size: 13.5px; } .text-\[13px\] { font-size: 13px; } .text-\[15\.5px\] { font-size: 15.5px; } .text-\[15px\] { font-size: 15px; } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-md { font-size: var(--text-md); } .text-sm { font-size: var(--text-sm); } .text-xl { font-size: var(--text-xl); } .text-xs { font-size: var(--text-xs); } .font-\[450\] { font-weight: 450; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .italic { font-style: italic; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .leading-\[1\.12\] { line-height: 1.12; } .leading-\[1\.15\] { line-height: 1.15; } .leading-\[1\.1\] { line-height: 1.1; } .leading-\[1\.25\] { line-height: 1.25; } .leading-\[1\.4\] { line-height: 1.4; } .leading-\[1\.5\] { line-height: 1.5; } .leading-\[15px\] { line-height: 15px; } .leading-\[17px\] { line-height: 17px; } .leading-relaxed { line-height: 1.625; } .leading-snug { line-height: 1.375; } .leading-tight { line-height: 1.25; } .tracking-\[-0\.015em\] { letter-spacing: -0.015em; } .tracking-\[-0\.01em\] { letter-spacing: -0.01em; } .tracking-\[-0\.03em\] { letter-spacing: -0.03em; } .tracking-\[\.04em\] { letter-spacing: .04em; } .tracking-\[\.06em\] { letter-spacing: .06em; } .tracking-\[\.07em\] { letter-spacing: .07em; } .text-\[\#1A1B2E\] { --tw-text-opacity: 1; color: rgb(26 27 46 / var(--tw-text-opacity, 1)); } .text-\[--text-2\] { color: var(--text-2); } .text-\[--text-3\] { color: var(--text-3); } .text-\[--text-4\] { color: var(--text-4); } .text-\[--text\] { color: var(--text); } .text-\[var\(--brand-ink\)\] { color: var(--brand-ink); } .text-\[var\(--c-brand\)\] { color: var(--c-brand); } .text-\[var\(--text-2\)\] { color: var(--text-2); } .text-brand { color: var(--c-brand); } .text-danger-text { color: var(--c-danger-text); } .text-muted { color: var(--text-3); } .text-success { color: var(--c-success); } .text-text { color: var(--text); } .text-text-2 { color: var(--text-2); } .text-text-3 { color: var(--text-3); } .text-text-4 { color: var(--text-4); } .text-theme-on-primary { color: var(--theme-on-primary); } .text-warning-text { color: var(--c-warning-text); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .underline { text-decoration-line: underline; } .line-through { text-decoration-line: line-through; } .accent-\[var\(--c-app-accent\)\] { accent-color: var(--c-app-accent); } .accent-\[var\(--c-brand\)\] { accent-color: var(--c-brand); } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-85 { opacity: 0.85; } .opacity-90 { opacity: 0.9; } .shadow { --tw-shadow: var(--shadow); --tw-shadow-colored: var(--shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_0_0_1px_var\(--border\)\2c 0_14px_40px_rgba\(46\2c 46\2c 56\2c 0\.16\)\] { --tw-shadow: 0 0 0 1px var(--border),0 14px 40px rgba(46,46,56,0.16); --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 14px 40px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_0_0_2px_var\(--bg-panel\)\2c 0_0_0_3\.5px_var\(--text\)\] { --tw-shadow: 0 0 0 2px var(--bg-panel),0 0 0 3.5px var(--text); --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color), 0 0 0 3.5px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[inset_0_0_0_1px_var\(--border\)\2c 0_1px_0_var\(--border-soft\)\] { --tw-shadow: inset 0 0 0 1px var(--border),0 1px 0 var(--border-soft); --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color), 0 1px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[inset_0_0_0_1px_var\(--border\)\2c 0_1px_2px_rgba\(46\2c 46\2c 56\2c 0\.04\)\] { --tw-shadow: inset 0 0 0 1px var(--border),0 1px 2px rgba(46,46,56,0.04); --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[inset_0_0_0_1px_var\(--border\)\2c 0_1px_3px_rgba\(46\2c 46\2c 56\2c 0\.05\)\] { --tw-shadow: inset 0 0 0 1px var(--border),0 1px 3px rgba(46,46,56,0.05); --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { --tw-shadow: var(--shadow-lg); --tw-shadow-colored: var(--shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { --tw-shadow: var(--shadow-sm); --tw-shadow-colored: var(--shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[--shadow-lg\] { --tw-shadow-color: var(--shadow-lg); --tw-shadow: var(--tw-shadow-colored); } .outline-none { outline: 2px solid transparent; outline-offset: 2px; } .outline { outline-style: solid; } .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-inset { --tw-ring-inset: inset; } .ring-\[var\(--border\)\] { --tw-ring-color: var(--border); } .ring-\[var\(--c-app-accent\)\] { --tw-ring-color: var(--c-app-accent); } .ring-\[var\(--c-brand\)\] { --tw-ring-color: var(--c-brand); } .ring-focus { --tw-ring-color: var(--c-focus); } .ring-inset { --tw-ring-color: var(--bg-inset); } .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .backdrop-blur-sm { --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-filter { backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[color\2c background-color\2c border-color\2c box-shadow\] { transition-property: color,background-color,border-color,box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[color\2c background-color\2c border-color\2c transform\] { transition-property: color,background-color,border-color,transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[color\2c background-color\2c box-shadow\2c transform\2c filter\] { transition-property: color,background-color,box-shadow,transform,filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[color\2c background-color\2c box-shadow\] { transition-property: color,background-color,box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[color\2c background-color\2c transform\] { transition-property: color,background-color,transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[transform\2c opacity\] { transition-property: transform,opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-fast { transition-duration: var(--motion-fast); } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out { transition-timing-function: var(--ease-out); } .ease-spring { transition-timing-function: var(--ease-spring); } .\[-ms-overflow-style\:none\] { -ms-overflow-style: none; } .\[background\:var\(--bg-sidebar\)\] { background: var(--bg-sidebar); } .\[scrollbar-width\:none\] { scrollbar-width: none; } /* Globale Shell-Grundlagen, an das Design-Soll (theme.css body) angelehnt. */ html, body, #app { height: 100%; } /* Canvas-Hintergrund (Soll theme.css): radiale Farbwolken oben links/rechts über --bg; overflow hidden — die Shell scrollt nur in ihren Flächen. */ body { margin: 0; font-family: var(--font); color: var(--text); background: radial-gradient(1000px 420px at 14% -120px, color-mix(in oklab, var(--brand) 6%, transparent), transparent 70%), radial-gradient(900px 360px at 88% -100px, color-mix(in oklab, #4fb3dc 5%, transparent), transparent 70%), var(--bg); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01', 'cv11'; font-size: var(--text-base); line-height: var(--leading-normal); } /* Scroll-Fläche (Soll theme.css .scroll-y) — auch Ziel-Selektor von moStagger. */ .scroll-y { overflow-y: auto; } /* Dezente, schmale Scrollbalken wie in der Referenz. */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); } /* View Transitions: app-canvas (Gleiten) + nav-pill (Morph) kommen aus @vw/ui motion-tokens.css — hier bewusst KEINE Duplikate (konsolidiert). */ .placeholder\:text-text-3::-moz-placeholder { color: var(--text-3); } .placeholder\:text-text-3::placeholder { color: var(--text-3); } .placeholder\:text-text-4::-moz-placeholder { color: var(--text-4); } .placeholder\:text-text-4::placeholder { color: var(--text-4); } .backdrop\:bg-black\/20::backdrop { background-color: rgb(0 0 0 / 0.2); } .backdrop\:bg-black\/30::backdrop { background-color: rgb(0 0 0 / 0.3); } .backdrop\:backdrop-blur-\[2px\]::backdrop { --tw-backdrop-blur: blur(2px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .last\:border-0:last-child { border-width: 0px; } .hover\:-translate-y-px:hover { --tw-translate-y: -1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:border-border-strong:hover { border-color: var(--border-strong); } .hover\:bg-\[var\(--bg-inset\)\]:hover { background-color: var(--bg-inset); } .hover\:bg-\[var\(--c-brand-tint\)\]:hover { background-color: var(--c-brand-tint); } .hover\:bg-hover:hover { background-color: var(--bg-hover); } .hover\:text-\[--text-2\]:hover { color: var(--text-2); } .hover\:text-\[--text\]:hover { color: var(--text); } .hover\:text-\[var\(--c-brand\)\]:hover { color: var(--c-brand); } .hover\:text-text:hover { color: var(--text); } .hover\:opacity-100:hover { opacity: 1; } .hover\:brightness-\[1\.07\]:hover { --tw-brightness: brightness(1.07); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .focus-visible\:bg-hover:focus-visible { background-color: var(--bg-hover); } .focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; } .focus-visible\:ring-0:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-1:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-2:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-\[--c-focus\]:focus-visible { --tw-ring-color: var(--c-focus); } .focus-visible\:ring-\[var\(--c-brand\)\]:focus-visible { --tw-ring-color: var(--c-brand); } .focus-visible\:ring-focus:focus-visible { --tw-ring-color: var(--c-focus); } .focus-visible\:ring-white\/70:focus-visible { --tw-ring-color: rgb(255 255 255 / 0.7); } .focus-visible\:ring-offset-1:focus-visible { --tw-ring-offset-width: 1px; } .focus-visible\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; } .focus-visible\:ring-offset-\[--bg-panel\]:focus-visible { --tw-ring-offset-color: var(--bg-panel); } .focus-visible\:ring-offset-bg:focus-visible { --tw-ring-offset-color: var(--bg); } .focus-visible\:ring-offset-panel:focus-visible { --tw-ring-offset-color: var(--bg-panel); } .active\:cursor-grabbing:active { cursor: grabbing; } .disabled\:pointer-events-none:disabled { pointer-events: none; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:opacity-40:disabled { opacity: 0.4; } .disabled\:opacity-45:disabled { opacity: 0.45; } .disabled\:opacity-50:disabled { opacity: 0.5; } @media (min-width: 640px) { .sm\:order-none { order: 0; } .sm\:block { display: block; } .sm\:h-\[60px\] { height: 60px; } .sm\:min-w-\[250px\] { min-width: 250px; } .sm\:flex-none { flex: none; } .sm\:flex-nowrap { flex-wrap: nowrap; } .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .sm\:py-0 { padding-top: 0px; padding-bottom: 0px; } } .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar { display: none; } /* Switcher-Popover: dezenter Auftritt (fade + 4px slide-up). Nur transform/opacity. */ .vw-switch-pop-enter-active[data-v-368fe19e], .vw-switch-pop-leave-active[data-v-368fe19e] { transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); } .vw-switch-pop-enter-from[data-v-368fe19e], .vw-switch-pop-leave-to[data-v-368fe19e] { opacity: 0; transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .vw-switch-pop-enter-active[data-v-368fe19e], .vw-switch-pop-leave-active[data-v-368fe19e] { transition: none; } } /* Rail-Kachel (Soll RailTile): 44px, aktive Kachel mit color-mix-Tint + Inset-Ring. */ .vw-rail-tile[data-v-b3024ecc] { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 12px; background: transparent; color: var(--text-3); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .vw-rail-tile[data-v-b3024ecc]:hover:not(.is-active) { background: var(--bg-hover); color: var(--text); } .vw-rail-tile.is-active[data-v-b3024ecc] { background: color-mix(in oklab, var(--tile-accent, var(--brand)) 12%, white); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tile-accent, var(--brand)) 26%, white); color: var(--tile-accent, var(--brand)); } /* Badge auf der Rail-Kachel (Soll: Ring in Sidebar-Hintergrundfarbe). */ .vw-rail-badge[data-v-b3024ecc] { position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; color: white; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg); } /* Rail scrollbar, Scrollbar versteckt (Soll: scrollbarWidth none). */ .vw-rail-scroll[data-v-b3024ecc] { scrollbar-width: none; } .vw-rail-scroll[data-v-b3024ecc]::-webkit-scrollbar { display: none; } /* Tweaks-Popover: dezenter Auftritt. */ .vw-switch-pop-enter-active[data-v-b3024ecc], .vw-switch-pop-leave-active[data-v-b3024ecc] { transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); } .vw-switch-pop-enter-from[data-v-b3024ecc], .vw-switch-pop-leave-to[data-v-b3024ecc] { opacity: 0; transform: translateY(4px); } @media (prefers-reduced-motion: reduce) { .vw-rail-tile[data-v-b3024ecc], .vw-switch-pop-enter-active[data-v-b3024ecc], .vw-switch-pop-leave-active[data-v-b3024ecc] { transition: none; } } /* Drawer-Einzug mit Spring-Overshoot (Theme v2 --ease-spring). */ .cp-panel[data-v-1083b92f] { animation: cp-in-1083b92f calc(380ms * var(--mo, 1)) var(--ease-spring, cubic-bezier(0.34, 1.45, 0.5, 1)) both; } /* Glanzband im Gradient-Header (Kit-Look: feiner Lichtschein oben). */ .cp-head[data-v-1083b92f]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 40%); pointer-events: none; } .cp-fade-enter-active[data-v-1083b92f], .cp-fade-leave-active[data-v-1083b92f] { transition: opacity var(--t-med, 220ms) var(--ease-out, ease); } .cp-fade-enter-from[data-v-1083b92f], .cp-fade-leave-to[data-v-1083b92f] { opacity: 0; } .cp-dot[data-v-1083b92f] { display: inline-block; animation: cp-dot-1083b92f calc(1.2s * (2 - var(--mo, 1))) ease-in-out infinite; } @keyframes cp-in-1083b92f { from { transform: translateX(var(--theme-motion-drawer-slide, 16px)); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes cp-dot-1083b92f { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cp-panel[data-v-1083b92f], .cp-dot[data-v-1083b92f] { animation: none; } } /* Freigabe-Karte gleitet raus (Soll home.jsx ApprovalCard: grid-rows 1fr→0fr). */ .vw-approval-card[data-v-723a50c1] { display: grid; grid-template-rows: 1fr; opacity: 1; scale: 1; transition: grid-template-rows var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out), scale var(--t-med) var(--ease-out); } .vw-approval-card.is-leaving[data-v-723a50c1] { grid-template-rows: 0fr; opacity: 0; scale: 0.96; } @media (prefers-reduced-motion: reduce) { .vw-approval-card[data-v-723a50c1] { transition: none; } } /* App-Wechsel: kurzes Fade+Slide (an die globale app-canvas-Transition angelehnt). */ .ah-canvas-enter-active[data-v-eedeaea9] { transition: opacity calc(220ms * var(--mo, 1)) var(--ease-out), transform calc(220ms * var(--mo, 1)) var(--ease-out); } .ah-canvas-leave-active[data-v-eedeaea9] { transition: opacity calc(120ms * var(--mo, 1)) var(--ease-out), transform calc(120ms * var(--mo, 1)) var(--ease-out); } .ah-canvas-enter-from[data-v-eedeaea9] { opacity: 0; transform: translateY(8px); } .ah-canvas-leave-to[data-v-eedeaea9] { opacity: 0; transform: translateY(-6px); } /* Brand-Spinner (Kit-Look statt grauem Ring). */ .ah-spinner[data-v-eedeaea9] { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--brand) 22%, transparent); border-top-color: var(--brand); animation: ah-spin-eedeaea9 0.7s linear infinite; } @keyframes ah-spin-eedeaea9 { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ah-canvas-enter-active[data-v-eedeaea9], .ah-canvas-leave-active[data-v-eedeaea9] { transition: none; } .ah-spinner[data-v-eedeaea9] { animation: none; } } /* Detail-Sheet: Spring-Aufzug von der unteren Kante (Theme v2). */ .inbox-sheet[data-v-acde73f2] { animation: inbox-sheet-in-acde73f2 calc(360ms * var(--mo, 1)) var(--ease-spring, cubic-bezier(0.34, 1.45, 0.5, 1)) both; } @keyframes inbox-sheet-in-acde73f2 { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .inbox-sheet[data-v-acde73f2] { animation: none; } }