/* ============================================================================ contentag-premium.css · v1 · Content Agency Premium Theme ---------------------------------------------------------------------------- Übernimmt die Designsprache von contentag.com: · Void-Schwarz (#06070A) + Deep/Surface-Ebenen · Rost-Akzent (#C0431C / #E8552A) · Gilroy (Text) + Futurism (Display) — v5.50.8 im Plugin-Ordner fonts/ (vorher von draft.contentag.com nachgeladen) · scharfe Kanten, 1px-Haarlinien, Uppercase-Labels mit Sperrung Zwei Modi über das bestehende html[data-theme]: dark = "Void" (Standard, wie die Website) light = "Paper" (warmes Papier-Weiß, gleicher Akzent) LADEN: als LETZTES Stylesheet (head-snippet.php). Rollback: Zeile entfernen. ============================================================================ */ /* --------------------------------------------------------------------------- 0. Fonts --------------------------------------------------------------------------- */ @font-face{font-family:"Gilroy";src:url("fonts/gilroy-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Gilroy";src:url("fonts/gilroy-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Gilroy";src:url("fonts/gilroy-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Gilroy";src:url("fonts/gilroy-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Gilroy";src:url("fonts/gilroy-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Futurism";src:url("fonts/Futurism.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} /* --------------------------------------------------------------------------- 1. Tokens --------------------------------------------------------------------------- */ :root, html[data-theme="dark"] { color-scheme: dark; --cp-void: #06070A; --cp-deep: #0A0C11; --cp-bg: var(--cp-deep); /* v5.76.7: war nirgends definiert – var(--cp-bg, #0b0d12) blieb im hellen Modus dunkel */ --cp-surface: #10131A; --cp-surface-2: #161A23; --cp-surface-3: #1C212C; --cp-hover: rgba(238,240,244,.045); --cp-line: rgba(238,240,244,.09); --cp-line-2: rgba(238,240,244,.16); --cp-text: #E4E5E4; --cp-strong: #F6F6F4; --cp-muted: #9BA2AA; --cp-dim: #7E858E; --cp-rust: #C0431C; --cp-rust-hi: #E8552A; --cp-rust-soft: rgba(232,85,42,.12); --cp-rust-line: rgba(232,85,42,.38); --cp-glow: #E9DCC8; --cp-on-rust: #FFFFFF; --cp-success: #3FB984; --cp-warning: #E0A53A; --cp-danger: #E5484D; --cp-info: #6CA6D9; --cp-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.8); --cp-shadow-pop:0 24px 60px -18px rgba(0,0,0,.85), 0 0 0 1px var(--cp-line-2); --cp-body-bg: radial-gradient(1100px 520px at 78% -12%, rgba(233,220,200,.055), transparent 62%), radial-gradient(900px 480px at 100% 0%, rgba(192,67,28,.07), transparent 60%), var(--cp-void); } html[data-theme="light"] { color-scheme: light; --cp-void: #EFEFEC; --cp-deep: #F7F7F5; --cp-bg: var(--cp-deep); --cp-surface: #FFFFFF; --cp-surface-2: #F6F6F3; --cp-surface-3: #EDEDEA; --cp-hover: rgba(10,12,17,.035); --cp-line: rgba(10,12,17,.09); --cp-line-2: rgba(10,12,17,.16); --cp-text: #1B1E24; --cp-strong: #06070A; --cp-muted: #545A62; --cp-dim: #5F656D; /* v5.76.7: vorher #6B7179 – auf Flächen knapp unter 4,5 : 1 */ --cp-rust: #C0431C; --cp-rust-hi: #B83E19; --cp-rust-soft: rgba(192,67,28,.08); --cp-rust-line: rgba(192,67,28,.35); --cp-glow: #E9DCC8; --cp-on-rust: #FFFFFF; --cp-success: #177A50; /* v5.76.7: dunkler für Lesbarkeit als Textfarbe (vorher #1F9D67, 3,2 : 1) */ --cp-warning: #93600F; /* v5.76.7 (vorher #B7791F, 3,6 : 1) */ --cp-danger: #B8282E; /* v5.76.7 (vorher #D1343A, 4,3 : 1 auf hellem Rot) */ --cp-info: #2F6FA8; --cp-shadow: 0 1px 2px rgba(10,12,17,.04), 0 12px 32px -22px rgba(10,12,17,.25); --cp-shadow-pop:0 24px 60px -20px rgba(10,12,17,.3), 0 0 0 1px var(--cp-line-2); --cp-body-bg: radial-gradient(1100px 520px at 80% -14%, rgba(233,220,200,.55), transparent 62%), var(--cp-void); } :root { --cp-font: "Gilroy", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --cp-display: "Futurism", "Gilroy", ui-sans-serif, sans-serif; --cp-r: 3px; --cp-r-sm: 2px; /* Motion-System (v5.9): 5 Dauern + 4 Kurven. Alles, was sich bewegt, nutzt NUR diese Tokens → einheitliches Tempo; „Animationen reduzieren“ setzt sie zentral auf ~0. */ --cp-dur-xs: 120ms; /* Druck-Feedback, Tooltips */ --cp-dur-s: 180ms; /* Farbe, Rahmen, Hover */ --cp-dur-m: 260ms; /* kleine Bewegungen, Karten-Hover */ --cp-dur-l: 400ms; /* Panels, Modals, Eintritte */ --cp-dur-xl: 560ms; /* Seiten- und Hero-Choreografie */ --cp-e: cubic-bezier(.16,1,.3,1); /* Ankommen (expo-out) – Markenkurve */ --cp-ease: cubic-bezier(.2,0,0,1); /* Standard: Farbe, Deckkraft */ --cp-ease-in: cubic-bezier(.4,0,1,1); /* Verlassen */ --cp-ease-io: cubic-bezier(.65,0,.35,1); /* Hin und zurück, Schleifen */ --cp-t: var(--cp-dur-m) var(--cp-e); /* Bestehende Token-Systeme auf die neue Palette umbiegen */ --mui-primary: var(--cp-rust); --mui-primary-600: var(--cp-rust); --mui-primary-700: var(--cp-rust); --mui-accent: var(--cp-rust-hi); --mui-accent-2: var(--cp-rust-hi); --mui-grad-primary: linear-gradient(180deg, var(--cp-rust-hi), var(--cp-rust)); --mui-grad-soft: var(--cp-rust-soft); --mui-grad-bg: var(--cp-void); --mui-bg: var(--cp-void); --mui-surface: var(--cp-surface); --mui-surface-2: var(--cp-surface-2); --mui-border: var(--cp-line); --mui-border-strong: var(--cp-line-2); --mui-shadow: var(--cp-shadow); --mui-shadow-lg: var(--cp-shadow-pop); --mui-blur: 0px; --mui-text: var(--cp-text); --mui-text-muted: var(--cp-muted); --mui-text-soft: var(--cp-dim); --mui-success: var(--cp-success); --mui-warning: var(--cp-warning); --mui-danger: var(--cp-danger); --mui-info: var(--cp-info); --mui-r-sm: var(--cp-r-sm); --mui-r: var(--cp-r); --mui-r-lg: var(--cp-r); --mui-r-xl: var(--cp-r); --ca-bg: var(--cp-void); --ca-surface: var(--cp-surface); --ca-border: var(--cp-line); --ca-border-hover: var(--cp-line-2); --ca-text: var(--cp-text); --ca-text-2: var(--cp-muted); --ca-text-3: var(--cp-dim); --ca-accent: var(--cp-rust); --ca-accent-soft: var(--cp-rust-soft); --ca-hover: var(--cp-hover); --ca-radius: var(--cp-r); --ca-radius-lg: var(--cp-r); --ca-font: var(--cp-font); --bs-primary: #C0431C; --bs-primary-rgb: 192,67,28; --bs-link-color: var(--cp-rust-hi); --bs-link-hover-color: var(--cp-rust-hi); --bs-border-radius: var(--cp-r); } /* --------------------------------------------------------------------------- 2. Basis --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body, html[data-theme]:not(#cp) body input, html[data-theme]:not(#cp) body button, html[data-theme]:not(#cp) body select, html[data-theme]:not(#cp) body textarea, html[data-theme]:not(#cp) body .btn, html[data-theme]:not(#cp) body .form-control, html[data-theme]:not(#cp) body .dropdown-menu, html[data-theme]:not(#cp) body .select2-container, html[data-theme]:not(#cp) body .modal, html[data-theme]:not(#cp) body table { font-family: var(--cp-font) !important; } html[data-theme]:not(#cp) body { background: var(--cp-body-bg) fixed !important; color: var(--cp-text) !important; font-weight: 400; letter-spacing: .005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html[data-theme]:not(#cp) body .page-container, html[data-theme]:not(#cp) body .scrollable-page, html[data-theme]:not(#cp) body #page-content, html[data-theme]:not(#cp) body .page-wrapper { background: transparent !important; } html[data-theme]:not(#cp) body h1, html[data-theme]:not(#cp) body h2, html[data-theme]:not(#cp) body h3, html[data-theme]:not(#cp) body h4, html[data-theme]:not(#cp) body h5, html[data-theme]:not(#cp) body h6, html[data-theme]:not(#cp) body strong, html[data-theme]:not(#cp) body b, html[data-theme]:not(#cp) body .strong { color: var(--cp-strong); } html[data-theme]:not(#cp) body h1, html[data-theme]:not(#cp) body h2, html[data-theme]:not(#cp) body h3, html[data-theme]:not(#cp) body h4 { font-weight: 500 !important; letter-spacing: -.005em; } html[data-theme]:not(#cp) body a { color: var(--cp-rust-hi); transition: color var(--cp-t); } html[data-theme]:not(#cp) body a:hover { color: var(--cp-strong); } html[data-theme]:not(#cp) body .text-muted, html[data-theme]:not(#cp) body .text-off, html[data-theme]:not(#cp) body small.text-muted { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .text-primary { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .text-danger { color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .text-success { color: var(--cp-success) !important; } html[data-theme]:not(#cp) body .text-warning { color: var(--cp-warning) !important; } html[data-theme]:not(#cp) body .text-info { color: var(--cp-info) !important; } html[data-theme]:not(#cp) body .bg-white, html[data-theme]:not(#cp) body .bg-light, html[data-theme]:not(#cp) body .bg-body { background-color: var(--cp-surface) !important; color: var(--cp-text); } html[data-theme]:not(#cp) body .b-t, html[data-theme]:not(#cp) body .b-b, html[data-theme]:not(#cp) body .b-l, html[data-theme]:not(#cp) body .b-r, html[data-theme]:not(#cp) body .b-a, html[data-theme]:not(#cp) body hr { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body hr { opacity: 1; } ::selection { background: var(--cp-rust); color: #fff; } /* Scrollbars */ html[data-theme]:not(#cp) body * { scrollbar-width: thin; scrollbar-color: var(--cp-line-2) transparent; } html[data-theme]:not(#cp) body ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme]:not(#cp) body ::-webkit-scrollbar-track { background: transparent; } html[data-theme]:not(#cp) body ::-webkit-scrollbar-thumb { background: var(--cp-line-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } html[data-theme]:not(#cp) body ::-webkit-scrollbar-thumb:hover { background: var(--cp-dim); background-clip: padding-box; } /* Fokus sichtbar, aber ruhig */ html[data-theme]:not(#cp) body :focus-visible { outline: 1px solid var(--cp-rust-hi) !important; outline-offset: 2px; } /* --------------------------------------------------------------------------- 3. Topbar --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body #default-navbar, html[data-theme]:not(#cp) body .navbar-custom { background: color-mix(in srgb, var(--cp-deep) 82%, transparent) !important; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--cp-line) !important; box-shadow: none !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body #default-navbar .nav-link, html[data-theme]:not(#cp) body #default-navbar .navbar-nav > li > a, html[data-theme]:not(#cp) body #default-navbar .dropdown-toggle, html[data-theme]:not(#cp) body #default-navbar .icon, html[data-theme]:not(#cp) body #default-navbar svg { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body #default-navbar .nav-link:hover, html[data-theme]:not(#cp) body #default-navbar a:hover svg, html[data-theme]:not(#cp) body #default-navbar .dropdown-toggle:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #default-navbar .nav-link, html[data-theme]:not(#cp) body #default-navbar .mui-theme-toggle, html[data-theme]:not(#cp) body #default-navbar .navbar-nav > li > a.dropdown-toggle { border-radius: var(--cp-r) !important; transition: background var(--cp-t), color var(--cp-t); } html[data-theme]:not(#cp) body #default-navbar .nav-link:hover, html[data-theme]:not(#cp) body #default-navbar .mui-theme-toggle:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body #default-navbar .user-name, html[data-theme]:not(#cp) body #default-navbar .dropdown-toggle span { color: var(--cp-text) !important; font-weight: 500; } html[data-theme]:not(#cp) body #default-navbar .badge { background: var(--cp-rust) !important; color: #fff !important; box-shadow: 0 0 0 2px var(--cp-deep); } /* runde Pill-Buttons der Plugins in der Topbar → eckige Ghost-Buttons */ html[data-theme]:not(#cp) body #default-navbar [class*="rst-"][class*="btn"], html[data-theme]:not(#cp) body #default-navbar .rst-topbar-btn, html[data-theme]:not(#cp) body #default-navbar button:not(.btn-primary) { border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body .mui-theme-toggle { background: transparent !important; border: 1px solid var(--cp-line) !important; color: var(--cp-muted) !important; box-shadow: none !important; } /* --------------------------------------------------------------------------- 4. Sidebar --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .sidebar, html[data-theme]:not(#cp) body .sidebar .sidebar-scroll { background: var(--cp-deep) !important; border-right: 1px solid var(--cp-line) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-scroll { border-right: 0 !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-brand { background: var(--cp-deep) !important; border-bottom: 1px solid var(--cp-line) !important; border-right: 1px solid var(--cp-line) !important; } html[data-theme="dark"] body .sidebar .sidebar-brand:not(.brand-logo-mini) img { filter: invert(1) brightness(1.15); } /* v5.75.5: nur der Schriftzug wird umgefärbt – das Zeichen der eingeklappten Leiste (Favicon: dunkle Kachel mit Rust-Hexagon) bleibt wie im Hell-Modus */ /* v5.75.5: modern-ui.css macht im dunklen Modus jedes img.dashboard-image per „brightness(0) invert(1) !important“ zur weißen Silhouette – das Zeichen der eingeklappten Leiste (Favicon: dunkle Kachel mit Rust-Hexagon) bleibt farbig wie im Hell-Modus */ html[data-theme="dark"]:not(#cp) body .sidebar .sidebar-brand.brand-logo-mini img.dashboard-image { filter: none !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu { padding: 6px 10px 24px !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li > a, html[data-theme]:not(#cp) body .sidebar .sidebar-menu li a { color: var(--cp-muted) !important; font-weight: 500 !important; font-size: 13.5px !important; letter-spacing: .01em; border-radius: var(--cp-r) !important; background: transparent !important; box-shadow: none !important; position: relative; transition: color var(--cp-t), background var(--cp-t) !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu li a .icon, html[data-theme]:not(#cp) body .sidebar .sidebar-menu li a svg { color: var(--cp-dim) !important; stroke-width: 1.6; transition: color var(--cp-t); } html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li > a:hover, html[data-theme]:not(#cp) body .sidebar .sidebar-menu li ul li a:hover { color: var(--cp-strong) !important; background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li > a:hover svg { color: var(--cp-text) !important; } /* aktiv: Haarlinie in Rost + warmer Schimmer */ html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li.active > a, html[data-theme]:not(#cp) body .sidebar .sidebar-menu li.active > a, html[data-theme]:not(#cp) body .sidebar .sidebar-menu li a.active { color: var(--cp-strong) !important; background: linear-gradient(90deg, var(--cp-rust-soft), transparent 85%) !important; box-shadow: none !important; } /* Aktiv-Balken auf ::after — ::before gehört dem Aufklapp-Pfeil der Untermenüs */ html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li.active:not(.expand) > a::after, html[data-theme]:not(#cp) body .sidebar .sidebar-menu li li.active > a::after { content: "" !important; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 2px; border-radius: 0 2px 2px 0; background: var(--cp-rust-hi) !important; box-shadow: 0 0 12px rgba(232,85,42,.7); display: block !important; animation: cp-bar-in var(--cp-dur-l) var(--cp-e) both; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu li li.active > a::after { left: -4px; top: 6px; bottom: 6px; } /* Aufklapp-Pfeil: dezent, dreht sanft */ html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li.expand > a::before { border-color: var(--cp-dim) !important; background: transparent !important; box-shadow: none !important; transition: transform var(--cp-dur-m) var(--cp-e), border-color var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li.expand > a:hover::before { border-color: var(--cp-text) !important; } @keyframes cp-bar-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } html[data-theme]:not(#cp) body .sidebar .sidebar-menu li.active > a svg, html[data-theme]:not(#cp) body .sidebar .sidebar-menu li a.active svg { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu li ul { background: transparent !important; border: 0 !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu li ul li a { font-size: 13px !important; } /* Gruppen-Label wie auf der Website: ● ÜBERSICHT */ html[data-theme]:not(#cp) body .sidebar .sidebar-menu .ca-nav-group { padding: 18px 12px 6px !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu .ca-nav-group span { font-size: 10px !important; font-weight: 500 !important; letter-spacing: .2em !important; color: var(--cp-dim) !important; display: inline-flex; align-items: center; gap: 9px; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu .ca-nav-group span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cp-rust); box-shadow: 0 0 8px rgba(232,85,42,.55); } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu .ca-nav-group::after { background: var(--cp-line) !important; } html[data-theme]:not(#cp) body .sidebar .badge { background: var(--cp-rust) !important; color: #fff !important; } /* --------------------------------------------------------------------------- 5. Karten / Panels --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .card, html[data-theme]:not(#cp) body .panel, html[data-theme]:not(#cp) body .box, html[data-theme]:not(#cp) body .rst-inline-page-card, html[data-theme]:not(#cp) body .page-wrapper > .card { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow) !important; color: var(--cp-text); backdrop-filter: none !important; } html[data-theme]:not(#cp) body .card .card, html[data-theme]:not(#cp) body .card .panel { box-shadow: none !important; background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body a.white-link .card, html[data-theme]:not(#cp) body .dashboard-icon-widget { transition: border-color var(--cp-t), transform var(--cp-t), box-shadow var(--cp-t) !important; } html[data-theme]:not(#cp) body a.white-link:hover .card, html[data-theme]:not(#cp) body .dashboard-icon-widget:hover { border-color: var(--cp-rust-line) !important; transform: translateY(-1px); } html[data-theme]:not(#cp) body .card-header, html[data-theme]:not(#cp) body .card .card-header, html[data-theme]:not(#cp) body .panel-heading, html[data-theme]:not(#cp) body .page-title, html[data-theme]:not(#cp) body .card-footer { background: transparent !important; border-color: var(--cp-line) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .card-header, html[data-theme]:not(#cp) body .card-footer { border-radius: 0 !important; } html[data-theme]:not(#cp) body .card-header h1, html[data-theme]:not(#cp) body .card-header h4, html[data-theme]:not(#cp) body .card-header .card-title, html[data-theme]:not(#cp) body .card-header span:not(.badge) { font-size: 14px !important; font-weight: 500 !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .card-header svg { color: var(--cp-rust-hi) !important; } /* Seiten-Titel: Display-Schrift wie die Website-Headlines */ html[data-theme]:not(#cp) body .page-title { border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .page-title h1, html[data-theme]:not(#cp) body .page-title .page-title-text, html[data-theme]:not(#cp) body .rst-inline-page-card h1 { font-family: var(--cp-font) !important; font-weight: 500 !important; font-size: 15px !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--cp-strong) !important; } /* Dashboard-Icon-Widgets (Kennzahlen) */ html[data-theme]:not(#cp) body .dashboard-icon-widget .widget-icon { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; border-radius: var(--cp-r) !important; border: 1px solid var(--cp-rust-line); } html[data-theme]:not(#cp) body .dashboard-icon-widget .widget-icon svg { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .dashboard-icon-widget .widget-details h1 { font-weight: 500 !important; letter-spacing: -.02em; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .dashboard-icon-widget .widget-details span { color: var(--cp-muted) !important; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } /* --------------------------------------------------------------------------- 6. Buttons --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .btn { border-radius: var(--cp-r-sm) !important; font-weight: 500 !important; letter-spacing: .02em; box-shadow: none !important; transition: background var(--cp-t), border-color var(--cp-t), color var(--cp-t), transform var(--cp-dur-xs) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .btn:active { transform: translateY(1px); } html[data-theme]:not(#cp) body .btn-default, html[data-theme]:not(#cp) body .btn-light, html[data-theme]:not(#cp) body .btn-outline-light, html[data-theme]:not(#cp) body .btn-secondary { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .btn-default:hover, html[data-theme]:not(#cp) body .btn-light:hover, html[data-theme]:not(#cp) body .btn-secondary:hover { border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; background: var(--cp-surface-3) !important; } html[data-theme]:not(#cp) body .btn-default svg, html[data-theme]:not(#cp) body .btn-light svg { color: var(--cp-muted); } html[data-theme]:not(#cp) body .btn-default:hover svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .btn-primary, html[data-theme]:not(#cp) body .btn-info, html[data-theme]:not(#cp) body .rst-cal2-btn-primary, html[data-theme]:not(#cp) body [class*="rst-"][class*="btn-primary"] { background: var(--cp-rust) !important; background-image: none !important; border: 1px solid var(--cp-rust) !important; color: var(--cp-on-rust) !important; text-transform: uppercase; font-size: 11.5px !important; letter-spacing: .12em !important; font-weight: 600 !important; } html[data-theme]:not(#cp) body .btn-primary:hover, html[data-theme]:not(#cp) body .btn-info:hover, html[data-theme]:not(#cp) body .rst-cal2-btn-primary:hover { background: var(--cp-rust-hi) !important; border-color: var(--cp-rust-hi) !important; box-shadow: 0 8px 22px -12px rgba(0,0,0,.55) !important; } html[data-theme]:not(#cp) body .btn-primary svg, html[data-theme]:not(#cp) body .btn-info svg { color: #fff !important; } html[data-theme]:not(#cp) body .btn-success { background: var(--cp-success) !important; border-color: var(--cp-success) !important; color: #fff !important; } html[data-theme]:not(#cp) body .btn-danger { background: var(--cp-danger) !important; border-color: var(--cp-danger) !important; color: #fff !important; } html[data-theme]:not(#cp) body .btn-warning { background: var(--cp-warning) !important; border-color: var(--cp-warning) !important; color: #111 !important; } html[data-theme]:not(#cp) body .btn-outline-primary { color: var(--cp-rust-hi) !important; border-color: var(--cp-rust-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .btn-outline-primary:hover { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .btn-group > .btn.active, html[data-theme]:not(#cp) body .btn-group > .btn:active { background: var(--cp-surface-3) !important; border-color: var(--cp-line-2) !important; color: var(--cp-strong) !important; } /* --------------------------------------------------------------------------- 7. Tabs --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .nav-tabs { background: transparent !important; border-bottom: 1px solid var(--cp-line) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .nav-tabs.title { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) var(--cp-r) 0 0 !important; } html[data-theme]:not(#cp) body .nav-tabs .nav-link, html[data-theme]:not(#cp) body .nav-tabs > li > a { color: var(--cp-muted) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font-weight: 500 !important; font-size: 11.5px !important; letter-spacing: .14em; text-transform: uppercase; position: relative; } html[data-theme]:not(#cp) body .nav-tabs .nav-link:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .nav-tabs .nav-link.active, html[data-theme]:not(#cp) body .nav-tabs > li.active > a { color: var(--cp-strong) !important; box-shadow: inset 0 -2px 0 var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .nav-pills .nav-link.active { background: var(--cp-rust) !important; color: #fff !important; border-radius: var(--cp-r-sm) !important; } /* --------------------------------------------------------------------------- 8. Tabellen / DataTables --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body table:not(.invoice-preview-container table):not(.cp-einv-doc table):not(.note-editable table), html[data-theme]:not(#cp) body .table, html[data-theme]:not(#cp) body table.dataTable { --bs-table-bg: transparent; --bs-table-color: var(--cp-text); --bs-table-hover-bg: var(--cp-hover); --bs-table-striped-bg: transparent; color: var(--cp-text) !important; background: transparent !important; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body table:not(.invoice-preview-container table):not(.cp-einv-doc table):not(.note-editable table) thead th, html[data-theme]:not(#cp) body table.dataTable thead th, html[data-theme]:not(#cp) body .table > thead > tr > th { background: transparent !important; color: var(--cp-dim) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase; border-bottom: 1px solid var(--cp-line) !important; border-top: 0 !important; } html[data-theme]:not(#cp) body table tbody td:not(.note-editable td):not(.invoice-preview-container td):not(.cp-einv-doc td), html[data-theme]:not(#cp) body table.dataTable tbody td, html[data-theme]:not(#cp) body .table > tbody > tr > td { background: transparent !important; border-color: var(--cp-line) !important; color: var(--cp-text) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body table.dataTable tbody tr, html[data-theme]:not(#cp) body .table tbody tr { background: transparent !important; transition: background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body table.dataTable tbody tr:hover > td, html[data-theme]:not(#cp) body .table-hover tbody tr:hover > td { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body table.dataTable tbody tr.active > td, html[data-theme]:not(#cp) body table tbody tr.active > td { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body table tbody td a:not(.btn) { color: var(--cp-strong); font-weight: 500; } html[data-theme]:not(#cp) body table tbody td a:not(.btn):hover { color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body table tbody td .edit, html[data-theme]:not(#cp) body table tbody td .delete, html[data-theme]:not(#cp) body table tbody td a svg { color: var(--cp-dim); } html[data-theme]:not(#cp) body table tbody td a:hover svg { color: var(--cp-rust-hi); } /* Tabellen-Toolbar & Pagination */ html[data-theme]:not(#cp) body .dt-paging .dt-paging-button, html[data-theme]:not(#cp) body .dataTables_paginate .paginate_button, html[data-theme]:not(#cp) body .pagination .page-link { background: transparent !important; border: 1px solid var(--cp-line) !important; color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .dt-paging .dt-paging-button.current, html[data-theme]:not(#cp) body .dataTables_paginate .paginate_button.current, html[data-theme]:not(#cp) body .pagination .active .page-link, html[data-theme]:not(#cp) body .page-item.active .page-link { background: var(--cp-rust) !important; border-color: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body .dt-paging .dt-paging-button:hover:not(.current) { color: var(--cp-strong) !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .dt-info, html[data-theme]:not(#cp) body .dataTables_info { color: var(--cp-dim) !important; } /* --------------------------------------------------------------------------- 9. Formulare --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .form-control, html[data-theme]:not(#cp) body .form-select, html[data-theme]:not(#cp) body input[type="text"], html[data-theme]:not(#cp) body input[type="email"], html[data-theme]:not(#cp) body input[type="search"], html[data-theme]:not(#cp) body input[type="number"], html[data-theme]:not(#cp) body input[type="password"], html[data-theme]:not(#cp) body input[type="url"], html[data-theme]:not(#cp) body input[type="tel"], html[data-theme]:not(#cp) body input[type="date"], html[data-theme]:not(#cp) body input[type="time"], html[data-theme]:not(#cp) body textarea, html[data-theme]:not(#cp) body select, html[data-theme]:not(#cp) body .select2-container .select2-choice, html[data-theme]:not(#cp) body .select2-container-multi .select2-choices, html[data-theme]:not(#cp) body .note-editor.note-frame { background-color: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; transition: border-color var(--cp-t), box-shadow var(--cp-t), background-color var(--cp-t) !important; } html[data-theme]:not(#cp) body .form-control:hover, html[data-theme]:not(#cp) body textarea:hover, html[data-theme]:not(#cp) body select:hover { border-color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .form-control:focus, html[data-theme]:not(#cp) body .form-select:focus, html[data-theme]:not(#cp) body input:focus, html[data-theme]:not(#cp) body textarea:focus, html[data-theme]:not(#cp) body select:focus, html[data-theme]:not(#cp) body .select2-container-active .select2-choice, html[data-theme]:not(#cp) body .select2-container-active .select2-choices { border-color: var(--cp-rust-hi) !important; box-shadow: 0 0 0 3px var(--cp-rust-soft) !important; outline: 0 !important; background-color: var(--cp-surface) !important; } html[data-theme]:not(#cp) body ::placeholder { color: var(--cp-dim) !important; opacity: 1; } html[data-theme]:not(#cp) body label, html[data-theme]:not(#cp) body .form-label, html[data-theme]:not(#cp) body .col-form-label { color: var(--cp-muted); font-weight: 500; } html[data-theme]:not(#cp) body .form-check-input { background-color: var(--cp-surface-2); border-color: var(--cp-line-2); border-radius: var(--cp-r-sm); } html[data-theme]:not(#cp) body .form-check-input:checked { background-color: var(--cp-rust) !important; border-color: var(--cp-rust) !important; } html[data-theme]:not(#cp) body input[type="checkbox"], html[data-theme]:not(#cp) body input[type="radio"] { accent-color: var(--cp-rust); } html[data-theme]:not(#cp) body .input-group-text, html[data-theme]:not(#cp) body .input-group-addon { background: var(--cp-surface-3) !important; border-color: var(--cp-line-2) !important; color: var(--cp-muted) !important; } /* Select2 Dropdowns */ html[data-theme]:not(#cp) body .select2-drop, html[data-theme]:not(#cp) body .select2-drop-active, html[data-theme]:not(#cp) body .select2-results { background: var(--cp-surface-2) !important; border-color: var(--cp-line-2) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .select2-results .select2-highlighted { background: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body .select2-search input { background-color: var(--cp-surface) !important; } html[data-theme]:not(#cp) body .select2-container-multi .select2-choices .select2-search-choice { background: var(--cp-surface-3) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } /* --------------------------------------------------------------------------- 10. Dropdowns, Modals, Popover, Tooltip --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .dropdown-menu { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow-pop) !important; color: var(--cp-text) !important; padding: 6px !important; animation: cp-pop var(--cp-dur-s) var(--cp-e) both; } html[data-theme]:not(#cp) body .dropdown-menu .dropdown-item, html[data-theme]:not(#cp) body .dropdown-menu li > a { color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; font-size: 13.5px; } html[data-theme]:not(#cp) body .dropdown-menu .dropdown-item:hover, html[data-theme]:not(#cp) body .dropdown-menu li > a:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .dropdown-menu .dropdown-item.active, html[data-theme]:not(#cp) body .dropdown-menu .dropdown-item:active { background: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body .dropdown-divider { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .dropdown-details, html[data-theme]:not(#cp) body .list-group, html[data-theme]:not(#cp) body .list-group-item { background: transparent !important; border-color: var(--cp-line) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .list-group-item:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .modal-backdrop.show { opacity: 1 !important; background: rgba(4,5,8,.62) !important; backdrop-filter: blur(6px); } html[data-theme]:not(#cp) body .modal-content { background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow-pop) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .modal.fade .modal-dialog { transform: translateY(12px) scale(.985); transition: transform var(--cp-dur-l) var(--cp-e), opacity var(--cp-dur-m) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .modal.show .modal-dialog { transform: none; } html[data-theme]:not(#cp) body .modal-header, html[data-theme]:not(#cp) body .modal-footer { border-color: var(--cp-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .modal-title { font-size: 12px !important; font-weight: 500 !important; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-strong) !important; display: inline-flex; align-items: center; gap: 10px; } html[data-theme]:not(#cp) body .modal-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 10px rgba(232,85,42,.6); } html[data-theme]:not(#cp) body .btn-close, html[data-theme]:not(#cp) body .modal .close { filter: none; opacity: .6; color: var(--cp-text) !important; } html[data-theme="dark"] body .btn-close { filter: invert(1) grayscale(1); } html[data-theme]:not(#cp) body .popover { background: var(--cp-surface-2) !important; border-color: var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow-pop) !important; } html[data-theme]:not(#cp) body .popover-body, html[data-theme]:not(#cp) body .popover-header { color: var(--cp-text) !important; background: transparent !important; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .tooltip-inner { background: var(--cp-strong) !important; color: var(--cp-void) !important; border-radius: var(--cp-r-sm) !important; font-size: 12px; font-weight: 500; } /* --------------------------------------------------------------------------- 11. Badges, Labels, Progress, Alerts --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .badge { border-radius: var(--cp-r-sm) !important; font-weight: 500 !important; letter-spacing: .04em; } html[data-theme]:not(#cp) body .badge.bg-primary, html[data-theme]:not(#cp) body .bg-primary { background-color: var(--cp-rust) !important; } html[data-theme]:not(#cp) body .progress { background: var(--cp-surface-3) !important; border-radius: 2px !important; height: 4px; box-shadow: none !important; overflow: hidden; } html[data-theme]:not(#cp) body .progress-bar, html[data-theme]:not(#cp) body .progress-bar-primary { background: linear-gradient(90deg, var(--cp-rust), var(--cp-rust-hi)) !important; box-shadow: 0 0 10px rgba(232,85,42,.45); } html[data-theme]:not(#cp) body .progress-bar-success, html[data-theme]:not(#cp) body .progress-bar.bg-success { background: var(--cp-success) !important; box-shadow: none; } html[data-theme]:not(#cp) body .alert { border-radius: var(--cp-r) !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-surface-2) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .alert-warning { border-left: 2px solid var(--cp-warning) !important; } html[data-theme]:not(#cp) body .alert-danger { border-left: 2px solid var(--cp-danger) !important; } html[data-theme]:not(#cp) body .alert-success { border-left: 2px solid var(--cp-success) !important; } html[data-theme]:not(#cp) body .alert-info { border-left: 2px solid var(--cp-info) !important; } /* Fortschritts-Pillen in Projekt-Tabellen */ html[data-theme]:not(#cp) body table .progress { height: 18px; border-radius: 2px !important; } /* --------------------------------------------------------------------------- 12. Kalender / Kanban / Diverses --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .fc, html[data-theme]:not(#cp) body .fc-theme-standard td, html[data-theme]:not(#cp) body .fc-theme-standard th, html[data-theme]:not(#cp) body .fc-theme-standard .fc-scrollgrid { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .fc .fc-col-header-cell-cushion { color: var(--cp-dim) !important; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; } html[data-theme]:not(#cp) body .fc .fc-daygrid-day-number { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .fc .fc-day-today { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .fc .fc-button-primary { background: var(--cp-surface-2) !important; border-color: var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .fc .fc-button-primary:not(:disabled).fc-button-active, html[data-theme]:not(#cp) body .fc .fc-button-primary:not(:disabled):active { background: var(--cp-rust) !important; border-color: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body .kanban-col-title, html[data-theme]:not(#cp) body .kanban-item, html[data-theme]:not(#cp) body #kanban-wrapper .kanban-col { border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body .kanban-item { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; box-shadow: none !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .kanban-item:hover { border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .kanban-col, html[data-theme]:not(#cp) body .kanban-col-title { background: var(--cp-surface-2) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .note-editor .note-toolbar, html[data-theme]:not(#cp) body .note-editor .note-statusbar { background: var(--cp-surface-3) !important; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .note-editor .note-editing-area .note-editable { background: var(--cp-surface-2) !important; color: var(--cp-text) !important; } /* E-Mail-Vorlagen: Editor zeigt die Mail wie beim Empfänger (heller Grund, Inline-Farben der Vorlage gelten) */ html[data-theme]:not(#cp) body .email-template-form .note-editor .note-editing-area .note-editable { background: #F2F1EE !important; color: #3A3F47 !important; padding: 0 !important; } html[data-theme]:not(#cp) body .email-template-form .note-editable h1 { color: #06070A !important; letter-spacing: 0; } html[data-theme]:not(#cp) body .email-template-form .note-editable a { text-decoration: inherit; } html[data-theme]:not(#cp) body .email-template-form .note-editable strong, html[data-theme]:not(#cp) body .email-template-form .note-editable b { color: #14161B !important; } html[data-theme]:not(#cp) body .email-template-form .note-editable a:not([style*="#FFFFFF"]):not([style*="#ffffff"]) { color: #C0431C !important; } html[data-theme]:not(#cp) body .email-template-form .note-editable p { color: inherit; } html[data-theme]:not(#cp) body .avatar img, html[data-theme]:not(#cp) body .avatar-xs img, html[data-theme]:not(#cp) body .avatar-sm img { box-shadow: 0 0 0 1px var(--cp-line-2); } /* Datepicker */ html[data-theme]:not(#cp) body .datepicker.dropdown-menu { padding: 8px !important; } html[data-theme]:not(#cp) body .datepicker table tr td.active, html[data-theme]:not(#cp) body .datepicker table tr td.active:hover, html[data-theme]:not(#cp) body .datepicker table tr td span.active { background: var(--cp-rust) !important; background-image: none !important; color: #fff !important; text-shadow: none; } html[data-theme]:not(#cp) body .datepicker table tr td.day:hover, html[data-theme]:not(#cp) body .datepicker table tr td span:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .datepicker table tr td.today { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; } /* Mobile Bottom-Menü */ html[data-theme]:not(#cp) body #mobile-bottom-menu { background: color-mix(in srgb, var(--cp-deep) 88%, transparent) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body #mobile-bottom-menu .menu-item, html[data-theme]:not(#cp) body #mobile-bottom-menu svg { color: var(--cp-muted) !important; } /* Pre-Loader + App-Loader im Marken-Look */ html[data-theme]:not(#cp) body #pre-loader { background: transparent !important; } html[data-theme]:not(#cp) body .app-loader .loading, html[data-theme]:not(#cp) body .loading { border-color: var(--cp-line-2) !important; border-top-color: var(--cp-rust-hi) !important; } /* Chat-/Support-Launcher unten rechts */ html[data-theme]:not(#cp) body .rst-support-launcher, html[data-theme]:not(#cp) body #js-init-chat-icon, html[data-theme]:not(#cp) body .init-chat-icon { border-radius: 50% !important; } /* --------------------------------------------------------------------------- 13. Seitenwechsel (contentag-spa.js) --------------------------------------------------------------------------- */ #cp-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 99999; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; background: linear-gradient(90deg, var(--cp-rust), var(--cp-rust-hi) 70%, var(--cp-glow)); box-shadow: 0 0 12px rgba(232,85,42,.8); transition: transform var(--cp-dur-l) var(--cp-e), opacity var(--cp-dur-m) var(--cp-ease); } #cp-progress.is-active { opacity: 1; } html[data-theme]:not(#cp) body .main-scrollable-page { transition: opacity var(--cp-dur-s) var(--cp-ease); } html.cp-navigating body .main-scrollable-page { pointer-events: none; } html.cp-nav-slow body .main-scrollable-page { opacity: .72; } html[data-theme]:not(#cp) body .main-scrollable-page.cp-enter { animation: cp-enter var(--cp-dur-s) var(--cp-e) both; } /* sanft aus leicht transparent einblenden – kein Aufblitzen über Schwarz */ @keyframes cp-enter { from { opacity: .4; } to { opacity: 1; } } @keyframes cp-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .main-scrollable-page.cp-enter, html[data-theme]:not(#cp) body .dropdown-menu { animation: none !important; } html[data-theme]:not(#cp) body * { transition-duration: .01ms !important; } } /* --------------------------------------------------------------------------- 14. Plugin-Elemente (Topbar-Buttons, Panels) vereinheitlichen --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body a:not(.btn):not(.nav-link):not(.dropdown-item):not([class*="rst-"]) { color: var(--cp-rust-hi); } /* v5.55.0: Links in Listen – statt der Unterstreichung ein ruhiger Chip-Hover: Rost-Farbe + weiche Fläche (per Schatten, ohne Layout-Sprung) */ html[data-theme]:not(#cp) body #page-content table tbody td a:not(.btn), html[data-theme]:not(#cp) body #page-content .card a.js-selection-id { color: var(--cp-strong) !important; text-decoration: none !important; background-image: none !important; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color var(--cp-t), background-color var(--cp-t), box-shadow var(--cp-t) !important; } html[data-theme]:not(#cp) body #page-content table tbody td a:not(.btn) span { color: var(--cp-strong) !important; text-decoration: none !important; background-image: none !important; } html[data-theme]:not(#cp) body #page-content table tbody td a:not(.btn):hover, html[data-theme]:not(#cp) body #page-content .card a.js-selection-id:hover { color: var(--cp-rust-hi) !important; background-color: var(--cp-rust-soft); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp) body #page-content table tbody td a:not(.btn):hover > span:not([class]) { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body #page-content table tbody td a:not(.btn):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cp-rust-line); } /* Kunden-/Lead-/Kontaktliste: Name als Block (Spaltenbreiten + Ellipse) → Fläche nur so breit wie der Text; Hover-Farbe gegen die ID-Regel oben durchsetzen */ html[data-theme]:not(#cp):not(#cq) body #page-content table tbody td > a.js-selection-id { width: fit-content; max-width: 100%; } html[data-theme]:not(#cp):not(#cq) body :is(#client-table, #lead-table, #contact-table) td > a.js-selection-id:hover, html[data-theme]:not(#cp):not(#cq) body #page-content table tbody td a:not(.btn):hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body #page-content table tbody td a .avatar, html[data-theme]:not(#cp) body #page-content table tbody td a img { background: none !important; } /* Alle Icon-Buttons der Topbar: gleiche Größe, Ghost-Stil */ html[data-theme]:not(#cp) body #default-navbar .rst-topbar-wrap > button:not(.rst-ai-topbar-toggle), html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell, html[data-theme]:not(#cp) body #default-navbar .mui-theme-toggle, html[data-theme]:not(#cp) body #default-navbar .navbar-nav > li > a.nav-link { background: transparent !important; background-image: none !important; border: 1px solid transparent !important; box-shadow: none !important; color: var(--cp-muted) !important; border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body #default-navbar .rst-topbar-wrap > button:not(.rst-ai-topbar-toggle):hover, html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell:hover, html[data-theme]:not(#cp) body #default-navbar .mui-theme-toggle:hover, html[data-theme]:not(#cp) body #default-navbar .navbar-nav > li > a.nav-link:hover { background: transparent !important; border-color: transparent !important; color: var(--cp-strong) !important; } /* Topbar-Icons: keine Kachel, nur Farbe + leichte Bewegung */ html[data-theme]:not(#cp) body #default-navbar .rst-topbar-wrap > button svg, html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell svg, html[data-theme]:not(#cp) body #default-navbar .navbar-nav > li > a.nav-link svg { transition: transform var(--cp-dur-l) var(--cp-e), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #default-navbar .rst-topbar-wrap > button:hover svg, html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell:hover svg, html[data-theme]:not(#cp) body #default-navbar .navbar-nav > li > a.nav-link:hover svg { transform: translateY(-1px) scale(1.08); } html[data-theme]:not(#cp) body #default-navbar .mui-theme-toggle:hover .cp-tt { transform: rotate(-12deg) scale(1.08); } .cp-tt { transition: transform var(--cp-dur-l) var(--cp-e); } html[data-theme]:not(#cp) body #default-navbar :focus-visible { outline: 1px solid var(--cp-line-2) !important; outline-offset: 2px; } html[data-theme]:not(#cp) body #default-navbar .dropdown-toggle, html[data-theme]:not(#cp) body #default-navbar .dropdown-toggle:hover, html[data-theme]:not(#cp) body #default-navbar .dropdown-toggle:focus, html[data-theme]:not(#cp) body #default-navbar .show > .dropdown-toggle { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #default-navbar .rst-topbar-wrap > button svg { color: inherit !important; } html[data-theme]:not(#cp) body #default-navbar .rst-twofa-btn.active { color: var(--cp-success) !important; } html[data-theme]:not(#cp) body #default-navbar .rst-twofa-btn.active::after, html[data-theme]:not(#cp) body #default-navbar .rst-twofa-btn .rst-dot { background: var(--cp-success) !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle { background: transparent !important; background-image: none !important; border: 1px solid var(--cp-rust-line) !important; color: var(--cp-rust-hi) !important; border-radius: var(--cp-r-sm) !important; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px !important; font-weight: 600 !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle:hover { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle *, html[data-theme]:not(#cp) body .rst-ai-tb-label { color: inherit !important; border-color: currentColor !important; } html[data-theme]:not(#cp) body .rst-lang-btn.active, html[data-theme]:not(#cp) body .rst-lang-menu .active { background: var(--cp-rust) !important; background-image: none !important; color: #fff !important; } /* Plugin-Panels (Benachrichtigungen, KI, Sprache, Suche …) */ html[data-theme]:not(#cp) body [class*="rst-"][class*="-panel"], html[data-theme]:not(#cp) body [class*="rst-"][class*="-dropdown"], html[data-theme]:not(#cp) body [class*="rst-"][class*="-popover"], html[data-theme]:not(#cp) body .rst-notif-panel, html[data-theme]:not(#cp) body .rst-ai-panel, html[data-theme]:not(#cp) body .rst-search-modal, html[data-theme]:not(#cp) body .rst-lang-menu { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow-pop) !important; color: var(--cp-text) !important; backdrop-filter: none !important; } html[data-theme]:not(#cp) body .rst-notif-head, html[data-theme]:not(#cp) body [class*="rst-"][class*="-head"]:not(thead) { background: transparent !important; background-image: none !important; border-color: var(--cp-line) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-notif-mark-all { color: var(--cp-rust-hi) !important; border-color: var(--cp-rust-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .rst-notif-b, html[data-theme]:not(#cp) body .rst-notif-time { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .rst-ai-logo, html[data-theme]:not(#cp) body .rst-deepl-mark, html[data-theme]:not(#cp) body #js-chat-min-icon, html[data-theme]:not(#cp) body .chat-min-icon { background: var(--cp-rust) !important; background-image: none !important; color: #fff !important; } html[data-theme]:not(#cp) body #js-chat-min-icon, html[data-theme]:not(#cp) body .chat-min-icon { box-shadow: 0 10px 30px -10px rgba(232,85,42,.8) !important; } html[data-theme]:not(#cp) body .rst-ai-new-conv-row { color: var(--cp-rust-hi) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .rst-audit-btn, html[data-theme]:not(#cp) body .rst-email-btn, html[data-theme]:not(#cp) body .rst-notes-btn { color: var(--cp-muted) !important; } /* Sidebar-Aktiv-Verlauf erzwingen (ältere Regeln setzen soliden Grau-Hintergrund) */ html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li.active > a, html[data-theme]:not(#cp) body .sidebar .sidebar-menu li.active > a, html[data-theme]:not(#cp) body .sidebar .sidebar-menu li a.active { background-image: linear-gradient(90deg, var(--cp-rust-soft), transparent 85%) !important; background-color: transparent !important; } /* Dashboard-Widget-Icons: einheitlich im Marken-Akzent */ html[data-theme]:not(#cp) body .dashboard-icon-widget .widget-icon, html[data-theme]:not(#cp) body .clock-in-out-card .widget-icon, html[data-theme]:not(#cp) body .widget-icon[class*="bg-"] { background: var(--cp-rust-soft) !important; border: 1px solid var(--cp-rust-line) !important; border-radius: var(--cp-r) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .dashboard-icon-widget .widget-icon .icon, html[data-theme]:not(#cp) body .clock-in-out-card .widget-icon .icon, html[data-theme]:not(#cp) body .widget-icon[class*="bg-"] .icon, html[data-theme]:not(#cp) body .widget-icon svg { color: var(--cp-rust-hi) !important; stroke: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body #js-init-chat-icon { background: transparent !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #js-chat-min-icon { width: 48px !important; height: 48px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center; } html[data-theme]:not(#cp) body #js-chat-min-icon svg { color: #fff !important; stroke: #fff !important; } html[data-theme]:not(#cp) body #js-init-chat-icon #js-chat-min-icon.chat-min-icon { background: var(--cp-rust) !important; box-shadow: 0 10px 30px -10px rgba(232,85,42,.8), 0 0 0 1px rgba(255,255,255,.08) inset !important; transition: transform var(--cp-dur-m) var(--cp-e), background var(--cp-dur-m) var(--cp-ease) !important; } html[data-theme]:not(#cp) body #js-init-chat-icon #js-chat-min-icon.chat-min-icon:hover { background: var(--cp-rust-hi) !important; transform: translateY(-2px); } html[data-theme]:not(#cp) body .widget-icon.widget-icon[class*="bg-"] { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .widget-icon.widget-icon[class*="bg-"] .icon.icon { color: var(--cp-rust-hi) !important; stroke: var(--cp-rust-hi) !important; } /* --------------------------------------------------------------------------- 15. Feinschliff nach Seiten-Review --------------------------------------------------------------------------- */ /* Inhalts-Links: Rost statt Indigo */ html[data-theme]:not(#cp) body #page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not([class*="rst-"]):not(.white-link), html[data-theme]:not(#cp) body .page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not([class*="rst-"]):not(.white-link), html[data-theme]:not(#cp) body .modal a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--cp-text) !important; text-decoration: none; transition: color var(--cp-t), text-decoration-color var(--cp-t) !important; } html[data-theme]:not(#cp) body #page-content .card a:not(.btn):not(.nav-link):not(.dropdown-item), html[data-theme]:not(#cp) body #page-content table a:not(.btn) { text-decoration: none; } html[data-theme]:not(#cp) body #page-content a:not(.btn):not(.nav-link):not(.dropdown-item):hover, html[data-theme]:not(#cp) body .page-content a:not(.btn):not(.nav-link):not(.dropdown-item):hover, html[data-theme]:not(#cp) body .modal a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--cp-rust-hi) !important; text-decoration-color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body #page-content a.white-link, html[data-theme]:not(#cp) body #page-content a.white-link * { color: inherit; } html[data-theme]:not(#cp) body .media-heading a, html[data-theme]:not(#cp) body .list-group-item a strong { color: var(--cp-strong) !important; } /* Tab-Leisten (rounded/classic) ohne harte Rahmen */ html[data-theme]:not(#cp) body .nav-tabs.rounded, html[data-theme]:not(#cp) body .nav-tabs.classic, html[data-theme]:not(#cp) body .scrollable-tabs { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .tab-content > .tab-pane, html[data-theme]:not(#cp) body .tab-content { background: transparent !important; } /* Lösch-/Schließen-Icons in Listen */ html[data-theme]:not(#cp) body a.delete, html[data-theme]:not(#cp) body .delete-icon, html[data-theme]:not(#cp) body a[data-action="delete-confirmation"]:not(.btn), html[data-theme]:not(#cp) body a[data-action="delete"]:not(.btn) { background: transparent !important; color: var(--cp-dim) !important; border: 1px solid var(--cp-line) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body a.delete:hover, html[data-theme]:not(#cp) body a[data-action="delete-confirmation"]:not(.btn):hover { color: var(--cp-danger) !important; border-color: var(--cp-danger) !important; } /* Card-Header-Titel (h6, h4) */ html[data-theme]:not(#cp) body .card-header h6, html[data-theme]:not(#cp) body .card-header h5, html[data-theme]:not(#cp) body .card-title { font-size: 13.5px !important; font-weight: 500 !important; color: var(--cp-strong) !important; letter-spacing: .01em; } /* Fortschritts-Donut in der Projektübersicht */ html[data-theme]:not(#cp) body .progress-outline, html[data-theme]:not(#cp) body .pie-chart-container, html[data-theme]:not(#cp) body .project-progress-bg, html[data-theme]:not(#cp) body .bg-primary-light { background: transparent !important; } /* Pagination-Select "10" */ html[data-theme]:not(#cp) body .dt-length select, html[data-theme]:not(#cp) body .dataTables_length select, html[data-theme]:not(#cp) body .dt-length .select2-choice { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; box-shadow: none !important; } /* Titel-Leiste über Listen */ html[data-theme]:not(#cp) body .page-title, html[data-theme]:not(#cp) body .card > .page-title { background: transparent !important; } html[data-theme]:not(#cp) body .title-button-group .btn { margin-left: 6px; } /* Leere Zustände */ html[data-theme]:not(#cp) body .dt-empty, html[data-theme]:not(#cp) body .dataTables_empty { color: var(--cp-dim) !important; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 34px 0 !important; } /* Timeline / Aktivität */ html[data-theme]:not(#cp) body .timeline-panel, html[data-theme]:not(#cp) body .comment-container, html[data-theme]:not(#cp) body .activity-container { background: transparent !important; border-color: var(--cp-line) !important; } /* Aktive Timer-Buttons klar erkennbar */ html[data-theme]:not(#cp) body .btn-danger { box-shadow: 0 0 0 1px rgba(229,72,77,.4), 0 8px 24px -12px rgba(229,72,77,.8) !important; } /* --------------------------------------------------------------------------- 16. Plugin-Seiten (Content-Kalender, Medien, Assets, Meetings) — aus automatischem Farb-Scan: Indigo/Violett → Rost --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .rst-cal2-btn-primary, html[data-theme]:not(#cp) body .rst-media-new-btn, html[data-theme]:not(#cp) body .rst-assets-add-btn, html[data-theme]:not(#cp) body .rst-meet-btn-new { background: var(--cp-rust) !important; background-image: none !important; border: 1px solid var(--cp-rust) !important; color: #fff !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px !important; font-weight: 600 !important; } html[data-theme]:not(#cp) body .rst-cal2-btn-primary:hover, html[data-theme]:not(#cp) body .rst-media-new-btn:hover, html[data-theme]:not(#cp) body .rst-assets-add-btn:hover, html[data-theme]:not(#cp) body .rst-meet-btn-new:hover { background: var(--cp-rust-hi) !important; box-shadow: 0 8px 22px -12px rgba(0,0,0,.55) !important; } html[data-theme]:not(#cp) body .rst-cal-add, html[data-theme]:not(#cp) body .rst-assets-upload-btn, html[data-theme]:not(#cp) body .rst-meet-btn-instant, html[data-theme]:not(#cp) body .rst-cal2-btn-ghost, html[data-theme]:not(#cp) body .rst-cal-btn { background: var(--cp-surface-2) !important; background-image: none !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .rst-cal-add:hover, html[data-theme]:not(#cp) body .rst-assets-upload-btn:hover, html[data-theme]:not(#cp) body .rst-meet-btn-instant:hover, html[data-theme]:not(#cp) body .rst-cal2-btn-ghost:hover, html[data-theme]:not(#cp) body .rst-cal-btn:hover { border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-cal-title { background: transparent !important; color: var(--cp-strong) !important; font-weight: 500 !important; letter-spacing: .04em; } html[data-theme]:not(#cp) body .rst-cal-cell, html[data-theme]:not(#cp) body .rst-cal2-card .rst-cal-cell { border-radius: var(--cp-r-sm) !important; border-color: var(--cp-line) !important; background: var(--cp-surface) !important; } html[data-theme]:not(#cp) body .rst-cal-cell:hover { border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .rst-cal-cell.today { background: var(--cp-rust-soft) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .rst-cal-cell.today .rst-cal-day-num { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .rst-cal-day-num { border-color: transparent !important; } html[data-theme]:not(#cp) body .rst-cal2-view-switch, html[data-theme]:not(#cp) body [class*="rst-"][class*="view-switch"] { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body .rst-cal2-view-switch button, html[data-theme]:not(#cp) body .rst-media-view-btn, html[data-theme]:not(#cp) body .rst-meet-tab { border-radius: var(--cp-r-sm) !important; color: var(--cp-muted) !important; background: transparent !important; border-color: transparent !important; } html[data-theme]:not(#cp) body .rst-cal2-view-switch button.active, html[data-theme]:not(#cp) body .rst-media-view-btn.active, html[data-theme]:not(#cp) body .rst-meet-tab.active { background: var(--cp-surface-3) !important; color: var(--cp-strong) !important; box-shadow: inset 0 -2px 0 var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .rst-media-stat-n, html[data-theme]:not(#cp) body [class*="rst-"][class*="stat-n"] { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-media-dropzone { border-color: var(--cp-line-2) !important; background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body .rst-media-dropzone:hover, html[data-theme]:not(#cp) body .rst-media-dropzone.dragover { border-color: var(--cp-rust-hi) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .rst-media-item-client, html[data-theme]:not(#cp) body .rst-media-item-meta { color: var(--cp-muted) !important; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .rst-meet-empty, html[data-theme]:not(#cp) body .rst-meet-empty-icon { color: var(--cp-muted) !important; border-color: var(--cp-line-2) !important; background: transparent !important; } html[data-theme]:not(#cp) body .rst-ai-logo { box-shadow: none !important; } /* Plugin-Überschriften einheitlich */ html[data-theme]:not(#cp) body .rst-inline-page h1, html[data-theme]:not(#cp) body .rst-inline-page h2 { font-family: var(--cp-font) !important; font-weight: 500 !important; font-size: 15px !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-inline-page select, html[data-theme]:not(#cp) body .rst-inline-page input { border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body [class*="rst-"][class*="stat"]:not([class*="stat-n"]):not([class*="status"]) { border-radius: var(--cp-r) !important; } /* Seiten-Titel oben links (Kunden-Tabs etc.) */ html[data-theme]:not(#cp) body .page-title h1 { text-transform: uppercase; } /* Tabellen-Aktionen (Bearbeiten / Löschen / Optionen) als ruhige Ghost-Icons */ html[data-theme]:not(#cp) body table td a.action-option, html[data-theme]:not(#cp) body table td a.edit, html[data-theme]:not(#cp) body table td a.delete { background: transparent !important; border: 1px solid transparent !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-dim) !important; box-shadow: none !important; transition: color var(--cp-t), border-color var(--cp-t), background var(--cp-t) !important; } html[data-theme]:not(#cp) body table td a.action-option:hover, html[data-theme]:not(#cp) body table td a.edit:hover { color: var(--cp-strong) !important; border-color: var(--cp-line-2) !important; background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body table td a.delete:hover { color: var(--cp-danger) !important; border-color: rgba(229,72,77,.45) !important; background: rgba(229,72,77,.08) !important; } html[data-theme]:not(#cp) body table td a.action-option svg, html[data-theme]:not(#cp) body table td a.edit svg, html[data-theme]:not(#cp) body table td a.delete svg { color: inherit !important; stroke: currentColor !important; } /* --------------------------------------------------------------------------- 17. Login / Registrierung / Passwort vergessen --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body.signin-page, html[data-theme]:not(#cp) body.public-view.signin-page, html[data-theme]:not(#cp) body.signup-page, html[data-theme]:not(#cp) body.forgot_password-page { background: radial-gradient(900px 420px at 50% 112%, rgba(233,220,200,.10), transparent 70%), radial-gradient(700px 360px at 50% 100%, rgba(192,67,28,.18), transparent 70%), var(--cp-void) !important; } html[data-theme="light"]:not(#cp) body.signin-page { background: radial-gradient(900px 420px at 50% 112%, rgba(233,220,200,.9), transparent 70%), radial-gradient(700px 360px at 50% 100%, rgba(192,67,28,.10), transparent 70%), var(--cp-void) !important; } html[data-theme]:not(#cp) body .rst-signin-blob { display: none !important; } html[data-theme]:not(#cp) body .rst-signin-card, html[data-theme]:not(#cp) body .form-signin .card { background: color-mix(in srgb, var(--cp-surface) 86%, transparent) !important; backdrop-filter: blur(18px) saturate(130%) !important; -webkit-backdrop-filter: blur(18px) saturate(130%) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9) !important; position: relative; overflow: hidden; } html[data-theme]:not(#cp) body .rst-signin-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cp-rust-hi), transparent); opacity: .8; } html[data-theme="dark"]:not(#cp) body .form-signin .card img, html[data-theme="dark"]:not(#cp) body .signin-logo img { filter: invert(1) brightness(1.2); } html[data-theme]:not(#cp) body .form-signin .form-control { height: 48px; font-size: 14px; } html[data-theme]:not(#cp) body .form-signin .btn-primary { height: 48px; font-size: 12px !important; letter-spacing: .2em !important; } html[data-theme]:not(#cp) body .form-signin a { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .form-signin a:hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .rst-signin-utilbar button, html[data-theme]:not(#cp) body .rst-signin-utilbar a { background: transparent !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-muted) !important; box-shadow: none !important; backdrop-filter: none !important; } html[data-theme]:not(#cp) body .rst-signin-utilbar button:hover { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body.signin-page .footer, html[data-theme]:not(#cp) body.public-view .footer { background: transparent !important; border-top: 1px solid var(--cp-line) !important; color: var(--cp-dim) !important; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } html[data-theme]:not(#cp) body.public-view .footer a { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body.public-view .footer a:hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body.signin-page::before, html[data-theme]:not(#cp) body.signin-page::after, html[data-theme]:not(#cp) body.public-view::before, html[data-theme]:not(#cp) body.public-view::after { background: none !important; opacity: 0 !important; } html[data-theme]:not(#cp) body .rst-signin-card .card-header::after { background: linear-gradient(90deg, transparent, var(--cp-rust-line), transparent) !important; } html[data-theme]:not(#cp) body .rst-signin-card .card-header { background: transparent !important; border: 0 !important; } /* Card-Bodys & Dropzones nie weiß im Dark-Mode */ html[data-theme]:not(#cp) body .card-body, html[data-theme]:not(#cp) body .post-dropzone, html[data-theme]:not(#cp) body .panel-body { background-color: transparent !important; color: var(--cp-text); } html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li.expand.active > a { background-image: none !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li.expand.active > a svg { color: var(--cp-rust-hi) !important; } /* =========================================================================== v2 — Feedback-Runde 2 (2026-09-25) =========================================================================== */ /* --------------------------------------------------------------------------- 18. Fortschrittsbalken (Tabellen) — schlanke Linie + Prozent darüber --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body table .progress { position: relative !important; height: 4px !important; min-height: 0 !important; display: block !important; min-width: 88px; margin: 16px 0 4px !important; background: var(--cp-surface-3) !important; border: 0 !important; border-radius: 999px !important; overflow: visible !important; box-shadow: none !important; } html[data-theme]:not(#cp) body table .progress .progress-bar { height: 100% !important; border-radius: 3px !important; background: linear-gradient(90deg, var(--cp-rust), var(--cp-rust-hi)) !important; box-shadow: 0 0 10px rgba(232,85,42,.35) !important; transform-origin: left center; animation: cp-grow .9s var(--cp-e) both; } html[data-theme]:not(#cp) body table .progress[title="100%"] .progress-bar, html[data-theme]:not(#cp) body table .progress .progress-bar.bg-success { background: linear-gradient(90deg, #2E9E6E, var(--cp-success)) !important; box-shadow: 0 0 10px rgba(63,185,132,.35) !important; } html[data-theme]:not(#cp) body table .progress > span, html[data-theme]:not(#cp) body table .progress .hide { display: block !important; position: absolute !important; inset: auto auto 8px 0 !important; width: auto !important; height: auto !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em; color: var(--cp-muted) !important; text-shadow: none !important; background: none !important; line-height: 1 !important; } html[data-theme]:not(#cp) body table .progress[title="100%"] > span { color: var(--cp-success) !important; } @keyframes cp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Projekt-Übersicht: Fortschritts-Kopf (Bild 2) */ html[data-theme]:not(#cp) body .bg-primary.p30.rounded-top, html[data-theme]:not(#cp) body .card > .bg-primary.rounded-top { background: radial-gradient(120% 140% at 50% 0%, var(--cp-rust-soft), transparent 70%) !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .progress-outline, html[data-theme]:not(#cp) body .circle-progress, html[data-theme]:not(#cp) body .project-progress-chart { background: transparent !important; } /* --------------------------------------------------------------------------- 19. Kanban (Bild 3) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body #kanban-container, html[data-theme]:not(#cp) body .kanban-container, html[data-theme]:not(#cp) body #kanban-wrapper { background: transparent !important; box-shadow: none !important; border-color: transparent !important; } html[data-theme]:not(#cp) body .kanban-col, html[data-theme]:not(#cp) body #kanban-container > li { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .kanban-col-title, html[data-theme]:not(#cp) body .kanban-col-title * { background: transparent !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .kanban-col-title .badge, html[data-theme]:not(#cp) body .kanban-col-title .kanban-item-count { background: var(--cp-surface-3) !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .kanban-input, html[data-theme]:not(#cp) body .kanban-col .kanban-input { background: transparent !important; } html[data-theme]:not(#cp) body .kanban-item { background: var(--cp-surface-2) !important; transition: transform var(--cp-dur-m) var(--cp-e), border-color var(--cp-dur-s) var(--cp-ease), box-shadow var(--cp-dur-m) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .kanban-item:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.8) !important; } /* --------------------------------------------------------------------------- 20. Tabellen-Fußzeilen (Stundenzettel „Gesamtbetrag", Bild 4) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body table tfoot, html[data-theme]:not(#cp) body table tfoot tr, html[data-theme]:not(#cp) body table tfoot th, html[data-theme]:not(#cp) body table tfoot td, html[data-theme]:not(#cp) body table .tf-blank, html[data-theme]:not(#cp) body table .tf-lable, html[data-theme]:not(#cp) body table .tf-result { background: var(--cp-surface-2) !important; color: var(--cp-strong) !important; border-color: var(--cp-line) !important; font-weight: 600 !important; } html[data-theme]:not(#cp) body table .tf-lable { color: var(--cp-muted) !important; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; } html[data-theme]:not(#cp) body table .tf-result { color: var(--cp-rust-hi) !important; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- 21. Chat-Popup unten rechts (Bild 5) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper, html[data-theme]:not(#cp) body .rise-chat-wrapper { background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow-pop) !important; overflow: hidden; animation: cp-pop var(--cp-dur-m) var(--cp-e) both; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-topbar, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .rise-chat-footer, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .rise-chat-header { background: var(--cp-deep) !important; border-color: var(--cp-line) !important; box-shadow: none !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-topbar * { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .rise-chat-body, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .tab-content, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .tab-pane { background: transparent !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row { border-color: var(--cp-line) !important; transition: background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row strong { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row .text-off, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row small, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row .text-muted { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-button { background: transparent !important; border: 1px solid var(--cp-line) !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-button.active, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-button:hover { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-msg, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me .chat-msg { border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me .chat-msg { background: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other .chat-msg { background: var(--cp-surface-3) !important; color: var(--cp-text) !important; } /* --------------------------------------------------------------------------- 22. Schalter / Switches (Bild 7) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .form-switch .form-check-input { width: 2.3em !important; height: 1.25em !important; background-color: var(--cp-surface-3) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 2em !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239BA2AA'/%3e%3c/svg%3e") !important; background-position: left center !important; transition: background-position var(--cp-dur-m) var(--cp-e), background-color var(--cp-dur-m) var(--cp-ease), border-color var(--cp-dur-m) var(--cp-ease) !important; cursor: pointer; } html[data-theme="light"]:not(#cp) body .form-switch .form-check-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235F666F'/%3e%3c/svg%3e") !important; } html[data-theme]:not(#cp) body .form-switch .form-check-input:checked { background-color: var(--cp-rust) !important; border-color: var(--cp-rust) !important; background-position: right center !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important; } html[data-theme]:not(#cp) body .form-switch .form-check-input:hover { border-color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .form-check-label { color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .form-check-input[type="checkbox"]:not([role="switch"]) { width: 1.1em; height: 1.1em; background-color: var(--cp-surface-2) !important; border: 1px solid var(--cp-dim) !important; border-radius: 3px !important; } html[data-theme]:not(#cp) body .form-check-input[type="checkbox"]:not([role="switch"]):checked { background-color: var(--cp-rust) !important; border-color: var(--cp-rust) !important; } /* --------------------------------------------------------------------------- 23. Aufgaben-Modal & Timeline-Labels (Bild 8) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .badge-light, html[data-theme]:not(#cp) body .badge.bg-light, html[data-theme]:not(#cp) body .badge.badge-light { background: var(--cp-surface-3) !important; color: var(--cp-text) !important; border: 1px solid var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .box-title span, html[data-theme]:not(#cp) body .box-title > span { background: var(--cp-surface) !important; color: var(--cp-dim) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .2em; text-transform: uppercase; padding: 0 14px !important; } html[data-theme]:not(#cp) body .box-title { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .box-title::before, html[data-theme]:not(#cp) body .box-title::after { background: var(--cp-line) !important; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .modal .btn-success, html[data-theme]:not(#cp) body .btn-success { background: transparent !important; border: 1px solid rgba(63,185,132,.5) !important; color: var(--cp-success) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .btn-success:hover { background: rgba(63,185,132,.12) !important; } html[data-theme]:not(#cp) body .btn-success svg { color: currentColor !important; } html[data-theme]:not(#cp) body .modal .text-off, html[data-theme]:not(#cp) body .modal .text-muted { color: var(--cp-muted) !important; } /* --------------------------------------------------------------------------- 24. „Neuer Post"-Modal des Content-Kalenders (Bild 9) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .rst-post-modal { background: rgba(4,5,8,.62) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: cp-fade var(--cp-dur-m) var(--cp-ease) both; } html[data-theme="light"]:not(#cp) body .rst-post-modal { background: rgba(10,12,17,.35) !important; } html[data-theme]:not(#cp) body .rst-post-card, html[data-theme]:not(#cp) body .rst-post-card-pro { background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow-pop) !important; color: var(--cp-text) !important; animation: cp-modal-in var(--cp-dur-l) var(--cp-e) both; } @keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } } html[data-theme]:not(#cp) body .rst-post-head h2, html[data-theme]:not(#cp) body .rst-post-head h3, html[data-theme]:not(#cp) body .rst-post-modal h2 { font-size: 13px !important; font-weight: 500 !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-post-close { background: transparent !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .rst-post-close:hover { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .rst-post-tabs { border-bottom: 1px solid var(--cp-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .rst-post-tabs button, html[data-theme]:not(#cp) body .rst-post-tabs a { background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--cp-muted) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: .14em; text-transform: uppercase; box-shadow: none !important; } html[data-theme]:not(#cp) body .rst-post-tabs button.active, html[data-theme]:not(#cp) body .rst-post-tabs a.active { color: var(--cp-strong) !important; box-shadow: inset 0 -2px 0 var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .rst-post-tab-count { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; border-radius: 999px !important; } html[data-theme]:not(#cp) body .rst-post-plat-chip { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-text) !important; transition: border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .rst-post-plat-chip:hover { border-color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .rst-post-plat-chip:has(input:checked) { border-color: var(--cp-rust-hi) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .rst-post-modal label { color: var(--cp-muted) !important; font-size: 12px !important; letter-spacing: .02em; } html[data-theme]:not(#cp) body .rst-post-modal input, html[data-theme]:not(#cp) body .rst-post-modal select, html[data-theme]:not(#cp) body .rst-post-modal textarea { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .rst-post-modal input[type="checkbox"] { accent-color: var(--cp-rust); } html[data-theme]:not(#cp) body .rst-post-modal input:focus, html[data-theme]:not(#cp) body .rst-post-modal select:focus, html[data-theme]:not(#cp) body .rst-post-modal textarea:focus { border-color: var(--cp-rust-hi) !important; box-shadow: 0 0 0 3px var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .rst-post-btn-primary { background: var(--cp-rust) !important; background-image: none !important; border: 1px solid var(--cp-rust) !important; color: #fff !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px !important; font-weight: 600 !important; } html[data-theme]:not(#cp) body .rst-post-btn-primary:hover { background: var(--cp-rust-hi) !important; box-shadow: 0 8px 22px -12px rgba(0,0,0,.55) !important; } html[data-theme]:not(#cp) body .rst-post-btn-secondary { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .rst-post-btn-secondary:hover { border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-post-btn-danger { background: transparent !important; border: 1px solid rgba(229,72,77,.45) !important; color: var(--cp-danger) !important; border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body .rst-post-actions { border-top: 1px solid var(--cp-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .rst-post-charcount { color: var(--cp-dim) !important; font-family: var(--cp-font) !important; } @keyframes cp-modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 25. Theme-Farbwähler im Benutzer-Menü entfernen (Bild 12) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .change-theme, html[data-theme]:not(#cp) body .color-tag.change-theme { display: none !important; } html[data-theme]:not(#cp) body .dropdown-menu li:has(> .change-theme), html[data-theme]:not(#cp) body .dropdown-menu div:has(> .change-theme), html[data-theme]:not(#cp) body .dropdown-menu li:has(> .change-theme) + .dropdown-divider, html[data-theme]:not(#cp) body .dropdown-menu .dropdown-divider:has(+ li > .change-theme) { display: none !important; } /* --------------------------------------------------------------------------- 26. WhatsApp-Inbox (sc-*) im Content-Agency-Look (Bild 10) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .sc-app { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow) !important; font-family: var(--cp-font) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-app * { font-family: var(--cp-font); } html[data-theme]:not(#cp) body .sc-sidebar, html[data-theme]:not(#cp) body .sc-list-col, html[data-theme]:not(#cp) body .sc-chat, html[data-theme]:not(#cp) body .sc-detail { background: transparent !important; border-color: var(--cp-line) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-sidebar { background: var(--cp-deep) !important; } html[data-theme]:not(#cp) body .sc-msgs { background: var(--cp-void) !important; background-image: radial-gradient(600px 300px at 50% 0%, rgba(233,220,200,.035), transparent 70%) !important; } html[data-theme="light"]:not(#cp) body .sc-msgs { background: var(--cp-surface-2) !important; } /* Linke Navigation */ html[data-theme]:not(#cp) body .sc-side-title { color: var(--cp-dim) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: .2em !important; text-transform: uppercase !important; } html[data-theme]:not(#cp) body .sc-side-item { color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; background: transparent !important; position: relative; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .sc-side-item svg, html[data-theme]:not(#cp) body .sc-side-icon { color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .sc-side-item:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-side-item.active { background: linear-gradient(90deg, var(--cp-rust-soft), transparent 90%) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-side-item.active::after { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px; background: var(--cp-rust-hi); /* v5.70.0 (P3): ohne Glow */ } html[data-theme]:not(#cp) body .sc-side-item.active svg { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .sc-side-count, html[data-theme]:not(#cp) body .sc-tab-cnt, html[data-theme]:not(#cp) body .sc-d-cnt { background: var(--cp-surface-3) !important; color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; /* v5.70.0 (P3): keine 10-px-Pille */ font-size: 10.5px !important; font-weight: 600 !important; } html[data-theme]:not(#cp) body .sc-side-item.active .sc-side-count { background: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body .sc-side-section.sc-side-bottom { border-top-color: var(--cp-line) !important; } /* Liste */ html[data-theme]:not(#cp) body .sc-list-head { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-list-title { color: var(--cp-strong) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .18em; text-transform: uppercase; } html[data-theme]:not(#cp) body .sc-icon, html[data-theme]:not(#cp) body .sc-icon-sm, html[data-theme]:not(#cp) body .sc-icon-mini { background: transparent !important; color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; border: 1px solid transparent !important; } html[data-theme]:not(#cp) body .sc-icon:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-icon-primary { background: var(--cp-rust) !important; color: #fff !important; border-radius: var(--cp-r-sm) !important; border-color: var(--cp-rust) !important; } html[data-theme]:not(#cp) body .sc-icon-primary:hover { background: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .sc-tabs { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--cp-line) !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-tab { background: transparent !important; color: var(--cp-muted) !important; border: 0 !important; border-radius: 0 !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .14em; text-transform: uppercase; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-tab:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-tab.active { color: var(--cp-strong) !important; box-shadow: inset 0 -2px 0 var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .sc-tab.active .sc-tab-cnt { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; } /* v5.70.0 (P3): schmalere Listenspalte (280–320 px) – Tabs dürfen schrumpfen, sonst ragte „Erledigt“ samt Zähler hinaus */ html[data-theme]:not(#cp) body .sc-tab { min-width: 0; gap: 4px !important; padding-left: 4px !important; padding-right: 4px !important; letter-spacing: .08em; } html[data-theme]:not(#cp) body .sc-search-bar input, html[data-theme]:not(#cp) body .sc-chat-search input, html[data-theme]:not(#cp) body .sc-select, html[data-theme]:not(#cp) body .sc-emoji-search { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body .sc-sort-bar, html[data-theme]:not(#cp) body .sc-sort { color: var(--cp-dim) !important; background: transparent !important; } html[data-theme]:not(#cp) body .sc-conv { background: transparent !important; border-color: var(--cp-line) !important; transition: background var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .sc-conv:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .sc-conv.active { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .sc-conv.active::before { background: var(--cp-rust-hi) !important; width: 2px !important; } html[data-theme]:not(#cp) body .sc-conv-name { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-conv-phone, html[data-theme]:not(#cp) body .sc-conv-time, html[data-theme]:not(#cp) body .sc-conv-prev-text, html[data-theme]:not(#cp) body .sc-conv-preview { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-conv-unread { background: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body .sc-avatar, html[data-theme]:not(#cp) body .sc-user-av { background: linear-gradient(135deg, var(--cp-surface-3), var(--cp-surface-2)) !important; color: var(--cp-strong) !important; box-shadow: 0 0 0 1px var(--cp-line-2) !important; font-weight: 600 !important; } /* Chat */ html[data-theme]:not(#cp) body .sc-chat-head { border-color: var(--cp-line) !important; background: var(--cp-surface) !important; } html[data-theme]:not(#cp) body .sc-chat-name, html[data-theme]:not(#cp) body .sc-detail-hero-name { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-chat-phone, html[data-theme]:not(#cp) body .sc-chat-phone-row, html[data-theme]:not(#cp) body .sc-detail-hero-phone { color: var(--cp-muted) !important; } /* v5.70.0 (Chat-Kern) · Verlauf, Blasen, Häkchen, Eingabe – nur Tokens, Radius var(--cp-r), kein Glow. Ersetzt die alten Regeln (Rust-Verlauf mit weißer Schrift, 12-px-Radien, Dauer-Animation jeder Blase, 20-px-Pillen). */ html[data-theme]:not(#cp) body .sc-chat { container: scchat / inline-size; } html[data-theme]:not(#cp) body .sc-chat.is-drop { box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .sc-msgs { padding: 16px 24px 20px !important; gap: 2px !important; overflow-x: hidden; overscroll-behavior: contain; } html[data-theme]:not(#cp) body .sc-day { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html[data-theme]:not(#cp) body .sc-day-sep { position: sticky; top: 8px; z-index: 2; align-self: center; margin: 14px 0 8px !important; padding: 4px 10px !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line) !important; color: var(--cp-muted) !important; border-radius: var(--cp-r) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .14em; text-transform: uppercase; } html[data-theme="light"]:not(#cp) body .sc-day-sep { background: var(--cp-surface) !important; } html[data-theme]:not(#cp) body .sc-tl-empty { margin: auto; color: var(--cp-dim) !important; font-size: 13px; } html[data-theme]:not(#cp) body .sc-msg { max-width: min(560px, 74%) !important; padding: 8px 12px 6px !important; margin: 0 !important; border-radius: var(--cp-r) !important; font-size: 14px !important; line-height: 1.5 !important; box-shadow: none !important; animation: none; } html[data-theme]:not(#cp) body .sc-msg.is-last { margin-bottom: 8px !important; } /* nur neu angehängte Blasen animieren (vorher spielte jede Blase bei jedem Neuaufbau die Eintritts-Animation → Flackern) */ html[data-theme]:not(#cp) body .sc-msg.is-new { animation: cp-msg-in var(--cp-dur-l) var(--cp-e) both; } html[data-theme]:not(#cp) body .sc-msg.is-flash { animation: sc-flash 1.2s var(--cp-ease) 1; } html[data-theme]:not(#cp) body .sc-msg.in { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line) !important; color: var(--cp-text) !important; } html[data-theme="light"]:not(#cp) body .sc-msg.in { background: var(--cp-surface) !important; } /* ausgehend: dezente Rust-Tönung statt vollflächigem Verlauf – Zeit und Häkchen bleiben lesbar */ html[data-theme]:not(#cp) body .sc-msg.out { background: var(--cp-rust-soft) !important; background-image: none !important; border: 1px solid var(--cp-rust-line) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .sc-msg-meta { display: flex !important; align-items: center; justify-content: flex-end !important; gap: 4px !important; opacity: 1 !important; margin-top: 2px !important; font-size: 11px !important; color: var(--cp-muted) !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .sc-msg a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; } /* Häkchen: Uhr / ✓ / ✓✓ in Muted, gelesen in Info-Blau, fehlgeschlagen in Danger */ html[data-theme]:not(#cp) body .sc-tick { display: inline-flex; align-items: center; color: var(--cp-muted) !important; font-size: 0; line-height: 0; } html[data-theme]:not(#cp) body .sc-tick svg { display: block; } html[data-theme]:not(#cp) body .sc-tick.read { color: var(--cp-info) !important; } html[data-theme]:not(#cp) body .sc-tick.failed { color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .sc-msg.is-pending { opacity: .7; } html[data-theme]:not(#cp) body .sc-msg.is-failed { border-color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .sc-msg-fail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; color: var(--cp-danger) !important; font-size: 12px !important; font-weight: 500; } html[data-theme]:not(#cp) body .sc-msg-fail svg { flex: 0 0 auto; } html[data-theme]:not(#cp) body .sc-msg-fail .sc-link-btn { padding: 0 !important; font-size: 12px !important; } html[data-theme]:not(#cp) body .sc-link-btn.is-muted { color: var(--cp-muted) !important; } /* Absender über der ersten ausgehenden Blase einer Gruppe; Zitat; Platzhalter für fehlende Medien */ html[data-theme]:not(#cp) body .sc-msg-sender { align-self: flex-end; margin: 4px 2px 0; font-size: 11px; font-weight: 600; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-msg-quote { display: block; width: 100%; box-sizing: border-box; margin: 2px 0 6px; padding: 4px 8px; border: 0 !important; border-left: 2px solid var(--cp-line-2) !important; border-radius: 0 var(--cp-r-sm) var(--cp-r-sm) 0 !important; background: var(--cp-hover) !important; color: var(--cp-muted) !important; box-shadow: none !important; font: 400 12.5px/1.4 var(--cp-font) !important; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body button.sc-msg-quote { cursor: pointer; } html[data-theme]:not(#cp) body button.sc-msg-quote:hover { color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-msg-quote b { font-weight: 600; color: var(--cp-text); } html[data-theme]:not(#cp) body .sc-msg-placeholder { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-ph-ic { display: inline-flex; flex: 0 0 auto; } html[data-theme]:not(#cp) body .sc-msg-placeholder a { color: var(--cp-rust-hi) !important; } /* Medien: Breite folgt der Blase (vorher 320/360 px fest → Überlauf auf dem Handy) */ html[data-theme]:not(#cp) body .sc-media-img-wrap img, html[data-theme]:not(#cp) body .sc-media-video-wrap video { max-width: min(320px, 100%) !important; height: auto; border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body .sc-media-audio-wrap audio { width: min(280px, 100%); max-width: 100% !important; } html[data-theme]:not(#cp) body .sc-media-doc { min-width: 0 !important; max-width: 100%; box-sizing: border-box; border-radius: var(--cp-r) !important; background: var(--cp-surface-3) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-media-doc-wrap .sc-pdf-preview { border-color: var(--cp-line-2) !important; border-radius: var(--cp-r) var(--cp-r) 0 0 !important; } html[data-theme]:not(#cp) body .sc-media-doc-wrap .sc-pdf-preview + .sc-media-doc { border-radius: 0 0 var(--cp-r) var(--cp-r) !important; } html[data-theme]:not(#cp) body .sc-doc-name { color: var(--cp-strong) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-doc-info small { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-doc-icon, html[data-theme]:not(#cp) body .sc-doc-dl-icon { display: inline-flex; color: var(--cp-muted) !important; font-size: 0 !important; } html[data-theme]:not(#cp) body .sc-media-doc:hover .sc-doc-dl-icon { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-media-dl { border-radius: var(--cp-r-sm) !important; font-size: 0 !important; } html[data-theme]:not(#cp) body .sc-msg.is-sticker { background: transparent !important; border: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp) body .sc-msg.is-sticker img { max-width: 140px !important; max-height: 140px; } /* Werkzeuge an der Blase (SVG statt Emoji) */ html[data-theme]:not(#cp) body .sc-msg-tools { background: var(--cp-surface-3) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-msg-tool { color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body .sc-msg-tool svg { width: 16px; height: 16px; } html[data-theme]:not(#cp) body .sc-msg-tool:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-msg-tool.danger:hover { color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .sc-msg-tx { margin: 6px 0 0; padding: 6px 10px; border: 0 !important; border-left: 2px solid var(--cp-line-2) !important; border-radius: 0 var(--cp-r-sm) var(--cp-r-sm) 0 !important; background: var(--cp-hover) !important; color: var(--cp-text) !important; font-size: 13px !important; line-height: 1.5; } /* interne Notiz im Verlauf */ html[data-theme]:not(#cp) body .sc-msg.note { align-self: flex-end; background: var(--cp-surface-2) !important; background: color-mix(in srgb, var(--cp-warning) 9%, var(--cp-surface)) !important; border: 1px dashed var(--cp-warning) !important; border: 1px dashed color-mix(in srgb, var(--cp-warning) 50%, transparent) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-msg-label { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-msg-label svg { flex: 0 0 auto; color: var(--cp-warning); } /* „Neue Nachricht ↓“ unten mittig, klebt am unteren Rand des Verlaufs */ html[data-theme]:not(#cp) body .sc-new-pill { position: sticky; bottom: 8px; z-index: 3; align-self: center; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--cp-rust-line) !important; border-radius: var(--cp-r) !important; background: var(--cp-surface-2) !important; color: var(--cp-strong) !important; box-shadow: none !important; font: 500 12px/1 var(--cp-font) !important; cursor: pointer; } html[data-theme]:not(#cp) body .sc-new-pill[hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-new-pill:hover, html[data-theme]:not(#cp) body .sc-new-pill:focus-visible { background: var(--cp-surface-3) !important; outline: none; } /* Ladezustand und Fehler beim Wechsel */ html[data-theme]:not(#cp) body .sc-msgs--skel { gap: 10px !important; } html[data-theme]:not(#cp) body .sc-skel { flex: 0 0 auto; height: 36px; border-radius: var(--cp-r); background: var(--cp-surface-3); animation: sc-skel 1.2s var(--cp-ease-io) infinite alternate; } html[data-theme]:not(#cp) body .sc-skel.in { align-self: flex-start; } html[data-theme]:not(#cp) body .sc-skel.out { align-self: flex-end; } html[data-theme]:not(#cp) body .sc-skel--a { width: 60%; } html[data-theme]:not(#cp) body .sc-skel--b { width: 40%; } html[data-theme]:not(#cp) body .sc-skel--c { width: 70%; } html[data-theme]:not(#cp) body .sc-skel--d { width: 30%; } html[data-theme]:not(#cp) body .sc-chat-head.is-loading .sc-chat-head-r { opacity: .45; } html[data-theme]:not(#cp) body .sc-detail-skel { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px; } html[data-theme]:not(#cp) body .sc-detail-skel .sc-skel { height: 18px; } html[data-theme]:not(#cp) body .sc-chat-error { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; color: var(--cp-muted) !important; background: var(--cp-void); } html[data-theme="light"]:not(#cp) body .sc-chat-error { background: var(--cp-surface-2); } html[data-theme]:not(#cp) body .sc-chat-error svg { color: var(--cp-dim); } html[data-theme]:not(#cp) body .sc-chat-error p { margin: 0; font-size: 14px; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-chat-error .ext-btn { height: 32px; padding: 0 14px !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; transform: none !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; font: 500 12.5px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-chat-error .ext-btn:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } /* Eingabe: Segment [Antworten | Interne Notiz] + Antwortfenster-Chip, Anhänge, Textfeld, Werkzeugzeile mit Senden */ html[data-theme]:not(#cp) body .sc-input-bar { display: flex !important; flex-direction: column; gap: 8px; padding: 10px 16px 12px !important; padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; background: var(--cp-surface) !important; border-top: 1px solid var(--cp-line) !important; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-mode-row { display: flex; align-items: center; gap: 8px; min-width: 0; } html[data-theme]:not(#cp) body .sc-mode { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; } html[data-theme]:not(#cp) body .sc-mode-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px !important; border: 1px solid transparent !important; border-radius: var(--cp-r-sm) !important; background: transparent !important; color: var(--cp-muted) !important; box-shadow: none !important; font: 500 12px/1 var(--cp-font) !important; cursor: pointer; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-mode-btn:hover { color: var(--cp-strong) !important; background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .sc-mode-btn[aria-selected="true"] { background: var(--cp-surface-3) !important; border-color: var(--cp-line-2) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-mode-btn[data-mode="note"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-warning); } html[data-theme]:not(#cp) body .sc-input-bar[data-mode="note"] .sc-mode-btn[data-mode="note"] { border-color: var(--cp-warning) !important; border-color: color-mix(in srgb, var(--cp-warning) 50%, transparent) !important; } html[data-theme]:not(#cp) body .sc-mode-btn:focus-visible { outline: none !important; box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .sc-window-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; margin-left: auto; padding: 0 8px; min-width: 0; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r-sm); color: var(--cp-muted); background: transparent; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body .sc-window-chip svg { flex: 0 0 auto; } html[data-theme]:not(#cp) body .sc-window-chip[hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-window-chip.is-low { border-color: var(--cp-warning); border-color: color-mix(in srgb, var(--cp-warning) 50%, transparent); } html[data-theme]:not(#cp) body .sc-window-chip.is-low svg { color: var(--cp-warning); } html[data-theme]:not(#cp) body .sc-window-closed { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--cp-r); border: 1px solid var(--cp-warning); border: 1px solid color-mix(in srgb, var(--cp-warning) 45%, transparent); background: var(--cp-surface-2); background: color-mix(in srgb, var(--cp-warning) 8%, transparent); color: var(--cp-text); font-size: 12.5px; line-height: 1.45; } html[data-theme]:not(#cp) body .sc-window-closed > svg { flex: 0 0 auto; margin-top: 1px; color: var(--cp-warning); } html[data-theme]:not(#cp) body .sc-window-closed .sc-window-actions:empty { display: none; } html[data-theme]:not(#cp) body .sc-window-closed .sc-window-actions { margin-left: auto; display: inline-flex; gap: 6px; } html[data-theme]:not(#cp) body .sc-window-closed[hidden], html[data-theme]:not(#cp) body .sc-input-bar[data-mode="note"] .sc-window-closed { display: none !important; } html[data-theme]:not(#cp) body .sc-attach-tray { display: flex; flex-wrap: wrap; gap: 8px; } html[data-theme]:not(#cp) body .sc-attach-tray[hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-attach-chip { display: flex; align-items: center; gap: 8px; max-width: 260px; height: 40px; box-sizing: border-box; padding: 0 4px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: var(--cp-surface-2); color: var(--cp-text); font-size: 12.5px; } html[data-theme]:not(#cp) body .sc-attach-thumb { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--cp-r-sm); object-fit: cover; background: var(--cp-surface-3); color: var(--cp-muted); } html[data-theme]:not(#cp) body .sc-attach-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } html[data-theme]:not(#cp) body .sc-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-strong); } html[data-theme]:not(#cp) body .sc-attach-size { font-size: 11px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .sc-attach-x { width: 24px; height: 24px; flex: 0 0 24px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border: 0 !important; border-radius: var(--cp-r-sm) !important; background: transparent !important; color: var(--cp-muted) !important; cursor: pointer; } html[data-theme]:not(#cp) body .sc-attach-x:hover, html[data-theme]:not(#cp) body .sc-attach-x:focus-visible { background: var(--cp-hover) !important; color: var(--cp-strong) !important; outline: none; } html[data-theme]:not(#cp) body .sc-upload-progress { height: 2px; overflow: hidden; border-radius: 1px; background: var(--cp-line); } html[data-theme]:not(#cp) body .sc-upload-progress[hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-upload-progress > span { display: block; width: 0; height: 100%; background: var(--cp-rust); transition: width var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .sc-input-row { display: block !important; position: relative; } html[data-theme]:not(#cp) body .sc-input-row textarea, html[data-theme]:not(#cp) body .sc-input-bar textarea { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #sc-input, html[data-theme]:not(#cp) body .sc-input-skel { display: block; width: 100%; box-sizing: border-box; min-height: 44px !important; max-height: 40vh !important; resize: none !important; padding: 10px 12px !important; font: 400 14px/1.5 var(--cp-font) !important; } html[data-theme]:not(#cp) body #sc-input:focus { border-color: var(--cp-rust-line) !important; outline: none !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #sc-input::placeholder, html[data-theme]:not(#cp) body .sc-input-skel::placeholder { color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .sc-input-bar[data-mode="note"] #sc-input { border-style: dashed !important; border-color: var(--cp-warning) !important; border-color: color-mix(in srgb, var(--cp-warning) 55%, transparent) !important; background: color-mix(in srgb, var(--cp-warning) 6%, var(--cp-surface-2)) !important; } html[data-theme]:not(#cp) body .sc-input-toolbar { display: flex !important; align-items: center; gap: 2px !important; margin: 0 !important; flex-wrap: nowrap !important; min-width: 0; } html[data-theme]:not(#cp) body .sc-input-icon { width: 32px !important; height: 32px !important; flex: 0 0 32px; padding: 0 !important; border: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; background: transparent !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-input-icon svg { width: 18px; height: 18px; } html[data-theme]:not(#cp) body .sc-input-icon:hover, html[data-theme]:not(#cp) body .sc-input-icon:focus-visible { background: var(--cp-hover) !important; color: var(--cp-strong) !important; outline: none; } html[data-theme]:not(#cp) body .sc-emoji-btn { color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; background: transparent !important; } html[data-theme]:not(#cp) body .sc-ai-btn { display: inline-flex !important; align-items: center; gap: 5px; height: 28px; margin-left: 4px !important; padding: 0 10px !important; background: transparent !important; color: var(--cp-rust-hi) !important; border: 1px solid var(--cp-rust-line) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; font: 600 12px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-ai-btn svg { color: currentColor !important; } html[data-theme]:not(#cp) body .sc-ai-btn:hover, html[data-theme]:not(#cp) body .sc-ai-btn:focus-visible { background: var(--cp-rust-soft) !important; outline: none; } html[data-theme]:not(#cp) body .sc-input-hint { margin-left: auto; margin-right: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--cp-dim); } html[data-theme]:not(#cp) body .sc-send-split { display: flex; flex: 0 0 auto; } html[data-theme]:not(#cp) body .sc-send, html[data-theme]:not(#cp) body .sc-send-arrow { background: var(--cp-rust) !important; color: var(--cp-on-rust) !important; border: 0 !important; box-shadow: none !important; font: 600 12.5px/1 var(--cp-font) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; } html[data-theme]:not(#cp) body .sc-send { height: 32px; padding: 0 16px !important; border-radius: var(--cp-r-sm) 0 0 var(--cp-r-sm) !important; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-send-arrow { width: 28px; height: 32px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 0 var(--cp-r-sm) var(--cp-r-sm) 0 !important; border-left: 1px solid rgba(255,255,255,.2) !important; } html[data-theme]:not(#cp) body .sc-send:hover, html[data-theme]:not(#cp) body .sc-send-arrow:hover { background: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .sc-send:focus-visible, html[data-theme]:not(#cp) body .sc-send-arrow:focus-visible { outline: 2px solid var(--cp-rust-line); outline-offset: 2px; } html[data-theme]:not(#cp) body .sc-send:disabled, html[data-theme]:not(#cp) body .sc-send-arrow:disabled { opacity: .45; cursor: not-allowed; background: var(--cp-rust) !important; } /* Notiz-Modus: „Notiz speichern“ als Outline mit Warn-Rand – nie Rust, damit Notiz und Kundennachricht nicht verwechselt werden */ html[data-theme]:not(#cp) body .sc-input-bar[data-mode="note"] .sc-send { background: transparent !important; color: var(--cp-strong) !important; border-radius: var(--cp-r-sm) !important; border: 1px solid var(--cp-warning) !important; border: 1px solid color-mix(in srgb, var(--cp-warning) 60%, transparent) !important; } html[data-theme]:not(#cp) body .sc-input-bar[data-mode="note"] .sc-send:hover { background: color-mix(in srgb, var(--cp-warning) 10%, transparent) !important; } html[data-theme]:not(#cp) body .sc-input-bar[data-mode="note"] .sc-send-arrow, html[data-theme]:not(#cp) body .sc-input-bar[data-mode="note"] .sc-reply-chip { display: none !important; } @container scchat (max-width: 560px) { html[data-theme]:not(#cp) body .sc-input-hint { display: none; } html[data-theme]:not(#cp) body .sc-send-split { margin-left: auto; } html[data-theme]:not(#cp) body .sc-msg { max-width: 86% !important; } html[data-theme]:not(#cp) body .sc-msgs { padding: 12px 12px 16px !important; } html[data-theme]:not(#cp) body .sc-window-chip span { overflow: hidden; text-overflow: ellipsis; } } /* Antwort-Chip über dem Textfeld (vorher 20-px-Pille mit Blau) */ html[data-theme]:not(#cp) body .sc-reply-chip { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 6px 6px 6px 10px !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; font-size: 12.5px !important; } html[data-theme]:not(#cp) body .sc-reply-chip-bar { width: 2px !important; height: 28px; flex: 0 0 2px; background: var(--cp-rust-hi) !important; border-radius: 1px !important; } html[data-theme]:not(#cp) body .sc-reply-chip-body strong { display: block; color: var(--cp-strong) !important; font-size: 11px; font-weight: 600; } html[data-theme]:not(#cp) body .sc-reply-chip-text { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-reply-chip-x { width: 24px; height: 24px; flex: 0 0 24px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-reply-chip-x:hover, html[data-theme]:not(#cp) body .sc-reply-chip-x:focus-visible { background: var(--cp-hover) !important; color: var(--cp-strong) !important; outline: none; } html[data-theme]:not(#cp) body .sc-quick-reply { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r) !important; } @keyframes sc-skel { from { opacity: .45; } to { opacity: .9; } } @keyframes sc-flash { 0%, 60% { outline: 2px solid var(--cp-rust-line); outline-offset: 2px; } 100% { outline: 2px solid transparent; outline-offset: 2px; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .sc-skel, html[data-theme]:not(#cp) body .sc-msg.is-flash { animation: none !important; } html[data-theme]:not(#cp) body .sc-upload-progress > span { transition: none; } } html.cp-motion-off[data-theme]:not(#cp) body .sc-skel, html.cp-motion-off[data-theme]:not(#cp) body .sc-msg.is-new { animation: none !important; } /* Detail-Spalte */ html[data-theme]:not(#cp) body .sc-detail-head { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-detail-title, html[data-theme]:not(#cp) body .sc-d-block summary { color: var(--cp-strong) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .14em; text-transform: uppercase; } html[data-theme]:not(#cp) body .sc-detail-hero { border-color: var(--cp-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .sc-detail-hero .sc-avatar { box-shadow: 0 0 0 1px var(--cp-line-2) !important; } /* v5.70.0 (P3): nur Ring, kein Rust-Glow */ html[data-theme]:not(#cp) body .sc-d-block { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-attr-key { color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .sc-attr-val { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-note, html[data-theme]:not(#cp) body .sc-file-card { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-note-add-form textarea { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body .sc-note-add-form button, html[data-theme]:not(#cp) body .sc-detail .btn { background: transparent !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body .sc-dropdown, html[data-theme]:not(#cp) body .sc-emoji-pop, html[data-theme]:not(#cp) body .wa-popover, html[data-theme]:not(#cp) body .wa-modal { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow-pop) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-dropdown-item { color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body .sc-dropdown-item:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-dropdown-hdr { color: var(--cp-dim) !important; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px !important; } html[data-theme]:not(#cp) body .wa-modal-head { border-color: var(--cp-line) !important; color: var(--cp-strong) !important; background: transparent !important; } html[data-theme]:not(#cp) body .sc-chat-empty, html[data-theme]:not(#cp) body .sc-list-empty { color: var(--cp-dim) !important; } @keyframes cp-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 26b. WhatsApp v5.70 – gemeinsame Bausteine (Auswahl-Popover, Zuweisen, Modalgrößen, Bestätigung, Hinweis, Zurückstellen) Nur Tokens, Radius var(--cp-r), kein Glow; jeder Selektor mit Präfix gegen RISE/Bootstrap. --------------------------------------------------------------------------- */ /* Auswahl-Popover (openPicker) */ html[data-theme]:not(#cp) body .sc-pick { box-sizing: border-box; display: flex !important; flex-direction: column !important; gap: 0 !important; max-height: 380px; padding: 6px !important; overflow: hidden; } html[data-theme]:not(#cp) body .sc-pick-search { height: 32px !important; margin: 0 0 6px !important; padding: 0 10px !important; flex: 0 0 auto; background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-text) !important; font: 400 13px/1 var(--cp-font) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-pick-search::placeholder { color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .sc-pick-search:focus { border-color: var(--cp-rust-line) !important; outline: none !important; } html[data-theme]:not(#cp) body .sc-pick-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; } html[data-theme]:not(#cp) body .sc-pick-row, html[data-theme]:not(#cp) body .sc-user-row { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 36px; width: 100%; padding: 0 8px !important; border: 0 !important; border-radius: var(--cp-r-sm) !important; background: transparent !important; color: var(--cp-text) !important; box-shadow: none !important; font: 400 13px/1.3 var(--cp-font) !important; text-align: left; cursor: pointer; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .sc-pick-row:hover, html[data-theme]:not(#cp) body .sc-pick-row:focus-visible, html[data-theme]:not(#cp) body .sc-user-row:hover, html[data-theme]:not(#cp) body .sc-user-row:focus-visible { background: var(--cp-hover) !important; color: var(--cp-strong) !important; outline: none !important; } html[data-theme]:not(#cp) body .sc-pick-row:focus-visible, html[data-theme]:not(#cp) body .sc-user-row:focus-visible { box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .sc-pick-row.is-current { background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-pick-row[hidden], html[data-theme]:not(#cp) body .sc-pick .sc-dropdown-sep[hidden], html[data-theme]:not(#cp) body .sc-pick-none[hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-pick-check { margin-left: auto; flex: 0 0 16px; color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .sc-pick-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-pick .sc-user-av { width: 24px !important; height: 24px !important; flex: 0 0 24px; border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center; background: var(--cp-surface-3) !important; color: var(--cp-strong) !important; box-shadow: 0 0 0 1px var(--cp-line-2) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .02em; } html[data-theme]:not(#cp) body .sc-user-av.is-empty { background: transparent !important; box-shadow: none !important; border: 1px dashed var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .sc-dropdown-sep { height: 1px; margin: 4px 0; background: var(--cp-line) !important; flex: 0 0 auto; } html[data-theme]:not(#cp) body .sc-pick-none { padding: 10px 8px; font-size: 12.5px !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-pick-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-dd-meta { margin-left: auto; padding-left: 12px; color: var(--cp-muted) !important; font-size: 12px !important; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Kopf: Bearbeiter (Initialen statt Lila-Kreis mit „online“-Punkt), Kunde als Link */ html[data-theme]:not(#cp) body .sc-assigned-avatar { width: 28px !important; height: 28px !important; flex: 0 0 28px; padding: 0 !important; margin-right: 2px; display: inline-flex !important; align-items: center; justify-content: center; border: 0 !important; border-radius: 50% !important; cursor: pointer; background: var(--cp-surface-3) !important; color: var(--cp-strong) !important; box-shadow: 0 0 0 1px var(--cp-line-2) !important; font: 600 11px/1 var(--cp-font) !important; letter-spacing: .02em; transition: box-shadow var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .sc-assigned-avatar:hover, html[data-theme]:not(#cp) body .sc-assigned-avatar:focus-visible { box-shadow: 0 0 0 1px var(--cp-rust-line) !important; outline: none !important; } html[data-theme]:not(#cp) body .sc-assigned-dot { display: none !important; } html[data-theme]:not(#cp) body .sc-assign-empty { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body a.sc-chat-company { color: var(--cp-muted) !important; text-decoration: none !important; } html[data-theme]:not(#cp) body a.sc-chat-company:hover { color: var(--cp-rust-hi) !important; text-decoration: underline !important; text-underline-offset: 2px; } html[data-theme]:not(#cp) body .sc-link-btn { background: none !important; border: 0 !important; padding: 0 0 0 8px !important; box-shadow: none !important; color: var(--cp-rust-hi) !important; font: 500 12.5px/1.3 var(--cp-font) !important; cursor: pointer; } html[data-theme]:not(#cp) body .sc-link-btn--solo { padding-left: 0 !important; } html[data-theme]:not(#cp) body .sc-link-btn:hover, html[data-theme]:not(#cp) body .sc-link-btn:focus-visible { text-decoration: underline; text-underline-offset: 2px; outline: none; } html[data-theme]:not(#cp) body .sc-muted { color: var(--cp-muted) !important; font-style: normal; } html[data-theme]:not(#cp) body .sc-attr-val a { color: var(--cp-strong) !important; text-decoration: none !important; } html[data-theme]:not(#cp) body .sc-attr-val a:hover { color: var(--cp-rust-hi) !important; text-decoration: underline !important; text-underline-offset: 2px; } /* Modal: Größen, Kopf 56 px, Schließen-Knopf, Fußleiste */ html[data-theme]:not(#cp) body .wa-modal { box-sizing: border-box; border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body .wa-modal--auto { width: min(800px, calc(100vw - 32px)) !important; } html[data-theme]:not(#cp) body .wa-modal--sm { width: min(420px, calc(100vw - 32px)) !important; } html[data-theme]:not(#cp) body .wa-modal--md { width: min(560px, calc(100vw - 32px)) !important; } html[data-theme]:not(#cp) body .wa-modal--lg { width: min(880px, calc(100vw - 32px)) !important; } html[data-theme]:not(#cp) body .wa-modal:focus { outline: none !important; } html[data-theme]:not(#cp) body .wa-modal-back { background: rgba(6,7,10,.6) !important; } html[data-theme]:not(#cp) body .wa-modal-head { min-height: 56px; padding: 0 10px 0 20px !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .wa-modal-head h3 { margin: 0 !important; color: var(--cp-strong) !important; font: 600 15px/1.3 var(--cp-font) !important; letter-spacing: 0; } html[data-theme]:not(#cp) body .wa-modal-close { width: 32px !important; height: 32px !important; padding: 0 !important; border: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .wa-modal-close:hover, html[data-theme]:not(#cp) body .wa-modal-close:focus-visible { background: var(--cp-hover) !important; color: var(--cp-strong) !important; outline: none !important; } html[data-theme]:not(#cp) body .wa-modal-body { color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-p { margin: 0; color: var(--cp-text) !important; font-size: 13.5px !important; line-height: 1.55; } html[data-theme]:not(#cp) body .wa-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn { height: 32px; padding: 0 14px !important; border-radius: var(--cp-r-sm) !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; box-shadow: none !important; transform: none !important; font: 500 12.5px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn-primary { background: var(--cp-rust) !important; border-color: var(--cp-rust) !important; color: var(--cp-on-rust) !important; } html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn-primary:hover { background: var(--cp-rust-hi) !important; border-color: var(--cp-rust-hi) !important; color: var(--cp-on-rust) !important; } html[data-theme]:not(#cp) body .ext-btn-danger-solid, html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn-danger-solid { background: var(--cp-danger) !important; border: 1px solid var(--cp-danger) !important; color: var(--cp-on-rust) !important; box-shadow: none !important; transform: none !important; } html[data-theme]:not(#cp) body .ext-btn-danger-solid:hover, html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn-danger-solid:hover { filter: brightness(1.08); } html[data-theme]:not(#cp) body .sc-field-err { margin-top: 6px; color: var(--cp-danger) !important; font-size: 12px !important; } html[data-theme]:not(#cp) body .sc-field-err[hidden] { display: none !important; } /* Zurückstellen (Modal sm): Zeilen wie im Popover, Ziel rechts; eigenes Datum inline */ html[data-theme]:not(#cp) body .sc-snooze-list { display: flex; flex-direction: column; gap: 1px; } html[data-theme]:not(#cp) body .sc-snooze-custom { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-snooze-custom-l { display: block; margin-bottom: 6px; color: var(--cp-strong) !important; font-size: 12.5px !important; font-weight: 500 !important; } html[data-theme]:not(#cp) body .sc-snooze-custom-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } html[data-theme]:not(#cp) body .sc-snooze-dt { flex: 1 1 180px; min-width: 0; height: 32px !important; padding: 0 8px !important; background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-text) !important; font: 400 13px/1 var(--cp-font) !important; font-variant-numeric: tabular-nums; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-snooze-dt:focus { border-color: var(--cp-rust-line) !important; outline: none !important; } html[data-theme]:not(#cp) body .sc-snooze-custom-row .ext-btn { height: 32px; padding: 0 14px !important; border-radius: var(--cp-r-sm) !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; box-shadow: none !important; transform: none !important; font: 500 12.5px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-snooze-custom-row .ext-btn:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } /* Hinweis (toast) mit „Rückgängig“ – Fläche/Schrift aus Tokens, über Modalen */ html[data-theme]:not(#cp) body .sc-toast { z-index: 10050 !important; border-radius: var(--cp-r) !important; background: var(--cp-surface-3) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-strong) !important; box-shadow: var(--cp-shadow-pop) !important; font: 500 13px/1.3 var(--cp-font) !important; } /* v5.70.0: Text umbrechen statt mit … abschneiden (schmale Fenster/Handy) */ html[data-theme]:not(#cp) body .sc-toast span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .sc-toast button { height: 30px; padding: 0 12px; border: 0 !important; border-radius: var(--cp-r-sm) !important; background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; box-shadow: none !important; /* v5.70.0 (Prüfung): Schrift strong statt rust-hi – vorher 3,9:1 (dunkel) / 4,3:1 (hell), jetzt > 13:1; Rust-Tönung bleibt */ font: 600 12.5px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-toast button:hover, html[data-theme]:not(#cp) body .sc-toast button:focus-visible { background: var(--cp-rust) !important; color: var(--cp-on-rust) !important; outline: none !important; } @media (pointer: coarse) { html[data-theme]:not(#cp) body .sc-toast button { height: 40px; } } /* v5.70.0 (Prüfung): „Rückgängig“ am Handy/iPad gut treffbar */ /* ── v5.70.0 (P3): Seitenleiste – 32-px-Einträge als Knöpfe, Zähler schlicht (aktiv: Rust mit weißer Ziffer), Postfach-Farbpunkt, Warnpunkt am Eintrag „Einstellungen“ ── */ html[data-theme]:not(#cp) body .sc-sidebar { gap: 14px !important; overscroll-behavior: contain; } html[data-theme]:not(#cp) body .sc-side-item { display: flex !important; align-items: center; gap: 10px !important; width: 100%; height: 32px; box-sizing: border-box; padding: 0 10px !important; border: 0 !important; text-align: left; cursor: pointer; font: 500 13px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-side-item:focus-visible { outline: none !important; box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .sc-side-item.is-quiet { color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .sc-side-item.is-quiet:hover, html[data-theme]:not(#cp) body .sc-side-item.is-quiet.active { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-side-title { font-size: 10.5px !important; letter-spacing: .16em !important; padding: 6px 10px 4px !important; } html[data-theme]:not(#cp) body .sc-side-count { background: transparent !important; padding: 0 !important; min-width: 0 !important; margin-left: auto; color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; font: 500 11px/1 var(--cp-font) !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .sc-side-item.active .sc-side-count { background: var(--cp-rust) !important; color: var(--cp-on-rust) !important; padding: 3px 5px !important; } html[data-theme]:not(#cp) body .sc-side-count[hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-side-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } html[data-theme]:not(#cp) body .sc-side-add-row { color: var(--cp-dim) !important; font-weight: 400 !important; } html[data-theme]:not(#cp) body .sc-sec-warn { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; margin-left: auto; padding: 0 !important; border-radius: 50% !important; background: var(--cp-warning) !important; } html[data-theme]:not(#cp) body .sc-sec-warn--danger { background: var(--cp-danger) !important; } /* schmale Inbox: 56-px-Icon-Leiste – Text als Tooltip, Zähler als 6-px-Rust-Punkt */ @media (min-width: 821px) { @container wa (max-width: 1439px) { html[data-theme]:not(#cp) body .sc-side-section { padding: 0 8px !important; } html[data-theme]:not(#cp) body .sc-side-item { justify-content: center; height: 40px; padding: 0 !important; gap: 0 !important; } html[data-theme]:not(#cp) body .sc-side-item.has-badge::before { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .sc-side-item .sc-sec-warn { position: absolute; top: 7px; right: 7px; margin: 0; } html[data-theme]:not(#cp) body .sc-side-add-row { display: none !important; } } @container wa (max-width: 1099px) { html[data-theme]:not(#cp) body .sc-detail { background: var(--cp-surface) !important; border-left: 1px solid var(--cp-line-2) !important; box-shadow: var(--cp-shadow-pop) !important; } } } @supports not (container-type: inline-size) { @media (min-width: 821px) and (max-width: 1750px) { html[data-theme]:not(#cp) body .sc-side-item { justify-content: center; height: 40px; padding: 0 !important; gap: 0 !important; } html[data-theme]:not(#cp) body .sc-side-item.has-badge::before { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .sc-side-item .sc-sec-warn { position: absolute; top: 7px; right: 7px; margin: 0; } html[data-theme]:not(#cp) body .sc-side-add-row { display: none !important; } } @media (min-width: 821px) and (max-width: 1410px) { html[data-theme]:not(#cp) body .sc-detail { background: var(--cp-surface) !important; border-left: 1px solid var(--cp-line-2) !important; box-shadow: var(--cp-shadow-pop) !important; } } } /* v5.70.0 (Prüfung): Touch (iPad) – Icon-Leiste mit kleiner Beschriftung unter dem Symbol (Raster/Schrift in extensions.css); hier nur der Abstand Symbol–Text, weil die Leisten-Regel oben gap: 0 !important setzt */ @media (hover: none) and (min-width: 821px) { @container wa (max-width: 1439px) { html[data-theme]:not(#cp) body .sc-side-item { gap: 2px !important; } } } @supports not (container-type: inline-size) { @media (hover: none) and (min-width: 821px) and (max-width: 1750px) { html[data-theme]:not(#cp) body .sc-side-item { gap: 2px !important; } } } @media (max-width: 820px) { html[data-theme]:not(#cp) body .sc-detail { background: var(--cp-surface) !important; border-left: 0 !important; box-shadow: none !important; } /* Menü-Knopf der Handy-Navigation: Token-Fläche statt weißem Quadrat im dunklen Thema */ html[data-theme]:not(#cp) body .sc-mobile-menu-btn { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-mobile-menu-btn:hover, html[data-theme]:not(#cp) body .sc-mobile-menu-btn:focus-visible { background: var(--cp-hover) !important; color: var(--cp-strong) !important; outline: none; } } /* ── v5.70.0 (P3): Liste – Zeilen als Links (≥ 72 px), ungelesen fett mit Rust-Zeit, Zeile 3 mit Postfach/Etiketten, Skelett, Leer-/Fehlerzustände, Filter-Chip, Band „Keine Verbindung“, Papierkorb-Leiste ── */ html[data-theme]:not(#cp) body .sc-list { overscroll-behavior: contain; } html[data-theme]:not(#cp) body .sc-list-head { gap: 8px; } html[data-theme]:not(#cp) body .sc-list-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-sort { display: inline-flex !important; align-items: center; gap: 4px; padding: 0 !important; border: 0 !important; color: var(--cp-muted) !important; font: 500 12px/1 var(--cp-font) !important; cursor: pointer; } html[data-theme]:not(#cp) body .sc-sort:hover, html[data-theme]:not(#cp) body .sc-sort:focus-visible { color: var(--cp-strong) !important; outline: none; } html[data-theme]:not(#cp) body .sc-icon-sm { position: relative; } html[data-theme]:not(#cp) body .sc-icon-sm.is-active { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-icon-sm.is-active::before { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .sc-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0; } html[data-theme]:not(#cp) body .sc-filter-chips[hidden], html[data-theme]:not(#cp) body .sc-trash-bar[hidden], html[data-theme]:not(#cp) body .sc-list-band[hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 100%; box-sizing: border-box; padding: 0 2px 0 8px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r-sm); background: var(--cp-surface-2); color: var(--cp-text); font: 500 12px/1 var(--cp-font); } html[data-theme]:not(#cp) body .sc-filter-chip > i { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; } html[data-theme]:not(#cp) body .sc-filter-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-filter-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0 !important; border: 0 !important; border-radius: var(--cp-r-sm) !important; background: transparent !important; color: var(--cp-muted) !important; cursor: pointer; } html[data-theme]:not(#cp) body .sc-filter-chip-x:hover, html[data-theme]:not(#cp) body .sc-filter-chip-x:focus-visible { background: var(--cp-hover) !important; color: var(--cp-strong) !important; outline: none; } html[data-theme]:not(#cp) body .sc-trash-bar { display: flex; justify-content: flex-end; padding: 8px 16px 0; } html[data-theme]:not(#cp) body .sc-trash-bar .ext-btn, html[data-theme]:not(#cp) body .sc-list-empty .ext-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px !important; border-radius: var(--cp-r-sm) !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; box-shadow: none !important; transform: none !important; font: 500 12px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-trash-bar .ext-btn:hover, html[data-theme]:not(#cp) body .sc-list-empty .ext-btn:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-list-band { display: flex; align-items: center; gap: 6px; margin: 6px 12px 0; padding: 6px 10px; border-radius: var(--cp-r-sm); border: 1px solid var(--cp-line-2); border: 1px solid color-mix(in srgb, var(--cp-warning) 40%, transparent); background: var(--cp-surface-2); background: color-mix(in srgb, var(--cp-warning) 8%, transparent); color: var(--cp-text); font-size: 12px; } html[data-theme]:not(#cp) body .sc-list-band svg { flex: 0 0 auto; color: var(--cp-warning); } html[data-theme]:not(#cp) body .sc-list-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px !important; text-align: center; color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .sc-list-empty p { margin: 0; } html[data-theme]:not(#cp) body .sc-list-empty-t { color: var(--cp-strong); font-size: 13.5px; font-weight: 500; } html[data-theme]:not(#cp) body .sc-list-empty-s { color: var(--cp-muted); font-size: 12px; } html[data-theme]:not(#cp) body .sc-list-empty.is-error svg { color: var(--cp-danger); } html[data-theme]:not(#cp) body .sc-conv-skel { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body .sc-conv-skel .sc-skel-av { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; } html[data-theme]:not(#cp) body .sc-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; } html[data-theme]:not(#cp) body .sc-skel-lines .sc-skel-l1 { height: 12px; width: 60%; } html[data-theme]:not(#cp) body .sc-skel-lines .sc-skel-l2 { height: 10px; width: 85%; } html[data-theme]:not(#cp) body .sc-conv { display: flex !important; align-items: flex-start !important; gap: 12px !important; min-height: 72px; box-sizing: border-box; padding: 12px 16px !important; color: inherit !important; text-decoration: none !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-conv:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .sc-conv .sc-avatar { width: 40px !important; height: 40px !important; flex: 0 0 40px; font-size: 15px !important; } html[data-theme]:not(#cp) body .sc-conv-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html[data-theme]:not(#cp) body .sc-conv-row1 { display: flex; align-items: baseline !important; gap: 4px; min-width: 0; } html[data-theme]:not(#cp) body .sc-conv-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px !important; font-weight: 500 !important; } html[data-theme]:not(#cp) body .sc-conv.is-unread .sc-conv-name { font-weight: 600 !important; } html[data-theme]:not(#cp) body .sc-conv-ic { display: inline-flex; align-self: center; flex: 0 0 auto; color: var(--cp-dim); } html[data-theme]:not(#cp) body .sc-conv-star { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .sc-conv-time { flex: 0 0 auto; margin-left: 6px; font-size: 11.5px !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .sc-conv.is-unread .sc-conv-time { color: var(--cp-rust-hi) !important; font-weight: 600; } html[data-theme]:not(#cp) body .sc-conv-preview { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 !important; } html[data-theme]:not(#cp) body .sc-conv-prev-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px !important; } html[data-theme]:not(#cp) body .sc-conv.is-unread .sc-conv-prev-text { color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-prev-who { color: var(--cp-dim); } html[data-theme]:not(#cp) body .sc-conv.active .sc-prev-who { color: var(--cp-muted); } /* v5.70.0 (Prüfung): „Du:“ auf der Rust-Tönung der gewählten Zeile – dim nur 4,4:1, muted > 6:1 */ html[data-theme]:not(#cp) body .sc-conv-unread { flex: 0 0 auto; height: 18px; min-width: 18px; box-sizing: border-box; padding: 0 5px !important; text-align: center; border-radius: var(--cp-r) !important; font: 600 11px/18px var(--cp-font) !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .sc-conv-assignee { flex: 0 0 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cp-surface-3); color: var(--cp-muted); box-shadow: 0 0 0 1px var(--cp-line-2); font: 600 9px/1 var(--cp-font); } html[data-theme]:not(#cp) body .sc-conv-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 11.5px; color: var(--cp-muted); } html[data-theme]:not(#cp) body .sc-conv-ph, html[data-theme]:not(#cp) body .sc-conv-mb { display: inline-flex !important; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; margin: 0 !important; overflow: hidden; text-overflow: ellipsis; color: var(--cp-muted) !important; font-size: 11.5px !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .sc-dot-sep { flex: 0 0 auto; color: var(--cp-dim); } html[data-theme]:not(#cp) body .sc-conv-tag, html[data-theme]:not(#cp) body .sc-chat-tag { display: inline-flex !important; align-items: center; gap: 4px; flex: 0 0 auto; height: 18px; padding: 0 6px !important; box-sizing: border-box; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; background: transparent !important; color: var(--cp-text) !important; font: 500 11px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-conv-tag--more, html[data-theme]:not(#cp) body .sc-chat-tag--more { color: var(--cp-muted) !important; flex: 0 0 auto !important; } /* Etiketten kürzen zuerst (Name, Telefon, Postfach behalten Vorrang) */ html[data-theme]:not(#cp) body .sc-conv-tag:not(.sc-conv-tag--more), html[data-theme]:not(#cp) body .sc-chat-tag:not(.sc-chat-tag--more) { flex: 0 100 auto; min-width: 22px; max-width: max-content; overflow: hidden; } html[data-theme]:not(#cp) body .sc-conv-tag > span, html[data-theme]:not(#cp) body .sc-chat-tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* v5.70.0 (P3): Listenzeile 3 – Etiketten fallen als Ganzes weg (Umbruch in die ausgeblendete 2. Zeile) statt zu leeren Farbkästchen zu schrumpfen; Telefon und Postfach bleiben vollständig. Nur das Telefon darf notfalls noch schrumpfen. */ html[data-theme]:not(#cp) body .sc-conv-meta { flex-wrap: wrap; align-content: flex-start; height: 18px; row-gap: 0; } html[data-theme]:not(#cp) body .sc-conv-meta > * { flex-shrink: 0 !important; } html[data-theme]:not(#cp) body .sc-conv-meta > .sc-conv-ph { flex-shrink: 1 !important; } /* Trenner „·“ steckt jetzt im Postfach-Chip (bricht mit ihm um, bleibt nie allein am Zeilenende) */ html[data-theme]:not(#cp) body .sc-conv-mb > .sc-dot-sep { margin-right: 2px; } html[data-theme]:not(#cp) body .sc-note-add-form textarea { width: 100%; box-sizing: border-box; } html[data-theme]:not(#cp) body .sc-conv-tag > i, html[data-theme]:not(#cp) body .sc-conv-mb > i, html[data-theme]:not(#cp) body .sc-chat-tag > i, html[data-theme]:not(#cp) body .sc-tag-chip > i, html[data-theme]:not(#cp) body .sc-attr-mb > i { display: inline-block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; } html[data-theme]:not(#cp) body .sc-conv.active { background: var(--cp-rust-soft) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-conv.active::before { content: ""; inset: 0 auto 0 0 !important; width: 2px !important; background: var(--cp-rust-hi) !important; opacity: 1 !important; z-index: 1 !important; } html[data-theme]:not(#cp) body .sc-conv.sc-swipe-left { background: linear-gradient(90deg, transparent 55%, var(--cp-hover)) !important; background: linear-gradient(90deg, transparent 55%, color-mix(in srgb, var(--cp-danger) 22%, transparent)) !important; } html[data-theme]:not(#cp) body .sc-conv.sc-swipe-left::after { color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .sc-conv.sc-swipe-right { background: linear-gradient(90deg, var(--cp-hover), transparent 45%) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--cp-warning) 22%, transparent), transparent 45%) !important; } html[data-theme]:not(#cp) body .sc-conv.sc-swipe-right::after { color: var(--cp-warning) !important; } /* ── v5.70.0 (P3): Kopf 64 px ohne Umbruch, Aktionen 32 px, Trennstrich, „Erledigt“ gedrückt = Erfolgs-Tönung, Band (zurückgestellt/archiviert/Papierkorb), leere Chat-Fläche ── */ html[data-theme]:not(#cp) body .sc-chat-head { display: flex !important; align-items: center !important; gap: 12px !important; flex: 0 0 auto; flex-wrap: nowrap !important; height: 64px; min-height: 64px; box-sizing: border-box; padding: 0 12px 0 16px !important; } html[data-theme]:not(#cp) body .sc-chat-head-l { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 12px !important; } html[data-theme]:not(#cp) body .sc-chat-head-l .sc-avatar { width: 40px !important; height: 40px !important; flex: 0 0 40px; font-size: 15px !important; } html[data-theme]:not(#cp) body .sc-chat-head-txt { flex: 1 1 auto; min-width: 0; } html[data-theme]:not(#cp) body .sc-chat-name-row, html[data-theme]:not(#cp) body .sc-chat-phone-row { display: flex !important; align-items: center; flex-wrap: nowrap !important; min-width: 0; overflow: hidden; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-chat-name-row { gap: 6px !important; } html[data-theme]:not(#cp) body .sc-chat-name { flex: 0 0 auto; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/20px var(--cp-font) !important; } /* Name hat Vorrang vor Etiketten */ html[data-theme]:not(#cp) body .sc-chat-phone-row { gap: 6px !important; margin-top: 2px !important; font-size: 12px !important; line-height: 16px; } html[data-theme]:not(#cp) body .sc-chat-phone-row .sc-ch-icon { width: 14px; height: 14px; flex: 0 0 14px; } html[data-theme]:not(#cp) body .sc-chat-phone-row .sc-ch-icon svg { width: 9px; height: 9px; } html[data-theme]:not(#cp) body .sc-chat-flag { flex: 0 0 auto; font-size: 13px !important; } html[data-theme]:not(#cp) body .sc-chat-phone { flex: 0 0 auto; font-variant-numeric: tabular-nums; text-decoration: none !important; } html[data-theme]:not(#cp) body .sc-chat-phone:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-chat-sep { flex: 0 0 auto; color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .sc-chat-company { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-chat-head-r { display: flex !important; align-items: center; flex: 0 0 auto; gap: 2px !important; } html[data-theme]:not(#cp) body .sc-chat-head-r .sc-icon { width: 32px !important; height: 32px !important; flex: 0 0 32px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; } html[data-theme]:not(#cp) body .sc-sep { display: inline-block; flex: 0 0 1px; width: 1px; height: 20px; margin: 0 4px; background: var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-icon[aria-pressed="true"] { color: var(--cp-strong) !important; background: var(--cp-surface-3) !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .sc-icon[data-act="done"][aria-pressed="true"] { color: var(--cp-success) !important; background: var(--cp-surface-3) !important; background: color-mix(in srgb, var(--cp-success) 14%, transparent) !important; border-color: var(--cp-line-2) !important; border-color: color-mix(in srgb, var(--cp-success) 40%, transparent) !important; } html[data-theme]:not(#cp) body .sc-icon:focus-visible, html[data-theme]:not(#cp) body .sc-icon-sm:focus-visible, html[data-theme]:not(#cp) body .sc-icon-mini:focus-visible { outline: none !important; box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .sc-chat-back { width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 0; border-radius: var(--cp-r-sm); background: transparent !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-chat-back:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } @container scchat (max-width: 500px) { html[data-theme]:not(#cp) body .sc-chat-flag, html[data-theme]:not(#cp) body .sc-chat-phone, html[data-theme]:not(#cp) body .sc-chat-tag, html[data-theme]:not(#cp) body .sc-chat-phone-row .sc-chat-sep { display: none !important; } /* v5.71.1: ohne verknüpften Kunden bleibt die Kennung sichtbar (extensions.css) */ html[data-theme]:not(#cp) body .sc-chat-phone-row .sc-chat-phone.sc-chat-phone--keep { display: inline-block !important; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @container scchat (max-width: 420px) { html[data-theme]:not(#cp) body .sc-chat-head-r [data-act="tag"], html[data-theme]:not(#cp) body .sc-chat-head-r [data-act="snooze"], html[data-theme]:not(#cp) body .sc-chat-head-r .sc-sep { display: none !important; } html[data-theme]:not(#cp) body .sc-chat-head { gap: 8px !important; padding: 0 8px !important; } } html[data-theme]:not(#cp) body .sc-chat-banner { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 32px; box-sizing: border-box; padding: 0 16px; border-bottom: 1px solid var(--cp-line) !important; color: var(--cp-text) !important; font-size: 12.5px; background: var(--cp-surface-2) !important; background: color-mix(in srgb, var(--cp-warning) 8%, var(--cp-surface)) !important; } html[data-theme]:not(#cp) body .sc-chat-banner-ic { display: inline-flex; color: var(--cp-warning); } html[data-theme]:not(#cp) body .sc-chat-banner-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-chat-banner .sc-link-btn { margin-left: auto; padding-left: 0 !important; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-chat-empty { background: var(--cp-void); } html[data-theme="light"]:not(#cp) body .sc-chat-empty { background: var(--cp-surface-2); } html[data-theme]:not(#cp) body .sc-empty-pane { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 320px; padding: 24px; text-align: center; color: var(--cp-dim); } html[data-theme]:not(#cp) body .sc-empty-pane p { margin: 0; } html[data-theme]:not(#cp) body .sc-empty-t { margin-top: 6px !important; color: var(--cp-strong); font: 500 14px/1.4 var(--cp-font); } html[data-theme]:not(#cp) body .sc-empty-s { color: var(--cp-muted); font-size: 12.5px; line-height: 1.5; } /* ── v5.70.0 (P3): Menüs (⋯, Einstellungen, Listenaktionen, Blasen-Aktionen) – SVG + Text, Gefahr in Rot, Schalter ── */ html[data-theme]:not(#cp) body .sc-menu { padding: 4px !important; gap: 1px !important; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; } html[data-theme]:not(#cp) body .sc-dropdown-item { display: flex !important; align-items: center; gap: 10px !important; min-height: 34px; padding: 0 10px !important; font: 400 13px/1.3 var(--cp-font) !important; text-align: left; } html[data-theme]:not(#cp) body .sc-dropdown-item:focus-visible { outline: none; background: var(--cp-hover) !important; box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .sc-dd-ic { display: inline-flex; flex: 0 0 16px; width: 16px; justify-content: center; color: var(--cp-muted); } html[data-theme]:not(#cp) body .sc-dd-ic svg { width: 16px; height: 16px; } html[data-theme]:not(#cp) body .sc-dropdown-item:hover .sc-dd-ic { color: var(--cp-strong); } html[data-theme]:not(#cp) body .sc-dd-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-dd-kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r-sm); background: transparent; color: var(--cp-dim); box-shadow: none; font: 500 10.5px/1.3 var(--cp-font); } html[data-theme]:not(#cp) body .sc-dropdown-item .sc-sec-warn { margin-left: 8px; } html[data-theme]:not(#cp) body .sc-dropdown-item.danger, html[data-theme]:not(#cp) body .sc-dropdown-item.danger .sc-dd-ic { color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .sc-dropdown-item.danger:hover { background: var(--cp-hover) !important; background: color-mix(in srgb, var(--cp-danger) 10%, transparent) !important; color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .sc-menu .sc-dropdown-hdr { padding: 8px 10px 4px !important; font-weight: 500 !important; } html[data-theme]:not(#cp) body .sc-switch { position: relative; flex: 0 0 28px; width: 28px; height: 16px; margin-left: auto; border-radius: var(--cp-r-sm); background: var(--cp-surface-3); box-shadow: inset 0 0 0 1px var(--cp-line-2); transition: background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .sc-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 1px; background: var(--cp-muted); transition: transform var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .sc-dd-switch[aria-checked="true"] .sc-switch { background: var(--cp-rust); box-shadow: none; } html[data-theme]:not(#cp) body .sc-dd-switch[aria-checked="true"] .sc-switch::after { transform: translateX(12px); background: var(--cp-on-rust); } /* ── v5.70.0 (P3): Auswahl-Popover – Farbpunkte, Gruppen, „Neues Etikett“, Zurückstellen mit eigenem Datum ── */ html[data-theme]:not(#cp) body .sc-tag-dot { display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; } html[data-theme]:not(#cp) body .sc-tag-dot.is-empty { background: transparent !important; border: 1px dashed var(--cp-line-2); box-sizing: border-box; } html[data-theme]:not(#cp) body .sc-pick .sc-dropdown-hdr { padding: 8px 8px 4px !important; } html[data-theme]:not(#cp) body .sc-pick .sc-dropdown-hdr[hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-pick-ic, html[data-theme]:not(#cp) body .sc-pick-foot .sc-pick-row > svg { display: inline-flex; flex: 0 0 auto; color: var(--cp-muted); } html[data-theme]:not(#cp) body .sc-pick-new, html[data-theme]:not(#cp) body .sc-pick-foot .sc-pick-new > svg { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .sc-pick-new[hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-snooze-pop .sc-pick-foot { display: flex; flex-direction: column; gap: 6px; } html[data-theme]:not(#cp) body .sc-snooze-pop .sc-snooze-custom { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 2px 8px 6px !important; border: 0 !important; } html[data-theme]:not(#cp) body .sc-snooze-pop .sc-snooze-custom[hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-snooze-pop .sc-snooze-dt { width: 100%; box-sizing: border-box; flex: 0 0 auto; } html[data-theme]:not(#cp) body .sc-snooze-dt.is-invalid { border-color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .sc-snooze-pop .sc-snooze-custom-row { justify-content: space-between; flex-wrap: nowrap; } html[data-theme]:not(#cp) body .sc-snooze-tz { font-size: 11.5px !important; } html[data-theme]:not(#cp) body .sc-snooze-pop .sc-field-err { margin: 0; } html[data-theme]:not(#cp) body .sc-snooze-pop .sc-snooze-custom-row .ext-btn-primary { height: 28px; padding: 0 12px !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; transform: none !important; background: var(--cp-rust) !important; border: 1px solid var(--cp-rust) !important; color: var(--cp-on-rust) !important; font: 600 12px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-snooze-pop .sc-snooze-custom-row .ext-btn-primary:hover { background: var(--cp-rust-hi) !important; border-color: var(--cp-rust-hi) !important; } /* ── v5.70.0 (P3): Kontakt-Panel – Kopf 56 px, Karte 48 px ohne Glow, Abschnitte mit 10,5-px-Überschrift, Zeilen 32 px, Etiketten-Chips + gestrichelter „+ Etikett“, Dateinamen mit Ellipsis, Notizen mit Bearbeiten direkt in der Notiz ── */ html[data-theme]:not(#cp) body .sc-detail-head { display: flex; align-items: center; gap: 4px; height: 56px; box-sizing: border-box; padding: 0 8px 0 16px !important; } html[data-theme]:not(#cp) body .sc-detail-title { flex: 1 1 auto; min-width: 0; } html[data-theme]:not(#cp) body .sc-detail-actions { display: flex; gap: 2px; } html[data-theme]:not(#cp) body .sc-detail-head .sc-icon { width: 32px !important; height: 32px !important; padding: 0 !important; align-items: center; justify-content: center; } html[data-theme]:not(#cp) body .sc-detail-body { overscroll-behavior: contain; } html[data-theme]:not(#cp) body .sc-detail-hero { padding: 16px !important; gap: 4px !important; } html[data-theme]:not(#cp) body .sc-detail-hero .sc-avatar { width: 48px !important; height: 48px !important; font-size: 18px !important; } html[data-theme]:not(#cp) body .sc-detail-hero-name { margin-top: 6px !important; font: 600 15px/1.3 var(--cp-font) !important; text-align: center; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .sc-detail-hero-phone-row { display: flex; align-items: center; gap: 4px; } html[data-theme]:not(#cp) body .sc-detail-hero-phone { font-size: 12.5px !important; font-variant-numeric: tabular-nums; text-decoration: none !important; } html[data-theme]:not(#cp) body .sc-detail-hero-phone:hover { color: var(--cp-strong) !important; text-decoration: underline !important; text-underline-offset: 2px; } html[data-theme]:not(#cp) body .sc-icon-mini { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; cursor: pointer; } html[data-theme]:not(#cp) body .sc-icon-mini:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-icon-mini.danger:hover { color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .sc-d-sec { padding: 12px 16px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body .sc-d-sec h5 { margin: 0 0 8px !important; color: var(--cp-muted) !important; font: 500 10.5px/1.3 var(--cp-font) !important; letter-spacing: .14em; text-transform: uppercase; } html[data-theme]:not(#cp) body .sc-attr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; box-sizing: border-box; padding: 4px 0 !important; font-size: 13px !important; } html[data-theme]:not(#cp) body .sc-attr-key { flex: 0 0 auto; font-size: 12px !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-attr-val { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px; min-width: 0; text-align: right; font-weight: 500; word-break: normal !important; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .sc-attr-val .sc-muted { font-weight: 400; } html[data-theme]:not(#cp) body .sc-attr-mb { display: inline-flex; align-items: center; gap: 6px; } html[data-theme]:not(#cp) body .sc-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp) body .sc-tag-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: var(--cp-surface-2); color: var(--cp-text); font: 500 12px/1 var(--cp-font); } html[data-theme]:not(#cp) body .sc-chip-add { display: inline-flex; align-items: center; gap: 4px; height: 24px; box-sizing: border-box; padding: 0 8px !important; cursor: pointer; border: 1px dashed var(--cp-line-2) !important; border-radius: var(--cp-r) !important; background: transparent !important; color: var(--cp-muted) !important; box-shadow: none !important; font: 500 12px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-chip-add:hover, html[data-theme]:not(#cp) body .sc-chip-add:focus-visible { border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; outline: none; } html[data-theme]:not(#cp) body .sc-files-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 !important; } html[data-theme]:not(#cp) body .sc-file-thumb { border-radius: var(--cp-r) !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line); overflow: hidden; } html[data-theme]:not(#cp) body .sc-file-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1; min-width: 0; box-sizing: border-box; padding: 6px !important; border-radius: var(--cp-r) !important; font-size: 11px !important; word-break: normal !important; text-decoration: none !important; } html[data-theme]:not(#cp) body .sc-file-card:hover { border-color: var(--cp-line-2) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-file-ic { display: inline-flex; color: var(--cp-muted); } html[data-theme]:not(#cp) body .sc-file-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-files-more { margin-top: 8px; } html[data-theme]:not(#cp) body .sc-d-empty { margin: 0; color: var(--cp-dim); font-size: 12px; } html[data-theme]:not(#cp) body .sc-note-add-form { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px !important; } html[data-theme]:not(#cp) body .sc-note-add-form .ext-btn, html[data-theme]:not(#cp) body .sc-note-edit .ext-btn { align-self: flex-end; height: 28px; padding: 0 12px !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; transform: none !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; font: 500 12px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-note-add-form .ext-btn:hover, html[data-theme]:not(#cp) body .sc-note-edit .ext-btn:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-note-edit .ext-btn-primary { background: var(--cp-rust) !important; border-color: var(--cp-rust) !important; color: var(--cp-on-rust) !important; } html[data-theme]:not(#cp) body .sc-note-edit .ext-btn-primary:hover { background: var(--cp-rust-hi) !important; border-color: var(--cp-rust-hi) !important; color: var(--cp-on-rust) !important; } html[data-theme]:not(#cp) body .sc-notes-list { display: flex; flex-direction: column; gap: 6px; max-height: none !important; } html[data-theme]:not(#cp) body .sc-note { padding: 8px 10px !important; } html[data-theme]:not(#cp) body .sc-note-meta { color: var(--cp-muted) !important; font: 500 11px/1.3 var(--cp-font) !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .sc-note-body { color: var(--cp-text) !important; font-size: 12.5px !important; line-height: 1.5; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .sc-note-edit { display: flex; flex-direction: column; gap: 6px; } html[data-theme]:not(#cp) body .sc-note-edit textarea { width: 100%; box-sizing: border-box; padding: 6px 8px; resize: vertical; font: 400 12.5px/1.5 var(--cp-font); background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-note-edit textarea:focus { border-color: var(--cp-rust-line) !important; outline: none; } html[data-theme]:not(#cp) body .sc-note-edit-btns { display: flex; justify-content: flex-end; gap: 6px; } /* Automationen (Einstellungen) */ html[data-theme]:not(#cp) body .sc-auto-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } html[data-theme]:not(#cp) body .sc-auto-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px !important; background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body .sc-auto-main { min-width: 0; } html[data-theme]:not(#cp) body .sc-auto-main small { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .sc-auto-name { display: flex; align-items: center; gap: 8px; color: var(--cp-strong); font: 600 13px/1.3 var(--cp-font); } html[data-theme]:not(#cp) body .sc-auto-state { flex: 0 0 auto; padding: 1px 6px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r-sm); color: var(--cp-muted); font: 500 11px/1.3 var(--cp-font); } html[data-theme]:not(#cp) body .sc-auto-state.is-on { border-color: var(--cp-success); color: var(--cp-success); } /* ── v5.70.0 (P3): Touch (kein Hover) – „⋯“ neben der Blase (60 %), Download 85 %, Notiz-Aktionen 60 %; langes Drücken = Menü ── */ @media (hover: none) { html[data-theme]:not(#cp) body .sc-msg-tools { opacity: .6 !important; pointer-events: auto !important; top: 2px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-msg.in .sc-msg-tools { left: calc(100% + 2px) !important; right: auto !important; } html[data-theme]:not(#cp) body .sc-msg.out .sc-msg-tools { right: calc(100% + 2px) !important; left: auto !important; } html[data-theme]:not(#cp) body .sc-msg-tools .sc-msg-tool:not(.sc-msg-more) { display: none !important; } html[data-theme]:not(#cp) body .sc-msg-tools .sc-msg-more { display: inline-flex !important; width: 28px; height: 28px; } html[data-theme]:not(#cp) body .sc-media-dl { opacity: .85 !important; } html[data-theme]:not(#cp) body .sc-note-actions { opacity: .6 !important; } } /* ── v5.70.0 (P4): Design-System-Feinschliff – Kontrast ≥ 4,5:1 in beiden Themen, Marke (flache Rust-/Sekundärknöpfe, Radius 2–3 px, kein Glow, kein Hover-Sprung), Dialog-Bausteine statt heller Inline-Stile, Vorlagen-/Emoji-Popover, KI-Leiste, Chat-Suche, Bottom-Sheets < 600 px, Fokusringe. Nur --cp-*-Tokens; jeder Selektor mit Präfix. ── */ /* Text-Varianten der Statusfarben: zur Schrift (strong) gemischt → Fließtext/Metadaten ≥ 4,5:1 auch im Hellthema */ @supports (color: color-mix(in srgb, red 50%, blue)) { html[data-theme]:not(#cp) body { --sc-danger-tx: color-mix(in srgb, var(--cp-danger) 80%, var(--cp-strong)); --sc-ok-tx: color-mix(in srgb, var(--cp-success) 70%, var(--cp-strong)); --sc-warn-tx: color-mix(in srgb, var(--cp-warning) 70%, var(--cp-strong)); --sc-info-tx: color-mix(in srgb, var(--cp-info) 75%, var(--cp-strong)); } } html[data-theme]:not(#cp) body .sc-field-err, html[data-theme]:not(#cp) body .sc-msg-fail, html[data-theme]:not(#cp) body .sc-dropdown-item.danger, html[data-theme]:not(#cp) body .sc-dropdown-item.danger .sc-dd-ic, html[data-theme]:not(#cp) body .sc-dropdown-item.danger:hover { color: var(--sc-danger-tx, var(--cp-danger)) !important; } html[data-theme]:not(#cp) body .sc-auto-state.is-on { color: var(--sc-ok-tx, var(--cp-success)) !important; } html[data-theme]:not(#cp) body .ext-loading, html[data-theme]:not(#cp) body .rst-inline-page-ext .ext-empty, html[data-theme]:not(#cp) body .wa-modal .ext-empty { color: var(--cp-muted) !important; } /* Knöpfe (.ext-btn-Familie) wie RISE .btn-default/.btn-primary – statt Indigo-/Violett-Pille mit Schatten und translateY */ html[data-theme]:not(#cp) body .ext-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; height: 32px; box-sizing: border-box; padding: 0 14px !important; border-radius: var(--cp-r-sm) !important; background: var(--cp-surface-2) !important; background-image: none !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; box-shadow: none !important; transform: none !important; font: 500 13px/1 var(--cp-font) !important; letter-spacing: 0; text-transform: none; white-space: nowrap; text-decoration: none !important; cursor: pointer; transition: background var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .ext-btn:hover { background: var(--cp-surface-3) !important; border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; transform: none !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .ext-btn:focus-visible { outline: 2px solid var(--cp-rust-line) !important; outline-offset: 2px; box-shadow: none !important; } html[data-theme]:not(#cp) body .ext-btn svg { width: 14px; height: 14px; flex: 0 0 auto; } html[data-theme]:not(#cp) body .ext-btn.ext-btn-sm { height: 28px; padding: 0 10px !important; font-size: 12px !important; } html[data-theme]:not(#cp) body .ext-btn.ext-btn-icon { width: 28px; height: 28px; padding: 0 !important; } html[data-theme]:not(#cp) body .ext-btn.ext-btn-icon svg { width: 16px; height: 16px; } html[data-theme]:not(#cp) body .ext-btn.ext-btn-primary, html[data-theme]:not(#cp) body .sc-pick .ext-btn.ext-btn-primary, html[data-theme]:not(#cp) body .ext-btn.ext-btn-danger-solid, html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn.ext-btn-danger-solid { background: var(--cp-rust) !important; background-image: none !important; border-color: var(--cp-rust) !important; color: var(--cp-on-rust) !important; font: 600 11.5px/1 var(--cp-font) !important; letter-spacing: .12em !important; text-transform: uppercase !important; } html[data-theme]:not(#cp) body .ext-btn.ext-btn-primary:hover, html[data-theme]:not(#cp) body .sc-pick .ext-btn.ext-btn-primary:hover { background: var(--cp-rust-hi) !important; border-color: var(--cp-rust-hi) !important; color: var(--cp-on-rust) !important; } html[data-theme]:not(#cp) body .ext-btn.ext-btn-danger-solid, html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn.ext-btn-danger-solid { background: var(--cp-danger) !important; border-color: var(--cp-danger) !important; } /* Weiß auf --cp-danger erreicht im Dunkelthema nur 3,9:1 → Fläche leicht abgedunkelt (≥ 5:1 in beiden Themen) */ @supports (color: color-mix(in srgb, red 50%, blue)) { html[data-theme]:not(#cp) body .ext-btn.ext-btn-danger-solid, html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn.ext-btn-danger-solid { background: color-mix(in srgb, var(--cp-danger) 82%, #000) !important; border-color: color-mix(in srgb, var(--cp-danger) 82%, #000) !important; } } html[data-theme]:not(#cp) body .ext-btn.ext-btn-danger-solid:hover, html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn.ext-btn-danger-solid:hover { filter: brightness(1.08); } html[data-theme]:not(#cp) body .ext-btn.ext-btn-danger { color: var(--sc-danger-tx, var(--cp-danger)) !important; border-color: var(--cp-line-2) !important; border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent) !important; } html[data-theme]:not(#cp) body .ext-btn.ext-btn-danger:hover { background: var(--cp-hover) !important; background: color-mix(in srgb, var(--cp-danger) 10%, transparent) !important; border-color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .ext-btn:disabled, html[data-theme]:not(#cp) body .ext-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; } html[data-theme]:not(#cp) body .ext-btn[hidden] { display: none !important; } html[data-theme]:not(#cp) body .ext-btn.ext-btn-primary:disabled:hover { background: var(--cp-rust) !important; } /* Dialog-Bausteine (ersetzen die Inline-Stile mit #475569/#0f172a/#f8fafc …) */ html[data-theme]:not(#cp) body .sc-p.sc-lead { margin: 0 0 12px !important; } html[data-theme]:not(#cp) body .sc-hint { display: block; margin: 0 0 10px; color: var(--cp-muted) !important; font: 400 11.5px/1.5 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-h { margin: 0 0 6px !important; color: var(--cp-strong) !important; font: 600 13px/1.35 var(--cp-font) !important; letter-spacing: 0; text-transform: none; } html[data-theme]:not(#cp) body .sc-h--sp { margin-top: 16px !important; } html[data-theme]:not(#cp) body .sc-ul { margin: 6px 0 0; padding-left: 20px; color: var(--cp-text) !important; font-size: 12.5px; line-height: 1.6; } html[data-theme]:not(#cp) body .sc-ul li + li { margin-top: 4px; } html[data-theme]:not(#cp) body .sc-field { display: block; margin: 0 0 12px; color: var(--cp-muted) !important; font: 500 12px/1.4 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-field :is(input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea) { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; min-height: 34px; padding: 7px 10px; font: 400 13.5px/1.4 var(--cp-font) !important; letter-spacing: 0; } html[data-theme]:not(#cp) body .sc-field textarea { resize: vertical; min-height: 72px; } html[data-theme]:not(#cp) body .sc-field [hidden] { display: none !important; } html[data-theme]:not(#cp) body .sc-field > .sc-hint { margin: 4px 0 0; } html[data-theme]:not(#cp) body .sc-field > .sc-code { margin: 6px 0 4px; } html[data-theme]:not(#cp) body .sc-check { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--cp-text) !important; font: 500 13px/1.4 var(--cp-font) !important; cursor: pointer; } html[data-theme]:not(#cp) body .sc-check input { width: 16px; height: 16px; margin: 0; flex: 0 0 16px; } html[data-theme]:not(#cp) body .sc-box { margin: 0 0 14px; padding: 12px 14px; background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-code { display: block; margin: 6px 0 12px; padding: 8px 10px; max-width: 100%; box-sizing: border-box; overflow-x: auto; white-space: pre; background: var(--cp-surface-3) !important; color: var(--cp-text) !important; border: 0 !important; border-radius: var(--cp-r-sm) !important; font: 400 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; user-select: all; } html[data-theme]:not(#cp) body .sc-code-inline, html[data-theme]:not(#cp) body .wa-modal-body code:not(.sc-code) { padding: 1px 5px; background: var(--cp-surface-3) !important; color: var(--cp-text) !important; border: 0 !important; border-radius: var(--cp-r-sm) !important; font: 400 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .sc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; } html[data-theme]:not(#cp) body .sc-alert-danger { padding: 12px 14px; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; background: var(--cp-surface-2) !important; background: color-mix(in srgb, var(--cp-danger) 10%, transparent) !important; border: 1px solid var(--cp-danger) !important; border: 1px solid color-mix(in srgb, var(--cp-danger) 40%, transparent) !important; } html[data-theme]:not(#cp) body .sc-alert-danger strong { color: var(--sc-danger-tx, var(--cp-danger)) !important; } html[data-theme]:not(#cp) body .sc-status { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px; color: var(--cp-text) !important; font: 400 13px/1.5 var(--cp-font); background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-left-width: 3px !important; border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body .sc-status > svg { flex: 0 0 auto; margin-top: 1px; } html[data-theme]:not(#cp) body .sc-status.is-ok { border-color: var(--cp-success) !important; background: color-mix(in srgb, var(--cp-success) 8%, transparent) !important; } html[data-theme]:not(#cp) body .sc-status.is-warn { border-color: var(--cp-warning) !important; background: color-mix(in srgb, var(--cp-warning) 9%, transparent) !important; } html[data-theme]:not(#cp) body .sc-status.is-danger { border-color: var(--cp-danger) !important; background: color-mix(in srgb, var(--cp-danger) 9%, transparent) !important; } html[data-theme]:not(#cp) body .sc-status.is-info { border-color: var(--cp-info) !important; background: color-mix(in srgb, var(--cp-info) 9%, transparent) !important; } html[data-theme]:not(#cp) body .sc-status.is-ok > svg { color: var(--sc-ok-tx, var(--cp-success)); } html[data-theme]:not(#cp) body .sc-status.is-warn > svg { color: var(--sc-warn-tx, var(--cp-warning)); } html[data-theme]:not(#cp) body .sc-status.is-danger > svg { color: var(--sc-danger-tx, var(--cp-danger)); } html[data-theme]:not(#cp) body .sc-status.is-info > svg { color: var(--sc-info-tx, var(--cp-info)); } html[data-theme]:not(#cp) body .sc-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid currentColor; border-radius: var(--cp-r-sm) !important; background: transparent !important; font: 600 11px/1 var(--cp-font) !important; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-badge.is-ok { color: var(--sc-ok-tx, var(--cp-success)) !important; } html[data-theme]:not(#cp) body .sc-badge.is-warn { color: var(--sc-warn-tx, var(--cp-warning)) !important; } html[data-theme]:not(#cp) body .sc-badge.is-danger { color: var(--sc-danger-tx, var(--cp-danger)) !important; } html[data-theme]:not(#cp) body .sc-badge.is-info { color: var(--sc-info-tx, var(--cp-info)) !important; } /* Webhook-Sicherheit + Setup */ html[data-theme]:not(#cp) body .wa-sec { border-left-width: 3px !important; } html[data-theme]:not(#cp) body .wa-sec.is-ok { border-left-color: var(--cp-success) !important; } html[data-theme]:not(#cp) body .wa-sec.is-warn { border-left-color: var(--cp-warning) !important; } html[data-theme]:not(#cp) body .wa-sec.is-danger { border-left-color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body .wa-sec.is-info { border-left-color: var(--cp-info) !important; } html[data-theme]:not(#cp) body .wa-sec .sc-status { border-left-width: 1px !important; } html[data-theme]:not(#cp) body .wa-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } html[data-theme]:not(#cp) body .wa-sec-head .sc-h { margin: 0 !important; } html[data-theme]:not(#cp) body .wa-sec-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; } html[data-theme]:not(#cp) body .wa-sec-row input { flex: 1 1 220px; min-width: 0; height: 32px; padding: 0 10px; } html[data-theme]:not(#cp) body .sc-kv { display: flex; flex-direction: column; gap: 8px; } html[data-theme]:not(#cp) body .sc-kv-row { display: flex; align-items: center; gap: 10px; min-width: 0; } html[data-theme]:not(#cp) body .sc-kv-k { flex: 0 0 96px; color: var(--cp-muted) !important; font: 500 12px/1.3 var(--cp-font); } html[data-theme]:not(#cp) body .sc-kv-v { flex: 1 1 auto; min-width: 0; user-select: all; } html[data-theme]:not(#cp) body .wa-setup-card { max-width: 820px; } html[data-theme]:not(#cp) body .wa-setup-card summary { cursor: pointer; } html[data-theme]:not(#cp) body .wa-setup-card-body { margin-top: 12px; } html[data-theme]:not(#cp) body .sc-lang-picker { display: flex; gap: 8px; flex-wrap: wrap; } html[data-theme]:not(#cp) body .sc-lang-opt { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 12px !important; cursor: pointer; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-text) !important; font: 500 13px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-lang-opt:hover { background: var(--cp-hover) !important; border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-lang-opt.on { background: var(--cp-rust-soft) !important; border-color: var(--cp-rust) !important; color: var(--cp-strong) !important; font-weight: 600 !important; } html[data-theme]:not(#cp) body .sc-lang-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } html[data-theme]:not(#cp) body .sc-lang-opt:focus-within { outline: none; box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .sc-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } html[data-theme]:not(#cp) body .sc-btn-row--chips { margin: 0 0 12px; } html[data-theme]:not(#cp) body .sc-foot-start { margin-right: auto !important; } html[data-theme]:not(#cp) body .sc-color { width: 44px; height: 32px; padding: 2px !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; cursor: pointer; } html[data-theme]:not(#cp) body .sc-form-err { margin: 0 0 10px !important; } /* Auto-Antwort */ html[data-theme]:not(#cp) body .sc-auto-reply { min-width: 0 !important; gap: 12px !important; } html[data-theme]:not(#cp) body .sc-ar-section, html[data-theme]:not(#cp) body .sc-integration-row, html[data-theme]:not(#cp) body .sc-snooze-opt { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-ar-section { padding: 12px 14px !important; } html[data-theme]:not(#cp) body .sc-ar-toggle span { color: var(--cp-text) !important; font-size: 13px; } html[data-theme]:not(#cp) body .sc-ar-toggle strong { color: var(--cp-strong); } html[data-theme]:not(#cp) body .sc-ar-toggle input { accent-color: var(--cp-rust); } html[data-theme]:not(#cp) body .sc-ar-section textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; font: 400 13.5px/1.45 var(--cp-font) !important; resize: vertical; } html[data-theme]:not(#cp) body .sc-ar-times { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; } html[data-theme]:not(#cp) body .sc-ar-times .sc-hint { margin: 0; } html[data-theme]:not(#cp) body .sc-ar-times input { height: 32px; padding: 0 8px; font: 400 13px/1 var(--cp-font) !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .sc-snooze-opt:hover { background: var(--cp-hover) !important; border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; } /* Verwaltung: Vorlagen, Etiketten, Postfächer, Filter (vorher #f8fafc-Kacheln, Indigo-Kürzel, #475569-Labels) */ html[data-theme]:not(#cp) body .wa-mgr { gap: 20px !important; } html[data-theme]:not(#cp) body .wa-mgr-list { display: flex; flex-direction: column; gap: 6px; max-height: min(60vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; } html[data-theme]:not(#cp) body .wa-mgr-row { display: flex; align-items: center !important; gap: 10px; margin: 0 !important; padding: 10px 12px !important; background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .wa-mgr-row-main { flex: 1 1 auto; min-width: 0; } html[data-theme]:not(#cp) body .wa-mgr-row-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } html[data-theme]:not(#cp) body .wa-mgr-row-inline .sc-hint { margin: 0; } html[data-theme]:not(#cp) body .wa-mgr-row-title { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--cp-strong) !important; font: 600 13px/1.35 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-mgr-row-body { margin-top: 3px; color: var(--cp-muted) !important; font-size: 12px !important; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .wa-mgr-row-actions { display: flex; gap: 4px; flex: 0 0 auto; } html[data-theme]:not(#cp) body .wa-mgr-row-title code, html[data-theme]:not(#cp) body .wa-tpl-title code { flex: 0 0 auto; margin: 0 !important; padding: 1px 6px; background: var(--cp-surface-3) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; font: 500 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; } html[data-theme]:not(#cp) body .wa-sf-ic { display: inline-flex; flex: 0 0 auto; color: var(--cp-muted); } html[data-theme]:not(#cp) body .wa-mgr-empty { margin: 0; padding: 24px 12px; text-align: center; color: var(--cp-muted) !important; font-size: 13px; border: 1px dashed var(--cp-line-2); border-radius: var(--cp-r); } html[data-theme]:not(#cp) body .wa-mgr-form { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; padding: 14px 16px !important; color: var(--cp-text) !important; align-self: start; } html[data-theme]:not(#cp) body .wa-mgr-form h4 { margin: 0 0 12px !important; color: var(--cp-strong) !important; font: 600 13px/1.35 var(--cp-font) !important; letter-spacing: 0; text-transform: none; } html[data-theme]:not(#cp) body .wa-mgr-form label { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .wa-mgr-form-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } html[data-theme]:not(#cp) body .wa-mgr-tip { margin: 12px 0 0 !important; } /* Etikett-Umschalter (ältere Panel-Ansicht): Farbpunkt + Rahmen statt weißer Pille, „an“ = 18 % Tagfarbe */ html[data-theme]:not(#cp) body .sc-tag-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body .sc-tag-toggle::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--tc, var(--cp-dim)); } html[data-theme]:not(#cp) body .sc-tag-toggle.on { background: var(--cp-hover) !important; background: color-mix(in srgb, var(--tc, var(--cp-dim)) 18%, transparent) !important; border-color: var(--tc, var(--cp-line-2)) !important; color: var(--cp-strong) !important; } /* Vorlagen-Popover (an , oberhalb der Eingabe; Suche, ↑/↓, „/“-Vorschläge, Fuß „Vorlagen verwalten“) */ html[data-theme]:not(#cp) body .wa-tpl-pop { position: fixed; bottom: auto !important; right: auto !important; max-width: calc(100vw - 16px) !important; z-index: 9999 !important; display: flex !important; flex-direction: column; box-sizing: border-box; overflow: hidden; padding: 0 !important; } html[data-theme]:not(#cp) body .wa-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; padding: 10px 12px !important; border-bottom: 1px solid var(--cp-line) !important; color: var(--cp-muted) !important; font: 500 11px/1.3 var(--cp-font) !important; letter-spacing: .14em; text-transform: uppercase; } html[data-theme]:not(#cp) body .wa-tpl-hint { color: var(--cp-muted) !important; font: 400 11px/1.3 var(--cp-font); letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body .wa-popover-search { flex: 0 0 auto; width: calc(100% - 16px) !important; height: 32px; margin: 8px 8px 4px !important; padding: 0 10px !important; box-sizing: border-box; font: 400 13px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-popover-list { overflow-y: auto; overscroll-behavior: contain; padding: 4px !important; display: flex; flex-direction: column; gap: 1px; } html[data-theme]:not(#cp) body .wa-tpl-pop .wa-popover-list { flex: 1 1 auto; min-height: 0; max-height: none !important; } html[data-theme]:not(#cp) body .wa-tpl-row { display: flex !important; flex-direction: column; gap: 2px; width: 100%; padding: 8px 10px !important; box-sizing: border-box; cursor: pointer; text-align: left; background: transparent !important; border: 0 !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-text) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .wa-tpl-row:hover, html[data-theme]:not(#cp) body .wa-tpl-row.is-active { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .wa-tpl-row.is-active { box-shadow: inset 2px 0 0 var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .wa-tpl-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .wa-tpl-title { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--cp-strong) !important; font: 600 13px/1.35 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-tpl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .wa-tpl-body { margin: 0 !important; color: var(--cp-muted) !important; font: 400 12px/1.45 var(--cp-font) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[data-theme]:not(#cp) body .wa-tpl-none { padding: 14px 10px; color: var(--cp-muted) !important; font-size: 12.5px; } html[data-theme]:not(#cp) body .wa-popover-foot { flex: 0 0 auto; padding: 4px; border-top: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .wa-popover-foot .sc-pick-row svg { flex: 0 0 auto; color: var(--cp-muted); } /* Emoji-Popover: ohne Suchfeld, Raster 8 Spalten, Radius 3 px */ html[data-theme]:not(#cp) body .sc-emoji-pop { padding: 6px !important; width: 320px; max-width: calc(100vw - 16px); box-sizing: border-box; z-index: 9999; } html[data-theme]:not(#cp) body .sc-emoji-search { display: none !important; } html[data-theme]:not(#cp) body .sc-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; } html[data-theme]:not(#cp) body .sc-emoji-btn { height: 36px; padding: 0 !important; border: 0 !important; font-size: 20px !important; line-height: 1; cursor: pointer; } html[data-theme]:not(#cp) body .sc-emoji-btn:hover { background: var(--cp-hover) !important; } /* KI: Leiste über der Eingabe, Zusammenfassung, Chips als Sekundärknöpfe, Laden als neutrale Skelett-Zeilen */ html[data-theme]:not(#cp) body .wa-ai-bar { padding: 0 16px !important; background: var(--cp-surface) !important; } html[data-theme]:not(#cp) body .wa-ai-bar:empty { padding: 0 !important; } html[data-theme]:not(#cp) body .wa-ai-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding: 8px 0 0 !important; } html[data-theme]:not(#cp) body .wa-ai-chip { max-width: 100%; padding: 8px 12px !important; text-align: left; white-space: normal; cursor: pointer; background: var(--cp-surface-2) !important; background-image: none !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; box-shadow: none !important; transform: none !important; font: 400 13px/1.45 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-ai-chip:hover, html[data-theme]:not(#cp) body .wa-ai-chip:focus-visible { background: var(--cp-surface-3) !important; border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; outline: none; transform: none !important; } html[data-theme]:not(#cp) body .wa-ai-chip--block { display: block; width: 100%; margin: 0 0 6px !important; } html[data-theme]:not(#cp) body .wa-ai-close { width: 28px !important; height: 28px !important; flex: 0 0 28px; margin-left: auto; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-muted) !important; font-size: 20px !important; line-height: 1; cursor: pointer; /* ältere Skripte: „ד als Text */ } html[data-theme]:not(#cp) body .wa-ai-close:hover, html[data-theme]:not(#cp) body .wa-ai-close:focus-visible { background: var(--cp-hover) !important; color: var(--cp-strong) !important; outline: none; } html[data-theme]:not(#cp) body .wa-ai-err { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 !important; padding: 8px 10px !important; color: var(--cp-text) !important; font-size: 12.5px !important; background: var(--cp-surface-2) !important; background: color-mix(in srgb, var(--cp-danger) 10%, transparent) !important; border: 1px solid var(--cp-danger); border: 1px solid color-mix(in srgb, var(--cp-danger) 35%, transparent); border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body .wa-ai-err > svg { flex: 0 0 auto; color: var(--sc-danger-tx, var(--cp-danger)); } html[data-theme]:not(#cp) body .wa-ai-err > span { flex: 1 1 auto; min-width: 0; } html[data-theme]:not(#cp) body .sc-ai-skel, html[data-theme]:not(#cp) body .wa-ai-skel { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; } html[data-theme]:not(#cp) body .sc-ai-skel .sc-skel, html[data-theme]:not(#cp) body .wa-ai-skel .sc-skel { height: 10px; border-radius: var(--cp-r-sm); } html[data-theme]:not(#cp) body .sc-ai-skel .sc-skel:nth-child(1), html[data-theme]:not(#cp) body .wa-ai-skel .sc-skel:nth-child(1) { width: 92%; } html[data-theme]:not(#cp) body .sc-ai-skel .sc-skel:nth-child(2), html[data-theme]:not(#cp) body .wa-ai-skel .sc-skel:nth-child(2) { width: 78%; } html[data-theme]:not(#cp) body .sc-ai-skel .sc-skel:nth-child(3), html[data-theme]:not(#cp) body .wa-ai-skel .sc-skel:nth-child(3) { width: 56%; } html[data-theme]:not(#cp) body .sc-ai-skel-t { color: var(--cp-muted) !important; font: 400 12px/1.4 var(--cp-font); } html[data-theme]:not(#cp) body .wa-ai-skel .sc-ai-skel-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } html[data-theme]:not(#cp) body .sc-ai-summary { padding: 14px 16px !important; max-height: 50vh; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cp-surface) !important; background-image: none !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; font: 400 13.5px/1.65 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-ai-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-ai-result { margin-top: 2px; } /* ältere, noch zwischengespeicherte Skripte: heller Schimmer → neutraler Platzhalter */ html[data-theme]:not(#cp) body .sc-ai-summary-loading, html[data-theme]:not(#cp) body .wa-ai-loading { background: var(--cp-surface-3) !important; background-image: none !important; color: var(--cp-muted) !important; border-radius: var(--cp-r) !important; animation: sc-skel 1.2s var(--cp-ease-io) infinite alternate !important; } /* Chat-Suche (vorher #f8fafc-Leiste, Amber-Treffer mit Schein) */ html[data-theme]:not(#cp) body .sc-chat-search { display: flex; align-items: center; gap: 6px; padding: 8px 12px 8px 16px !important; background: var(--cp-surface) !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .sc-chat-search input { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px !important; font: 400 13px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-chat-search-cnt { min-width: 0 !important; color: var(--cp-muted) !important; font: 500 12px/1 var(--cp-font) !important; font-variant-numeric: tabular-nums; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-chat-search button { width: 32px !important; height: 32px !important; flex: 0 0 32px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-muted) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-chat-search button:hover:not(:disabled) { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-chat-search button:disabled { opacity: .4; cursor: default; } html[data-theme]:not(#cp) body .sc-chat-mark { padding: 0 1px; border-radius: 1px; color: inherit !important; background: var(--cp-rust-soft) !important; background: color-mix(in srgb, var(--cp-rust-hi) 26%, transparent) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-chat-mark.cur { color: var(--cp-strong) !important; background: color-mix(in srgb, var(--cp-rust-hi) 45%, transparent) !important; box-shadow: inset 0 -2px 0 var(--cp-rust-hi) !important; } /* Bild-Vollbild: Schließen als Icon-Knopf (40 px), „Herunterladen“ flach statt weißer Pille, Bild mit Radius 3 px */ html[data-theme]:not(#cp) body .sc-lightbox { background: rgba(6,7,10,.92) !important; } html[data-theme]:not(#cp) body .sc-lightbox img { border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp) body .sc-lightbox-close { width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; font-size: 22px !important; line-height: 1; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: var(--cp-r-sm) !important; color: #F6F6F4 !important; } html[data-theme]:not(#cp) body .sc-lightbox-close:hover, html[data-theme]:not(#cp) body .sc-lightbox-close:focus-visible { background: rgba(255,255,255,.16) !important; outline: none; } html[data-theme]:not(#cp) body .sc-lightbox-dl { display: inline-flex !important; align-items: center; gap: 6px; height: 36px; padding: 0 14px !important; text-decoration: none !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-text) !important; font: 500 13px/1 var(--cp-font) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sc-lightbox-dl:hover, html[data-theme]:not(#cp) body .sc-lightbox-dl:focus-visible { background: var(--cp-surface-3) !important; color: var(--cp-strong) !important; outline: none; } /* Altlasten im Dunkelthema ohne Override: Handy-Menüknopf, Panel-Griff, Kanal-Mini-Symbol */ html[data-theme]:not(#cp) body .sc-mobile-menu-btn, html[data-theme]:not(#cp) body .sc-detail-reopen { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-muted) !important; box-shadow: none !important; border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body .sc-mobile-menu-btn:hover, html[data-theme]:not(#cp) body .sc-detail-reopen:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .sc-conv-channel-mini { padding: 0 !important; background: var(--cp-surface) !important; box-shadow: 0 0 0 2px var(--cp-surface) !important; } html[data-theme]:not(#cp) body .sc-ch-txt { background: var(--cp-surface-3) !important; color: var(--cp-text) !important; font: 600 8px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-empty-pane .ext-btn { margin-top: 10px; } /* Modal: Inhalt scrollt im Dialog, keine Inline-Mindestbreiten mehr; am Handy (< 600 px) Bottom-Sheet in voller Breite */ html[data-theme]:not(#cp) body .wa-modal { display: flex !important; flex-direction: column; max-height: min(88vh, 900px) !important; overflow: hidden; } html[data-theme]:not(#cp) body .wa-modal-body { flex: 1 1 auto; min-height: 0; padding: 20px !important; overflow-y: auto; overscroll-behavior: contain; } html[data-theme]:not(#cp) body .wa-modal-body [style*="min-width"] { min-width: 0 !important; max-width: 100%; } @media (max-width: 599px) { html[data-theme]:not(#cp) body .wa-modal-back { align-items: flex-end !important; padding: 0 !important; } html[data-theme]:not(#cp) body .wa-modal, html[data-theme]:not(#cp) body .wa-modal--sm, html[data-theme]:not(#cp) body .wa-modal--md, html[data-theme]:not(#cp) body .wa-modal--lg, html[data-theme]:not(#cp) body .wa-modal--auto { width: 100vw !important; max-width: 100vw !important; max-height: 92vh !important; max-height: 92dvh !important; border-radius: var(--cp-r) var(--cp-r) 0 0 !important; border-bottom: 0 !important; } html[data-theme]:not(#cp) body .wa-modal-head { min-height: 52px; } html[data-theme]:not(#cp) body .wa-modal-body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; } html[data-theme]:not(#cp) body .wa-modal-foot { flex-wrap: wrap; } html[data-theme]:not(#cp) body .wa-modal-foot .ext-btn { flex: 1 1 0; min-width: 0; height: 40px; } html[data-theme]:not(#cp) body .wa-mgr { grid-template-columns: minmax(0, 1fr) !important; } html[data-theme]:not(#cp) body .wa-mgr-list { max-height: none; } html[data-theme]:not(#cp) body .sc-kv-row { flex-wrap: wrap; } html[data-theme]:not(#cp) body .sc-kv-k { flex: 1 1 100%; } } /* Fokusringe: innen 2 px var(--cp-rust-line), kein Glow */ html[data-theme]:not(#cp) body .sc-input-icon:focus-visible, html[data-theme]:not(#cp) body .sc-msg-tool:focus-visible, html[data-theme]:not(#cp) body .wa-modal-close:focus-visible, html[data-theme]:not(#cp) body .sc-chip-add:focus-visible, html[data-theme]:not(#cp) body .sc-reply-chip-x:focus-visible, html[data-theme]:not(#cp) body .sc-attach-x:focus-visible, html[data-theme]:not(#cp) body .sc-emoji-btn:focus-visible, html[data-theme]:not(#cp) body .sc-chat-search button:focus-visible, html[data-theme]:not(#cp) body .sc-filter-chip-x:focus-visible, html[data-theme]:not(#cp) body .sc-ai-btn:focus-visible, html[data-theme]:not(#cp) body .sc-chat-back:focus-visible, html[data-theme]:not(#cp) body .sc-assigned-avatar:focus-visible, html[data-theme]:not(#cp) body .sc-mobile-menu-btn:focus-visible, html[data-theme]:not(#cp) body .sc-sort:focus-visible, html[data-theme]:not(#cp) body .sc-tab:focus-visible { outline: none !important; box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .sc-assigned-avatar:focus-visible { box-shadow: inset 0 0 0 2px var(--cp-rust-line), 0 0 0 1px var(--cp-line-2) !important; } /* v5.70.0 (P4): Ring innen wie alle anderen, außen nur die neutrale Haarlinie */ /* Touch: neue Icon-Knöpfe mit 40-px-Zielfläche */ @media (pointer: coarse) { html[data-theme]:not(#cp) body .wa-ai-close, html[data-theme]:not(#cp) body .sc-chat-search button, html[data-theme]:not(#cp) body .ext-btn.ext-btn-icon { min-width: 40px; min-height: 40px; } html[data-theme]:not(#cp) body .wa-tpl-row { min-height: 44px; } html[data-theme]:not(#cp) body .wa-tpl-hint { display: none; } /* Tastatur-Hinweis nur mit Maus/Tastatur */ /* v5.70.0 (Prüfung): Tippflächen am Handy/iPad – unsichtbare Fläche per ::after statt größerer Knöpfe (Kopfzeile und Werkzeugleiste haben auf 360–375-px-Handys keine Breite übrig). Dicht gepackte Reihen (0–4 px Abstand) wachsen nur nach oben/unten, damit kein Knopf dem Nachbarn Fläche wegnimmt (sonst „Erledigt“ ↔ „Kontakt-Details“, „Senden“ ↔ Pfeil). */ html[data-theme]:not(#cp) body :is(.sc-chat-head-r .sc-icon, .sc-assigned-avatar, .sc-chat-back, .sc-list-head .sc-icon, .sc-detail-head .sc-icon, .sc-input-icon, .sc-ai-btn, .sc-mode-btn, .sc-send, .sc-send-arrow, .sc-msg-more, .sc-reply-chip-x, .sc-attach-x, .sc-filter-chip-x, .sc-icon-mini, .wa-modal-close, .sc-sort, .sc-link-btn) { position: relative; } html[data-theme]:not(#cp) body :is(.sc-chat-head-r .sc-icon, .sc-assigned-avatar, .sc-list-head .sc-icon, .sc-detail-actions .sc-icon, .sc-input-icon, .sc-ai-btn, .sc-mode-btn, .sc-send, .sc-send-arrow)::after { content: ""; position: absolute; inset: -6px 0; } html[data-theme]:not(#cp) body :is(.sc-chat-back, .sc-detail-back, .sc-msg-more, .wa-modal-close)::after { content: ""; position: absolute; inset: -6px; } html[data-theme]:not(#cp) body :is(.sc-reply-chip-x, .sc-attach-x, .sc-filter-chip-x)::after { content: ""; position: absolute; inset: -8px; } html[data-theme]:not(#cp) body .sc-icon-mini::after { content: ""; position: absolute; inset: -8px -2px; } /* steht neben Telefon-Link bzw. Notiz-Knöpfen */ /* Textknöpfe („Neueste zuerst“, „Ändern“, „Erneut senden“, „Warum?“): nur senkrecht – Sortierleiste, 32-px-Band und Fehlerzeile unter der Blase behalten ihre Höhe */ html[data-theme]:not(#cp) body :is(.sc-sort, .sc-link-btn)::after { content: ""; position: absolute; inset: -8px 0; } /* „Filter“ und „Weitere Listenaktionen“ stehen 2 px auseinander – die ältere Regel (v5.54.1, inset −8 px rundum) ließ „Weitere“ 6 px von „Filter“ abdecken; hier nur senkrecht (Präfix mit :not(#cq), um jene Regel zu schlagen) */ html[data-theme]:not(#cp):not(#cq) body .sc-sort-actions .sc-icon-sm::after { inset: -8px -1px; } /* Menü- und Auswahlzeilen: echte 44 px (wie .app-popover), kostet keine Breite */ html[data-theme]:not(#cp) body :is(.sc-dropdown-item, .sc-pick-row) { min-height: 44px; } } /* ── v5.70.0 (P5): Extras – Systemereignisse im Verlauf, freigegebene Meta-Vorlagen (Eingabe, Dialog, Blase), Setup-Abschnitt. Nur --cp-*-Tokens, Radius var(--cp-r)/var(--cp-r-sm), kein Glow; jeder Selektor mit Präfix. ── */ /* Systemzeile: zentriert, 11,5 px, Symbol gedimmt, Zeit muted – kein Rahmen, 10 px Abstand; bricht wie Fließtext um („· 16:44“ bleibt zusammen) */ html[data-theme]:not(#cp) body .sc-sys { align-self: center; display: block; max-width: min(560px, 92%); margin: 10px 0 !important; padding: 0 8px; box-sizing: border-box; color: var(--cp-muted) !important; font: 400 11.5px/1.5 var(--cp-font) !important; text-align: center; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .sc-sys-ic { display: inline-block; margin-right: 6px; vertical-align: -2px; color: var(--cp-dim); line-height: 0; } html[data-theme]:not(#cp) body .sc-sys-ic svg { width: 14px; height: 14px; } html[data-theme]:not(#cp) body .sc-sys-when { white-space: nowrap; } html[data-theme]:not(#cp) body .sc-sys-dot { margin-right: 6px; color: var(--cp-dim); } html[data-theme]:not(#cp) body .sc-sys-time { color: var(--cp-muted); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .sc-sys.is-new { animation: cp-msg-in var(--cp-dur-l) var(--cp-e) both; } html.cp-motion-off[data-theme]:not(#cp) body .sc-sys.is-new { animation: none !important; } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .sc-sys.is-new { animation: none !important; } } /* gesendete Meta-Vorlage: Kennung über dem Text der (ausgehenden) Blase */ html[data-theme]:not(#cp) body .sc-msg-tpl { display: flex; align-items: center; gap: 5px; margin: 0 0 3px; color: var(--cp-muted) !important; font: 600 11px/1.3 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-msg-tpl svg { flex: 0 0 auto; color: var(--cp-rust-hi); } /* Band „Fenster abgelaufen“: Text bricht um, „Vorlage senden“ bleibt als Hauptaktion rechts */ html[data-theme]:not(#cp) body .sc-window-closed { flex-wrap: wrap; } html[data-theme]:not(#cp) body .sc-window-closed .sc-window-text { flex: 1 1 220px; min-width: 0; } html[data-theme]:not(#cp) body .sc-window-closed .sc-window-actions { align-self: center; } html[data-theme]:not(#cp) body .sc-window-closed .sc-window-actions .ext-btn { display: inline-flex !important; align-items: center; gap: 6px; white-space: nowrap; } /* Vorlagen-Dialog: Suche, Liste, Vorschau als ausgehende Blase, Felder */ html[data-theme]:not(#cp) body .wa-mt-search { display: block; width: 100%; box-sizing: border-box; height: 34px; margin: 0 0 8px !important; padding: 0 10px !important; font: 400 13.5px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-mt-list { display: flex; flex-direction: column; gap: 4px; max-height: min(48vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 1px; } html[data-theme]:not(#cp) body .wa-mt-row { display: flex !important; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; box-sizing: border-box; margin: 0 !important; padding: 10px 12px !important; text-align: left; cursor: pointer; background: var(--cp-surface) !important; background-image: none !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; box-shadow: none !important; transform: none !important; font: inherit; } html[data-theme]:not(#cp) body .wa-mt-row:hover { background: var(--cp-hover) !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .wa-mt-row:focus-visible { outline: none !important; box-shadow: inset 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .wa-mt-row.is-off { cursor: default; opacity: .6; } html[data-theme]:not(#cp) body .wa-mt-row.is-off:hover { background: var(--cp-surface) !important; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .wa-mt-row-head, html[data-theme]:not(#cp) body .wa-mt-title { display: flex; align-items: center; gap: 8px; min-width: 0; } html[data-theme]:not(#cp) body .wa-mt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-strong) !important; font: 600 13px/1.35 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-mt-title { margin: 0 0 12px; } html[data-theme]:not(#cp) body .wa-mt-title .wa-mt-name { font-size: 14px !important; } html[data-theme]:not(#cp) body .wa-mt-row .sc-badge, html[data-theme]:not(#cp) body .wa-mt-title .sc-badge { flex: 0 0 auto; height: 18px; padding: 0 6px; color: var(--cp-muted) !important; font-size: 10.5px !important; } html[data-theme]:not(#cp) body .wa-mt-cat { margin-left: auto; flex: 0 0 auto; color: var(--cp-muted) !important; font: 500 11px/1 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-mt-snippet { color: var(--cp-muted) !important; font: 400 12.5px/1.45 var(--cp-font) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[data-theme]:not(#cp) body .wa-mt-reason { color: var(--sc-warn-tx, var(--cp-warning)) !important; font: 500 11.5px/1.4 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-mt-back, html[data-theme]:not(#cp) body .wa-mt-reload { display: inline-flex !important; align-items: center; gap: 5px; } html[data-theme]:not(#cp) body .wa-mt-back { margin: 0 0 10px; } html[data-theme]:not(#cp) body .wa-mt-back svg { width: 16px; height: 16px; } html[data-theme]:not(#cp) body .wa-mt-reload svg { width: 14px; height: 14px; } html[data-theme]:not(#cp) body .wa-mt-preview { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0 0 16px; padding: 14px; background: var(--cp-void) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; } html[data-theme="light"]:not(#cp) body .wa-mt-preview { background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body .wa-mt-pv-wrap { display: flex; flex-direction: column; gap: 4px; max-width: min(420px, 92%); min-width: 0; } html[data-theme]:not(#cp) body .wa-mt-pv { box-sizing: border-box; padding: 8px 12px; background: var(--cp-rust-soft) !important; border: 1px solid var(--cp-rust-line) !important; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; font: 400 13.5px/1.5 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-mt-pv-head, html[data-theme]:not(#cp) body .wa-mt-pv-body, html[data-theme]:not(#cp) body .wa-mt-pv-foot { white-space: pre-wrap; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .wa-mt-pv-head { margin: 0 0 4px; color: var(--cp-strong) !important; font-weight: 600; } html[data-theme]:not(#cp) body .wa-mt-pv-media { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 10px; background: var(--cp-surface-3) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-muted) !important; font-size: 12px; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .wa-mt-pv-media svg { flex: 0 0 auto; } html[data-theme]:not(#cp) body .wa-mt-pv-foot { margin-top: 6px; color: var(--cp-muted) !important; font-size: 12px; } html[data-theme]:not(#cp) body .wa-mt-pv-btns { display: flex; flex-direction: column; gap: 4px; } html[data-theme]:not(#cp) body .wa-mt-pv-btn { display: block; padding: 7px 10px; text-align: center; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; color: var(--sc-info-tx, var(--cp-info)) !important; font: 500 12.5px/1.3 var(--cp-font) !important; } html[data-theme]:not(#cp) body .wa-mt-var { padding: 0 2px; border-radius: var(--cp-r-sm); color: inherit !important; background: var(--cp-hover) !important; background: color-mix(in srgb, var(--cp-rust-hi) 18%, transparent) !important; } html[data-theme]:not(#cp) body .wa-mt-var.is-empty { background: transparent !important; color: var(--sc-warn-tx, var(--cp-warning)) !important; font-weight: 600; text-decoration: underline dotted; text-underline-offset: 2px; } html[data-theme]:not(#cp) body .wa-mt-fields .sc-field { margin-bottom: 10px; } html[data-theme]:not(#cp) body .wa-mt-hint { display: block; margin: 4px 0 0 !important; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .wa-mt .sc-status { margin-bottom: 10px; } /* Setup-Abschnitt „Freigegebene Vorlagen / Lesebestätigungen“ */ html[data-theme]:not(#cp) body .wa-x .sc-btn-row { margin: 0 0 4px; } html[data-theme]:not(#cp) body .wa-x .sc-btn-row .ext-btn { display: inline-flex !important; align-items: center; gap: 6px; } html[data-theme]:not(#cp) body .wa-x .sc-check { margin-bottom: 6px; } html[data-theme]:not(#cp) body .wa-x .sc-check input { accent-color: var(--cp-rust); } html[data-theme]:not(#cp) body .wa-x .sc-check input:disabled + span { color: var(--cp-muted) !important; } @media (pointer: coarse) { html[data-theme]:not(#cp) body .wa-mt-row { min-height: 52px; } html[data-theme]:not(#cp) body .wa-mt-search { height: 40px; } } /* v5.70.0 (P5): schmale Chatspalte (Handy) – Siegel-Symbol weg, sonst wird der Sende-Pfeil abgeschnitten; „Vorlage senden“ bleibt über Band, ⚡-Popover und Sende-Optionen erreichbar */ @container scchat (max-width: 340px) { html[data-theme]:not(#cp) body .sc-input-icon--seal { display: none !important; } } /* --------------------------------------------------------------------------- 27. Dashboard-Hero (per contentag-enhance.js eingefügt) --------------------------------------------------------------------------- */ .cp-hero { position: relative; margin: 4px 0 18px; padding: 26px 28px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); overflow: hidden; background: radial-gradient(700px 260px at 30% 140%, rgba(192,67,28,.20), transparent 70%), radial-gradient(520px 220px at 10% 130%, rgba(233,220,200,.08), transparent 70%), var(--cp-surface); isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; } .cp-hero.has-stats { grid-template-columns: minmax(300px, .95fr) minmax(0, 1.25fr); } @media (max-width: 1280px) { .cp-hero.has-stats { grid-template-columns: minmax(0, 1fr); } } html[data-theme="light"] .cp-hero { background: radial-gradient(700px 260px at 30% 140%, rgba(192,67,28,.10), transparent 70%), radial-gradient(520px 220px at 10% 130%, rgba(233,220,200,.7), transparent 70%), var(--cp-surface); } .cp-hero::before { /* feines Raster wie auf der Website */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--cp-line) 1px, transparent 1px), linear-gradient(90deg, var(--cp-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(80% 120% at 80% 100%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(80% 120% at 80% 100%, #000 10%, transparent 70%); opacity: .6; } .cp-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--cp-dim); } .cp-hero-meta .cp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 12px rgba(232,85,42,.8); animation: cp-pulse 2.6s var(--cp-ease-io) infinite; } .cp-hero-meta .cp-clock { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--cp-muted); letter-spacing: .12em; } .cp-hero-sep { width: 14px; height: 1px; background: var(--cp-line-2); } .cp-hero-title { margin: 14px 0 18px !important; font-family: var(--cp-font) !important; font-weight: 300 !important; font-size: clamp(26px, 2.6vw, 38px) !important; line-height: 1.08 !important; letter-spacing: -.02em !important; color: var(--cp-strong) !important; } .cp-hero-title em { font-style: normal; color: var(--cp-rust-hi); } .cp-hero-sub { margin: 0; color: var(--cp-muted); font-size: 14px; } .cp-hero-sub b { color: var(--cp-strong); font-weight: 600; } .cp-hero-actions { display: flex; flex-wrap: wrap; gap: 6px; } .cp-qa { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r-sm); background: color-mix(in srgb, var(--cp-surface-2) 70%, transparent); color: var(--cp-text) !important; text-decoration: none !important; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: border-color var(--cp-dur-m) var(--cp-ease), background var(--cp-dur-m) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e), color var(--cp-dur-s) var(--cp-ease); cursor: pointer; } .cp-qa svg { width: 14px; height: 14px; color: var(--cp-rust-hi); transition: transform var(--cp-dur-l) var(--cp-e); } .cp-qa:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong) !important; transform: translateY(-1px); } .cp-qa:hover svg { transform: rotate(90deg); } .cp-qa.is-primary { background: var(--cp-rust); border-color: var(--cp-rust); color: #fff !important; } .cp-qa.is-primary svg { color: #fff; } .cp-qa.is-primary:hover { background: var(--cp-rust-hi); box-shadow: 0 8px 22px -12px rgba(0,0,0,.55); } @keyframes cp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } } /* Kennzahlen-Kacheln */ html[data-theme]:not(#cp) body .dashboard-icon-widget { position: relative; overflow: hidden; min-height: 108px; } html[data-theme]:not(#cp) body .dashboard-icon-widget .widget-details h1 { font-size: 30px !important; font-weight: 300 !important; letter-spacing: -.03em !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .dashboard-icon-widget .widget-icon { width: 44px !important; height: 44px !important; } html[data-theme]:not(#cp) body.dashboard-page #page-content .card { position: relative; } /* --------------------------------------------------------------------------- 28. Motion: gestaffelter Seitenaufbau, Tabellenzeilen, Tabs, Buttons --------------------------------------------------------------------------- */ .cp-reveal { animation: cp-reveal var(--cp-dur-xl) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 45ms); } .cp-revealed { animation: none !important; } @keyframes cp-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* v5.51.1: „backwards“ statt „both“ – ein nach dem Ende gehaltenes transform macht jede Zeile zur eigenen Stapelebene, dann lagen Aktions-Menüs (⋯) hinter der Seitenzahl darunter */ html[data-theme]:not(#cp) body table.dataTable tbody tr { animation: cp-row var(--cp-dur-l) var(--cp-e) backwards; } html[data-theme]:not(#cp) body table tbody tr:has(.dropdown-menu.show), html[data-theme]:not(#cp) body .card:has(.dropdown-menu.show) { position: relative; z-index: 30; } html[data-theme]:not(#cp) body table.dataTable tbody tr:nth-child(2) { animation-delay: 25ms; } html[data-theme]:not(#cp) body table.dataTable tbody tr:nth-child(3) { animation-delay: 50ms; } html[data-theme]:not(#cp) body table.dataTable tbody tr:nth-child(4) { animation-delay: 75ms; } html[data-theme]:not(#cp) body table.dataTable tbody tr:nth-child(5) { animation-delay: 100ms; } html[data-theme]:not(#cp) body table.dataTable tbody tr:nth-child(6) { animation-delay: 125ms; } html[data-theme]:not(#cp) body table.dataTable tbody tr:nth-child(7) { animation-delay: 150ms; } html[data-theme]:not(#cp) body table.dataTable tbody tr:nth-child(8) { animation-delay: 175ms; } html[data-theme]:not(#cp) body table.dataTable tbody tr:nth-child(n+9) { animation-delay: 200ms; } @keyframes cp-row { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Tab-Unterstrich wächst aus der Mitte */ html[data-theme]:not(#cp) body .nav-tabs .nav-link { box-shadow: none !important; } html[data-theme]:not(#cp) body .nav-tabs .nav-link::after, html[data-theme]:not(#cp) body .nav-tabs > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--cp-rust-hi); transform: scaleX(0); transition: transform var(--cp-dur-l) var(--cp-e); } html[data-theme]:not(#cp) body .nav-tabs .nav-link.active::after, html[data-theme]:not(#cp) body .nav-tabs > li.active > a::after { transform: scaleX(1); } html[data-theme]:not(#cp) body .nav-tabs .nav-link:hover:not(.active)::after { transform: scaleX(.35); background: var(--cp-line-2); } /* Primär-Buttons: Lichtstreif beim Hover */ html[data-theme]:not(#cp) body .btn-primary { position: relative; overflow: hidden; } html[data-theme]:not(#cp) body .btn-primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); transition: left var(--cp-dur-xl) var(--cp-e); pointer-events: none; } html[data-theme]:not(#cp) body .btn-primary:hover::before { left: 120%; } /* Sidebar: Icon rückt beim Hover leicht nach */ html[data-theme]:not(#cp) body .sidebar .sidebar-menu li a svg { transition: transform var(--cp-dur-m) var(--cp-e), color var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu li a:hover svg { transform: translateX(2px); } html[data-theme]:not(#cp) body .sidebar .sidebar-menu li ul { animation: cp-sub var(--cp-dur-l) var(--cp-e) both; } @keyframes cp-sub { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Dropdown-/Toast-Einblendungen */ html[data-theme]:not(#cp) body .app-alert { animation: cp-pop var(--cp-dur-l) var(--cp-e) both; } /* --------------------------------------------------------------------------- 29. Hell/Dunkel-Schalter: Morph-Icon statt Kachel --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body #default-navbar .mui-theme-toggle, html[data-theme]:not(#cp) body #default-navbar .mui-theme-toggle:hover, html[data-theme]:not(#cp) body #default-navbar .mui-theme-toggle:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; width: 38px !important; height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body #default-navbar .mui-theme-toggle:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .mui-theme-toggle > svg.mui-moon, html[data-theme]:not(#cp) body .mui-theme-toggle > svg.mui-sun { display: none !important; } .cp-tt { width: 20px; height: 20px; overflow: visible; } .cp-tt .cp-tt-core { transform-origin: center; transition: transform var(--cp-dur-xl) var(--cp-e); } .cp-tt .cp-tt-mask-circle { transition: transform var(--cp-dur-xl) var(--cp-e); } .cp-tt .cp-tt-rays { transform-origin: 12px 12px; transition: transform var(--cp-dur-xl) var(--cp-e), opacity var(--cp-dur-l) var(--cp-ease); } /* Dunkel → Mond (Kern groß, Maske schneidet Sichel, Strahlen weg) */ html[data-theme="dark"] .cp-tt .cp-tt-core { transform: scale(1.45); } html[data-theme="dark"] .cp-tt .cp-tt-mask-circle { transform: translate(-7px, 3px); } html[data-theme="dark"] .cp-tt .cp-tt-rays { transform: rotate(-60deg) scale(.4); opacity: 0; } /* Hell → Sonne */ html[data-theme="light"] .cp-tt .cp-tt-core { transform: scale(1); } html[data-theme="light"] .cp-tt .cp-tt-mask-circle { transform: translate(0, 0); } html[data-theme="light"] .cp-tt .cp-tt-rays { transform: rotate(0) scale(1); opacity: 1; } .mui-theme-toggle:active .cp-tt { transform: scale(.88); transition: transform var(--cp-dur-xs) var(--cp-ease); } /* Kreis-Überblendung beim Wechsel (View Transitions API) */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-new(root) { animation: cp-vt-reveal .7s var(--cp-ease-io) both; } @keyframes cp-vt-reveal { from { clip-path: circle(0 at var(--cp-vt-x, 50%) var(--cp-vt-y, 0)); } to { clip-path: circle(var(--cp-vt-r, 150vmax) at var(--cp-vt-x, 50%) var(--cp-vt-y, 0)); } } /* --------------------------------------------------------------------------- 30. Status-Badges: Soft-Tönung (Farbwerte setzt contentag-enhance.js) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .badge.cp-soft { background: var(--cp-badge-bg) !important; color: var(--cp-badge-fg) !important; border: 1px solid var(--cp-badge-bd) !important; font-weight: 600 !important; letter-spacing: .03em; text-shadow: none !important; padding: .38em .7em !important; } html[data-theme]:not(#cp) body .badge.cp-soft::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; vertical-align: middle; position: relative; top: -1px; border-radius: 50%; background: var(--cp-badge-fg); } @media (prefers-reduced-motion: reduce) { .cp-reveal, html[data-theme]:not(#cp) body table.dataTable tbody tr, html[data-theme]:not(#cp) body table .progress .progress-bar, .cp-hero-meta .cp-dot, html[data-theme]:not(#cp) body .sc-msg { animation: none !important; } ::view-transition-new(root) { animation: none; } } .cp-tt .cp-tt-core { transform-box: fill-box; } html[data-theme]:not(#cp) body .badge.cp-soft.cp-num::before { display: none; } html[data-theme]:not(#cp) body .nav-tabs .nav-link.active, html[data-theme]:not(#cp) body .nav-tabs > li.active > a { box-shadow: none !important; } /* --------------------------------------------------------------------------- 31. Plugin-Buttons generisch (58 Varianten in den rst-Plugins) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body button[class*="rst-"][class*="btn-secondary"], html[data-theme]:not(#cp) body a[class*="rst-"][class*="btn-secondary"], html[data-theme]:not(#cp) body button[class*="rst-"][class*="btn-ghost"], html[data-theme]:not(#cp) body button[class*="rst-"][class*="back-btn"], html[data-theme]:not(#cp) body .rst-email-btn:not([class*="primary"]):not([class*="danger"]) { background: var(--cp-surface-2) !important; background-image: none !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body button[class*="rst-"][class*="btn-secondary"]:hover, html[data-theme]:not(#cp) body button[class*="rst-"][class*="btn-ghost"]:hover, html[data-theme]:not(#cp) body .rst-email-btn:not([class*="primary"]):not([class*="danger"]):hover { border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body button[class*="rst-"][class*="btn-primary"], html[data-theme]:not(#cp) body a[class*="rst-"][class*="btn-primary"] { background: var(--cp-rust) !important; background-image: none !important; border: 1px solid var(--cp-rust) !important; color: #fff !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body button[class*="rst-"][class*="btn-primary"]:hover { background: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body button[class*="rst-"][class*="btn-danger"] { background: transparent !important; background-image: none !important; border: 1px solid rgba(229,72,77,.45) !important; color: var(--cp-danger) !important; border-radius: var(--cp-r-sm) !important; } /* --------------------------------------------------------------------------- 32. Lesbarkeit: Sekundärtexte der Plugins (fest verdrahtetes Schiefergrau) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body [class*="rst-"][class*="-meta"]:not(#default-navbar *), html[data-theme]:not(#cp) body [class*="rst-"][class*="-muted"], html[data-theme]:not(#cp) body [class*="rst-"][class*="-hint"], html[data-theme]:not(#cp) body [class*="rst-"][class*="-empty"], html[data-theme]:not(#cp) body [class*="rst-"][class*="-empty"] p, html[data-theme]:not(#cp) body .rst-client-contacts-label, html[data-theme]:not(#cp) body .rst-client-contact-email, html[data-theme]:not(#cp) body .rst-email-from-to, html[data-theme]:not(#cp) body .rst-client-email-preview { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body button.rst-act-btn.secondary { color: var(--cp-text) !important; border-color: var(--cp-line-2) !important; background: var(--cp-surface-2) !important; } /* Hero-Buttons gegen die generische Inhalts-Link-Farbe absichern */ html[data-theme]:not(#cp) body #page-content .cp-hero a.cp-qa { color: var(--cp-text) !important; } html[data-theme]:not(#cp) body #page-content .cp-hero a.cp-qa:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #page-content .cp-hero a.cp-qa.is-primary, html[data-theme]:not(#cp) body #page-content .cp-hero a.cp-qa.is-primary:hover { color: #fff !important; } /* v5.76.7: die allgemeine Link-Regel (#page-content a:not(.btn):not(…) …) ist durch die vielen :not() spezifischer → Knopftext blieb Textfarbe (4,1 bzw. 3,2 : 1) */ html[data-theme]:not(#cp):not(#cq) body #page-content a.cp-qa.is-primary, html[data-theme]:not(#cp):not(#cq) body #page-content a.cp-qa.is-primary:hover { color: #fff !important; } html[data-theme="light"]:not(#cp) body .rst-ai-tb-label, html[data-theme="light"]:not(#cp) body #default-navbar .rst-ai-topbar-toggle { color: var(--cp-rust-hi) !important; } /* =========================================================================== v3 — Feedback-Runde 3 (2026-09-25): Dashboard, Chat, Suche, Menüleiste =========================================================================== */ /* --------------------------------------------------------------------------- 33. Hero: Kennzahl-Kacheln rechts (statt eigener Zeile) --------------------------------------------------------------------------- */ .cp-hero-main { min-width: 0; } .cp-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; } @media (min-width: 1600px) { .cp-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cp-hero-stats > a, .cp-hero-stats > .card { display: block; min-width: 0; text-decoration: none !important; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget { margin: 0 !important; min-height: 0 !important; height: 100% !important; background: color-mix(in srgb, var(--cp-surface-2) 78%, transparent) !important; backdrop-filter: blur(6px); box-shadow: none !important; transition: border-color var(--cp-dur-m) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e), background var(--cp-dur-m) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .cp-hero-stats a:hover .dashboard-icon-widget { border-color: var(--cp-rust-line) !important; transform: translateY(-2px); } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .card-body { display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: space-between; gap: 12px; padding: 14px 16px !important; height: 100%; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-icon { width: 32px !important; height: 32px !important; min-width: 32px; margin: 0 !important; float: none !important; display: inline-flex !important; align-items: center; justify-content: center; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-icon svg { width: 16px; height: 16px; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-details { text-align: left !important; float: none !important; width: 100%; margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-details h1 { font-size: 26px !important; line-height: 1 !important; margin: 0 0 6px !important; text-align: left !important; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-details span { display: block; font-size: 10px !important; letter-spacing: .16em !important; text-align: left !important; } html[data-theme]:not(#cp) body .cp-hero-stats .clock-in-out-card .widget-details .btn { font-size: 11px !important; padding: 6px 10px !important; } html[data-theme]:not(#cp) body .cp-hero-stats .clock-in-out-card .widget-details > div { font-size: 11px; color: var(--cp-muted) !important; margin-top: 6px !important; background: none !important; } .cp-qa kbd { margin-left: 6px; padding: 1px 5px; border: 1px solid var(--cp-line-2); border-radius: 3px; font: 600 9.5px/1.4 var(--cp-font); color: var(--cp-dim); background: transparent; letter-spacing: .04em; } .cp-qa-search { margin-left: 0; } @media (max-width: 767px) { .cp-qa-search kbd { display: none; } .cp-qa-search { margin-left: 0; } } /* Hilfszeilen/Reihen, deren Inhalt verschoben wurde */ html[data-theme]:not(#cp) body #page-content > .cp-moved { display: none !important; } /* --------------------------------------------------------------------------- 34. Dashboard-Raster (Masonry, per contentag-enhance.js) --------------------------------------------------------------------------- */ .cp-dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 4px; grid-auto-flow: row dense; column-gap: 16px; align-items: start; } .cp-dash-grid > .cp-dash-item { grid-column: span var(--span, 4); width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; float: none !important; min-width: 0; } .cp-dash-inner { display: flow-root; } html[data-theme]:not(#cp) body .cp-dash-inner > .card, html[data-theme]:not(#cp) body .cp-dash-inner > a > .card, html[data-theme]:not(#cp) body .cp-dash-inner > div > .card { margin-bottom: 16px !important; height: auto !important; } html[data-theme]:not(#cp) body .cp-dash-inner > :last-child, html[data-theme]:not(#cp) body .cp-dash-inner > :last-child > .card { margin-bottom: 0 !important; } .cp-dash-grid.is-stacked { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 16px; } .cp-dash-grid.is-stacked > .cp-dash-item { grid-column: 1 / -1; } /* Karten-Köpfe im Dashboard: Label-Stil der Website */ html[data-theme]:not(#cp) body.dashboard-page #page-content .card-header { padding: 14px 18px !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body.dashboard-page #page-content .card-header * { font-size: inherit !important; letter-spacing: inherit !important; } html[data-theme]:not(#cp) body.dashboard-page #page-content .card-header svg { width: 14px !important; height: 14px !important; } /* --------------------------------------------------------------------------- 35. Chat-Popup v2 (per contentag-chat.js) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper { display: flex !important; flex-direction: column; width: min(420px, calc(100vw - 32px)); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper.hide { display: none !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-topbar, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .rise-chat-header { display: flex !important; align-items: center; gap: 6px; padding: 12px 12px 12px 18px !important; min-height: 60px; border-bottom: 1px solid var(--cp-line) !important; cursor: move; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-topbar-title { flex: 1; margin: 0 !important; text-align: left !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .01em; color: var(--cp-strong) !important; } .cp-chat-sub { font-size: 11px; font-weight: 500; color: var(--cp-dim); letter-spacing: .04em; margin-top: 2px; min-height: 0; } .cp-chat-sub:empty { display: none; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-topbar-btn, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-chat-new { width: 34px; height: 34px; border-radius: var(--cp-r-sm) !important; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: 1px solid transparent !important; color: var(--cp-muted) !important; cursor: pointer; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease); float: none !important; position: static !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-topbar-btn:hover, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-chat-new:hover { color: var(--cp-strong) !important; background: var(--cp-hover) !important; border-color: var(--cp-line) !important; } .cp-chat-new svg { width: 17px; height: 17px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-chat-new { color: var(--cp-rust-hi) !important; } /* Tabs oben als Segment-Leiste */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .footer-buttons-section.cp-tabs-top { background: transparent !important; border: 0 !important; padding: 10px 14px 0 !important; position: static !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-tabs-top .chat-tab { display: flex !important; gap: 0; padding: 3px; margin: 0; background: var(--cp-surface-2); border: 1px solid var(--cp-line); border-radius: var(--cp-r); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-tabs-top .chat-tab li { flex: 1; list-style: none; margin: 0 !important; padding: 0 !important; width: auto !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-tabs-top .chat-button { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 32px; padding: 0 8px !important; margin: 0 !important; border: 0 !important; border-radius: 2px !important; background: transparent !important; color: var(--cp-muted) !important; font-size: 12px !important; font-weight: 500 !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-tabs-top .chat-button > div { display: inline-flex; margin: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-tabs-top .chat-button svg { width: 14px !important; height: 14px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-tabs-top .chat-button:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-tabs-top .chat-button.active { background: var(--cp-surface) !important; color: var(--cp-strong) !important; box-shadow: 0 1px 0 var(--cp-line-2), 0 0 0 1px var(--cp-line) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-tabs-top .chat-button.active svg { color: var(--cp-rust-hi) !important; } /* Suche */ .cp-chat-search { position: relative; display: flex; align-items: center; gap: 8px; margin: 10px 14px 6px; padding: 0 10px; height: 36px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); border-radius: var(--cp-r-sm); transition: border-color var(--cp-dur-s) var(--cp-ease), box-shadow var(--cp-dur-s) var(--cp-ease); } .cp-chat-search:focus-within { border-color: var(--cp-rust-hi); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-chat-search > svg { width: 15px; height: 15px; color: var(--cp-dim); flex: none; } html[data-theme]:not(#cp) body .cp-chat-search input { flex: 1; min-width: 0; height: 100%; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; color: var(--cp-text) !important; font-size: 13px !important; } .cp-chat-search input::-webkit-search-cancel-button { display: none; } .cp-chat-search-x { display: none; border: 0; background: transparent; color: var(--cp-dim); padding: 2px; cursor: pointer; } .cp-chat-search-x svg { width: 14px; height: 14px; } .cp-chat-search.has-value .cp-chat-search-x { display: inline-flex; } /* Körper & Liste */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .rise-chat-body { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto !important; overflow-x: hidden; display: flex; flex-direction: column; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper.cp-chat-list-view .rise-chat-body { padding: 4px 6px 10px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row { margin: 1px 4px; padding: 10px 10px !important; border: 0 !important; border-radius: var(--cp-r) !important; cursor: pointer; transition: background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row .avatar-xs { width: 38px !important; height: 38px !important; position: relative; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row .avatar-xs img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .online { position: absolute; right: 0; bottom: 1px; width: 10px !important; height: 10px !important; border-radius: 50%; background: var(--cp-success) !important; box-shadow: 0 0 0 2px var(--cp-surface), 0 0 8px rgba(63,185,132,.6) !important; border: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row .mb5 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row strong { font-size: 13.5px; font-weight: 600; color: var(--cp-strong) !important; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row .time { float: none !important; font-size: 11px; color: var(--cp-dim) !important; white-space: nowrap; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .js-message-row .w-100 { color: var(--cp-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row.unread { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row.unread .w-100 { color: var(--cp-text); font-weight: 500; } .cp-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 8px rgba(232,85,42,.8); flex: none; align-self: center; } .cp-online-tag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-success); background: rgba(63,185,132,.12); border: 1px solid rgba(63,185,132,.35); flex: none; } .cp-chat-noresult, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-no-messages { padding: 40px 20px; text-align: center; color: var(--cp-dim) !important; font-size: 12.5px; } /* Unterhaltung */ .cp-chat-person { display: inline-flex; flex-direction: column; line-height: 1.2; min-width: 0; } .cp-chat-person > span:first-child { font-size: 14px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-chat-status { font-size: 11px; color: var(--cp-dim); display: inline-flex; align-items: center; gap: 5px; } .cp-chat-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-dim); } .cp-chat-status.is-online { color: var(--cp-success); } .cp-chat-status.is-online::before { background: var(--cp-success); box-shadow: 0 0 6px rgba(63,185,132,.8); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-title { flex: 1; min-width: 0; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-title > div { display: flex; align-items: center; gap: 10px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-title .avatar-xs { width: 36px !important; height: 36px !important; margin: 0 !important; position: relative; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-title .avatar-xs img { width: 36px; height: 36px; border-radius: 50%; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #js-chat-messages-container { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; padding: 12px 14px 6px; background: radial-gradient(500px 240px at 50% 0%, rgba(233,220,200,.03), transparent 70%); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-message-title { display: table !important; margin: 4px auto 14px !important; padding: 4px 12px !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-dim) !important; background: var(--cp-surface-2); border: 1px solid var(--cp-line); border-radius: 3px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-row { margin: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-row .row { margin: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-row .col-md-12 { padding: 0 !important; display: flex; align-items: flex-end; gap: 8px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me .col-md-12 { justify-content: flex-end; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-msg { display: inline-block; max-width: 78%; width: auto !important; margin: 2px 0 !important; padding: 8px 12px !important; font-size: 13.5px; line-height: 1.45; word-break: break-word; border-radius: 3px !important; box-shadow: none !important; background-image: none !important; animation: cp-msg-in var(--cp-dur-m) var(--cp-e) both; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me .chat-msg { background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)) !important; color: #fff !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me .chat-msg a { color: #fff !important; text-decoration: underline; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other .chat-msg { background: var(--cp-surface-3) !important; color: var(--cp-text) !important; border: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me.first-message .chat-msg { border-bottom-right-radius: 3px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me.middle-message .chat-msg { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me.last-message .chat-msg { border-top-right-radius: 3px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other.first-message .chat-msg { border-bottom-left-radius: 3px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other.middle-message .chat-msg { border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other.last-message .chat-msg { border-top-left-radius: 3px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me.single-message, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me.last-message, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other.single-message, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other.last-message { margin-bottom: 8px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other .avatar-xs { width: 26px !important; height: 26px !important; margin: 0 !important; flex: none; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other .avatar-xs img { width: 26px; height: 26px; border-radius: 50%; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other.first-message .avatar-xs, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other.middle-message .avatar-xs { visibility: hidden; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #js-chat-reply-indicator { padding: 0 16px; font-size: 11.5px; color: var(--cp-dim); font-style: italic; } /* Eingabe */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .rise-chat-footer:not(.cp-tabs-top) { background: var(--cp-surface) !important; border-top: 1px solid var(--cp-line) !important; padding: 10px 12px 12px !important; position: static !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #chat-message-reply-form { display: grid; grid-template-columns: 1fr; gap: 6px; background: var(--cp-surface-2); border: 1px solid var(--cp-line-2); border-radius: 3px; padding: 6px 6px 6px 12px; transition: border-color var(--cp-dur-s) var(--cp-ease), box-shadow var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #chat-message-reply-form:focus-within { border-color: var(--cp-rust-hi); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #js-chat-message-textarea { width: 100%; min-height: 40px; max-height: 120px; resize: none; padding: 8px 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; color: var(--cp-text) !important; font-size: 13.5px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-button-section { display: flex !important; align-items: center; gap: 6px; padding: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-file-upload-icon { order: 1; margin: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-file-upload-icon .me-auto { display: flex; gap: 2px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-file-upload-icon .btn { width: 32px; height: 32px; padding: 0 !important; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; color: var(--cp-dim) !important; border-radius: 3px !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-file-upload-icon .btn:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } .cp-chat-hint { order: 2; flex: 1; font-size: 10.5px; color: var(--cp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-chat-hint kbd { padding: 0 4px; border: 1px solid var(--cp-line-2); border-radius: 3px; font: 600 9.5px/1.5 var(--cp-font); color: var(--cp-muted); background: transparent; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-send-button { order: 3; float: none !important; margin: 0 !important; width: 36px; height: 36px; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center; background: var(--cp-rust) !important; background-image: none !important; border: 0 !important; color: #fff !important; box-shadow: 0 6px 18px -8px rgba(232,85,42,.9) !important; transition: transform var(--cp-dur-s) var(--cp-e), background var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-send-button:hover { background: var(--cp-rust-hi) !important; transform: scale(1.06); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-send-button svg { width: 16px; height: 16px; color: #fff !important; margin-left: -1px; } /* Launcher: ungelesen → Zähler + Puls */ html[data-theme]:not(#cp) body #js-init-chat-icon.has-message #js-chat-min-icon { font-weight: 700; font-size: 14px; color: #fff !important; } html[data-theme]:not(#cp) body #js-init-chat-icon.has-message::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 0 rgba(232,85,42,.6); animation: cp-ring 1.8s var(--cp-e) infinite; } @keyframes cp-ring { 0% { box-shadow: 0 0 0 0 rgba(232,85,42,.55); } 100% { box-shadow: 0 0 0 16px rgba(232,85,42,0); } } /* --------------------------------------------------------------------------- 36. Globale Suche als Befehlspalette (per contentag-palette.js) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .rst-overlay.cp-palette { background: rgba(4,5,8,.62) !important; backdrop-filter: blur(8px) saturate(120%) !important; -webkit-backdrop-filter: blur(8px) saturate(120%) !important; align-items: flex-start !important; padding-top: 12vh !important; } html[data-theme="light"]:not(#cp) body .rst-overlay.cp-palette { background: rgba(10,12,17,.3) !important; } html[data-theme]:not(#cp) body .cp-palette .rst-modal { width: min(680px, calc(100vw - 32px)) !important; max-width: none !important; background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow-pop) !important; overflow: hidden; color: var(--cp-text) !important; font-family: var(--cp-font) !important; animation: cp-modal-in var(--cp-dur-l) var(--cp-e) both; } html[data-theme]:not(#cp) body .cp-palette .rst-input-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px !important; border-bottom: 1px solid var(--cp-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .cp-palette .rst-input-row > svg { width: 20px; height: 20px; color: var(--cp-rust-hi) !important; flex: none; } html[data-theme]:not(#cp) body .cp-palette .rst-input { flex: 1; height: 36px; padding: 0 !important; font-size: 18px !important; font-weight: 400 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; color: var(--cp-strong) !important; caret-color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-palette .rst-input::placeholder { color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .cp-palette kbd, html[data-theme]:not(#cp) body .cp-palette .rst-esc { padding: 2px 6px !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; background: var(--cp-surface-2) !important; color: var(--cp-muted) !important; box-shadow: none !important; font: 600 10.5px/1.4 var(--cp-font) !important; letter-spacing: .04em; } .cp-loading-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; opacity: 0; transition: opacity var(--cp-dur-s) var(--cp-ease); } .cp-loading-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--cp-rust-hi), transparent); animation: cp-scan 1s linear infinite; } .cp-palette.is-loading .cp-loading-bar { opacity: 1; } @keyframes cp-scan { from { left: -30%; } to { left: 100%; } } .cp-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--cp-line); } .cp-scope { padding: 5px 10px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-muted); font: 500 11.5px/1.2 var(--cp-font); cursor: pointer; transition: all var(--cp-dur-s) var(--cp-ease); } .cp-scope:hover { color: var(--cp-strong); border-color: var(--cp-dim); } .cp-scope.active { background: var(--cp-rust); border-color: var(--cp-rust); color: #fff; } .cp-scopes-hint { margin-left: auto; font-size: 10.5px; color: var(--cp-dim); } @media (max-width: 640px) { .cp-scopes-hint { display: none; } } html[data-theme]:not(#cp) body .cp-palette .rst-results { max-height: min(58vh, 520px) !important; overflow-y: auto; padding: 8px !important; background: transparent !important; } html[data-theme]:not(#cp) body .cp-palette .rst-group { margin: 0 0 6px !important; } html[data-theme]:not(#cp) body .cp-palette .rst-group-label { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--cp-dim) !important; background: transparent !important; } html[data-theme]:not(#cp) body .cp-palette .rst-count { background: var(--cp-surface-3) !important; color: var(--cp-muted) !important; border-radius: 999px !important; padding: 0 6px !important; font-size: 10px !important; letter-spacing: 0; } html[data-theme]:not(#cp) body .cp-palette .rst-result { position: relative; display: flex !important; align-items: center; gap: 12px; padding: 6px 10px !important; min-height: 0 !important; margin: 1px 0; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; text-decoration: none !important; background: transparent !important; border: 0 !important; transition: background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-palette .rst-result:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .cp-palette .rst-result.selected { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .cp-palette .rst-result.selected::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--cp-rust-hi); border-radius: 2px; } html[data-theme]:not(#cp) body .cp-palette .rst-res-icon { width: 28px !important; height: 28px !important; min-width: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r-sm) !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .cp-palette .rst-res-icon svg { width: 15px; height: 15px; } html[data-theme]:not(#cp) body .cp-palette .rst-result.selected .rst-res-icon { border-color: var(--cp-rust-line) !important; color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .cp-palette .rst-res-body { flex: 1; min-width: 0; } html[data-theme]:not(#cp) body .cp-palette .rst-res-title { font-size: 13.5px !important; font-weight: 500 !important; color: var(--cp-strong) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-palette .rst-res-meta { font-size: 11.5px !important; color: var(--cp-dim) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-palette mark { background: transparent !important; color: var(--cp-rust-hi) !important; padding: 0; font-weight: 600; } html[data-theme]:not(#cp) body .cp-palette .rst-res-arrow { width: 14px; height: 14px; color: var(--cp-dim) !important; opacity: 0; transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-s) var(--cp-e); } html[data-theme]:not(#cp) body .cp-palette .rst-result.selected .rst-res-arrow { opacity: 1; transform: translateX(2px); color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .cp-palette .rst-empty { padding: 44px 20px !important; color: var(--cp-dim) !important; font-size: 13px; text-align: center; } html[data-theme]:not(#cp) body .cp-palette .rst-empty-big { font-size: 0 !important; height: 0; margin: 0 !important; } html[data-theme]:not(#cp) body .cp-palette .rst-empty.cp-dim-empty { padding: 16px 20px !important; } html[data-theme]:not(#cp) body .cp-palette .rst-footer { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px !important; border-top: 1px solid var(--cp-line) !important; background: var(--cp-deep) !important; font-size: 11px !important; color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .cp-palette .rst-footer strong { color: var(--cp-muted) !important; font-weight: 500; } html[data-theme]:not(#cp) body .cp-palette .rst-keys { display: flex; gap: 14px; } @media (max-width: 640px) { html[data-theme]:not(#cp) body .cp-palette .rst-keys { display: none; } } /* --------------------------------------------------------------------------- 37. Eingeklappte Menüleiste --------------------------------------------------------------------------- */ @media (min-width: 992px) { html[data-theme]:not(#cp) body.sidebar-toggled .main-scrollable-page { margin-left: 0 !important; } html[data-theme]:not(#cp) body .page-container { transition: margin-left var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar, html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-scroll { width: 70px !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu { padding: 8px 0 20px !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li, html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li:hover { width: auto !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li > a, html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li > a:hover { width: 46px !important; height: 40px; margin: 2px auto !important; padding: 0 !important; justify-content: center !important; gap: 0 !important; border: 1px solid transparent !important; border-radius: var(--cp-r) !important; box-shadow: none !important; backdrop-filter: none !important; transform: none !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li > a:hover { background: var(--cp-hover) !important; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li > a > span:not(.badge), html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li > a:hover > span:not(.badge) { opacity: 0 !important; width: 0 !important; max-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li > a svg { margin: 0 !important; width: 18px; height: 18px; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li.active > a, html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li.active > a:hover { background: var(--cp-rust-soft) !important; background-image: none !important; border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu > li.active:not(.expand) > a::after { left: -12px; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu > li.expand > a::before { display: none !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li ul { display: none !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu li > a .badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px !important; font-size: 9.5px !important; line-height: 16px !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu .ca-nav-group { padding: 8px 0 !important; height: auto; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu .ca-nav-group::after { content: "" !important; display: block !important; height: 1px !important; margin: 0 20px !important; background: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-menu .ca-nav-group:first-child { display: none !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar-brand.brand-logo-mini { justify-content: center; align-items: center; } } /* Schwebendes Label / Untermenü (per contentag-enhance.js) */ #cp-side-pop { position: fixed; z-index: 1080; min-width: 180px; max-width: 280px; background: var(--cp-surface-2); border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); box-shadow: var(--cp-shadow-pop); padding: 6px; color: var(--cp-text); font-family: var(--cp-font); opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-s) var(--cp-e); } #cp-side-pop.is-open { opacity: 1; transform: none; pointer-events: auto; } #cp-side-pop.is-label { min-width: 0; padding: 7px 12px; } #cp-side-pop .cp-sp-title { font-size: 12.5px; font-weight: 600; color: var(--cp-strong); white-space: nowrap; } #cp-side-pop:not(.is-label) .cp-sp-title { padding: 6px 10px 8px; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp) body #cp-side-pop a { display: block; padding: 8px 10px; border-radius: var(--cp-r-sm); color: var(--cp-text) !important; text-decoration: none; font-size: 13px; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #cp-side-pop a:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #cp-side-pop a.active { color: var(--cp-rust-hi) !important; } #cp-side-pop a:hover { background: var(--cp-hover); color: var(--cp-strong); } #cp-side-pop a.active { color: var(--cp-rust-hi); background: var(--cp-rust-soft); } #cp-side-pop::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; } /* --------------------------------------------------------------------------- 38. Changelog- & Support-Fenster --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .rst-support-modal { background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow-pop) !important; color: var(--cp-text) !important; font-family: var(--cp-font) !important; animation: cp-modal-in var(--cp-dur-l) var(--cp-e) both; } html[data-theme]:not(#cp) body .rst-support-head { border-bottom: 1px solid var(--cp-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .rst-support-head-icon { background: var(--cp-rust-soft) !important; border: 1px solid var(--cp-rust-line) !important; color: var(--cp-rust-hi) !important; border-radius: var(--cp-r) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .rst-support-title { color: var(--cp-strong) !important; font-weight: 500 !important; letter-spacing: -.01em; } html[data-theme]:not(#cp) body .rst-support-intro { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .rst-support-close { background: transparent !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body .rst-support-close:hover { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .rst-cl-release { background: transparent !important; border: 0 !important; border-left: 1px solid var(--cp-line-2) !important; border-radius: 0 !important; box-shadow: none !important; padding: 2px 0 18px 22px !important; margin: 0 0 6px 8px !important; position: relative; } html[data-theme]:not(#cp) body .rst-cl-release::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--cp-surface); border: 1px solid var(--cp-dim); } html[data-theme]:not(#cp) body .rst-cl-release.is-current { background: transparent !important; } html[data-theme]:not(#cp) body .rst-cl-release.is-current::before { background: var(--cp-rust-hi); border-color: var(--cp-rust-hi); box-shadow: 0 0 10px rgba(232,85,42,.8); } html[data-theme]:not(#cp) body .rst-cl-version-num { font-family: var(--cp-font) !important; font-weight: 600 !important; color: var(--cp-strong) !important; letter-spacing: .04em; } html[data-theme]:not(#cp) body .rst-cl-date { color: var(--cp-dim) !important; font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase; } html[data-theme]:not(#cp) body .rst-cl-current { background: var(--cp-rust) !important; background-image: none !important; color: #fff !important; border-radius: 3px !important; font-size: 9.5px !important; letter-spacing: .14em !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .rst-cl-entry-text { color: var(--cp-text) !important; line-height: 1.6 !important; font-size: 13.5px !important; white-space: pre-line; } html[data-theme]:not(#cp) body .rst-cl-badge { background: transparent !important; border-radius: 999px !important; font-size: 9.5px !important; letter-spacing: .14em !important; font-weight: 600 !important; border: 1px solid currentColor !important; padding: 3px 9px !important; min-width: 0 !important; } html[data-theme]:not(#cp) body .rst-cl-badge-feature { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .rst-cl-badge-improvement { color: var(--cp-info) !important; } html[data-theme]:not(#cp) body .rst-cl-badge-fix { color: var(--cp-success) !important; } html[data-theme]:not(#cp) body .rst-cl-footer { border-top: 1px solid var(--cp-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .rst-support-btn-ghost { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-r-sm) !important; box-shadow: none !important; } /* Dashboard: feste Scrollhöhen → Inhaltshöhe (max. 420 px), damit keine Leerflächen entstehen */ html[data-theme]:not(#cp) body .cp-dash-grid #todo-list-widget-table, html[data-theme]:not(#cp) body .cp-dash-grid #upcoming-event-container, html[data-theme]:not(#cp) body .cp-dash-grid #open-projects-container, html[data-theme]:not(#cp) body .cp-dash-grid .card-body[style*="height"]:not(:has(canvas)), html[data-theme]:not(#cp) body .cp-dash-grid .table-responsive[style*="height"], html[data-theme]:not(#cp) body .cp-dash-grid [id*="timeline"][style*="height"] { height: auto !important; max-height: 420px; overflow-y: auto !important; } html[data-theme]:not(#cp) body .cp-dash-grid #upcoming-event-container > div[style*="min-height"] { min-height: 0 !important; } html[data-theme]:not(#cp) body .cp-dash-grid .card.h379, html[data-theme]:not(#cp) body .cp-dash-grid .card.h377, html[data-theme]:not(#cp) body .cp-dash-grid .card[class*=" h3"] { height: auto !important; } html[data-theme]:not(#cp) body .cp-dash-grid #sticky-note { height: 220px !important; resize: vertical; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .tab-pane > div, html[data-theme]:not(#cp) body #js-rise-chat-wrapper #js-chat-team-members-list { border: 0 !important; background: transparent !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row .avatar-xs img { box-shadow: 0 0 0 1px var(--cp-line-2); } /* Chat: alte Verläufe/Trennlinien aus modern-ui/chat-modern neutralisieren */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-row, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-row:hover, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-message-title { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-message-title { border: 1px solid var(--cp-line) !important; background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-msg { border-bottom: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other .chat-msg { border: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-send-button svg, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-send-button * { background: none !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; stroke: #fff !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .js-message-row .w-100 { flex: 1 1 auto; min-width: 0; width: auto !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row .mb5 { overflow: visible; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row .time { flex: none; } /* =========================================================================== v4 — Runde 4 (2026-09-25): Direkt-Chat, Widget-Werkzeuge, Motion-Grafik =========================================================================== */ /* --------------------------------------------------------------------------- 39. Chat: Betreff ausblenden, Direkt-Chat, Personen-Leiste --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-message-title { display: none !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper { position: fixed; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--cp-surface) !important; border-radius: inherit; overflow: hidden; animation: cp-slide-in var(--cp-dur-m) var(--cp-e) both; } @keyframes cp-slide-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-head { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 12px 14px 12px 10px; border-bottom: 1px solid var(--cp-line) !important; background: var(--cp-deep) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-head .avatar { position: relative; width: 36px; height: 36px; flex: none; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-head .avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-empty { display: none; text-align: center; max-width: 280px; animation: cp-reveal var(--cp-dur-xl) var(--cp-e) both; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct.is-empty .cp-direct-empty { display: block; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-avatar { display: inline-block; position: relative; margin-bottom: 12px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--cp-rust-line), 0 0 40px -6px rgba(232,85,42,.55); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-avatar::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--cp-rust-line); animation: cp-ripple 2.4s var(--cp-e) infinite; } @keyframes cp-ripple { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-empty strong { display: block; font-size: 15px; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-empty p { margin: 6px 0 16px; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-starters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-starters button { padding: 6px 11px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-text); font: 500 12px/1.2 var(--cp-font); cursor: pointer; transition: all var(--cp-dur-s) var(--cp-e); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-starters button:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); transform: translateY(-1px); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-loading { display: none; gap: 6px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct.is-loading .cp-direct-loading { display: inline-flex; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-rust-hi); animation: cp-bounce 1s var(--cp-ease-io) infinite; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-loading span:nth-child(2) { animation-delay: .15s; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-loading span:nth-child(3) { animation-delay: .3s; } @keyframes cp-bounce { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-6px); opacity: 1; } } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-error { position: absolute; left: 16px; right: 16px; bottom: 10px; text-align: center; font-size: 12px; color: var(--cp-danger); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-form { display: flex; align-items: flex-end; gap: 8px; margin: 10px 12px 12px; padding: 6px 6px 6px 14px; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; transition: border-color var(--cp-dur-s) var(--cp-ease), box-shadow var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct.is-loading .cp-direct-form { opacity: .5; pointer-events: none; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-form:focus-within { border-color: var(--cp-rust-hi); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-form textarea { flex: 1; min-height: 34px; max-height: 120px; resize: none; padding: 8px 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; color: var(--cp-text) !important; font-size: 13.5px !important; line-height: 1.4; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-send { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-rust) !important; color: #fff !important; box-shadow: 0 6px 18px -8px rgba(232,85,42,.9) !important; transition: transform var(--cp-dur-s) var(--cp-e), background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-send:hover { background: var(--cp-rust-hi) !important; transform: scale(1.06) rotate(-8deg); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-send svg { width: 16px; height: 16px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct.is-sending .cp-direct-send { animation: cp-send var(--cp-dur-xl) var(--cp-e); } @keyframes cp-send { 50% { transform: translate(6px, -6px) scale(.9); opacity: .6; } } /* Personen-Leiste */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-people { display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px 12px; margin: 0 4px 6px; border-bottom: 1px solid var(--cp-line); scrollbar-width: none; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-people::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-people:empty { min-height: 78px; background: linear-gradient(90deg, transparent, var(--cp-hover), transparent) 0 0/200% 100%; animation: cp-shimmer 1.2s linear infinite; } @keyframes cp-shimmer { to { background-position: -200% 0; } } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person { flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: transparent; border-radius: var(--cp-r); cursor: pointer; animation: cp-reveal var(--cp-dur-l) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 40ms); transition: background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person:hover { background: var(--cp-hover); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person-av { position: relative; width: 44px; height: 44px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person-av img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--cp-line-2); transition: transform var(--cp-dur-m) var(--cp-e), box-shadow var(--cp-dur-m) var(--cp-ease); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person:hover .cp-person-av img { transform: scale(1.06); box-shadow: 0 0 0 2px var(--cp-rust-hi); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person .online { position: absolute; right: 1px; bottom: 1px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person-name { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.2 var(--cp-font); color: var(--cp-muted); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person:hover .cp-person-name { color: var(--cp-strong); } /* --------------------------------------------------------------------------- 40. Dashboard: Widget-Leiste, Werkzeuge, Anpassen-Modus --------------------------------------------------------------------------- */ .cp-dash-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; padding: 0 2px; } .cp-dash-bar-label { display: inline-flex; align-items: center; gap: 9px; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-dim); } .cp-dash-bar-label em { font-style: normal; color: var(--cp-muted); letter-spacing: .06em; } .cp-dash-bar .cp-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 8px rgba(232,85,42,.7); } .cp-dash-bar-hint, .cp-dash-reset, .cp-dash-chips { display: none; } .cp-dash-bar.is-editing .cp-dash-bar-hint { display: inline; font-size: 11.5px; color: var(--cp-muted); animation: cp-reveal var(--cp-dur-l) var(--cp-e) both; } .cp-dash-bar.is-editing .cp-dash-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; } .cp-dash-bar.is-editing .cp-dash-reset { display: inline-flex; } .cp-dash-edit, .cp-dash-reset, .cp-dash-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--cp-r-sm); border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-muted); font: 600 10.5px/1.2 var(--cp-font); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: all var(--cp-dur-s) var(--cp-e); } .cp-dash-edit { margin-left: auto; } .cp-dash-edit svg { width: 14px; height: 14px; } .cp-dash-edit:hover, .cp-dash-reset:hover { color: var(--cp-strong); border-color: var(--cp-rust-line); } .cp-dash-bar.is-editing .cp-dash-edit { background: var(--cp-rust); border-color: var(--cp-rust); color: #fff; } .cp-dash-chip { letter-spacing: .02em; text-transform: none; font-weight: 500; border-style: dashed; color: var(--cp-text); } .cp-dash-chip:hover { border-color: var(--cp-rust-hi); color: var(--cp-rust-hi); } /* Werkzeuge im Kartenkopf */ html[data-theme]:not(#cp) body .card-header.cp-has-tools { display: flex !important; align-items: center; gap: 10px; } .cp-card-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; opacity: .0; transition: opacity var(--cp-dur-m) var(--cp-ease); } .cp-dash-item:hover .cp-card-tools, .cp-dash-grid.is-editing .cp-card-tools, .cp-collapsed .cp-card-tools { opacity: 1; } .cp-card-tools button, .cp-card-tools a { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px; border-radius: var(--cp-r-sm); border: 1px solid transparent; background: transparent; color: var(--cp-dim) !important; cursor: pointer; font: 600 10px/1 var(--cp-font) !important; letter-spacing: .12em !important; text-transform: uppercase; text-decoration: none !important; transition: color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease); } .cp-card-tools button:hover, .cp-card-tools a:hover { color: var(--cp-strong) !important; background: var(--cp-hover); border-color: var(--cp-line); } .cp-card-tools svg { width: 13px !important; height: 13px !important; color: inherit !important; } .cp-card-link svg { transition: transform var(--cp-dur-m) var(--cp-e); } .cp-card-link:hover svg { transform: translate(2px, -2px); } .cp-card-collapse svg { transition: transform var(--cp-dur-l) var(--cp-e); } .cp-collapsed .cp-card-collapse svg { transform: rotate(-90deg); } .cp-card-grip, .cp-card-hide { display: none !important; } .cp-dash-grid.is-editing .cp-card-grip, .cp-dash-grid.is-editing .cp-card-hide { display: inline-flex !important; } .cp-card-grip { cursor: grab !important; } /* Eingeklappt: nur Kopf zeigen */ .cp-dash-item.cp-collapsed .cp-dash-inner > .card > :not(.card-header), .cp-dash-item.cp-collapsed .cp-dash-inner > a > .card > :not(.card-header), .cp-dash-item.cp-collapsed .cp-dash-inner > :not(:first-child) { display: none !important; } .cp-dash-item.cp-collapsed .card-header { border-bottom: 0 !important; } /* Anpassen-Modus */ .cp-dash-grid.is-editing > .cp-dash-item > .cp-dash-inner { outline: 1px dashed var(--cp-line-2); outline-offset: 3px; border-radius: var(--cp-r); animation: cp-wiggle 2.8s var(--cp-ease-io) infinite; } .cp-dash-grid.is-editing > .cp-dash-item:nth-child(2n) > .cp-dash-inner { animation-delay: -1.2s; } @keyframes cp-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-.25deg); } 75% { transform: rotate(.25deg); } } .cp-dash-grid.is-editing .card-header { cursor: grab; } .cp-drag-ghost > .cp-dash-inner { opacity: .35; outline: 1px dashed var(--cp-rust-hi) !important; } .cp-drag-chosen > .cp-dash-inner { box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); } .cp-dash-item.cp-hidden { display: none !important; } .cp-dash-item.cp-hiding { animation: cp-hide var(--cp-dur-m) var(--cp-e) forwards; } @keyframes cp-hide { to { opacity: 0; transform: scale(.96); } } /* Scroll-Reveal */ .cp-pre { opacity: 0; transform: translateY(18px); } .cp-inview { animation: cp-reveal .7s var(--cp-e) both; } /* --------------------------------------------------------------------------- 41. v5.75.4 Hero-Hintergrund wie die „Sprechen wir“-Sektion der Website (Canvas, window.cpHexField in contentag-enhance.js): Wabenraster aus einzelnen Sechsecken, gelegentliche Ringwellen von der Mitte nach außen. Hier die Hintergründe wie .finale__bg/.finale__flor, auf den Hero zugeschnitten: Rust-Schein unter der Pulsmitte (--cp-hx-x/-y setzt das Skript), Verlauf oben/ unten und eine Vignette hinter Begrüßung, Datumszeile/Uhr und Schaltflächen (Lesbarkeit). Die umlaufende Lichtkante (.cp-beam) bleibt. Bewegung, Pausen und Standbild steuert das Skript. --------------------------------------------------------------------------- */ .cp-hero-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .cp-hx { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1s var(--cp-e, ease); } .cp-hx.is-in { opacity: 1; } /* sanft einblenden (Vorbild: .finale__wabe) */ .cp-hx canvas { position: absolute; left: 0; top: 0; display: block; } .cp-hx-flor { /* Vorbild .finale__flor: Raster zu Ober- und Unterkante hin ausblenden */ position: absolute; inset: 0; /* v5.75.4: in px (max(28 px, 1,3·Wabenradius), setzt das Skript) statt in % – */ background: linear-gradient(180deg, var(--cp-surface), transparent var(--cp-hx-fl, 28px), /* im flachen Hero sonst nur 16 px */ transparent calc(100% - var(--cp-hx-fl, 28px)), var(--cp-surface)); } html.cp-motion-off .cp-hx { transition: none; } @media (prefers-reduced-motion: reduce) { .cp-hx { transition: none; } } /* Waben ersetzen das quadratische 64-px-Raster */ .cp-hero.cp-hx-on::before { display: none; } /* Vorbild .finale__bg: Rust-Schein unter der Pulsmitte (dunkel .21 statt .17: Ruhe-Raster wärmer, näher am Vorbild) */ html[data-theme]:not(#cp) body .cp-hero.cp-hx-on { background: radial-gradient(58% 64% at var(--cp-hx-x, 50%) var(--cp-hx-y, 56%), rgba(192,67,28,.21), transparent 72%), var(--cp-surface); } html[data-theme="light"]:not(#cp) body .cp-hero.cp-hx-on { background: radial-gradient(58% 64% at var(--cp-hx-x, 50%) var(--cp-hx-y, 56%), rgba(232,85,42,.07), transparent 72%), var(--cp-surface); } /* Vignette hinter dem Textblock (dunkel; im Hell-Thema hell): weicher Fleck in Flächenfarbe, liegt über den Waben und unter dem Text (z-index −1 im Stapelkontext des Heros, nach .cp-hero-fx). v5.75.4 (Prüfbefunde): 42 % statt 58 % – das Skript dimmt die Waben am Text schon selbst; so bleibt der Ring hinter dem Text als zarter Bogen sichtbar */ html[data-theme]:not(#cp) body .cp-hero.cp-hx-on .cp-hero-main { position: relative; } html[data-theme]:not(#cp) body .cp-hero.cp-hx-on .cp-hero-main::before { content: ""; position: absolute; inset: -10px -18px; z-index: -1; pointer-events: none; border-radius: 3px; background: color-mix(in srgb, var(--cp-surface) 42%, transparent); filter: blur(16px); } @keyframes cp-spin { to { transform: rotate(360deg); } } /* weiter genutzt von Spinnern/Symbolen */ @media (prefers-reduced-motion: reduce) { .cp-direct-avatar::after, .cp-dash-grid.is-editing > .cp-dash-item > .cp-dash-inner, .cp-person { animation: none !important; } .cp-pre { opacity: 1; transform: none; } } @media (hover: none) { .cp-card-tools { opacity: 1; } } .cp-dash-bar:not(.is-editing) .cp-dash-reset, .cp-dash-bar:not(.is-editing) .cp-dash-chips, .cp-dash-bar:not(.is-editing) .cp-dash-bar-hint { display: none !important; } /* Einklappen auch für verschachtelte Widgets (Karte in Wrapper-DIV) */ .cp-dash-item.cp-collapsed .card:has(.cp-card-tools) > :not(.card-header) { display: none !important; } .cp-dash-item.cp-collapsed .card:not(:has(.cp-card-tools)) { display: none !important; } .cp-dash-item.cp-collapsed .card:has(.cp-card-tools) { margin-bottom: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row .time { width: auto !important; max-width: none !important; min-width: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .rise-chat-body .tab-content, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .rise-chat-body .tab-pane { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-message-textarea { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #chat-message-reply-form #js-chat-message-textarea { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* =========================================================================== v5 — Runde 5 (2026-09-25): Chat-Vorschau & Zeiten, Content-Widget, Motion =========================================================================== */ /* --------------------------------------------------------------------------- 42. Chat: Vorschau der letzten Nachricht, Datums-Trenner, Uhrzeiten --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-muted); font-size: 12.5px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-preview-me { color: var(--cp-dim); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-row.unread .cp-preview { color: var(--cp-strong); font-weight: 500; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-day-sep { display: flex; align-items: center; gap: 10px; margin: 14px 4px 10px; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-dim); animation: cp-reveal var(--cp-dur-l) var(--cp-e) both; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-day-sep::before, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-day-sep::after { content: ""; flex: 1; height: 1px; background: var(--cp-line); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-msg-time { align-self: flex-end; font-size: 10px; color: var(--cp-dim); white-space: nowrap; margin: 0 2px 4px; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me .col-md-12 { flex-wrap: wrap; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me .cp-msg-time { order: -1; margin-right: 6px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-row .col-md-12 { flex-wrap: nowrap; } /* --------------------------------------------------------------------------- 43. Dashboard-Widget „Content & Freigaben" --------------------------------------------------------------------------- */ .cp-cw-body { padding: 16px 18px 18px !important; } .cp-cw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } @media (max-width: 767px) { .cp-cw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html[data-theme]:not(#cp) body a.cp-cw-stat, .cp-cw-stat { display: flex; flex-direction: column; gap: 6px; padding: 14px; min-height: 84px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); border-radius: var(--cp-r); text-decoration: none !important; color: var(--cp-text) !important; transition: border-color var(--cp-dur-m) var(--cp-ease), transform var(--cp-dur-l) var(--cp-e), background var(--cp-dur-m) var(--cp-ease); animation: cp-reveal var(--cp-dur-xl) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 60ms); will-change: transform; } html[data-theme]:not(#cp) body a.cp-cw-stat:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-cw-num { font-size: 28px; font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-cw-lbl { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-dim); } .cp-cw-sub { margin: 18px 0 8px; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-dim); } .cp-cw-list { display: flex; flex-direction: column; gap: 2px; } html[data-theme]:not(#cp) body a.cp-cw-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 8px; border-radius: var(--cp-r); text-decoration: none !important; color: var(--cp-text) !important; transition: background var(--cp-dur-s) var(--cp-ease); animation: cp-reveal var(--cp-dur-l) var(--cp-e) both; animation-delay: calc(120ms + var(--i, 0) * 45ms); } html[data-theme]:not(#cp) body a.cp-cw-row:hover { background: var(--cp-hover); } .cp-cw-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); line-height: 1; } .cp-cw-date b { font-size: 16px; font-weight: 600; color: var(--cp-strong); } .cp-cw-date small { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-rust-hi); margin-top: 3px; } .cp-cw-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cp-cw-title { font-size: 13.5px; font-weight: 500; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-cw-meta { font-size: 11.5px; color: var(--cp-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-cw-status { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; padding: 3px 9px; border-radius: 3px; white-space: nowrap; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); } .cp-cw-empty { padding: 18px 4px 4px; font-size: 13px; color: var(--cp-muted); } .cp-cw-empty a { color: var(--cp-rust-hi) !important; } .cp-skel { position: relative; overflow: hidden; background: var(--cp-surface-2); border-radius: var(--cp-r); } .cp-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--cp-hover), transparent); transform: translateX(-100%); animation: cp-skel 1.2s var(--cp-ease-io) infinite; } @keyframes cp-skel { to { transform: translateX(100%); } } .cp-cw-stat.cp-skel { min-height: 84px; border: 1px solid var(--cp-line); } .cp-skel-row { height: 52px; margin-top: 8px; } /* Überfällig-Hinweis & Breiten-Button */ .cp-overdue { margin-left: 10px; padding: 2px 9px; border-radius: 3px; font-size: 10px !important; font-weight: 600; letter-spacing: .06em !important; text-transform: none; color: var(--cp-danger); border: 1px solid rgba(229,72,77,.45); background: rgba(229,72,77,.1); animation: cp-pulse-soft 2.4s var(--cp-ease-io) infinite; } @keyframes cp-pulse-soft { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,.35); } 50% { box-shadow: 0 0 0 5px rgba(229,72,77,0); } } .cp-card-size { display: none !important; min-width: 26px; justify-content: center; } .cp-dash-grid.is-editing .cp-card-size { display: inline-flex !important; border-color: var(--cp-line-2) !important; color: var(--cp-text) !important; } /* --------------------------------------------------------------------------- 44. Motion: Sidebar-Indikator, Neigung, Klick-Welle, Ambient, Loader --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .sidebar .sidebar-menu.cp-has-ind { position: relative; } .cp-side-ind { position: absolute; left: 0; top: 0; width: 2px; height: 20px; border-radius: 0 2px 2px 0; pointer-events: none; background: var(--cp-rust-hi); box-shadow: 0 0 14px rgba(232,85,42,.8); transition: transform var(--cp-dur-xl) var(--cp-e), height var(--cp-dur-l) var(--cp-e), opacity var(--cp-dur-m) var(--cp-ease); z-index: 2; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu.cp-has-ind > li.active:not(.expand) > a::after, html[data-theme]:not(#cp) body .sidebar .sidebar-menu.cp-has-ind li li.active > a::after { display: none !important; } html[data-theme]:not(#cp) body.sidebar-toggled .cp-side-ind { left: 0; } .cp-tilting { transition: transform var(--cp-dur-xs) var(--cp-e) !important; transform-style: preserve-3d; } .cp-hero-stats .dashboard-icon-widget, .cp-cw-stat { transition: transform var(--cp-dur-xl) var(--cp-e), border-color var(--cp-dur-m) var(--cp-ease), background var(--cp-dur-m) var(--cp-ease) !important; } .cp-ripple-host { overflow: hidden !important; } .cp-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%); transform: scale(0); animation: cp-ripple-a .65s var(--cp-e) forwards; } html[data-theme="light"] .cp-ripple { background: radial-gradient(circle, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 60%); } @keyframes cp-ripple-a { to { transform: scale(1); opacity: 0; } } #cp-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } #cp-ambient span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; } #cp-ambient span:nth-child(1) { width: 46vw; height: 36vw; right: -12vw; top: -22vw; background: radial-gradient(circle, rgba(192,67,28,.16), transparent 65%); animation: cp-amb1 26s var(--cp-ease-io) infinite alternate; } #cp-ambient span:nth-child(2) { width: 40vw; height: 32vw; left: 10vw; bottom: -26vw; background: radial-gradient(circle, rgba(233,220,200,.07), transparent 65%); animation: cp-amb2 32s var(--cp-ease-io) infinite alternate; } html[data-theme="light"] #cp-ambient span:nth-child(1) { background: radial-gradient(circle, rgba(192,67,28,.08), transparent 65%); } html[data-theme="light"] #cp-ambient span:nth-child(2) { background: radial-gradient(circle, rgba(233,220,200,.6), transparent 65%); } @keyframes cp-amb1 { to { transform: translate(-10vw, 8vw) scale(1.15); } } @keyframes cp-amb2 { to { transform: translate(14vw, -6vw) scale(1.1); } } /* Marken-Loader statt Standard-Spinner */ html[data-theme]:not(#cp) body .app-loader .loading, html[data-theme]:not(#cp) body #pre-loader .loading { width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 0 !important; background: conic-gradient(from 0deg, transparent 0 20%, var(--cp-rust-hi) 70%, var(--cp-glow)) !important; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); -webkit-mask: radial-gradient(circle, transparent 42%, #000 44%); mask: radial-gradient(circle, transparent 42%, #000 44%); animation: cp-spin .9s linear infinite !important; } @media (prefers-reduced-motion: reduce) { #cp-ambient span, .cp-side-ind, .cp-overdue, .cp-skel::after, .cp-cw-row, .cp-cw-stat, .cp-day-sep { animation: none !important; transition: none !important; } } html[data-theme]:not(#cp) body .sidebar .sidebar-menu.cp-has-ind > li.active:not(.expand) > a::before { display: none !important; } /* Lückenloses Dashboard: letzte Karte jeder Spalte füllt bis zur Unterkante */ .cp-dash-grid > .cp-dash-item.cp-stretch { align-self: stretch; } .cp-dash-item.cp-stretch > .cp-dash-inner { height: calc(100% - 16px); display: flex !important; flex-direction: column; } .cp-dash-inner > script, .cp-dash-inner > style { display: none !important; } .cp-dash-item.cp-stretch > .cp-dash-inner > div:last-of-type, .cp-dash-item.cp-stretch > .cp-dash-inner > a:last-of-type { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .cp-dash-item.cp-stretch > .cp-dash-inner > div:last-of-type > .card, .cp-dash-item.cp-stretch > .cp-dash-inner > a:last-of-type > .card, html[data-theme]:not(#cp) body .cp-dash-item.cp-stretch > .cp-dash-inner > .card:last-of-type { flex: 1 1 auto; display: flex !important; flex-direction: column; height: auto !important; min-height: 0; } .cp-dash-item.cp-stretch .card:last-of-type > .card-body:last-child, .cp-dash-item.cp-stretch .card:last-of-type > :last-child:not(.card-header) { flex: 1 1 auto; } html[data-theme]:not(#cp) body .cp-dash-item.cp-stretch #todo-list-widget-table, html[data-theme]:not(#cp) body .cp-dash-item.cp-stretch #upcoming-event-container, html[data-theme]:not(#cp) body .cp-dash-item.cp-stretch #open-projects-container, html[data-theme]:not(#cp) body .cp-dash-item.cp-stretch .card-body[style*="height"], html[data-theme]:not(#cp) body .cp-dash-item.cp-stretch [id*="timeline"][style*="height"] { max-height: none !important; flex: 1 1 auto; min-height: 0; } .cp-dash-item.cp-stretch .card:last-of-type > .card-body { min-height: 0; overflow: hidden auto; } .cp-dash-item.cp-stretch > .cp-dash-inner { overflow: hidden; } html[data-theme]:not(#cp) body .cp-dash-item.cp-stretch #sticky-note { height: 100% !important; min-height: 220px; flex: 1 1 auto; } html[data-theme]:not(#cp) body .cp-dash-grid > .cp-dash-item.cp-hidden { display: none !important; } .cp-dash-item.cp-stretch .card:last-of-type > .card-body:last-of-type { flex: 1 1 auto; min-height: 0; overflow: hidden auto; } /* Stretch-Karten enden bündig; Tabellen füllen die Karte, Leerzustand zentriert mit Motion-Icon */ html[data-theme]:not(#cp) body .cp-dash-item.cp-stretch > .cp-dash-inner > .card:last-of-type, html[data-theme]:not(#cp) body .cp-dash-item.cp-stretch > .cp-dash-inner > div:last-of-type > .card:last-of-type { margin-bottom: 0 !important; } .cp-dash-item.cp-stretch .table-responsive:has(> .dt-container) { display: flex; flex-direction: column; } .cp-dash-item.cp-stretch .dt-container { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .cp-dash-item.cp-stretch .dt-container > .datatable-tools { margin-top: auto; } .cp-dash-item.cp-stretch .dt-container:has(td.dt-empty) > table { flex: 1 1 auto; height: 100%; } html[data-theme]:not(#cp) body .cp-dash-grid td.dt-empty { vertical-align: middle !important; text-align: center; border: 0 !important; } html[data-theme]:not(#cp) body .cp-dash-grid td.dt-empty::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8552A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 20px no-repeat, radial-gradient(circle at 30% 25%, rgba(232,85,42,.26), rgba(232,85,42,.05) 70%); border: 1px solid rgba(232,85,42,.28); box-shadow: 0 10px 30px -12px rgba(232,85,42,.45); animation: cp-empty-float 4.2s var(--cp-ease-io) infinite; } @keyframes cp-empty-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .cp-dash-grid td.dt-empty::before { animation: none; } } /* Kalender-Widget ohne Termine: feste 330px-Höhe aufheben → kein Leerraum */ html[data-theme]:not(#cp) body .cp-dash-grid #upcoming-event-container:has(.text-off) { height: auto !important; } html[data-theme]:not(#cp) body .cp-dash-grid #upcoming-event-container:has(.text-off) > .card-body > div:first-child { height: auto !important; min-height: 0 !important; } html[data-theme]:not(#cp) body .cp-dash-grid #upcoming-event-container .text-off svg { animation: cp-empty-float 4.2s var(--cp-ease-io) infinite; } /* Datums-/Statusspalten in Dashboard-Tabellen nicht umbrechen */ html[data-theme]:not(#cp) body .cp-dash-grid table td.w80, html[data-theme]:not(#cp) body .cp-dash-grid table th.w80 { white-space: nowrap; } /* --------------------------------------------------------------------------- 45. Dashboard v4.5: Aufgaben-Filter, Fristen, 14-Tage-Leiste, Leerzustände, Lichtkante, Rand-Spotlight, Funken --------------------------------------------------------------------------- */ /* Smart-Filter „Meine Aufgaben" (Segment mit gleitender Markierung) */ .cp-tf { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-left: 8px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); vertical-align: middle; } html[data-theme]:not(#cp) body .cp-tf .cp-tf-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 0; border-radius: 3px; background: transparent; cursor: pointer; font: 600 10.5px/1 var(--cp-font); letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); transition: color var(--cp-dur-m) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-tf .cp-tf-btn:hover { color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-tf .cp-tf-btn.is-on { color: var(--cp-strong); } .cp-tf-btn span { min-width: 18px; padding: 2px 5px; border-radius: 3px; background: var(--cp-hover); font-size: 10px; letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; color: var(--cp-text); transition: background var(--cp-dur-m) var(--cp-ease), color var(--cp-dur-m) var(--cp-ease); } .cp-tf-btn.is-zero span { opacity: .5; } .cp-tf-btn.is-alert span { background: rgba(229,72,77,.16); color: var(--cp-danger); } .cp-tf-btn.is-on span { background: var(--cp-rust); color: #fff; } .cp-tf-btn.is-alert.is-on span { background: var(--cp-danger); } .cp-tf-pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 3px; background: var(--cp-surface-3); box-shadow: 0 0 0 1px var(--cp-line-2) inset, 0 6px 16px -10px rgba(0,0,0,.6); transition: transform var(--cp-dur-l) var(--cp-e), width var(--cp-dur-l) var(--cp-e); pointer-events: none; } html[data-theme="light"] .cp-tf-pill { background: #fff; box-shadow: 0 0 0 1px var(--cp-line-2) inset, 0 4px 12px -8px rgba(10,12,17,.35); } .cp-dash-grid .filter-section-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* relative Fristen unter dem Datum */ html[data-theme]:not(#cp) body .cp-due { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--cp-dim); white-space: nowrap; } html[data-theme]:not(#cp) body .cp-due.is-late { color: var(--cp-danger); } html[data-theme]:not(#cp) body .cp-due.is-today { color: var(--cp-warning); } html[data-theme]:not(#cp) body .cp-due.is-soon { color: var(--cp-rust-hi); } .cp-due.is-late::before, .cp-due.is-today::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: cp-pulse 2.2s var(--cp-ease-io) infinite; } /* Überfällig-Badge ist jetzt klickbar (filtert) */ html[data-theme]:not(#cp) body button.cp-overdue { cursor: pointer; font-family: var(--cp-font); line-height: 1.5; transition: background var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-s) var(--cp-e); } html[data-theme]:not(#cp) body button.cp-overdue:hover { background: rgba(229,72,77,.2); transform: translateY(-1px); } html[data-theme]:not(#cp) body .cp-kpi-flag { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 9px; border-radius: 3px; cursor: pointer; border: 1px solid rgba(229,72,77,.45); background: rgba(229,72,77,.1); color: var(--cp-danger); font: 600 10px/1.5 var(--cp-font); letter-spacing: .06em; animation: cp-pulse-soft 2.4s var(--cp-ease-io) infinite; position: relative; z-index: 3; } .cp-kpi-flag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } html[data-theme]:not(#cp) body .cp-kpi-flag:hover { background: rgba(229,72,77,.2); } .cp-dash-item.cp-flash > .cp-dash-inner > .card, .cp-dash-item.cp-flash > .cp-dash-inner > div > .card { animation: cp-flash 1.5s var(--cp-e); } @keyframes cp-flash { 0% { box-shadow: 0 0 0 0 rgba(232,85,42,.0); } 20% { box-shadow: 0 0 0 3px rgba(232,85,42,.55); } 100% { box-shadow: 0 0 0 0 rgba(232,85,42,0); } } /* Content-Kacheln: Icon + „Handlung nötig" */ .cp-cw-stat { position: relative; } .cp-cw-ico { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 3px; color: var(--cp-muted); background: var(--cp-hover); transition: color var(--cp-dur-m) var(--cp-ease), background var(--cp-dur-m) var(--cp-ease), transform var(--cp-dur-l) var(--cp-e); } .cp-cw-ico svg { width: 14px; height: 14px; } a.cp-cw-stat:hover .cp-cw-ico { color: var(--cp-rust-hi); background: var(--cp-rust-soft); transform: rotate(-8deg) scale(1.06); } html[data-theme]:not(#cp) body a.cp-cw-stat.is-alert { border-color: rgba(224,165,58,.45); background: linear-gradient(160deg, rgba(224,165,58,.10), transparent 70%), var(--cp-surface-2); } .cp-cw-stat.is-alert .cp-cw-num { color: var(--cp-warning); } .cp-cw-stat.is-alert .cp-cw-ico { color: var(--cp-warning); background: rgba(224,165,58,.14); } .cp-cw-stat.is-alert::after { content: ""; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--cp-warning); box-shadow: 0 0 0 0 rgba(224,165,58,.6); animation: cp-ring-amber 2s var(--cp-e) infinite; } @keyframes cp-ring-amber { 0% { box-shadow: 0 0 0 0 rgba(224,165,58,.55); } 100% { box-shadow: 0 0 0 10px rgba(224,165,58,0); } } /* 14-Tage-Leiste */ .cp-cw-strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; } @media (max-width: 991px) { .cp-cw-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); } } html[data-theme]:not(#cp) body a.cp-cw-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 9px; min-height: 76px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); text-decoration: none !important; color: var(--cp-text) !important; animation: cp-day-in var(--cp-dur-xl) var(--cp-e) both; animation-delay: calc(120ms + var(--i, 0) * 32ms); transition: border-color var(--cp-dur-m) var(--cp-ease), background var(--cp-dur-m) var(--cp-ease), transform var(--cp-dur-l) var(--cp-e); } @keyframes cp-day-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } html[data-theme]:not(#cp) body a.cp-cw-day:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); transform: translateY(-3px); } .cp-cw-wd { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-dim); white-space: nowrap; } .cp-cw-dn { font-size: 19px; font-weight: 300; line-height: 1; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-cw-dots { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 8px; margin-top: auto; } .cp-cw-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--cp-muted)); box-shadow: 0 0 8px var(--c, transparent); animation: cp-pop var(--cp-dur-l) var(--cp-e) both; animation-delay: calc(420ms + var(--i, 0) * 32ms); } .cp-cw-dots em { font-style: normal; font-size: 9px; font-weight: 700; color: var(--cp-muted); } .cp-cw-day:not(.has-posts) .cp-cw-dots::before { content: ""; width: 10px; height: 1px; background: var(--cp-line-2); } .cp-cw-day.is-we { background: transparent !important; } .cp-cw-day.is-we .cp-cw-dn { color: var(--cp-muted); } html[data-theme]:not(#cp) body a.cp-cw-day.is-today { border-color: var(--cp-rust-line); background: linear-gradient(180deg, var(--cp-rust-soft), transparent 90%), var(--cp-surface-2) !important; } .cp-cw-day.is-today .cp-cw-wd { color: var(--cp-rust-hi); } .cp-cw-day.is-today::before { content: ""; position: absolute; top: -1px; left: 50%; width: 22px; height: 2px; margin-left: -11px; border-radius: 2px; background: var(--cp-rust-hi); box-shadow: 0 0 12px rgba(232,85,42,.9); } .cp-cw-day.is-month::after { content: ""; position: absolute; left: -4px; top: 14px; bottom: 14px; width: 1px; background: var(--cp-line-2); } .cp-cw-strip + .cp-cw-list, .cp-cw-strip + .cp-cw-empty { margin-top: 12px; } .cp-cw-strip + .cp-cw-empty { padding: 4px 2px 0; font-size: 12.5px; } /* Diagramm ohne Daten: erklärender Leerzustand */ .cp-dash-grid .cp-chart-empty { position: relative !important; } .cp-dash-grid .cp-chart-empty > canvas { opacity: .28; filter: grayscale(1); } .cp-dash-grid .cp-chart-empty::after { content: "Keine Daten im Zeitraum"; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-dim); text-align: center; } /* Projektübersicht: doppelter Rahmen weg, Zahlen größer */ html[data-theme]:not(#cp) body .cp-dash-grid .card > .rounded-bottom > .box { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; background: transparent !important; } html[data-theme]:not(#cp) body .cp-dash-grid .box-content h4 { font-size: 26px !important; font-weight: 300 !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-dash-grid .box-content a:hover h4 { color: var(--cp-rust-hi) !important; } /* Rand-Spotlight: Kartenrand leuchtet an der Mausposition */ html[data-theme]:not(#cp) body.dashboard-page #page-content .cp-dash-grid .card::before, html[data-theme]:not(#cp) body .cp-hero-stats .card::before { content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1px; background: radial-gradient(240px circle at var(--mx, -500px) var(--my, -500px), rgba(232,85,42,.75), rgba(232,85,42,.15) 40%, transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity var(--cp-dur-l) var(--cp-ease); } html[data-theme]:not(#cp) body.dashboard-page #page-content .cp-dash-grid .card:hover::before, html[data-theme]:not(#cp) body .cp-hero-stats .card:hover::before { opacity: 1; } .cp-dash-grid .card .card::before { display: none !important; } /* Hero: umlaufende Lichtkante (Motion Graphic) */ @property --cp-beam { syntax: ""; initial-value: 0deg; inherits: false; } .cp-beam { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--cp-beam), transparent 0deg, transparent 290deg, rgba(232,85,42,.0) 300deg, rgba(232,85,42,.85) 340deg, rgba(255,214,190,.95) 352deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: cp-beam 9s linear infinite; opacity: .9; } html[data-theme="light"] .cp-beam { opacity: .6; } @keyframes cp-beam { to { --cp-beam: 360deg; } } /* Funken beim Abhaken */ .cp-spark { position: fixed; z-index: 10000; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); } .cp-spark-ring { position: fixed; z-index: 10000; width: 26px; height: 26px; border-radius: 50%; pointer-events: none; border: 2px solid var(--cp-success); transform: translate(-50%, -50%); } @media (prefers-reduced-motion: reduce) { .cp-beam, .cp-cw-day, .cp-cw-dots i, .cp-cw-stat.is-alert::after, .cp-kpi-flag, .cp-due::before, .cp-tf-pill { animation: none !important; transition: none !important; } } /* --------------------------------------------------------------------------- 46. Chat v4.5: Nachrichten unten, Gesprächsbeginn, Emoji, Entwürfe, Kopieren/Zitieren, Ungelesen an der Personen-Leiste --------------------------------------------------------------------------- */ /* Nachrichten wie im Messenger unten ausrichten */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper #js-chat-messages-container { display: flex !important; flex-direction: column; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #js-chat-messages-container > :first-child { margin-top: auto; } /* Anfang der Unterhaltung */ .cp-chat-intro { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 14px; text-align: center; animation: cp-reveal var(--cp-dur-xl) var(--cp-e) both; } .cp-chat-intro-av { position: relative; width: 64px; height: 64px; margin-bottom: 4px; } .cp-chat-intro-av img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--cp-line-2), 0 14px 30px -14px rgba(232,85,42,.55); } .cp-chat-intro-av::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--cp-rust-line); animation: cp-intro-ring 3.2s var(--cp-e) infinite; } @keyframes cp-intro-ring { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.18); opacity: 0; } } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-chat-intro strong { font: 500 15px/1.2 var(--cp-font); color: var(--cp-strong) !important; } .cp-chat-intro > span:last-child { font-size: 11.5px; color: var(--cp-dim); } /* Emoji-Button + Auswahl */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-emoji-btn { order: 1; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; transition: color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-emoji-btn svg { width: 17px; height: 17px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-emoji-btn:hover { color: var(--cp-rust-hi); background: var(--cp-hover); transform: rotate(-10deg) scale(1.08); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-form .cp-emoji-btn { align-self: flex-end; margin-bottom: 2px; } .cp-emoji-pop { position: absolute; z-index: 30; left: 12px; right: 12px; padding: 10px 10px 8px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); box-shadow: 0 -12px 40px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset; transform-origin: bottom center; animation: cp-emoji-in var(--cp-dur-m) var(--cp-e) both; } @keyframes cp-emoji-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } .cp-emoji-pop small { display: block; margin: 2px 4px 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-dim); } .cp-emoji-pop small:not(:first-child) { margin-top: 10px; } .cp-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; } .cp-emoji-pop button { height: 38px; min-width: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; font-size: 21px; line-height: 1; cursor: pointer; transition: background var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-s) var(--cp-e); animation: cp-pop var(--cp-dur-m) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 10ms); } .cp-emoji-pop button:hover, .cp-emoji-pop button:focus-visible { background: var(--cp-hover); transform: scale(1.18); outline: none; } /* Kopieren / Zitieren über der Blase */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-msg { position: relative; overflow: visible !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-msg-act { position: absolute; top: -15px; z-index: 3; display: flex; gap: 1px; padding: 2px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); opacity: 0; transform: translateY(4px) scale(.94); pointer-events: none; transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other .cp-msg-act { right: 6px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-me .cp-msg-act { left: 6px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-row:hover .cp-msg-act { opacity: 1; transform: none; pointer-events: auto; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-msg-act button { display: grid; place-items: center; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted) !important; cursor: pointer; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-msg-act button:hover { background: var(--cp-hover); color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-msg-act button.is-done { color: var(--cp-success) !important; } .cp-msg-act svg { width: 13px; height: 13px; } /* Entwürfe */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-draft { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-draft b { color: var(--cp-rust-hi); font-weight: 600; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-preview.cp-has-draft { display: none; } .cp-draft-note { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 3px; background: var(--cp-surface-3); border: 1px solid var(--cp-line-2); font-size: 10.5px; color: var(--cp-muted); white-space: nowrap; animation: cp-pop var(--cp-dur-m) var(--cp-e) both; z-index: 5; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #chat-message-reply-form { position: relative; } /* Ungelesen an der Personen-Leiste */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person.has-unread .cp-person-av img { box-shadow: 0 0 0 2px var(--cp-rust-hi), 0 0 18px -2px rgba(232,85,42,.7); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person.has-unread .cp-person-name { color: var(--cp-strong); font-weight: 600; } .cp-person.has-unread .cp-person-av::after { content: ""; position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--cp-rust-hi); border: 2px solid var(--cp-surface); animation: cp-pulse 2s var(--cp-ease-io) infinite; } @media (prefers-reduced-motion: reduce) { .cp-chat-intro, .cp-chat-intro-av::after, .cp-emoji-pop, .cp-emoji-pop button, .cp-person.has-unread .cp-person-av::after { animation: none !important; } } /* Rechnungsübersicht: feste 330px-Höhe (per RISE-JS) aufheben → keine Lücke */ html[data-theme]:not(#cp) body .cp-dash-grid #invoice-overview-container { height: auto !important; } html[data-theme]:not(#cp) body .cp-dash-grid #invoice-overview-container .h100p { height: auto !important; } html[data-theme]:not(#cp) body .cp-dash-grid .card > .rounded-bottom > .box { border-top: 0 !important; } .cp-dash-grid .cp-chart-empty > canvas { opacity: .1 !important; } html[data-theme]:not(#cp) body .cp-dash-grid #invoice-overview-container .widget-footer.position-absolute { position: static !important; width: 100% !important; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-emoji-pop { background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-emoji-pop button { background: transparent !important; color: inherit !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-emoji-pop button:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-msg-act { background: var(--cp-surface-2) !important; } /* --------------------------------------------------------------------------- 47. Topbar v4.6: deckend (kein durchscheinender Glow), „⋯ Mehr"-Menü mit Beschriftung, Tablet/iPad-Breiten --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body #default-navbar, html[data-theme]:not(#cp) body .navbar-custom { background: var(--cp-deep) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .rst-mobile-overflow-wrap { position: relative; display: flex; align-items: center; list-style: none; } html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--cp-r) !important; background: transparent !important; color: var(--cp-muted) !important; cursor: pointer; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-btn:hover, html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-btn[aria-expanded="true"] { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-btn svg { width: 18px; height: 18px; } html[data-theme]:not(#cp) body .rst-mobile-overflow-dot { top: 6px; right: 6px; width: 8px; height: 8px; background: var(--cp-rust-hi); box-shadow: 0 0 0 2px var(--cp-deep); } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel { top: 62px; right: 12px; min-width: 260px; max-width: 320px; padding: 6px; flex-direction: column; flex-wrap: nowrap; gap: 2px; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; box-shadow: var(--cp-shadow-pop) !important; transform-origin: top right; transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e) !important; } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel > .rst-mobile-overflow-item { width: 100%; justify-content: flex-start !important; } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel button.rst-mobile-overflow-item, html[data-theme]:not(#cp) body .rst-mobile-overflow-panel .rst-mobile-overflow-item > button { width: 100% !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px; padding: 0 12px !important; background: transparent !important; border: 0 !important; border-radius: 3px !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel .rst-mobile-overflow-item > button { width: auto !important; padding: 0 !important; } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel .rst-mobile-overflow-item:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; border-radius: 3px; } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel .rst-mobile-overflow-item svg { width: 17px !important; height: 17px !important; flex: 0 0 auto; } html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-panel .rst-mobile-overflow-item { box-sizing: border-box !important; margin: 0 !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; border: 0 !important; outline: 0; box-shadow: none !important; transform: none !important; } html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-panel .rst-mobile-overflow-item::after, html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-panel .rst-mobile-overflow-item::before { display: none !important; } .rst-ovf-label { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 13px/1.2 var(--cp-font); color: var(--cp-text); letter-spacing: 0; white-space: nowrap; text-transform: none; } .rst-ovf-state { padding: 2px 8px; border-radius: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; background: var(--cp-hover); color: var(--cp-muted); } .rst-ovf-state.is-on { background: rgba(63,185,132,.14); color: var(--cp-success); } li.rst-mobile-overflow-item { display: flex !important; align-items: center; gap: 12px; padding: 0 12px !important; height: 42px; } @media (prefers-reduced-motion: reduce) { .rst-mobile-overflow-panel { transition: none !important; } } /* Tablet / iPad: Name ausblenden (Avatar bleibt), Abstände enger */ @media (max-width: 1280px) { html[data-theme]:not(#cp) body #default-navbar #user-dropdown .user-name { display: none !important; } html[data-theme]:not(#cp) body #default-navbar #user-dropdown { padding-left: 6px !important; padding-right: 6px !important; } html[data-theme]:not(#cp) body #default-navbar .navbar-nav > li { margin: 0 !important; } } @media (max-width: 1100px) { /* Schnellzugriff-Listen (Projekte/Kunden/Dashboards) doppeln die Sidebar → auf dem iPad aus */ html[data-theme]:not(#cp) body #default-navbar ul.navbar-nav.me-auto > li.dropdown.hidden-xs { display: none !important; } } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-emoji-pop button:focus-visible { background: var(--cp-hover) !important; box-shadow: 0 0 0 2px var(--cp-rust-line); } html.cp-is-client .rst-ai-topbar-toggle, html.cp-is-client .rst-ai-panel, html.cp-is-client .rst-ai-fab { display: none !important; } html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-panel .rst-mobile-overflow-item { position: relative !important; } html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-panel button.rst-mobile-overflow-item > span:not(.rst-ovf-label):not([class*="badge"]) { display: none !important; } /* --------------------------------------------------------------------------- v5.9.1 · ⋯-Menü: am Knopf verankert, Gruppen, Beschreibungen, Tastenkürzel --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .rst-mobile-overflow-panel { width: 304px; min-width: 0; max-width: calc(100vw - 24px); padding: 4px 6px 6px; gap: 0; overflow: visible; transform-origin: var(--rst-caret, 90%) 0; } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel::before { content: ""; position: absolute; top: -6px; left: calc(var(--rst-caret, 90%) - 6px); width: 11px; height: 11px; background: var(--cp-surface-2); border-left: 1px solid var(--cp-line-2); border-top: 1px solid var(--cp-line-2); transform: rotate(45deg); border-top-left-radius: 2px; } .rst-ovf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 10px 5px; } .rst-ovf-head b { font: 500 13px/1.2 var(--cp-font); color: var(--cp-strong); } .rst-ovf-head small { font-size: 10.5px; color: var(--cp-dim); } .rst-ovf-sec { border-top: 1px solid var(--cp-line); margin-top: 4px; padding-top: 2px; } .rst-ovf-sec:first-of-type { border-top: 0; margin-top: 0; } .rst-ovf-sec[hidden] { display: none !important; } .rst-ovf-sec-t { padding: 8px 10px 4px; font: 600 9.5px/1 var(--cp-font); letter-spacing: .16em; text-transform: uppercase; color: var(--cp-dim); } .rst-ovf-list { display: flex; flex-direction: column; gap: 1px; } html[data-theme]:not(#cp) body .rst-ovf-list > .rst-mobile-overflow-item { width: 100% !important; } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel button.rst-mobile-overflow-item, html[data-theme]:not(#cp) body .rst-mobile-overflow-panel .rst-ovf-own { width: 100% !important; height: auto !important; min-height: 44px; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px; padding: 7px 10px !important; margin: 0; background: transparent !important; border: 0 !important; border-radius: 3px !important; color: var(--cp-muted) !important; text-align: left; cursor: pointer; font: inherit; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel .rst-ovf-own:hover, html[data-theme]:not(#cp) body .rst-mobile-overflow-panel button.rst-mobile-overflow-item:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel button:focus:not(:focus-visible) { outline: none !important; } /* v5.76.8: Tastatur-Fokus bleibt sichtbar */ html[data-theme]:not(#cp) body .rst-mobile-overflow-panel button:focus-visible { outline: none !important; background: var(--cp-hover) !important; box-shadow: inset 0 0 0 1.5px var(--cp-rust-line) !important; color: var(--cp-strong) !important; } .rst-ovf-ico { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; } .rst-ovf-ico svg { width: 17px; height: 17px; } .rst-ovf-own.has-update .rst-ovf-ico::after { content: ""; position: absolute; top: -3px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 0 2px var(--cp-surface-2); } .rst-ovf-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rst-ovf-txt small { font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--cp-dim); white-space: normal; } .rst-ovf-own.has-update .rst-ovf-txt small { color: var(--cp-rust-hi); } .rst-ovf-chev { display: inline-grid; margin-left: auto; color: var(--cp-dim); transition: transform var(--cp-dur-m) var(--cp-e); } .rst-ovf-chev svg { width: 14px; height: 14px; } .rst-ovf-own.is-open .rst-ovf-chev { transform: rotate(90deg); } .rst-ovf-keys { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; padding: 4px 10px 8px 39px; font-size: 11.5px; color: var(--cp-muted); animation: cp-reveal var(--cp-dur-m) var(--cp-e) both; } .rst-ovf-keys[hidden] { display: none; } /* v5.12: Zustand als Schalter statt „an/aus" */ .rst-ovf-switch { position: relative; flex: 0 0 auto; width: 30px; height: 18px; margin-left: auto; border-radius: 10px; background: var(--cp-line-2); transition: background var(--cp-dur-s) var(--cp-ease); } .rst-ovf-switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform var(--cp-dur-m) var(--cp-e); } .rst-ovf-switch.is-on { background: var(--cp-rust-hi); } .rst-ovf-switch.is-on i { transform: translateX(12px); } html[data-theme]:not(#cp) body .rst-ovf-list > li.rst-mobile-overflow-item { height: auto !important; min-height: 44px; padding: 7px 10px !important; border-radius: 3px; cursor: pointer; } html[data-theme]:not(#cp) body .rst-ovf-list > li.rst-mobile-overflow-item > button { border: 0 !important; } .rst-ovf-keys span { display: flex; align-items: center; gap: 7px; min-width: 0; line-height: 1.25; } .rst-ovf-keys kbd { flex: 0 0 auto; } .rst-ovf-keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border: 1px solid var(--cp-line-2); border-bottom-width: 2px; border-radius: 3px; background: var(--cp-surface); font: 600 10.5px/1 var(--cp-font); color: var(--cp-strong); box-shadow: none; } @media (max-width: 600px) { html[data-theme]:not(#cp) body .rst-mobile-overflow-panel { left: 12px !important; right: 12px !important; width: auto; max-width: none; max-height: calc(100vh - 90px); overflow-y: auto; } html[data-theme]:not(#cp) body .rst-mobile-overflow-panel::before { display: none; } } /* --------------------------------------------------------------------------- 48. Tablet / iPad: Detailansichten, Kennzahl-Kacheln, Rechnungsübersicht --------------------------------------------------------------------------- */ /* Rechnungsübersicht überall ohne feste Höhe (RISE setzt 330px inline) */ html[data-theme]:not(#cp) body #invoice-overview-container { height: auto !important; } html[data-theme]:not(#cp) body #invoice-overview-container .h100p { height: auto !important; } html[data-theme]:not(#cp) body #invoice-overview-container .widget-footer.position-absolute { position: static !important; width: 100% !important; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cp-line); } /* Kennzahl-Kacheln: nie mitten im Wort umbrechen */ html[data-theme]:not(#cp) body .box .box-content, html[data-theme]:not(#cp) body .box .box-content * { word-break: normal !important; overflow-wrap: normal !important; } @media (max-width: 1279px) { /* Kunden-/Lead-Detail: Info-Spalte (fest 350px) passt neben den Inhalt nicht → oben, volle Breite */ html[data-theme]:not(#cp) body .details-view-wrapper { flex-wrap: wrap !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .w-100 { flex: 1 1 100%; min-width: 0; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section { order: -1; flex: 1 1 100%; width: 100% !important; margin: 0 0 16px !important; padding-left: 0 !important; padding-right: 0 !important; } html[data-theme]:not(#cp) body .box .box-content { padding-left: 6px !important; padding-right: 6px !important; } } @media (min-width: 768px) and (max-width: 1279px) { /* Info links, Aufgaben/Notizen/Erinnerungen rechts daneben → kompakt statt langer Einzelspalte */ html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; } html[data-theme]:not(#cp) body .details-view-right-section > div:first-child { grid-row: span 5; } html[data-theme]:not(#cp) body .details-view-right-section > :empty { display: none !important; } html[data-theme]:not(#cp) body .details-view-right-section > *, html[data-theme]:not(#cp) body .details-view-right-section > * > .card, html[data-theme]:not(#cp) body .details-view-right-section > .card { margin: 0 !important; } } /* --------------------------------------------------------------------------- 49. CRM v4.6: Pipeline, Hinweise, Zuletzt aktiv, Assistent, Kanban --------------------------------------------------------------------------- */ .cp-crm-card .card-header { display: flex; align-items: center; gap: 4px; } .cp-crm-h-ico { display: inline-flex; color: var(--cp-rust-hi); } .cp-crm-h-ico svg { width: 14px; height: 14px; } .cp-crm-h-actions { display: inline-flex; gap: 6px; margin-left: auto; margin-right: 6px; } html[data-theme]:not(#cp) body a.cp-crm-hbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--cp-line-2); border-radius: 3px; font: 600 10px/1 var(--cp-font) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-text) !important; text-decoration: none !important; transition: border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body a.cp-crm-hbtn:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); transform: translateY(-1px); } .cp-crm-hbtn svg { width: 12px; height: 12px; } .cp-crm-count { margin-left: 8px; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--cp-rust); color: #fff; font: 700 10.5px/1.6 var(--cp-font); text-align: center; letter-spacing: 0; animation: cp-pop var(--cp-dur-l) var(--cp-e) both; } .cp-crm-count[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-crm-count { color: #fff !important; } /* v5.76.7: Kopfzeilen-Regel färbte die Zahl im hellen Modus dunkel (3,9 : 1 auf Rost) */ html[data-theme]:not(#cp) body .cp-crm-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--cp-rust); border-radius: 3px; cursor: pointer; background: var(--cp-rust); color: #fff !important; font: 600 11px/1 var(--cp-font); letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; transition: background var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e), box-shadow var(--cp-dur-m) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-crm-btn:hover { background: var(--cp-rust-hi); transform: translateY(-1px); box-shadow: 0 8px 22px -12px rgba(0,0,0,.55); } html[data-theme]:not(#cp) body .cp-crm-btn.is-ghost { background: transparent; border-color: var(--cp-line-2); color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .cp-crm-btn.is-ghost:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); box-shadow: none; } .cp-crm-btn svg { width: 13px; height: 13px; } .cp-crm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 16px; text-align: center; color: var(--cp-muted); } .cp-crm-empty > svg:not(.cp-funnel-art), .cp-ok-art { width: 40px; height: 40px; padding: 10px; border-radius: 3px; color: var(--cp-rust-hi); background: var(--cp-rust-soft); border: 1px solid var(--cp-rust-line); animation: cp-empty-float 4.2s var(--cp-ease-io) infinite; box-sizing: border-box; } .cp-ok-art { display: grid; place-items: center; color: var(--cp-success); background: rgba(63,185,132,.12); border-color: rgba(63,185,132,.35); } .cp-ok-art svg { width: 18px; height: 18px; } .cp-crm-empty b { color: var(--cp-strong); font-weight: 500; font-size: 14px; margin-top: 6px; } .cp-crm-empty span { font-size: 12.5px; max-width: 420px; line-height: 1.5; } .cp-crm-empty.is-inline { flex-direction: row; justify-content: flex-start; gap: 22px; text-align: left; padding: 18px 6px 6px; } .cp-crm-empty.is-inline > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .cp-crm-empty.is-inline .cp-crm-btn { margin-top: 8px; } .cp-crm-error { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid rgba(229,72,77,.35); border-radius: 3px; background: rgba(229,72,77,.08); color: var(--cp-text); font-size: 13px; } .cp-crm-error svg { width: 18px; height: 18px; color: var(--cp-danger); flex: 0 0 auto; } .cp-crm-error button { margin-left: auto; padding: 6px 10px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); cursor: pointer; font: 600 11px var(--cp-font); } .cp-skel-chip { display: inline-block; width: 120px; height: 24px; border-radius: 999px; } /* Pipeline */ .cp-pl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } @media (max-width: 767px) { .cp-pl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cp-pl-kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); animation: cp-reveal var(--cp-dur-xl) var(--cp-e) both; } .cp-pl-kpi b { font-size: 22px; font-weight: 300; line-height: 1.1; color: var(--cp-strong); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .cp-pl-kpi small { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp) body .cp-pl-kpi.is-won b { color: var(--cp-success); } html[data-theme]:not(#cp) body .cp-pl-kpi.is-warn b { color: var(--cp-warning); } .cp-pl-flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } html[data-theme]:not(#cp) body a.cp-pl-stage { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 14px; min-height: 104px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-surface-2); color: var(--cp-text) !important; text-decoration: none !important; overflow: hidden; animation: cp-day-in var(--cp-dur-xl) var(--cp-e) both; animation-delay: calc(80ms + var(--i, 0) * 55ms); transition: border-color var(--cp-dur-m) var(--cp-ease), transform var(--cp-dur-l) var(--cp-e), background var(--cp-dur-m) var(--cp-ease); } html[data-theme]:not(#cp) body a.cp-pl-stage:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateY(-3px); background: color-mix(in srgb, var(--c) 8%, var(--cp-surface-2)); } .cp-pl-stage::after { content: ""; position: absolute; top: 50%; right: -5px; width: 10px; height: 10px; border-top: 1px solid var(--cp-line-2); border-right: 1px solid var(--cp-line-2); transform: translateY(-50%) rotate(45deg); background: var(--cp-surface-2); z-index: 1; } .cp-pl-stage:last-child::after { display: none; } .cp-pl-name { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-pl-name i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: 0 0 auto; } .cp-pl-count { font-size: 26px; font-weight: 300; line-height: 1; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-pl-stage.is-empty .cp-pl-count { color: var(--cp-dim); } .cp-pl-val { font-size: 11.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-pl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cp-line); } .cp-pl-bar span { display: block; height: 100%; width: var(--pct); background: var(--c); box-shadow: 0 0 12px var(--c); transform-origin: left; animation: cp-grow .9s var(--cp-e) both; animation-delay: calc(300ms + var(--i, 0) * 70ms); } .cp-pl-stale { position: absolute; top: 10px; right: 10px; padding: 1px 7px; border-radius: 3px; font-size: 10px; font-weight: 700; color: var(--cp-warning); background: rgba(224,165,58,.14); } .cp-pl-stage.is-closed { background: transparent; border-style: dashed; } .cp-pl-stage.is-won .cp-pl-count { color: var(--cp-success); } .cp-pl-stage.is-lost .cp-pl-count { color: var(--cp-dim); } .cp-pl-sub { margin: 16px 0 8px; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-dim); } .cp-pl-opps { display: flex; flex-direction: column; gap: 2px; } .cp-pl-opp { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 3px; transition: background var(--cp-dur-s) var(--cp-ease); animation: cp-row var(--cp-dur-l) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 45ms); } .cp-pl-opp:hover { background: var(--cp-hover); } .cp-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 12px/1 var(--cp-font); letter-spacing: .02em; color: hsl(var(--h) 70% 78%); background: hsl(var(--h) 45% 22% / .55); border: 1px solid hsl(var(--h) 50% 50% / .35); } html[data-theme="light"] .cp-av { color: hsl(var(--h) 55% 30%); background: hsl(var(--h) 60% 92%); } .cp-pl-opp-main, .cp-recent-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; } html[data-theme]:not(#cp) body .cp-pl-opp-main a, html[data-theme]:not(#cp) body .cp-recent-main a { color: var(--cp-strong) !important; font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-pl-opp-main small, .cp-recent-main small { font-size: 11.5px; color: var(--cp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-pl-pill { display: inline-flex; align-items: center; gap: 5px; color: var(--cp-text); } .cp-pl-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); } .cp-pl-opp-val { font-variant-numeric: tabular-nums; color: var(--cp-strong); font-size: 13px; } .cp-pl-opp-val em { font-style: normal; color: var(--cp-dim); font-size: 11.5px; } .cp-pl-idle { font-size: 11px; color: var(--cp-muted); white-space: nowrap; } .cp-pl-idle.is-idle { color: var(--cp-warning); } .cp-pl-acts, .cp-recent-acts { display: inline-flex; gap: 2px; opacity: 0; transform: translateX(4px); transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } .cp-pl-opp:hover .cp-pl-acts, .cp-recent-row:hover .cp-recent-acts, .cp-pl-acts:focus-within, .cp-recent-acts:focus-within { opacity: 1; transform: none; } @media (hover: none) { .cp-pl-acts, .cp-recent-acts { opacity: 1; transform: none; } } html[data-theme]:not(#cp) body .cp-pl-acts button, html[data-theme]:not(#cp) body .cp-recent-acts button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-pl-acts button:hover, html[data-theme]:not(#cp) body .cp-recent-acts button:hover { background: var(--cp-rust-soft); color: var(--cp-rust-hi); border-color: var(--cp-rust-line); } .cp-pl-acts svg, .cp-recent-acts svg { width: 15px; height: 15px; } .cp-funnel-art { width: 120px; height: 90px; flex: 0 0 auto; } .cp-funnel-art path { stroke: var(--cp-line-2); stroke-width: 6; } .cp-funnel-art .f1 { stroke: rgba(232,85,42,.25); } .cp-funnel-art .f2 { stroke: rgba(232,85,42,.4); } .cp-funnel-art .f3 { stroke: rgba(232,85,42,.6); } .cp-funnel-art .f4 { stroke: var(--cp-rust-hi); } .cp-funnel-art path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: cp-draw 1s var(--cp-e) forwards; } .cp-funnel-art .f2 { animation-delay: .12s; } .cp-funnel-art .f3 { animation-delay: .24s; } .cp-funnel-art .f4 { animation-delay: .36s; } .cp-funnel-art .dot { fill: var(--cp-rust-hi); animation: cp-funnel-drop 2.6s var(--cp-e) infinite; } .cp-funnel-art .d2 { animation-delay: 1.3s; } @keyframes cp-draw { to { stroke-dashoffset: 0; } } @keyframes cp-funnel-drop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(62px); opacity: 0; } } /* Hinweise */ .cp-hints { display: flex; flex-direction: column; gap: 8px; } .cp-hint { --sev: var(--cp-info); border: 1px solid var(--cp-line); border-left: 3px solid var(--sev); border-radius: 3px; background: var(--cp-surface-2); overflow: hidden; animation: cp-reveal var(--cp-dur-xl) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 70ms); } .cp-hint.is-high { --sev: var(--cp-danger); } .cp-hint.is-med { --sev: var(--cp-warning); } .cp-hint.is-low { --sev: var(--cp-info); } .cp-hint summary { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; cursor: pointer; list-style: none; } .cp-hint summary::-webkit-details-marker { display: none; } .cp-hint summary:hover { background: var(--cp-hover); } .cp-hint-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px; flex: 0 0 auto; color: var(--sev); background: color-mix(in srgb, var(--sev) 14%, transparent); } .cp-hint-ico svg { width: 15px; height: 15px; } .cp-hint.is-high .cp-hint-ico { animation: cp-pulse-soft 2.4s var(--cp-ease-io) infinite; } .cp-hint-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .cp-hint-main b { font-size: 13px; font-weight: 500; color: var(--cp-strong); } .cp-hint-main small { font-size: 11.5px; color: var(--cp-dim); line-height: 1.4; } .cp-hint-chev { color: var(--cp-dim); transition: transform var(--cp-dur-l) var(--cp-e); margin-top: 5px; } .cp-hint-chev svg { width: 14px; height: 14px; } .cp-hint[open] .cp-hint-chev { transform: rotate(180deg); } .cp-hint-items { display: flex; flex-direction: column; padding: 0 8px 8px 50px; animation: cp-sub var(--cp-dur-m) var(--cp-e) both; } .cp-hint-item { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-top: 1px solid var(--cp-line); } .cp-hint-item > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html[data-theme]:not(#cp) body .cp-hint-item a { color: var(--cp-text) !important; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body .cp-hint-item a:hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .cp-hint-item b { font-size: 12.5px; font-weight: 500; color: var(--cp-text); } .cp-hint-item small { font-size: 11px; color: var(--cp-dim); } html[data-theme]:not(#cp) body .cp-hint-item button, html[data-theme]:not(#cp) body .cp-hint-all { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); cursor: pointer; font: 600 10.5px/1 var(--cp-font); letter-spacing: .04em; transition: border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-hint-item button:hover, html[data-theme]:not(#cp) body .cp-hint-all:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-hint-all { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 8px 6px 2px; } .cp-hint-all svg { width: 12px; height: 12px; } .cp-hint-more { padding: 6px; font-size: 11px; color: var(--cp-dim); } .cp-hint-recs { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } html[data-theme]:not(#cp) body .cp-hint-recs a { font-size: 11.5px; color: var(--cp-rust-hi) !important; } /* Zuletzt aktiv */ .cp-recent { display: flex; flex-direction: column; gap: 2px; } .cp-recent-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 8px; border-radius: 3px; transition: background var(--cp-dur-s) var(--cp-ease); animation: cp-row var(--cp-dur-l) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 45ms); } .cp-recent-row:hover { background: var(--cp-hover); } .cp-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--cp-info); background: rgba(108,166,217,.12); } .cp-tag.is-lead { color: var(--cp-warning); background: rgba(224,165,58,.12); } /* Assistent-Leiste auf Kunden-/Interessenten-Seiten */ .cp-assist { margin: 0 0 16px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: linear-gradient(120deg, rgba(232,85,42,.06), transparent 40%), var(--cp-surface); position: relative; overflow: hidden; animation: cp-reveal var(--cp-dur-xl) var(--cp-e) both; } .cp-assist::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cp-rust-hi), transparent); opacity: .6; animation: cp-scan-line 6s linear infinite; } @keyframes cp-scan-line { from { transform: translateX(-60%); } to { transform: translateX(60%); } } .cp-assist-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; } .cp-assist-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; color: var(--cp-rust-hi); background: var(--cp-rust-soft); border: 1px solid var(--cp-rust-line); } .cp-assist-ico svg { width: 16px; height: 16px; animation: cp-spin 14s linear infinite; } .cp-assist-bar > b { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-strong); } .cp-assist-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 200px; } html[data-theme]:not(#cp) body .cp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--cp-line-2); border-radius: 999px; background: var(--cp-surface-2); font: 500 11.5px/1.4 var(--cp-font); color: var(--cp-text) !important; text-decoration: none !important; white-space: nowrap; animation: cp-pop var(--cp-dur-l) var(--cp-e) both; } .cp-chip svg { width: 12px; height: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-chip.is-warn { border-color: rgba(224,165,58,.45); color: var(--cp-warning) !important; background: rgba(224,165,58,.08); } .cp-chip.is-warn svg { color: var(--cp-warning); } html[data-theme]:not(#cp) body .cp-chip.is-miss { border-color: rgba(108,166,217,.45); color: var(--cp-info) !important; background: rgba(108,166,217,.08); cursor: pointer; } .cp-chip.is-miss svg { color: var(--cp-info); } html[data-theme]:not(#cp) body button.cp-chip:hover, html[data-theme]:not(#cp) body a.cp-chip:hover { filter: brightness(1.15); transform: translateY(-1px); } .cp-assist-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; } .cp-assist-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cp-dur-l) var(--cp-e); } .cp-assist-panel > * { overflow: hidden; min-height: 0; } .cp-assist.is-open .cp-assist-panel { grid-template-rows: 1fr; } .cp-sum { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 26px; padding: 4px 16px 14px 54px; border-top: 1px solid var(--cp-line); padding-top: 14px; } @media (max-width: 991px) { .cp-sum { grid-template-columns: minmax(0, 1fr); padding-left: 16px; } } .cp-sum.is-loading { display: block; } .cp-sum-main p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--cp-text); } .cp-sum-status { color: var(--cp-strong) !important; font-weight: 500; } .cp-sum-risks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .cp-sum-risks li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--cp-muted); } .cp-sum-risks svg { width: 13px; height: 13px; color: var(--cp-warning); flex: 0 0 auto; margin-top: 2px; } .cp-sum-steps .cp-pl-sub { margin-top: 0; } .cp-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cp-line); animation: cp-row var(--cp-dur-l) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 70ms); } .cp-step:first-of-type { border-top: 0; } .cp-step-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; color: var(--cp-rust-hi); background: var(--cp-rust-soft); } .cp-step-ico svg { width: 14px; height: 14px; } .cp-step-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cp-step-main b { font-size: 13px; font-weight: 500; color: var(--cp-strong); } .cp-step-main small { font-size: 11.5px; color: var(--cp-dim); line-height: 1.4; } .cp-step-due { font-size: 11px; color: var(--cp-muted); white-space: nowrap; } .cp-step .cp-crm-btn { padding: 6px 10px; font-size: 10px; } .cp-sum-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--cp-dim); } .cp-sum-foot svg { width: 12px; height: 12px; color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-sum-foot button { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); cursor: pointer; font: 600 10.5px var(--cp-font); } html[data-theme]:not(#cp) body .cp-sum-foot button:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-sum-think { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 12.5px; color: var(--cp-muted); } .cp-orbit { position: relative; width: 26px; height: 26px; } .cp-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--cp-rust-hi); animation: cp-spin 1.1s linear infinite; } .cp-orbit i:nth-child(2) { inset: 4px; border-top-color: rgba(232,85,42,.6); animation-duration: 1.6s; animation-direction: reverse; } .cp-orbit i:nth-child(3) { inset: 9px; border: 0; background: var(--cp-rust-hi); animation: cp-pulse 1.4s var(--cp-ease-io) infinite; } /* Interessenten-Kanban: Volumen, Ruhezeit, Drag-Feedback */ .cp-kb-meta { clear: both; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--cp-line-2); font-size: 11.5px; } .cp-kb-val { color: var(--cp-strong); font-variant-numeric: tabular-nums; font-weight: 500; } .cp-kb-idle { display: inline-flex; align-items: center; gap: 4px; color: var(--cp-dim); } .cp-kb-idle svg { width: 11px; height: 11px; } .cp-kb-idle.is-idle { color: var(--cp-warning); } .cp-kb-sum { float: right; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--cp-muted); } .cp-kb-sum b { color: var(--cp-strong); font-weight: 600; } html[data-theme]:not(#cp) body .kanban-item.sortable-chosen { box-shadow: 0 18px 40px -16px rgba(0,0,0,.8), 0 0 0 1px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .kanban-item.sortable-drag { transform: rotate(2.5deg) scale(1.03); opacity: .96 !important; } html[data-theme]:not(#cp) body .kanban-item.sortable-ghost { opacity: .35 !important; border: 1px dashed var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } .kanban-item.cp-kb-dropped { animation: cp-kb-drop .7s var(--cp-e); } @keyframes cp-kb-drop { 0% { box-shadow: 0 0 0 0 rgba(232,85,42,.55); } 100% { box-shadow: 0 0 0 12px rgba(232,85,42,0); } } @media (prefers-reduced-motion: reduce) { .cp-pl-stage, .cp-pl-bar span, .cp-pl-opp, .cp-hint, .cp-recent-row, .cp-assist, .cp-assist::before, .cp-assist-ico svg, .cp-step, .cp-chip, .cp-funnel-art path, .cp-funnel-art .dot, .cp-crm-empty > svg, .cp-ok-art, .cp-orbit i, .kanban-item.cp-kb-dropped { animation: none !important; } .cp-funnel-art path { stroke-dashoffset: 0; } } html[data-theme]:not(#cp) body .cp-crm-card .card-header .cp-crm-h-actions ~ .cp-card-tools { margin-left: 4px !important; } .cp-crm-empty.is-inline .cp-funnel-art { width: 120px; height: 90px; padding: 0; border: 0; background: none; animation: none; } /* Kanban: leere Phase */ html[data-theme]:not(#cp) body .kanban-item-list.cp-kb-isempty { position: relative; min-height: 150px; } .kanban-item-list.cp-kb-isempty::before { content: "Noch leer · Interessenten hierher ziehen"; position: absolute; inset: 8px; display: grid; place-items: center; padding: 14px; border: 1px dashed var(--cp-line-2); border-radius: 3px; font-size: 11.5px; color: var(--cp-dim); text-align: center; pointer-events: none; animation: cp-reveal var(--cp-dur-xl) var(--cp-e) both; } /* Speichern-Feedback: Häkchen in der RISE-Erfolgsmeldung, Schütteln bei Fehlern */ html[data-theme]:not(#cp) body .app-alert.alert-success .app-alert-message { position: relative; padding-left: 30px; } html[data-theme]:not(#cp) body .app-alert.alert-success .app-alert-message::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--cp-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; animation: cp-check-pop var(--cp-dur-xl) var(--cp-e) both; } @keyframes cp-check-pop { 0% { transform: scale(.3); opacity: 0; box-shadow: 0 0 0 0 rgba(63,185,132,.5); } 55% { transform: scale(1.18); opacity: 1; box-shadow: 0 0 0 6px rgba(63,185,132,.25); } 100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(63,185,132,0); } } html[data-theme]:not(#cp) body .app-alert.alert-danger { animation: cp-shake var(--cp-dur-l) var(--cp-e) both; } @keyframes cp-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .kanban-item-list.cp-kb-isempty::before, html[data-theme]:not(#cp) body .app-alert.alert-success .app-alert-message::before, html[data-theme]:not(#cp) body .app-alert.alert-danger { animation: none !important; } } /* --------------------------------------------------------------------------- 50. v4.7: Automatik-Leiste, Ansichten, Einführung, Tastatur-Fokus --------------------------------------------------------------------------- */ /* Automatische Wiedervorlage */ .cp-auto { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); transition: border-color var(--cp-dur-m) var(--cp-ease), background var(--cp-dur-m) var(--cp-ease), box-shadow var(--cp-dur-l) var(--cp-e); } .cp-auto.is-on { border-style: solid; border-color: rgba(232,85,42,.28); background: linear-gradient(90deg, rgba(232,85,42,.07), transparent 60%), var(--cp-surface-2); } .cp-auto.is-saved { box-shadow: 0 0 0 3px rgba(63,185,132,.25); } .cp-auto.is-saving { opacity: .7; } .cp-auto-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 3px; color: var(--cp-muted); background: var(--cp-hover); } .cp-auto.is-on .cp-auto-ico { color: var(--cp-rust-hi); background: var(--cp-rust-soft); } .cp-auto.is-on .cp-auto-ico svg { animation: cp-bolt 2.8s var(--cp-ease-io) infinite; } @keyframes cp-bolt { 0%, 86%, 100% { transform: none; filter: none; } 90% { transform: scale(1.18) rotate(-6deg); filter: drop-shadow(0 0 6px rgba(232,85,42,.8)); } } .cp-auto-ico svg { width: 15px; height: 15px; } .cp-auto-txt { flex: 1; min-width: 0; font-size: 12.5px; color: var(--cp-text); line-height: 1.45; } .cp-auto-txt b { color: var(--cp-strong); font-weight: 600; } .cp-auto-txt small { display: block; margin-top: 2px; font-size: 11px; color: var(--cp-dim); } html[data-theme]:not(#cp) body .cp-auto select { margin: 0 2px; padding: 1px 4px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface); color: var(--cp-strong); font: 600 12px var(--cp-font); cursor: pointer; } .cp-auto-state { padding: 3px 10px; border-radius: 3px; font-size: 11px; font-weight: 600; color: var(--cp-muted); background: var(--cp-hover); } .cp-auto.is-on .cp-auto-state { color: var(--cp-success); background: rgba(63,185,132,.12); } .cp-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--cp-muted); user-select: none; } .cp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cp-switch i { position: relative; width: 36px; height: 20px; border-radius: 3px; background: var(--cp-line-2); transition: background var(--cp-dur-m) var(--cp-ease); } .cp-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform var(--cp-dur-l) var(--cp-e); } .cp-switch input:checked + i { background: var(--cp-rust); } .cp-switch input:checked + i::after { transform: translateX(16px); } .cp-switch input:checked ~ span { color: var(--cp-strong); } .cp-switch input:focus-visible + i { box-shadow: 0 0 0 2px var(--cp-surface), 0 0 0 4px var(--cp-rust-hi); } /* Dashboard-Ansichten */ .cp-dash-views { position: relative; display: inline-flex; gap: 2px; padding: 3px; margin-left: auto; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface); } .cp-dash-bar .cp-dash-edit { margin-left: 8px; } html[data-theme]:not(#cp) body .cp-dash-views button { position: relative; z-index: 1; padding: 6px 11px; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; font: 600 10.5px/1 var(--cp-font); letter-spacing: .12em; text-transform: uppercase; transition: color var(--cp-dur-m) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-dash-views button:hover, html[data-theme]:not(#cp) body .cp-dash-views button.is-on { color: var(--cp-strong); } .cp-dash-views-pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 3px; background: var(--cp-surface-3); box-shadow: 0 0 0 1px var(--cp-line-2) inset; transition: transform var(--cp-dur-l) var(--cp-e), width var(--cp-dur-l) var(--cp-e); pointer-events: none; } html[data-theme="light"] .cp-dash-views-pill { background: #fff; box-shadow: 0 0 0 1px var(--cp-line-2) inset, 0 3px 10px -6px rgba(10,12,17,.35); } @media (max-width: 767px) { .cp-dash-views { order: 5; width: 100%; margin: 8px 0 0; overflow-x: auto; } } .cp-dash-grid.cp-view-switch > .cp-dash-item:not(.cp-hidden) { animation: cp-view-in var(--cp-dur-l) var(--cp-e) both; } .cp-dash-item.cp-reappear { animation: cp-view-in var(--cp-dur-xl) var(--cp-e) both; } @keyframes cp-view-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } /* Einführung (Spotlight) */ .cp-tour { position: fixed; inset: 0; z-index: 100000; opacity: 0; transition: opacity var(--cp-dur-m) var(--cp-ease); } .cp-tour.is-on { opacity: 1; } .cp-tour.is-out { opacity: 0; } .cp-tour-spot { position: fixed; left: 50%; top: 50%; width: 0; height: 0; border-radius: 3px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(3,4,7,.72), 0 0 0 1px rgba(232,85,42,.7), 0 0 44px 4px rgba(232,85,42,.35); transition: left var(--cp-dur-xl) var(--cp-e), top var(--cp-dur-xl) var(--cp-e), width var(--cp-dur-xl) var(--cp-e), height var(--cp-dur-xl) var(--cp-e); } html[data-theme="light"] .cp-tour-spot { box-shadow: 0 0 0 9999px rgba(10,12,17,.45), 0 0 0 1px rgba(192,67,28,.7), 0 0 40px 4px rgba(192,67,28,.25); } .cp-tour-spot::after { content: ""; position: absolute; inset: -6px; border-radius: 3px; border: 1px solid rgba(232,85,42,.5); animation: cp-tour-ring 2.4s var(--cp-e) infinite; } @keyframes cp-tour-ring { 0% { opacity: .9; transform: scale(.98); } 70%, 100% { opacity: 0; transform: scale(1.04); } } .cp-tour-card { position: fixed; width: 360px; max-width: calc(100vw - 32px); padding: 18px 18px 14px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); box-shadow: var(--cp-shadow-pop); outline: none; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity var(--cp-dur-m) var(--cp-ease), transform var(--cp-dur-l) var(--cp-e), top var(--cp-dur-xl) var(--cp-e), left var(--cp-dur-xl) var(--cp-e); } .cp-tour-card.is-in { opacity: 1; transform: none; } .cp-tour-prog { display: flex; gap: 4px; margin-bottom: 14px; } .cp-tour-prog i { flex: 1; height: 3px; border-radius: 3px; background: var(--cp-line-2); overflow: hidden; position: relative; } .cp-tour-prog i::after { content: ""; position: absolute; inset: 0; background: var(--cp-rust-hi); transform: scaleX(0); transform-origin: left; transition: transform var(--cp-dur-xl) var(--cp-e); } .cp-tour-prog i.is-on::after { transform: scaleX(1); } .cp-tour-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-rust-hi); } .cp-tour-kicker svg { width: 12px; height: 12px; animation: cp-spin 10s linear infinite; } html[data-theme]:not(#cp) body .cp-tour-card h3 { margin: 8px 0 6px !important; font: 500 18px/1.25 var(--cp-font) !important; color: var(--cp-strong) !important; letter-spacing: -.01em; } .cp-tour-card p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--cp-text); } .cp-tour-acts { display: flex; align-items: center; gap: 6px; } .cp-tour-acts > span { flex: 1; } html[data-theme]:not(#cp) body .cp-tour-acts [data-t="skip"] { padding: 6px 4px; border: 0; background: none; color: var(--cp-dim); font: 500 12px var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .cp-tour-acts [data-t="skip"]:hover { color: var(--cp-strong); } .cp-tour-acts [hidden] { display: none !important; } /* Tastatur: deutlicher Fokus, Werkzeuge auch per Tab erreichbar/sichtbar */ html[data-theme]:not(#cp) body :focus-visible { outline: 2px solid var(--cp-rust-hi) !important; outline-offset: 2px; } html[data-theme]:not(#cp) body .card-header:focus-within .cp-card-tools, html[data-theme]:not(#cp) body .cp-card-tools:focus-within { opacity: 1 !important; } html[data-theme]:not(#cp) body .cp-hint summary:focus-visible { outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .cp-tour, .cp-tour-spot, .cp-tour-card, .cp-tour-prog i::after, .cp-dash-views-pill { transition: none !important; } .cp-tour-spot::after, .cp-tour-kicker svg, .cp-auto.is-on .cp-auto-ico svg, .cp-dash-grid.cp-view-switch > .cp-dash-item, .cp-dash-item.cp-reappear { animation: none !important; } } /* --------------------------------------------------------------------------- 51. v4.8: Tabellen & Listen – Aktionen in einer Zeile, Datum ohne Umbruch, beschriftete Werkzeuge, Leerzustände, Kunden-/Interessenten-Status --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body table.dataTable td.option { white-space: nowrap !important; min-width: 100px; } html[data-theme]:not(#cp) body table.dataTable td.option > a { display: inline-grid !important; place-items: center; width: 30px; height: 30px; margin: 0 1px !important; padding: 0 !important; border-radius: 3px; color: var(--cp-muted) !important; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body table.dataTable td.option > a:hover { background: var(--cp-hover); color: var(--cp-strong) !important; transform: translateY(-1px); } html[data-theme]:not(#cp) body table.dataTable td.option > a.delete:hover { background: rgba(229,72,77,.12); color: var(--cp-danger) !important; } html[data-theme]:not(#cp) body table.dataTable td.option > a svg { width: 15px !important; height: 15px !important; } html[data-theme]:not(#cp) body table.dataTable td.cp-nowrap { white-space: nowrap !important; } .cp-btn-label { margin-left: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; } /* Leerzustand in allen Tabellen (Dashboard hat eine größere Variante) */ html[data-theme]:not(#cp) body table.dataTable td.dt-empty { padding: 30px 12px !important; text-align: center; vertical-align: middle; } html[data-theme]:not(#cp) body table.dataTable td.dt-empty::before { content: ""; display: block; width: 38px; height: 38px; margin: 0 auto 10px; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8552A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / 17px no-repeat, var(--cp-rust-soft); border: 1px solid var(--cp-rust-line); animation: cp-empty-float 4.2s var(--cp-ease-io) infinite; } /* Pipeline-Kennzahlen sind Links */ html[data-theme]:not(#cp) body a.cp-pl-kpi { text-decoration: none !important; color: inherit !important; transition: border-color var(--cp-dur-m) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e), background var(--cp-dur-m) var(--cp-ease); } html[data-theme]:not(#cp) body a.cp-pl-kpi:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); transform: translateY(-2px); } /* Kunden-/Interessentenliste: Status je Zeile */ .cp-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 11.5px; color: var(--cp-dim); } .cp-row-act { display: inline-flex; align-items: center; gap: 4px; } .cp-row-act svg { width: 11px; height: 11px; } .cp-row-act.is-idle { color: var(--cp-warning); } .cp-row-val { color: var(--cp-text); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-row-miss { padding: 0 7px; border: 1px solid rgba(108,166,217,.35); border-radius: 3px; background: rgba(108,166,217,.08); color: var(--cp-info); font: 500 11px/1.6 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .cp-row-miss:hover { background: rgba(108,166,217,.16); } .cp-row-quick { display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--cp-dur-s) var(--cp-ease); } tr:hover .cp-row-quick, .cp-row-quick:focus-within { opacity: 1; } @media (hover: none) { .cp-row-quick { opacity: 1; } } html[data-theme]:not(#cp) body .cp-row-quick button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp) body .cp-row-quick button:hover { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-row-quick svg { width: 13px; height: 13px; } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body table.dataTable td.dt-empty::before { animation: none; } } html[data-theme]:not(#cp) body .cp-dash-grid table.dataTable td.dt-empty::before { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8552A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 20px no-repeat, radial-gradient(circle at 30% 25%, rgba(232,85,42,.26), rgba(232,85,42,.05) 70%); box-shadow: 0 10px 30px -12px rgba(232,85,42,.45); } /* --------------------------------------------------------------------------- 52. Kundenseite: E-Mail-Historie & Aktivitäten im Premium-Design --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body #rst-client-activity-section, html[data-theme]:not(#cp) body #rst-client-emails-section { margin: 16px 0 !important; padding: 0 !important; overflow: hidden; background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow) !important; animation: cp-reveal var(--cp-dur-xl) var(--cp-e) both; } html[data-theme]:not(#cp) body .rst-act-header, html[data-theme]:not(#cp) body .rst-client-emails-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 14px 16px !important; border-bottom: 1px solid var(--cp-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .rst-act-header h3, html[data-theme]:not(#cp) body .rst-client-emails-header h3, html[data-theme]:not(#cp) body .rst-client-emails-header h4 { margin: 0 !important; padding: 0 !important; font: 500 11px/1.4 var(--cp-font) !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-act-header h3::before { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--cp-rust-hi) !important; box-shadow: 0 0 10px rgba(232,85,42,.8); } /* Filter als Segment */ html[data-theme]:not(#cp) body .rst-act-header-actions { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); } html[data-theme]:not(#cp) body .rst-act-filter { padding: 6px 10px !important; border: 0 !important; border-radius: 3px !important; background: transparent !important; box-shadow: none !important; font: 600 10.5px/1 var(--cp-font) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted) !important; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .rst-act-filter:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-act-filter.active { background: var(--cp-surface-3) !important; color: var(--cp-strong) !important; box-shadow: 0 0 0 1px var(--cp-line-2) inset !important; } /* Eingabe */ html[data-theme]:not(#cp) body .rst-act-composer { margin: 0 !important; padding: 12px 16px 14px !important; border: 0 !important; border-bottom: 1px solid var(--cp-line) !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .rst-act-tabs { display: flex; gap: 2px; margin-bottom: 10px !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .rst-act-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font: 600 11px/1 var(--cp-font) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .rst-act-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--cp-rust-hi); transform: scaleX(0); transition: transform var(--cp-dur-l) var(--cp-e); } html[data-theme]:not(#cp) body .rst-act-tab.active { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-act-tab.active::after { transform: scaleX(1); } /* Linien-Icons statt Emojis */ html[data-theme]:not(#cp) body .rst-act-tab-icon { width: 14px; height: 14px; font-size: 0 !important; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .rst-act-tab[data-tab="note"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); } .rst-act-tab[data-tab="call"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); } .rst-act-tab[data-tab="meeting"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); } .rst-act-tab[data-tab="task"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* Buttons einheitlich */ html[data-theme]:not(#cp) body .rst-act-btn:not(.secondary), html[data-theme]:not(#cp) body .rst-email-btn-primary { background: var(--cp-rust) !important; border: 1px solid var(--cp-rust) !important; color: #fff !important; border-radius: 3px !important; box-shadow: none !important; font: 600 11px/1 var(--cp-font) !important; letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px !important; transition: background var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e) !important; } html[data-theme]:not(#cp) body .rst-act-btn:not(.secondary):hover, html[data-theme]:not(#cp) body .rst-email-btn-primary:hover { background: var(--cp-rust-hi) !important; transform: translateY(-1px); } html[data-theme]:not(#cp) body .rst-act-btn.secondary, html[data-theme]:not(#cp) body .rst-email-btn-secondary { background: transparent !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; border-radius: 3px !important; box-shadow: none !important; font: 600 11px/1 var(--cp-font) !important; letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px !important; } html[data-theme]:not(#cp) body .rst-act-btn.secondary:hover, html[data-theme]:not(#cp) body .rst-email-btn-secondary:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } /* Verlauf */ html[data-theme]:not(#cp) body .rst-act-feed { padding: 6px 16px 14px !important; } html[data-theme]:not(#cp) body .rst-act-bucket-header { display: flex !important; align-items: center; gap: 10px; margin: 12px 0 6px !important; padding: 0 !important; border: 0 !important; font: 600 10px/1 var(--cp-font) !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .rst-act-bucket-header::after { content: ""; flex: 1; height: 1px; background: var(--cp-line); } html[data-theme]:not(#cp) body .rst-act-item, html[data-theme]:not(#cp) body .rst-client-email-item { border: 0 !important; border-top: 1px solid var(--cp-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 12px 6px !important; transition: background var(--cp-dur-s) var(--cp-ease); animation: cp-row var(--cp-dur-l) var(--cp-e) both; } html[data-theme]:not(#cp) body .rst-act-item:hover, html[data-theme]:not(#cp) body .rst-client-email-item:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .rst-act-type-pill { background: var(--cp-hover) !important; color: var(--cp-muted) !important; border: 0 !important; border-radius: 3px !important; font: 600 9.5px/1.6 var(--cp-font) !important; letter-spacing: .1em; } html[data-theme]:not(#cp) body .rst-act-subject, html[data-theme]:not(#cp) body .rst-email-subject { color: var(--cp-strong) !important; font-weight: 500 !important; } html[data-theme]:not(#cp) body .rst-act-time, html[data-theme]:not(#cp) body .rst-email-time { color: var(--cp-dim) !important; font-size: 11px !important; } /* nur erledigte Aufgaben durchstreichen – E-Mails nicht */ html[data-theme]:not(#cp) body .rst-act-item.rst-act-email-item.done .rst-act-subject { text-decoration: none !important; } html[data-theme]:not(#cp) body .rst-act-item.rst-act-email-item.done .rst-act-icon { opacity: 1 !important; } html[data-theme]:not(#cp) body .rst-client-contact-chip { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line) !important; color: var(--cp-text) !important; border-radius: 999px !important; } html[data-theme]:not(#cp) body .rst-client-contact-email { color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .rst-client-emails-contacts { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--cp-line) !important; padding: 10px 16px !important; margin: 0 !important; border-radius: 0 !important; } html[data-theme]:not(#cp) body .rst-client-emails-list { padding: 4px 16px 10px !important; } /* --------------------------------------------------------------------------- 53. Gmail: Status im E-Mail-Verlauf --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .rst-gm-status { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--cp-dim); letter-spacing: 0; text-transform: none; } html[data-theme]:not(#cp) body .rst-gm-status.is-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cp-success); box-shadow: 0 0 8px rgba(63,185,132,.7); animation: cp-pulse 2.6s var(--cp-ease-io) infinite; } html[data-theme]:not(#cp) body .rst-gm-status.is-warn { color: var(--cp-warning); } html[data-theme]:not(#cp) body .rst-gm-status.is-warn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cp-warning); } html[data-theme]:not(#cp) body .rst-gm-connect { padding: 3px 10px; border: 1px solid var(--cp-rust-line); border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font: 600 11px/1.4 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .rst-client-emails-actions { margin-left: auto; display: inline-flex; gap: 6px; } html[data-theme]:not(#cp) body .rst-email-btn-secondary.is-busy { position: relative; color: transparent !important; } html[data-theme]:not(#cp) body .rst-email-btn-secondary.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--cp-line-2); border-top-color: var(--cp-rust-hi); animation: cp-spin .8s linear infinite; } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .rst-gm-status.is-ok::before { animation: none; } } /* --------------------------------------------------------------------------- 54. Gmail-Add-on: Schlüssel-Dialog --------------------------------------------------------------------------- */ .cp-addon { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 16px; background: rgba(3,4,7,.62); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--cp-dur-m) var(--cp-ease); } .cp-addon.is-on { opacity: 1; } .cp-addon-card { position: relative; width: 520px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 22px 22px 18px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); box-shadow: var(--cp-shadow-pop); outline: none; transform: translateY(10px) scale(.98); transition: transform var(--cp-dur-l) var(--cp-e); } .cp-addon.is-on .cp-addon-card { transform: none; } html[data-theme]:not(#cp) body .cp-addon-card h3 { margin: 8px 0 8px !important; font: 500 19px/1.25 var(--cp-font) !important; color: var(--cp-strong) !important; } .cp-addon-card > p { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--cp-text); } html[data-theme]:not(#cp) body .cp-addon-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp) body .cp-addon-x:hover { background: var(--cp-hover); color: var(--cp-strong); } .cp-addon-x svg { width: 16px; height: 16px; } .cp-addon-step { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 8px; font-size: 12.5px; color: var(--cp-text); line-height: 1.5; } html[data-theme]:not(#cp) body .cp-addon-step b { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-size: 11px; } .cp-addon-new { margin: 0 0 6px 32px; } .cp-addon-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px 32px; padding: 10px; border: 1px dashed var(--cp-rust-line); border-radius: 3px; background: var(--cp-rust-soft); } .cp-addon-key.is-in { animation: cp-view-in var(--cp-dur-l) var(--cp-e) both; } .cp-addon-key code { flex: 1; min-width: 0; font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cp-strong); word-break: break-all; background: none; } .cp-addon-key small { flex-basis: 100%; font-size: 11px; color: var(--cp-muted); } .cp-addon-list { margin-top: 14px; } .cp-addon-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cp-line); } .cp-addon-row > span { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--cp-text); } .cp-addon-row small { font-size: 11px; color: var(--cp-dim); } .cp-addon-row .cp-crm-btn { padding: 6px 10px; font-size: 10px; } .cp-addon-empty { padding: 8px 0; font-size: 12px; color: var(--cp-dim); } @media (prefers-reduced-motion: reduce) { .cp-addon, .cp-addon-card { transition: none; } .cp-addon-key.is-in { animation: none; } } /* --------------------------------------------------------------------------- 55. Verlauf v2 – ein Aktivitätsverlauf für Kunden & Interessenten (RISE-Notizen, Aufgaben, Termine, Finanzen, Projekte, Tickets, E-Mails) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body #rst-client-activity-section { scroll-margin-top: 84px; font-family: var(--cp-font) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body #rst-client-activity-section.cp-flash { animation: cp-tl-flash 1.4s var(--cp-e) 1; } @keyframes cp-tl-flash { 0% { box-shadow: 0 0 0 0 rgba(232,85,42,.55), var(--cp-shadow); } 60% { box-shadow: 0 0 0 6px rgba(232,85,42,0), var(--cp-shadow); } 100% { box-shadow: var(--cp-shadow); } } html[data-theme]:not(#cp) body .rst-act-header { justify-content: flex-start !important; } html[data-theme]:not(#cp) body .rst-act-header h3 { display: inline-flex !important; align-items: center; gap: 9px; } html[data-theme]:not(#cp) body .rst-act-header h3::before { content: "" !important; display: inline-block; } html[data-theme]:not(#cp) body .rst-act-sub { color: var(--cp-dim); font-size: 12px; } html[data-theme]:not(#cp) body .rst-act-total { margin-left: auto; color: var(--cp-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; } /* Filter-Chips mit Zählern */ html[data-theme]:not(#cp) body .rst-act-filters { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--cp-line); overflow-x: auto; scrollbar-width: none; } html[data-theme]:not(#cp) body .rst-act-filters::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp) body .rst-act-filters:empty { display: none; } html[data-theme]:not(#cp) body .rst-act-fchip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--cp-line); border-radius: 999px; background: transparent; color: var(--cp-muted); font: 500 12px/1 var(--cp-font); cursor: pointer; transition: border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body .rst-act-fchip b { min-width: 18px; padding: 2px 5px; border-radius: 3px; background: var(--cp-hover); color: var(--cp-text); font-size: 10.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .rst-act-fchip:hover { color: var(--cp-strong); border-color: var(--cp-line-2); transform: translateY(-1px); } html[data-theme]:not(#cp) body .rst-act-fchip.active { color: var(--cp-strong); border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp) body .rst-act-fchip.active b { background: var(--cp-rust); color: #fff; } /* Schnellerfassung */ html[data-theme]:not(#cp) body .rst-act-form { padding: 0 !important; } html[data-theme]:not(#cp) body .rst-act-form-row { display: flex !important; gap: 8px; margin-bottom: 8px !important; } html[data-theme]:not(#cp) body .rst-act-form input[type="text"], html[data-theme]:not(#cp) body .rst-act-form input[type="datetime-local"], html[data-theme]:not(#cp) body .rst-act-form textarea { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line) !important; border-radius: 3px !important; color: var(--cp-strong) !important; font: 400 13.5px/1.5 var(--cp-font) !important; padding: 9px 12px !important; box-shadow: none !important; transition: border-color var(--cp-dur-s) var(--cp-ease), box-shadow var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .rst-act-form textarea { width: 100%; min-height: 64px; resize: vertical; } html[data-theme]:not(#cp) body .rst-act-form input:focus, html[data-theme]:not(#cp) body .rst-act-form textarea:focus { border-color: var(--cp-rust-line) !important; box-shadow: 0 0 0 3px var(--cp-rust-soft) !important; outline: none !important; } html[data-theme]:not(#cp) body .rst-act-subject-input { flex: 1 1 auto; } html[data-theme]:not(#cp) body .rst-act-when { position: relative; flex: 0 0 216px; margin: 0; } html[data-theme]:not(#cp) body .rst-act-when[hidden] { display: none !important; } html[data-theme]:not(#cp) body .rst-act-when span { position: absolute; top: -7px; left: 9px; padding: 0 4px; background: var(--cp-surface); color: var(--cp-dim); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; z-index: 1; } html[data-theme]:not(#cp) body .rst-act-when input { width: 100%; color-scheme: dark; } html[data-theme="light"]:not(#cp) body .rst-act-when input { color-scheme: light; } html[data-theme]:not(#cp) body .rst-act-form-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; } html[data-theme]:not(#cp) body .rst-act-hint { color: var(--cp-dim); font-size: 11.5px; } html[data-theme]:not(#cp) body .rst-act-status { margin-left: auto; color: var(--cp-warning); font-size: 12px; } /* Zeitleiste */ html[data-theme]:not(#cp) body .rst-act-feed { position: relative; padding: 4px 16px 16px !important; } html[data-theme]:not(#cp) body .rst-act-bucket { position: relative; } html[data-theme]:not(#cp) body .rst-act-bucket-header span { order: 2; padding: 1px 6px; border-radius: 3px; background: var(--cp-hover); color: var(--cp-muted); letter-spacing: 0; font-size: 10px; } html[data-theme]:not(#cp) body .rst-act-bucket-header::after { order: 3; } html[data-theme]:not(#cp) body .rst-act-bucket.is-planned .rst-act-bucket-header { color: var(--cp-warning) !important; } html[data-theme]:not(#cp) body .rst-act-item { position: relative; display: grid !important; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 8px !important; border-top: 0 !important; border-bottom: 0 !important; border-radius: 3px !important; animation: cp-tl-in var(--cp-dur-xl) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 28ms); } @keyframes cp-tl-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } /* senkrechte Linie zwischen den Symbolen */ html[data-theme]:not(#cp) body .rst-act-item::before { content: ""; position: absolute; left: 23px; top: 44px; bottom: -11px; width: 1px; background: linear-gradient(var(--cp-line-2), var(--cp-line)); } html[data-theme]:not(#cp) body .rst-act-bucket .rst-act-item:last-child::before { display: none; } html[data-theme]:not(#cp) body .rst-act-icon { position: relative; z-index: 1; width: 32px !important; height: 32px !important; margin: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center; font-size: 0 !important; background: var(--tone-bg, var(--cp-hover)) !important; color: var(--tone, var(--cp-muted)) !important; box-shadow: 0 0 0 4px var(--cp-surface), inset 0 0 0 1px var(--tone-line, var(--cp-line)) !important; transition: transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body .rst-act-item:hover .rst-act-icon { transform: scale(1.08); } .rst-act-icon.t-note, .rst-act-icon.t-other { --tone: #E2B45A; --tone-bg: rgba(226,180,90,.12); --tone-line: rgba(226,180,90,.3); } .rst-act-icon.t-call { --tone: #3FB984; --tone-bg: rgba(63,185,132,.12); --tone-line: rgba(63,185,132,.3); } .rst-act-icon.t-meeting, .rst-act-icon.t-reminder { --tone: #6A9CFF; --tone-bg: rgba(106,156,255,.12); --tone-line: rgba(106,156,255,.3); } .rst-act-icon.t-task { --tone: #A98BFF; --tone-bg: rgba(169,139,255,.12); --tone-line: rgba(169,139,255,.3); } .rst-act-icon.t-email { --tone: #E8552A; --tone-bg: rgba(232,85,42,.12); --tone-line: rgba(232,85,42,.32); } .rst-act-icon.t-email.d-outgoing { --tone: #F08A63; } .rst-act-icon.t-estimate, .rst-act-icon.t-proposal, .rst-act-icon.t-contract { --tone: #4FC6C2; --tone-bg: rgba(79,198,194,.12); --tone-line: rgba(79,198,194,.3); } .rst-act-icon.t-invoice, .rst-act-icon.t-payment { --tone: #3FB984; --tone-bg: rgba(63,185,132,.1); --tone-line: rgba(63,185,132,.28); } .rst-act-icon.t-project { --tone: #8FA3BF; --tone-bg: rgba(143,163,191,.12); --tone-line: rgba(143,163,191,.3); } .rst-act-icon.t-ticket { --tone: #E57399; --tone-bg: rgba(229,115,153,.12); --tone-line: rgba(229,115,153,.3); } .rst-act-icon.t-stage { --tone: var(--cp-rust-hi); --tone-bg: var(--cp-rust-soft); --tone-line: var(--cp-rust-line); } /* v5.31 Phasenwechsel */ html[data-theme]:not(#cp) body .rst-act-item.is-future .rst-act-icon { box-shadow: 0 0 0 4px var(--cp-surface), inset 0 0 0 1px var(--tone-line, var(--cp-line)), 0 0 14px -2px var(--tone, transparent) !important; } html[data-theme]:not(#cp) body .rst-act-row1 { display: flex !important; align-items: baseline; gap: 10px; margin: 0 0 3px !important; } html[data-theme]:not(#cp) body .rst-act-subject { font: 500 13.5px/1.35 var(--cp-font) !important; white-space: normal !important; overflow: visible !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } html[data-theme]:not(#cp) body .rst-act-amount { flex: none; color: var(--cp-strong); font: 600 12.5px/1 var(--cp-font); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .rst-act-time { flex: none; margin-left: auto; white-space: nowrap; } html[data-theme]:not(#cp) body .rst-act-time.future { color: var(--cp-warning) !important; font-weight: 600; } html[data-theme]:not(#cp) body .rst-act-row2 { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px !important; color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .rst-act-meta { margin: 0 !important; font-size: 12px !important; color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .rst-act-state { padding: 2px 7px; border-radius: 3px; font: 600 10px/1.5 var(--cp-font); letter-spacing: .04em; } html[data-theme]:not(#cp) body .rst-act-state.s-ok { background: rgba(63,185,132,.14); color: var(--cp-success); } html[data-theme]:not(#cp) body .rst-act-state.s-warn { background: rgba(240,170,60,.14); color: var(--cp-warning); } html[data-theme]:not(#cp) body .rst-act-state.s-bad { background: rgba(229,72,77,.14); color: var(--cp-danger); } html[data-theme]:not(#cp) body .rst-act-state.s-info { background: var(--cp-hover); color: var(--cp-muted); } html[data-theme]:not(#cp) body .rst-act-notes { margin-top: 6px !important; color: var(--cp-text) !important; font-size: 12.5px !important; line-height: 1.55 !important; white-space: pre-line !important; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; border-radius: 3px; outline: none; } html[data-theme]:not(#cp) body .rst-act-notes.is-open { display: block; -webkit-line-clamp: unset; } html[data-theme]:not(#cp) body .rst-act-notes:focus-visible { box-shadow: 0 0 0 2px var(--cp-rust-line); } html[data-theme]:not(#cp) body .rst-act-item.done .rst-act-subject { text-decoration: none !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .rst-act-item.done .rst-act-icon { opacity: .75; } /* Aktionen: bei Hover/Fokus, auf Touch-Geräten immer */ html[data-theme]:not(#cp) body .rst-act-actions { display: flex !important; gap: 4px; opacity: 0; transform: translateX(4px); transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e) !important; } html[data-theme]:not(#cp) body .rst-act-item:hover .rst-act-actions, html[data-theme]:not(#cp) body .rst-act-item:focus-within .rst-act-actions { opacity: 1; transform: none; } @media (hover: none) { html[data-theme]:not(#cp) body .rst-act-actions { opacity: 1; transform: none; } } html[data-theme]:not(#cp) body .rst-act-actions > a, html[data-theme]:not(#cp) body .rst-act-actions > button { all: unset; box-sizing: border-box; display: inline-flex !important; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--cp-line) !important; border-radius: 3px; color: var(--cp-muted) !important; font: 600 11px/1 var(--cp-font); cursor: pointer; text-decoration: none !important; transition: border-color var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .rst-act-actions > a:hover, html[data-theme]:not(#cp) body .rst-act-actions > button:hover { color: var(--cp-strong) !important; border-color: var(--cp-line-2) !important; background: var(--cp-hover); } html[data-theme]:not(#cp) body .rst-act-actions > button.is-danger:hover { color: var(--cp-danger) !important; border-color: rgba(229,72,77,.4) !important; } html[data-theme]:not(#cp) body .rst-act-actions > :focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } /* Neu gespeichert / entfernt */ html[data-theme]:not(#cp) body .rst-act-item.is-new { animation: cp-tl-in var(--cp-dur-xl) var(--cp-e) both, cp-tl-new 2.4s var(--cp-e) .2s 1; } @keyframes cp-tl-new { 0% { background: rgba(232,85,42,.18); box-shadow: inset 3px 0 0 var(--cp-rust-hi); } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } } html[data-theme]:not(#cp) body .rst-act-item.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity var(--cp-dur-m) var(--cp-ease), transform var(--cp-dur-m) var(--cp-ease); } /* Mehr / leer / laden */ html[data-theme]:not(#cp) body .rst-act-more { display: block; width: 100%; margin: 10px 0 0; padding: 10px; border: 1px dashed var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-muted); font: 600 11.5px/1 var(--cp-font); letter-spacing: .04em; cursor: pointer; transition: color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .rst-act-more:hover { color: var(--cp-strong); border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp) body .rst-act-empty .rst-act-more { display: inline-block; width: auto; margin: 0 0 0 8px; padding: 6px 10px; } html[data-theme]:not(#cp) body .rst-act-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 16px !important; text-align: center; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .rst-act-empty.is-error { display: block; color: var(--cp-warning) !important; } html[data-theme]:not(#cp) body .rst-act-empty b { color: var(--cp-strong); font-weight: 500; font-size: 14px; } html[data-theme]:not(#cp) body .rst-act-empty small { max-width: 420px; color: var(--cp-dim); font-size: 12.5px; line-height: 1.5; } html[data-theme]:not(#cp) body .rst-act-empty-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--cp-rust-hi); background: radial-gradient(circle at 30% 25%, rgba(232,85,42,.24), rgba(232,85,42,.04) 70%); animation: cp-float 4s var(--cp-ease-io) infinite; } @keyframes cp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } html[data-theme]:not(#cp) body .rst-act-skel { display: grid; gap: 12px; padding: 14px 0; } html[data-theme]:not(#cp) body .rst-act-skel i { display: block; height: 42px; border-radius: 3px; background: linear-gradient(90deg, var(--cp-surface-2) 25%, var(--cp-surface-3) 50%, var(--cp-surface-2) 75%); background-size: 200% 100%; animation: cp-shimmer 1.4s linear infinite; } html[data-theme]:not(#cp) body .rst-act-skel i:nth-child(2) { width: 86%; } html[data-theme]:not(#cp) body .rst-act-skel i:nth-child(3) { width: 92%; } html[data-theme]:not(#cp) body .rst-act-skel i:nth-child(4) { width: 70%; } @media (max-width: 640px) { html[data-theme]:not(#cp) body .rst-act-form-row { flex-direction: column; } html[data-theme]:not(#cp) body .rst-act-when { flex-basis: auto; } html[data-theme]:not(#cp) body .rst-act-item { grid-template-columns: 28px minmax(0, 1fr); } html[data-theme]:not(#cp) body .rst-act-actions { grid-column: 2; } html[data-theme]:not(#cp) body .rst-act-sub { display: none; } html[data-theme]:not(#cp) body .rst-act-hint { display: none; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .rst-act-item, html[data-theme]:not(#cp) body .rst-act-empty-ico, html[data-theme]:not(#cp) body #rst-client-activity-section.cp-flash { animation: none !important; } } /* --------------------------------------------------------------------------- 56. Tabellen: Ladezustand als Skelett statt „Kein Eintrag gefunden" --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body table.dataTable.cp-dt-loading td.dt-empty { color: transparent !important; padding: 12px !important; font-size: 0 !important; } html[data-theme]:not(#cp) body table.dataTable.cp-dt-loading td.dt-empty::before { content: "" !important; display: block !important; width: 100% !important; height: 118px !important; margin: 0 !important; border-radius: 3px !important; background: linear-gradient(90deg, var(--cp-surface-2) 25%, var(--cp-surface-3) 50%, var(--cp-surface-2) 75%) 0 0 / 200% 100% !important; -webkit-mask: repeating-linear-gradient(to bottom, #000 0 26px, transparent 26px 38px) !important; mask: repeating-linear-gradient(to bottom, #000 0 26px, transparent 26px 38px) !important; box-shadow: none !important; opacity: 1 !important; animation: cp-shimmer 1.3s linear infinite !important; } html[data-theme]:not(#cp) body table.dataTable.cp-dt-loading td.dt-empty::after { display: none !important; } html[data-theme]:not(#cp) body .cp-dash-grid table.dataTable.cp-dt-loading td.dt-empty::before { height: 80px !important; } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body table.dataTable.cp-dt-loading td.dt-empty::before { animation: none !important; } } /* --------------------------------------------------------------------------- 57. E-Mail-Verlauf v2 – Unterhaltungen, saubere Vorschau, Leseansicht --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .cp-mtool { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body .cp-mseg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); } html[data-theme]:not(#cp) body .cp-mseg button { padding: 6px 11px; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); font: 500 12px/1 var(--cp-font); cursor: pointer; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-mseg button:hover { color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-mseg button.active { background: var(--cp-surface-3); color: var(--cp-strong); box-shadow: 0 0 0 1px var(--cp-line-2) inset; } html[data-theme]:not(#cp) body .cp-msearch { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 240px; min-width: 160px; margin: 0; padding: 0 10px; height: 32px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-dim); transition: border-color var(--cp-dur-s) var(--cp-ease), box-shadow var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-msearch:focus-within { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp) body .cp-msearch input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; color: var(--cp-strong); font: 400 13px/1 var(--cp-font); padding: 0 !important; } html[data-theme]:not(#cp) body .cp-mtool .cp-mcontacts { display: flex; gap: 6px; margin: 0 0 0 auto !important; padding: 0 !important; border: 0 !important; background: none !important; overflow-x: auto; scrollbar-width: none; } html[data-theme]:not(#cp) body .cp-mchip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border: 1px solid var(--cp-line); border-radius: 999px; background: transparent; color: var(--cp-text); font: 500 12px/1 var(--cp-font); cursor: pointer; transition: border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-mchip:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } /* Avatare */ html[data-theme]:not(#cp) body .cp-mav { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--h, 20) 38% 26%); color: hsl(var(--h, 20) 70% 86%); font: 600 12.5px/1 var(--cp-font); letter-spacing: .02em; box-shadow: inset 0 0 0 1px hsl(var(--h, 20) 40% 36% / .6); } html[data-theme="light"]:not(#cp) body .cp-mav { background: hsl(var(--h, 20) 70% 90%); color: hsl(var(--h, 20) 45% 30%); box-shadow: none; } html[data-theme]:not(#cp) body .cp-mav.is-sm { width: 32px; height: 32px; font-size: 11px; } html[data-theme]:not(#cp) body .cp-mav.is-xs { width: 22px; height: 22px; font-size: 9px; } /* Liste der Unterhaltungen */ html[data-theme]:not(#cp) body #rst-client-emails-section .rst-client-emails-list { padding: 6px 10px 12px !important; } html[data-theme]:not(#cp) body .cp-mconv { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 10px; border-radius: 3px; cursor: pointer; position: relative; transition: background var(--cp-dur-s) var(--cp-ease); animation: cp-tl-in var(--cp-dur-l) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 24ms); } html[data-theme]:not(#cp) body .cp-mconv + .cp-mconv::before { content: ""; position: absolute; left: 60px; right: 10px; top: 0; height: 1px; background: var(--cp-line); } html[data-theme]:not(#cp) body button.cp-mconv { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; color: inherit !important; text-align: left; } html[data-theme]:not(#cp) body button.cp-mconv:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .cp-mconv:hover::before, html[data-theme]:not(#cp) body .cp-mconv:hover + .cp-mconv::before { opacity: 0; } html[data-theme]:not(#cp) body .cp-mconv:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: -2px; } html[data-theme]:not(#cp) body .cp-mconv-main { display: grid; gap: 2px; min-width: 0; } html[data-theme]:not(#cp) body .cp-mconv-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; } html[data-theme]:not(#cp) body .cp-mconv-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-strong); font: 600 13.5px/1.35 var(--cp-font); } html[data-theme]:not(#cp) body .cp-mcount { flex: none; padding: 1px 6px; border-radius: 3px; background: var(--cp-hover); color: var(--cp-muted); font: 600 10.5px/1.5 var(--cp-font); } html[data-theme]:not(#cp) body .cp-mconv-top time { flex: none; margin-left: auto; color: var(--cp-dim); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-mconv-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-text); font: 500 13px/1.4 var(--cp-font); } html[data-theme]:not(#cp) body .cp-mconv-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--cp-dim); font-size: 12.5px; line-height: 1.5; } html[data-theme]:not(#cp) body .cp-mconv-snip em { font-style: normal; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-mdir { display: inline-block; width: 12px; height: 12px; margin: 0 5px -1px 0; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } .cp-mdir.in { color: var(--cp-success); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17M16 17H7V8'/%3E%3C/svg%3E"); } .cp-mdir.out { color: var(--cp-rust-hi); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); } html[data-theme]:not(#cp) body .cp-mconv-side { align-self: center; } html[data-theme]:not(#cp) body .cp-mtag { display: inline-block; padding: 2px 8px; border-radius: 3px; background: var(--cp-hover); color: var(--cp-muted); font: 500 10.5px/1.6 var(--cp-font); white-space: nowrap; } html[data-theme]:not(#cp) body .cp-mtag.is-ok { background: rgba(63,185,132,.14); color: var(--cp-success); } html[data-theme]:not(#cp) body .cp-mmore { display: block; width: 100%; margin: 8px 0 0; padding: 10px; border: 1px dashed var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-muted); font: 600 11.5px/1 var(--cp-font); cursor: pointer; transition: color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-mmore:hover { color: var(--cp-strong); border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp) body .cp-mempty { display: grid; justify-items: center; gap: 6px; padding: 30px 16px; text-align: center; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-mempty b { color: var(--cp-strong); font-weight: 500; } html[data-theme]:not(#cp) body .cp-mempty small { max-width: 440px; color: var(--cp-dim); font-size: 12.5px; line-height: 1.5; } html[data-theme]:not(#cp) body .cp-mempty.is-error { display: block; color: var(--cp-warning); } html[data-theme]:not(#cp) body .cp-mempty-ico { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: var(--cp-rust-hi); background: radial-gradient(circle at 30% 25%, rgba(232,85,42,.24), rgba(232,85,42,.04) 70%); animation: cp-float 4s var(--cp-ease-io) infinite; } html[data-theme]:not(#cp) body .cp-mlink { border: 0; background: none; color: var(--cp-rust-hi); font: inherit; text-decoration: underline; cursor: pointer; } html[data-theme]:not(#cp) body .cp-mskel { display: grid; gap: 10px; padding: 10px 6px; } html[data-theme]:not(#cp) body .cp-mskel i { display: block; height: 52px; border-radius: 3px; background: linear-gradient(90deg, var(--cp-surface-2) 25%, var(--cp-surface-3) 50%, var(--cp-surface-2) 75%) 0 0 / 200% 100%; animation: cp-shimmer 1.3s linear infinite; } html[data-theme]:not(#cp) body .cp-mskel.is-body i { height: 18px; } html[data-theme]:not(#cp) body .cp-mskel.is-body i:nth-child(2) { width: 88%; } html[data-theme]:not(#cp) body .cp-mskel.is-body i:nth-child(3) { width: 64%; } /* Leseansicht (Unterhaltung) */ html[data-theme]:not(#cp) body .cp-mdrawer { position: fixed; inset: 0; z-index: 1060; background: rgba(3,4,7,.5); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--cp-dur-m) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-mdrawer.is-on { opacity: 1; } html[data-theme]:not(#cp) body .cp-mdrawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(900px, 100%); display: flex; flex-direction: column; outline: none; background: var(--cp-surface); border-left: 1px solid var(--cp-line); box-shadow: -30px 0 60px -20px rgba(0,0,0,.55); transform: translateX(28px); transition: transform var(--cp-dur-l) var(--cp-e); } html[data-theme]:not(#cp) body .cp-mdrawer.is-on .cp-mdrawer-panel { transform: none; } html[data-theme]:not(#cp) body .cp-md-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px 16px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body .cp-md-title { flex: 1; min-width: 0; display: grid; gap: 4px; } html[data-theme]:not(#cp) body .cp-md-title h2 { margin: 0; color: var(--cp-strong); font: 500 18px/1.3 var(--cp-font); letter-spacing: -.01em; } html[data-theme]:not(#cp) body .cp-md-title span { color: var(--cp-dim); font-size: 12.5px; } html[data-theme]:not(#cp) body .cp-md-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--cp-line); border-radius: 50%; background: transparent; color: var(--cp-muted); cursor: pointer; transition: color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body .cp-md-x:hover { color: var(--cp-strong); border-color: var(--cp-line-2); transform: rotate(90deg); } html[data-theme]:not(#cp) body .cp-md-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 18px 18px; display: block; overscroll-behavior: contain; } html[data-theme]:not(#cp) body .cp-md-body > .cp-msg + .cp-msg { margin-top: 10px; } html[data-theme]:not(#cp) body .cp-msg:not(#page-content) { flex: none; min-height: min-content; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); overflow: hidden; animation: cp-tl-in var(--cp-dur-l) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 30ms); } html[data-theme]:not(#cp) body .cp-msg.is-open:not(#page-content) { border-color: var(--cp-line-2); } html[data-theme]:not(#cp) body .cp-msg-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; outline: none; } html[data-theme]:not(#cp) body .cp-msg-head:focus-visible { box-shadow: inset 0 0 0 2px var(--cp-rust-line); } html[data-theme]:not(#cp) body .cp-msg-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-text); font-size: 13px; } html[data-theme]:not(#cp) body .cp-msg-who b { color: var(--cp-strong); font-weight: 600; } html[data-theme]:not(#cp) body .cp-msg-addr { color: var(--cp-dim); font-size: 12px; } html[data-theme]:not(#cp) body .cp-msg-head time { flex: none; color: var(--cp-dim); font-size: 11.5px; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-msg-snip { padding: 0 14px 12px 56px; margin-top: -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-dim); font-size: 12.5px; } html[data-theme]:not(#cp) body .cp-msg.is-open .cp-msg-snip { display: none; } html[data-theme]:not(#cp) body .cp-msg-body { display: none; padding: 0 12px 12px; } html[data-theme]:not(#cp) body .cp-msg.is-open .cp-msg-body { display: block; animation: cp-row var(--cp-dur-m) var(--cp-e) both; } html[data-theme]:not(#cp) body .cp-mpaper { border-radius: 3px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -18px rgba(0,0,0,.6); } html[data-theme]:not(#cp) body .cp-mframe { display: block; width: 100%; height: 120px; border: 0; background: #fff; transition: none !important; } html[data-theme]:not(#cp) body .cp-mtools { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp) body .cp-mtools:not(:has(button:not([hidden]))) { display: none; } html[data-theme]:not(#cp) body .cp-mtxt { margin: 8px 2px 0; padding: 4px 10px; border: 1px solid var(--cp-line); border-radius: 3px; background: transparent; color: var(--cp-muted); font: 500 11.5px/1.4 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .cp-mtxt:hover { color: var(--cp-strong); border-color: var(--cp-line-2); } html[data-theme]:not(#cp) body .cp-md-acts { flex: none; display: flex; align-items: center; gap: 8px; } html[data-theme]:not(#cp) body .cp-md-btn { height: 34px; padding: 0 12px; border: 1px solid var(--cp-line); border-radius: 3px; background: transparent; color: var(--cp-muted); font: 500 12px/1 var(--cp-font); cursor: pointer; transition: color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-md-btn:hover, html[data-theme]:not(#cp) body .cp-md-btn[aria-pressed="true"] { color: var(--cp-strong); border-color: var(--cp-line-2); background: var(--cp-hover); } html[data-theme]:not(#cp) body .cp-md-icon { width: 34px; padding: 0; display: grid; place-items: center; } html[data-theme]:not(#cp) body .cp-mdrawer-panel { transition: transform var(--cp-dur-l) var(--cp-e), width var(--cp-dur-l) var(--cp-e); } html[data-theme]:not(#cp) body .cp-mdrawer.is-wide .cp-mdrawer-panel { width: min(1320px, 100%); } html[data-theme]:not(#cp) body .cp-mquote { display: inline-flex; align-items: center; gap: 6px; margin: 8px 2px 0; padding: 4px 10px; border: 1px solid var(--cp-line); border-radius: 3px; background: transparent; color: var(--cp-muted); font: 500 11.5px/1.4 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .cp-mquote::before { content: "•••"; letter-spacing: 1px; font-size: 9px; } html[data-theme]:not(#cp) body .cp-mquote:hover, html[data-theme]:not(#cp) body .cp-mquote.is-open { color: var(--cp-strong); border-color: var(--cp-line-2); } html[data-theme]:not(#cp) body .cp-md-foot { display: grid; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--cp-line); background: var(--cp-surface); } html[data-theme]:not(#cp) body .cp-md-foot .cp-md-reply { justify-self: end; } html[data-theme]:not(#cp) body .cp-md-foot .rst-email-reply-slot:empty { display: none; } /* Detail im globalen Mail-Fenster */ html[data-theme]:not(#cp) body .rst-email-detail-body[data-cp-mail] { padding: 0 !important; margin: 12px 0 !important; background: transparent !important; border: 0 !important; max-height: none !important; } @media (max-width: 767px) { html[data-theme]:not(#cp) body .cp-mtool { gap: 8px; } html[data-theme]:not(#cp) body .cp-msearch { flex: 1 1 100%; order: 2; } html[data-theme]:not(#cp) body .cp-mtool .cp-mcontacts { order: 3; margin: 0 !important; flex: 1 1 100%; } html[data-theme]:not(#cp) body .cp-mconv { grid-template-columns: 34px minmax(0, 1fr); } html[data-theme]:not(#cp) body .cp-mconv .cp-mav { width: 34px; height: 34px; } html[data-theme]:not(#cp) body .cp-mconv-side { grid-column: 2; justify-self: start; } html[data-theme]:not(#cp) body .cp-md-head { padding: 14px 16px; } html[data-theme]:not(#cp) body .cp-md-body { padding: 10px; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .cp-mconv, html[data-theme]:not(#cp) body .cp-msg:not(#page-content), html[data-theme]:not(#cp) body .cp-mdrawer-panel, html[data-theme]:not(#cp) body .cp-mempty-ico { animation: none !important; transition: none !important; } } /* --------------------------------------------------------------------------- v5.9 · Deals (Wert, Wahrscheinlichkeit, Abschluss) + gewichtete Prognose --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .cp-pl-kpi.is-weighted b { color: var(--cp-rust-hi); } .cp-pl-fc { display: flex; align-items: flex-end; gap: 6px; margin: -4px 0 14px; padding: 10px 12px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); overflow-x: auto; } .cp-pl-fc-t { display: flex; flex-direction: column; gap: 2px; margin-right: auto; padding-right: 8px; font-size: 12px; font-weight: 500; color: var(--cp-strong); white-space: nowrap; align-self: center; } .cp-pl-fc-t small, .cp-pl-fc-b small, .cp-pl-fc-won small { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-dim); } .cp-pl-fc-b, .cp-pl-fc-won { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 64px; height: 64px; font-variant-numeric: tabular-nums; } .cp-pl-fc-b { flex: 1 1 0; max-width: 140px; } .cp-pl-fc-b.is-zero i { background: var(--cp-line-2); } html[data-theme]:not(#cp) body .cp-pl-fc-b.is-zero b { color: var(--cp-dim); } .cp-pl-fc-b i { width: 24px; height: max(3px, calc(var(--h) * .34)); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--cp-rust-hi), var(--cp-rust)); transform-origin: bottom; animation: cp-fc-grow var(--cp-dur-xl) var(--cp-e) both; animation-delay: calc(var(--i, 0) * 50ms); } .cp-pl-fc-b.is-none i { background: var(--cp-line-2); } .cp-pl-fc-b.is-warn i { background: var(--cp-warning); } .cp-pl-fc-b b, .cp-pl-fc-won b { font-size: 12px; font-weight: 500; color: var(--cp-strong); white-space: nowrap; } .cp-pl-fc-won { padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--cp-line); justify-content: center; } html[data-theme]:not(#cp) body .cp-pl-fc-won b { color: var(--cp-success); font-size: 14px; } @keyframes cp-fc-grow { from { transform: scaleY(0); } } html[data-theme]:not(#cp) body button.cp-pl-opp-val, html[data-theme]:not(#cp) body button.cp-row-val, html[data-theme]:not(#cp) body button.cp-kb-val { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 6px; margin: -2px -6px; border: 1px solid transparent; border-radius: 3px; background: transparent; font: inherit; color: var(--cp-strong); cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body button.cp-row-val { color: var(--cp-text); } html[data-theme]:not(#cp) body button.cp-pl-opp-val:hover, html[data-theme]:not(#cp) body button.cp-row-val:hover, html[data-theme]:not(#cp) body button.cp-kb-val:hover, html[data-theme]:not(#cp) body button.cp-pl-opp-val:focus-visible, html[data-theme]:not(#cp) body button.cp-row-val:focus-visible, html[data-theme]:not(#cp) body button.cp-kb-val:focus-visible { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); outline: none; } .cp-pl-opp-val small, .cp-row-val small, .cp-kb-val small { font-size: 10.5px; color: var(--cp-muted); } .cp-kb-close { margin-left: auto; margin-right: 8px; font-size: 10.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-kb-sum small { color: var(--cp-rust-hi); font-size: 10.5px; } html[data-theme]:not(#cp) body .cp-chip.is-deal { cursor: pointer; border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong) !important; } .cp-chip.is-deal svg { color: var(--cp-rust-hi); } .cp-deal { position: fixed; z-index: 100002; width: 320px; max-width: calc(100vw - 24px); border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); box-shadow: var(--cp-shadow-pop); opacity: 0; transform: translateY(6px) scale(.98); transform-origin: top center; transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } .cp-deal.is-on { opacity: 1; transform: none; } .cp-deal.is-sheet { left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; max-width: none; transform-origin: bottom center; } .cp-deal-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--cp-line); } .cp-deal-head b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--cp-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-deal-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-deal-ico svg { width: 14px; height: 14px; } html[data-theme]:not(#cp) body .cp-deal-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp) body .cp-deal-x:hover { background: var(--cp-hover); color: var(--cp-strong); } .cp-deal-x svg { width: 15px; height: 15px; } .cp-deal-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; } .cp-deal-f { display: flex; flex-direction: column; gap: 5px; margin: 0; } .cp-deal-f > span { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-dim); } .cp-deal-f > span b { color: var(--cp-strong); letter-spacing: 0; font-size: 12px; } .cp-deal-f small { font-size: 11px; line-height: 1.45; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-deal-f input:not([type="range"]), html[data-theme]:not(#cp) body .cp-deal-f select, html[data-theme]:not(#cp) body .cp-deal-f textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface); color: var(--cp-strong); font: 500 13px/1.3 var(--cp-font); color-scheme: inherit; transition: border-color var(--cp-dur-s) var(--cp-ease), box-shadow var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-deal-f input:focus, html[data-theme]:not(#cp) body .cp-deal-f select:focus, html[data-theme]:not(#cp) body .cp-deal-f textarea:focus { outline: none; border-color: var(--cp-rust-hi); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-deal-in { position: relative; display: block; } .cp-deal-in i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: var(--cp-dim); pointer-events: none; } html[data-theme]:not(#cp) body .cp-deal-in input { padding-right: 26px; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-deal-in input.is-bad { border-color: var(--cp-danger); } .cp-deal-f input[type="range"] { width: 100%; accent-color: var(--cp-rust-hi); margin: 4px 0 0; } html[data-theme]:not(#cp) body .cp-deal-link { padding: 0; border: 0; background: none; color: var(--cp-rust-hi); font: inherit; text-decoration: underline; cursor: pointer; } .cp-deal-w { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 10px; border-radius: 3px; background: var(--cp-rust-soft); border: 1px dashed var(--cp-rust-line); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); } .cp-deal-w b { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-deal-acts { display: flex; justify-content: flex-end; gap: 8px; } /* --------------------------------------------------------------------------- v5.9 · Auswahl & Massenaktionen (RISE-Auswahl sichtbar machen) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body table.dataTable.js-selection-mode tbody tr { cursor: pointer; } html[data-theme]:not(#cp) body table.dataTable.js-selection-mode tbody tr > td:first-child { position: relative; padding-left: 36px !important; } html[data-theme]:not(#cp) body table.dataTable.js-selection-mode tbody tr > td:first-child::before { content: ""; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; box-sizing: border-box; border: 1.5px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface) center / 11px no-repeat; transition: background-color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body table.dataTable.js-selection-mode tbody tr:hover > td:first-child::before { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp) body table.dataTable tbody tr.batch-operation-selected > td { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body table.dataTable tbody tr.batch-operation-selected > td:first-child { box-shadow: inset 2px 0 0 var(--cp-rust-hi); } html[data-theme]:not(#cp) body table.dataTable.js-selection-mode tbody tr.batch-operation-selected > td:first-child::before { border-color: var(--cp-rust-hi); background-color: var(--cp-rust-hi); transform: scale(1.06); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } html[data-theme]:not(#cp) body table.dataTable.js-selection-mode tbody td.dt-empty::before { display: none; } html[data-theme]:not(#cp) body .js-selection-mode .cp-row-quick, html[data-theme]:not(#cp) body .js-selection-mode .cp-row-miss, html[data-theme]:not(#cp) body .js-selection-mode button.cp-row-val { pointer-events: none; opacity: .45; } html[data-theme]:not(#cp) body .selection-handler-dropdown-btn.active { border-color: var(--cp-rust-hi) !important; color: var(--cp-rust-hi) !important; background: var(--cp-rust-soft) !important; } .cp-bulk { position: fixed; left: 50%; bottom: 18px; z-index: 1040; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 24px); padding: 6px 6px 6px 16px; overflow-x: auto; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); /* v5.75.0: 3px statt 12px (Design-Regel) */ background: color-mix(in srgb, var(--cp-surface-3) 92%, transparent); backdrop-filter: blur(14px); box-shadow: var(--cp-shadow-pop); opacity: 0; transform: translate(-50%, 16px) scale(.98); transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-l) var(--cp-e); } .cp-bulk.is-on { opacity: 1; transform: translate(-50%, 0); } .cp-bulk[hidden] { display: none; } .cp-bulk-n { margin-right: 8px; font-size: 12.5px; color: var(--cp-muted); white-space: nowrap; } html[data-theme]:not(#cp) body .cp-bulk-n b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-right: 4px; border-radius: var(--cp-r); background: var(--cp-rust); color: var(--cp-on-rust); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } /* v5.75.0: 3px, --cp-rust (Kontrast AA auch im Dunkel-Thema) */ html[data-theme]:not(#cp) body .cp-bulk-b { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid transparent; border-radius: var(--cp-r); background: transparent; color: var(--cp-strong); font: 500 12.5px/1 var(--cp-font); white-space: nowrap; cursor: pointer; transition: background var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-bulk-b:hover, html[data-theme]:not(#cp) body .cp-bulk-b:focus-visible { background: var(--cp-hover); border-color: var(--cp-line-2); outline: none; } html[data-theme]:not(#cp) body .cp-bulk-b:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 1px; } /* v5.75.0: sichtbarer Fokusring (Tastatur) */ .cp-bulk-b svg { width: 14px; height: 14px; color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-bulk-b.is-quiet { color: var(--cp-muted); } .cp-bulk-b.is-quiet svg { color: currentColor; } html[data-theme]:not(#cp) body .cp-bulk-b.is-danger { color: var(--cp-danger); } html[data-theme]:not(#cp) body .cp-bulk-b.is-danger:hover { background: rgba(229,72,77,.1); border-color: rgba(229,72,77,.35); } .cp-bt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cp-bulk-dlg .cp-deal-f { margin-bottom: 12px; } .cp-bulk-dlg .cp-deal-acts { margin-top: 6px; } .cp-bt-warn { color: var(--cp-warning) !important; font-size: 12px !important; } @media (max-width: 600px) { .cp-bulk { left: 12px; right: 12px; transform: translateY(16px); } .cp-bulk.is-on { transform: none; } .cp-bt-row { grid-template-columns: 1fr; } .cp-bulk-b span { display: none; } .cp-bulk-b.is-quiet span { display: inline; } } /* --------------------------------------------------------------------------- v5.75.0 · Aufgabenlisten: Kästchen = Auswahl (contentag-crm.js: tsPrep/tsApply/tsBar) Das RISE-Kästchen vor der ID zeigt nur noch die Auswahl; erledigte Aufgaben erkennt man am gedämpften, durchgestrichenen Titel. Leiste .cp-bulk mit „Erledigt“, „Status ändern“, Fortschritt. --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body table.cp-tsel a.cp-tsel-box { position: relative; float: left; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -1px 8px -1px -3px; padding: 0; border-radius: var(--cp-r); background: transparent !important; box-shadow: none !important; cursor: pointer; text-decoration: none !important; } /* Kästchen und ID in einer Zeile (schmale ID-Spalte auf dem iPad brach die Nummer sonst unter das Kästchen) */ html[data-theme]:not(#cp):not(#cq) body table.cp-tsel :is(td, th):has(> .cp-tsel-box, > .cp-tsel-all) { white-space: nowrap; } /* größere Trefferfläche ohne Layoutänderung */ html[data-theme]:not(#cp):not(#cq) body table.cp-tsel a.cp-tsel-box::after { content: ""; position: absolute; inset: -7px; } html[data-theme]:not(#cp):not(#cq) body table.cp-tsel .cp-tsel-mark, html[data-theme]:not(#cp):not(#cq) body table.cp-tsel .cp-tsel-all > .cp-tsel-mark { display: block; float: none; width: 16px; height: 16px; min-width: 0; min-height: 0; margin: 0; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--cp-muted) 75%, transparent); /* Rahmen ≥ 3:1 (WCAG 1.4.11): hell ≈ 3,8:1, dunkel ≈ 4:1 */ border-radius: var(--cp-r); background: var(--cp-surface) center / 11px no-repeat; transition: background-color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-xs) var(--cp-ease); } html[data-theme]:not(#cp):not(#cq) body table.cp-tsel a.cp-tsel-box:hover > .cp-tsel-mark, html[data-theme]:not(#cp):not(#cq) body table.cp-tsel .cp-tsel-all:not(:disabled):hover > .cp-tsel-mark { border-color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body table.cp-tsel a.cp-tsel-box:active > .cp-tsel-mark, html[data-theme]:not(#cp):not(#cq) body table.cp-tsel .cp-tsel-all:not(:disabled):active > .cp-tsel-mark { transform: scale(.9); } /* !important: die Tabellen-Link-Regel (#page-content table tbody td a span) setzt background-image: none !important */ html[data-theme]:not(#cp):not(#cq) body table.cp-tsel a.cp-tsel-box.is-sel > .cp-tsel-mark, html[data-theme]:not(#cp):not(#cq) body table.cp-tsel .cp-tsel-all[aria-checked="true"] > .cp-tsel-mark { border-color: var(--cp-rust); background-color: var(--cp-rust) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important; } html[data-theme]:not(#cp):not(#cq) body table.cp-tsel .cp-tsel-all[aria-checked="mixed"] > .cp-tsel-mark { border-color: var(--cp-rust); background-color: var(--cp-rust) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") !important; } html[data-theme]:not(#cp):not(#cq) body table.cp-tsel a.cp-tsel-box:focus-visible, html[data-theme]:not(#cp):not(#cq) body table.cp-tsel .cp-tsel-all:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 1px; box-shadow: none !important; } /* „Alle auf dieser Seite“ im Spaltenkopf */ html[data-theme]:not(#cp):not(#cq) body table.cp-tsel .cp-tsel-all { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -4px 8px -4px -3px; padding: 0; vertical-align: middle; border: 0; border-radius: var(--cp-r); background: transparent; box-shadow: none; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body table.cp-tsel .cp-tsel-all:disabled { cursor: default; opacity: .4; } /* ausgewählte Zeile (wie RISEs Auswahl: weiche Fläche + Rost-Kante) */ html[data-theme]:not(#cp):not(#cq) body table.cp-tsel tbody tr.cp-tsel-on > td { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body table.cp-tsel tbody tr.cp-tsel-on > td:first-child { box-shadow: inset 2px 0 0 var(--cp-rust); } /* erledigte Aufgabe: Titel gedämpft und fein durchgestrichen */ html[data-theme]:not(#cp):not(#cq) body table.cp-tsel tbody tr.cp-task-done a.js-selection-id { text-decoration: line-through !important; text-decoration-thickness: 1px !important; text-decoration-color: color-mix(in srgb, var(--cp-muted) 70%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body table.cp-tsel tbody tr.cp-task-done a.js-selection-id:not(:hover) { color: var(--cp-muted) !important; } /* Leiste: Hauptaktion, Menü-Knopf, Hinweis „auf anderen Seiten“, Fortschritt */ html[data-theme]:not(#cp):not(#cq) body .cp-bulk-b.is-primary { background: var(--cp-rust); border-color: var(--cp-rust); color: var(--cp-on-rust); } html[data-theme]:not(#cp):not(#cq) body .cp-bulk-b.is-primary:hover { background: color-mix(in srgb, var(--cp-rust) 86%, #000); border-color: color-mix(in srgb, var(--cp-rust) 86%, #000); } html[data-theme]:not(#cp):not(#cq) body .cp-bulk-b.is-primary svg { color: currentColor; } html[data-theme]:not(#cp):not(#cq) body .cp-bulk-b:is(:disabled, [aria-disabled="true"]) { opacity: .55; cursor: default; } html[data-theme]:not(#cp):not(#cq) body .cp-bulk-b[aria-expanded="true"] { background: var(--cp-hover); border-color: var(--cp-line-2); } .cp-bulk-n em { font-style: normal; color: var(--cp-muted); } .cp-bulk.is-task .cp-bulk-n { color: var(--cp-text); } .cp-bulk-prog { flex: 0 0 auto; width: 132px; height: 4px; margin: 0 10px 0 2px; border-radius: var(--cp-r); background: var(--cp-line-2); overflow: hidden; } .cp-bulk-prog > i { display: block; height: 100%; width: 0; background: var(--cp-rust); transition: width var(--cp-dur-m) var(--cp-ease); } /* Status-Menü über der Leiste */ .cp-bulk-menu { position: fixed; z-index: 1045; min-width: 220px; max-width: calc(100vw - 16px); max-height: min(360px, 60vh); overflow-y: auto; padding: 6px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: var(--cp-surface-3); box-shadow: var(--cp-shadow-pop); font-family: var(--cp-font); opacity: 0; transform: translateY(6px); transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } .cp-bulk-menu.is-on { opacity: 1; transform: none; } .cp-bulk-menu-h { padding: 6px 10px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-muted); } .cp-bulk-menu-wait { display: block; padding: 8px 10px; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-bulk-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--cp-r); background: transparent; color: var(--cp-strong); font: 500 13px/1.3 var(--cp-font); text-align: left; cursor: pointer; transition: background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp):not(#cq) body .cp-bulk-menu button:hover, html[data-theme]:not(#cp):not(#cq) body .cp-bulk-menu button:focus-visible { background: var(--cp-hover); outline: none; } html[data-theme]:not(#cp):not(#cq) body .cp-bulk-menu button:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: -2px; } .cp-bulk-menu button > i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cp-muted); } /* Status-Punkt (echter Kreis) */ /* Rückfrage „Auch ausgeblendete Aufgaben ändern?“ (Auswahl enthält vom Spaltenfilter ausgeblendete Zeilen) */ html[data-theme]:not(#cp):not(#cq) body .cp-tsel-ask :is(.cp-addon-card, .cp-addon-x, .cp-crm-btn) { border-radius: var(--cp-r); } /* Telefon: .cp-addon ist ein Grid mit auto-Spalte → max-width: 100% greift dort nicht, die 520px-Karte lief über den Rand */ html[data-theme]:not(#cp):not(#cq) body .cp-tsel-ask .cp-addon-card { width: min(520px, calc(100vw - 32px)); } html[data-theme]:not(#cp):not(#cq) body .cp-tsel-ask .cp-crm-btn:hover { transform: none; box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body .cp-tsel-ask .cp-crm-btn:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } .cp-tsel-ask .cp-deal-acts { flex-wrap: wrap; } @media (pointer: coarse) { html[data-theme]:not(#cp):not(#cq) body table.cp-tsel a.cp-tsel-box::after { inset: -10px; } } @media (max-width: 600px) { html[data-theme]:not(#cp):not(#cq) body .cp-bulk-b.is-primary span { display: inline; } .cp-bulk-n em { display: none; } .cp-bulk-prog { width: 64px; } } @media (prefers-reduced-motion: reduce) { .cp-pl-fc-b i { animation: none; } } /* --------------------------------------------------------------------------- v5.10 · Profilseite (Team-Mitglied, Kontakte): Kopf, Kennzahlen, Tabs, Formulare --------------------------------------------------------------------------- */ /* Sidebar: Aufklapp-Pfeil. modern-ui.css zeichnet den Aktiv-Balken auf a::before (left:-12px, 4×22px) – bei aktiven, geöffneten Gruppen wurde daraus mit RISEs Pfeil-Rahmen + Drehung ein schräger weißer Strich am linken Rand. */ html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li.expand > a::before { content: "" !important; position: absolute !important; left: auto !important; right: 18px !important; top: 50% !important; width: 6px !important; height: 6px !important; padding: 0 !important; margin: -5px 0 0 !important; border-radius: 0 !important; border-style: solid !important; border-width: 0 1.5px 1.5px 0 !important; display: block !important; transform: rotate(45deg) !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu > li.expand.open > a::before { transform: rotate(-135deg) !important; margin-top: -1px !important; } /* Formularzeilen überall: statt weiß gestrichelter Linien ruhige Trenner, Beschriftung mittig */ html[data-theme]:not(#cp) body .dashed-row .form-group { border-bottom: 1px solid var(--cp-line) !important; padding-bottom: 14px; margin-bottom: 14px; } html[data-theme]:not(#cp) body .dashed-row .form-group:last-child { border-bottom: 0 !important; margin-bottom: 0; padding-bottom: 0; } html[data-theme]:not(#cp) body .dashed-row .form-group > .row { align-items: center; } html[data-theme]:not(#cp) body .dashed-row .form-group .row > label:first-child { padding: 0 20px; font-size: 13px; color: var(--cp-muted) !important; margin: 0; } html[data-theme]:not(#cp) body .dashed-row .bd { border-bottom: 1px solid var(--cp-line) !important; } /* ---- Kopf ---- */ html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) { position: relative; overflow: hidden; border: 1px solid var(--cp-line) !important; border-radius: 3px 3px 0 0 !important; background: radial-gradient(520px 260px at 8% 0%, rgba(232,85,42,.13), transparent 70%), radial-gradient(620px 300px at 100% 100%, rgba(233,220,200,.05), transparent 70%), var(--cp-surface) !important; } html[data-theme="light"]:not(#cp) body #page-content > .card:has(#profile-image-section) { background: radial-gradient(520px 260px at 8% 0%, rgba(192,67,28,.09), transparent 70%), var(--cp-surface) !important; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) > .container-fluid > .row { align-items: center; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) > .container-fluid > .row > [class*="col-"] > .row.p20 { padding: 26px 22px !important; } html[data-theme]:not(#cp) body #profile-image-section { position: relative; display: grid !important; grid-template-columns: 104px minmax(0, 1fr); column-gap: 22px; row-gap: 4px; align-items: start; margin: 0; width: 100%; border: 0 !important; background: none !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #profile-image-section > .profile-image, html[data-theme]:not(#cp) body #profile-image-section #profile-image-form { display: contents !important; } html[data-theme]:not(#cp) body #profile-image-section .avatar.avatar-lg { grid-column: 1; grid-row: 1 / span 3; position: relative; width: 104px !important; height: 104px !important; margin: 0 !important; padding: 3px; border-radius: 50%; background: conic-gradient(from 210deg, var(--cp-rust-hi), var(--cp-glow) 40%, var(--cp-rust) 75%, var(--cp-rust-hi)) !important; box-shadow: 0 18px 40px -18px rgba(232,85,42,.55); } html[data-theme]:not(#cp) body #profile-image-section .avatar.avatar-lg img { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; border: 3px solid var(--cp-surface) !important; } html[data-theme]:not(#cp) body #profile-image-section .profile-image h4 { grid-column: 2; grid-row: 1; align-self: end; margin: 6px 0 0 !important; text-align: left !important; font: 500 26px/1.15 var(--cp-font) !important; letter-spacing: -.01em; color: var(--cp-strong) !important; } /* Bild-Knöpfe als kleine Kreise am Avatar */ html[data-theme]:not(#cp) body #profile-image-section .profile-image-upload { position: absolute !important; z-index: 2; width: 30px; height: 30px; margin: 0 !important; padding: 0 !important; border-radius: 50%; display: grid !important; place-items: center; overflow: hidden; cursor: pointer; background: var(--cp-surface-3) !important; border: 1px solid var(--cp-line-2) !important; box-shadow: 0 6px 16px -8px rgba(0,0,0,.8); transition: transform var(--cp-dur-m) var(--cp-e), background var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #profile-image-section .profile-image-upload:not(.profile-image-direct-upload) { left: 76px; top: 76px; background: var(--cp-rust) !important; border-color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body #profile-image-section .profile-image-direct-upload { left: 76px; top: -2px; } html[data-theme]:not(#cp) body #profile-image-section .profile-image-upload:hover { transform: scale(1.08); border-color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body #profile-image-section .profile-image-upload, html[data-theme]:not(#cp) body #profile-image-section .profile-image-upload.btn { border-radius: 50% !important; min-width: 0 !important; } html[data-theme]:not(#cp) body #profile-image-section .profile-image-upload .btn, html[data-theme]:not(#cp) body #profile-image-section .profile-image-upload label { display: grid !important; place-items: center; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: #fff !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #profile-image-section .profile-image-direct-upload .btn { color: var(--cp-text) !important; } html[data-theme]:not(#cp) body #profile-image-section .profile-image-upload svg { width: 14px !important; height: 14px !important; } html[data-theme]:not(#cp) body #profile-image-section .profile-image-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; } /* Details: Position, Kontakt, Aktionen */ html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) { grid-column: 2; grid-row: 2 / span 2; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 8px; padding: 6px 0 0 !important; width: auto !important; } html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) > p { margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) > p:first-child:has(.badge) { flex-basis: 100%; margin-bottom: 4px !important; } html[data-theme]:not(#cp) body #profile-image-section .badge.bg-info { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px !important; border-radius: 999px !important; background: var(--cp-rust-soft) !important; border: 1px solid var(--cp-rust-line) !important; color: var(--cp-rust-hi) !important; font: 600 10.5px/1 var(--cp-font) !important; letter-spacing: .14em; text-transform: uppercase; } html[data-theme]:not(#cp) body #profile-image-section .badge.bg-info strong { font-weight: 600; } html[data-theme]:not(#cp) body #profile-image-section .cp-pf-chip, html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) > p:not(:first-child:has(.badge)) { display: inline-flex !important; align-items: center; gap: 7px; padding: 6px 11px !important; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-text) !important; font-size: 13px; text-decoration: none !important; transition: border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #profile-image-section .cp-pf-chip:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) svg { width: 14px !important; height: 14px !important; color: var(--cp-muted); } html[data-theme]:not(#cp) body #profile-image-section .cp-pf-chip .mr15 { display: none; } html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) > div.p10 { flex-basis: 100%; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0 0 !important; margin: 0 !important; } html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) > div.p10 > .float-start { float: none !important; display: flex; gap: 6px; } html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) > div.p10 > .float-start:not(:has(*)) { display: none !important; } html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) > div.p10::before, html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) > div.p10::after { display: none !important; } html[data-theme]:not(#cp) body #profile-image-section .btn-transparent { display: inline-flex !important; align-items: center; gap: 7px; margin: 0 !important; padding: 7px 12px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-text) !important; font: 500 12.5px/1 var(--cp-font) !important; opacity: 1 !important; } html[data-theme]:not(#cp) body #profile-image-section .btn-transparent:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; } /* ---- Kennzahlen ---- */ html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget { background: transparent !important; border: 0 !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget > .row { background: transparent !important; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget > .row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 !important; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget > .row > .box { display: contents !important; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .box-content { position: relative; display: block !important; width: auto !important; padding: 0 !important; border: 1px solid var(--cp-line) !important; border-radius: 3px; background: color-mix(in srgb, var(--cp-surface-2) 85%, transparent) !important; text-align: left; transition: border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .box-content:hover { border-color: var(--cp-line-2) !important; transform: translateY(-1px); } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .card-body { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px !important; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .card-body::before { content: ""; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 3px; background: var(--cp-rust-soft); border: 1px solid var(--cp-rust-line); -webkit-mask: none; box-sizing: border-box; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .card-body::after { content: ""; position: absolute; left: 25px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--cp-rust-hi); -webkit-mask: var(--cp-pf-ico) center / contain no-repeat; mask: var(--cp-pf-ico) center / contain no-repeat; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .card-body h1 { grid-column: 2; margin: 0 !important; text-align: left; font: 300 26px/1.1 var(--cp-font) !important; letter-spacing: -.02em; color: var(--cp-strong) !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .card-body > span { grid-column: 2; font: 600 10px/1.3 var(--cp-font) !important; letter-spacing: .13em; color: var(--cp-dim) !important; text-transform: uppercase; } .cover-widget .box-content:nth-child(1) { --cp-pf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E"); } .cover-widget .box:first-child .box-content:nth-child(2) { --cp-pf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.9-9.1'/%3E%3Cpath d='M22 4 12 14l-3-3'/%3E%3C/svg%3E"); } .cover-widget .box.b-t .box-content:nth-child(1), .cover-widget .box + .box .box-content:nth-child(1) { --cp-pf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } .cover-widget .box.b-t .box-content:nth-child(2), .cover-widget .box + .box .box-content:nth-child(2) { --cp-pf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4M12 14l3-3'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E"); } /* ---- Tab-Leiste: eine Zeile, Symbole, weiche Kanten beim Scrollen ---- */ html[data-theme]:not(#cp) body #team-member-view-tabs { display: flex !important; flex-wrap: nowrap !important; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 10px !important; border-radius: 0 0 3px 3px !important; border-top: 0 !important; scroll-behavior: smooth; -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--cp-fade-l, 0px), #000 calc(100% - var(--cp-fade-r, 0px)), transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 var(--cp-fade-l, 0px), #000 calc(100% - var(--cp-fade-r, 0px)), transparent 100%); } html[data-theme]:not(#cp) body #team-member-view-tabs::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp) body #team-member-view-tabs.cp-fade-l { --cp-fade-l: 36px; } html[data-theme]:not(#cp) body #team-member-view-tabs.cp-fade-r { --cp-fade-r: 36px; } html[data-theme]:not(#cp) body #team-member-view-tabs > li { flex: 0 0 auto; list-style: none; } html[data-theme]:not(#cp) body #team-member-view-tabs > li > a { display: inline-flex !important; align-items: center; gap: 7px; white-space: nowrap !important; padding: 15px 12px 14px !important; font: 500 13px/1 var(--cp-font) !important; letter-spacing: 0 !important; text-transform: none !important; } html[data-theme]:not(#cp) body #team-member-view-tabs > li > a .cp-tab-ico { display: inline-grid; color: var(--cp-dim); transition: color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #team-member-view-tabs > li > a .cp-tab-ico svg { width: 15px; height: 15px; } html[data-theme]:not(#cp) body #team-member-view-tabs > li > a.active .cp-tab-ico, html[data-theme]:not(#cp) body #team-member-view-tabs > li > a:hover .cp-tab-ico { color: var(--cp-rust-hi); } /* ---- Social Media: zweispaltig, mit Plattform-Symbol im Feld ---- */ html[data-theme]:not(#cp) body #social-links-form .card-body { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 20px 22px !important; } html[data-theme]:not(#cp) body #social-links-form .card-body > .form-group { border: 0 !important; margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp) body #social-links-form .card-body > .form-group > .row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; } html[data-theme]:not(#cp) body #social-links-form .card-body > .form-group > .row > * { width: 100% !important; max-width: 100% !important; flex: 0 0 auto; padding: 0 !important; } html[data-theme]:not(#cp) body #social-links-form .card-body > .form-group > .row > label { padding: 0 !important; font: 600 10.5px/1.2 var(--cp-font) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body #social-links-form .cp-soc { position: relative; display: block; } html[data-theme]:not(#cp) body #social-links-form .cp-soc > i { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; margin-top: -9px; display: grid; place-items: center; color: var(--cp-muted); pointer-events: none; transition: color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #social-links-form .cp-soc > i svg { width: 16px; height: 16px; } html[data-theme]:not(#cp) body #social-links-form .cp-soc .form-control { padding-left: 38px !important; height: 42px; } html[data-theme]:not(#cp) body #social-links-form .cp-soc.is-set > i { color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body #social-links-form .cp-soc > a.cp-soc-open { position: absolute; right: 8px; top: 50%; margin-top: -13px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 3px; color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body #social-links-form .cp-soc > a.cp-soc-open:hover { background: var(--cp-hover); color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #social-links-form .cp-soc > a.cp-soc-open svg { width: 14px; height: 14px; } html[data-theme]:not(#cp) body #social-links-form .cp-soc.is-set .form-control { padding-right: 40px !important; } html[data-theme]:not(#cp) body #social-links-form .card-body > .form-group.cp-soc-legacy { display: none; } html[data-theme]:not(#cp) body #social-links-form .card-header small { display: block; margin-top: 4px; font-size: 12px; color: var(--cp-dim); font-weight: 400; } @media (max-width: 991px) { html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget > .row { margin-top: 0 !important; } } @media (max-width: 767px) { html[data-theme]:not(#cp) body #profile-image-section { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; } html[data-theme]:not(#cp) body #profile-image-section .avatar.avatar-lg { width: 76px !important; height: 76px !important; } html[data-theme]:not(#cp) body #profile-image-section .profile-image h4 { font-size: 20px !important; } html[data-theme]:not(#cp) body #profile-image-section .profile-image-upload:not(.profile-image-direct-upload) { left: 52px; top: 52px; } html[data-theme]:not(#cp) body #profile-image-section .profile-image-direct-upload { left: 52px; top: -6px; } html[data-theme]:not(#cp) body #profile-image-section > div:not(.profile-image) { grid-column: 1 / -1; grid-row: auto; padding-top: 12px !important; } html[data-theme]:not(#cp) body #profile-image-section .profile-image h4 { align-self: center; grid-row: 1 / span 3; } html[data-theme]:not(#cp) body #social-links-form .card-body { grid-template-columns: 1fr; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .card-body h1 { font-size: 22px !important; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .card-body > span { font-size: 9.5px !important; letter-spacing: .05em; overflow-wrap: anywhere; hyphens: auto; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .card-body { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 12px !important; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .card-body::before { width: 30px; height: 30px; } html[data-theme]:not(#cp) body #page-content > .card:has(#profile-image-section) .cover-widget .card-body::after { left: 19px; width: 14px; height: 14px; margin-top: -7px; } } /* --------------------------------------------------------------------------- v5.10.1 · Tabellen: Person (Avatar + Name) in einer Zeile statt Umbruch --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body table.dataTable td a:has(> .avatar.avatar-xs:first-child), html[data-theme]:not(#cp) body table.dataTable td span:has(> .avatar.avatar-xs:first-child):not(.avatar) { display: inline-flex !important; align-items: center; gap: 9px; white-space: nowrap; line-height: 1.2; vertical-align: middle; } html[data-theme]:not(#cp) body table.dataTable td a:has(> .avatar.avatar-xs:first-child) > .avatar.avatar-xs { margin: 0 !important; flex: 0 0 auto; } html[data-theme]:not(#cp) body table.dataTable td a > .avatar.avatar-xs img { width: 26px !important; height: 26px !important; box-shadow: 0 0 0 1.5px var(--cp-line-2); } /* --------------------------------------------------------------------------- v5.12 · Einstellungsseiten: Abschnitts-Etiketten, Menü-/Dashboard-Editor --------------------------------------------------------------------------- */ /* RISE-Abschnittsetiketten (Module, Kundenrechte, Abonnement-Erinnerungen …) waren weiße Pillen mit heller Schrift */ html[data-theme]:not(#cp) body .highlight-toolbar { display: inline-flex; align-items: center; margin: 6px 0 2px !important; padding: 5px 12px !important; border-radius: 3px !important; background: var(--cp-rust-soft) !important; border: 1px solid var(--cp-rust-line) !important; box-shadow: none !important; color: var(--cp-rust-hi) !important; font: 600 10.5px/1.2 var(--cp-font) !important; letter-spacing: .14em; text-transform: uppercase; } /* Menü-Editor (Menü anpassen / linkes Menü für Kunden) und Kunden-Dashboard-Editor */ html[data-theme]:not(#cp) body .bg-off-white, html[data-theme]:not(#cp) body .default-bg { background: var(--cp-deep) !important; border-radius: 3px; } html[data-theme]:not(#cp) body #js-left-menu-customization-area { padding: 14px !important; border: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body #js-left-menu-customization-area .bg-white { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: 3px; } html[data-theme]:not(#cp) body #js-left-menu-customization-area .strong { color: var(--cp-strong) !important; font-weight: 500; letter-spacing: .02em; } html[data-theme]:not(#cp) body .client-dashboard-help-message { padding: 14px 18px 4px; font-size: 13px; line-height: 1.55; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .default-bg { padding: 4px 16px 16px; border: 1px solid var(--cp-line); } /* „Auf Standard zurücksetzen" im Seitenkopf: ruhiger Rahmen statt knallroter Fläche */ html[data-theme]:not(#cp) body .page-title .title-button-group .btn-danger { background: transparent !important; border: 1px solid rgba(229,72,77,.45) !important; color: #F08488 !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .page-title .title-button-group .btn-danger:hover { background: rgba(229,72,77,.12) !important; color: #fff !important; } /* --------------------------------------------------------------------------- Motion-System: reduzierte Bewegung (v5.9) OS-Einstellung → Tokens auf ~0 (Schleifen regeln die Blöcke oben einzeln). Eigener Schalter (⌘K „Animationen reduzieren“, html.cp-motion-off) → zusätzlich alles Übrige inkl. RISE/Bootstrap sofort und ohne Schleifen. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --cp-dur-xs: 1ms; --cp-dur-s: 1ms; --cp-dur-m: 1ms; --cp-dur-l: 1ms; --cp-dur-xl: 1ms; } } html.cp-motion-off { --cp-dur-xs: 1ms; --cp-dur-s: 1ms; --cp-dur-m: 1ms; --cp-dur-l: 1ms; --cp-dur-xl: 1ms; scroll-behavior: auto !important; } html.cp-motion-off *, html.cp-motion-off *::before, html.cp-motion-off *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; } html.cp-motion-off ::view-transition-group(*), html.cp-motion-off ::view-transition-old(*), html.cp-motion-off ::view-transition-new(*) { animation: none !important; } /* --------------------------------------------------------------------------- v5.12 · Dokumentvorschau (Rechnung, Angebot, Vertrag, KV) als weißes Papier Die Dokumente bringen ihre Farben inline mit (Brand-ID draft.contentag.com). --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .invoice-preview-container.bg-white { background: #fff !important; color: #06070A !important; border: 0 !important; border-radius: 3px; box-shadow: 0 24px 70px rgba(0,0,0,.45); } html[data-theme]:not(#cp) body .invoice-preview-container table, html[data-theme]:not(#cp) body .invoice-preview-container td, html[data-theme]:not(#cp) body .invoice-preview-container th, html[data-theme]:not(#cp) body .invoice-preview-container span, html[data-theme]:not(#cp) body .invoice-preview-container div, html[data-theme]:not(#cp) body .invoice-preview-container p, html[data-theme]:not(#cp) body .invoice-preview-container li { color: inherit; border-color: #DFDFDA; } html[data-theme]:not(#cp) body .invoice-preview-container a { color: #C0431C; } /* v5.77.9: dark-mode-fixes.css färbt p/span/div in .page-content mit !important hell (#E5E7EB) – auf dem weißen Papier (Kontoauszug: Zeitraum, Summen, Absender, Empfänger) praktisch unsichtbar. Elemente mit eigener Inline-Textfarbe (z. B. weiße Schrift auf der Farbleiste) bleiben unberührt; background-color allein zählt nicht als Textfarbe. */ html[data-theme]:not(#cp):not(#cq) body .invoice-preview-container :is(p, span, div, td, th, li, strong, b, small, label, h1, h2, h3, h4, h5, h6):not([style^="color"]):not([style*=" color:"]):not([style*=";color:"]) { color: inherit !important; } html[data-theme]:not(#cp):not(#cq) body .invoice-preview-container .text-default:not([style^="color"]):not([style*=" color:"]):not([style*=";color:"]) { color: #4E5E6A !important; } html[data-theme]:not(#cp):not(#cq) body .invoice-preview-container a:not([style^="color"]):not([style*=" color:"]):not([style*=";color:"]) { color: #C0431C !important; } /* modern-ui.css färbt Dokumenttabellen hell (!important) – auf Papier dunkel */ html[data-theme]:not(#cp) body .invoice-preview table, html[data-theme]:not(#cp) body .estimate-preview table, html[data-theme]:not(#cp) body .contract-preview table, html[data-theme]:not(#cp) body .invoice-preview-container table { color: #06070A !important; } /* Status-Band ("Entwurf", "Bezahlt") als Pille oben rechts statt über dem Logo */ html[data-theme]:not(#cp) body .invoice-preview-container:has(.ca-band) .ribbon { left: auto; right: -30px; top: -30px; width: auto; height: auto; overflow: visible; } html[data-theme]:not(#cp) body .invoice-preview-container:has(.ca-band) .ribbon span { position: static; transform: none; width: auto; display: inline-block; padding: 3px 12px !important; border-radius: 999px !important; font-size: 11px; line-height: 18px !important; letter-spacing: .06em; } html[data-theme]:not(#cp) body .invoice-preview-container:has(.ca-band) .ribbon span:before, html[data-theme]:not(#cp) body .invoice-preview-container:has(.ca-band) .ribbon span:after { display: none; } /* Angebots-/Vertragsvorlagen (ca-band): Abstände kommen inline aus der Vorlage – RISE-Standard (td 10px, table margin-top 40px) hier neutralisieren */ .proposal-preview:has(.ca-band) table, .contract-preview:has(.ca-band) table, .estimate-preview:has(.ca-band) table { margin-top: 0 !important; } .proposal-preview:has(.ca-band) td, .proposal-preview:has(.ca-band) th, .contract-preview:has(.ca-band) td, .contract-preview:has(.ca-band) th, .estimate-preview:has(.ca-band) td, .estimate-preview:has(.ca-band) th { padding: 0; } /* v5.14 · iPad/iPhone als App (PWA): Fläche über der Topbar (Statusleiste, Überziehen nach oben) in Topbar-Farbe – kein dunkler Streifen/Schatten über der Topbar */ @media (display-mode: standalone) { html[data-theme]:not(#cp) { background-color: var(--cp-deep) !important; } html[data-theme]:not(#cp) body #default-navbar, html[data-theme]:not(#cp) body .navbar-custom { box-shadow: none !important; border-top: 0 !important; } } /* v5.16.1 · iPad/iPhone-App: Statusleiste durchsichtig (black-translucent + viewport-fit=cover, Klasse html.cp-ios-app aus head-snippet.php). Vorher färbte iOS die Statusleiste selbst schwarz → dunkler Streifen („Schatten“) über der Topbar. Jetzt liegt die Statusleiste auf der Topbar-Farbe; alles darunter rückt um die Höhe der Statusleiste (--cp-sat) nach unten. */ html.cp-ios-app { --cp-sat: env(safe-area-inset-top, 0px); } /* v5.16.4 · iPadOS/iOS 27 zeichnet in Home-Bildschirm-Apps an fester Stelle (Statusleiste + ~36 pt) einen Weichzeichner über die Seite – nicht abschaltbar (gemessen: Band identisch bei jeder Statusleisten-Art und mit deckender Fläche am oberen Rand). Deshalb rücken Logo, Symbole und Seite in der iOS-App darunter; die Fläche darüber bleibt in Topbar-Farbe (#cp-top-edge). */ html.cp-ios-standalone { --cp-sat: calc(env(safe-area-inset-top, 0px) + 30px); } /* Band endet ~35 pt unter der Statusleiste; Logo beginnt 11 px tiefer */ /* Echtes Element (head-snippet.php) über die volle Breite: deckt die Statusleisten-Fläche ab und gibt WebKit eine deckende Farbe am oberen Rand → iPadOS/iOS 26+ legt keinen „Liquid Glass“-Schleier über Logo und Symbole */ html.cp-ios-app #cp-top-edge { /* WebKit sucht per Treffertest → kein pointer-events:none; nur die Statusleisten-Fläche */ position: fixed; top: 0; left: 0; right: 0; height: max(12px, var(--cp-sat)); background-color: var(--cp-deep); z-index: 1040; } html.cp-ios-app[data-theme]:not(#cp) body #default-navbar, html.cp-ios-app[data-theme]:not(#cp) body .navbar-custom { padding-top: var(--cp-sat) !important; min-height: calc(66px + var(--cp-sat)) !important; } html.cp-ios-app[data-theme]:not(#cp) body .sidebar-brand { top: var(--cp-sat) !important; } html.cp-ios-app[data-theme]:not(#cp) body .sidebar { padding-top: var(--cp-sat) !important; } html.cp-ios-app[data-theme]:not(#cp) body .sidebar-scroll { max-height: calc(100% - 66px) !important; } html.cp-ios-app[data-theme]:not(#cp) body .modal { padding-top: var(--cp-sat) !important; } /* v5.17 · iPhone quer: Kamera-/Dynamic-Island-Seite freihalten */ html.cp-ios-app[data-theme]:not(#cp) body #default-navbar, html.cp-ios-app[data-theme]:not(#cp) body #mobile-bottom-menu { padding-left: env(safe-area-inset-left, 0px) !important; padding-right: env(safe-area-inset-right, 0px) !important; } html.cp-ios-app[data-theme]:not(#cp) body .page-container { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } @media (min-width: 501px) { /* Topbar fest oben (RISE ≤ 500 px: Topbar im Fluss, Seite scrollt) */ html.cp-ios-app[data-theme]:not(#cp) body .page-container { margin-top: calc(65px + var(--cp-sat)) !important; max-height: calc(100vh - 65px - var(--cp-sat)) !important; } } /* v5.70.0 (Prüfung): WhatsApp-Posteingang ≤ 820 px – Schätzwert für den Abstand oben (extensions.css, --wa-top-fb), solange extensions.js --wa-top nicht gesetzt hat: die Statusleiste schiebt die Inbox um --cp-sat tiefer (Handy-Wert weiter unten) */ html.cp-ios-app[data-theme]:not(#cp) body .sc-app { --wa-top-fb: calc(102px + var(--cp-sat, 0px)); } @media (min-width: 641px) { html.cp-ios-app[data-theme]:not(#cp) body .cp-sp-panel { padding-top: var(--cp-sat); } } /* --------------------------------------------------------------------------- v5.14 · Login: Hintergrundbild aus Einstellungen → Allgemein („Hintergrund auf Anmeldeseite“) mit dunklem Verlauf für Lesbarkeit; professionelle Fußzeile --------------------------------------------------------------------------- */ html.cp-has-signin-photo[data-theme]:not(#cp) body.signin-page, html.cp-has-signin-photo[data-theme]:not(#cp) body.signup-page, html.cp-has-signin-photo[data-theme]:not(#cp) body.rst-signin-active { background: linear-gradient(180deg, rgba(6,7,10,.70) 0%, rgba(6,7,10,.30) 34%, rgba(6,7,10,.46) 66%, rgba(6,7,10,.94) 100%), radial-gradient(760px 380px at 50% 104%, rgba(192,67,28,.20), transparent 72%), var(--cp-signin-photo) center 58% / cover no-repeat, var(--cp-void) !important; background-attachment: scroll !important; min-height: 100vh; } html.cp-has-signin-photo[data-theme="light"]:not(#cp) body.signin-page, html.cp-has-signin-photo[data-theme="light"]:not(#cp) body.rst-signin-active { background: linear-gradient(180deg, rgba(247,247,245,.62) 0%, rgba(247,247,245,.22) 36%, rgba(247,247,245,.40) 66%, rgba(247,247,245,.90) 100%), var(--cp-signin-photo) center 58% / cover no-repeat, var(--cp-void) !important; } /* Karte auf dem Foto: etwas mehr Glas, klare Kante */ html.cp-has-signin-photo[data-theme]:not(#cp) body .rst-signin-card, html.cp-has-signin-photo[data-theme]:not(#cp) body .form-signin .card { background: color-mix(in srgb, var(--cp-deep) 78%, transparent) !important; border-color: rgba(238,240,244,.14) !important; box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.25) !important; } /* Fußzeile */ html[data-theme]:not(#cp) body.rst-signin-active .footer, html[data-theme]:not(#cp) body.signin-page .footer { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 !important; background: color-mix(in srgb, var(--cp-void) 62%, transparent) !important; backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border-top: 1px solid rgba(238,240,244,.08) !important; color: var(--cp-muted) !important; font-size: 12px !important; letter-spacing: .02em !important; text-transform: none !important; pointer-events: auto !important; } html[data-theme]:not(#cp) body.rst-signin-active .footer .container-fluid, html[data-theme]:not(#cp) body.signin-page .footer .container-fluid { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; max-width: 1280px; margin: 0 auto; padding: 14px 28px; } html[data-theme]:not(#cp) body.rst-signin-active .footer .container-fluid::before, html[data-theme]:not(#cp) body.rst-signin-active .footer .container-fluid::after { display: none; } html[data-theme]:not(#cp) body.rst-signin-active .footer .float-start, html[data-theme]:not(#cp) body.rst-signin-active .footer .float-end { float: none !important; display: flex; align-items: center; } html[data-theme]:not(#cp) body.rst-signin-active .footer .float-start { color: var(--cp-text) !important; font-weight: 500; } html[data-theme]:not(#cp) body.rst-signin-active .footer .cp-foot-secure { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(238,240,244,.12); color: var(--cp-dim); font-size: 11.5px; } html[data-theme]:not(#cp) body.rst-signin-active .footer .cp-foot-secure svg { color: var(--cp-success); } html[data-theme]:not(#cp) body.rst-signin-active .footer .float-end a { margin: 0 !important; padding: 4px 0; color: var(--cp-muted) !important; text-decoration: none !important; letter-spacing: .02em; text-transform: none; transition: color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body.rst-signin-active .footer .float-end a + a::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 14px 2px; border-radius: 50%; background: var(--cp-rust-hi); opacity: .8; vertical-align: middle; } html[data-theme]:not(#cp) body.rst-signin-active .footer .float-end a:hover { color: var(--cp-strong) !important; } html[data-theme="light"]:not(#cp) body.rst-signin-active .footer { background: color-mix(in srgb, #F7F7F5 70%, transparent) !important; border-top-color: rgba(10,12,17,.08) !important; } /* Platz für die Fußzeile, damit die Karte nie darunter liegt */ html[data-theme]:not(#cp) body.rst-signin-active .scrollable-page { padding-bottom: 72px; } @media (max-width: 640px) { html[data-theme]:not(#cp) body.rst-signin-active .footer .container-fluid { justify-content: center; text-align: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); } html[data-theme]:not(#cp) body.rst-signin-active .footer .float-start, html[data-theme]:not(#cp) body.rst-signin-active .footer .float-end { width: 100%; justify-content: center; } html[data-theme]:not(#cp) body.rst-signin-active .footer .cp-foot-secure { display: none; } html[data-theme]:not(#cp) body.rst-signin-active .scrollable-page { padding-bottom: 110px; } } /* v5.14 · Mehrfachauswahl (Select2): Eingabefeld ohne eigenen Rahmen, Chips als ruhige Pillen */ html[data-theme]:not(#cp) body .select2-container-multi .select2-choices .select2-search-field input, html[data-theme]:not(#cp) body .select2-container-multi .select2-choices .select2-search-field input:focus { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; } html[data-theme]:not(#cp) body .select2-container-multi .select2-choices .select2-search-choice { border-radius: 999px !important; padding: 3px 10px 3px 22px !important; margin: 4px 0 4px 6px !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; line-height: 16px !important; } html[data-theme]:not(#cp) body .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close { left: 7px !important; top: 50% !important; margin-top: -6px !important; opacity: .7; } html[data-theme]:not(#cp) body .select2-container-multi .select2-choices .select2-search-choice:hover { border-color: var(--cp-rust-line) !important; } /* --------------------------------------------------------------------------- v5.15 · Kundenportal: Begrüßung, Übersicht, „Hilfe & Support“ --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .cp-portal-hero { position: relative; overflow: hidden; margin: 0 0 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 28px; align-items: start; padding: 30px 32px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: radial-gradient(700px 300px at 88% -30%, rgba(233,220,200,.08), transparent 70%), radial-gradient(520px 260px at 100% 110%, rgba(192,67,28,.16), transparent 70%), var(--cp-surface); box-shadow: var(--cp-shadow); } html[data-theme]:not(#cp) body .cp-portal-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cp-rust-hi), transparent); opacity: .7; } html[data-theme]:not(#cp) body .cp-ph-meta { display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-ph-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-ph-sep { width: 22px; height: 1px; background: var(--cp-line-2); } html[data-theme]:not(#cp) body .cp-ph-title { margin: 12px 0 6px; font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -.01em; color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-ph-title em { font-style: normal; color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-ph-sub { margin: 0 0 18px; color: var(--cp-muted); font-size: 13.5px; } html[data-theme]:not(#cp) body .cp-ph-actions { display: flex; flex-wrap: wrap; gap: 8px; } html[data-theme]:not(#cp) body .cp-ph-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r-sm); background: transparent; color: var(--cp-text) !important; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none !important; transition: border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-ph-btn svg, html[data-theme]:not(#cp) body .cp-sp-card svg, html[data-theme]:not(#cp) body .cp-ph-clinks svg, html[data-theme]:not(#cp) body .cp-sp-launch svg, html[data-theme]:not(#cp) body .cp-sp-x svg, html[data-theme]:not(#cp) body .cp-sp-sec svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } html[data-theme]:not(#cp) body .cp-ph-btn:hover { border-color: var(--cp-rust-line); background: var(--cp-hover); } html[data-theme]:not(#cp) body .cp-ph-btn.is-primary { background: var(--cp-rust); border-color: var(--cp-rust); color: #fff !important; } html[data-theme]:not(#cp) body .cp-ph-btn.is-primary:hover { background: var(--cp-rust-hi); border-color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-ph-contact { display: flex; gap: 14px; align-items: center; min-width: 260px; padding: 16px 18px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: color-mix(in srgb, var(--cp-deep) 70%, transparent); } html[data-theme]:not(#cp) body .cp-sp-avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--cp-rust-soft); border: 1px solid var(--cp-rust-line); color: var(--cp-rust-hi); font-weight: 600; letter-spacing: .04em; } html[data-theme]:not(#cp) body .cp-sp-avatar img { width: 100%; height: 100%; object-fit: cover; } html[data-theme]:not(#cp) body .cp-sp-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp) body .cp-sp-name { font-size: 15px; font-weight: 600; color: var(--cp-strong); margin-top: 2px; } html[data-theme]:not(#cp) body .cp-sp-role { font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-ph-clinks { display: flex; gap: 14px; margin-top: 8px; } html[data-theme]:not(#cp) body .cp-ph-clinks a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cp-muted) !important; text-decoration: none !important; } html[data-theme]:not(#cp) body .cp-ph-clinks a:hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .cp-ph-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } html[data-theme]:not(#cp) body .cp-ph-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: color-mix(in srgb, var(--cp-deep) 60%, transparent); text-decoration: none !important; transition: border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-ph-tile:hover { border-color: var(--cp-rust-line); transform: translateY(-1px); } html[data-theme]:not(#cp) body .cp-ph-tile b { font-size: 22px; font-weight: 400; color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-ph-tile span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-ph-tile.is-warn { border-color: rgba(229,72,77,.4); } html[data-theme]:not(#cp) body .cp-ph-tile.is-warn span { color: var(--cp-danger); } @media (max-width: 900px) { html[data-theme]:not(#cp) body .cp-portal-hero { grid-template-columns: 1fr; padding: 22px 18px; } html[data-theme]:not(#cp) body .cp-ph-contact { min-width: 0; } } /* „Hilfe & Support“: ein Knopf statt RISE-Chat-Blase (Chat bleibt im Panel erreichbar) */ /* nur die schwebende Desktop-Blase – „Chat" in der Handy-Leiste bleibt sichtbar (v5.36.5, vorher mit ausgeblendet) */ html.cp-portal body > #js-init-chat-icon { opacity: 0 !important; pointer-events: none !important; } html[data-theme]:not(#cp) body .cp-sp-launch { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 1040; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--cp-rust); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 16px 40px -12px rgba(192,67,28,.7), 0 0 0 1px rgba(255,255,255,.08) inset; cursor: pointer; transition: transform var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-sp-launch:hover { background: var(--cp-rust-hi); transform: translateY(-2px); } html[data-theme]:not(#cp) body .cp-sp-launch svg { width: 20px; height: 20px; } html[data-theme]:not(#cp) body .cp-sp-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--cp-rust); font-style: normal; font-size: 11px; line-height: 20px; letter-spacing: 0; text-align: center; } html[data-theme]:not(#cp) body .cp-sp { position: fixed; inset: 0; z-index: 1050; } html[data-theme]:not(#cp) body .cp-sp[hidden] { display: none; } html[data-theme]:not(#cp) body .cp-sp-scrim { position: absolute; inset: 0; background: rgba(3,4,7,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--cp-dur-m) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-sp-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; outline: 0; background: var(--cp-surface); border-left: 1px solid var(--cp-line-2); box-shadow: -30px 0 80px -30px rgba(0,0,0,.9); transform: translateX(24px); opacity: 0; transition: transform var(--cp-dur-m) var(--cp-e), opacity var(--cp-dur-m) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-sp.is-open .cp-sp-scrim { opacity: 1; } html[data-theme]:not(#cp) body .cp-sp.is-open .cp-sp-panel { transform: none; opacity: 1; } html[data-theme]:not(#cp) body .cp-sp-head { position: relative; padding: 26px 26px 18px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body .cp-sp-kicker { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-sp-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-sp-head h2 { margin: 10px 0 6px; font-size: 22px; font-weight: 500; color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-sp-head p { margin: 0; font-size: 13px; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-sp-x { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r-sm); background: transparent; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp) body .cp-sp-x:hover { color: var(--cp-strong); border-color: var(--cp-rust-line); } html[data-theme]:not(#cp) body .cp-sp-body { flex: 1; overflow-y: auto; padding: 20px 26px; display: flex; flex-direction: column; gap: 20px; } html[data-theme]:not(#cp) body .cp-sp-note { padding: 12px 14px; border: 1px solid rgba(63,185,132,.35); border-radius: var(--cp-r-sm); background: rgba(63,185,132,.08); color: var(--cp-success); font-size: 13px; } html[data-theme]:not(#cp) body .cp-sp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } html[data-theme]:not(#cp) body .cp-sp-card { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; padding: 14px 16px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: var(--cp-surface-2); color: var(--cp-text) !important; text-decoration: none !important; cursor: pointer; font: inherit; transition: border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-sp-card:hover { border-color: var(--cp-rust-line); transform: translateY(-1px); } html[data-theme]:not(#cp) body .cp-sp-card svg { grid-row: span 2; width: 20px; height: 20px; color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-sp-card b { font-size: 14px; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-sp-card span { font-size: 12px; color: var(--cp-muted); line-height: 1.45; } html[data-theme]:not(#cp) body .cp-sp-card.cp-sp-primary { background: var(--cp-rust-soft); border-color: var(--cp-rust-line); } html[data-theme]:not(#cp) body .cp-sp-card.cp-sp-half { grid-column: auto; } html[data-theme]:not(#cp) body .cp-sp-card.cp-sp-half span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-sp-person { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); } html[data-theme]:not(#cp) body .cp-sp-contact:empty { display: none; } html[data-theme]:not(#cp) body .cp-sp-sec { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } html[data-theme]:not(#cp) body .cp-sp-sec h3 { margin: 0; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-muted); font-weight: 600; } html[data-theme]:not(#cp) body .cp-sp-sec a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cp-muted) !important; text-decoration: none !important; } html[data-theme]:not(#cp) body .cp-sp-sec a:hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .cp-sp-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cp-line); border-radius: var(--cp-r); } html[data-theme]:not(#cp) body .cp-sp-list li + li { border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body .cp-sp-list a { display: flex; flex-direction: column; gap: 4px; padding: 11px 14px; color: var(--cp-text) !important; text-decoration: none !important; } html[data-theme]:not(#cp) body .cp-sp-list a:hover { background: var(--cp-hover); } html[data-theme]:not(#cp) body .cp-sp-t { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-sp-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--cp-dim); } html[data-theme]:not(#cp) body .cp-st { font-style: normal; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--cp-line-2); color: var(--cp-muted); font-size: 11px; } html[data-theme]:not(#cp) body .cp-st-new, html[data-theme]:not(#cp) body .cp-st-client_replied { color: var(--cp-rust-hi); border-color: var(--cp-rust-line); } html[data-theme]:not(#cp) body .cp-st-open { color: var(--cp-info); border-color: rgba(108,166,217,.4); } html[data-theme]:not(#cp) body .cp-st-closed { color: var(--cp-success); border-color: rgba(63,185,132,.35); } html[data-theme]:not(#cp) body .cp-sp-empty { margin: 0; padding: 14px; border: 1px dashed var(--cp-line-2); border-radius: var(--cp-r); color: var(--cp-dim); font-size: 12.5px; text-align: center; } html[data-theme]:not(#cp) body .cp-sp-foot { padding: 14px 26px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cp-line); font-size: 11.5px; line-height: 1.5; color: var(--cp-dim); } @media (max-width: 640px) { html[data-theme]:not(#cp) body .cp-sp-launch { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 52px; height: 52px; padding: 0; justify-content: center; } html[data-theme]:not(#cp) body .cp-sp-launch-t { display: none; } html[data-theme]:not(#cp) body .cp-sp-badge { position: absolute; top: -4px; right: -4px; } html[data-theme]:not(#cp) body .cp-sp-panel { top: auto; left: 0; width: 100vw; max-height: 88vh; border-left: 0; border-top: 1px solid var(--cp-line-2); border-radius: 3px 3px 0 0; transform: translateY(30px); } html[data-theme]:not(#cp) body .cp-sp-cards { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .cp-sp-panel, html[data-theme]:not(#cp) body .cp-sp-scrim, html[data-theme]:not(#cp) body .cp-ph-tile { transition: none; } } /* v5.15 · E-Rechnung: Vorschau-Dialog (Ansicht / Prüfung / XML) */ html[data-theme]:not(#cp) body .cp-einv { padding: 22px 24px !important; } html[data-theme]:not(#cp) body .cp-einv-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } html[data-theme]:not(#cp) body .cp-einv-kicker { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-einv-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-einv-title strong { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-einv-controls { display: flex; gap: 8px; align-items: center; } html[data-theme]:not(#cp) body .cp-einv-controls select { min-width: 300px; max-width: 420px; } html[data-theme]:not(#cp) body .cp-einv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cp-line); margin-bottom: 16px; } html[data-theme]:not(#cp) body .cp-einv-tabs button { border: 0; background: transparent; padding: 10px 14px; color: var(--cp-muted); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 -2px 0 transparent; cursor: pointer; } html[data-theme]:not(#cp) body .cp-einv-tabs button.is-active { color: var(--cp-strong); box-shadow: inset 0 -2px 0 var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-einv-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; font-size: 10.5px; letter-spacing: 0; line-height: 18px; text-align: center; } html[data-theme]:not(#cp) body .cp-einv-count.is-bad { background: rgba(229,72,77,.18); color: var(--cp-danger); } html[data-theme]:not(#cp) body .cp-einv-count.is-ok { background: rgba(63,185,132,.16); color: var(--cp-success); } html[data-theme]:not(#cp) body .cp-einv-loading { padding: 40px; text-align: center; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-einv .cp-bad { color: var(--cp-danger) !important; font-style: normal; } /* Dokument als Papier */ html[data-theme]:not(#cp) body .cp-einv-doc { background: #fff; color: #06070A; border-radius: 3px; padding: 26px 28px; font-size: 13px; box-shadow: 0 20px 60px -30px rgba(0,0,0,.9); } html[data-theme]:not(#cp) body .cp-einv-doc * { color: inherit; } html[data-theme]:not(#cp) body .cp-einv-doc .cp-bad { color: #C0431C !important; } html[data-theme]:not(#cp) body .cp-einv-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid #06070A; } html[data-theme]:not(#cp) body .cp-einv-type { font-size: 22px; font-weight: 600; } html[data-theme]:not(#cp) body .cp-einv-type span { color: #C0431C !important; } html[data-theme]:not(#cp) body .cp-einv-sub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7E858E !important; margin-top: 4px; } html[data-theme]:not(#cp) body .cp-einv-dl { display: grid; grid-template-columns: auto auto; gap: 3px 18px; margin: 0; font-size: 12.5px; } html[data-theme]:not(#cp) body .cp-einv-dl dt { font-weight: 400; color: #7E858E !important; } html[data-theme]:not(#cp) body .cp-einv-dl dd { margin: 0; text-align: right; font-weight: 600; } html[data-theme]:not(#cp) body .cp-einv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; } html[data-theme]:not(#cp) body .cp-einv-parties section, html[data-theme]:not(#cp) body .cp-einv-pay { background: #F4F4F1; border-radius: 3px; padding: 14px 16px; } html[data-theme]:not(#cp) body .cp-einv h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #7E858E !important; font-weight: 600; } html[data-theme]:not(#cp) body .cp-einv-doc p { margin: 0 0 6px; line-height: 1.5; } html[data-theme]:not(#cp) body .cp-einv-small { font-size: 11.5px; color: #5d636b !important; line-height: 1.5; } html[data-theme]:not(#cp) body .cp-einv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } html[data-theme]:not(#cp) body .cp-einv-table th { background: #06070A !important; color: #F6F6F4 !important; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; padding: 8px 10px; } html[data-theme]:not(#cp) body .cp-einv-table td { padding: 9px 10px; border-bottom: 1px solid #DFDFDA; vertical-align: top; background: transparent !important; color: #06070A !important; } html[data-theme]:not(#cp) body .cp-einv-table .r { text-align: right; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-einv-empty { text-align: center; color: #7E858E !important; } html[data-theme]:not(#cp) body .cp-einv-bottom { display: grid; grid-template-columns: 1fr minmax(260px, 46%); gap: 18px; margin-top: 16px; align-items: start; } html[data-theme]:not(#cp) body .cp-einv-sum { width: 100%; border-collapse: collapse; font-size: 12.5px; } html[data-theme]:not(#cp) body .cp-einv-sum td { padding: 6px 10px; background: transparent !important; color: #06070A !important; border: 0; } html[data-theme]:not(#cp) body .cp-einv-sum td:last-child { text-align: right; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-einv-sum tr.is-strong td { border-top: 1px solid #06070A; font-weight: 700; } html[data-theme]:not(#cp) body .cp-einv-sum tr.is-due td { background: #06070A !important; color: #F6F6F4 !important; font-weight: 700; } /* Prüfung */ html[data-theme]:not(#cp) body .cp-einv-checkhead { padding: 12px 16px; border-radius: var(--cp-r-sm); margin-bottom: 12px; font-weight: 600; } html[data-theme]:not(#cp) body .cp-einv-checkhead.is-ok { background: rgba(63,185,132,.1); color: var(--cp-success); border: 1px solid rgba(63,185,132,.3); } html[data-theme]:not(#cp) body .cp-einv-checkhead.is-bad { background: rgba(229,72,77,.08); color: var(--cp-danger); border: 1px solid rgba(229,72,77,.3); } html[data-theme]:not(#cp) body .cp-einv-checks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cp-line); border-radius: var(--cp-r); } html[data-theme]:not(#cp) body .cp-einv-checks li { display: flex; gap: 12px; padding: 11px 14px; } html[data-theme]:not(#cp) body .cp-einv-checks li + li { border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body .cp-einv-checks li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; } html[data-theme]:not(#cp) body .cp-einv-checks li.ok > span { background: rgba(63,185,132,.14); color: var(--cp-success); } html[data-theme]:not(#cp) body .cp-einv-checks li.bad > span { background: rgba(229,72,77,.14); color: var(--cp-danger); } html[data-theme]:not(#cp) body .cp-einv-checks b { font-weight: 500; color: var(--cp-text); } html[data-theme]:not(#cp) body .cp-einv-checks p { margin: 4px 0 0; font-size: 12px; color: var(--cp-muted); } /* XML */ html[data-theme]:not(#cp) body .cp-einv-xml { max-height: 60vh; overflow: auto; margin: 0; padding: 16px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: var(--cp-deep); color: var(--cp-text); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; } html[data-theme]:not(#cp) body .cp-einv-hint { margin-right: auto; font-size: 11.5px; color: var(--cp-dim); } @media (max-width: 760px) { html[data-theme]:not(#cp) body .cp-einv-parties, html[data-theme]:not(#cp) body .cp-einv-bottom { grid-template-columns: 1fr; } html[data-theme]:not(#cp) body .cp-einv-controls select { min-width: 0; width: 100%; } html[data-theme]:not(#cp) body .cp-einv-controls { width: 100%; } } /* --------------------------------------------------------------------------- v5.15 · KI-Assistent im Look der Brand-ID (Void, Rost, Hexagon, gesperrte Labels) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .rst-ai-sidebar { background: radial-gradient(520px 320px at 50% 108%, rgba(192,67,28,.16), transparent 70%), radial-gradient(420px 260px at 100% -10%, rgba(233,220,200,.05), transparent 70%), var(--cp-deep) !important; border-left: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; font-family: var(--cp-font) !important; box-shadow: none !important; /* v5.39.0: geschlossen liegt die Leiste rechts außerhalb – ihr Schatten fiel sonst ins Bild (Hell-Modus) */ } html[data-theme]:not(#cp) body .rst-ai-sidebar.open { box-shadow: -40px 0 90px -40px rgba(0,0,0,.9) !important; } html[data-theme="light"]:not(#cp) body .rst-ai-sidebar.open { box-shadow: -24px 0 60px -30px rgba(20,24,40,.28) !important; } html[data-theme]:not(#cp) body .rst-ai-header { border-bottom: 1px solid var(--cp-line) !important; background: transparent !important; padding-top: 14px !important; padding-bottom: 14px !important; } html[data-theme]:not(#cp) body .rst-ai-header-title-btn { color: var(--cp-strong) !important; font-weight: 600 !important; letter-spacing: .01em; gap: 10px !important; } html[data-theme]:not(#cp) body .rst-ai-logo { width: 34px !important; height: 34px !important; border-radius: 3px !important; background: var(--cp-rust-soft) !important; border: 1px solid var(--cp-rust-line) !important; color: var(--cp-rust-hi) !important; box-shadow: none !important; display: inline-grid !important; place-items: center; } html[data-theme]:not(#cp) body .rst-ai-logo svg { width: 20px !important; height: 20px !important; } html[data-theme]:not(#cp) body .rst-ai-header-btn { width: 34px !important; height: 34px !important; border-radius: var(--cp-r-sm) !important; border: 1px solid transparent !important; color: var(--cp-muted) !important; background: transparent !important; } html[data-theme]:not(#cp) body .rst-ai-header-btn:hover { border-color: var(--cp-line-2) !important; color: var(--cp-strong) !important; background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .rst-ai-history-dropdown { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; box-shadow: var(--cp-shadow-pop) !important; } /* Leerzustand */ html[data-theme]:not(#cp) body .rst-ai-empty { gap: 0 !important; padding: 24px 22px !important; } html[data-theme]:not(#cp) body .rst-ai-empty-icon { position: relative; width: 76px; height: 76px; margin: 0 auto 18px !important; display: grid; place-items: center; color: var(--cp-rust-hi); font-size: 0 !important; } html[data-theme]:not(#cp) body .rst-ai-empty-icon svg { width: 54px; height: 54px; position: relative; z-index: 1; filter: drop-shadow(0 0 18px rgba(232,85,42,.35)); } html[data-theme]:not(#cp) body .rst-ai-orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(232,85,42,.35); animation: rst-ai-orbit 18s linear infinite; } html[data-theme]:not(#cp) body .rst-ai-orbit::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 10px var(--cp-rust-hi); } @keyframes rst-ai-orbit { to { transform: rotate(360deg); } } html[data-theme]:not(#cp) body .rst-ai-empty-kicker { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-muted); margin-bottom: 10px; } html[data-theme]:not(#cp) body .rst-ai-empty-kicker i { width: 5px; height: 5px; border-radius: 50%; background: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .rst-ai-empty-title { font-size: 22px !important; font-weight: 500 !important; color: var(--cp-strong) !important; letter-spacing: -.01em; margin-bottom: 8px !important; } html[data-theme]:not(#cp) body .rst-ai-empty-hint { font-size: 13px !important; line-height: 1.55 !important; color: var(--cp-muted) !important; max-width: 340px; margin: 0 auto 20px !important; } html[data-theme]:not(#cp) body .rst-ai-examples { gap: 8px !important; width: 100%; max-width: 380px; } html[data-theme]:not(#cp) body .rst-ai-examples button { display: flex !important; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 38px 12px 14px !important; position: relative; background: color-mix(in srgb, var(--cp-surface-2) 80%, transparent) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; color: var(--cp-text) !important; font-size: 13px !important; line-height: 1.4 !important; transition: border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body .rst-ai-examples button svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--cp-rust-hi); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } html[data-theme]:not(#cp) body .rst-ai-examples button::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 1.5px solid var(--cp-dim); border-right: 1.5px solid var(--cp-dim); transform: rotate(45deg); transition: transform var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .rst-ai-examples button:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; transform: translateY(-1px); } html[data-theme]:not(#cp) body .rst-ai-examples button:hover::after { border-color: var(--cp-rust-hi); transform: translateX(3px) rotate(45deg); } /* Nachrichten */ html[data-theme]:not(#cp) body .rst-ai-avatar { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: var(--cp-rust-soft) !important; border: 1px solid var(--cp-rust-line) !important; color: var(--cp-rust-hi) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .rst-ai-avatar svg { width: 17px !important; height: 17px !important; } html[data-theme]:not(#cp) body .rst-ai-typing .rst-ai-avatar::before { border-color: var(--cp-rust-line) !important; border-radius: 50% !important; } html[data-theme]:not(#cp) body .rst-ai-bubble { font-size: 13.5px !important; line-height: 1.6 !important; border-radius: 3px !important; } html[data-theme]:not(#cp) body .rst-ai-msg.user .rst-ai-bubble { background: var(--cp-rust) !important; color: #fff !important; border-bottom-right-radius: 3px !important; box-shadow: 0 10px 26px -14px rgba(192,67,28,.8); } html[data-theme]:not(#cp) body .rst-ai-msg.ai .rst-ai-bubble { background: var(--cp-surface-2) !important; color: var(--cp-text) !important; border: 1px solid var(--cp-line) !important; border-bottom-left-radius: 3px !important; } html[data-theme]:not(#cp) body .rst-ai-bubble a { color: var(--cp-rust-hi) !important; text-decoration-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .rst-ai-bubble strong, html[data-theme]:not(#cp) body .rst-ai-bubble b { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-ai-bubble code { background: var(--cp-deep) !important; border: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body .rst-ai-bubble pre { background: var(--cp-void) !important; border: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .rst-ai-typing span { background: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .rst-ai-preview-card { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; } /* Eingabe */ html[data-theme]:not(#cp) body .rst-ai-input-wrap { margin: 8px 14px 14px !important; padding: 12px 12px 8px !important; background: color-mix(in srgb, var(--cp-surface-2) 88%, transparent) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; box-shadow: 0 18px 40px -26px rgba(0,0,0,.9) !important; } html[data-theme]:not(#cp) body .rst-ai-input-wrap:focus-within { border-color: var(--cp-rust-line) !important; box-shadow: 0 0 0 3px var(--cp-rust-soft), 0 18px 40px -26px rgba(0,0,0,.9) !important; } html[data-theme]:not(#cp) body .rst-ai-input, html[data-theme]:not(#cp) body .rst-ai-input:focus { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--cp-strong) !important; font-size: 14px !important; padding: 2px 4px !important; height: auto; } html[data-theme]:not(#cp) body .rst-ai-input::placeholder { color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .rst-ai-attach { color: var(--cp-muted) !important; border-radius: var(--cp-r-sm) !important; } html[data-theme]:not(#cp) body .rst-ai-attach:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } /* v5.194.0: Diktieren im KI-Assistenten – Farben wie der Anhang-Knopf, während der Aufnahme Rost */ html[data-theme]:not(#cp) body .rst-ai-mic:not(.is-rec) { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .rst-ai-mic:not(.is-rec):hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-ai-disclaimer { flex: 1 1 auto; font-size: 10.5px; color: var(--cp-dim); text-align: right; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body .rst-ai-input-spacer { display: none; } html[data-theme]:not(#cp) body .rst-ai-send { width: 34px !important; height: 34px !important; border-radius: 3px !important; background: var(--cp-rust) !important; color: #fff !important; box-shadow: 0 8px 20px -10px rgba(192,67,28,.9) !important; } html[data-theme]:not(#cp) body .rst-ai-send:hover:not(:disabled) { background: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .rst-ai-send:disabled { background: var(--cp-surface-3, #1f2430) !important; color: var(--cp-dim) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .rst-ai-fab { background: var(--cp-rust) !important; box-shadow: 0 16px 40px -12px rgba(192,67,28,.7) !important; } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .rst-ai-orbit { animation: none; } } /* v5.15 · KI-Assistent: Stopp, Status, Links, Listen, Tabellen */ html[data-theme]:not(#cp) body .rst-ai-send .rst-ai-ic-stop { display: none; } html[data-theme]:not(#cp) body .rst-ai-busy .rst-ai-send .rst-ai-ic-send { display: none; } html[data-theme]:not(#cp) body .rst-ai-busy .rst-ai-send .rst-ai-ic-stop { display: block; width: 18px; height: 18px; } html[data-theme]:not(#cp) body .rst-ai-busy .rst-ai-send { background: var(--cp-surface-3, #1f2430) !important; color: var(--cp-strong) !important; box-shadow: inset 0 0 0 1px var(--cp-rust-line), 0 0 0 0 var(--cp-rust-soft) !important; animation: rstAiStopPulse 1.6s ease-out infinite; } html[data-theme]:not(#cp) body .rst-ai-busy .rst-ai-send:hover { background: var(--cp-rust) !important; color: #fff !important; } @keyframes rstAiStopPulse { 0% { box-shadow: inset 0 0 0 1px var(--cp-rust-line), 0 0 0 0 rgba(232,85,42,.35); } 100% { box-shadow: inset 0 0 0 1px var(--cp-rust-line), 0 0 0 9px rgba(232,85,42,0); } } html[data-theme]:not(#cp) body .rst-ai-status { display: flex; align-items: center; gap: 10px; margin: 6px 2px 0; font-size: 11px; color: var(--cp-dim); } html[data-theme]:not(#cp) body .rst-ai-status em { font-style: normal; letter-spacing: .02em; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .rst-ai-stop-inline { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; cursor: pointer; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-muted); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; } html[data-theme]:not(#cp) body .rst-ai-stop-inline i { width: 7px; height: 7px; border-radius: 1.5px; background: currentColor; } html[data-theme]:not(#cp) body .rst-ai-stop-inline:hover { border-color: var(--cp-rust-line); color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .rst-ai-msg.note { justify-content: center; } html[data-theme]:not(#cp) body .rst-ai-note { display: inline-flex; align-items: center; gap: 8px; margin: 2px auto; padding: 5px 12px; border-radius: 999px; border: 1px dashed var(--cp-line-2); color: var(--cp-dim); font-size: 11.5px; } html[data-theme]:not(#cp) body .rst-ai-note i { width: 7px; height: 7px; border-radius: 1.5px; background: var(--cp-dim); } html[data-theme]:not(#cp) body .rst-ai-retry { border: 0; background: transparent; padding: 0 0 0 4px; color: var(--cp-rust-hi); font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } html[data-theme]:not(#cp) body .rst-ai-bubble a.rst-ai-link { display: inline; font-weight: 600; color: var(--cp-strong) !important; text-decoration: none !important; border-bottom: 1px solid var(--cp-rust-line); transition: color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .rst-ai-bubble a.rst-ai-link:hover { color: var(--cp-rust-hi) !important; border-bottom-color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .rst-ai-link-ic { width: 11px; height: 11px; margin-left: 2px; vertical-align: -1px; fill: none; stroke: var(--cp-rust-hi); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } html[data-theme]:not(#cp) body .rst-ai-msg.ai .rst-ai-bubble > :first-child { margin-top: 0; } html[data-theme]:not(#cp) body .rst-ai-msg.ai .rst-ai-bubble > :last-child { margin-bottom: 0; } html[data-theme]:not(#cp) body .rst-ai-bubble p { margin: 0 0 8px; } html[data-theme]:not(#cp) body .rst-ai-bubble .rst-ai-h { margin: 14px 0 6px; color: var(--cp-strong); } html[data-theme]:not(#cp) body .rst-ai-bubble h4.rst-ai-h { font-size: 14px; font-weight: 600; } html[data-theme]:not(#cp) body .rst-ai-bubble h5.rst-ai-h { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .rst-ai-bubble ul, html[data-theme]:not(#cp) body .rst-ai-bubble ol { margin: 4px 0 8px; padding-left: 20px; } html[data-theme]:not(#cp) body .rst-ai-bubble li { margin: 3px 0; padding-left: 2px; } html[data-theme]:not(#cp) body .rst-ai-bubble li > ul, html[data-theme]:not(#cp) body .rst-ai-bubble li > ol { margin: 2px 0 4px; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp) body .rst-ai-bubble li::marker { color: var(--cp-dim); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .rst-ai-bubble ol > li::marker { color: var(--cp-rust-hi); font-weight: 600; } html[data-theme]:not(#cp) body .rst-ai-bubble hr { border: 0; border-top: 1px solid var(--cp-line); margin: 10px 0; } html[data-theme]:not(#cp) body .rst-ai-bubble blockquote { margin: 6px 0 8px; padding: 6px 12px; border-left: 2px solid var(--cp-rust-line); background: var(--cp-rust-soft); border-radius: 0 3px 3px 0; } html[data-theme]:not(#cp) body .rst-ai-bubble blockquote p:last-child { margin-bottom: 0; } html[data-theme]:not(#cp) body .rst-ai-table-wrap { overflow-x: auto; margin: 6px 0 10px; border: 1px solid var(--cp-line); border-radius: 3px; } html[data-theme]:not(#cp) body .rst-ai-bubble table.rst-ai-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0; } html[data-theme]:not(#cp) body .rst-ai-bubble table.rst-ai-table th { padding: 7px 10px !important; font-size: 9.5px !important; white-space: nowrap; } html[data-theme]:not(#cp) body .rst-ai-bubble table.rst-ai-table td { padding: 7px 10px !important; border-top: 1px solid var(--cp-line) !important; vertical-align: top; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .rst-ai-bubble table.rst-ai-table tbody tr:hover > td { background: var(--cp-hover) !important; } /* v5.15 · Kundenportal: kompakte Leiste auf Unterseiten + Tablet/Handy */ html[data-theme]:not(#cp) body .cp-portal-bar { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin: 0 0 18px; padding: 16px 20px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); position: relative; overflow: hidden; background: radial-gradient(420px 180px at 100% 0%, rgba(192,67,28,.12), transparent 70%), var(--cp-surface); } html[data-theme]:not(#cp) body .cp-portal-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cp-rust-hi), transparent); opacity: .6; } html[data-theme]:not(#cp) body .cp-pb-main { flex: 1 1 260px; min-width: 0; } html[data-theme]:not(#cp) body .cp-pb-title { margin-top: 6px; font-size: 19px; font-weight: 500; color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-pb-title em { font-style: normal; color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-pb-person { display: flex; align-items: center; gap: 10px; } html[data-theme]:not(#cp) body .cp-pb-person .cp-sp-avatar { width: 40px; height: 40px; } html[data-theme]:not(#cp) body .cp-pb-name { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-pb-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Tablet (iPad) */ @media (max-width: 1199px) { html[data-theme]:not(#cp) body .cp-portal-hero { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; } html[data-theme]:not(#cp) body .cp-ph-contact { min-width: 0; max-width: 520px; } html[data-theme]:not(#cp) body .cp-ph-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Handy */ @media (max-width: 640px) { html[data-theme]:not(#cp) body .cp-portal-hero { padding: 18px 16px; margin-bottom: 14px; } html[data-theme]:not(#cp) body .cp-ph-title { font-size: 26px; margin-top: 10px; } html[data-theme]:not(#cp) body .cp-ph-sub { font-size: 12.5px; margin-bottom: 14px; } html[data-theme]:not(#cp) body .cp-ph-actions { display: grid; grid-template-columns: 1fr 1fr; } html[data-theme]:not(#cp) body .cp-ph-actions .cp-ph-btn { justify-content: center; padding: 0 10px; font-size: 10.5px; letter-spacing: .1em; } html[data-theme]:not(#cp) body .cp-ph-actions .cp-ph-btn.is-primary { grid-column: 1 / -1; height: 46px; } html[data-theme]:not(#cp) body .cp-ph-tiles { grid-template-columns: 1fr 1fr; } html[data-theme]:not(#cp) body .cp-ph-tiles .cp-ph-tile:first-child { grid-column: 1 / -1; } html[data-theme]:not(#cp) body .cp-ph-tile b { font-size: 19px; } html[data-theme]:not(#cp) body .cp-ph-contact { padding: 12px 14px; } html[data-theme]:not(#cp) body .cp-portal-bar { padding: 14px 16px; gap: 12px; } html[data-theme]:not(#cp) body .cp-pb-person { display: none; } html[data-theme]:not(#cp) body .cp-pb-actions { width: 100%; display: grid; grid-template-columns: 1fr auto; } html[data-theme]:not(#cp) body .cp-pb-actions .cp-ph-btn { justify-content: center; font-size: 10.5px; } } /* KI-Assistent: Vorschlagskarten nie breiter als das Panel */ html[data-theme]:not(#cp) body .rst-ai-empty { box-sizing: border-box; } html[data-theme]:not(#cp) body .rst-ai-examples { max-width: min(380px, 100%) !important; box-sizing: border-box; align-self: center; } html[data-theme]:not(#cp) body .rst-ai-examples button { box-sizing: border-box !important; max-width: 100% !important; white-space: normal !important; } /* v5.15 · Kundenportal: Projekte als Karten (Umschalter Karten / Liste) */ html[data-theme]:not(#cp) body .cp-has-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; } html[data-theme]:not(#cp) body .cp-view-toggle { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r-sm); margin-left: auto; } html[data-theme]:not(#cp) body .cp-view-toggle button { border: 0; background: transparent; padding: 5px 12px; border-radius: 3px; color: var(--cp-muted); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } html[data-theme]:not(#cp) body .cp-view-toggle button.is-active { background: var(--cp-surface-2); color: var(--cp-strong); box-shadow: inset 0 0 0 1px var(--cp-line-2); } html[data-theme]:not(#cp) body .cp-projects[hidden] { display: none !important; } html[data-theme]:not(#cp) body .cp-hide-list { display: none !important; } html[data-theme]:not(#cp) body .cp-proj-controls { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } html[data-theme]:not(#cp) body .cp-proj-controls .cp-view-toggle { margin-left: 0; } html[data-theme]:not(#cp) body .cp-pf-n { display: inline-block; min-width: 14px; margin-left: 3px; font-size: 10px; letter-spacing: 0; color: var(--cp-dim); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-proj-filter button.is-active .cp-pf-n { color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-projects > .cp-sp-empty { grid-column: 1 / -1; margin: 6px 2px; } html[data-theme]:not(#cp) body .cp-projects > .cp-sp-empty a { color: var(--cp-rust-hi); margin-left: 6px; } @media (max-width: 640px) { html[data-theme]:not(#cp) body .cp-has-toggle { flex-wrap: wrap; } html[data-theme]:not(#cp) body .cp-proj-controls { width: 100%; justify-content: space-between; } html[data-theme]:not(#cp) body .cp-view-toggle button { padding: 5px 9px; } } html[data-theme]:not(#cp) body .cp-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 16px; } html[data-theme]:not(#cp) body .cp-proj { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: color-mix(in srgb, var(--cp-deep) 55%, transparent); text-decoration: none !important; color: var(--cp-text) !important; transition: border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-proj:hover { border-color: var(--cp-rust-line); transform: translateY(-2px); } html[data-theme]:not(#cp) body .cp-proj-top { display: flex; align-items: center; justify-content: space-between; } html[data-theme]:not(#cp) body .cp-proj-st { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-proj-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } html[data-theme]:not(#cp) body .cp-proj.is-open .cp-proj-st { color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-proj.is-done .cp-proj-st { color: var(--cp-success); } html[data-theme]:not(#cp) body .cp-proj.is-hold .cp-proj-st { color: var(--cp-warning); } html[data-theme]:not(#cp) body .cp-proj.is-cancel { opacity: .6; } html[data-theme]:not(#cp) body .cp-proj-id { font-size: 11px; color: var(--cp-dim); } html[data-theme]:not(#cp) body .cp-proj-title { font-size: 15px; font-weight: 600; color: var(--cp-strong); line-height: 1.35; min-height: 40px; } html[data-theme]:not(#cp) body .cp-proj-dates { font-size: 12px; color: var(--cp-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } html[data-theme]:not(#cp) body .cp-proj-dates em { font-style: normal; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; color: var(--cp-danger); border: 1px solid rgba(229,72,77,.4); } html[data-theme]:not(#cp) body .cp-proj-bar { height: 4px; border-radius: 999px; background: var(--cp-line); overflow: hidden; margin-top: 4px; } html[data-theme]:not(#cp) body .cp-proj-bar i { display: block; height: 100%; border-radius: inherit; background: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-proj.is-done .cp-proj-bar i { background: var(--cp-success); } html[data-theme]:not(#cp) body .cp-proj-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--cp-dim); letter-spacing: .06em; } html[data-theme]:not(#cp) body .cp-proj-foot b { color: var(--cp-text); font-weight: 600; } @media (max-width: 640px) { html[data-theme]:not(#cp) body .cp-projects { grid-template-columns: 1fr; padding: 12px; } } /* Liste im Projekte-Widget: Kopfzeile bleibt beim Scrollen stehen */ html[data-theme]:not(#cp) body #client-projects-list #project-table thead th { position: sticky !important; top: 0; z-index: 3; background: var(--cp-sticky-bg, var(--cp-surface-2)) !important; box-shadow: inset 0 -1px 0 var(--cp-line-2); } /* =========================================================================== v5.17 · iPhone & iPad: Ansicht und Bedienung (Prüflauf 402 / 820 / 1180 px + iOS-Simulator) =========================================================================== */ /* Seitlich scrollende Leisten: Rand ausblenden, solange noch etwas folgt (Klassen aus contentag-enhance.js) */ html[data-theme]:not(#cp) body .cp-scroll-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); } html[data-theme]:not(#cp) body .cp-scroll-less { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); } html[data-theme]:not(#cp) body .cp-scroll-more.cp-scroll-less { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 44px), transparent); } @media (max-width: 991px) { html[data-theme]:not(#cp) body .nav-tabs { scrollbar-width: none; -webkit-overflow-scrolling: touch; } html[data-theme]:not(#cp) body .nav-tabs::-webkit-scrollbar { display: none; } } /* Touch: Tipp-Flächen in der Topbar mindestens 38 px */ @media (pointer: coarse) { html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle { min-height: 38px !important; min-width: 38px !important; } html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell { min-width: 38px !important; min-height: 38px !important; } html[data-theme]:not(#cp) body .cp-kpi-flag { min-height: 30px; } html[data-theme]:not(#cp) body .cp-card-tools button, html[data-theme]:not(#cp) body .cp-card-tools a { min-width: 34px; min-height: 34px; } } /* iPhone: Eingabefelder mit 16 px – sonst zoomt Safari beim Antippen in die Seite */ @supports (-webkit-touch-callout: none) { @media (max-width: 767px) { html[data-theme]:not(#cp) body:not(#cp-ios) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .form-control, .rst-ai-input, .select2-container .select2-choice, .select2-search input) { font-size: 16px !important; } } } /* Handy: Karten-Kopfzeilen mit Knöpfen (z. B. Vertriebspipeline) umbrechen statt abschneiden */ @media (max-width: 640px) { html[data-theme]:not(#cp) body .cp-crm-card .card-header { flex-wrap: wrap; row-gap: 10px; } html[data-theme]:not(#cp) body .cp-crm-card .card-header .cp-crm-h-actions { order: 5; flex: 1 0 100%; margin: 0 !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } html[data-theme]:not(#cp) body .cp-crm-card .card-header .cp-crm-h-actions::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp) body .cp-crm-card .card-header .cp-crm-h-actions > * { flex: none; } html[data-theme]:not(#cp) body .cp-crm-card .card-header .cp-crm-h-actions ~ .cp-card-tools { margin-left: auto !important; } html[data-theme]:not(#cp) body .cp-crm-empty.is-inline { flex-direction: column; align-items: flex-start; gap: 12px; } html[data-theme]:not(#cp) body .cp-crm-empty.is-inline .cp-funnel-art { width: 96px; height: 70px; } } /* Handy: Uhrzeit im Begrüßungskopf entfällt (steht in der Statusleiste) – kein Umbruch in eine eigene Zeile */ @media (max-width: 480px) { html[data-theme]:not(#cp) body .cp-hero-meta .cp-clock { display: none; } } /* --------------------------------------------------------------------------- v5.17 · Handy: Topbar und untere Menüleiste im Content-Agency-Look --------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Topbar: Logo links (Hell/Dunkel steckt im ⋯-Menü), rechts einheitliche 40-px-Symbole */ html[data-theme]:not(#cp) body #default-navbar { min-height: 60px !important; } html[data-theme]:not(#cp) body #default-navbar .container-fluid { padding: 0 10px 0 14px !important; } html[data-theme]:not(#cp) body #default-navbar .navbar-collapse { align-items: center !important; margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp) body #default-navbar .navbar-nav.me-auto { align-items: center; margin: 0 auto 0 0 !important; padding: 0 !important; } html[data-theme]:not(#cp) body #default-navbar .navbar-nav.me-auto > li:has(> .mui-theme-toggle) { display: none !important; } html[data-theme]:not(#cp) body #default-navbar .navbar-nav.me-auto::before { content: ""; display: block; width: 96px; height: 24px; flex: none; background: url("/assets/images/ca-logo-light.svg") left center / contain no-repeat; } html[data-theme="light"]:not(#cp) body #default-navbar .navbar-nav.me-auto::before { background-image: url("/assets/images/ca-logo-dark.svg"); } html[data-theme]:not(#cp) body #default-navbar .navbar-nav:not(.me-auto) { align-items: center; gap: 0; } html[data-theme]:not(#cp) body #default-navbar .rst-topbar-wrap { gap: 0 !important; align-items: center; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle, html[data-theme]:not(#cp) body #default-navbar .rst-search-trigger, html[data-theme]:not(#cp) body #default-navbar .rst-lang-toggle, html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-btn, html[data-theme]:not(#cp) body #default-navbar #reminder-icon { width: 36px !important; height: 40px !important; min-width: 36px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 3px !important; background: transparent !important; box-shadow: none !important; color: var(--cp-muted) !important; transition: background var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle:active, html[data-theme]:not(#cp) body #default-navbar .rst-search-trigger:active, html[data-theme]:not(#cp) body #default-navbar .rst-lang-toggle:active, html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-btn:active, html[data-theme]:not(#cp) body #default-navbar #reminder-icon:active { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle svg, html[data-theme]:not(#cp) body #default-navbar .rst-search-trigger svg, html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-btn svg, html[data-theme]:not(#cp) body #default-navbar #reminder-icon svg { width: 20px !important; height: 20px !important; } html[data-theme]:not(#cp) body #default-navbar .rst-translator { background: transparent !important; border: 0 !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #default-navbar .rst-lang-toggle .rst-chev { display: none !important; } html[data-theme]:not(#cp) body #default-navbar .rst-lang-toggle .rst-current-flag { font-size: 18px; line-height: 1; } html[data-theme]:not(#cp) body #default-navbar .navbar-nav:not(.me-auto) > li { margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp) body #default-navbar #user-dropdown { padding: 0 0 0 6px !important; height: 40px; display: inline-flex !important; align-items: center; } html[data-theme]:not(#cp) body #default-navbar #user-dropdown .avatar-xs { width: 30px !important; height: 30px !important; margin: 0 !important; } html[data-theme]:not(#cp) body #default-navbar #user-dropdown .avatar-xs img { width: 30px !important; height: 30px !important; border-radius: 50%; box-shadow: 0 0 0 1px var(--cp-line-2); } html[data-theme]:not(#cp) body #default-navbar #user-dropdown .user-name { display: none !important; } /* Untere Menüleiste: kompakte Tab-Leiste mit Beschriftung, Chat als normaler Eintrag */ html[data-theme]:not(#cp) body #mobile-bottom-menu { height: auto !important; padding: 0 0 env(safe-area-inset-bottom) !important; background: color-mix(in srgb, var(--cp-deep) 92%, transparent) !important; backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); border-top: 1px solid var(--cp-line) !important; box-shadow: 0 -14px 32px -22px rgba(0,0,0,.9) !important; } html[data-theme]:not(#cp) body #mobile-bottom-menu > .d-flex { height: 58px; padding: 0 4px !important; align-items: stretch !important; } html[data-theme]:not(#cp) body #mobile-bottom-menu > .d-flex > * { flex: 1 1 0 !important; min-width: 0; width: auto !important; display: flex !important; padding: 0 !important; margin: 0 !important; } html[data-theme]:not(#cp) body #mobile-bottom-menu #mobile-function-button .dropdown { display: flex; flex: 1; } html[data-theme]:not(#cp) body #mobile-bottom-menu .sidebar-toggle-btn, html[data-theme]:not(#cp) body #mobile-bottom-menu .todo-btn, html[data-theme]:not(#cp) body #mobile-bottom-menu #mobile-function-button .dropdown-toggle, html[data-theme]:not(#cp) body #mobile-bottom-menu #mobile-function-button .home-btn, html[data-theme]:not(#cp) body #mobile-bottom-menu #js-init-chat-icon, html[data-theme]:not(#cp) body #mobile-bottom-menu #quick-add-icon { flex: 1; width: auto !important; height: auto !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 0 4px !important; margin: 0 !important; color: var(--cp-muted) !important; text-decoration: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body #mobile-bottom-menu #js-init-chat-icon #js-chat-min-icon.chat-min-icon { width: auto !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; display: flex !important; position: relative; transform: none !important; font-size: 0; } html[data-theme]:not(#cp) body #mobile-bottom-menu #js-init-chat-icon #js-chat-min-icon svg { color: inherit !important; stroke: currentColor !important; } /* ungelesen: kleiner Zähler in Rost statt Puls-Ring */ html[data-theme]:not(#cp) body #mobile-bottom-menu #js-init-chat-icon.has-message #js-chat-min-icon.chat-min-icon { min-width: 22px; height: 22px !important; padding: 0 6px !important; border-radius: 3px !important; align-items: center; justify-content: center; background: var(--cp-rust) !important; color: #fff !important; font-size: 11px; font-weight: 700; } html[data-theme]:not(#cp) body #mobile-bottom-menu svg { width: 22px !important; height: 22px !important; stroke-width: 1.8; color: inherit !important; transform: none !important; } html[data-theme]:not(#cp) body #mobile-bottom-menu .sidebar-toggle-btn::after, html[data-theme]:not(#cp) body #mobile-bottom-menu .todo-btn::after, html[data-theme]:not(#cp) body #mobile-bottom-menu #mobile-function-button .dropdown-toggle::after, html[data-theme]:not(#cp) body #mobile-bottom-menu #mobile-function-button .home-btn::after, html[data-theme]:not(#cp) body #mobile-bottom-menu #js-init-chat-icon::after, html[data-theme]:not(#cp) body #mobile-bottom-menu #quick-add-icon::after { display: block !important; margin: 0 !important; border: 0 !important; width: auto !important; height: auto !important; vertical-align: 0 !important; position: static !important; inset: auto !important; animation: none !important; box-shadow: none !important; border-radius: 0 !important; background: none !important; font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: .06em; color: inherit; white-space: nowrap; } html[data-theme]:not(#cp) body #mobile-bottom-menu .sidebar-toggle-btn::after { content: "Menü"; } html[data-theme]:not(#cp) body #mobile-bottom-menu .todo-btn::after { content: "To-dos"; } html[data-theme]:not(#cp) body #mobile-bottom-menu #mobile-function-button .dropdown-toggle::after { content: "Aktionen"; } html[data-theme]:not(#cp) body #mobile-bottom-menu #mobile-function-button .home-btn::after { content: "Start"; } html[data-theme]:not(#cp) body #mobile-bottom-menu #js-init-chat-icon::after { content: "Chat"; } html[data-theme]:not(#cp) body #mobile-bottom-menu #quick-add-icon::after { content: "Neu"; } html[lang^="en"][data-theme]:not(#cp) body #mobile-bottom-menu .sidebar-toggle-btn::after { content: "Menu"; } html[lang^="en"][data-theme]:not(#cp) body #mobile-bottom-menu #mobile-function-button .dropdown-toggle::after { content: "Actions"; } html[lang^="en"][data-theme]:not(#cp) body #mobile-bottom-menu #quick-add-icon::after { content: "New"; } html[data-theme]:not(#cp) body #mobile-bottom-menu .sidebar-toggle-btn:active, html[data-theme]:not(#cp) body #mobile-bottom-menu .todo-btn:active, html[data-theme]:not(#cp) body #mobile-bottom-menu #mobile-function-button .dropdown-toggle:active, html[data-theme]:not(#cp) body #mobile-bottom-menu #js-init-chat-icon:active, html[data-theme]:not(#cp) body #mobile-bottom-menu #quick-add-icon:active { color: var(--cp-strong) !important; transform: scale(.94); } /* Fokus: keine eckige Rahmenlinie in der Leiste – Symbol färbt sich stattdessen */ html[data-theme]:not(#cp) body #mobile-bottom-menu *:focus, html[data-theme]:not(#cp) body #mobile-bottom-menu *:focus-visible { outline: none !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #mobile-bottom-menu .menu-item:focus-visible, html[data-theme]:not(#cp) body #mobile-bottom-menu a:focus-visible, html[data-theme]:not(#cp) body #mobile-bottom-menu [role="button"]:focus-visible, html[data-theme]:not(#cp) body #mobile-bottom-menu .dropdown-toggle:focus-visible { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body #mobile-bottom-menu .show > .dropdown-toggle, html[data-theme]:not(#cp) body #mobile-bottom-menu .dropdown-toggle[aria-expanded="true"] { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown, html[data-theme]:not(#cp) body #mobile-bottom-menu .mobile-function-button-dropdown { bottom: calc(66px + env(safe-area-inset-bottom)) !important; left: 10px !important; right: 10px !important; width: auto !important; border-radius: 3px !important; overflow: hidden; } /* Inhalt endet über der Leiste; Menü-Schublade reicht bis zur (niedrigeren) Leiste */ html[data-theme]:not(#cp) body .page-container { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; } /* v5.70.0 (Prüfung): WhatsApp-Posteingang hält selbst Abstand zur Leiste (extensions.css, --wa-bottom) – die Seitenabstände (hier 72 px, RISE-Kern .scrollable-page 72 px, #page-content 15 px) erzeugten nur Leer-Scrollweg, beim Wischen rutschte der Chatkopf unter die Topbar */ html[data-theme]:not(#cp) body .page-container:has(.rst-inline-page-ext[data-rst-page="ext-whatsapp"]) { padding-bottom: 0 !important; } html[data-theme]:not(#cp) body .scrollable-page:has(.rst-inline-page-ext[data-rst-page="ext-whatsapp"]) { margin-bottom: 0 !important; } html[data-theme]:not(#cp) body #page-content:has(> .rst-inline-page-ext[data-rst-page="ext-whatsapp"]) { padding-bottom: 0 !important; } /* Höhe der Premium-Leiste für den Handy-Fallback der Inbox (extensions.css, < 576 px): 58 px + 1 px Linie + Home-Balken */ html[data-theme]:not(#cp) body .sc-app { --wa-bm: calc(59px + env(safe-area-inset-bottom, 0px)); } /* iPhone (cp-ios-app): Topbar 66 px + Statusleiste statt 60 px → Inbox beginnt 6 px + --cp-sat tiefer */ html.cp-ios-app[data-theme]:not(#cp) body .sc-app { --wa-top-fb: calc(103px + var(--cp-sat, 0px)); } html[data-theme]:not(#cp) body .sidebar { bottom: calc(59px + env(safe-area-inset-bottom)) !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-scroll { height: calc(100% - 66px) !important; } } /* v5.17 · ⋯-Menü: Glocke bündig wie die übrigen Einträge; auf Touch-Geräten keine Tastatur-Hinweise */ html[data-theme]:not(#cp) body .rst-ovf-list > li.rst-notif-bell-wrap { display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 12px; } html[data-theme]:not(#cp) body .rst-ovf-list > li.rst-notif-bell-wrap .rst-notif-bell { width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: inherit !important; flex: none; } html[data-theme]:not(#cp) body .rst-ovf-list > li.rst-notif-bell-wrap .rst-notif-bell svg { width: 17px !important; height: 17px !important; } @media (hover: none) and (pointer: coarse) { html[data-theme]:not(#cp) body .rst-ovf-head small, html[data-theme]:not(#cp) body .rst-mobile-overflow-panel [data-ovf="keys"], html[data-theme]:not(#cp) body .rst-mobile-overflow-panel .rst-ovf-keys { display: none !important; } } /* v5.17 · KI-Assistent als Bottom-Sheet (Handy/iPad hoch): Höhe nach sichtbarem Bereich (dvh) – iOS rechnet vh ohne Safari-Leisten, dann lag das Eingabefeld hinter der Adressleiste; Abstand zum Home-Balken */ @media (max-width: 991px) { html[data-theme]:not(#cp) body .rst-ai-sidebar { height: 85vh; height: 85dvh !important; max-height: calc(100dvh - 12px); } html[data-theme]:not(#cp) body .rst-ai-sidebar .rst-ai-input-wrap { margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; } } /* Leerzustand schrumpft/scrollt statt das Eingabefeld aus dem Panel zu drücken */ html[data-theme]:not(#cp) body .rst-ai-sidebar .rst-ai-chat-col { min-height: 0 !important; } html[data-theme]:not(#cp) body .rst-ai-sidebar .rst-ai-empty { min-height: 0 !important; overflow-y: auto; justify-content: safe center; } @media (max-height: 760px) { html[data-theme]:not(#cp) body .rst-ai-sidebar .rst-ai-empty { padding-top: 12px !important; padding-bottom: 12px !important; gap: 8px !important; } html[data-theme]:not(#cp) body .rst-ai-sidebar .rst-ai-empty-icon { width: 60px !important; height: 60px !important; } html[data-theme]:not(#cp) body .rst-ai-sidebar .rst-ai-empty-hint { font-size: 12.5px !important; } } /* v5.17.1 · 2-Faktor-Abfrage hat Vorrang: keine Tour/Hinweise darüber, Gate ganz oben */ html.rst-2fa-pending .cp-tour, body:has(.rst-2fa-gate) .cp-tour { display: none !important; } body .rst-2fa-gate { z-index: 2147483000 !important; } /* =========================================================================== v5.18 · Handy & App: Topbar, Profilmenü, App-Hinweis =========================================================================== */ /* Als App geöffnet (Home-Bildschirm): RISEs „Diese App installieren“ nie zeigen – auch nicht nach einem Seitenwechsel ohne Neuladen (Safari brach das RISE-Skript dort mit „duplicate variable“ ab) */ html.cp-pwa #install-pwa-button, html.cp-pwa #pwa-install-message-iphone { display: none !important; } @media (display-mode: standalone) { #install-pwa-button, #pwa-install-message-iphone { display: none !important; } } /* iPhone-App: kein Zusatzabstand über der Topbar – der Liquid-Glass-Zuschlag (+30 px) gilt nur fürs iPad */ html.cp-ios-standalone:not(.cp-ipad) { --cp-sat: env(safe-area-inset-top, 0px); } /* KI-Assistent: auch ohne Platz für „KI-Assistent“ als KI erkennbar (Symbol + Kürzel) */ @media (max-width: 1200px) { html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle { gap: 6px !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle::after { content: "KI"; display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1; color: inherit; } html[lang^="en"][data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle::after, html[lang^="tr"][data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle::after { content: "AI"; } } @media (max-width: 767px) { /* :not(#cp-ai) hebt die Gewichtung über die allgemeine Knopf-Regel der Topbar (button:not(…) … { border-radius }) */ html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle:not(#cp-ai) { width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 11px 0 9px !important; margin: 0 6px 0 0 !important; border-radius: 999px !important; border: 1px solid var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle svg { width: 16px !important; height: 16px !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle .rst-ai-tb-label { display: none !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle:not(#cp-ai):active { background: var(--cp-rust) !important; color: #fff !important; } html[data-theme="light"]:not(#cp) body #default-navbar .rst-ai-topbar-toggle:not(#cp-ai) { color: var(--cp-rust) !important; } } /* Private Erinnerungen stecken am Handy im ⋯-Menü (mobile-topbar.js) – dort wie die übrigen Einträge */ html[data-theme]:not(#cp) body #default-navbar .rst-ovf-list #reminder-icon { width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; flex: none; border: 0 !important; background: transparent !important; color: inherit !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ovf-list #reminder-icon svg { width: 17px !important; height: 17px !important; } /* Handy: Menüs der Topbar (Profil, Benachrichtigungen) als Karte UNTER der Topbar statt als Leiste über ihr – RISE setzt sie ≤ 590 px auf top: 62px; mit dem Statusleisten-Abstand deckten sie Avatar und ersten Eintrag ab. Die genaue Höhe setzt contentag-enhance.js beim Öffnen (--cp-dd-top = Unterkante der Topbar). */ @media (max-width: 590px) { html[data-theme]:not(#cp) body #default-navbar .navbar-nav .dropdown-menu { position: fixed !important; top: var(--cp-dd-top, calc(var(--cp-sat, 0px) + 66px)) !important; left: 10px !important; right: 10px !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; border-radius: 3px !important; max-height: calc(100vh - var(--cp-dd-top, 130px) - 84px); max-height: calc(100dvh - var(--cp-dd-top, 130px) - 76px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; } html[data-theme]:not(#cp) body #default-navbar .user-dropdown-menu { padding: 6px !important; } html[data-theme]:not(#cp) body #default-navbar .user-dropdown-menu .dropdown-item { min-height: 46px; display: flex !important; align-items: center; gap: 12px; padding: 0 12px !important; border-radius: 3px; font-size: 15px; } html[data-theme]:not(#cp) body #default-navbar .user-dropdown-menu .dropdown-item svg, html[data-theme]:not(#cp) body #default-navbar .user-dropdown-menu .dropdown-item .icon { width: 19px !important; height: 19px !important; margin: 0 !important; flex: none; } html[data-theme]:not(#cp) body #default-navbar .user-dropdown-menu .dropdown-divider { margin: 4px 6px !important; } } /* --------------------------------------------------------------------------- v5.18 · Handy-Prüflauf: Details auf allen Seiten --------------------------------------------------------------------------- */ /* Touch: iOS behält :hover/:focus nach dem Antippen → keine Kästen um Avatar/Symbole; runde Tipp-Flächen */ @media (hover: none) { html[data-theme]:not(#cp) body #default-navbar :focus-visible { outline: none !important; } } @media (max-width: 767px) { html[data-theme]:not(#cp) body #default-navbar .rst-mobile-overflow-btn:not(#cp-x), html[data-theme]:not(#cp) body #default-navbar .rst-search-trigger:not(#cp-x), html[data-theme]:not(#cp) body #default-navbar .rst-lang-toggle:not(#cp-x) { border-radius: 3px !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle.active:not(#cp-ai) { background: var(--cp-rust) !important; border-color: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body #default-navbar #user-dropdown:not(#cp-x) { border-color: transparent !important; background: transparent !important; } html[data-theme]:not(#cp) body #default-navbar .show > #user-dropdown .avatar-xs img { box-shadow: 0 0 0 2px var(--cp-rust-hi) !important; } } /* ⋯-Menü: Glocke auf Touch-Geräten nicht 38 px breit (Regel für die Topbar griff auch im Menü) → Text bündig */ html[data-theme]:not(#cp) body #default-navbar .rst-ovf-list > li.rst-notif-bell-wrap .rst-notif-bell { width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; padding: 0 !important; } /* Menü-Schublade: untere Leiste bleibt scharf und bedienbar (Menü schließt wieder), Abdunklung im Marken-Ton */ @media (max-width: 991px) { html[data-theme]:not(#cp) body.rst-mobile-sidebar-open::after { background: rgba(6, 7, 10, .58) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px); } html[data-theme]:not(#cp) body.rst-mobile-sidebar-open #mobile-bottom-menu { z-index: 1061 !important; } html[data-theme]:not(#cp) body.rst-mobile-sidebar-open #mobile-bottom-menu .sidebar-toggle-btn { color: var(--cp-rust-hi) !important; } } /* Seitenränder am Handy: weniger doppelte Innenabstände (Seite 15 + Reiter-Karte 20 + Karte) */ @media (max-width: 575px) { html[data-theme]:not(#cp) body .page-wrapper { padding-left: 10px !important; padding-right: 10px !important; } html[data-theme]:not(#cp) body .main-scrollable-page .tab-content { padding: 12px 10px !important; } html[data-theme]:not(#cp) body .main-scrollable-page .tab-content .tab-content { padding: 0 !important; } /* Kartenköpfe mit Titel + Knöpfen (z. B. „Aufgaben Kanban“ im Projekt): Titel nicht am Rand, Knöpfe einzeilig */ html[data-theme]:not(#cp) body .main-scrollable-page .card-header.title-tab { padding: 12px 12px 10px !important; } html[data-theme]:not(#cp) body .main-scrollable-page .title-button-group.grid-button-xs .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px !important; padding: 9px 10px !important; } } /* Reiterleisten am Handy immer einzeilig und seitlich wischbar (Rechnungen standen untereinander); leeres .tab-title (Knöpfe gibt RISE am Handy nicht aus) nimmt keine eigene Zeile ein */ @media (max-width: 767px) { html[data-theme]:not(#cp) body .nav-tabs:not(:has(.dropdown-menu)) { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } html[data-theme]:not(#cp) body .nav-tabs:not(:has(.dropdown-menu)) > li { flex: none !important; } html[data-theme]:not(#cp) body .nav-tabs > .tab-title:not(:has(*)) { display: none !important; } } /* Dunkel: RISEs Textklasse .dark (#4e5e6a) war auf dunklen Karten kaum lesbar (Aufgabentitel in der Handy-Liste) */ html[data-theme="dark"]:not(#cp) body .dark:not(.invoice-preview-container *):not(.badge):not(.btn) { color: var(--cp-text) !important; } html[data-theme="dark"]:not(#cp) body a.dark:not(.invoice-preview-container *):hover { color: var(--cp-strong) !important; } /* Hell-graue Trennlinien aus RISEs Handy-Layout (#f1f1f5) im Theme-Ton */ html[data-theme]:not(#cp) body .mini-list-pagination-container, html[data-theme]:not(#cp) body #client-summary .box .box-content, html[data-theme]:not(#cp) body .invoice-overview-widget .widget-right-section, html[data-theme]:not(#cp) body .action-option, html[data-theme]:not(#cp) body td.option a, html[data-theme]:not(#cp) body .mobile-mirror .datatable-tools .col-md-3, html[data-theme]:not(#cp) body table.dataTable > tbody > tr.child ul.dtr-details > li, html[data-theme]:not(#cp) body .dtr-details .edit:not(.dropdown-item), html[data-theme]:not(#cp) body .dtr-details .delete:not(.dropdown-item) { border-color: var(--cp-line) !important; } /* Seitenzahlen ausblenden, wenn es nur eine Seite gibt */ html[data-theme]:not(#cp) body .mini-list-pagination-container:not(:has(.page-item:not(.disabled):not(.active))) { display: none !important; } /* Kennzahl-Kacheln (Kunden-Überblick u. a.) am Handy zu zweit statt je eine Bildschirmhöhe */ @media (max-width: 575px) { html[data-theme]:not(#cp) body .row > .col-md-3:has(.dashboard-icon-widget) { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; margin-bottom: 12px !important; } html[data-theme]:not(#cp) body .row:has(> .col-md-3 .dashboard-icon-widget) { --bs-gutter-x: 12px; margin-bottom: 0 !important; } html[data-theme]:not(#cp) body .row > .col-md-3 .dashboard-icon-widget { height: 100%; margin: 0 !important; } html[data-theme]:not(#cp) body .row > .col-md-3 .dashboard-icon-widget .card-body { flex-direction: column !important; align-items: flex-start !important; gap: 10px; padding: 14px !important; } html[data-theme]:not(#cp) body .row > .col-md-3 .dashboard-icon-widget .widget-icon { width: 36px !important; height: 36px !important; min-width: 36px; margin: 0 !important; } html[data-theme]:not(#cp) body .row > .col-md-3 .dashboard-icon-widget .widget-icon svg { width: 18px !important; height: 18px !important; } html[data-theme]:not(#cp) body .row > .col-md-3 .dashboard-icon-widget .widget-details { text-align: left !important; padding: 0 !important; width: 100%; } html[data-theme]:not(#cp) body .row > .col-md-3 .dashboard-icon-widget .widget-details h1 { font-size: 26px !important; line-height: 1.1 !important; margin: 0 0 4px !important; } html[data-theme]:not(#cp) body .row > .col-md-3 .dashboard-icon-widget .widget-details span { font-size: 10px !important; letter-spacing: .12em; line-height: 1.35 !important; display: block; } /* Kunden-Detail: Projekte / Abos / Rechnungen … als 2er-Raster */ html[data-theme]:not(#cp) body #client-summary .box { display: grid !important; grid-template-columns: 1fr 1fr; margin-bottom: -1px; } html[data-theme]:not(#cp) body #client-summary .box .box-content { display: block !important; width: auto !important; border: 0 !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body #client-summary .box .box-content:nth-child(odd) { border-right: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body #client-summary .box .box-content:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0 !important; } html[data-theme]:not(#cp) body #client-summary .box .box-content .pt-3.pb-3 { padding: 14px 8px !important; } html[data-theme]:not(#cp) body #client-summary .card { overflow: hidden; } } /* Detailseiten: „‹ Kunden / ‹ Projekte“ als Pille in der Flucht des Inhalts; beim Scrollen fest oben – RISE färbt die Leiste dann weiß und legt sie unter die Statusleiste */ @media (max-width: 767px) { html[data-theme]:not(#cp) body .details-view-top-button { padding: 10px 10px 0; } html[data-theme]:not(#cp) body .details-view-top-button .back-action-btn:not(#cp-x) { display: inline-flex !important; align-items: center; gap: 2px; height: 34px; padding: 0 14px 0 8px !important; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface) !important; color: var(--cp-text) !important; font-weight: 600; font-size: 14px; } html[data-theme]:not(#cp) body .details-view-top-button .back-action-btn svg { width: 18px; height: 18px; } html[data-theme]:not(#cp) body .details-view-top-button.position-fixed-top { top: var(--cp-sat, 0px) !important; right: 0; padding: 8px 10px; background: color-mix(in srgb, var(--cp-deep) 94%, transparent) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--cp-line), 0 12px 24px -18px rgba(0,0,0,.9) !important; } } /* KI-Kurzprofil (Kunde/Interessent): zugeklappt blieb ein 29-px-Streifen mit halber Textzeile stehen */ .cp-assist-panel > * { transition: padding var(--cp-dur-l) var(--cp-e), border-color var(--cp-dur-l) var(--cp-e); } .cp-assist:not(.is-open) .cp-assist-panel > * { padding-top: 0 !important; padding-bottom: 0 !important; border-top-color: transparent !important; } /* Kalender: FullCalendar malt die feste Wochentagszeile weiß (--fc-page-bg-color) */ html[data-theme]:not(#cp) body .fc { --fc-page-bg-color: var(--cp-surface); --fc-neutral-bg-color: var(--cp-surface-2); } html[data-theme]:not(#cp) body .fc .fc-scrollgrid-section-sticky > * { background: var(--cp-surface) !important; } @media (max-width: 575px) { html[data-theme]:not(#cp) body .fc .fc-toolbar-title { font-size: 20px !important; } } /* „Google Meet“ im Marken-Stil statt Lila */ html[data-theme]:not(#cp) body .ca-meet-bar { margin-bottom: 12px; } html[data-theme]:not(#cp) body .ca-meet-btn { background: transparent !important; color: var(--cp-strong) !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; padding: 9px 14px !important; font: 600 11px var(--cp-font) !important; letter-spacing: .12em; text-transform: uppercase; gap: 8px !important; } html[data-theme]:not(#cp) body .ca-meet-btn svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .ca-meet-btn:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } /* Nachrichten am Handy: drei gleich breite Knöpfe, leere „Nachricht auswählen“-Fläche entfällt */ @media (max-width: 767px) { html[data-theme]:not(#cp) body .message-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 14px !important; } html[data-theme]:not(#cp) body .message-tabs > .btn { margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px !important; white-space: nowrap; } html[data-theme]:not(#cp) body .row > [class*="col-"]:has(> #message-details-section > #empty-message) { display: none !important; } } /* Untere Leiste: „Aktionen“ und „Neu“ als ruhige Liste statt einzeln umrandeter Knöpfe */ @media (max-width: 767px) { html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown, html[data-theme]:not(#cp) body #mobile-bottom-menu .mobile-function-button-dropdown { padding: 6px !important; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; box-shadow: var(--cp-shadow-pop) !important; max-height: calc(100dvh - 160px); overflow-y: auto; } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown .dropdown-item, html[data-theme]:not(#cp) body #mobile-bottom-menu .mobile-function-button-dropdown .dropdown-item { display: flex !important; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px !important; margin: 0 !important; border: 0 !important; border-radius: 3px !important; background: transparent !important; box-shadow: none !important; color: var(--cp-text) !important; font-size: 15px !important; white-space: normal; text-align: left; } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown .dropdown-item svg, html[data-theme]:not(#cp) body #mobile-bottom-menu .mobile-function-button-dropdown .dropdown-item svg { width: 19px !important; height: 19px !important; margin: 0 !important; color: var(--cp-rust-hi) !important; flex: none; } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown .dropdown-item:active, html[data-theme]:not(#cp) body #mobile-bottom-menu .mobile-function-button-dropdown .dropdown-item:active { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } } /* Kanban am Handy: Spalten fast bildschirmbreit, wischen rastet spaltenweise ein */ @media (max-width: 767px) { html[data-theme]:not(#cp) body #kanban-wrapper { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } html[data-theme]:not(#cp) body #kanban-container { display: flex !important; gap: 10px; width: max-content !important; padding: 0 !important; margin: 0 !important; } html[data-theme]:not(#cp) body #kanban-container > .kanban-col { float: none !important; flex: none; width: min(300px, calc(100vw - 64px)) !important; margin: 0 !important; scroll-snap-align: start; } } /* Touch: Umschalter und kleine Knöpfe mindestens 34 px hoch (Dashboard-Ansichten, Filter-Chips) */ @media (pointer: coarse) { html[data-theme]:not(#cp) body .cp-dash-views button, html[data-theme]:not(#cp) body .cp-dash-views a { min-height: 34px; } } /* .box ist in RISE-Tabellen nur ein Layout-Helfer (Avatar + Name) – keine Karten-Umrandung (Ansprechpartner-Liste) */ html[data-theme]:not(#cp) body td .box, html[data-theme]:not(#cp) body .box-wrapper .box { border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Kartenkopf-Knöpfe („Einladung senden“, „Ansprechpartner hinzufügen“) am Handy als einzeilige Chips */ @media (max-width: 575px) { html[data-theme]:not(#cp) body .card-header > .card-header-button.float-end { float: none !important; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; border: 0 !important; background: transparent !important; } html[data-theme]:not(#cp) body .card-header > .card-header-button.float-end > a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px !important; white-space: nowrap; font-size: 13px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r-sm); color: var(--cp-text); } html[data-theme]:not(#cp) body .card-header > .card-header-button.float-end > a svg { width: 15px; height: 15px; } } /* „Neu“ in der unteren Leiste: Symbole vor den Einträgen (RISE liefert dort nur Text); Leiste zeigt „Neu“ aktiv */ @media (max-width: 767px) { html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown .dropdown-item::before { content: ""; width: 19px; height: 19px; flex: none; background: var(--cp-rust-hi); -webkit-mask: var(--cp-qa-ico) center / contain no-repeat; mask: var(--cp-qa-ico) center / contain no-repeat; } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown [id="js-quick-add-task"] { --cp-qa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown [id="js-quick-add-multiple-task"] { --cp-qa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown [id="js-quick-add-project-time"] { --cp-qa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown [id="js-quick-add-event"] { --cp-qa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown [id="js-quick-add-note"] { --cp-qa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M9 13h6M9 17h4'/%3E%3C/svg%3E"); } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown [id="js-quick-add-to-do"] { --cp-qa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); } html[data-theme]:not(#cp) body #mobile-bottom-menu .quick-add-dropdown [id="js-quick-add-ticket"] { --cp-qa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m5.6 5.6 3.6 3.6m5.6 5.6 3.6 3.6m0-12.8-3.6 3.6m-5.6 5.6-3.6 3.6'/%3E%3C/svg%3E"); } html[data-theme]:not(#cp) body #mobile-bottom-menu .show > #quick-add-icon, html[data-theme]:not(#cp) body #mobile-bottom-menu #quick-add-icon[aria-expanded="true"], html[data-theme]:not(#cp) body #mobile-bottom-menu .show > .dropdown-toggle #quick-add-icon { color: var(--cp-rust-hi) !important; } } /* Listen: „10 ▾“ (Einträge pro Seite) hatte zwei Rahmen – äußerer select2-Container ohne eigenen Rahmen */ html[data-theme]:not(#cp) body .dt-length .select2-container.form-select { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; height: auto !important; } /* ⋯-Menü am Handy endet über der unteren Leiste und scrollt bei Bedarf */ @media (max-width: 767px) { html[data-theme]:not(#cp) body .rst-mobile-overflow-panel.open { max-height: calc(100vh - 150px); max-height: calc(100dvh - var(--cp-sat, 0px) - 150px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; } } /* =========================================================================== v5.19 · Handy & iPad vertieft =========================================================================== */ /* Formulare am Handy (RISE #ajaxModal): RISE setzt die Höhe des Inhalts fest (Fensterhöhe − einzeilige Fußzeile); die Fußzeile ist am Handy aber zweizeilig → „Speichern“ lag unter dem Bildschirmrand. Jetzt Spalten-Layout: Kopf und Fußzeile fest, Inhalt scrollt dazwischen; „Speichern“ als breiter Knopf unten im Daumenbereich. */ @media (max-width: 575px) { html[data-theme]:not(#cp) body #ajaxModal .modal-dialog { height: 100%; margin: 0 !important; max-width: none; } html[data-theme]:not(#cp) body #ajaxModal .modal-content { height: 100%; display: flex !important; flex-direction: column; border-radius: 0 !important; overflow: hidden; } /* alle Hüllen zwischen .modal-content und .modal-body (#ajaxModalContent, form, .post-dropzone …) als Spalte – v5.174.1: ohne die versteckten Fenster des Texteditors (Summernote .note-modal: Link, Bild, Video, Hilfe), die sonst sichtbar wurden */ html[data-theme]:not(#cp) body #ajaxModal .modal-content :is(div, form):not(.note-modal, .note-modal *):has(.modal-body) { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; } html[data-theme]:not(#cp) body #ajaxModal .modal-header, html[data-theme]:not(#cp) body #ajaxModal .modal-footer { flex: none; } html[data-theme]:not(#cp) body #ajaxModal .modal-body { flex: 1 1 auto; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important; background: var(--cp-surface) !important; box-shadow: 0 -14px 24px -20px rgba(0,0,0,.9); } html[data-theme]:not(#cp) body #ajaxModal .modal-footer > * { margin: 0 !important; float: none !important; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 11.5px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer .btn-info { order: 3; flex: 1 1 auto; margin-left: auto !important; background: transparent !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer .btn-info svg { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer .btn-primary { order: 5; flex: 1 0 100%; min-height: 48px; justify-content: center; display: inline-flex; align-items: center; gap: 8px; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer .upload-file-button, html[data-theme]:not(#cp) body #ajaxModal .modal-footer .record-start-btn, html[data-theme]:not(#cp) body #ajaxModal .modal-footer .record-end-btn { min-width: 44px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; } } /* Listen am Handy: Suche und „Filter“ in EINER Zeile (vorher Filter-Knopf rechts, Suche darunter) */ @media (max-width: 575px) { html[data-theme]:not(#cp) body .filter-section-container .filter-section-flex-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; } html[data-theme]:not(#cp) body .filter-section-container .filter-section-left { display: contents !important; } html[data-theme]:not(#cp) body .filter-section-container .filter-section-right { order: 0; flex: 1 1 0% !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp) body .filter-section-container .filter-section-right .filter-item-box { margin: 0 !important; width: 100% !important; padding: 0 !important; } html[data-theme]:not(#cp) body .filter-section-container .filter-section-right input { width: 100% !important; } html[data-theme]:not(#cp) body .filter-section-container .show-hide-filter-button-box { order: 1; flex: none; margin: 0 !important; } html[data-theme]:not(#cp) body .filter-section-container .smart-filter-dropdown-box:has(> .smart-filter-dropdown-container.hide) { display: none !important; } html[data-theme]:not(#cp) body .filter-section-container .bookmarked-filter-button-container { order: 2; flex: 1 0 100%; } html[data-theme]:not(#cp) body .filter-section-container .bookmarked-filter-button-container:empty { display: none !important; } /* „Neuen Filter hinzufügen“ → kurzer Knopf „Filter“ neben der Suche */ html[data-theme]:not(#cp) body .filter-section-container .show-hide-filter-button-box .btn { height: 40px; padding: 0 12px !important; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px !important; } html[data-theme]:not(#cp) body .filter-section-container .show-hide-filter-button-box .btn svg { width: 16px; height: 16px; margin: 0 !important; } html[data-theme]:not(#cp) body .filter-section-container .show-hide-filter-button-box .add-filter-text { display: none !important; } html[data-theme]:not(#cp) body .filter-section-container .show-hide-filter-button-box .btn::after { content: "Filter"; } } /* iPad hoch (768–991 px, Seitenleiste ausgeblendet): Logo neben dem Menü-Knopf statt Hell/Dunkel-Schalter (steckt im ⋯-Menü) */ @media (min-width: 768px) and (max-width: 991px) { html[data-theme]:not(#cp) body #default-navbar .navbar-nav.me-auto { align-items: center; } html[data-theme]:not(#cp) body #default-navbar .navbar-nav.me-auto > li { order: 2; } html[data-theme]:not(#cp) body #default-navbar .navbar-nav.me-auto > li.sidebar-toggle-btn-li { order: 0; } html[data-theme]:not(#cp) body #default-navbar .navbar-nav.me-auto > li:has(> .mui-theme-toggle) { display: none !important; } html[data-theme]:not(#cp) body #default-navbar .navbar-nav.me-auto::before { content: ""; order: 1; display: block; flex: none; width: 108px; height: 27px; margin: 0 14px 0 4px; background: url("/assets/images/ca-logo-light.svg") left center / contain no-repeat; } html[data-theme="light"]:not(#cp) body #default-navbar .navbar-nav.me-auto::before { background-image: url("/assets/images/ca-logo-dark.svg"); } } /* Sprache in der Topbar: gleicher ruhiger Stil wie die übrigen Symbole (vorher dunkler Kasten um die Flagge) */ html[data-theme]:not(#cp) body #default-navbar .rst-translator { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } html[data-theme]:not(#cp) body #default-navbar .rst-lang-toggle { background: transparent !important; border-color: transparent !important; } html[data-theme]:not(#cp) body #default-navbar .rst-lang-toggle:hover, html[data-theme]:not(#cp) body #default-navbar .rst-lang-toggle[aria-expanded="true"] { background: var(--cp-hover) !important; } /* Touch (iPad/iPhone): iOS behält :hover nach dem Antippen – Karten und Knöpfe blieben angehoben/vergrößert. Stattdessen kurzes Eindrücken beim Antippen. */ @media (hover: none) { html[data-theme]:not(#cp) body .dashboard-icon-widget:hover, html[data-theme]:not(#cp) body .kanban-item:hover, html[data-theme]:not(#cp) body .cp-qa:hover, html[data-theme]:not(#cp) body a.cp-cw-day:hover, html[data-theme]:not(#cp) body a.cp-crm-hbtn:hover, html[data-theme]:not(#cp) body .cp-crm-btn:hover, html[data-theme]:not(#cp) body a.cp-pl-stage:hover, html[data-theme]:not(#cp) body button.cp-chip:hover, html[data-theme]:not(#cp) body a.cp-chip:hover, html[data-theme]:not(#cp) body table.dataTable td.option > a:hover, html[data-theme]:not(#cp) body a.cp-pl-kpi:hover, html[data-theme]:not(#cp) body .cp-ph-tile:hover, html[data-theme]:not(#cp) body .cp-sp-card:hover, html[data-theme]:not(#cp) body .cp-proj:hover, html[data-theme]:not(#cp) body .rst-act-fchip:hover, html[data-theme]:not(#cp) body button.cp-overdue:hover, html[data-theme]:not(#cp) body .cp-hero-stats a:hover .dashboard-icon-widget, html[data-theme]:not(#cp) body #js-init-chat-icon #js-chat-min-icon.chat-min-icon:hover, html[data-theme]:not(#cp) body #default-navbar .navbar-nav > li > a.nav-link:hover svg, html[data-theme]:not(#cp) body #default-navbar .rst-topbar-wrap > button:hover svg, html[data-theme]:not(#cp) body .sidebar .sidebar-menu li a:hover svg { transform: none !important; } html[data-theme]:not(#cp) body .cp-qa:active, html[data-theme]:not(#cp) body a.cp-pl-stage:active, html[data-theme]:not(#cp) body a.cp-cw-day:active, html[data-theme]:not(#cp) body .cp-proj:active, html[data-theme]:not(#cp) body .kanban-item:active, html[data-theme]:not(#cp) body .dashboard-icon-widget:active, html[data-theme]:not(#cp) body .btn:active { transform: scale(.98) !important; transition-duration: 80ms !important; } } /* Vertriebspipeline: Phasennamen auf schmalen Kacheln ganz lesbar („VERHANDLUNG“ wurde abgeschnitten) */ @media (max-width: 1180px) { html[data-theme]:not(#cp) body .cp-pl-flow { grid-auto-columns: minmax(126px, 1fr); } html[data-theme]:not(#cp) body .cp-pl-name { letter-spacing: .06em; font-size: 10px; } } /* Seitenkopf-Knöpfe: der Haupt-Knopf (immer der letzte: „Kunde/Projekt/Aufgabe … hinzufügen“) in Rost; auf Tablets kompakter, damit die Reihe nicht umbricht */ html[data-theme]:not(#cp) body .title-button-group > .btn:last-child:not(.dropdown-toggle):not(.btn-danger) { background: var(--cp-rust) !important; border-color: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body .title-button-group > .btn:last-child:not(.dropdown-toggle):not(.btn-danger) svg { color: #fff !important; } html[data-theme]:not(#cp) body .title-button-group > .btn:last-child:not(.dropdown-toggle):not(.btn-danger):hover { background: var(--cp-rust-hi) !important; border-color: var(--cp-rust-hi) !important; } @media (max-width: 1366px) { html[data-theme]:not(#cp) body .title-button-group .btn { padding: 7px 11px !important; font-size: 12.5px !important; } html[data-theme]:not(#cp) body .title-button-group .btn svg { width: 15px; height: 15px; } } /* Modul-Seiten am Handy */ @media (max-width: 575px) { /* Content-Kalender: vier Filter als 2×2-Raster statt vier voller Zeilen; Zurücksetzen als Text-Knopf */ html[data-theme]:not(#cp) body .rst-cal2-filter-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; } html[data-theme]:not(#cp) body .rst-cal2-filter-row > select { width: 100% !important; min-width: 0; margin: 0 !important; } html[data-theme]:not(#cp) body .rst-cal2-filter-row > .rst-cal2-reset { grid-column: 1 / -1; justify-self: start; font-size: 0 !important; padding: 6px 10px !important; } html[data-theme]:not(#cp) body .rst-cal2-filter-row > .rst-cal2-reset::after { content: "× Filter zurücksetzen"; font-size: 12.5px; } /* Mediengestaltung: Titel nicht vom Knopf abgeschnitten */ html[data-theme]:not(#cp) body .rst-media-head .rst-media-head-text { flex: 1 1 100%; min-width: 0; } html[data-theme]:not(#cp) body .rst-media-head h2 { white-space: normal; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .rst-media-status-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } html[data-theme]:not(#cp) body .rst-media-status-pills > * { flex: none; } } /* Meetings im Marken-Look (vorher Lila-Verlauf im Titel und in Knöpfen) */ html[data-theme]:not(#cp) body .rst-meet-header { background: transparent !important; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .rst-meet-header h1 { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-meet-card-time-rel { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .rst-meet-btn-save, html[data-theme]:not(#cp) body .rst-meet-link-copy { background: var(--cp-rust) !important; box-shadow: none !important; color: #fff !important; } html[data-theme]:not(#cp) body .rst-meet-empty-icon { font-size: 0 !important; width: 56px; height: 56px; margin: 0 auto 14px !important; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); display: grid; place-items: center; } html[data-theme]:not(#cp) body .rst-meet-empty-icon::before { content: ""; width: 24px; height: 24px; background: var(--cp-rust-hi); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8Z'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8Z'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E") center / contain no-repeat; } html[data-theme]:not(#cp) body .rst-meet-empty p { color: var(--cp-strong) !important; } /* =========================================================================== v5.20 · Handy & iPad präzise: Tipp-Flächen, Formulare auf dem iPad, Lesbarkeit (Messlauf über 18 Seiten in 402 px: Tipp-Flächen < 40 px, Schrift < 12 px, Kontrast < 4,5) =========================================================================== */ /* Tipp-Flächen am Handy nach Apple-Richtlinie (44 pt für Hauptknöpfe, 36–40 pt für Umschalter) – über die Breite statt (pointer: coarse), damit es auch bei angeschlossener Tastatur/Maus gilt */ @media (max-width: 767px) { html[data-theme]:not(#cp) body .cp-qa { min-height: 44px; font-size: 11.5px !important; } html[data-theme]:not(#cp) body .cp-dash-views button, html[data-theme]:not(#cp) body .cp-dash-views a { min-height: 36px; padding-left: 12px !important; padding-right: 12px !important; } html[data-theme]:not(#cp) body .cp-kpi-flag { min-height: 32px; } html[data-theme]:not(#cp) body .main-scrollable-page .btn:not(.btn-xs):not(.btn-sm):not(.dropdown-toggle):not(.page-link), html[data-theme]:not(#cp) body .main-scrollable-page label.btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } html[data-theme]:not(#cp) body .btn-group.filter > .btn, html[data-theme]:not(#cp) body .btn-group.filter > label.btn { min-height: 40px; } html[data-theme]:not(#cp) body .details-view-top-button .back-action-btn:not(#cp-x) { height: 40px; } html[data-theme]:not(#cp) body a.star-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; } html[data-theme]:not(#cp) body .fc .fc-button { min-height: 42px; min-width: 42px; } html[data-theme]:not(#cp) body .card-header .card-header-button > a, html[data-theme]:not(#cp) body .card-header a.p10 { min-height: 40px; } /* Formularfelder: 44 px hoch (Text bleibt 16 px – kein Zoom) */ html[data-theme]:not(#cp) body .form-control:not(textarea), html[data-theme]:not(#cp) body .select2-container .select2-choice, html[data-theme]:not(#cp) body .select2-container-multi .select2-choices { min-height: 44px; } html[data-theme]:not(#cp) body .select2-container .select2-choice { display: flex !important; align-items: center; } /* Listen-Fuß: „10 ▾“ gleich hoch; Excel/Drucken am Handy ausgeblendet (auf iPad/Desktop weiter da) */ html[data-theme]:not(#cp) body .dt-length .select2-choice { min-height: 40px; } } @media (max-width: 575px) { html[data-theme]:not(#cp) body .dt-buttons .buttons-excel, html[data-theme]:not(#cp) body .dt-buttons .buttons-print, html[data-theme]:not(#cp) body .datatable-export { display: none !important; } /* To-dos: Eingabe und „Speichern“ gleich hoch, bündig */ html[data-theme]:not(#cp) body .todo-input-box .input-group .form-control, html[data-theme]:not(#cp) body .todo-input-box .input-group .btn { height: 46px !important; min-height: 46px; } } /* Lesbarkeit: kleinste Beschriftungen am Handy nicht unter 10,5 px (Kalender-Wochentage 9 px, Profil-Kennzahlen 9,5 px) */ @media (max-width: 767px) { html[data-theme]:not(#cp) body .rst-cal2-card .rst-cal2-dow, html[data-theme]:not(#cp) body .rst-inline-page [class*="dow"], html[data-theme]:not(#cp) body .text-off.uppercase, html[data-theme]:not(#cp) body .dashboard-icon-widget .widget-details span { font-size: 10.5px !important; } } /* Dunkel: RISEs .text-default (#4e5e6a) – Kundenname unter Projekten hatte Kontrast 2,8 */ html[data-theme="dark"]:not(#cp) body .text-default:not(.invoice-preview-container *) { color: var(--cp-muted) !important; } html[data-theme="dark"]:not(#cp) body a.text-default:not(.invoice-preview-container *) { color: var(--cp-text) !important; } /* Formulare auf dem iPad (und Handy quer): RISE setzt auch hier die Inhaltshöhe fest → „Speichern“ unter dem Rand. Dialog höchstens Bildschirmhöhe, Inhalt scrollt, Fußzeile immer sichtbar; im Hochformat breiter (Knöpfe in einer Reihe) */ @media (min-width: 576px) and (max-width: 1366px) { html[data-theme]:not(#cp) body #ajaxModal .modal-dialog { margin-top: 20px; margin-bottom: 20px; } html[data-theme]:not(#cp) body #ajaxModal .modal-content { display: flex !important; flex-direction: column; max-height: calc(100vh - 40px); max-height: calc(100dvh - var(--cp-sat, 0px) - 40px); overflow: hidden; } html[data-theme]:not(#cp) body #ajaxModal .modal-content :is(div, form):not(.note-modal, .note-modal *):has(.modal-body) { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; } html[data-theme]:not(#cp) body #ajaxModal .modal-header, html[data-theme]:not(#cp) body #ajaxModal .modal-footer { flex: none; } html[data-theme]:not(#cp) body #ajaxModal .modal-body { flex: 1 1 auto; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer { flex-wrap: wrap; gap: 8px; padding: 14px 18px !important; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer > * { margin: 0 !important; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer > .me-auto { margin-right: auto !important; display: flex; gap: 8px; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer .btn { min-height: 42px; padding-left: 14px !important; padding-right: 14px !important; letter-spacing: .06em !important; } } @media (min-width: 576px) and (max-width: 991px) { html[data-theme]:not(#cp) body #ajaxModal .modal-dialog.modal-lg { max-width: min(740px, calc(100vw - 48px)); } } /* Nachmessung: restliche kleine Tipp-Flächen am Handy (Dashboard-Werkzeuge, Filter-Umschalter, „Erinnerung hinzufügen“) */ @media (max-width: 767px) { html[data-theme]:not(#cp) body .cp-dash-edit { min-height: 36px; } html[data-theme]:not(#cp) body a.cp-crm-hbtn { min-height: 34px; display: inline-flex; align-items: center; } html[data-theme]:not(#cp) body .cp-card-collapse, html[data-theme]:not(#cp) body .cp-card-tools button, html[data-theme]:not(#cp) body .cp-card-tools a { min-width: 36px; min-height: 36px; } html[data-theme]:not(#cp) body .cp-crm-card select, html[data-theme]:not(#cp) body .cp-dash-grid .card select { min-height: 34px; } html[data-theme]:not(#cp) body .btn-group.filter .btn { min-height: 40px; display: inline-flex; align-items: center; } html[data-theme]:not(#cp) body .add-reminder-btn { display: inline-flex !important; align-items: center; min-height: 40px; } html[data-theme]:not(#cp) body .cp-hero-stats .widget-details span, html[data-theme]:not(#cp) body .cp-crm-card small { font-size: 10.5px !important; } } /* --------------------------------------------------------------------------- v5.20 · Kundenliste (und Interessenten) auf dem iPad: Name nicht mehr auf fünf Zeilen gequetscht --------------------------------------------------------------------------- */ @media (min-width: 768px) { /* Name-Spalte: Mindestbreite, Name kräftig, Zeilen-Infos kompakt */ html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td:has(> a.js-selection-id), html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td:has(> .cp-row-meta) { min-width: 230px; white-space: normal; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td > a.js-selection-id { font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) .cp-row-meta { gap: 4px 8px; margin-top: 5px; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) .cp-row-meta > * { white-space: nowrap; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) .cp-row-quick { display: inline-flex; gap: 2px; } /* Kopfzeilen dürfen zweizeilig sein, Inhalte (Kontakt, Telefon, Beträge) bleiben einzeilig */ html[data-theme]:not(#cp) body :is(#client-table, #lead-table) thead th { white-space: normal; line-height: 1.35; vertical-align: bottom; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) tbody td { vertical-align: middle; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) tbody td:not(:has(> a.js-selection-id)):not(:has(ul)) { white-space: nowrap; } /* Kundengruppen als kleine Chips statt Aufzählung mit Punkt */ html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td ul > li { padding: 2px 9px; border: 1px solid var(--cp-line-2); border-radius: 999px; font-size: 12px; line-height: 1.5; color: var(--cp-text); white-space: nowrap; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td ul > li::marker { content: ""; } } /* Touch-Tablets: großzügigere Zeilen-Werkzeuge (Notiz, Wiedervorlage) */ @media (min-width: 768px) and (pointer: coarse) { html[data-theme]:not(#cp) body .cp-row-quick button { min-width: 34px; min-height: 34px; } html[data-theme]:not(#cp) body .cp-row-miss { min-height: 26px; } } /* --------------------------------------------------------------------------- v5.20 · Kalender am Handy: klare Kopfzeile, kompakte Filter, „Heute“ markiert --------------------------------------------------------------------------- */ @media (max-width: 575px) { /* Filter (Ereignisbezeichnung, Ereignistyp) nebeneinander */ html[data-theme]:not(#cp) body .events-title-button { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 14px !important; float: none !important; width: 100%; } html[data-theme]:not(#cp) body .events-title-button > * { float: none !important; margin: 0 !important; width: auto !important; min-width: 0; } html[data-theme]:not(#cp) body .events-title-button > input.select2 { display: none !important; } html[data-theme]:not(#cp) body .events-title-button .select2-choice > span, html[data-theme]:not(#cp) body .events-title-button .select2-chosen { font-weight: 400 !important; font-size: 14px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .events-title-button #calendar-filter-dropdown .dropdown-toggle, html[data-theme]:not(#cp) body .events-title-button #calendar-filter-dropdown > button, html[data-theme]:not(#cp) body .events-title-button #calendar-filter-dropdown .btn { width: 100%; min-height: 44px; justify-content: space-between; } html[data-theme]:not(#cp) body .events-title-button #calendar-filter-dropdown > * { width: 100%; } /* Kopfzeile: ‹ › | Monat Jahr | Heute – darunter Monat/Woche/Tag/Liste über die volle Breite */ html[data-theme]:not(#cp) body .fc .fc-header-toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 10px 8px; margin-bottom: 14px !important; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) { display: contents !important; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) > .fc-button-group { order: 0; flex: none; margin: 0 !important; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(2) { order: 1; flex: 1 1 0; min-width: 0; text-align: center; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) > .fc-today-button { order: 2; flex: none; margin: 0 !important; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) { order: 3; flex: 1 0 100%; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) > .fc-button-group { display: flex !important; width: 100%; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button { flex: 1 1 0; } html[data-theme]:not(#cp) body .fc .fc-toolbar-title { font-size: 18px !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; } html[data-theme]:not(#cp) body .fc .fc-button { font-size: 13px !important; } /* Monatsraster: Zahlen rechts oben, heute als Rost-Kreis; Termine als kompakte Zeilen */ html[data-theme]:not(#cp) body .fc .fc-daygrid-day-number { font-size: 13px; padding: 4px 6px !important; } html[data-theme]:not(#cp) body .fc .fc-day-today { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .fc .fc-day-today .fc-daygrid-day-number { min-width: 24px; height: 24px; margin: 3px; padding: 0 6px !important; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-rust); color: #fff !important; font-weight: 700; } html[data-theme]:not(#cp) body .fc .fc-daygrid-event { font-size: 11px; margin: 1px 2px !important; } html[data-theme]:not(#cp) body .fc .fc-daygrid-day-frame { min-height: 64px; } } /* iPad (768–1400 px): ID, „Erhaltene Zahlungen“ und auf dieser Seite leere Spalten (z. B. Labels) ausblenden; falls es trotzdem nicht passt, scrollt die Tabelle innerhalb der Karte statt über den Rand */ @media (min-width: 768px) and (max-width: 1400px) { html[data-theme]:not(#cp) body :is(#client-table, #lead-table) :is(th, td):is(.cp-col-id, .cp-col-paid, .cp-col-empty) { display: none !important; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) :is(th, td) { padding-left: 10px !important; padding-right: 10px !important; } html[data-theme]:not(#cp) body .table-responsive:has(> .dt-container > :is(#client-table, #lead-table)), html[data-theme]:not(#cp) body .dt-container:has(> :is(#client-table, #lead-table)) { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } } @media (min-width: 768px) and (max-width: 1400px) { /* Karte (Flex) übernahm die Tabellenbreite → ragte über den Rand; jetzt scrollt nur die Tabelle */ html[data-theme]:not(#cp) body .card:has(:is(#client-table, #lead-table)), html[data-theme]:not(#cp) body .card:has(:is(#client-table, #lead-table)) > *, html[data-theme]:not(#cp) body .table-responsive:has(:is(#client-table, #lead-table)) { min-width: 0 !important; max-width: 100%; } html[data-theme]:not(#cp) body .table-responsive:has(:is(#client-table, #lead-table)) { overflow-x: auto; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td ul > li { white-space: normal; max-width: 170px; } } @media (min-width: 768px) and (max-width: 1250px) { /* 11-Zoll-iPad quer / hoch: noch etwas enger, damit alle verbleibenden Spalten ohne Wischen passen */ html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td:has(> a.js-selection-id), html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td:has(> .cp-row-meta) { min-width: 205px; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) :is(th, td) { padding-left: 8px !important; padding-right: 8px !important; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) thead th { letter-spacing: .08em !important; } } @media (max-width: 575px) { /* Kalender-Filter: beide Felder exakt gleich breit/hoch, bündig (Ereignistyp ragte über den Rand und saß tiefer) */ html[data-theme]:not(#cp) body .events-title-button { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch; } html[data-theme]:not(#cp) body .events-title-button > .select2-container, html[data-theme]:not(#cp) body .events-title-button #calendar-filter-dropdown, html[data-theme]:not(#cp) body .events-title-button #calendar-filter-dropdown > div, html[data-theme]:not(#cp) body .events-title-button #calendar-filter-dropdown .filter-multi-select { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100%; margin: 0 !important; } html[data-theme]:not(#cp) body .events-title-button #calendar-filter-dropdown .dropdown-toggle { display: flex !important; align-items: center; justify-content: space-between; width: 100% !important; height: 44px; margin: 0 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px !important; } html[data-theme]:not(#cp) body .events-title-button .select2-choice { height: 44px !important; } } @media (max-width: 575px) { html[data-theme]:not(#cp) body .events-title-button { margin: 0 !important; width: 100% !important; box-sizing: border-box; padding: 0 16px 16px !important; } html[data-theme]:not(#cp) body .page-title:has(> .events-title-button) > h1 { padding-bottom: 14px !important; } } /* Kunden-/Interessentenliste am Handy: unter dem Namen letzte Aktivität, „fehlt: …“ und Schnellaktionen (RISE zeigt dort nur den Namen) – Aktionen als 36-px-Symbole rechts */ @media (max-width: 767px) { html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td.dtr-control .cp-row-meta { margin: 6px 0 2px; gap: 6px 10px; font-size: 12px; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td.dtr-control .cp-row-quick { margin-left: auto; display: inline-flex; gap: 4px; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td.dtr-control .cp-row-quick button { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; border: 1px solid var(--cp-line) !important; background: transparent; color: var(--cp-muted); } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td.dtr-control .cp-row-quick button svg { width: 16px; height: 16px; } html[data-theme]:not(#cp) body :is(#client-table, #lead-table) td.dtr-control .cp-row-miss { min-height: 26px; font-size: 11.5px; } } /* =========================================================================== v5.21 · Handy & iPad: App-Gefühl (Topbar, Aktualisieren, Reiter) und Feinschliff =========================================================================== */ /* Handy: Topbar klebt oben, gleitet beim Runterscrollen weg und kommt beim Hochscrollen zurück (Statusleisten-Fläche bleibt stehen); Zurück-Leiste der Detailseiten rückt darunter */ @media (max-width: 500px) { html[data-theme]:not(#cp) body #default-navbar { position: sticky !important; top: 0; transition: transform var(--cp-dur-l) var(--cp-e); will-change: transform; } html.cp-nav-hidden[data-theme]:not(#cp) body #default-navbar { transform: translateY(calc(-100% + var(--cp-sat, 0px))); } html[data-theme]:not(#cp) body .details-view-top-button.position-fixed-top { top: var(--cp-nav-h, 64px) !important; transition: top var(--cp-dur-l) var(--cp-e); } html.cp-nav-hidden[data-theme]:not(#cp) body .details-view-top-button.position-fixed-top { top: var(--cp-sat, 0px) !important; } } @media (max-width: 500px) and (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body #default-navbar { transition: none; } } /* „Zum Aktualisieren ziehen“ (Home-Bildschirm-App) */ .cp-ptr { position: fixed; left: 50%; top: calc(var(--cp-nav-h, 64px) + 14px); z-index: 1029; width: 40px; height: 40px; margin-left: -20px; display: grid; place-items: center; border-radius: 50%; pointer-events: none; background: var(--cp-surface-2); border: 1px solid var(--cp-line-2); color: var(--cp-muted); box-shadow: var(--cp-shadow-pop); opacity: 0; transform: translateY(calc(-24px + var(--p, 0) * 24px)) scale(calc(.6 + var(--p, 0) * .4)); transition: opacity var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease); } .cp-ptr.is-visible { opacity: calc(.35 + var(--p, 0) * .65); } .cp-ptr svg { width: 18px; height: 18px; transform: rotate(calc(var(--p, 0) * 300deg)); } .cp-ptr.is-ready { color: var(--cp-rust-hi); border-color: var(--cp-rust-line); } .cp-ptr.is-loading { opacity: 1; color: var(--cp-rust-hi); border-color: var(--cp-rust-line); transform: none; } .cp-ptr.is-loading svg { animation: cp-ptr-spin .7s linear infinite; } @keyframes cp-ptr-spin { to { transform: rotate(360deg); } } /* Reiterleisten (Projekt, Kunde, Aufgaben …) bis iPad quer: Beschriftung nie zweizeilig, Leiste wischbar */ @media (max-width: 1366px) { html[data-theme]:not(#cp) body .nav-tabs:not(:has(.dropdown-menu)) { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } html[data-theme]:not(#cp) body .nav-tabs:not(:has(.dropdown-menu))::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp) body .nav-tabs > li { flex: none !important; } html[data-theme]:not(#cp) body .nav-tabs > li > a, html[data-theme]:not(#cp) body .nav-tabs .nav-link { white-space: nowrap !important; } /* Kartenköpfe mit Titel + Knöpfen (z. B. „Aufgaben Kanban“ im Projekt) – Titel mit Innenabstand, Knöpfe rechts in einer Reihe */ html[data-theme]:not(#cp) body .main-scrollable-page .card-header.title-tab { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px !important; } html[data-theme]:not(#cp) body .main-scrollable-page .card-header.title-tab > h4 { margin: 0 auto 0 0 !important; float: none !important; display: flex; align-items: center; gap: 10px; } html[data-theme]:not(#cp) body .main-scrollable-page .card-header.title-tab > .title-button-group { float: none !important; margin: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp) body .main-scrollable-page .card-header.title-tab > .title-button-group .btn { margin: 0 !important; } } /* Haupt-Knopf in Rost nur für „… hinzufügen“ (vorher traf die Regel auch „Timer starten“ neben „Aktionen“) */ html[data-theme]:not(#cp) body .title-button-group > .btn:last-child:not(.dropdown-toggle):not(.btn-danger):not([title*="inzuf"]):not([title^="Add"]):not([title^="Ekle"]) { background: transparent !important; border-color: var(--cp-line-2) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .title-button-group > .btn:last-child:not(.dropdown-toggle):not(.btn-danger):not([title*="inzuf"]):not([title^="Add"]):not([title^="Ekle"]) svg { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .title-button-group > .btn:last-child:not(.dropdown-toggle):not(.btn-danger):not([title*="inzuf"]):not([title^="Add"]):not([title^="Ekle"]):hover { background: var(--cp-hover) !important; border-color: var(--cp-line-2) !important; } /* Aufgaben-Widget: Filter-Chips (Alle · Überfällig · Heute · 7 Tage · Ohne Frist) am Handy in einer wischbaren Zeile */ @media (max-width: 575px) { html[data-theme]:not(#cp) body .cp-tf { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin: 8px 0 0 !important; max-width: 100%; } html[data-theme]:not(#cp) body .cp-tf::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp) body .cp-tf .cp-tf-btn { flex: none; min-height: 34px; } html[data-theme]:not(#cp) body .cp-overdue, html[data-theme]:not(#cp) body .cp-kpi-flag { white-space: nowrap; } /* Automatische Wiedervorlage: Symbol · Text · Schalter oben bündig, Auswahl in der Zeile */ html[data-theme]:not(#cp) body .cp-auto { align-items: flex-start; gap: 10px; padding: 12px; } html[data-theme]:not(#cp) body .cp-auto .cp-auto-ico { width: 28px; height: 28px; margin-top: 1px; } html[data-theme]:not(#cp) body .cp-auto .cp-auto-txt { font-size: 13px; line-height: 1.5; } html[data-theme]:not(#cp) body .cp-auto select { min-height: 0 !important; height: 28px; padding: 0 22px 0 8px !important; font-size: 16px !important; line-height: 26px; vertical-align: 1px; } html[data-theme]:not(#cp) body .cp-auto .cp-switch { margin-top: 2px; flex: none; } /* Leerer Pipeline-Zustand kompakter */ html[data-theme]:not(#cp) body .cp-crm-empty .cp-funnel-art { width: 84px !important; height: 60px !important; margin-bottom: 4px; } } @media (max-width: 575px) { /* Chips stehen in der Filterleiste unter Suche + Filter über die volle Breite */ html[data-theme]:not(#cp) body .filter-section-container .cp-tf { order: 3; flex: 1 0 100%; } } /* --------------------------------------------------------------------------- v5.21 · iPad-Rückmeldungen: Reiterleiste nur seitlich, eingeklappte Menüleiste fest, Kunden-Splitansicht --------------------------------------------------------------------------- */ /* Reiterleisten (z. B. Kunde: Überblick · Projekte · …): nur seitlich wischbar – RISE ließ sie 1 px senkrecht scrollen */ html[data-theme]:not(#cp) body .nav-tabs.scrollable-tabs, html[data-theme]:not(#cp) body .nav-tabs:not(:has(.dropdown-menu)) { overflow-y: hidden !important; overscroll-behavior-x: contain; } html[data-theme]:not(#cp) body .nav-tabs.scrollable-tabs > li, html[data-theme]:not(#cp) body .nav-tabs:not(:has(.dropdown-menu)) > li { margin-bottom: 0 !important; } /* KI-Knopf nie zweizeilig */ html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle, html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle .rst-ai-tb-label { white-space: nowrap !important; } /* Eingeklappte Menüleiste auf Touch-Geräten (iPad): RISE setzt sie auf position: absolute mit 1420 px Höhe (für Hover-Ausklapper) – dadurch scrollte sie mit der Seite. Hier fest am Rand, Symbole scrollen in sich. */ @media (min-width: 991px) and (hover: none) { html[data-theme]:not(#cp) body.sidebar-toggled { min-height: 0 !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar { position: fixed !important; top: 0 !important; bottom: 0 !important; height: auto !important; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-scroll { position: absolute !important; top: calc(66px + var(--cp-sat, 0px)); bottom: 0; left: 0; right: 0; height: auto !important; max-height: none !important; margin: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-scroll::-webkit-scrollbar { display: none; } } /* Kunden-/Projekt-Splitansicht (Symbol neben „Bearbeiten“ in der Liste = RISE „Kompaktansicht“): Liste links, Details rechts. Vorher: Menüleiste lag über der Liste, die Details waren so breit wie der ganze Bildschirm und um die Listenbreite verschoben → die Seite ließ sich seitlich verschieben. Jetzt drei feste Spalten ohne Überlauf. */ @media (min-width: 992px) { html[data-theme]:not(#cp) body.compact-view-active { --cp-cv-w: 350px; --cp-cv-rail: var(--mui-sidebar-w, 260px); } html[data-theme]:not(#cp) body.compact-view-active.sidebar-toggled { --cp-cv-rail: 70px; } /* v5.22: ausgeklappt bleibt das volle Menü sichtbar (RISE blendet es hier aus – beim Ausklappen verschwand die Leiste); Liste und Details rücken daneben */ html[data-theme]:not(#cp) body.compact-view-active:not(.sidebar-toggled) .sidebar { width: var(--mui-sidebar-w, 260px) !important; } html[data-theme]:not(#cp) body.compact-view-active #default-navbar { left: var(--cp-cv-rail) !important; } html[data-theme]:not(#cp) body.compact-view-active .page-container { margin-left: 0 !important; overflow-x: hidden !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel { left: var(--cp-cv-rail) !important; width: var(--cp-cv-w) !important; top: calc(66px + var(--cp-sat, 0px)); bottom: 0; height: auto !important; display: flex; flex-direction: column; background: var(--cp-surface) !important; border-right: 1px solid var(--cp-line); z-index: 1001; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel > * { width: 100% !important; min-width: 0; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .scrollable-table { height: auto !important; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .datatable-tools { position: static !important; width: 100% !important; background: var(--cp-surface) !important; border: 0 !important; border-top: 1px solid var(--cp-line) !important; padding: 10px 12px !important; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; } html[data-theme]:not(#cp) body.compact-view-active #compact-details-page { margin-left: calc(var(--cp-cv-rail) + var(--cp-cv-w)) !important; width: calc(100% - var(--cp-cv-rail) - var(--cp-cv-w)) !important; max-width: calc(100vw - var(--cp-cv-rail) - var(--cp-cv-w)); min-width: 0; overflow-x: hidden; } html[data-theme]:not(#cp) body.compact-view-active #compact-details-page .container-fluid { max-width: 100%; } /* aktive Zeile der Liste in Rost statt Blau/Weiß */ html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel tbody tr.active td { background: var(--cp-rust-soft) !important; box-shadow: inset 3px 0 0 var(--cp-rust); } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel tbody tr.active td a, html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel tbody tr.active td .text-default { color: var(--cp-strong) !important; } } @media (min-width: 992px) and (max-width: 1366px) { html[data-theme]:not(#cp) body.compact-view-active { --cp-cv-w: 300px; } } @media (min-width: 992px) { /* Splitansicht: Aufklapp-Pfeil der Liste entfällt (Antippen öffnet ja die Details), lange Kennzahl-Beschriftungen passen */ html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel td.dtr-control::before { display: none !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel td.dtr-control { padding-left: 16px !important; } html[data-theme]:not(#cp) body.compact-view-active #client-summary .box .box-content { min-width: 0; } html[data-theme]:not(#cp) body.compact-view-active #client-summary .box .box-content .pt-3 { font-size: 12.5px; overflow-wrap: anywhere; } } /* Reiterleisten mit Knöpfen im selben Kopf (Kunden-/Projektliste …): auf iPad wieder umbrechen dürfen, Knopfgruppe in einer Reihe rechts – sonst quetschte die Einzeilen-Regel die Knöpfe untereinander */ @media (min-width: 768px) and (max-width: 1366px) { html[data-theme]:not(#cp) body .nav-tabs:has(> .tab-title .title-button-group > *) { flex-wrap: wrap !important; overflow: visible !important; } html[data-theme]:not(#cp) body .nav-tabs > .tab-title { flex: 1 0 auto; display: flex; justify-content: flex-end; min-width: 0; } html[data-theme]:not(#cp) body .nav-tabs > .tab-title .title-button-group { display: flex; flex-wrap: nowrap; gap: 6px; } html[data-theme]:not(#cp) body .nav-tabs > .tab-title .title-button-group > .btn { margin: 0 !important; white-space: nowrap; } } @media (min-width: 992px) { html[data-theme]:not(#cp) body.compact-view-active.sidebar-toggled .sidebar { width: 70px !important; } } /* Splitansicht auf dem iPad hoch (768–991 px, Menü als Schublade): Liste 280 px, Details daneben in voller Restbreite */ @media (min-width: 768px) and (max-width: 991px) { html[data-theme]:not(#cp) body.compact-view-active #default-navbar { left: 0 !important; } html[data-theme]:not(#cp) body.compact-view-active .page-container { margin-left: 0 !important; overflow-x: hidden !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel { left: 0 !important; width: 280px !important; top: calc(66px + var(--cp-sat, 0px)); bottom: 0; height: auto !important; display: flex; flex-direction: column; background: var(--cp-surface) !important; border-right: 1px solid var(--cp-line); z-index: 1001; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel > * { width: 100% !important; min-width: 0; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .scrollable-table { height: auto !important; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .datatable-tools { position: static !important; width: 100% !important; background: var(--cp-surface) !important; border: 0 !important; border-top: 1px solid var(--cp-line) !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important; } html[data-theme]:not(#cp) body.compact-view-active #compact-details-page { margin-left: 280px !important; width: calc(100% - 280px) !important; max-width: calc(100vw - 280px); min-width: 0; overflow-x: hidden; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .filter-section-flex-row { display: flex !important; flex-wrap: wrap; gap: 8px; } } @media (min-width: 768px) { html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel td.dtr-control::before { display: none !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel td.dtr-control { padding-left: 16px !important; } } @media (min-width: 768px) { /* Splitansicht: Kennzahlen dürfen umbrechen statt „Kostenvorans…“; Suche der Liste über die volle Breite */ html[data-theme]:not(#cp) body.compact-view-active #client-summary .box .box-content { min-width: 0; } html[data-theme]:not(#cp) body.compact-view-active #client-summary .box .box-content * { white-space: normal !important; overflow-wrap: anywhere; font-size: 12px; } html[data-theme]:not(#cp) body.compact-view-active #client-summary .box .box-content h4, html[data-theme]:not(#cp) body.compact-view-active #client-summary .box .box-content .h4, html[data-theme]:not(#cp) body.compact-view-active #client-summary .box .box-content strong { font-size: 18px; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .filter-section-right { width: 100% !important; flex: 1 0 100%; margin: 0 !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .filter-section-right .filter-item-box, html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .filter-section-right input { width: 100% !important; margin: 0 !important; } } /* --------------------------------------------------------------------------- v5.22 · Splitansicht und Detailseiten: Feinschliff; Kalender in schmalen Karten --------------------------------------------------------------------------- */ /* iPad quer bis 1366 mit ausgeklapptem Menü: Liste etwas schmaler, damit die Details genug Platz behalten */ @media (min-width: 992px) and (max-width: 1280px) { html[data-theme]:not(#cp) body.compact-view-active:not(.sidebar-toggled) { --cp-cv-w: 270px; } } /* Seitenzahlen-Leiste der Liste nur, wenn es mehrere Seiten gibt */ html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .datatable-tools:not(:has(.page-item:not(.disabled):not(.active))) { display: none !important; } /* Suche + Filter der Liste in einer Zeile */ @media (min-width: 768px) { html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .filter-section-flex-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .filter-section-left { display: contents !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .filter-section-right { order: 0; flex: 1 1 0% !important; width: auto !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .show-hide-filter-button-box { order: 1; margin: 0 !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .show-hide-filter-button-box .add-filter-text { display: none !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .show-hide-filter-button-box .btn { height: 40px; padding: 0 12px !important; display: inline-flex; align-items: center; gap: 6px; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .show-hide-filter-button-box .btn::after { content: "Filter"; font-size: 13px; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .smart-filter-dropdown-box:has(> .smart-filter-dropdown-container.hide) { display: none !important; } html[data-theme]:not(#cp) body.compact-view-active .compact-view-left-panel .bookmarked-filter-button-container:empty { display: none !important; } } /* Kennzahlen (Projekte · Abonnements · … · Kostenvoranschläge): Silbentrennung statt „Kostenvoranscl“ */ html[data-theme]:not(#cp) body #client-summary .box .box-content { padding-left: 8px !important; padding-right: 8px !important; } html[data-theme]:not(#cp) body #client-summary .box .box-content span { hyphens: auto !important; -webkit-hyphens: auto !important; overflow-wrap: anywhere !important; white-space: normal !important; } /* Ansprechpartner: E-Mail sauber umbrechen statt abgeschnitten („jens.maack@eurc“) */ html[data-theme]:not(#cp) body td .box-content > div:has(> .text-wrap) { white-space: normal !important; } html[data-theme]:not(#cp) body td .box-content .text-wrap { overflow-wrap: anywhere; word-break: normal; } html[data-theme]:not(#cp) body td .box-content:has(.text-wrap) { overflow: visible !important; } /* FullCalendar in schmalen Bereichen (Handy UND kleine Karten wie „Kalender“ auf der Kundenseite): Kopfzeile ‹ › · Monat Jahr · Heute, darunter Ansichten über die volle Breite – vorher brach „Septe/mber“ in drei Zeilen */ html[data-theme]:not(#cp) body .fc { container-type: inline-size; } @container (max-width: 560px) { html[data-theme]:not(#cp) body .fc .fc-header-toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 10px 8px; margin-bottom: 14px !important; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) { display: contents !important; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) > .fc-button-group { order: 0; flex: none; margin: 0 !important; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(2) { order: 1; flex: 1 1 0; min-width: 0; text-align: center; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) > .fc-today-button { order: 2; flex: none; margin: 0 !important; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) { order: 3; flex: 1 0 100%; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) > .fc-button-group { display: flex !important; width: 100%; } html[data-theme]:not(#cp) body .fc .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button { flex: 1 1 0; } html[data-theme]:not(#cp) body .fc .fc-toolbar-title { font-size: 17px !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; } html[data-theme]:not(#cp) body .fc .fc-button { font-size: 13px !important; min-height: 38px; } html[data-theme]:not(#cp) body .fc .fc-col-header-cell-cushion { font-size: 10.5px; letter-spacing: .08em; } html[data-theme]:not(#cp) body .fc .fc-daygrid-day-number { font-size: 13px; padding: 4px 6px !important; } html[data-theme]:not(#cp) body .fc .fc-day-today { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .fc .fc-day-today .fc-daygrid-day-number { min-width: 24px; height: 24px; margin: 3px; padding: 0 6px !important; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-rust); color: #fff !important; font-weight: 700; } html[data-theme]:not(#cp) body .fc .fc-daygrid-event { font-size: 11px; margin: 1px 2px !important; } } /* Kartenköpfe mit Aktion (Tickets, Kalender … auf der Kundenseite): Titel und Aktion in einer Zeile, Aktion kompakt */ html[data-theme]:not(#cp) body #compact-details-page .card-header, html[data-theme]:not(#cp) body .clients-view-button .card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } html[data-theme]:not(#cp) body #compact-details-page .card-header > .card-header-action, html[data-theme]:not(#cp) body #compact-details-page .card-header > .float-end, html[data-theme]:not(#cp) body .clients-view-button .card-header > .float-end { float: none !important; margin-left: auto !important; display: flex; align-items: center; gap: 6px; white-space: nowrap; } /* Detailseiten (Kunde, Interessent …) passen sich dem verfügbaren Platz an statt der Bildschirmbreite – in der Splitansicht und auf dem iPad hoch rutscht die rechte Spalte (Kundeninfo, Notizen …) unter den Inhalt (zweispaltig), und Karten-Paare wie Tickets | Kalender stehen untereinander, wenn es eng wird */ html[data-theme]:not(#cp) body :has(> .details-view-wrapper) { container-type: inline-size; container-name: cpdetail; } html[data-theme]:not(#cp) body .details-view-left-section { container-type: inline-size; container-name: cpleft; min-width: 0; } @container cpdetail (max-width: 1080px) { html[data-theme]:not(#cp) body .details-view-wrapper { flex-wrap: wrap !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-left-section { flex: 1 0 100% !important; width: 100% !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section { order: -1; flex: 1 0 100% !important; width: 100% !important; margin: 0 0 16px !important; padding-left: 0 !important; padding-right: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > div:first-child { grid-row: span 5; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > :empty { display: none !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > *, html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > * > .card { margin: 0 !important; min-width: 0; } } /* v5.178.0 · iPad-Audit: Belegseiten (Rechnung, KV, Angebot, Vertrag, Bestellung) brauchen links Platz für Posten und PDF-Ansicht – zwischen 1080 und 1320 px Inhaltsbreite (iPad Pro 13" quer: 1376 px, Anzeige „Mehr Platz“, Laptops 1440 px) schob die feste Infospalte (350 px) sich sonst rechts aus dem Bild und der ganze Bereich ließ sich seitlich verschieben. Hier steht sie oben. */ html[data-theme]:not(#cp) body .details-view-wrapper > :is(.details-view-left-section, .w-100) { min-width: 0; } @container cpdetail (max-width: 1320px) { html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) { flex-wrap: wrap !important; } html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > :is(.details-view-left-section, .w-100) { flex: 1 0 100% !important; width: 100% !important; } html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > .details-view-right-section { order: -1; flex: 1 0 100% !important; width: 100% !important; margin: 0 0 16px !important; padding-left: 0 !important; padding-right: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 16px !important; row-gap: 0 !important; grid-template-rows: repeat(8, auto) 1fr !important; align-items: start; } html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > .details-view-right-section > div:first-child { grid-column: 1; grid-row: 1 / -1 !important; } html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > .details-view-right-section > :not(:first-child) { grid-column: 2; margin: 0 0 16px !important; } html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > .details-view-right-section > :is(:empty, :not(:first-child):not(:has(*))) { display: none !important; } html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > .details-view-right-section > *, html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > .details-view-right-section > * > .card { min-width: 0; } /* v5.181.0 (iPad): Beleg mit Posten zuerst – die Infokarten (Rechnungsinformationen, Zahlungen, Dokument, QR, Verlauf, Aufgaben, Erinnerungen) folgen darunter als kompakte Spalten (vorher 1.285 px Infospalte über dem Beleg, „Posten hinzufügen“ erst bei ~2.700 px) */ html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > .details-view-right-section { order: 1 !important; display: block !important; columns: 2 300px; column-gap: 16px; margin: 16px 0 0 !important; } html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > .details-view-right-section > :is(div, section) { display: block; break-inside: avoid; margin: 0 0 16px !important; width: 100%; } html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > .details-view-right-section > :is(div, section):not(:has(*)) { display: none !important; } } /* v5.181.0: RISE setzt #page-content auf Fensterhöhe − 115 px (app.js) – im Beleg (Detailseiten) entstand darunter eine leere Fläche */ html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) #page-content { min-height: 0 !important; } @container cpdetail (min-width: 900px) and (max-width: 1320px) { html[data-theme]:not(#cp) body .details-view-wrapper:has(:is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table, #order-item-table)) > .details-view-right-section { columns: 3 280px; } } @container cpleft (max-width: 720px) { html[data-theme]:not(#cp) body .details-view-left-section .row > .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } } /* Info-Spalte oben: Kundeninfo links (bestimmt die Höhe), Notizen/Erinnerungen rechts – ohne Leer-Zeilen */ @media (min-width: 768px) and (max-width: 1279px) { html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section { row-gap: 0 !important; column-gap: 16px !important; grid-template-rows: repeat(8, auto) 1fr !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > div:first-child { grid-column: 1; grid-row: 1 / -1 !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > :not(:first-child) { grid-column: 2; margin: 0 0 16px !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > :not(:first-child):not(:has(*)) { display: none !important; } } @container cpdetail (max-width: 1080px) { html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section { row-gap: 0 !important; column-gap: 16px !important; grid-template-rows: repeat(8, auto) 1fr !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > div:first-child { grid-column: 1; grid-row: 1 / -1 !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > :not(:first-child) { grid-column: 2; margin: 0 0 16px !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > :not(:first-child):not(:has(*)) { display: none !important; } } /* Kunden-/Interessentenliste nach verfügbarer Kartenbreite (iPad mit ausgeklapptem Menü, Split View): zuerst Kundengruppen, dann „Gesamt berechnet“, dann Telefon ausblenden – Name, Kontakt, Projekte, Fällig und die Aktionen bleiben immer sichtbar, nichts ragt über den Rand */ html[data-theme]:not(#cp) body .dt-container:has(> :is(#client-table, #lead-table)) { container-type: inline-size; container-name: cplist; } @container cplist (max-width: 1000px) { html[data-theme]:not(#cp) body :is(#client-table, #lead-table) :is(th, td).cp-col-groups { display: none !important; } } @container cplist (max-width: 880px) { html[data-theme]:not(#cp) body :is(#client-table, #lead-table) :is(th, td).cp-col-total { display: none !important; } } @container cplist (max-width: 760px) { html[data-theme]:not(#cp) body :is(#client-table, #lead-table) :is(th, td).cp-col-phone { display: none !important; } } /* =========================================================================== v5.23 · Prüflauf Detailseiten (Projekt, Aufgabe, Ticket, Rechnung, Team, Einstellungen, Dateien …) in 402 / 834 / 1194 px (Menü ausgeklappt) =========================================================================== */ /* Bootstrap-Zeilen direkt in Karten ohne Innenabstand (Widget „Erinnerung heute“) ragten 11 px heraus */ html[data-theme]:not(#cp) body .card > .row { margin-left: 0 !important; margin-right: 0 !important; } /* Handy: Zeilen-Abstand passend zum Seitenrand (10 px) – sonst 1 px seitliches Scrollen (Einstellungen, Nachrichten) */ @media (max-width: 575px) { html[data-theme]:not(#cp) body .main-scrollable-page .row { --bs-gutter-x: 20px; } } /* Dateimanager nach verfügbarer Breite: Ordnerleiste | Dateien; Details nur, wenn Platz ist oder eine Datei gewählt ist */ html[data-theme]:not(#cp) body .page-wrapper:has(> .box > #file-manager-items-box) { container-type: inline-size; container-name: cpfiles; } @container cpfiles (max-width: 1100px) { html[data-theme]:not(#cp) body .box:has(> #file-manager-items-box) { display: grid !important; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; } html[data-theme]:not(#cp) body .box:has(> #file-manager-items-box) > .box-content { display: block !important; width: auto !important; min-width: 0; padding-right: 0 !important; } html[data-theme]:not(#cp) body .box:has(> #file-manager-items-box) > #file-details-box { grid-column: 1 / -1; } html[data-theme]:not(#cp) body .box:has(> #file-manager-items-box) > #file-details-box:has(.no-file-selected) { display: none !important; } html[data-theme]:not(#cp) body #file-details-box .card, html[data-theme]:not(#cp) body #file-details-box .sticky-details-section, html[data-theme]:not(#cp) body #file-details-box #file-manager-right-panel { width: 100% !important; } } @container cpfiles (max-width: 640px) { html[data-theme]:not(#cp) body .box:has(> #file-manager-items-box) { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp) body #file-manager-sidebar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; } html[data-theme]:not(#cp) body #file-manager-sidebar > * { margin: 0 !important; } html[data-theme]:not(#cp) body #file-manager-sidebar .help-search-box, html[data-theme]:not(#cp) body #file-manager-sidebar :has(> .help-search-box) { flex: 1 0 100%; width: 100% !important; } } html[data-theme]:not(#cp) body #file-manager-search-box { text-overflow: ellipsis; } /* v5.83.0: Selektor ohne feste Verschachtelung – beim Kostenvoranschlag liegt der Kopf eine Ebene tiefer (blieb dunkel). Rechnung/KV/Bestellung/Abo – Detailseite: Dokumentkopf (Logo, Absender, Empfänger) als weißes Papier wie in der Vorschau. Vorher dunkel: dunkles Logo unsichtbar, Vorlagenfarben (inline) passten nicht. Handy: Blöcke untereinander. */ html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20:has(> .header-style, > table) { background: #fff !important; color: #06070A !important; border-radius: 3px; padding: 28px !important; margin-bottom: 16px; box-shadow: 0 18px 48px -24px rgba(0,0,0,.8); } html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20:has(> .header-style, > table) *:not([style^="color"]):not([style*="; color"]):not([style*=";color"]) { color: inherit !important; border-color: #DFDFDA !important; } html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20:has(> .header-style, > table) a:not(#cp-a):not(#cp-b) { color: #C0431C !important; } html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20 .invoice-info-title[style*="background-color"] { color: #fff !important; padding: 2px 8px; } @media (max-width: 575px) { html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20 { padding: 18px !important; } html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20 table.header-style, html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20 table.header-style > tbody, html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20 table.header-style > tbody > tr, html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20 table.header-style > tbody > tr > td { display: block !important; width: 100% !important; text-align: left !important; padding-left: 0 !important; padding-right: 0 !important; } html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20 table.header-style > tbody > tr > td:empty { display: none !important; } html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20 table.header-style > tbody > tr > td + td { margin-top: 12px; } html[data-theme]:not(#cp) body .details-view-container #page-content .clearfix.p20 img { max-width: 70% !important; height: auto !important; } } /* Projekt-Überblick nach verfügbarer Breite: unter 1000 px Inhalt und „Aktivität“ untereinander (vorher zwei halbe Spalten mit 140-px-Kästchen auf dem iPad), Fortschritt | Aufgaben-Diagramm bleiben nebeneinander */ html[data-theme]:not(#cp) body .default-bg:has(.project-activity-section) { container-type: inline-size; container-name: cpproj; } @container cpproj (max-width: 1000px) { html[data-theme]:not(#cp) body .default-bg > .row > .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } html[data-theme]:not(#cp) body .default-bg > .row > .col-md-6 > .row > .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; } } @container cpproj (max-width: 520px) { html[data-theme]:not(#cp) body .default-bg > .row > .col-md-6 > .row > .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } } /* Fortschritts-Karte: Farbband ruhig in Rost statt dunklem Verlauf */ html[data-theme]:not(#cp) body .card:has(#project-progress-chart) > .bg-primary.rounded-top { background: linear-gradient(135deg, var(--cp-rust-soft), transparent 70%) !important; border-bottom: 1px solid var(--cp-line); } /* Aufgaben-Diagramm ohne Aufgaben: Hinweis statt leerer Karte (Klasse aus contentag-enhance.js) */ html[data-theme]:not(#cp) body .card.cp-pie-empty canvas { display: none !important; } html[data-theme]:not(#cp) body .card.cp-pie-empty .card-body { min-height: 100%; display: grid; place-items: center; } html[data-theme]:not(#cp) body .cp-empty-pie { display: grid; justify-items: center; gap: 10px; padding: 28px 16px; text-align: center; color: var(--cp-muted); font-size: 13px; } html[data-theme]:not(#cp) body .cp-empty-pie i { width: 54px; height: 54px; border-radius: 50%; border: 6px solid var(--cp-line-2); } html[data-theme]:not(#cp) body .cp-empty-pie b { display: block; color: var(--cp-text); font-weight: 600; font-size: 13.5px; } /* Ticket (Handy): E-Mail-Adressen umbrechen statt schmaler Spalte mit drei Zeilen */ @media (max-width: 575px) { html[data-theme]:not(#cp) body .ticket-details-view .d-flex, html[data-theme]:not(#cp) body #ticket-details-section .d-flex { flex-wrap: wrap; } html[data-theme]:not(#cp) body :is(.ticket-details-view, #ticket-details-section) :is(div, span) { overflow-wrap: anywhere; } } /* Handy: Info-Spalte der Detailseiten einspaltig (das 2er-Raster ist nur fürs Tablet gedacht) */ @container cpdetail (max-width: 600px) { html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; row-gap: 16px !important; } html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > div:first-child, html[data-theme]:not(#cp) body .details-view-wrapper > .details-view-right-section > :not(:first-child) { grid-column: 1 !important; grid-row: auto !important; margin: 0 !important; } } /* Aktionen-Karte (PDF herunterladen, Drucken …): Links umbrechen statt über den Rand */ html[data-theme]:not(#cp) body .details-view-right-section .box .box-content { min-width: 0; overflow-wrap: anywhere; } /* Touch/Handy: unsichtbare Hover-Tooltips der Topbar („Alles durchsuchen … ⌘ K“, 298 px) zählten zur Seitenbreite → 10 px seitliches Scrollen auf Detailseiten. Auf Touch-Geräten gibt es kein Hover – Tooltips aus. */ @media (hover: none), (max-width: 767px) { html[data-theme]:not(#cp) body #default-navbar .rst-search-trigger::after, html[data-theme]:not(#cp) body #default-navbar .rst-search-trigger::before, html[data-theme]:not(#cp) body #default-navbar [data-tooltip]::after, html[data-theme]:not(#cp) body #default-navbar [data-tip]::after { display: none !important; content: none !important; } } /* =========================================================================== v5.25 · Handy, iPad, Desktop: Feinschliff mit Testdaten (Projekt „TEST · Prüfprojekt“, Aufgaben, Termine, Notizen, To-dos, Dateien) – Prüflauf 33 Seiten × 402 / 1440 px + iPhone-/iPad-Simulator =========================================================================== */ /* Projekt-Fortschritt: Band in Rost ohne Trennlinie, der Kreis liegt als Plakette darüber (vorher Linie quer durch den Kreis, blauer Ring auf fast unsichtbarer Spur – Farben setzt contentag-enhance.js) */ html[data-theme]:not(#cp) body .card:has(#project-progress-chart) > .bg-primary.rounded-top { background: linear-gradient(180deg, transparent 35%, var(--cp-surface) 100%), linear-gradient(120deg, rgba(232, 85, 42, .34), rgba(232, 85, 42, .08) 55%, transparent 92%) !important; border-bottom: 0 !important; min-height: 76px; } html[data-theme="light"]:not(#cp) body .card:has(#project-progress-chart) > .bg-primary.rounded-top { background: linear-gradient(180deg, transparent 35%, var(--cp-surface) 100%), linear-gradient(120deg, rgba(192, 67, 28, .16), rgba(192, 67, 28, .04) 55%, transparent 92%) !important; } html[data-theme]:not(#cp) body .card:has(#project-progress-chart) .chart-circle { position: relative; z-index: 1; background: var(--cp-surface) !important; padding: 8px !important; box-shadow: 0 0 0 1px var(--cp-line-2), 0 16px 34px -18px rgba(0, 0, 0, .75); } html[data-theme]:not(#cp) body .card:has(#project-progress-chart) .chart-circle canvas { width: 114px !important; height: 114px !important; } html[data-theme]:not(#cp) body .card:has(#project-progress-chart) > .clearfix.text-center { margin-bottom: 10px !important; } /* Projekttitel: Stern bleibt am Titel statt allein in einer eigenen Zeile (Handy) */ html[data-theme]:not(#cp) body .project-title-section .page-title h1 { display: flex; align-items: flex-start; gap: 8px; min-width: 0; } html[data-theme]:not(#cp) body .project-title-section .page-title h1 > #star-mark { flex: none; margin-left: 2px; } html[data-theme]:not(#cp) body .project-title-section .page-title h1 > span:first-child { flex: none; } @media (max-width: 575px) { html[data-theme]:not(#cp) body .project-title-section .page-title h1 { letter-spacing: .06em !important; line-height: 1.35; } } /* Handy: ausgeblendete Topbar ganz weg – vorher blieb unter der Statusleiste ein Streifen vom Logo stehen (die Statusleisten-Fläche deckt html.cp-ios-app::after ab) */ @media (max-width: 500px) { html.cp-nav-hidden[data-theme]:not(#cp) body #default-navbar { transform: translateY(-100%); } } /* Dialoge: Lade-Fläche und Lade-Kreis im Theme statt weißer Fläche mit blauem Kreis */ html[data-theme]:not(#cp) body .modal-mask { background-color: var(--cp-surface) !important; } html[data-theme]:not(#cp) body .circle-loader { border-color: var(--cp-line-2) !important; border-top-color: var(--cp-rust-hi) !important; } /* Kalender: Termine ohne Indigo-Schatten/-Verlauf aus der alten Dunkel-Datei; lange Titel enden mit „…“ statt über den Termin in die Nachbartage zu laufen */ html[data-theme]:not(#cp) body .fc .fc-event { box-shadow: none !important; background-image: none !important; overflow: hidden; border-radius: 3px; } html[data-theme]:not(#cp) body .fc .fc-daygrid-event > .clickable { display: block !important; width: 100% !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px; } html[data-theme]:not(#cp) body .fc .fc-daygrid-event > .clickable > span { white-space: nowrap; } /* Kundenbild auf der Kundenseite: Rahmen im Theme statt RISE-Blau */ html[data-theme]:not(#cp) body .details-view-left-section img, html[data-theme]:not(#cp) body #client-details-page img.rounded-circle { border-color: var(--cp-line-2) !important; } /* Nachrichten: Hintergrund im Theme statt Blaustich (#0f1424 aus der alten Dunkel-Datei); am Handy ohne randlose zweite Kartenfläche */ html[data-theme]:not(#cp) body .box-content.message-view { background: transparent !important; } @media (max-width: 767px) { html[data-theme]:not(#cp) body .box:has(> .box-content.message-view) { background: transparent !important; border: 0 !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .box-content.message-view { padding-left: 0 !important; padding-right: 0 !important; } } /* v5.178.0 · iPad-Audit: Werkzeugleiste der Listen bricht um, statt rechts über die Karte hinauszulaufen (Suchfeld war im Hochformat abgeschnitten); Spaltenköpfe trennen nie mitten im Wort („RECHNUNGSNUMME/R“) – Mindestbreite: table-columns.js */ html[data-theme]:not(#cp) body .filter-section-container .filter-section-flex-row { flex-wrap: wrap; row-gap: 8px; } html[data-theme]:not(#cp) body .filter-section-container .filter-section-right { max-width: 100%; } html[data-theme]:not(#cp) body table.dataTable thead th, html[data-theme]:not(#cp) body table.dataTable thead th .dt-column-title { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual; } html[data-theme] body table.dataTable.cp-colw thead th .dt-column-title { white-space: nowrap; } /* Listen-Werkzeugleiste: Suchfeld rutscht in eine eigene Zeile, statt auf 38 px zu schrumpfen (Team am Handy) */ html[data-theme]:not(#cp) body .filter-section-flex-row > .filter-section-right:has(.dt-search) { min-width: min(100%, 190px); } @media (max-width: 575px) { html[data-theme]:not(#cp) body .filter-section-flex-row > .filter-section-right:has(.dt-search) { flex: 1 1 190px; } html[data-theme]:not(#cp) body .filter-section-right .dt-search, html[data-theme]:not(#cp) body .filter-section-right .dt-search input { width: 100% !important; } } /* Dateimanager: Lupe im Suchfeld (RISE-Bild ging durch den Theme-Hintergrund verloren) und Hinweis im leeren Ordner */ html[data-theme]:not(#cp) body .help-search-box { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA2AA' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 14px 50% !important; background-size: 16px 16px !important; } html[data-theme]:not(#cp) body .help-search-box.searching { background-image: none !important; } html[data-theme]:not(#cp) body #file-manager-window-area:not(:has(> ul.files-and-folders-list > li)) { display: grid; place-items: center; } html[data-theme]:not(#cp) body #file-manager-window-area:not(:has(> ul.files-and-folders-list > li))::before { content: "Dieser Ordner ist noch leer – Dateien per Drag & Drop hierher ziehen oder über „Dateien hinzufügen“ hochladen."; max-width: 340px; text-align: center; color: var(--cp-muted); font-size: 13.5px; line-height: 1.55; padding: 32px 20px; } html[data-theme]:not(#cp)[lang^="en"] body #file-manager-window-area:not(:has(> ul.files-and-folders-list > li))::before { content: "This folder is empty – drag files here or use „Add files“."; } @media (max-width: 767px) { html[data-theme]:not(#cp) body #file-manager-window-area:not(:has(> ul.files-and-folders-list > li)), html[data-theme]:not(#cp) body #file-manager-container:not(:has(ul.files-and-folders-list > li)) { min-height: 220px !important; height: auto !important; } } /* Notizen: Farbpunkt bleibt vor dem Titel (die Titelspalte hatte feste 250 px und rutschte am Handy darunter) */ html[data-theme]:not(#cp) body .note-color-tag + a.w250 { display: inline !important; width: auto !important; } html[data-theme]:not(#cp) body .note-color-tag { flex: none; vertical-align: 1px; } /* To-do am Handy: „…“-Knopf als ruhiger Rahmen-Knopf rechts mittig, Text läuft nicht mehr darunter */ html[data-theme]:not(#cp) body .action-option:not(.square-btn) { background: transparent !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .action-option:not(.square-btn):hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body #todo-table .box-label { position: relative; padding-right: 46px; } html[data-theme]:not(#cp) body #todo-table .box-label > .position-absolute.end10 { top: 50%; transform: translateY(-50%); } html[data-theme]:not(#cp) body #todo-table .box-label .action-option { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cp-line) !important; border-radius: 3px !important; margin: 0; padding: 0; } /* Einstellungen am Handy: Menü als Karte mit Innenabstand statt Text am Rand */ @media (max-width: 767px) { html[data-theme]:not(#cp) body #settings-left-menu-accordion { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-radius: 3px !important; padding: 6px 0 !important; margin-bottom: 16px; } html[data-theme]:not(#cp) body #settings-left-menu-accordion > .settings-anchor { padding: 12px 16px !important; } html[data-theme]:not(#cp) body #settings-left-menu-accordion .list-group-item { padding-left: 28px !important; } } /* Aufgabenliste nach Kartenbreite (iPad, Split View): zuerst Meilenstein und Mitwirkende, dann Startdatum ausblenden; „Verwandt mit“ höchstens zwei Zeilen (Spalten-Klassen aus contentag-crm.js tagColumns) */ html[data-theme]:not(#cp) body .dt-container:has(> #task-table) { container-type: inline-size; container-name: cptasks; } @container cptasks (max-width: 1100px) { html[data-theme]:not(#cp) body #task-table :is(th, td):is(.cp-col-milestone, .cp-col-collab, .cp-col-empty) { display: none !important; } html[data-theme]:not(#cp) body #task-table td.cp-col-related { max-width: 170px; } html[data-theme]:not(#cp) body #task-table td.cp-col-related > * { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* v5.113.0: lange Wörter umbrechen statt hart abschneiden */ } @container cptasks (max-width: 860px) { html[data-theme]:not(#cp) body #task-table :is(th, td).cp-col-start { display: none !important; } } /* Projekt-Dateien: Bildsymbol steht neben dem Dateinamen statt darüber */ html[data-theme]:not(#cp) body :is(#project-file-table, .project-file-table) td a:has(> [data-feather], > svg) { display: inline-flex; align-items: center; gap: 8px; } /* =========================================================================== v5.26 · Handy, iPad, Desktop – dritter Prüflauf mit Testdaten (Meilensteine, Kommentare, Zeiten, Interessenten, Content-Beiträge): Projekt-Reiter, Interessent, Content-Kalender, Knopfleisten =========================================================================== */ /* Handy: Knopfleisten in Kartenköpfen (z. B. „Beschriftungen verwalten“ + „Aufgabe hinzufügen“) als Raster – Beschriftungen brechen um statt hart abgeschnitten zu werden (Flex-Knöpfe zeigen kein „…“) */ @media (max-width: 575px) { html[data-theme]:not(#cp) body .main-scrollable-page .title-button-group.grid-button-xs { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; width: 100% !important; } html[data-theme]:not(#cp) body .main-scrollable-page .title-button-group.grid-button-xs > .btn, html[data-theme]:not(#cp) body .main-scrollable-page .title-button-group.grid-button-xs > .dropdown > .btn { width: 100% !important; margin: 0 !important; white-space: normal !important; overflow: visible !important; justify-content: center; text-align: center; line-height: 1.25; min-height: 42px; } html[data-theme]:not(#cp) body .main-scrollable-page .title-button-group.grid-button-xs > .dropdown { width: 100%; margin: 0 !important; } } /* „Projektkopf einklappen“ (Pfeil neben „Aufgaben Kanban“): ruhiger Symbolknopf statt nacktem Rost-Pfeil */ html[data-theme]:not(#cp) body .project-title-section-hide-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 12px !important; border: 1px solid var(--cp-line); border-radius: 3px; color: var(--cp-muted); vertical-align: middle; transition: color var(--cp-dur) var(--cp-e), border-color var(--cp-dur) var(--cp-e), background var(--cp-dur) var(--cp-e); } html[data-theme]:not(#cp) body .project-title-section-hide-button:hover { color: var(--cp-strong); border-color: var(--cp-line-2); background: var(--cp-hover); } html[data-theme]:not(#cp) body .project-title-section-hide-button svg { width: 14px; height: 14px; } /* Meilensteine am Handy: Datumsplakette kompakt (vorher 149 px breit, Tabelle ragte 53 px über die Karte) */ @media (max-width: 575px) { html[data-theme]:not(#cp) body #milestone-table { width: 100% !important; } html[data-theme]:not(#cp) body #milestone-table :is(th, td):first-child { width: 74px !important; min-width: 74px; padding-left: 8px !important; padding-right: 4px !important; } html[data-theme]:not(#cp) body #milestone-table .milestone { float: none !important; width: 64px !important; min-width: 0 !important; padding: 5px 2px !important; margin: 0 !important; } html[data-theme]:not(#cp) body #milestone-table .milestone h1 { font-size: 21px !important; line-height: 1.1 !important; margin: 3px 0 1px !important; } html[data-theme]:not(#cp) body #milestone-table .milestone .badge { font-size: 9.5px !important; padding: 2px 5px !important; } html[data-theme]:not(#cp) body #milestone-table .milestone > span:last-child { font-size: 10.5px; } html[data-theme]:not(#cp) body #milestone-table td:nth-child(2) { white-space: normal !important; min-width: 0; } html[data-theme]:not(#cp) body #milestone-table :is(th, td):nth-child(3) { width: 78px !important; min-width: 78px; } } /* Interessent/Kunde – Kennzahlen („Kostenvoranschläge“, „Anfragen …“): deutsche Silbentrennung statt Abschneiden */ html[data-theme]:not(#cp) body [class*="overview-widget-link"] span { display: block; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; line-height: 1.3; } @media (max-width: 575px) { html[data-theme]:not(#cp) body [class*="overview-widget-link"] span { font-size: 12.5px; } html[data-theme]:not(#cp) body [class*="overview-widget-link"] h4 { font-size: 20px !important; } } /* Content-Kalender (Plugin): Monats-/Wochenraster mit festen Spalten – ein langer Beitragstitel dehnte vorher eine ganze Spalte (1fr = minmax(auto, 1fr)), die anderen Tage wurden gequetscht */ html[data-theme]:not(#cp) body :is(.rst-cal-weekdays, .rst-cal-grid) { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } html[data-theme]:not(#cp) body :is(.rst-cal2-week-head, .rst-cal2-week-grid) { grid-template-columns: 70px repeat(7, minmax(0, 1fr)) !important; } html[data-theme]:not(#cp) body :is(.rst-cal-cell, .rst-cal2-day-cell) { min-width: 0; } html[data-theme]:not(#cp) body .rst-cal-post { min-width: 0; max-width: 100%; } html[data-theme]:not(#cp) body .rst-cal-post-title { min-width: 0; white-space: nowrap; } @media (max-width: 700px) { html[data-theme]:not(#cp) body :is(.rst-cal2-week-head, .rst-cal2-week-grid) { grid-template-columns: 50px repeat(7, minmax(0, 1fr)) !important; } } /* Altfarben der Plugin-Seiten (Indigo/Violett/Schiefer aus content-calendar.css, media-approval.css, dark-mode-fixes.css) auf die Marke umgestellt: aktiver Menüpunkt, Kalender-Werkzeugleiste, Mediengestaltung (Upload, Freigabe, Download), DeepL-Meldung */ html[data-theme]:not(#cp) body .sidebar-menu li[id^="rst-menu-"] { background: none !important; } html[data-theme]:not(#cp) body .rst-cal2-toolbar { background-image: none !important; } html[data-theme]:not(#cp) body .rst-media-dropzone svg { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body :is(.rst-media-upload-btn, .rst-mc-download, .rst-media-dz-progress) { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .rst-mc-download:hover { background: rgba(232, 85, 42, .2) !important; } html[data-theme]:not(#cp) body .rst-mc-decide { background: var(--cp-rust-soft) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .rst-mc-btn-undo { background: transparent !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .rst-media-tab:hover { color: var(--cp-rust-hi) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .rst-media-field :is(input, select, textarea):focus { border-color: var(--cp-rust-hi) !important; background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body .rst-toast { background: var(--cp-surface-3) !important; color: var(--cp-strong) !important; border: 1px solid var(--cp-line-2); font-family: inherit !important; box-shadow: var(--cp-shadow-pop) !important; } /* Meilensteine am Handy: Spaltenköpfe umbrechen („Fälligkeitsdatum“ hielt die Datumsspalte breit) */ @media (max-width: 575px) { html[data-theme]:not(#cp) body #milestone-table thead th { white-space: normal !important; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; font-size: 10px !important; letter-spacing: .06em !important; } html[data-theme]:not(#cp) body #milestone-table { table-layout: fixed; } html[data-theme]:not(#cp) body #milestone-table td:nth-child(2) { overflow-wrap: anywhere; } } /* Sitzung abgelaufen (Token ließ sich nicht erneuern, z. B. auf einem anderen Gerät abgemeldet) */ .rst-session-banner { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 100000; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 12px 14px 12px 18px; border-radius: 3px; background: var(--cp-surface-3, #1C212C); color: var(--cp-strong, #F6F6F4); border: 1px solid var(--cp-line-2, rgba(238,240,244,.16)); box-shadow: var(--cp-shadow-pop, 0 24px 60px -18px rgba(0,0,0,.85)); font-size: 14px; } .rst-session-banner a { flex: none; padding: 8px 14px; border-radius: 3px; background: var(--cp-rust-hi, #E8552A); color: #fff !important; font-weight: 600; text-decoration: none; } @media (max-width: 767px) { .rst-session-banner { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 575px) { html[data-theme]:not(#cp) body #milestone-table td.dtr-control:first-child { padding-left: 22px !important; width: 90px !important; min-width: 90px; } html[data-theme]:not(#cp) body #milestone-table thead th:first-child { width: 90px !important; } } /* =========================================================================== v5.27 · Stabilität lange App-Sitzungen + vierter Prüflauf (Dialoge, Formulare, Detailseiten) =========================================================================== */ /* Verbindungsanzeige (contentag-spa.js): offline ruhiger Hinweis, „Wieder online“ kurz in Grün */ .cp-conn { position: fixed; left: 50%; top: calc(var(--cp-sat, 0px) + 12px); z-index: 100001; max-width: calc(100vw - 32px); transform: translate(-50%, -140%); opacity: 0; pointer-events: none; padding: 10px 16px 10px 36px; border-radius: 3px; font-size: 13px; line-height: 1.4; background: var(--cp-surface-3, #1C212C); color: var(--cp-strong, #F6F6F4); border: 1px solid var(--cp-line-2, rgba(238,240,244,.16)); box-shadow: var(--cp-shadow-pop, 0 24px 60px -18px rgba(0,0,0,.85)); transition: transform var(--cp-dur-l, .32s) var(--cp-e, ease), opacity var(--cp-dur-l, .32s) var(--cp-e, ease); } .cp-conn::before { content: ""; position: absolute; left: 15px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--cp-warning, #E0A53A); box-shadow: 0 0 0 4px rgba(224,165,58,.18); } .cp-conn.is-online::before { background: var(--cp-success, #3FB984); box-shadow: 0 0 0 4px rgba(63,185,132,.18); } .cp-conn.is-visible { transform: translate(-50%, 0); opacity: 1; } .cp-conn.cp-nudge { animation: cp-conn-nudge .4s ease; } @keyframes cp-conn-nudge { 0%, 100% { margin-left: 0; } 25% { margin-left: -6px; } 75% { margin-left: 6px; } } @media (prefers-reduced-motion: reduce) { .cp-conn { transition: none; } .cp-conn.cp-nudge { animation: none; } } /* Handy: Fußknöpfe von Detail-Dialogen (Aufgabe: Löschen, Klonen, Bearbeiten, Schließen) als gleichmäßiges 2er-Raster statt versetzter Reihen; Formulare mit Speichern-Knopf behalten ihr eigenes Layout */ @media (max-width: 575px) { html[data-theme]:not(#cp) body #ajaxModal .modal-footer:not(:has([type="submit"])):has(> :nth-child(3)) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px !important; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer:not(:has([type="submit"])) > :is(.btn, a, span, div) { margin: 0 !important; width: 100% !important; min-width: 0; } html[data-theme]:not(#cp) body #ajaxModal .modal-footer:not(:has([type="submit"])) .btn { width: 100%; justify-content: center; white-space: normal; letter-spacing: .05em !important; font-size: 11.5px !important; padding: 11px 8px !important; line-height: 1.25; } } /* Gantt (Frappe Gantt, Projekt → Gantt): Raster, Kopf und Beschriftungen im Theme statt weißer Fläche */ html[data-theme]:not(#cp) body .gantt .grid-header { fill: var(--cp-surface-2) !important; stroke: var(--cp-line) !important; } html[data-theme]:not(#cp) body .gantt .grid-row { fill: var(--cp-surface) !important; } html[data-theme]:not(#cp) body .gantt .grid-row:nth-child(even) { fill: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body .gantt .row-line { stroke: var(--cp-line) !important; } html[data-theme]:not(#cp) body .gantt .tick { stroke: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .gantt .today-highlight { fill: var(--cp-rust-soft) !important; opacity: 1 !important; } html[data-theme]:not(#cp) body .gantt :is(.upper-text, .lower-text) { fill: var(--cp-muted) !important; font-family: inherit; } html[data-theme]:not(#cp) body .gantt .bar-label.big, html[data-theme]:not(#cp) body .gantt .bar-invalid ~ .bar-label { fill: var(--cp-text) !important; } html[data-theme]:not(#cp) body .gantt .arrow { stroke: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .gantt-container { background: var(--cp-surface) !important; border-radius: 3px; } html[data-theme]:not(#cp) body .gantt-container .popup-wrapper { background: var(--cp-surface-3) !important; border: 1px solid var(--cp-line-2); border-radius: 3px; color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .gantt-container .popup-wrapper .pointer { border-top-color: var(--cp-surface-3) !important; } /* Kunden-/Interessenten-Logos in Listen (client-favicons.js): runder weißer Grund bleibt, aber mit feinem Rand */ html[data-theme]:not(#cp) body img[data-rst-fav-avatar] { box-shadow: 0 0 0 1px var(--cp-line-2); } /* KI-Assistent angedockt (Standard ab 992 px): der restliche Inhalt weicht aus statt verdeckt zu werden. RISE-Topbar ist fixed (left: Menübreite, right: 0), der Seitenbereich ein Block mit Rand links – beide rücken um die Fensterbreite (--rst-ai-width, per Griff veränderbar) nach links; das Fenster nimmt die ganze rechte Spalte ein. Darunter bleibt es ein Blatt von unten (ai-assistant.js). */ @media (min-width: 992px) { html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open { padding-right: 0 !important; } html[data-theme]:not(#cp) body #default-navbar { transition: right var(--cp-dur-l, .28s) var(--cp-e, ease); } html[data-theme]:not(#cp) body .page-container { transition: margin-right var(--cp-dur-l, .28s) var(--cp-e, ease); } html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) #default-navbar { right: var(--rst-ai-width) !important; width: auto !important; } html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) .page-container { margin-right: var(--rst-ai-width) !important; width: auto !important; } html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) .rst-ai-sidebar { top: var(--cp-sat, 0px) !important; box-shadow: none !important; border-left: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) :is(#js-init-chat-icon, .init-chat-icon) { right: calc(var(--rst-ai-width) + 20px) !important; } html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) :is(.rst-toast, .app-alert) { right: calc(var(--rst-ai-width) + 24px) !important; } html[data-theme]:not(#cp) body.rst-ai-resizing :is(#default-navbar, .page-container) { transition: none !important; } /* Kunden-Splitansicht: Details enden vor dem Fenster */ html[data-theme]:not(#cp) body.compact-view-active.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) #compact-details-page { width: calc(100% - var(--cp-cv-rail, 0px) - var(--cp-cv-w, 0px)) !important; } } @media (min-width: 992px) and (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body :is(#default-navbar, .page-container) { transition: none !important; } } /* Angedockt: Topbar hat weniger Platz – Benutzername und „KI-Assistent“-Beschriftung weichen dem Symbol (vorher 22 px Überlauf) */ @media (min-width: 992px) and (max-width: 1799px) { html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open #default-navbar #user-dropdown .user-name, html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open #default-navbar .rst-ai-topbar-toggle .rst-ai-tb-label { display: none !important; } } /* v5.178.0 · iPad/Tablet: angedockt bleibt der Kopfleiste wenig Platz (Menü als Symbolleiste, Fenster rechts) – Symbole etwas dichter, Stempeluhr nur als Symbol; mehr wandert über mobile-topbar.js (verfügbare Breite) ins „Weitere Funktionen“-Menü */ @media (min-width: 992px) and (max-width: 1599px) { html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) #default-navbar .navbar-nav > li.nav-item > :is(a, button).nav-link, html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) #default-navbar .navbar-nav > li.nav-item > .dropdown-toggle { padding-left: 7px !important; padding-right: 7px !important; } html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) #default-navbar :is(.cp-clk-in span, .cp-clk-in small, .cp-clk-t small) { display: none !important; } html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) #default-navbar .cp-clk-in { width: 36px !important; padding: 0 !important; justify-content: center; } /* Hell/Dunkel steht im „Weitere Funktionen“-Menü („Dunkles Design“) – der Schalter selbst weicht */ html[data-theme]:not(#cp) body.rst-ai-pinned.rst-ai-open:not(.rst-ai-float) #default-navbar li.mui-theme-toggle-wrap { display: none !important; } } /* v5.178.0 · Fenster über der Seite (zu eng zum Andocken, z. B. iPad hoch – oder bewusst nicht angedockt auf Touch-Geräten): Seite abdunkeln, Tippen daneben schließt; das Fenster beginnt unter der Kopfleiste */ .rst-ai-scrim { position: fixed; inset: 0; z-index: 7990; background: rgba(4, 5, 8, .55); opacity: 0; visibility: hidden; transition: opacity var(--cp-dur-l, .28s) var(--cp-e, ease), visibility 0s linear var(--cp-dur-l, .28s); } @media (min-width: 992px) { html[data-theme]:not(#cp) body.rst-ai-open.rst-ai-float .rst-ai-scrim { opacity: 1; visibility: visible; transition-delay: 0s; } html[data-theme]:not(#cp) body.rst-ai-open.rst-ai-float .rst-ai-sidebar { box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .7) !important; } } /* v5.180.0: auch am Desktop – ohne Abdunkelung wirkte „über der Seite“ wie ein Fehler („der Inhalt liegt dahinter“) */ @media (min-width: 992px) { html[data-theme]:not(#cp) body.rst-ai-open:not(.rst-ai-pinned) .rst-ai-scrim { opacity: 1; visibility: visible; transition-delay: 0s; } } /* Zustand des Andock-Knopfs sichtbar (die allgemeine Knopf-Regel überschrieb .active) */ html[data-theme]:not(#cp) body .rst-ai-header-btn[data-act="toggle-pin"].active { color: var(--cp-rust-hi) !important; border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } @media (prefers-reduced-motion: reduce) { .rst-ai-scrim { transition: none; } } /* =========================================================================== v5.28 · Inline-Bearbeitung (RISE .app-popover, z. B. Status/Quelle/Labels bei Interessent und Kunde) RISE setzt background:#fff – im dunklen Design weiße Fläche mit heller Schrift (Nutzer-Screenshot). War bisher nur zufällig dunkel, wenn ein anderes Skript die Klasse rst-chat-popup anhängte. =========================================================================== */ html[data-theme]:not(#cp) body .app-popover { background: var(--cp-surface-2) !important; color: var(--cp-text) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; box-shadow: var(--cp-shadow-pop) !important; overflow: visible; } html[data-theme]:not(#cp) body .app-popover .app-popover-arrow { background: var(--cp-surface-2) !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .app-popover .app-popover-body { color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .app-popover :is(.list-group-item, .dropdown-item) { background: transparent !important; color: var(--cp-text) !important; border-color: var(--cp-line) !important; padding: 10px 16px !important; font-size: 14px; } html[data-theme]:not(#cp) body .app-popover :is(.list-group-item, .dropdown-item):hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .app-popover :is(.list-group-item, .dropdown-item).active { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; font-weight: 600; } html[data-theme]:not(#cp) body .app-popover :is(input, select, textarea, .form-control) { background: var(--cp-surface) !important; color: var(--cp-text) !important; border-color: var(--cp-line-2) !important; } @media (pointer: coarse) { html[data-theme]:not(#cp) body .app-popover :is(.list-group-item, .dropdown-item) { min-height: 44px; display: flex; align-items: center; } } /* =========================================================================== v5.29 · Verkaufsphasen auf der Interessenten-Seite (contentag-crm.js renderStages) Pfad wie Salesforce: Pfeil-Segmente in einer Pille – erledigt grün mit Haken (Name beim Darüberfahren), aktuell in Markenfarbe, offen grau, zuletzt „Abschluss“ (Menü Gewonnen/Verloren). Kein Glow. Buttons im Seiteninhalt: dark-mode-fixes.css setzt Hintergrund/Farbe/Rand mit !important → hier ebenso. =========================================================================== */ .cp-stages { position: relative; z-index: 3; margin: 0 0 12px; padding: 14px 16px 16px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: var(--cp-surface); animation: cp-reveal var(--cp-dur-xl) var(--cp-e) both; } .cp-stg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; } .cp-stg-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-dim); } .cp-stg-now { font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-stg-now.is-won { color: var(--cp-success); } .cp-stg-now.is-lost { color: var(--cp-danger); } .cp-stg-prob { margin-left: auto; font-size: 11.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-stg-since { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--cp-muted); } .cp-stg-since svg { width: 13px; height: 13px; opacity: .8; } .cp-stg-row { display: flex; align-items: center; gap: 14px; } .cp-stages { --cp-path-h: 38px; --cp-path-n: 11px; --cp-path-done: color-mix(in srgb, var(--cp-success) 82%, #000); --cp-path-idle: color-mix(in srgb, var(--cp-surface-3), var(--cp-text) 6%); } .cp-path { display: flex; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; } .cp-path-s { flex: 1 1 0; min-width: 0; } .cp-path-s + .cp-path-s { margin-left: calc(3px - var(--cp-path-n)); } html[data-theme]:not(#cp) body .cp-path-s > button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: var(--cp-path-h); padding: 0 calc(var(--cp-path-n) + 6px) 0 calc(var(--cp-path-n) + 8px); border: 0 !important; border-radius: 0; overflow: hidden; cursor: pointer; background: var(--cp-path-idle) !important; color: var(--cp-text) !important; box-shadow: none !important; font: 500 12.5px/1 var(--cp-font); letter-spacing: 0; white-space: nowrap; -webkit-tap-highlight-color: transparent; clip-path: polygon(0 0, calc(100% - var(--cp-path-n)) 0, 100% 50%, calc(100% - var(--cp-path-n)) 100%, 0 100%, var(--cp-path-n) 50%); transition: background-color var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease), filter var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-path-s:first-child > button { padding-left: 16px; border-radius: calc(var(--cp-path-h) / 2) 0 0 calc(var(--cp-path-h) / 2); clip-path: polygon(0 0, calc(100% - var(--cp-path-n)) 0, 100% 50%, calc(100% - var(--cp-path-n)) 100%, 0 100%); } html[data-theme]:not(#cp) body .cp-path-s:last-child > button { padding-right: 16px; border-radius: 0 calc(var(--cp-path-h) / 2) calc(var(--cp-path-h) / 2) 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--cp-path-n) 50%); } .cp-path-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cp-path-ic, .cp-path-chev { display: inline-grid; place-items: center; flex: none; } .cp-path-ic svg { width: 15px; height: 15px; } .cp-path-chev svg { width: 13px; height: 13px; opacity: .7; } html[data-theme]:not(#cp) body .cp-path-s > button:not(:disabled):hover { background: color-mix(in srgb, var(--cp-path-idle), var(--cp-text) 9%) !important; } html[data-theme]:not(#cp) body .cp-path-s > button:disabled { cursor: default; } html[data-theme]:not(#cp) body .cp-path-s > button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cp-rust-hi) !important; text-decoration: underline; text-underline-offset: 3px; } /* erledigt: grün, nur Haken – Name beim Darüberfahren/Fokus */ html[data-theme]:not(#cp) body .cp-path-s.is-done > button { background: var(--cp-path-done) !important; color: #fff !important; } html[data-theme]:not(#cp) body .cp-path-s.is-done > button:not(:disabled):hover { background: color-mix(in srgb, var(--cp-path-done), #fff 8%) !important; } .cp-path-s.is-done .cp-path-t { display: none; } .cp-path-s.is-done > button:hover .cp-path-ic, .cp-path-s.is-done > button:focus-visible .cp-path-ic { display: none; } .cp-path-s.is-done > button:hover .cp-path-t, .cp-path-s.is-done > button:focus-visible .cp-path-t { display: block; } /* aktuell: Markenfarbe, füllt sich beim Wechsel von links, ruhiger Lichtstreif */ html[data-theme]:not(#cp) body .cp-path-s.is-cur > button { background: linear-gradient(var(--cp-rust), var(--cp-rust)) no-repeat left center / 100% 100%, var(--cp-path-idle) !important; color: #fff !important; font-weight: 600; } html[data-theme]:not(#cp) body .cp-path-s.is-cur > button:not(:disabled):hover { background: linear-gradient(var(--cp-rust-hi), var(--cp-rust-hi)) no-repeat left center / 100% 100%, var(--cp-path-idle) !important; } .cp-path-s.is-cur > button::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); transform: translateX(-120%); animation: cp-path-sheen 5.5s var(--cp-ease) 1.2s infinite; } @keyframes cp-path-sheen { 0% { transform: translateX(-120%); } 28%, 100% { transform: translateX(120%); } } .cp-stages.is-changed .cp-path-s.is-cur > button, .cp-stages.is-changed .cp-path-s.is-end:not(.is-open) > button { animation: cp-path-fill .7s var(--cp-e) both; } @keyframes cp-path-fill { from { background-size: 0% 100%, auto; } to { background-size: 100% 100%, auto; } } /* vor dem Verlust durchlaufen / danach nicht mehr erreicht */ html[data-theme]:not(#cp) body .cp-path-s.is-was > button { color: var(--cp-dim) !important; } .cp-path-s.is-was .cp-path-t { display: none; } .cp-path-s.is-was > button:hover .cp-path-ic { display: none; } .cp-path-s.is-was > button:hover .cp-path-t { display: block; } html[data-theme]:not(#cp) body .cp-path.is-lost .cp-path-s.is-next > button { color: var(--cp-dim) !important; } /* Abschluss */ html[data-theme]:not(#cp) body .cp-path-s.is-end.is-open > button { color: var(--cp-muted) !important; } html[data-theme]:not(#cp) body .cp-path-s.is-end.is-won > button { background: linear-gradient(var(--cp-path-done), var(--cp-path-done)) no-repeat left center / 100% 100%, var(--cp-path-idle) !important; color: #fff !important; font-weight: 600; } html[data-theme]:not(#cp) body .cp-path-s.is-end.is-lost > button { background: linear-gradient(var(--cp-danger), var(--cp-danger)) no-repeat left center / 100% 100%, var(--cp-path-idle) !important; color: #fff !important; font-weight: 600; } html[data-theme]:not(#cp) body .cp-path-s.is-end.is-won > button:not(:disabled):hover, html[data-theme]:not(#cp) body .cp-path-s.is-end.is-lost > button:not(:disabled):hover { filter: brightness(1.08); } /* speichert gerade */ .cp-stages.is-busy .cp-path-s > button, .cp-stages.is-busy .cp-path-next { pointer-events: none; } .cp-path-s > button.is-pending { animation: cp-path-wait 1s ease-in-out infinite alternate !important; } @keyframes cp-path-wait { from { filter: none; } to { filter: brightness(1.25); } } /* „Zurück zu …“ / „Weiter zu …“ */ .cp-path-btns { display: flex; gap: 8px; flex: none; min-width: 0; } html[data-theme]:not(#cp) body .cp-path-back { display: inline-flex; align-items: center; gap: 7px; flex: none; height: var(--cp-path-h); padding: 0 14px; border: 1px solid transparent !important; border-radius: calc(var(--cp-path-h) / 2); background: transparent !important; color: var(--cp-muted) !important; box-shadow: none !important; font: 500 12.5px/1 var(--cp-font); white-space: nowrap; cursor: pointer; transition: color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease); } .cp-path-back svg { width: 14px; height: 14px; } .cp-path-back span { overflow: hidden; text-overflow: ellipsis; max-width: 200px; } html[data-theme]:not(#cp) body .cp-path-back:hover { color: var(--cp-strong) !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .cp-path-back:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } @media (max-width: 1400px) and (min-width: 600px) { .cp-path-back span { display: none; } html[data-theme]:not(#cp) body .cp-path-back { width: var(--cp-path-h); padding: 0; justify-content: center; border-color: var(--cp-line-2) !important; } } html[data-theme]:not(#cp) body .cp-path-next { display: inline-flex; align-items: center; gap: 8px; flex: none; height: var(--cp-path-h); padding: 0 16px; border: 1px solid var(--cp-line-2) !important; border-radius: calc(var(--cp-path-h) / 2); background: transparent !important; color: var(--cp-strong) !important; box-shadow: none !important; font: 600 12.5px/1 var(--cp-font); white-space: nowrap; cursor: pointer; transition: border-color var(--cp-dur-s) var(--cp-ease), background-color var(--cp-dur-s) var(--cp-ease); } .cp-path-next svg { width: 14px; height: 14px; color: var(--cp-success); } html[data-theme]:not(#cp) body .cp-path-next:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .cp-path-next:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } .cp-path-next span { overflow: hidden; text-overflow: ellipsis; max-width: 220px; } /* Menü am Abschluss-Segment */ html[data-theme]:not(#cp) body .cp-path-menu { position: absolute; z-index: 20; width: 260px; padding: 6px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2) !important; box-shadow: var(--cp-shadow-pop); transform: translateY(-4px); transition: transform var(--cp-dur-m) var(--cp-e); } /* ohne Deckkraft-Übergang: immer sichtbar, auch wenn der Browser Übergänge drosselt */ .cp-path-menu.is-on { transform: none; } .cp-path-menu > button.is-reopen { margin-top: 4px; border-top: 1px solid var(--cp-line) !important; border-radius: 0 0 3px 3px; } .cp-path-menu > button.is-reopen > svg { color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-path-menu > button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0 !important; border-radius: 3px; text-align: left; cursor: pointer; background: transparent !important; color: var(--cp-text) !important; box-shadow: none !important; font: 500 13px/1.3 var(--cp-font); } html[data-theme]:not(#cp) body .cp-path-menu > button:hover, html[data-theme]:not(#cp) body .cp-path-menu > button:focus-visible { background: var(--cp-hover) !important; outline: none; } html[data-theme]:not(#cp) body .cp-path-menu > button.is-on { background: var(--cp-hover) !important; } .cp-path-menu > button > svg { flex: none; width: 16px; height: 16px; margin-top: 1px; } .cp-path-menu > button.is-won > svg { color: var(--cp-success); } .cp-path-menu > button.is-lost > svg { color: var(--cp-danger); } .cp-path-menu > button span { display: flex; flex-direction: column; gap: 2px; } .cp-path-menu > button b { font-weight: 600; color: var(--cp-strong); } .cp-path-menu > button small { font-size: 11.5px; color: var(--cp-muted); } /* Verlustgrund */ html[data-theme]:not(#cp) body .cp-stg-lost { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--cp-danger) 30%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--cp-danger) 7%, transparent) !important; font-size: 12.5px; color: var(--cp-text); } .cp-stg-lost > svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--cp-danger); } .cp-stg-lost-t { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .cp-stg-lost-t b { font-weight: 600; color: var(--cp-strong); } .cp-stg-lost-t q { quotes: "„" "“"; font-style: italic; color: var(--cp-text); overflow-wrap: anywhere; white-space: pre-line; } .cp-stg-lost-t small { font-size: 11px; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-stg-lost .cp-deal-link { flex: none; font-size: 12px; background: none !important; border-color: transparent !important; color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp) body .cp-stg-lost.is-missing { border-style: dashed; } /* v5.31 Gewonnen, aber noch Verkaufschance → als Kunde übernehmen */ html[data-theme]:not(#cp) body .cp-stg-won { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--cp-success) 35%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--cp-success) 8%, transparent) !important; font-size: 12.5px; color: var(--cp-text); } .cp-stg-won > svg { flex: none; width: 16px; height: 16px; color: var(--cp-success); } html[data-theme]:not(#cp) body .cp-stg-won .cp-crm-btn { flex: none; background: color-mix(in srgb, var(--cp-success) 82%, #000) !important; border-color: transparent !important; } html[data-theme]:not(#cp) body .cp-stg-won .cp-crm-btn svg { width: 13px; height: 13px; } @media (max-width: 599px) { html[data-theme]:not(#cp) body .cp-stg-won { flex-wrap: wrap; } html[data-theme]:not(#cp) body .cp-stg-won .cp-crm-btn { width: 100%; justify-content: center; min-height: 44px; } } /* Dialog „Verkaufschance verloren“ (nutzt .cp-deal) */ .cp-deal.cp-lost { width: 380px; } .cp-lost .cp-deal-ico { background: color-mix(in srgb, var(--cp-danger) 12%, transparent); color: var(--cp-danger); } .cp-lost-intro { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } .cp-lost-intro b { color: var(--cp-strong); font-weight: 600; } .cp-lost .cp-deal-f > span small { font-size: 10px; letter-spacing: .06em; text-transform: none; font-weight: 500; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-lost .cp-deal-f textarea { min-height: 76px; resize: vertical; line-height: 1.45; } .cp-lost-cnt { align-self: flex-end; min-height: 1em; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-crm-btn.is-lost { background: var(--cp-danger); border-color: var(--cp-danger); } html[data-theme]:not(#cp) body .cp-crm-btn.is-lost:hover { background: color-mix(in srgb, var(--cp-danger) 88%, #000); } html[data-theme]:not(#cp) body .cp-crm-btn.is-lost svg { width: 13px; height: 13px; } html[data-theme]:not(#cp) body .cp-crm-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } /* v5.68.0: Verlust-Dialog speichert (Stapel) – Fortschritt lesbar statt ausgegraut */ html[data-theme]:not(#cp) body .cp-lost.is-busy .cp-crm-btn.is-lost:disabled { opacity: .85; cursor: progress; } /* iPad hochkant & schmale Fenster: „Weiter“ unter den Pfad */ @media (max-width: 1100px) { .cp-stg-row { flex-direction: column; align-items: stretch; gap: 10px; } .cp-path-btns { align-self: flex-end; } } /* Handy: erledigte Stufen nur als Haken, aktuelle breiter */ @media (max-width: 599px) { .cp-stages { padding: 12px 12px 14px; --cp-path-h: 40px; --cp-path-n: 9px; } .cp-stg-head { margin-bottom: 10px; } .cp-stg-prob { margin-left: 0; width: 100%; } .cp-path-s.is-done, .cp-path-s.is-was { flex: 0 0 40px; } .cp-path-s.is-done .cp-path-t, .cp-path-s.is-was .cp-path-t { display: none !important; } .cp-path-s.is-done .cp-path-ic, .cp-path-s.is-was .cp-path-ic { display: inline-grid !important; } .cp-path-s.is-cur, .cp-path-s.is-end:not(.is-open) { flex-grow: 2.2; } html[data-theme]:not(#cp) body .cp-path-s > button { font-size: 11.5px; padding: 0 calc(var(--cp-path-n) + 3px) 0 calc(var(--cp-path-n) + 5px); gap: 4px; } html[data-theme]:not(#cp) body .cp-path-s:first-child > button { padding-left: 12px; } html[data-theme]:not(#cp) body .cp-path-s:last-child > button { padding-right: 12px; } .cp-path-s.is-end.is-open .cp-path-chev { display: none; } .cp-path-btns { align-self: stretch; } html[data-theme]:not(#cp) body .cp-path-next { flex: 1; justify-content: center; height: 44px; font-size: 13px; min-width: 0; } html[data-theme]:not(#cp) body .cp-path-back { height: 44px; border-color: var(--cp-line-2) !important; } .cp-path-back span { display: none; } html[data-theme]:not(#cp) body .cp-path-back { width: 44px; padding: 0; justify-content: center; } .cp-path-next span { max-width: none; } .cp-stg-lost { flex-wrap: wrap; } html[data-theme]:not(#cp) body .cp-stg-lost .cp-deal-link { margin-left: 25px; } .cp-deal.cp-lost.is-sheet { padding-bottom: env(safe-area-inset-bottom); } html[data-theme]:not(#cp) body .cp-lost .cp-deal-f select, html[data-theme]:not(#cp) body .cp-lost .cp-deal-f textarea { font-size: 16px; } html[data-theme]:not(#cp) body .cp-lost .cp-crm-btn { min-height: 44px; flex: 1; justify-content: center; } .cp-path-menu { width: calc(100% - 24px); left: 12px !important; } } @media (pointer: coarse) { .cp-path-menu > button { min-height: 48px; } } @media (prefers-reduced-motion: reduce) { .cp-path-s.is-cur > button::after { animation: none; display: none; } .cp-stages.is-changed .cp-path-s > button, .cp-path-s > button.is-pending { animation: none !important; } } html.cp-motion-off .cp-path-s.is-cur > button::after { animation: none; display: none; } html.cp-motion-off .cp-stages.is-changed .cp-path-s > button { animation: none; } /* =========================================================================== v5.30 · Kalender (RISE FullCalendar, Seite „Kalender“ und Kalender-Karten) Termine als ruhige, getönte Karten mit Farbstreifen statt Vollfarb-Blöcken (Farbe aus --ev, gesetzt in contentag-enhance.js), Heute als Kreis, Wochenende/Folgemonat zurückgenommen, „+“ zum Anlegen beim Darüberfahren. Zellhintergründe: die allgemeine Tabellenregel (td … transparent !important) ist spezifischer → doppeltes :not(). =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .fc td.fc-daygrid-day { background: transparent !important; transition: background-color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp):not(#cq) body .fc td.fc-daygrid-day.fc-day-sat, html[data-theme]:not(#cp):not(#cq) body .fc td.fc-daygrid-day.fc-day-sun, html[data-theme]:not(#cp):not(#cq) body .fc td.fc-timegrid-col.fc-day-sat, html[data-theme]:not(#cp):not(#cq) body .fc td.fc-timegrid-col.fc-day-sun { background: var(--cp-hover) !important; } html[data-theme]:not(#cp):not(#cq) body .fc td.fc-daygrid-day.fc-day-today, html[data-theme]:not(#cp):not(#cq) body .fc td.fc-timegrid-col.fc-day-today { background: color-mix(in srgb, var(--cp-rust) 7%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body #event-calendar td.fc-daygrid-day:not(.fc-day-other):hover { background: color-mix(in srgb, var(--cp-text) 5%, transparent) !important; cursor: pointer; } /* Tageszahl: klein, ruhig; heute als Kreis in Markenfarbe */ html[data-theme]:not(#cp) body .fc .fc-daygrid-day-top { align-items: center; padding: 6px 6px 2px; } html[data-theme]:not(#cp) body .fc a.fc-daygrid-day-number { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px !important; border-radius: 3px; color: var(--cp-text) !important; font: 500 12.5px/1 var(--cp-font); font-variant-numeric: tabular-nums; text-decoration: none !important; } html[data-theme]:not(#cp) body .fc .fc-day-other a.fc-daygrid-day-number { color: var(--cp-dim) !important; opacity: .6; } html[data-theme]:not(#cp) body .fc .fc-day-today a.fc-daygrid-day-number { background: var(--cp-rust); color: #fff !important; font-weight: 600; opacity: 1; } /* „+“ links neben der Zahl: Klick auf den Tag legt einen Termin an (RISE dateClick) */ html[data-theme]:not(#cp) body #event-calendar .fc-daygrid-day-top::after { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; margin-right: auto; border-radius: 3px; color: var(--cp-rust-hi); font: 500 16px/1 var(--cp-font); opacity: 0; transform: scale(.8); transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body #event-calendar td.fc-daygrid-day:not(.fc-day-other):hover .fc-daygrid-day-top::after { opacity: 1; transform: none; } @media (hover: none) { html[data-theme]:not(#cp) body #event-calendar .fc-daygrid-day-top::after { display: none; } } /* Kalenderwoche */ html[data-theme]:not(#cp) body .fc a.fc-daygrid-week-number { background: transparent !important; color: var(--cp-dim) !important; font: 600 9.5px/1 var(--cp-font); letter-spacing: .08em; padding: 9px 0 0 8px !important; text-decoration: none !important; } html[data-theme]:not(#cp) body .fc .fc-timegrid-axis-cushion { color: var(--cp-dim); font-size: 10px; letter-spacing: 0; max-width: none; white-space: nowrap; } /* Wochentage */ html[data-theme]:not(#cp) body .fc .fc-col-header-cell { padding: 8px 0 !important; } html[data-theme]:not(#cp) body .fc .fc-col-header-cell.fc-day-sat .fc-col-header-cell-cushion, html[data-theme]:not(#cp) body .fc .fc-col-header-cell.fc-day-sun .fc-col-header-cell-cushion { opacity: .65; } html[data-theme]:not(#cp) body .fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion { color: var(--cp-rust-hi) !important; opacity: 1; } /* Termine: getönte Karte + Farbstreifen (Farbe des Termins/Labels) */ html[data-theme]:not(#cp) body .fc a.fc-daygrid-event, html[data-theme]:not(#cp) body .fc a.fc-timegrid-event { --ev-c: var(--ev, var(--cp-rust)); margin: 1px 6px 3px !important; padding: 0 !important; border: 0 !important; border-radius: 3px !important; background: color-mix(in srgb, var(--ev-c) 22%, var(--cp-surface-2)) !important; box-shadow: inset 3px 0 0 var(--ev-c) !important; color: var(--cp-strong) !important; transition: background-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body .fc a.fc-daygrid-event:hover, html[data-theme]:not(#cp) body .fc a.fc-timegrid-event:hover { background: color-mix(in srgb, var(--ev-c) 34%, var(--cp-surface-2)) !important; } html[data-theme]:not(#cp) body .fc a.fc-h-event:not(.fc-event-start) { box-shadow: none !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: 0 !important; } html[data-theme]:not(#cp) body .fc a.fc-h-event:not(.fc-event-end) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-right: 0 !important; } html[data-theme]:not(#cp) body .fc a.fc-event.fc-event-past { opacity: .62; } html[data-theme]:not(#cp) body .fc .fc-event-main { overflow: hidden; color: inherit !important; } html[data-theme]:not(#cp) body .fc a.fc-event .clickable { display: block !important; width: 100% !important; padding: 4px 8px 4px 10px !important; border-radius: 0 !important; background: transparent !important; color: var(--cp-strong) !important; font: 500 12px/1.35 var(--cp-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .fc a.fc-event .clickable > span { display: inline; white-space: nowrap; } html[data-theme]:not(#cp) body .fc a.fc-event .clickable svg { width: 12px !important; height: 12px !important; margin-right: 3px; vertical-align: -1.5px; color: var(--ev-c); opacity: .9; } /* Termine ohne Symbol (FullCalendar-Standard): Punkt weg, Zeit gedämpft */ html[data-theme]:not(#cp) body .fc a.fc-daygrid-dot-event { padding: 4px 8px 4px 10px !important; } html[data-theme]:not(#cp) body .fc a.fc-daygrid-dot-event .fc-daygrid-event-dot { display: none; } html[data-theme]:not(#cp) body .fc a.fc-event .fc-event-time { color: var(--cp-muted) !important; font-weight: 500; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .fc a.fc-event .fc-event-title { color: var(--cp-strong) !important; font-weight: 500; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body .fc a.fc-timegrid-event .fc-event-main { padding: 4px 6px 4px 9px; font-size: 12px; } html[data-theme]:not(#cp) body .fc a.fc-timegrid-event .clickable { white-space: normal; padding: 0 !important; } html[data-theme]:not(#cp) body .fc .fc-timegrid-event-harness-inset .fc-timegrid-event { box-shadow: inset 3px 0 0 var(--ev-c), 0 0 0 1px var(--cp-surface) !important; } /* „+2 weitere“ und Aufklapp-Fenster */ html[data-theme]:not(#cp) body .fc a.fc-daygrid-more-link { margin: 1px 6px 0 !important; padding: 2px 8px; border-radius: 3px; color: var(--cp-muted) !important; font: 600 11.5px/1.4 var(--cp-font); text-decoration: none !important; } html[data-theme]:not(#cp) body .fc a.fc-daygrid-more-link:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .fc .fc-popover { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; box-shadow: var(--cp-shadow-pop) !important; overflow: hidden; } html[data-theme]:not(#cp) body .fc .fc-popover-header { background: var(--cp-surface-3) !important; color: var(--cp-strong) !important; padding: 8px 10px !important; font-weight: 600; font-size: 12.5px; } html[data-theme]:not(#cp) body .fc .fc-popover-body { padding: 6px 0 !important; background: transparent !important; } /* Woche/Tag: Raster, Jetzt-Linie */ html[data-theme]:not(#cp) body .fc .fc-timegrid-slot { height: 2.4em; border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .fc .fc-timegrid-slot-minor { border-top-style: dotted !important; } html[data-theme]:not(#cp) body .fc .fc-timegrid-slot-label-cushion { color: var(--cp-dim); font-size: 11px; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .fc .fc-timegrid-now-indicator-line { border-color: var(--cp-rust-hi) !important; border-width: 2px 0 0 !important; } html[data-theme]:not(#cp) body .fc .fc-timegrid-now-indicator-arrow { border-color: var(--cp-rust-hi) !important; border-top-color: transparent !important; border-bottom-color: transparent !important; } html[data-theme]:not(#cp) body .fc .fc-timegrid-divider { background: var(--cp-line) !important; padding: 0 0 1px !important; } /* Liste */ html[data-theme]:not(#cp) body .fc .fc-list { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp) body .fc .fc-list-day > th, html[data-theme]:not(#cp) body .fc .fc-list-day-cushion { background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body .fc .fc-list-day-text, html[data-theme]:not(#cp) body .fc .fc-list-day-side-text { color: var(--cp-strong) !important; font-weight: 600; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .fc tr.fc-list-event:hover td { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .fc .fc-list-event-dot { border-color: var(--ev, var(--cp-rust)) !important; } html[data-theme]:not(#cp) body .fc .fc-list-event-time { color: var(--cp-muted) !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .fc .fc-list-event .clickable { display: inline !important; background: transparent !important; color: var(--cp-strong) !important; padding: 0 !important; } html[data-theme]:not(#cp) body .fc .fc-list-event .clickable svg { width: 13px; height: 13px; color: var(--ev, var(--cp-rust)); vertical-align: -2px; margin-right: 4px; } @media (max-width: 767px) { html[data-theme]:not(#cp) body .fc a.fc-daygrid-event, html[data-theme]:not(#cp) body .fc a.fc-timegrid-event { margin: 1px 2px 2px !important; } html[data-theme]:not(#cp) body .fc a.fc-event .clickable, html[data-theme]:not(#cp) body .fc a.fc-daygrid-dot-event { padding: 3px 5px 3px 7px !important; font-size: 10.5px; } html[data-theme]:not(#cp) body .fc a.fc-event .clickable svg { display: none; } html[data-theme]:not(#cp) body .fc .fc-daygrid-day-top { padding: 3px 3px 1px; } html[data-theme]:not(#cp) body .fc a.fc-daygrid-day-number { min-width: 22px; height: 22px; font-size: 11.5px; padding: 0 4px !important; } html[data-theme]:not(#cp) body .fc a.fc-daygrid-week-number { display: none; } } /* v5.32 · Handy/iPad hochkant: lange Assistent-Hinweise („fehlt: Ansprechpartner, Telefon, Adresse, Website“) liefen rechts aus der Karte */ @media (max-width: 767px) { .cp-assist-chips { min-width: 0; flex-basis: 100%; } html[data-theme]:not(#cp) body .cp-chip { max-width: 100%; white-space: normal; text-align: left; line-height: 1.35; } html[data-theme]:not(#cp) body .cp-chip > svg { flex: none; } } /* =========================================================================== v5.32 · Kundenportal: „Das wartet auf Sie“ + Projektfortschritt (contentag-client-portal.js renderExtras) Divs im Seiteninhalt: dark-mode-fixes.css setzt Hintergründe transparent !important → Karten mit !important. =========================================================================== */ html[data-theme]:not(#cp) body .cp-portal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: -6px 0 22px; } html[data-theme]:not(#cp) body .cp-portal-grid.has-proj { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } html[data-theme]:not(#cp) body .cp-portal-card { min-width: 0; padding: 18px 18px 14px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: var(--cp-surface) !important; box-shadow: var(--cp-shadow); } .cp-portal-card > header { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; } .cp-portal-card > header h2 { margin: 0; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-strong); } .cp-portal-card > header a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cp-muted) !important; text-decoration: none !important; } .cp-portal-card > header a:hover { color: var(--cp-strong) !important; } .cp-portal-card > header svg, .cp-td-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cp-td-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--cp-rust); color: #fff; font-size: 11.5px; font-weight: 700; } /* Aufgabenliste des Kunden */ .cp-td-list { display: flex; flex-direction: column; gap: 6px; } html[data-theme]:not(#cp) body .cp-td-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2) !important; color: var(--cp-text) !important; text-decoration: none !important; transition: border-color var(--cp-dur-s) var(--cp-ease), background-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body a.cp-td-item:hover { border-color: var(--cp-line-2); background: color-mix(in srgb, var(--cp-surface-2), var(--cp-text) 4%) !important; transform: translateY(-1px); } .cp-td-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-td-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cp-td-ico.k-invoice { background: color-mix(in srgb, var(--cp-success) 12%, transparent); color: var(--cp-success); } .cp-td-ico.k-ticket { background: color-mix(in srgb, #6A9CFF 14%, transparent); color: #6A9CFF; } .cp-td-ico.k-contract, .cp-td-ico.k-estimate, .cp-td-ico.k-proposal { background: color-mix(in srgb, #4FC6C2 13%, transparent); color: #4FC6C2; } .cp-td-item.is-bad .cp-td-ico { background: color-mix(in srgb, var(--cp-danger) 13%, transparent); color: var(--cp-danger); } .cp-td-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .cp-td-txt b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-td-txt small { font-size: 12px; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .cp-td-item.is-bad .cp-td-txt small { color: var(--cp-danger); } .cp-td-cta { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); color: var(--cp-strong); font-size: 12px; font-weight: 600; white-space: nowrap; } html[data-theme]:not(#cp) body a.cp-td-item:hover .cp-td-cta { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-td-none { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 4px; } .cp-td-none > span { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--cp-success) 13%, transparent); color: var(--cp-success); } .cp-td-none > span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cp-td-none b { font-size: 13.5px; color: var(--cp-strong); font-weight: 600; } .cp-td-none small { font-size: 12px; color: var(--cp-muted); } /* Projekte mit Fortschritt */ .cp-pp-list { display: flex; flex-direction: column; gap: 6px; } html[data-theme]:not(#cp) body a.cp-pp-item { display: block; padding: 11px 12px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2) !important; color: var(--cp-text) !important; text-decoration: none !important; transition: border-color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body a.cp-pp-item:hover { border-color: var(--cp-line-2); } .cp-pp-top { display: flex; align-items: baseline; gap: 10px; } .cp-pp-top b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-pp-top span { font-size: 12.5px; font-weight: 600; color: var(--cp-rust-hi); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-pp-bar { height: 6px; margin: 9px 0 8px; border-radius: 3px; background: var(--cp-surface-3) !important; overflow: hidden; } html[data-theme]:not(#cp) body .cp-pp-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cp-rust), var(--cp-rust-hi)); transform-origin: left; animation: cp-pp-grow .9s var(--cp-e) both; } @keyframes cp-pp-grow { from { transform: scaleX(0); } } .cp-pp-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--cp-muted); } .cp-pp-meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .cp-pp-meta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 1100px) { html[data-theme]:not(#cp) body .cp-portal-grid.has-proj { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 599px) { html[data-theme]:not(#cp) body .cp-portal-card { padding: 14px 12px 10px; } html[data-theme]:not(#cp) body a.cp-td-item { padding: 10px; gap: 10px; } .cp-td-cta { padding: 0; border: 0; font-size: 0; gap: 0; } .cp-td-cta svg { width: 16px; height: 16px; color: var(--cp-muted); } .cp-td-txt small { white-space: normal; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .cp-pp-bar i { animation: none; } } html.cp-motion-off .cp-pp-bar i { animation: none !important; } /* v5.32 · Kundenportal am Handy: Begrüßung kompakter, damit „Das wartet auf Sie“ früh sichtbar ist */ .cp-l-short { display: none; } @media (max-width: 599px) { html[data-theme]:not(#cp) body .cp-portal-hero { gap: 14px; } html[data-theme]:not(#cp) body .cp-ph-sub { margin-bottom: 12px; } html[data-theme]:not(#cp) body .cp-ph-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } html[data-theme]:not(#cp) body .cp-ph-actions .cp-ph-btn:not(.is-primary) { height: 40px; padding: 0 6px; font-size: 10px; letter-spacing: .08em; min-width: 0; white-space: nowrap; overflow: hidden; } html[data-theme]:not(#cp) body .cp-ph-actions .cp-ph-btn:not(.is-primary) svg { display: none; } .cp-l-long { display: none; } .cp-l-short { display: inline; } html[data-theme]:not(#cp) body .cp-ph-contact { padding: 10px 12px; gap: 12px; } html[data-theme]:not(#cp) body .cp-ph-contact .cp-sp-avatar { width: 40px; height: 40px; } html[data-theme]:not(#cp) body .cp-ph-contact .cp-sp-role { display: none; } html[data-theme]:not(#cp) body .cp-ph-clinks { margin-top: 4px; } html[data-theme]:not(#cp) body .cp-ph-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } html[data-theme]:not(#cp) body .cp-ph-tiles .cp-ph-tile:first-child { grid-column: auto; } html[data-theme]:not(#cp) body .cp-ph-tile { padding: 10px 10px 9px; min-width: 0; } html[data-theme]:not(#cp) body .cp-ph-tile b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body .cp-ph-tile span { font-size: 9px; letter-spacing: .08em; line-height: 1.35; } html[data-theme]:not(#cp) body .cp-portal-grid { margin-top: -2px; } } /* =========================================================================== v5.33 · Vertriebsauswertung, Kundenzufriedenheit, Sterne-Bewertung (Dashboard, Ticket, Kundenportal) =========================================================================== */ /* Sterne (gemeinsam) */ .cp-rstars { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; } .cp-rstars .cp-star { display: inline-grid; place-items: center; color: var(--cp-line-2); } .cp-rstars .cp-star svg { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; } .cp-rstars .cp-star.is-on { color: #E8B44A; } html[data-theme]:not(#cp) body .cp-rstars.is-input .cp-star { width: 34px; height: 34px; padding: 0; border: 0 !important; border-radius: 3px; background: transparent !important; cursor: pointer; box-shadow: none !important; transition: transform var(--cp-dur-m) var(--cp-e), color var(--cp-dur-s) var(--cp-ease); } .cp-rstars.is-input .cp-star svg { width: 24px; height: 24px; } html[data-theme]:not(#cp) body .cp-rstars.is-input .cp-star:hover { transform: scale(1.12); color: #E8B44A; } .cp-rstars.is-input:hover .cp-star { color: #E8B44A; } .cp-rstars.is-input .cp-star:hover ~ .cp-star { color: var(--cp-line-2); } html[data-theme]:not(#cp) body .cp-rstars.is-input .cp-star:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 1px; } /* Dashboard: Kundenzufriedenheit */ .cp-cs { display: flex; flex-direction: column; gap: 14px; } .cp-cs-score { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; } .cp-cs-score b { grid-row: span 2; font-size: 40px; font-weight: 300; letter-spacing: -.02em; color: var(--cp-strong); line-height: 1; } .cp-cs-score .cp-star svg { width: 17px; height: 17px; } .cp-cs-score small { font-size: 11.5px; color: var(--cp-muted); } .cp-cs-dist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; } .cp-cs-dist li { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 8px; font-size: 12px; color: var(--cp-muted); } .cp-cs-dist li > span { display: inline-flex; align-items: center; gap: 3px; } .cp-cs-dist li > span svg { width: 11px; height: 11px; fill: #E8B44A; stroke: none; } .cp-cs-dist em { height: 6px; border-radius: 3px; background: var(--cp-surface-3); overflow: hidden; position: relative; } .cp-cs-dist em i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: #E8B44A; animation: cp-pp-grow .9s var(--cp-e) both; transform-origin: left; } .cp-cs-dist em i.r1, .cp-cs-dist em i.r2 { background: var(--cp-danger); } .cp-cs-dist li > b { text-align: right; color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body a.cp-cs-quote { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2) !important; color: var(--cp-text) !important; text-decoration: none !important; } html[data-theme]:not(#cp) body a.cp-cs-quote:hover { border-color: var(--cp-line-2); } .cp-cs-quote q { font-size: 12.5px; font-style: italic; quotes: "„" "“"; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cp-cs-quote small { font-size: 11px; color: var(--cp-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-cs-quote .cp-star svg { width: 12px; height: 12px; } /* Ticket-Seite (Team): Kundenbewertung */ html[data-theme]:not(#cp) body .cp-trate { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: var(--cp-surface) !important; } .cp-trate-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 3px; background: color-mix(in srgb, #E8B44A 14%, transparent); color: #E8B44A; } .cp-trate-ico svg { width: 17px; height: 17px; } .cp-trate > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 13px; } .cp-trate > div > b { color: var(--cp-strong); font-weight: 600; } .cp-trate-l { color: var(--cp-muted); font-size: 12px; } .cp-trate q { flex-basis: 100%; font-style: italic; color: var(--cp-text); quotes: "„" "“"; overflow-wrap: anywhere; } .cp-trate small { flex-basis: 100%; font-size: 11.5px; color: var(--cp-dim); } html[data-theme]:not(#cp) body .cp-trate.r1, html[data-theme]:not(#cp) body .cp-trate.r2 { border-color: color-mix(in srgb, var(--cp-danger) 40%, transparent); } html[data-theme]:not(#cp) body .cp-trate.is-empty { padding: 10px 14px; opacity: .85; } /* Kundenportal: Bewertung in „Das wartet auf Sie“ und auf der Ticket-Seite */ html[data-theme]:not(#cp) body .cp-td-item.cp-td-rate { flex-wrap: wrap; cursor: default; } html[data-theme]:not(#cp) body .cp-td-item.cp-td-rate:hover { transform: none; } .cp-td-ico.k-rate { background: color-mix(in srgb, #E8B44A 14%, transparent); color: #E8B44A; } .cp-td-ico.k-rate svg { fill: currentColor; } .cp-rate-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .cp-td-rate .cp-rate-form { margin-left: auto; } .cp-rate-lbl { font-size: 12px; color: var(--cp-muted); min-width: 90px; } .cp-rate-more { display: flex; flex-direction: column; gap: 8px; flex-basis: 100%; } .cp-rate-more[hidden] { display: none; } html[data-theme]:not(#cp) body .cp-rate-more textarea { width: 100%; min-height: 64px; padding: 9px 11px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface) !important; color: var(--cp-strong); font: 500 13.5px/1.45 var(--cp-font); resize: vertical; } html[data-theme]:not(#cp) body .cp-rate-more textarea:focus { outline: none; border-color: var(--cp-rust-hi); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp) body .cp-rate-more .cp-ph-btn { align-self: flex-end; } .cp-rate-done { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; } html[data-theme]:not(#cp) body .cp-rate-done b { color: var(--cp-success); font-weight: 600; } .cp-rate-done q { flex-basis: 100%; font-style: italic; color: var(--cp-text); quotes: "„" "“"; } html[data-theme]:not(#cp) body .cp-rate-change { padding: 0; border: 0 !important; background: none !important; color: var(--cp-rust-hi) !important; text-decoration: underline; cursor: pointer; font: inherit; } html[data-theme]:not(#cp) body .cp-td-rate .cp-td-txt { min-width: 180px; } html[data-theme]:not(#cp) body .cp-rate-card { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 16px; } .cp-rate-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } .cp-rate-body > b { font-size: 14px; color: var(--cp-strong); font-weight: 600; } @media (max-width: 599px) { .cp-td-rate .cp-rate-form { margin-left: 0; flex-basis: 100%; } html[data-theme]:not(#cp) body .cp-rstars.is-input .cp-star { width: 44px; height: 44px; } .cp-rstars.is-input .cp-star svg { width: 28px; height: 28px; } html[data-theme]:not(#cp) body .cp-rate-more .cp-ph-btn { align-self: stretch; justify-content: center; min-height: 44px; } html[data-theme]:not(#cp) body .cp-rate-more textarea { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .cp-cs-dist em i { animation: none; } } html.cp-motion-off .cp-cs-dist em i { animation: none !important; } /* =========================================================================== v5.33 · Vertriebsauswertung neu (Nutzerwunsch: „viel besser, mit Motion, professioneller“) Kacheln mit Zählanimation, Ring-Gauge, Ergebnis-Leiste, Rangliste Verlustgründe, Verkaufszyklus als Phasenleiste. Start erst, wenn das Widget sichtbar ist (.is-pre → .is-in, contentag-crm.js renderAnalytics). =========================================================================== */ /* Zeitraum-Umschalter im Kopf */ html[data-theme]:not(#cp) body .cp-an-toggle { position: relative; display: inline-flex; margin-left: auto; margin-right: 8px; padding: 3px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body .cp-an-toggle button { position: relative; z-index: 1; padding: 5px 12px; border: 0 !important; border-radius: 3px; background: transparent !important; box-shadow: none !important; color: var(--cp-muted) !important; font: 600 10.5px/1 var(--cp-font); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-an-toggle button.is-on { color: var(--cp-strong) !important; } .cp-an-toggle > i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 3px; background: var(--cp-surface-3); box-shadow: inset 0 0 0 1px var(--cp-line-2); transition: transform var(--cp-dur-l) var(--cp-e); } .cp-an-toggle[data-per="d90"] > i { transform: translateX(100%); } .cp-an2 { display: flex; flex-direction: column; gap: 16px; } /* Kennzahl-Kacheln */ .cp-an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } html[data-theme]:not(#cp) body .cp-an-kpi { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2) !important; overflow: hidden; transition: border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e), opacity .5s var(--cp-e); transition-delay: 0s; } html[data-theme]:not(#cp) body .cp-an-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--k, var(--cp-line-2)); opacity: .9; } html[data-theme]:not(#cp) body .cp-an-kpi:hover { border-color: var(--cp-line-2); transform: translateY(-2px); } .cp-an-kpi.is-won { --k: var(--cp-success); } .cp-an-kpi.is-lost { --k: var(--cp-danger); } .cp-an-kpi.is-cycle { --k: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-an-kpi.is-rate { --k: var(--cp-success); flex-direction: row; align-items: center; gap: 16px; } /* Werkzeuge der Karte (Einklappen …) haben ebenfalls margin-left:auto → Umschalter sonst mittig */ html[data-theme]:not(#cp) body .card-header .cp-an-toggle ~ .cp-card-tools { margin-left: 0 !important; } .cp-an-kpi-top { display: flex; align-items: center; gap: 8px; } .cp-an-kpi-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; background: color-mix(in srgb, var(--k) 14%, transparent); color: var(--k); } .cp-an-kpi-ico svg { width: 13px; height: 13px; } .cp-an-kpi-l { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-dim); } .cp-an-kpi-v { display: flex; align-items: baseline; gap: 5px; } .cp-an-kpi-v b { font-size: 30px; font-weight: 300; letter-spacing: -.02em; color: var(--cp-strong); line-height: 1.05; font-variant-numeric: tabular-nums; } .cp-an-unit { font-size: 12px; color: var(--cp-muted); } .cp-an-kpi small { font-size: 11.5px; color: var(--cp-muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-an-kpi.is-rate > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .cp-an-gauge { flex: none; width: 64px; height: 64px; transform: rotate(-90deg); } .cp-an-gauge circle { fill: none; stroke-width: 7; } .cp-an-gauge .bg { stroke: var(--cp-surface-3); } .cp-an-gauge .fg { stroke: var(--cp-success); stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--off); transition: stroke-dashoffset 1.2s var(--cp-e) .15s; } /* Ergebnis-Leiste */ .cp-an-result { display: flex; flex-direction: column; gap: 8px; } html[data-theme]:not(#cp) body .cp-an-result-bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--cp-surface-3) !important; } .cp-an-result-bar > i { display: block; width: var(--w); height: 100%; transition: width 1s var(--cp-e) .2s; } .cp-an-result-bar > i.is-won, .cp-an-legend i.is-won { background: var(--cp-success); } .cp-an-result-bar > i.is-lost, .cp-an-legend i.is-lost { background: var(--cp-danger); } .cp-an-result-bar > i.is-open, .cp-an-legend i.is-open { background: color-mix(in srgb, var(--cp-text) 22%, transparent); } .cp-an-result-bar > i.is-empty { background: transparent; } .cp-an-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--cp-muted); } .cp-an-legend span { display: inline-flex; align-items: center; gap: 7px; } .cp-an-legend i { width: 8px; height: 8px; border-radius: 2px; } .cp-an-legend b { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } /* Panels */ .cp-an-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; } html[data-theme]:not(#cp) body .cp-an-panel { min-width: 0; padding: 14px 16px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2) !important; } .cp-an-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; } .cp-an-panel h4 { margin: 0 !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-strong); } .cp-an-panel > header span { font-size: 11.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } /* Verlustgründe als Rangliste */ .cp-an-rank { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .cp-an-rank li { display: grid; grid-template-columns: 20px minmax(0, 1.2fr) minmax(40px, 1fr) 22px 34px; align-items: center; gap: 8px; font-size: 12.5px; transition: opacity .45s var(--cp-e), transform .45s var(--cp-e); } .cp-an-rank-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; background: var(--cp-surface-3); color: var(--cp-muted); font-size: 10.5px; font-weight: 700; } .cp-an-rank li:first-child .cp-an-rank-n { background: color-mix(in srgb, var(--cp-danger) 16%, transparent); color: var(--cp-danger); } .cp-an-rank-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-text); } .cp-an-rank em { height: 6px; border-radius: 3px; background: var(--cp-surface-3); overflow: hidden; } .cp-an-rank em i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--cp-danger) 55%, transparent), var(--cp-danger)); transition: width .9s var(--cp-e); } .cp-an-rank b { text-align: right; color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .cp-an-rank small { text-align: right; color: var(--cp-dim); font-size: 11px; font-variant-numeric: tabular-nums; } .cp-an-rank li.is-none .cp-an-rank-l { color: var(--cp-dim); font-style: italic; } .cp-an-rank li.is-none em i { background: var(--cp-line-2); } .cp-an-empty { display: flex; align-items: center; gap: 12px; padding: 6px 0; } .cp-an-empty > span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--cp-success) 13%, transparent); color: var(--cp-success); } .cp-an-empty > span svg { width: 16px; height: 16px; } .cp-an-empty > div { display: flex; flex-direction: column; gap: 2px; } .cp-an-empty b { font-size: 13px; color: var(--cp-strong); font-weight: 600; } .cp-an-empty small { font-size: 11.5px; color: var(--cp-muted); line-height: 1.45; } /* Verkaufszyklus */ html[data-theme]:not(#cp) body .cp-an-cycle { display: flex; gap: 3px; height: 34px; border-radius: 3px; overflow: hidden; background: var(--cp-surface-3) !important; } .cp-an-cycle > i { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; width: var(--w); height: 100%; background: color-mix(in srgb, var(--c) 78%, #000); cursor: default; transition: width 1s var(--cp-e), filter var(--cp-dur-s) var(--cp-ease), opacity var(--cp-dur-s) var(--cp-ease); transition-delay: calc(var(--i, 0) * 90ms), 0s, 0s; } .cp-an-cycle > i span { font-style: normal; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .cp-an-cycle > i.is-empty { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--cp-text) 5%, transparent) 8px 16px); } .cp-an-cycle > i.is-empty span { color: var(--cp-dim); text-shadow: none; font-weight: 500; } .cp-an2.has-hl .cp-an-cycle > i:not(.is-hl) { opacity: .45; } .cp-an-cycle > i.is-hl { filter: brightness(1.15); } .cp-an-stages { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; } .cp-an-stages li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 26px; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 3px; font-size: 12.5px; transition: background-color var(--cp-dur-s) var(--cp-ease), opacity .45s var(--cp-e), transform .45s var(--cp-e); } .cp-an-stages li > i { width: 8px; height: 8px; border-radius: 50%; } .cp-an-stages li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-text); } .cp-an-stages li > b { color: var(--cp-strong); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; } .cp-an-stages li > small { color: var(--cp-dim); font-size: 10.5px; text-align: right; } html[data-theme]:not(#cp) body .cp-an-stages li.is-nodata > b { color: var(--cp-dim); font-weight: 500; } .cp-an-stages li.is-hl { background: var(--cp-hover); } .cp-an-hint { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 11.5px; color: var(--cp-dim); } .cp-an-hint svg { width: 13px; height: 13px; flex: none; } /* Motion: Ausgangszustand bis sichtbar, dann gestaffelt einblenden */ .cp-an2.is-pre .cp-an-kpi, .cp-an2.is-pre .cp-an-rank li, .cp-an2.is-pre .cp-an-stages li { opacity: 0; transform: translateY(8px); } .cp-an2.is-in .cp-an-kpi { transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms); } .cp-an2.is-in .cp-an-rank li, .cp-an2.is-in .cp-an-stages li { transition-delay: calc(200ms + var(--i, 0) * 60ms); } .cp-an2.is-pre .cp-an-gauge .fg { stroke-dashoffset: var(--c); } .cp-an2.is-pre .cp-an-result-bar > i, .cp-an2.is-pre .cp-an-rank em i, .cp-an2.is-pre .cp-an-cycle > i:not(.is-empty) { width: 0; } .cp-an2.is-in .cp-an-rank em i { transition-delay: calc(260ms + var(--i, 0) * 60ms); } @media (max-width: 1280px) { .cp-an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .cp-an-cols { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 599px) { .cp-an-kpis { gap: 8px; } html[data-theme]:not(#cp) body .cp-an-kpi { padding: 12px; } .cp-an-kpi.is-rate { grid-column: 1 / -1; } .cp-an-kpi-v b { font-size: 26px; } .cp-an-kpi small { white-space: normal; } .cp-an-stages { grid-template-columns: minmax(0, 1fr); } .cp-an-rank li { grid-template-columns: 20px minmax(0, 1fr) 60px 20px 32px; } html[data-theme]:not(#cp) body .cp-an-toggle { margin-right: 4px; } html[data-theme]:not(#cp) body .cp-an-toggle button { padding: 5px 9px; } } @media (prefers-reduced-motion: reduce) { .cp-an2 *, .cp-an-toggle > i { transition: none !important; } .cp-an2.is-pre .cp-an-kpi, .cp-an2.is-pre .cp-an-rank li, .cp-an2.is-pre .cp-an-stages li { opacity: 1; transform: none; } } html.cp-motion-off .cp-an2 *, html.cp-motion-off .cp-an-toggle > i { transition: none !important; } /* v5.33 · Deal: Potenzial (12 Monate), Art (einmalig/Serie), Wahrscheinlichkeit manuell (Leiste + Info-Karte) */ html[data-theme]:not(#cp) body .cp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface) !important; } html[data-theme]:not(#cp) body .cp-seg button { padding: 8px 10px; border: 0 !important; border-radius: 3px; background: transparent !important; box-shadow: none !important; color: var(--cp-muted) !important; font: 600 12.5px/1.2 var(--cp-font); cursor: pointer; transition: background-color var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-seg button:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .cp-seg button.is-on { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; box-shadow: inset 0 0 0 1px var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .cp-seg button:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 1px; } html[data-theme]:not(#cp) body .cp-stg-prob.is-edit { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; margin: -3px -8px -3px auto; border: 1px solid transparent !important; border-radius: 3px; background: transparent !important; box-shadow: none !important; color: var(--cp-muted) !important; font: 500 11.5px/1.3 var(--cp-font); cursor: pointer; transition: border-color var(--cp-dur-s) var(--cp-ease), color var(--cp-dur-s) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-stg-prob.is-edit:hover { border-color: var(--cp-line-2) !important; color: var(--cp-strong) !important; } .cp-stg-prob.is-edit svg { width: 12px; height: 12px; opacity: .7; } .cp-stg-prob.is-edit em { font-style: normal; padding: 1px 6px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-size: 10.5px; font-weight: 600; } html[data-theme]:not(#cp) body .cp-li-deal > a { color: var(--cp-text) !important; text-decoration: none !important; } html[data-theme]:not(#cp) body .cp-li-deal > a:hover { color: var(--cp-rust-hi) !important; } .cp-li-deal > span svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--cp-muted); } .cp-li-deal b { font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-li-deal small { color: var(--cp-muted); font-size: 11.5px; } @media (max-width: 599px) { html[data-theme]:not(#cp) body .cp-stg-prob.is-edit { margin: 0; padding: 4px 0; } } /* v5.33 · Eingeklappte Seitenleiste bleibt stehen (Nutzer-Screenshot Kundenportal, gilt für alle Logins) RISE macht im eingeklappten Zustand #left-menu-toggle-mask zum Scroll-Bereich und setzt der Leiste (position:absolute) die volle Inhaltshöhe → sie scrollte mit dem Inhalt weg. Ab Desktop fest verankern. */ @media (min-width: 992px) { html[data-theme]:not(#cp) body.sidebar-toggled .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0; height: 100vh !important; height: 100dvh !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none; z-index: 1031; } /* v5.75.6: !important – modern-ui.css setzt „body.sidebar-toggled .sidebar { overflow: visible !important }“, dadurch waren die unteren Symbole nicht erreichbar */ html[data-theme]:not(#cp) body.sidebar-toggled .sidebar::-webkit-scrollbar { display: none; } /* v5.75.6: Zeichen oben bleibt beim Scrollen der eingeklappten Leiste stehen */ html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-brand.brand-logo-mini { position: sticky !important; top: 0; z-index: 2; } /* v5.75.7: das klebende Zeichen nimmt jetzt selbst Platz ein → den alten Abstand (66 px für das feste Zeichen) entfernen, sonst Lücke oben */ html[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-scroll { margin-top: 0 !important; } /* v5.167.1 · iPad-App (Nutzer-Screenshot): die Leiste rückt schon per padding-top um die Statusleiste (--cp-sat) nach unten – das klebende Zeichen darf nicht zusätzlich „top: --cp-sat“ haben, sonst sitzt es doppelt tief über dem ersten Menüpunkt */ html.cp-ios-app[data-theme]:not(#cp) body.sidebar-toggled .sidebar .sidebar-brand.brand-logo-mini { top: 0 !important; } } /* Kundenportal: „Das wartet auf Sie“ nicht auf die Höhe der Projektkarte strecken */ html[data-theme]:not(#cp) body .cp-portal-grid { align-items: start; } /* =========================================================================== v5.33 · Dashboard am Handy (Nutzerwunsch): Kopf kompakter – Schnellaktionen als 3×2-Raster, Kennzahlen als flache Kacheln (Symbol links, Zahl rechts) statt 230 px hoher Karten =========================================================================== */ @media (max-width: 599px) { html[data-theme]:not(#cp) body .cp-hero-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } html[data-theme]:not(#cp) body .cp-hero-actions .cp-qa { justify-content: center; min-width: 0; height: 40px; padding: 0 6px !important; margin: 0 !important; font-size: 10.5px !important; letter-spacing: .08em; white-space: nowrap; overflow: hidden; } html[data-theme]:not(#cp) body .cp-hero-actions .cp-qa svg { width: 12px; height: 12px; flex: none; } html[data-theme]:not(#cp) body .cp-hero-stats { gap: 8px; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .card-body { flex-direction: row; align-items: center !important; justify-content: flex-start; gap: 10px; padding: 10px 12px !important; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-icon { width: 30px !important; height: 30px !important; min-width: 30px; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-details { min-width: 0; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-details h1 { font-size: 21px !important; margin: 0 0 3px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-details span { font-size: 9px !important; letter-spacing: .1em !important; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-details .badge, html[data-theme]:not(#cp) body .cp-hero-stats .dashboard-icon-widget .widget-details [class*="overdue"] { margin-top: 4px !important; font-size: 10px !important; padding: 2px 7px !important; } html[data-theme]:not(#cp) body .cp-hero-stats .clock-in-out-card .widget-details .btn { padding: 5px 9px !important; font-size: 11px !important; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-hero-stats .clock-in-out-card .widget-details > div { margin-top: 4px !important; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Stempeluhr: Knopf braucht die Breite – Symbol am Handy weg */ html[data-theme]:not(#cp) body .cp-hero-stats .clock-in-out-card .widget-icon { display: none !important; } } /* =========================================================================== v5.34 · Geschäft (Shop): Motiv statt grauem Platzhalter, kompakte Karten, Preis in Markenfarbe, Warenkorb-Knöpfe auf Touch-Geräten sichtbar (RISE zeigt sie nur bei :hover) =========================================================================== */ html[data-theme]:not(#cp) body.store-page #items-container > [class*="col-"] { margin-bottom: 18px; } html[data-theme]:not(#cp) body.store-page #items-container .card { height: 100%; margin: 0 !important; border: 1px solid var(--cp-line) !important; border-radius: 3px !important; background: var(--cp-surface) !important; overflow: hidden; transition: border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e), box-shadow var(--cp-dur-m) var(--cp-ease); } html[data-theme]:not(#cp) body.store-page #items-container .card:hover { border-color: var(--cp-line-2) !important; transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(0,0,0,.9) !important; } html[data-theme]:not(#cp) body.store-page .cart-grid-item { display: flex; flex-direction: column; height: 100%; border-radius: 0; background: transparent !important; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-image-container { height: auto; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-image.cp-motif { position: relative; display: grid; place-items: center; background: radial-gradient(120% 90% at 15% 0%, hsl(var(--h) 55% 38% / .55), transparent 60%), radial-gradient(90% 80% at 100% 100%, hsl(calc(var(--h) + 35) 50% 30% / .45), transparent 60%), linear-gradient(135deg, hsl(var(--h) 30% 14%), hsl(calc(var(--h) + 20) 28% 9%)) !important; } html[data-theme]:not(#cp) body.store-page .cart-grid-item-image.cp-motif::before { /* feines Raster */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent); } .cp-motif-ico { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 3px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); backdrop-filter: blur(6px); transition: transform var(--cp-dur-l) var(--cp-e); } .cp-motif-ico svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .92; } html[data-theme]:not(#cp) body.store-page .cart-grid-item:hover .cart-grid-item-image.cp-motif { transform: none; } html[data-theme]:not(#cp) body.store-page .cart-grid-item:hover .cp-motif-ico { transform: scale(1.08) rotate(-4deg); } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-details-section { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px !important; } html[data-theme]:not(#cp) body.store-page .cart-grid-item-details-section .font-16 { font-size: 15px !important; font-weight: 600 !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body.store-page .cart-item-rate .text-danger { color: var(--cp-rust-hi) !important; font-size: 16px; font-weight: 600 !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body.store-page .cart-item-rate .text-off { color: var(--cp-muted) !important; font-size: 11.5px !important; margin-left: 2px; } html[data-theme]:not(#cp) body.store-page .cart-grid-item-details-section > .text-wrap-ellipsis:last-child { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--cp-muted); font-size: 12.5px; line-height: 1.5; margin-top: 4px !important; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons { top: 28%; } /* Desktop-Hover: Knöpfe über dem Motiv */ html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons .btn-info { background: var(--cp-rust) !important; border-color: var(--cp-rust) !important; color: #fff !important; font-weight: 600; border-radius: 3px !important; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons .btn-default { border-radius: 3px !important; background: var(--cp-surface-2) !important; border-color: var(--cp-line-2) !important; } /* Touch: Knöpfe unter der Beschreibung dauerhaft zeigen */ @media (hover: none), (pointer: coarse) { html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons { position: static; order: 3; transform: none !important; visibility: visible; opacity: 1; justify-content: flex-start; width: auto; padding: 0 16px 16px; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons .btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; } html[data-theme]:not(#cp) body.store-page .cart-grid-item:hover .cart-grid-item-image-container::before { background-color: transparent; } } @media (max-width: 599px) { html[data-theme]:not(#cp) body.store-page #items-container > [class*="col-"] { width: 50%; padding: 0 6px; margin-bottom: 12px; } html[data-theme]:not(#cp) body.store-page #items-container { margin: 0 -6px; } .cp-motif-ico { width: 46px; height: 46px; border-radius: 3px; } .cp-motif-ico svg { width: 22px; height: 22px; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-details-section { padding: 10px 11px 12px !important; } html[data-theme]:not(#cp) body.store-page .cart-grid-item-details-section .font-16 { font-size: 13px !important; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } html[data-theme]:not(#cp) body.store-page .cart-grid-item-details-section > .text-wrap-ellipsis:last-child { display: none; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons { padding: 0 11px 12px; gap: 6px; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons .btn-info { font-size: 0 !important; padding: 0 12px !important; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons .btn-info svg { width: 16px; height: 16px; } } /* Shop: Karte randlos (card-body hatte 20 px Innenabstand + zweiten Rahmen am Inhalt) */ html[data-theme]:not(#cp) body.store-page #items-container .card > .card-body { padding: 0 !important; background: transparent !important; } html[data-theme]:not(#cp) body.store-page #items-container .cart-grid-item { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* v5.34 · Eingebetteter Kalender (Verkaufschance/Kunde, RISE .calender-mobile-view) ab Tablet: Werkzeugleiste in einer Zeile, Zeilen füllen die Fläche (--cp-row-h aus contentag-enhance.js) */ @media (min-width: 768px) { html[data-theme]:not(#cp) body .calender-mobile-view .fc-header-toolbar { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; text-align: left; } html[data-theme]:not(#cp) body .calender-mobile-view .fc-header-toolbar .fc-button-group, html[data-theme]:not(#cp) body .calender-mobile-view .fc-header-toolbar .fc-today-button { float: none !important; } html[data-theme]:not(#cp) body .calender-mobile-view .fc-header-toolbar .fc-button-group:last-child { margin-top: 0 !important; } html[data-theme]:not(#cp) body .calender-mobile-view .fc-header-toolbar .fc-toolbar-title { margin: 0 !important; font-size: 18px !important; } html[data-theme]:not(#cp) body .calender-mobile-view .fc-daygrid-day-frame { min-height: var(--cp-row-h, 64px); } } @media (min-width: 992px) { html[data-theme]:not(#cp) body .calender-mobile-view #event-calendar { height: 580px !important; } } /* v5.34 · Handy: Kopf-Knöpfe der Dashboard-Widgets (Export / Verkaufschance / Kanban) als 3er-Raster statt abgeschnittener Zeile */ @media (max-width: 599px) { html[data-theme]:not(#cp) body .cp-crm-card .card-header .cp-crm-h-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible !important; } html[data-theme]:not(#cp) body .cp-crm-card .card-header .cp-crm-h-actions > .cp-crm-hbtn { justify-content: center; min-width: 0; padding: 0 6px !important; font-size: 10px !important; letter-spacing: .06em; white-space: nowrap; overflow: hidden; } html[data-theme]:not(#cp) body .cp-crm-card .card-header .cp-crm-h-actions > .cp-crm-hbtn svg { display: none; } } /* =========================================================================== v5.35 · Nächster Schritt + Lead-Score (Phasenleiste, Liste, Kanban) =========================================================================== */ .cp-stg-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--cp-line); } .cp-next { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 12.5px; color: var(--cp-text); } .cp-next > svg { width: 15px; height: 15px; flex: none; color: var(--cp-success); } .cp-next-l { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-dim); } .cp-next > span:not(.cp-next-l) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; } .cp-next > b { font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-next-link { padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--cp-strong) !important; font: 500 12.5px/1.3 var(--cp-font); cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; text-decoration: underline; text-decoration-color: var(--cp-line-2); text-underline-offset: 3px; } html[data-theme]:not(#cp) body .cp-next-link:hover { text-decoration-color: var(--cp-rust-hi); } .cp-next.is-overdue > svg, html[data-theme]:not(#cp) body .cp-next.is-overdue > b { color: var(--cp-danger); } .cp-next.is-none > svg { color: #E8B44A; } .cp-next.is-none .cp-next-l { color: #E8B44A; letter-spacing: .08em; text-transform: none; font-size: 12.5px; font-weight: 500; } html[data-theme]:not(#cp) body .cp-next.is-none .cp-crm-btn { padding: 5px 10px; font-size: 10px; } /* Score-Chip mit Mini-Ring */ .cp-score { --c: #7E93B8; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font: 600 11.5px/1.2 var(--cp-font); white-space: nowrap; cursor: help; font-variant-numeric: tabular-nums; } .cp-score.is-hot { --c: #F0694A; } .cp-score.is-warm { --c: #E8B44A; } .cp-score > i { width: 18px; height: 18px; border-radius: 50%; flex: none; background: radial-gradient(closest-side, var(--cp-surface) 62%, transparent 64%), conic-gradient(var(--c) calc(var(--v) * 1%), color-mix(in srgb, var(--c) 20%, transparent) 0); } .cp-score.is-sm { padding: 1px 7px 1px 2px; gap: 4px; font-size: 10.5px; } .cp-score.is-sm > i { width: 14px; height: 14px; } .cp-row-nonext { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #E8B44A; } .cp-row-nonext svg { width: 12px; height: 12px; } @media (max-width: 599px) { .cp-stg-foot { align-items: flex-start; } .cp-next > span:not(.cp-next-l), html[data-theme]:not(#cp) body .cp-next-link { max-width: 220px; } } /* =========================================================================== v5.35 · Geschäft: Umschalter Raster/Liste + Listenansicht =========================================================================== */ html[data-theme]:not(#cp) body.store-page .cp-store-view { display: inline-flex; gap: 2px; margin-left: 10px; padding: 3px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body.store-page .cp-store-view button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0 !important; border-radius: 3px; background: transparent !important; box-shadow: none !important; color: var(--cp-muted) !important; cursor: pointer; } html[data-theme]:not(#cp) body.store-page .cp-store-view button.is-on { background: var(--cp-surface-3) !important; color: var(--cp-strong) !important; box-shadow: inset 0 0 0 1px var(--cp-line-2) !important; } .cp-store-view svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Liste */ html[data-theme]:not(#cp) body.store-page.cp-store-list #items-container > [class*="col-"] { flex: 0 0 100%; max-width: 100%; width: 100%; margin-bottom: 8px; } html[data-theme]:not(#cp) body.store-page.cp-store-list #items-container .card:hover { transform: none; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item .cart-grid-item-image-container { grid-row: 1; grid-column: 1; aspect-ratio: auto; height: 100%; min-height: 76px; border-bottom: 0; border-right: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item-image.cp-motif::before { display: none; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cp-motif-ico { width: 40px; height: 40px; border-radius: 3px; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cp-motif-ico svg { width: 19px; height: 19px; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item .cart-grid-item-details-section { grid-row: 1; grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 18px; row-gap: 3px; padding: 12px 16px !important; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item-details-section .font-16 { grid-column: 1; grid-row: 1; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item-details-section .cart-item-rate { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0 !important; text-align: right; white-space: nowrap; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item-details-section > .text-wrap-ellipsis:last-child { grid-column: 1; grid-row: 2; -webkit-line-clamp: 1; margin: 0 !important; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item .cart-grid-item-buttons { grid-row: 1; grid-column: 3; position: static; transform: none !important; visibility: visible; opacity: 1; width: auto; padding: 0 16px 0 0; gap: 6px; justify-content: flex-end; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item:hover .cart-grid-item-image-container::before { background-color: transparent; } @media (max-width: 599px) { html[data-theme]:not(#cp) body.store-page.cp-store-list #items-container > [class*="col-"] { width: 100%; padding: 0 6px; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item { grid-template-columns: 58px minmax(0, 1fr) auto; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item .cart-grid-item-image-container { min-height: 64px; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cp-motif-ico { width: 32px; height: 32px; border-radius: 3px; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cp-motif-ico svg { width: 16px; height: 16px; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item .cart-grid-item-details-section { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px !important; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item-details-section .cart-item-rate { text-align: left; align-self: flex-start; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item .cart-grid-item-buttons { padding: 0 10px 0 0; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item .cart-grid-item-buttons .cart-item-details-btn { display: none; } html[data-theme]:not(#cp) body.store-page .cp-store-view { margin: 8px 0 0; } } /* v5.35 · Richtpreise: „ab“ vor Preisen + Hinweis (Geschäft, Warenkorb, Bestellung) */ html[data-theme]:not(#cp) body .cp-ab { font-weight: 500; font-size: .8em; opacity: .72; letter-spacing: .01em; margin-right: .1em; } html[data-theme]:not(#cp) body .cp-price-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 11px 14px; border: 1px solid var(--cp-line-2) !important; border-left: 3px solid var(--cp-rust) !important; border-radius: 3px; background: var(--cp-surface-2) !important; color: var(--cp-muted) !important; font-size: 13px; line-height: 1.5; } html[data-theme]:not(#cp) body .cp-price-note strong { color: var(--cp-strong) !important; font-weight: 600; } html[data-theme]:not(#cp) body .cp-price-note svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--cp-rust-hi); stroke-width: 2; stroke-linecap: round; } html[data-theme]:not(#cp) body .cp-price-note.is-small { margin: 10px 0 0; padding: 8px 10px; font-size: 12px; border-radius: 3px; } html[data-theme]:not(#cp) body .cp-price-note.is-small svg { width: 15px; height: 15px; } html[data-theme]:not(#cp) body #process-order-preview .cp-price-note { margin: 0 15px 18px; } @media (max-width: 575.98px) { html[data-theme]:not(#cp) body .cp-price-note { font-size: 12.5px; padding: 10px 12px; } html[data-theme]:not(#cp) body #process-order-preview .cp-price-note { margin: 0 0 14px; } } html[data-theme]:not(#cp) body #js-rise-cart-wrapper .cart-item-details.text-right strong { white-space: nowrap; } html[data-theme]:not(#cp) body #js-rise-cart-wrapper .cp-price-note.is-small { margin: 10px 12px 0; } /* v5.35 · Geschäft: schmale Karten (iPad quer, kleine Fenster) – Warenkorb-Knopf als breites Symbol statt dreizeiligem Text */ html[data-theme]:not(#cp) body.store-page:not(.cp-store-list) .cart-grid-item { container-type: inline-size; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons .btn-info { white-space: nowrap; } @container (max-width: 330px) { html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons .btn-info { font-size: 0 !important; padding: 0 14px !important; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons .btn-info svg { width: 17px; height: 17px; } } @media (hover: none), (pointer: coarse) { @container (max-width: 330px) { html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons .add-to-cart-btn { flex: 1 1 auto; } html[data-theme]:not(#cp) body.store-page .cart-grid-item .cart-grid-item-buttons .btn-info { width: 100%; justify-content: center; } } } /* v5.36 · Posten-Auswahl: Kategorie-Gruppen + Preis rechts */ html[data-theme]:not(#cp) body .select2-drop.cp-s2-items .select2-results { max-height: min(420px, 60vh); } html[data-theme]:not(#cp) body .select2-drop.cp-s2-items .select2-result-with-children > .select2-result-label { position: sticky; top: 0; z-index: 1; padding: 9px 12px 6px !important; font-size: 10.5px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-rust-hi) !important; background: var(--cp-surface) !important; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body .select2-drop.cp-s2-items .select2-result-sub > li .select2-result-label { display: flex; align-items: baseline; gap: 12px; padding-left: 16px !important; } html[data-theme]:not(#cp) body .cp-s2-rate { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--cp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } html[data-theme]:not(#cp) body .select2-highlighted .cp-s2-rate { color: rgba(255,255,255,.85); } @media (max-width: 575.98px) { html[data-theme]:not(#cp) body .select2-drop.cp-s2-items .select2-result-sub > li .select2-result-label { flex-wrap: wrap; row-gap: 0; } html[data-theme]:not(#cp) body .cp-s2-rate { margin-left: 0; width: 100%; font-size: 11.5px; } } /* v5.36 · Kalender: heute + Auswahl sichtbar (die allgemeine Tabellenregel überdeckte beides), Knopf „Heute“ */ html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.day.today { background: transparent !important; color: var(--cp-rust-hi) !important; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--cp-rust); border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.day:hover { background: var(--cp-hover) !important; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.day.active, html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.day.active:hover, html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td span.active { background: var(--cp-rust) !important; color: #fff !important; box-shadow: none; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.old, html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.new { color: var(--cp-dim) !important; } html[data-theme]:not(#cp) body .datepicker tfoot th.today { display: table-cell !important; padding: 8px 0 2px !important; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .datepicker tfoot th.today { background: transparent !important; color: var(--cp-rust-hi) !important; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .datepicker tfoot th.today:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .datepicker tfoot th.clear { display: none !important; } /* v5.36 · Datum-Schnellwahl unter Datumsfeldern */ html[data-theme]:not(#cp) body .cp-date-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } html[data-theme]:not(#cp) body .cp-date-quick button { height: 28px; padding: 0 11px; border: 1px solid var(--cp-line-2) !important; border-radius: 999px; background: var(--cp-surface-2) !important; color: var(--cp-muted) !important; font-size: 12px; font-weight: 500; line-height: 26px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } html[data-theme]:not(#cp) body .cp-date-quick button:hover { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } @media (pointer: coarse) { html[data-theme]:not(#cp) body .cp-date-quick button { height: 34px; padding: 0 14px; font-size: 13px; } } /* v5.36 · Geschäft: Anzahl, Team-Werkzeuge, kein Warenkorb für das Team */ html[data-theme]:not(#cp) body .cp-store-count { display: inline-flex; align-items: center; margin-left: 12px; padding: 3px 10px; border: 1px solid var(--cp-line-2); border-radius: 999px; background: var(--cp-surface-2); color: var(--cp-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; vertical-align: middle; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body.cp-store-staff .cart-grid-item-buttons .add-to-cart-btn, html[data-theme]:not(#cp) body.cp-store-staff #item-checkout-button, html[data-theme]:not(#cp) body.cp-store-staff #js-init-cart-icon, html[data-theme]:not(#cp) body.cp-store-staff #js-rise-cart-wrapper { display: none !important; } html[data-theme]:not(#cp) body.cp-store-staff .cart-grid-item-buttons .cart-item-details-btn { margin-left: 0 !important; } html[data-theme]:not(#cp) body .cp-store-add { display: inline-flex !important; align-items: center; gap: 6px; height: 36px; margin-left: 10px; padding: 0 13px !important; border-radius: 3px !important; } html[data-theme]:not(#cp) body .cp-store-add svg, html[data-theme]:not(#cp) body .cp-store-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html[data-theme]:not(#cp) body .cp-store-edit { display: inline-flex !important; align-items: center; justify-content: center; border-radius: 3px !important; background: var(--cp-surface-2) !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .cp-store-edit:hover { color: var(--cp-rust-hi) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .cp-store-intern { display: inline-block; margin: 4px 0 0; padding: 1px 8px; border-radius: 999px; background: var(--cp-surface-3); color: var(--cp-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } html[data-theme]:not(#cp) body .cp-store-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -6px 0 16px; padding: 9px 14px; border: 1px dashed var(--cp-line-2) !important; border-radius: 3px; background: transparent !important; color: var(--cp-muted) !important; font-size: 12.5px; } html[data-theme]:not(#cp) body .cp-show-all { height: 28px; padding: 0 12px; border: 1px solid var(--cp-rust-line) !important; border-radius: 999px; background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; font-size: 12px; font-weight: 600; cursor: pointer; } html[data-theme]:not(#cp) body .cp-show-all:disabled { opacity: .5; cursor: default; } html[data-theme]:not(#cp) body.store-page.cp-store-list .cart-grid-item .cp-store-edit-wrap { margin-left: 0 !important; } @media (max-width: 599px) { html[data-theme]:not(#cp) body .cp-store-count { display: flex; width: max-content; margin: 6px 0 0; } html[data-theme]:not(#cp) body .cp-store-add { float: right !important; height: 38px; margin: 8px 0 0 8px; padding: 0 11px !important; } html[data-theme]:not(#cp) body .cp-store-add span { display: none; } html[data-theme]:not(#cp) body.store-page.cp-store-list.cp-store-staff .cart-grid-item .cart-grid-item-buttons .cart-item-details-btn { display: none; } } /* v5.36 · Posten-Seite: Anzahl + Abgleich mit dem Geschäft */ html[data-theme]:not(#cp) body .cp-items-sync { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; vertical-align: middle; } html[data-theme]:not(#cp) body .cp-items-sync > span { padding: 3px 10px; border: 1px solid var(--cp-line-2); border-radius: 999px; background: var(--cp-surface-2); color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-items-sync > span.is-ok { color: var(--cp-success); border-color: color-mix(in srgb, var(--cp-success) 35%, transparent); } html[data-theme]:not(#cp) body .cp-items-sync > span.is-warn { color: var(--cp-rust-hi); border-color: var(--cp-rust-line); } html[data-theme]:not(#cp) body .cp-items-sync > a { color: var(--cp-rust-hi) !important; text-decoration: none; } html[data-theme]:not(#cp) body .cp-items-sync > a:hover { text-decoration: underline; } /* v5.36 · Bestellung prüfen: Zurück zur Leistungsliste */ html[data-theme]:not(#cp) body #process-order-preview .page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } html[data-theme]:not(#cp) body #process-order-preview .page-title h1 { order: 1; margin-right: auto; } html[data-theme]:not(#cp) body .cp-back-store { order: 2; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border: 1px solid var(--cp-line-2) !important; border-radius: 3px; background: var(--cp-surface-2) !important; color: var(--cp-text) !important; font-size: 13px; font-weight: 500; text-decoration: none !important; transition: border-color .15s, color .15s; } html[data-theme]:not(#cp) body .cp-back-store:hover { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp) body .cp-back-store svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 575.98px) { html[data-theme]:not(#cp) body #process-order-preview .page-title { flex-direction: column; align-items: flex-start; } html[data-theme]:not(#cp) body #process-order-preview .page-title h1 { order: 2; } html[data-theme]:not(#cp) body .cp-back-store { order: 1; } } html[data-theme]:not(#cp) body .cp-items-sync > a:not(.btn) { color: var(--cp-rust-hi) !important; } /* v5.36.2 · Handy/PWA: das Dokument scrollt – nicht der body. dark-mode-fixes.css setzt html, body { overflow-x: hidden !important } und RISE html, body { height: 100% } → der body wurde ein eigener, fest hoher Scroll-Container (plus 40 px Spielraum im Dokument). Folgen: Tippen auf die Statusleiste/Notch scrollte nicht nach oben, „ganz oben“ wurde falsch erkannt (Ziehen-zum-Aktualisieren beim normalen Scrollen), die Topbar rutschte beim Laden weg. overflow-x: clip verhindert seitliches Wackeln, ohne einen Scroll-Container zu erzeugen. */ @media (max-width: 640px) { html[data-theme]:not(#cp) { height: auto !important; overflow-x: hidden !important; overflow-y: visible !important; } html[data-theme]:not(#cp) body { height: auto !important; min-height: 100% !important; overflow: visible !important; overflow-x: clip !important; } } html[data-theme]:not(#cp) body #pre-loader { pointer-events: none !important; } /* v5.36.2 · Glocke in der Handy-Topbar (vorher im ⋯-Menü) */ @media (max-width: 767.98px) { html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell-wrap { display: flex !important; align-items: center; } html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell-wrap .rst-notif-panel { position: fixed !important; top: var(--cp-dd-top, calc(var(--cp-sat, 0px) + 72px)) !important; left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important; max-height: calc(100dvh - var(--cp-dd-top, 130px) - 84px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; border-radius: 3px !important; } } @media (max-width: 380px) { html[data-theme]:not(#cp) body #default-navbar .navbar-nav:last-of-type > .nav-item > .nav-link, html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell { padding-left: 5px !important; padding-right: 5px !important; } } /* v5.36.2 · Antippbares Logo (Handy + iPad hoch) statt reinem CSS-Bild */ @media (max-width: 991px) { html[data-theme]:not(#cp) body #default-navbar .navbar-nav.me-auto::before { display: none !important; } html[data-theme]:not(#cp) body #default-navbar .cp-home-logo { display: block; flex: none; width: 96px; height: 34px; order: 1; background: url("/assets/images/ca-logo-light.svg") left center / contain no-repeat; -webkit-tap-highlight-color: transparent; } html[data-theme="light"]:not(#cp) body #default-navbar .cp-home-logo { background-image: url("/assets/images/ca-logo-dark.svg"); } html[data-theme]:not(#cp) body #default-navbar .cp-home-logo:active { opacity: .7; } } @media (max-width: 767px) { html[data-theme]:not(#cp) body #default-navbar .cp-home-logo { order: -1; } } @media (min-width: 768px) and (max-width: 991px) { html[data-theme]:not(#cp) body #default-navbar .cp-home-logo { width: 108px; height: 36px; margin: 0 14px 0 4px; } } @media (min-width: 992px) { html[data-theme]:not(#cp) body #default-navbar .cp-home-logo { display: none; } } /* =========================================================================== v5.36.2 · Benachrichtigungen im Content-Agency-Design Dunkle Fläche, Rost als Akzent, feine Linien, Gruppen in Versalien mit Sperrung, Symbole statt Emojis =========================================================================== */ html[data-theme]:not(#cp) body .rst-notif-panel { width: 400px; padding: 0 !important; border-radius: 3px !important; overflow: hidden; display: flex; flex-direction: column; font-family: var(--cp-font, inherit); } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px !important; border-bottom: 0 !important; } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cp-rust) !important; color: #fff !important; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-count[hidden] { display: none; } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-mark-all { padding: 5px 10px !important; border: 1px solid var(--cp-rust-line) !important; border-radius: 999px !important; background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; font-size: 11.5px !important; font-weight: 600; letter-spacing: .02em; white-space: nowrap; } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-mark-all:hover { background: var(--cp-rust) !important; color: #fff !important; } /* Reiter als Segment-Schalter */ html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-tabs { margin: 0 14px 6px !important; padding: 3px !important; border: 1px solid var(--cp-line) !important; border-radius: 3px !important; background: var(--cp-surface) !important; } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-tab { opacity: 1 !important; padding: 6px 6px !important; border-radius: 3px !important; color: var(--cp-muted) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; background: transparent !important; } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-tab:hover { color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-tab.active { background: var(--cp-surface-3) !important; color: var(--cp-strong) !important; box-shadow: inset 0 0 0 1px var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-tab-count { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; letter-spacing: 0; } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-tab.active .rst-notif-tab-count { background: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-tab-count:empty { display: none; } /* Liste */ html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-list { flex: 1 1 auto; max-height: min(460px, 62vh); overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px !important; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-group { position: sticky; top: 0; z-index: 1; padding: 10px 10px 6px; background: var(--cp-surface-2); color: var(--cp-dim); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-group:first-child { padding-top: 4px; } html[data-theme]:not(#cp) body .rst-notif-panel a.rst-notif-item.cp-ni { position: relative; display: grid !important; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 11px 10px !important; margin: 0 0 2px; border: 0 !important; border-radius: 3px !important; background: transparent !important; color: var(--cp-text) !important; text-decoration: none !important; transition: background .15s; } html[data-theme]:not(#cp) body .rst-notif-panel a.rst-notif-item.cp-ni:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .rst-notif-panel a.rst-notif-item.cp-ni.unread { background: color-mix(in srgb, var(--cp-rust) 7%, transparent) !important; } html[data-theme]:not(#cp) body .rst-notif-panel a.rst-notif-item.cp-ni.unread::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--cp-rust); } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-ico[data-tone="success"] { border-color: color-mix(in srgb, var(--cp-success) 35%, transparent); background: color-mix(in srgb, var(--cp-success) 12%, transparent); color: var(--cp-success); } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-ico[data-tone="danger"] { border-color: color-mix(in srgb, var(--cp-danger) 35%, transparent); background: color-mix(in srgb, var(--cp-danger) 12%, transparent); color: var(--cp-danger); } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-ico[data-tone="muted"] { border-color: var(--cp-line-2); background: var(--cp-surface-3); color: var(--cp-muted); } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-t { color: var(--cp-strong); font-size: 13.5px; font-weight: 600; line-height: 1.35; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni:not(.unread) .cp-ni-t { font-weight: 500; color: var(--cp-text); } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--cp-muted); font-size: 12.5px; line-height: 1.45; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; font-size: 11px; color: var(--cp-dim); } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-meta:empty { display: none; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-client { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border: 1px solid var(--cp-line-2); border-radius: 999px; color: var(--cp-text); font-weight: 500; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-rust) 20%, transparent); } /* Leer & Fuß */ html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px 38px !important; text-align: center; color: var(--cp-muted) !important; font-size: 12.5px; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-empty strong { color: var(--cp-strong); font-size: 14px; font-weight: 600; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-empty-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-success) 35%, transparent); background: color-mix(in srgb, var(--cp-success) 10%, transparent); color: var(--cp-success); } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-empty-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--cp-line); color: var(--cp-rust-hi) !important; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-foot:hover { background: var(--cp-hover); } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-foot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Einblend-Hinweis (Toast) */ html[data-theme]:not(#cp) body .rst-notif-toast { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-left: 3px solid var(--cp-rust) !important; border-radius: 3px !important; color: var(--cp-text) !important; box-shadow: var(--cp-shadow-pop) !important; } html[data-theme]:not(#cp) body .rst-notif-toast-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 3px; background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; font-size: 0; } html[data-theme]:not(#cp) body .rst-notif-toast-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html[data-theme]:not(#cp) body .rst-notif-toast-body strong { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .rst-notif-toast-body span { color: var(--cp-muted) !important; } @media (max-width: 767.98px) { html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell-wrap .rst-notif-panel { display: flex; } html[data-theme]:not(#cp) body .rst-notif-panel .rst-notif-list { max-height: none; flex: 1 1 auto; min-height: 0; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-t { font-size: 14px; } html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-b { font-size: 13px; } } /* v5.36.2 · Seite „Alle Benachrichtigungen“ */ html[data-theme]:not(#cp) body .card.cp-np { overflow: hidden; border-radius: 3px !important; } html[data-theme]:not(#cp) body .card.cp-np > .page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; padding: 20px 22px 16px !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .cp-np-head h4 { margin: 0 !important; color: var(--cp-strong) !important; font-size: 18px !important; font-weight: 600 !important; } html[data-theme]:not(#cp) body .cp-np-sub { display: block; margin-top: 3px; color: var(--cp-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } html[data-theme]:not(#cp) body .cp-np-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } html[data-theme]:not(#cp) body .cp-np-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--cp-line) !important; border-radius: 3px; background: var(--cp-surface) !important; } html[data-theme]:not(#cp) body .cp-np-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0 !important; border-radius: 3px; background: transparent !important; color: var(--cp-muted) !important; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } html[data-theme]:not(#cp) body .cp-np-tabs button:hover { color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .cp-np-tabs button.is-on { background: var(--cp-surface-3) !important; color: var(--cp-strong) !important; box-shadow: inset 0 0 0 1px var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .cp-np-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cp-rust); color: #fff; font-size: 10px; letter-spacing: 0; } html[data-theme]:not(#cp) body .cp-np-badge[hidden] { display: none; } html[data-theme]:not(#cp) body .cp-np-markall { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid var(--cp-rust-line) !important; border-radius: 3px; background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; font-size: 12px; font-weight: 600; cursor: pointer; } html[data-theme]:not(#cp) body .cp-np-markall:hover { background: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp) body .cp-np-markall:disabled { opacity: .5; } html[data-theme]:not(#cp) body .cp-np-markall svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } html[data-theme]:not(#cp) body .cp-np-rise, html[data-theme]:not(#cp) body .cp-np-content { padding: 6px 12px 14px; } html[data-theme]:not(#cp) body .cp-np-group { padding: 16px 10px 8px; color: var(--cp-dim); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } /* Einträge (RISE-Liste + Content) */ html[data-theme]:not(#cp) body .cp-np a.cp-np-item { position: relative; display: block !important; margin: 0 0 2px !important; padding: 13px 14px !important; border: 0 !important; border-radius: 3px !important; background: transparent !important; color: var(--cp-text) !important; text-decoration: none !important; white-space: normal !important; transition: background .15s; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item.unread-notification { background: color-mix(in srgb, var(--cp-rust) 7%, transparent) !important; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item.unread-notification::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--cp-rust); } html[data-theme]:not(#cp) body .cp-np a.cp-np-item > .d-flex { gap: 14px; align-items: flex-start; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .flex-shrink-0 { margin: 0 !important; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .flex-shrink-0 .avatar { display: none !important; } html[data-theme]:not(#cp) body .cp-np .cp-ni-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); flex: none; } html[data-theme]:not(#cp) body .cp-np .cp-ni-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html[data-theme]:not(#cp) body .cp-np .cp-ni-ico[data-tone="success"] { border-color: color-mix(in srgb, var(--cp-success) 35%, transparent); background: color-mix(in srgb, var(--cp-success) 12%, transparent); color: var(--cp-success); } html[data-theme]:not(#cp) body .cp-np .cp-ni-ico[data-tone="danger"] { border-color: color-mix(in srgb, var(--cp-danger) 35%, transparent); background: color-mix(in srgb, var(--cp-danger) 12%, transparent); color: var(--cp-danger); } html[data-theme]:not(#cp) body .cp-np .cp-ni-ico[data-tone="muted"] { border-color: var(--cp-line-2); background: var(--cp-surface-3); color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .mb5 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px !important; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .mb5 strong { color: var(--cp-strong) !important; font-size: 14px; font-weight: 600; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .mb5 .text-off { float: none !important; margin-left: auto; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .mb5 small, html[data-theme]:not(#cp) body .cp-np-top small { color: var(--cp-dim) !important; font-size: 11.5px; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .text-break { color: var(--cp-muted) !important; font-size: 13px; line-height: 1.55; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .text-break strong { color: var(--cp-text) !important; font-weight: 600; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .text-break ul { margin: 6px 0 4px; padding-left: 16px; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .text-break li { margin: 2px 0; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .text-break li::marker { color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .text-break [class*="text-"] { color: var(--cp-text) !important; } /* Content-Einträge (eigene Darstellung) */ html[data-theme]:not(#cp) body .cp-np a.cp-np-plugin { display: grid !important; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; } html[data-theme]:not(#cp) body .cp-np-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } html[data-theme]:not(#cp) body .cp-np-top { display: flex; align-items: baseline; gap: 12px; } html[data-theme]:not(#cp) body .cp-np-top strong { color: var(--cp-strong); font-size: 14px; font-weight: 600; } html[data-theme]:not(#cp) body .cp-np-top small { margin-left: auto; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-np-desc { color: var(--cp-muted); font-size: 13px; line-height: 1.55; } html[data-theme]:not(#cp) body .cp-np-meta { display: flex; gap: 8px; margin-top: 2px; } html[data-theme]:not(#cp) body .cp-np .cp-ni-client { padding: 1px 8px; border: 1px solid var(--cp-line-2); border-radius: 999px; color: var(--cp-text); font-size: 11px; font-weight: 500; } html[data-theme]:not(#cp) body .cp-np .cp-ni-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; text-align: center; color: var(--cp-muted); font-size: 13px; } html[data-theme]:not(#cp) body .cp-np .cp-ni-empty strong { color: var(--cp-strong); font-size: 15px; } html[data-theme]:not(#cp) body .cp-np .cp-ni-empty-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-success) 35%, transparent); background: color-mix(in srgb, var(--cp-success) 10%, transparent); color: var(--cp-success); } html[data-theme]:not(#cp) body .cp-np .cp-ni-empty-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } html[data-theme]:not(#cp) body .cp-np .load-more { border-radius: 999px !important; } @media (max-width: 575.98px) { html[data-theme]:not(#cp) body .card.cp-np > .page-title { padding: 16px 14px 12px !important; } html[data-theme]:not(#cp) body .cp-np-tools { width: 100%; } html[data-theme]:not(#cp) body .cp-np-tabs { flex: 1 1 100%; } html[data-theme]:not(#cp) body .cp-np-tabs button { flex: 1; justify-content: center; padding: 0 8px; font-size: 10.5px; } html[data-theme]:not(#cp) body .cp-np-markall { flex: 1 1 100%; justify-content: center; } html[data-theme]:not(#cp) body .cp-np-rise, html[data-theme]:not(#cp) body .cp-np-content { padding: 4px 4px 10px; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item { padding: 12px 10px !important; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .mb5, html[data-theme]:not(#cp) body .cp-np-top { flex-direction: column; gap: 2px; } html[data-theme]:not(#cp) body .cp-np a.cp-np-item .mb5 .text-off, html[data-theme]:not(#cp) body .cp-np-top small { margin-left: 0; } } html[data-theme]:not(#cp) body .card.cp-np > .page-title .cp-np-head { display: flex !important; flex-direction: column; align-items: flex-start; margin-right: auto; text-align: left; min-width: 0; } html[data-theme]:not(#cp) body .card.cp-np > .page-title .cp-np-head h4 { float: none !important; padding: 0 !important; line-height: 1.25; } html[data-theme]:not(#cp) body .card.cp-np > .page-title .cp-np-sub { white-space: nowrap; } html[data-theme]:not(#cp) body .card.cp-np > .page-title .cp-np-tools { margin-left: auto; } @media (max-width: 575.98px) { html[data-theme]:not(#cp) body .card.cp-np > .page-title .cp-np-sub { white-space: normal; } } /* v5.36.3 · Glocken-Abzeichen: klein, oben rechts an der Glocke, Markenfarbe – verdeckte am Handy die ganze Glocke */ html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell { position: relative !important; overflow: visible !important; } html[data-theme]:not(#cp) body #default-navbar .rst-notif-bell svg { display: block; width: 20px !important; height: 20px !important; } html[data-theme]:not(#cp) body #default-navbar .rst-notif-badge { /* v5.63.0: kleiner und an die obere rechte Ecke des Symbols gerückt – vorher 28 × 20 px mitten über der Glocke */ position: absolute !important; top: 4px !important; left: calc(50% + 3px) !important; right: auto !important; bottom: auto !important; min-width: 9px !important; height: 14px !important; padding: 0 3px !important; margin: 0 !important; border-radius: 999px !important; border: 2px solid var(--cp-bg, #06070A) !important; box-sizing: content-box !important; background: var(--cp-rust) !important; background-image: none !important; color: #fff !important; font: 700 9px/14px var(--cp-font, inherit) !important; letter-spacing: 0 !important; text-align: center !important; box-shadow: none !important; animation: none !important; transform: none !important; pointer-events: none; } html[data-theme]:not(#cp) body #default-navbar .rst-notif-badge[hidden] { display: none !important; } /* v5.36.3 · Handy/App: Chat im Vollbild mit sicherem Abstand (Statusleiste/Notch, Home-Leiste), Inhalt füllt den Rest */ @media (max-width: 767px) { html[data-theme]:not(#cp) body #js-rise-chat-wrapper:not(.rise-cart-wrapper):not(.hide) { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; border-radius: 0 !important; padding-top: env(safe-area-inset-top, 0px) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper:not(.rise-cart-wrapper) > .chat-topbar, html[data-theme]:not(#cp) body #js-rise-chat-wrapper:not(.rise-cart-wrapper) > .rise-chat-header { flex: none; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper:not(.rise-cart-wrapper) > .rise-chat-body, html[data-theme]:not(#cp) body #js-rise-chat-wrapper:not(.rise-cart-wrapper) > .rise-chat-body.full-height, html[data-theme]:not(#cp) body #js-rise-chat-wrapper:not(.rise-cart-wrapper) > .rise-chat-body.long { height: auto !important; max-height: none !important; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-topbar, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .rise-chat-header { cursor: default; } /* Seite dahinter ruht, solange der Chat offen ist */ html.cp-chat-open[data-theme]:not(#cp):not(#cq), html.cp-chat-open[data-theme]:not(#cp):not(#cq) body { overflow: hidden !important; } } /* =========================================================================== v5.36.4 — Chat moderner & benutzerfreundlicher · Profilbilder überall =========================================================================== */ /* Initialen statt grauer Silhouette (eigene Farbe je Person, contentag-chat.js) */ .cp-ini { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 100%; height: 100%; min-width: 24px; min-height: 24px; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--h, 20) 42% 44%), hsl(calc(var(--h, 20) + 28) 46% 30%)); color: #fff; font: 600 12px/1 var(--cp-font); letter-spacing: .02em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); user-select: none; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .avatar-xs .cp-ini { width: 100%; height: 100%; font-size: 11.5px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other .avatar-xs .cp-ini { width: 26px; height: 26px; min-width: 26px; min-height: 26px; font-size: 10px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person-av .cp-ini { width: 44px; height: 44px; font-size: 15px; transition: transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person:hover .cp-person-av .cp-ini { transform: translateY(-2px); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-chat-intro-av .cp-ini, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-direct-avatar .cp-ini { font-size: 26px; font-weight: 500; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .rise-chat-header .cp-ini { font-size: 13px; } /* Fotos (Google/Gravatar) sauber rund; Firmenlogos ganz sichtbar auf weißem Grund */ img[data-cp-photo] { object-fit: cover; border-radius: 50%; background: var(--cp-surface-3); } img[data-cp-photo][data-rst-fav-avatar] { object-fit: contain !important; background: #fff !important; padding: 3px; } /* Blasen: runder, gruppierte Nachrichten mit kleinen Innenecken (auch eigene – vorher 3 px) */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row .chat-msg { border-radius: 3px !important; padding: 8px 13px !important; line-height: 1.42; max-width: min(78%, 420px); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me.first-message .chat-msg { border-bottom-right-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me.middle-message .chat-msg { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me.last-message .chat-msg { border-top-right-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-other.first-message .chat-msg { border-bottom-left-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-other.middle-message .chat-msg { border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-other.last-message .chat-msg { border-top-left-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .chat-msg { box-shadow: 0 6px 16px -10px rgba(232,85,42,.8) !important; } /* Avatar neben fremden Nachrichten: Link-Fläche rund (Foto/Initialen) */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other .avatar-xs, html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-other .avatar-xs a { display: inline-flex; border-radius: 50%; } /* Eingabe: Senden erst kräftig, wenn Text da ist */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper #chat-message-reply-form .message-send-button { transition: opacity var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-s) var(--cp-e), background var(--cp-dur-s) var(--cp-ease), box-shadow var(--cp-dur-s) var(--cp-ease) !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #chat-message-reply-form.cp-empty .message-send-button { opacity: .38; box-shadow: none !important; transform: none !important; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #js-chat-message-textarea { min-height: 38px; max-height: 140px; line-height: 1.45; overflow-y: auto; } /* Tastatur-Hinweis nur mit echter Tastatur */ @media (pointer: coarse) { .cp-chat-hint { visibility: hidden; } } /* „↓ Neueste“ – erscheint, sobald man in der Unterhaltung nach oben scrollt */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-jump { position: absolute; left: 50%; bottom: var(--cp-jump-b, 96px); z-index: 6; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 10px; border: 1px solid var(--cp-line-2); border-radius: 999px; background: var(--cp-surface-3); color: var(--cp-strong); font: 500 12px/1 var(--cp-font); letter-spacing: .02em; cursor: pointer; box-shadow: var(--cp-shadow-pop, 0 12px 30px -12px rgba(0,0,0,.6)); opacity: 0; pointer-events: none; transform: translate(-50%, 8px) scale(.96); transition: opacity var(--cp-dur-m) var(--cp-ease), transform var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-jump.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-jump:hover { border-color: var(--cp-rust-line); color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-jump svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Liste: kurze Zeiten („10:58“, „Gestern“) ruhiger; ungelesene Zeit in Markenfarbe */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .js-message-row .time[data-cp-t] { font-size: 11px; color: var(--cp-dim); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .js-message-row.unread .time[data-cp-t] { color: var(--cp-rust-hi); font-weight: 600; } /* Handy/PWA: kompakter, 16 px (kein Auto-Zoom), größere Tipp-Flächen */ @media (max-width: 640px) { html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-row .chat-msg { font-size: 15px; max-width: 82%; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #js-chat-message-textarea { font-size: 16px !important; min-height: 36px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper #chat-message-reply-form { padding: 4px 4px 4px 12px; gap: 2px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .message-send-button { width: 40px; height: 40px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .chat-file-upload-icon .btn { width: 38px; height: 38px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-chat-hint { display: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-button-section { justify-content: flex-start; gap: 2px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-button-section .cp-emoji-btn { order: 1; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-button-section .message-send-button { margin-left: auto !important; } } /* dark-mode-fixes.css nimmt im Chat-Popup jedem Element ohne „rst-“-Klasse den Hintergrund → hier gezielt zurück */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-ini { background: linear-gradient(135deg, hsl(var(--h, 20) 42% 44%), hsl(calc(var(--h, 20) + 28) 46% 30%)) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-jump { background: var(--cp-surface-3) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper img[data-cp-photo][data-rst-fav-avatar] { background: #fff !important; } /* Wischen vom linken Rand = zurück: Pfeil-Hinweis links */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-swipe-back { position: absolute; left: 0; top: 50%; z-index: 30; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transform: translate(-38px, -50%) scale(.7); background: var(--cp-surface-3) !important; border: 1px solid var(--cp-line-2); color: var(--cp-muted); box-shadow: var(--cp-shadow-pop, 0 12px 30px -12px rgba(0,0,0,.6)); transition: background .15s ease, color .15s ease, border-color .15s ease; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-swipe-back.is-ready { background: var(--cp-rust) !important; border-color: var(--cp-rust); color: #fff; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-swipe-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* --------------------------------------------------------------------------- v5.36.4 · Sprachnachrichten: Aufnahme-Leiste & Player (contentag-chat.js) --------------------------------------------------------------------------- */ @keyframes cp-rec-pulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 70% { box-shadow: 0 0 0 9px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } } @keyframes cp-rec-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes cp-vbar-in { from { transform: scaleY(.15); opacity: .3; } to { transform: none; opacity: 1; } } @keyframes cp-vhead { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.35); } } @keyframes cp-vring { 0% { box-shadow: 0 0 0 0 var(--cp-voice-ring, rgba(232,85,42,.45)); } 100% { box-shadow: 0 0 0 10px transparent; } } @keyframes cp-spin { to { transform: rotate(360deg); } } .cp-stroke { fill: none !important; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Aufnahme-Leiste ersetzt während der Aufnahme das Eingabefeld */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec { display: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-on > .post-dropzone { display: none !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-on > .cp-rec { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 6px 6px 6px; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-rust-line); border-radius: 3px; box-shadow: 0 0 0 3px var(--cp-rust-soft); animation: cp-rec-in .28s var(--cp-e) both; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec > button, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-live > button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent !important; color: var(--cp-muted); cursor: pointer; transition: background .15s ease, color .15s ease, transform .2s var(--cp-e); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec > button svg, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-live > button svg { width: 18px; height: 18px; fill: currentColor; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec .cp-rec-del:hover { color: #ef4444; background: rgba(239,68,68,.12) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec .cp-rec-stop:hover { color: var(--cp-strong); background: var(--cp-hover) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec .cp-rec-send { width: 42px; height: 42px; background: var(--cp-rust) !important; color: #fff; box-shadow: 0 8px 20px -8px rgba(232,85,42,.9); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec .cp-rec-send:hover { background: var(--cp-rust-hi) !important; transform: scale(1.06); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec .cp-rec-send svg { width: 17px; height: 17px; margin-left: -2px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ef4444 !important; animation: cp-rec-pulse 1.4s ease-out infinite; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-time { flex: none; min-width: 36px; font: 600 13px/1 var(--cp-font); color: var(--cp-strong); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-wave { flex: 1 1 auto; min-width: 0; height: 30px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-wave i { flex: 0 0 3px; height: calc(var(--l, .06) * 100%); min-height: 3px; border-radius: 3px; background: var(--cp-rust-hi) !important; transition: height .09s linear; } /* Senden läuft: Leiste bleibt stehen, Knopf dreht */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending .cp-rec-dot { animation: none; background: var(--cp-dim) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending .cp-rec-wave i { background: var(--cp-line-2) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending .cp-rec-del, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending .cp-rec-stop { opacity: .3; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending .cp-rec-send { pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending .cp-rec-send svg { display: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending .cp-rec-send::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: cp-spin .7s linear infinite; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-leaving { opacity: .6; } /* Player */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row .chat-msg.cp-has-voice { padding: 8px 12px 7px 8px !important; min-width: 232px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-box { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; display: block !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-hide { display: none !important; } .cp-voice { --cp-voice-accent: var(--cp-rust-hi); --cp-voice-rest: var(--cp-line-2); --cp-voice-btn-bg: var(--cp-rust); --cp-voice-btn-fg: #fff; --cp-voice-meta: var(--cp-dim); display: flex; align-items: center; gap: 10px; width: 100%; min-width: 210px; max-width: 290px; user-select: none; -webkit-user-select: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .cp-voice { --cp-voice-accent: #fff; --cp-voice-rest: rgba(255,255,255,.38); --cp-voice-btn-bg: #fff; --cp-voice-btn-fg: var(--cp-rust); --cp-voice-meta: rgba(255,255,255,.8); --cp-voice-ring: rgba(255,255,255,.5); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-btn { position: relative; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--cp-voice-btn-bg) !important; color: var(--cp-voice-btn-fg) !important; transition: transform .2s var(--cp-e), box-shadow .2s ease; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-btn:hover { transform: scale(1.07); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-btn:active { transform: scale(.94); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-btn svg { width: 16px; height: 16px; fill: currentColor; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.is-idle .cp-voice-btn svg { margin-left: 2px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.is-playing .cp-voice-btn { animation: cp-vring 1.6s ease-out infinite; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.is-loading .cp-voice-btn svg { opacity: 0; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.is-loading .cp-voice-btn::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: cp-spin .7s linear infinite; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-wave { height: 28px; display: flex; align-items: center; gap: 2px; cursor: pointer; touch-action: none; outline: none; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-wave:focus-visible { box-shadow: 0 0 0 2px var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-wave > span { flex: 1 1 0; min-width: 2px; max-width: 4px; height: calc(var(--v, .3) * 100%); min-height: 3px; border-radius: 3px; background: var(--cp-voice-rest) !important; transform-origin: center; transition: height .35s var(--cp-e), background-color .12s linear; animation: cp-vbar-in .45s var(--cp-e) both; animation-delay: calc(var(--i) * 10ms); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-wave > span.is-played { background: var(--cp-voice-accent) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-wave > span.is-head { animation: cp-vhead .6s ease-in-out infinite; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 1; color: var(--cp-voice-meta); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-time { font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.is-error .cp-voice-time { color: #ef4444; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-tools { display: inline-flex; align-items: center; gap: 4px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-rate { min-width: 32px; height: 18px; padding: 0 6px; border: 0; border-radius: 3px; cursor: pointer; font: 700 10px/18px var(--cp-font); color: var(--cp-voice-meta); background: rgba(127,127,127,.18) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-dl { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--cp-voice-meta) !important; opacity: .8; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-dl:hover { opacity: 1; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-dl svg { width: 14px; height: 14px; } /* Vorschau vor dem Senden (nach „Stopp") */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.cp-voice-draft { max-width: none; padding: 4px 6px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .audio-container { width: 100%; } /* kurze Hinweise (Mikrofon verweigert, Upload-Fehler) */ .cp-voice-toast { position: absolute; left: 50%; bottom: 90px; z-index: 40; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 9px 14px; border-radius: 3px; font-size: 12.5px; line-height: 1.35; text-align: center; background: var(--cp-surface-3) !important; color: var(--cp-strong); border: 1px solid var(--cp-line-2); box-shadow: var(--cp-shadow-pop, 0 12px 30px -12px rgba(0,0,0,.6)); animation: cp-rec-in .25s var(--cp-e) both; transition: opacity .3s ease; } .cp-voice-toast.is-out { opacity: 0; } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-on > .cp-rec { min-height: 56px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec > button, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-live > button { width: 42px; height: 42px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec .cp-rec-send { width: 46px; height: 46px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-btn { width: 42px; height: 42px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-rate { height: 22px; line-height: 22px; min-width: 36px; } } @media (prefers-reduced-motion: reduce) { #js-rise-chat-wrapper .cp-voice-wave > span, #js-rise-chat-wrapper .cp-rec-dot, #js-rise-chat-wrapper .cp-voice-btn { animation: none !important; } } /* --------------------------------------------------------------------------- v5.36.4 · Chat: Nachricht für alle löschen (24 h) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-msg-act .cp-act-del:hover { color: #ef4444 !important; background: rgba(239,68,68,.12) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row .chat-msg.cp-msg-deleted { display: inline-flex !important; align-items: center; gap: 7px; font-style: italic; font-size: 13px !important; background: transparent !important; color: var(--cp-dim) !important; border: 1px dashed var(--cp-line-2) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-msg-deleted .cp-del-ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row.cp-del-anim .chat-msg { transition: transform .2s var(--cp-e), opacity .2s ease; transform: scale(.92); opacity: .2; } /* Bestätigung */ @keyframes cp-confirm-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm { position: absolute; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); background: rgba(5,7,12,.55) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: cp-rec-in .18s ease both; transition: opacity .18s ease; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm.is-out { opacity: 0; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-card { width: 100%; max-width: 360px; padding: 20px 18px 16px; border-radius: 3px; text-align: center; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); animation: cp-confirm-in .26s var(--cp-e) both; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; margin-bottom: 10px; background: rgba(239,68,68,.12) !important; color: #ef4444; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-ico svg { width: 20px; height: 20px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-card strong { display: block; font-size: 16px; font-weight: 600; color: var(--cp-strong); margin-bottom: 6px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-card p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-btns button { height: 42px; border-radius: 3px; font: 600 13px/1 var(--cp-font); cursor: pointer; transition: background .15s ease, transform .15s var(--cp-e); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-no { background: transparent !important; color: var(--cp-text); border: 1px solid var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-no:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-yes { background: #dc2626 !important; color: #fff; border: 0; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-yes:hover { background: #ef4444 !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-yes.is-busy { opacity: .6; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-confirm-btns button:active { transform: scale(.97); } /* Liste: Symbole vor „Sprachnachricht" / „gelöscht" */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-preview.cp-pv-voice::after, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-preview.cp-pv-del::after { content: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-preview.cp-pv-voice { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-preview.cp-pv-del { font-style: italic; color: var(--cp-dim); } /* Aktionsleiste wächst zur Mitte hin (bei kurzen Blasen wie „Hi" lief sie sonst über den Rand – Löschen war unsichtbar) */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .cp-msg-act { left: auto; right: 0; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-other .cp-msg-act { right: auto; left: 0; } @media (pointer: coarse) { html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-msg-act { top: -40px; padding: 3px; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-msg-act button { width: 38px; height: 34px; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-msg-act svg { width: 17px; height: 17px; } } /* Sprachnachricht: Zustände der Leiste – Aufnahme · Anhören · Senden (statt der RISE-Anhangbox) */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-live, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-review { display: none; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-on .cp-rec-live { display: flex; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-review .cp-rec-review, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending .cp-rec-review:not(:empty) { display: flex; animation: cp-rec-in .25s var(--cp-e) both; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending:has(.cp-rec-review:empty) .cp-rec-live { display: flex; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending .cp-rec-review { opacity: .55; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-sending .cp-rec-live .cp-rec-stop { display: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-review .cp-voice { max-width: none; min-width: 0; padding: 0; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-review .cp-voice-btn { width: 36px; height: 36px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-review .cp-voice-wave { height: 24px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec.is-review { border-color: var(--cp-line-2); box-shadow: none; } /* Kopf einer Unterhaltung: Online nur einmal zeigen – „● Online" neben dem Namen reicht, Punkt am Profilbild weg (Nutzerhinweis) */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .rise-chat-header .avatar .online, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-head .avatar .online { display: none !important; } /* --------------------------------------------------------------------------- v5.36.5 · Kundenportal: neue Chat-Nachrichten sichtbar & mit einem Tipp offen --------------------------------------------------------------------------- */ @keyframes cp-cl-ring { 0% { box-shadow: 0 0 0 0 rgba(232,85,42,.55); } 80%, 100% { box-shadow: 0 0 0 12px rgba(232,85,42,0); } } @keyframes cp-mt-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes cp-mt-in-top { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } } html[data-theme]:not(#cp) body .cp-fab-dock { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 1040; display: flex; align-items: center; gap: 10px; pointer-events: none; } html[data-theme]:not(#cp) body .cp-fab-dock > * { pointer-events: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-fab-dock .cp-sp-launch { position: relative; right: auto; bottom: auto; } html[data-theme]:not(#cp) body .cp-chat-launch { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; min-width: 48px; padding: 0 14px; border: 1px solid var(--cp-line-2); border-radius: 999px; background: var(--cp-surface-2); color: var(--cp-strong); font: 600 12px/1 var(--cp-font); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: 0 16px 40px -18px rgba(0,0,0,.8); transition: transform var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease), background var(--cp-dur-s) var(--cp-ease), padding var(--cp-dur-m) var(--cp-e); } html[data-theme]:not(#cp) body .cp-chat-launch:hover { transform: translateY(-2px); border-color: var(--cp-rust-line); } html[data-theme]:not(#cp) body .cp-chat-launch svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } html[data-theme]:not(#cp) body .cp-chat-launch .cp-cl-t { display: none; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-chat-launch.is-unread { padding: 0 18px 0 14px; border-color: var(--cp-rust); background: color-mix(in srgb, var(--cp-rust) 16%, var(--cp-surface-2)); color: #fff; animation: cp-cl-ring 1.8s ease-out infinite; } html[data-theme]:not(#cp) body .cp-chat-launch.is-unread .cp-cl-t { display: inline; } html[data-theme]:not(#cp) body .cp-chat-launch .cp-cl-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--cp-rust); color: #fff; font: 700 11px/20px var(--cp-font); letter-spacing: 0; text-align: center; font-style: normal; box-shadow: 0 0 0 2px var(--cp-bg, #0b0d12); } /* Handy: Chat steckt in der unteren Leiste (dort mit Zähler) → hier nur Hilfe & Support */ html.cp-chat-in-nav[data-theme]:not(#cp) body .cp-chat-launch { display: none; } @media (max-width: 640px) { html[data-theme]:not(#cp) body .cp-fab-dock { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); } html[data-theme]:not(#cp) body .cp-chat-launch { height: 52px; min-width: 52px; padding: 0; } html[data-theme]:not(#cp) body .cp-chat-launch.is-unread { padding: 0; } html[data-theme]:not(#cp) body .cp-chat-launch.is-unread .cp-cl-t { display: none; } } /* Begrüßung: Zähler am „Nachricht an das Team"-Knopf */ html[data-theme]:not(#cp) body .cp-ph-btn.has-unread { position: relative; border-color: var(--cp-rust) !important; color: #fff !important; background: color-mix(in srgb, var(--cp-rust) 14%, transparent) !important; } html[data-theme]:not(#cp) body .cp-ph-btn .cp-ph-badge { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--cp-rust); color: #fff; font: 700 11px/20px var(--cp-font); letter-spacing: 0; font-style: normal; text-align: center; animation: cp-cl-ring 1.8s ease-out infinite; } /* „Das wartet auf Sie": Nachricht als erster Eintrag */ html[data-theme]:not(#cp) body button.cp-td-item { width: 100%; font: inherit; text-align: left; cursor: pointer; } html[data-theme]:not(#cp) body button.cp-td-item:hover { border-color: var(--cp-line-2); transform: translateY(-1px); } html[data-theme]:not(#cp) body button.cp-td-item:hover .cp-td-cta { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-td-chat .cp-td-ico.k-chat { background: color-mix(in srgb, var(--cp-rust) 16%, transparent); color: var(--cp-rust-hi); } .cp-td-chat .cp-td-txt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hinweis-Karte „Neue Nachricht von …" */ html[data-theme]:not(#cp) body .cp-msg-toast { position: fixed; right: 22px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 1041; width: min(380px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 3px; cursor: pointer; background: var(--cp-surface-2); border: 1px solid var(--cp-rust-line); color: var(--cp-text); box-shadow: 0 24px 60px -24px rgba(0,0,0,.85), 0 0 0 4px var(--cp-rust-soft); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .2s ease, transform .25s var(--cp-e); } html[data-theme]:not(#cp) body .cp-msg-toast.is-in { opacity: 1; transform: none; pointer-events: auto; } html[data-theme]:not(#cp) body .cp-mt-k { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-msg-toast[hidden] { display: none; } html[data-theme]:not(#cp) body .cp-mt-ico { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-rust); color: #fff; animation: cp-cl-ring 1.8s ease-out infinite; } html[data-theme]:not(#cp) body .cp-mt-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } html[data-theme]:not(#cp) body .cp-mt-ico i { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 3px; background: #fff; color: var(--cp-rust); font: 700 10.5px/18px var(--cp-font); font-style: normal; text-align: center; } html[data-theme]:not(#cp) body .cp-mt-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } html[data-theme]:not(#cp) body .cp-mt-txt b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body .cp-mt-txt small { font-size: 12.5px; line-height: 1.4; color: var(--cp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[data-theme]:not(#cp) body .cp-mt-act { flex: none; display: flex; align-items: center; gap: 4px; } html[data-theme]:not(#cp) body .cp-mt-open { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--cp-rust); color: #fff; font: 600 12px/1 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .cp-mt-open:hover { background: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-mt-x { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cp-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } html[data-theme]:not(#cp) body .cp-mt-x:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-mt-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* Handy/App: Karte oben unter der Kopfzeile (wie eine Mitteilung) */ @media (max-width: 767px) { html[data-theme]:not(#cp) body .cp-msg-toast { left: 12px; right: 12px; width: auto; top: calc(62px + env(safe-area-inset-top)); bottom: auto; transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { .cp-chat-launch, .cp-mt-ico, .cp-ph-badge { animation: none !important; } } /* --------------------------------------------------------------------------- v5.36.6 · Sprachnachricht-Player feiner · Chat-Kopf eindeutig · Aktionen per langem Drücken --------------------------------------------------------------------------- */ /* dark-mode-fixes.css färbt im Chat alles außer svg/path hell (auch ) → Pause-Symbol war weiß auf weiß */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-btn svg, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-btn svg * { fill: var(--cp-voice-btn-fg) !important; color: var(--cp-voice-btn-fg) !important; stroke: none !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-rec-stop svg * { fill: currentColor !important; color: inherit !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-time, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-dl, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-rate { color: var(--cp-voice-meta) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .cp-voice { --cp-voice-meta: rgba(255,255,255,.92); --cp-voice-rest: rgba(255,255,255,.34); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-other .cp-voice { --cp-voice-meta: var(--cp-muted); } /* Knopf mit Fortschrittsring */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-knob { position: relative; flex: none; display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-knob .cp-voice-btn { width: 38px; height: 38px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-ring { position: absolute; inset: 0; width: 46px; height: 46px; transform: rotate(-90deg); pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-ring circle { fill: none !important; stroke: var(--cp-voice-accent) !important; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 - 138.2 * var(--p, 0)); opacity: 0; transition: opacity .2s ease; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.is-playing .cp-voice-ring circle, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice:not(.is-idle) .cp-voice-ring circle { opacity: 1; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.is-playing .cp-voice-btn { animation: none; transform: scale(.96); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-btn svg { transition: transform .18s var(--cp-e); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-btn:active svg { transform: scale(.85); } /* noch nicht angehört (nur empfangene) */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-new { display: none; position: absolute; right: 0; bottom: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--cp-rust) !important; box-shadow: 0 0 0 2px var(--cp-surface-3); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.is-new .cp-voice-new { display: block; animation: cp-rec-pulse 1.8s ease-out infinite; } /* Wellenform: runder, gespielte Balken leuchten, Kopf pulsiert */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-wave { height: 30px; gap: 2px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-wave > span { max-width: 3px; min-height: 4px; border-radius: 2px; transition: height .4s var(--cp-e), background-color .15s linear, box-shadow .15s linear; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.is-playing .cp-voice-wave > span.is-played { box-shadow: 0 0 6px -1px var(--cp-voice-accent); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice.is-loading .cp-voice-wave > span { animation: cp-vload 1s ease-in-out infinite; animation-delay: calc(var(--i) * 25ms); } @keyframes cp-vload { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-meta { font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-rate { background: rgba(255,255,255,.14) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-other .cp-voice-rate { background: var(--cp-hover) !important; } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-knob { width: 50px; height: 50px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-knob .cp-voice-btn { width: 42px; height: 42px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-ring { width: 50px; height: 50px; } } /* Chat-Kopf: „Neu" mit Text, Reihenfolge Neu · Vergrößern · Schließen (X immer ganz rechts) */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-new { width: auto; padding: 0 12px 0 9px; gap: 6px; border-color: var(--cp-rust-line) !important; border-radius: 999px !important; font: 600 12px/1 var(--cp-font); letter-spacing: .04em; order: 1; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-new span { color: inherit !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-new:hover { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-topbar .chat-topbar-title, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .rise-chat-header .chat-title { order: 0; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-back { order: -1; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-max { order: 2; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-close { order: 3; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .more-options.cp-hidden-more { display: none !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-max svg { width: 16px; height: 16px; } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-max { display: none !important; } } /* Handy/App: Aktionsleiste erst nach langem Drücken (Tippen spielt ab / scrollt) */ @media (pointer: coarse) { html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row:hover .cp-msg-act { opacity: 0; transform: translateY(4px) scale(.94); pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row.cp-act-on .cp-msg-act { opacity: 1; transform: none; pointer-events: auto; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row .chat-msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row.cp-act-on .chat-msg { transform: scale(1.02); transition: transform .18s var(--cp-e); } } /* Chat im eigenen Fenster (?cp_chat=1 bzw. window.name) – nur der Chat, randlos, füllt das Fenster */ html.cp-chat-window, html.cp-chat-window body { overflow: hidden !important; background: var(--cp-bg, #0b0d12) !important; } html.cp-chat-window body > :not(#js-rise-chat-wrapper):not(.modal):not(.modal-backdrop):not([id*="alert"]):not([class*="alert"]):not(script):not(style):not(link) { visibility: hidden !important; pointer-events: none !important; } html.cp-chat-window[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper { visibility: visible !important; pointer-events: auto !important; position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; min-width: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; transform: none !important; box-shadow: none !important; z-index: 2000 !important; } html.cp-chat-window[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .rise-chat-body { flex: 1 1 auto !important; height: auto !important; max-height: none !important; min-height: 0 !important; } html.cp-chat-window[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-topbar, html.cp-chat-window[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .rise-chat-header { cursor: default !important; } html.cp-chat-window[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-close, html.cp-chat-window[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-max, html.cp-chat-window[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-pop, html.cp-chat-window body #js-init-chat-icon, html.cp-chat-window body .cp-fab-dock, html.cp-chat-window body .cp-msg-toast { display: none !important; } /* Knopf „eigenes Fenster" im Kopf (Desktop) */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-pop { order: 2; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-pop svg { width: 16px; height: 16px; } @media (max-width: 767px) { html:not(.cp-chat-window)[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-pop { display: none !important; } } /* Fortschrittsring exakt mittig (app.all.css setzt jedem SVG margin-top:-3px) */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice-ring { margin: 0 !important; top: 0 !important; left: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-voice svg { margin-top: 0 !important; } /* Zurück deutlich sichtbar (Unterhaltung + Direkt-Chat gleich): runder Knopf mit Kontrast */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .rise-chat-header .chat-back, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-back { flex: none; width: 36px !important; height: 36px !important; border-radius: 50% !important; margin-right: 2px; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .rise-chat-header .chat-back:hover, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-back:hover { border-color: var(--cp-rust-line) !important; color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .rise-chat-header .chat-back svg, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-back svg { width: 20px !important; height: 20px !important; stroke-width: 2.4 !important; margin: 0 0 0 -1px !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-x { margin-left: auto; flex: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-x svg { width: 18px; height: 18px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-head .cp-chat-person { min-width: 0; } html.cp-chat-window[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-x { display: none !important; } /* Direkt-Chat-Eingabe wie in der Unterhaltung: Text oben, darunter Emoji links · Senden rechts */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-form { flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 6px 6px 12px; border-radius: 3px !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-form textarea { flex: 1 1 100%; order: 0; min-height: 38px; line-height: 1.45; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-form .cp-emoji-btn { order: 1; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-form .cp-direct-send { order: 2; margin-left: auto; } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-form textarea { font-size: 16px !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-form .cp-direct-send { width: 40px; height: 40px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-form { margin: 10px; } } /* Direkt-Chat liegt als Ebene über dem ganzen Fenster → auf Handy/App Notch & Home-Leiste freihalten (Zurück lag unter der Statusleiste) */ @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; } } /* --------------------------------------------------------------------------- v5.36.8 · CRM-Links im Chat als Karte (Aufgabe, Projekt, Kunde, Rechnung …) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row .chat-msg a.cp-lc { display: flex !important; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 9px 10px; min-width: 220px; max-width: 320px; border-radius: 3px; text-decoration: none !important; cursor: pointer; background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; transition: border-color .15s ease, transform .18s var(--cp-e), background .15s ease; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .chat-msg a.cp-lc { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.22) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row .chat-msg a.cp-lc:hover { border-color: var(--cp-rust-line) !important; transform: translateY(-1px); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .chat-msg a.cp-lc:hover { border-color: rgba(255,255,255,.5) !important; background: rgba(255,255,255,.2) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row .chat-msg.cp-has-lc { padding: 4px !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row .chat-msg.cp-has-lc a.cp-lc { margin: 0; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-ico { flex: none; width: 36px; height: 36px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .cp-lc-ico { background: rgba(255,255,255,.95) !important; color: var(--cp-rust) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-ico svg { width: 19px; height: 19px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-ico svg * { stroke: currentColor !important; color: inherit !important; fill: none !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-txt small { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-dim) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .cp-lc-txt small { color: rgba(255,255,255,.78) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-txt small i { font-style: normal; color: inherit !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc.t-done .cp-lc-txt small i { color: var(--cp-success) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc.t-late .cp-lc-txt small i { color: #ef4444 !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .cp-lc.t-done .cp-lc-txt small i, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .cp-lc.t-late .cp-lc-txt small i { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-txt b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .cp-lc-txt b { color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-txt em { font-style: normal; font-size: 11.5px; color: var(--cp-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .cp-lc-txt em { color: rgba(255,255,255,.82) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-go { flex: none; display: inline-flex; color: var(--cp-dim) !important; transition: transform .18s var(--cp-e); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-me .cp-lc-go { color: rgba(255,255,255,.85) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-go svg { width: 16px; height: 16px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-lc-go svg * { stroke: currentColor !important; fill: none !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper a.cp-lc:hover .cp-lc-go { transform: translateX(3px); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper a.cp-lc.is-loading .cp-lc-txt b { opacity: .6; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper a.cp-lc.is-loading .cp-lc-ico { animation: cp-vload 1s ease-in-out infinite; } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .chat-row .chat-msg a.cp-lc { min-width: 0; max-width: 100%; } } /* --------------------------------------------------------------------------- v5.36.9 · Chat: Online als grüner Ring (statt Punkt über dem Bild) · Intern/Extern --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .message-row .avatar .online, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-person-av .online { display: none !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .message-row .avatar, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-person-av { border-radius: 50% !important; transition: box-shadow .25s ease; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .message-row.cp-on .avatar, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-person.cp-on .cp-person-av { box-shadow: 0 0 0 2px var(--cp-surface), 0 0 0 4px var(--cp-success), 0 0 14px -2px color-mix(in srgb, var(--cp-success) 60%, transparent) !important; } /* Intern / Extern / Team */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-who { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; margin-left: 7px; border-radius: 3px; vertical-align: 2px; font: 700 9.5px/17px var(--cp-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; flex: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-who.is-int { color: var(--cp-rust-hi) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-who.is-ext { color: #8ab8ff !important; background: rgba(90,150,255,.15) !important; } html[data-theme="light"]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-who.is-ext { color: #1d5fd1 !important; background: rgba(29,95,209,.1) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-status .cp-who { height: 16px; line-height: 16px; margin-left: 8px; vertical-align: 1px; } /* =========================================================================== v5.38 · Umsatz → Auswertung (revenue-analytics.js) =========================================================================== */ .ra-page { --ra-rust: var(--cp-rust, #e8552a); --ra-green: var(--cp-success, #3fb984); --ra-red: #e5484d; --ra-blue: #6ca6d9; --ra-amber: #d6a738; --ra-orange: #f08a5d; padding: 26px 28px 40px; max-width: 1560px; margin: 0 auto; color: var(--cp-text); } .ra-page.is-loading .ra-body { opacity: .45; pointer-events: none; transition: opacity .2s ease; } .ra-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .ra-kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-muted); } .ra-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--ra-rust); box-shadow: 0 0 10px var(--ra-rust); } html[data-theme]:not(#cp):not(#cq) body .ra-page .ra-title h1 { margin: 6px 0 4px !important; font-size: clamp(28px, 3.4vw, 42px) !important; font-weight: 300 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--cp-strong) !important; line-height: 1.05 !important; } .ra-sub { margin: 0; font-size: 13px; color: var(--cp-muted); } .ra-demo-tag { color: var(--ra-rust); font-weight: 600; } .ra-actions { display: flex; gap: 8px; } html[data-theme]:not(#cp) body .ra-page .ra-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 3px; cursor: pointer; text-decoration: none; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-strong); font: 600 12px/1 var(--cp-font); letter-spacing: .08em; text-transform: uppercase; transition: border-color .15s ease, transform .15s ease, background .15s ease; } html[data-theme]:not(#cp) body .ra-page .ra-btn:hover { border-color: var(--cp-rust-line); transform: translateY(-1px); } html[data-theme]:not(#cp) body .ra-page .ra-btn.is-primary { background: var(--ra-rust); border-color: var(--ra-rust); color: #fff; } .ra-btn svg { width: 16px; height: 16px; } /* Filterleiste */ .ra-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; margin-bottom: 18px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface); position: relative; } .ra-seg { display: flex; gap: 2px; padding: 3px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); overflow-x: auto; scrollbar-width: none; max-width: 100%; } .ra-seg::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp) body .ra-page .ra-seg button { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); font: 500 12.5px/1 var(--cp-font); cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; } html[data-theme]:not(#cp) body .ra-page .ra-seg button:hover { color: var(--cp-strong); } html[data-theme]:not(#cp) body .ra-page .ra-seg button.is-on { background: var(--ra-rust); color: #fff; box-shadow: 0 6px 14px -8px var(--ra-rust); } .ra-custom { display: none; gap: 8px; align-items: center; } .ra-page.is-custom .ra-custom { display: flex; } .ra-custom label, .ra-select { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp) body .ra-page .ra-custom input, html[data-theme]:not(#cp) body .ra-page .ra-select select { height: 34px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-strong); font: 500 13px var(--cp-font); color-scheme: dark; } html[data-theme="light"] body .ra-page .ra-custom input, html[data-theme="light"] body .ra-page .ra-select select { color-scheme: light; } .ra-ctl-right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ra-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border-radius: 3px; font-size: 13px; background: color-mix(in srgb, var(--ra-rust) 12%, transparent); border: 1px solid var(--cp-rust-line); color: var(--cp-strong); } .pf-fx { margin: 0 0 16px; padding: 10px 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); font-size: 13px; line-height: 1.45; color: var(--cp-muted); } /* v5.146.0 */ .ra-banner.ra-fx { background: var(--cp-deep); border-color: var(--cp-line-2); color: var(--cp-muted); } /* v5.146.0 Fremdwährungen nicht enthalten */ html[data-theme]:not(#cp) body .ra-banner button { height: 30px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: transparent; color: var(--cp-strong); cursor: pointer; font: 600 12px var(--cp-font); } /* Kennzahlen */ .ra-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .ra-kpi { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 16px 16px 14px; border-radius: 3px; background: var(--cp-surface); border: 1px solid var(--cp-line); animation: cp-reveal .5s var(--cp-e, ease) both; animation-delay: calc(var(--i) * 40ms); } .ra-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--k, var(--cp-line-2)); } .ra-kpi.t-rust { --k: var(--ra-rust); } .ra-kpi.t-green { --k: var(--ra-green); } .ra-kpi.t-blue { --k: var(--ra-blue); } .ra-kpi.t-red { --k: var(--ra-red); } .ra-kpi.t-muted { --k: var(--cp-line-2); } .ra-kpi-l { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } .ra-kpi-v { font-size: clamp(20px, 2vw, 27px); font-weight: 400; letter-spacing: -.01em; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .ra-kpi.t-red .ra-kpi-v { color: var(--ra-red); } .ra-kpi-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cp-muted); position: relative; z-index: 1; } .ra-kpi-m em { font-style: normal; } .ra-delta { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 3px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .ra-delta.is-up { color: var(--ra-green); background: color-mix(in srgb, var(--ra-green) 14%, transparent); } .ra-delta.is-down { color: var(--ra-red); background: color-mix(in srgb, var(--ra-red) 14%, transparent); } .ra-delta.is-flat { color: var(--cp-muted); background: var(--cp-hover); } .ra-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; opacity: .6; pointer-events: none; } .ra-spark .ra-spark-l { fill: none; stroke: var(--k); stroke-width: 1.8; vector-effect: non-scaling-stroke; } .ra-spark .ra-spark-a { fill: color-mix(in srgb, var(--k) 18%, transparent); stroke: none; } .ra-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .ra-mini-i { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); } .ra-mini-i > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); font-weight: 600; } .ra-mini-i b { font-size: 18px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-mini-i em { font-style: normal; font-size: 11.5px; color: var(--cp-muted); } /* Karten + Raster */ .ra-card { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 3px; padding: 16px 18px 18px; margin-bottom: 16px; min-width: 0; } .ra-grid { display: grid; gap: 16px; } .ra-grid > .ra-card { margin-bottom: 0; } .ra-grid { margin-bottom: 16px; } .ra-grid.g-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .ra-grid.g-6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ra-grid.g-4-4-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ra-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } html[data-theme]:not(#cp) body .ra-page .ra-card-h h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-strong); } .ra-card-s { font-size: 11.5px; color: var(--cp-muted); } .ra-h3 { margin: 18px 0 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); font-weight: 600; } .ra-none { padding: 26px 12px; text-align: center; font-size: 13px; color: var(--cp-muted); border: 1px dashed var(--cp-line-2); border-radius: 3px; } .ra-empty { text-align: center; padding: 34px 20px; } .ra-empty b { display: block; font-size: 18px; font-weight: 500; color: var(--cp-strong); margin-bottom: 6px; } .ra-empty p { max-width: 520px; margin: 0 auto 16px; font-size: 13.5px; line-height: 1.55; color: var(--cp-muted); } .ra-empty-ico { display: inline-flex; width: 56px; height: 56px; border-radius: 3px; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--ra-rust); background: var(--cp-rust-soft); } .ra-empty-ico svg { width: 28px; height: 28px; } .ra-empty-act { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Hauptdiagramm */ .ra-legend { display: flex; flex-wrap: wrap; gap: 4px; } html[data-theme]:not(#cp) body .ra-page .ra-leg { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 3px; border: 1px solid transparent; background: transparent; color: var(--cp-muted); font: 500 12px var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .ra-page .ra-leg:hover { background: var(--cp-hover); } html[data-theme]:not(#cp) body .ra-page .ra-leg.is-off { opacity: .4; text-decoration: line-through; } .ra-leg i, .ra-tip i, .ra-aging i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; } .c-rust { background: var(--ra-rust) !important; } .c-green { background: var(--ra-green) !important; } .c-red { background: var(--ra-red) !important; } .c-blue { background: var(--ra-blue) !important; } .c-amber { background: var(--ra-amber) !important; } .c-orange { background: var(--ra-orange) !important; } .c-dark { background: #8e2b22 !important; } .c-muted { background: var(--cp-line-2) !important; } .c-ghost { background: color-mix(in srgb, var(--cp-text) 22%, transparent) !important; } .ra-chart { position: relative; } .ra-chart svg { display: block; overflow: visible; } .ra-grid-l { stroke: var(--cp-line); stroke-width: 1; } .ra-zero { stroke: var(--cp-line-2); stroke-width: 1; } .ra-ax { fill: var(--cp-muted); font: 500 10.5px var(--cp-font); } .ra-b-rev { fill: var(--ra-rust); transform-origin: bottom; transform-box: fill-box; animation: ra-grow .6s var(--cp-e, ease) both; animation-delay: calc(var(--i) * 25ms); } .ra-b-cmp { fill: color-mix(in srgb, var(--cp-text) 16%, transparent); } @keyframes ra-grow { from { transform: scaleY(0); } to { transform: none; } } .ra-l-paid { fill: none; stroke: var(--ra-green); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .ra-l-exp { fill: none; stroke: var(--ra-red); stroke-width: 2.2; stroke-dasharray: 6 4; stroke-linejoin: round; } .ra-l-paid-d { fill: var(--cp-surface); stroke: var(--ra-green); stroke-width: 2; } .ra-l-exp-d { fill: var(--cp-surface); stroke: var(--ra-red); stroke-width: 1.6; } .ra-hit { fill: transparent; cursor: pointer; } .ra-hit.is-on { fill: color-mix(in srgb, var(--cp-text) 6%, transparent); } .ra-tip { position: absolute; top: 4px; min-width: 190px; padding: 10px 12px; border-radius: 3px; background: var(--cp-surface-3, #1e2230); border: 1px solid var(--cp-line-2); box-shadow: 0 16px 36px -16px rgba(0,0,0,.7); pointer-events: none; z-index: 3; font-size: 12px; } .ra-tip b { display: block; margin-bottom: 6px; color: var(--cp-strong); font-weight: 600; } .ra-tip div { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--cp-muted); } .ra-tip em { margin-left: auto; font-style: normal; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-card-f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cp-line); } .ra-card-f span { display: flex; flex-direction: column; gap: 3px; } .ra-card-f em { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); } .ra-card-f b { font-size: 15px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; } /* Tabelle Kunden */ .ra-table { display: flex; flex-direction: column; } .ra-tr { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .7fr); gap: 10px; align-items: center; padding: 9px 8px; border-radius: 3px; text-decoration: none !important; color: var(--cp-text) !important; } a.ra-tr:hover { background: var(--cp-hover); } .ra-th { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); padding-bottom: 6px; border-bottom: 1px solid var(--cp-line); border-radius: 0; margin-bottom: 4px; } .ra-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--cp-strong); } .ra-name small { display: none; } .ra-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: hsl(var(--h) 55% 58%); } .ra-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; } .ra-th span:nth-child(n+2) { text-align: right; } .ra-th span:nth-child(3) { text-align: left; } .ra-kpi.has-spark { padding-bottom: 34px; } .ra-num.is-warn { color: var(--ra-amber); } .ra-share { display: flex; align-items: center; gap: 8px; } .ra-share i { display: block; height: 6px; border-radius: 3px; background: var(--ra-rust); min-width: 2px; } .ra-share em { font-style: normal; font-size: 11.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } /* Balkenlisten */ .ra-bars { display: flex; flex-direction: column; gap: 10px; } .ra-bar { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) auto; gap: 12px; align-items: center; text-decoration: none !important; color: var(--cp-text) !important; animation: cp-reveal .5s ease both; animation-delay: calc(var(--i) * 35ms); } .ra-bars.is-compact .ra-bar { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) auto; } .ra-bar-l { min-width: 0; font-size: 13px; color: var(--cp-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ra-bar-l small { display: block; font-size: 11px; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; } .ra-bar-t { height: 8px; border-radius: 999px; background: var(--cp-hover); overflow: hidden; } .ra-bar-t i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--ra-rust) 70%, transparent), var(--ra-rust)); transform-origin: left; animation: ra-grow-x .7s var(--cp-e, ease) both; } .ra-bar.t-red .ra-bar-t i { background: var(--ra-red); } .ra-bar.t-blue .ra-bar-t i { background: var(--ra-blue); } @keyframes ra-grow-x { from { transform: scaleX(0); } to { transform: none; } } .ra-bar b { font-size: 13px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } a.ra-bar:hover .ra-bar-l { color: var(--ra-rust); } /* Donut */ .ra-donut { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; } .ra-donut svg { width: 150px; height: 150px; } .ra-donut .ra-seg { transition: stroke-width .2s ease; cursor: pointer; } .ra-donut .ra-seg:hover { stroke-width: 20; } .ra-donut-v { fill: var(--cp-strong); font: 600 12px var(--cp-font); text-anchor: middle; } .ra-donut-l { fill: var(--cp-muted); font: 500 9px var(--cp-font); text-anchor: middle; letter-spacing: .12em; text-transform: uppercase; } .ra-donut-leg { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ra-donut-leg div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; font-size: 12.5px; } .ra-donut-leg i { width: 10px; height: 10px; border-radius: 3px; } .ra-donut-leg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-strong); } .ra-donut-leg b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cp-strong); } .ra-donut-leg em { grid-column: 2 / 4; font-style: normal; font-size: 11px; color: var(--cp-muted); margin-top: -3px; } /* Gestapelter Balken + Legende (Altersstruktur, Status) */ .ra-stack { display: flex; height: 14px; border-radius: 3px; overflow: hidden; gap: 2px; background: var(--cp-hover); } .ra-stack i { display: block; height: 100%; transform-origin: left; animation: ra-grow-x .7s ease both; } .ra-aging { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; margin-top: 12px; } .ra-aging div { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 8px; align-items: center; } .ra-aging span { font-size: 12px; color: var(--cp-muted); } .ra-aging b { grid-column: 2; font-size: 14px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-expect { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ra-expect div { padding: 10px 12px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); display: flex; flex-direction: column; gap: 3px; } .ra-expect em { font-style: normal; font-size: 11px; color: var(--cp-muted); } .ra-expect b { font-size: 15px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-expect .is-warn { border-color: color-mix(in srgb, var(--ra-red) 45%, transparent); } html[data-theme]:not(#cp) body .ra-expect .is-warn b { color: var(--ra-red); } /* Listen */ .ra-list { display: flex; flex-direction: column; } .ra-li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--cp-line); text-decoration: none !important; color: var(--cp-text) !important; border-radius: 3px; } .ra-li:last-child { border-bottom: 0; } .ra-li:hover { background: var(--cp-hover); } .ra-li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ra-li b { font-size: 13px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-li small { font-size: 11.5px; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ra-li-r { align-items: flex-end; text-align: right; } .is-bad { color: var(--ra-red) !important; } .ra-debtors { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .ra-debtors a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); text-decoration: none !important; color: var(--cp-text) !important; } .ra-debtors a:hover { border-color: var(--cp-rust-line); } .ra-debtors span { font-size: 13px; font-weight: 500; color: var(--cp-strong); display: flex; justify-content: space-between; gap: 8px; } .ra-debtors small { color: var(--cp-muted); font-weight: 400; } .ra-debtors b { font-size: 17px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-debtors em { font-style: normal; font-size: 11.5px; color: var(--cp-muted); } .ra-foot { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.55; color: var(--cp-muted); } /* Responsiv */ @media (max-width: 1200px) { .ra-grid.g-4-4-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .ra-kpis, .ra-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ra-grid.g-7-5, .ra-grid.g-6-6 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .ra-page { padding: 16px 12px 90px; } .ra-head { align-items: flex-start; } .ra-actions .ra-btn span { display: none; } html[data-theme]:not(#cp) body .ra-page .ra-actions .ra-btn { width: 40px; padding: 0; justify-content: center; } .ra-controls { padding: 8px; } .ra-presets { width: 100%; } .ra-ctl-right { margin-left: 0; width: 100%; justify-content: space-between; } .ra-custom { width: 100%; } .ra-custom label { flex: 1; } html[data-theme]:not(#cp) body .ra-page .ra-custom input { width: 100%; font-size: 16px; } .ra-kpis { gap: 8px; } .ra-kpi { min-height: 116px; padding: 12px 12px 10px; border-radius: 3px; } .ra-kpi-l { font-size: 10px; letter-spacing: .1em; } .ra-kpi-v { font-size: 19px; } .ra-mini { gap: 8px; } .ra-mini-i { padding: 10px 12px; } .ra-mini-i b { font-size: 16px; } .ra-grid.g-4-4-4 { grid-template-columns: minmax(0, 1fr); } .ra-card { padding: 14px 12px 14px; border-radius: 3px; } .ra-card-f { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ra-tr { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 6px; } .ra-th { display: none; } .ra-name { grid-column: 1; flex-wrap: wrap; } .ra-name small { display: block; width: 100%; padding-left: 16px; font-size: 11px; color: var(--cp-muted); font-weight: 400; } .ra-tr > .ra-num:nth-child(2) { grid-column: 2; grid-row: 1; font-weight: 600; } .ra-share { grid-column: 1 / 3; } .ra-tr > .ra-num:nth-child(4), .ra-tr > .ra-num:nth-child(5) { display: none; } .ra-bar, .ra-bars.is-compact .ra-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .ra-bar-t { grid-column: 1 / 3; grid-row: 2; } .ra-donut { grid-template-columns: 1fr; justify-items: center; } .ra-donut-leg { width: 100%; } .ra-expect { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Druck */ @media print { html body .sidebar, html body #default-navbar, html body .navbar-custom, html body #mobile-bottom-menu, html body .ra-controls, html body .ra-actions, html body .rst-support-launcher, html body #js-init-chat-icon, html body .cp-fab-dock, html body .ra-banner button { display: none !important; } html body .page-container { margin: 0 !important; max-height: none !important; overflow: visible !important; } .ra-page { padding: 0; max-width: none; } .ra-card, .ra-kpi, .ra-mini-i { break-inside: avoid; box-shadow: none !important; } } /* --------------------------------------------------------------------------- v5.38.0 · Auswertung: KI-Analyse, Motion Graphics, Ausgaben, Lesbarkeit --------------------------------------------------------------------------- */ .ra-page { --ra-violet: #a37fe0; --ra-e: cubic-bezier(.2, .75, .2, 1); } html[data-theme="light"] .ra-page { --ra-red: #d93b40; --ra-green: #1f9d6a; --ra-blue: #2f78c4; --ra-amber: #b7861a; --ra-violet: #7b54c9; } /* Flächen: klarere Kanten, leichte Tiefe */ .ra-card, .ra-kpi { border-color: var(--cp-line-2); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px -24px rgba(0,0,0,.6); } html[data-theme="light"] .ra-card, html[data-theme="light"] .ra-kpi { box-shadow: 0 1px 2px rgba(20,24,40,.05), 0 10px 28px -22px rgba(20,24,40,.25); } .ra-mini-i { border-color: var(--cp-line-2); } .ra-mini-i > span, .ra-kpi-l, .ra-card-f em, .ra-th { letter-spacing: .1em; } .ra-mini-i em, .ra-kpi-m, .ra-card-s, .ra-li small, .ra-bar-l small { font-size: 12px; } .ra-ax { font-size: 11px; font-weight: 500; } .ra-grid-l { stroke: color-mix(in srgb, var(--cp-text) 9%, transparent); } .ra-leg i, .ra-tip i, .ra-aging i { width: 11px; height: 11px; } html[data-theme]:not(#cp) body .ra-page .ra-leg { color: var(--cp-text); font-weight: 500; height: 28px; } html[data-theme]:not(#cp) body .ra-page .ra-leg.is-static { cursor: default; } html[data-theme]:not(#cp) body .ra-page .ra-leg.is-static:hover { background: transparent; } .c-violet { background: var(--ra-violet) !important; } .ra-leg i.is-dash { --dc: var(--ra-rust); background: repeating-linear-gradient(90deg, var(--dc) 0 3px, transparent 3px 5px) !important; height: 3px; border-radius: 2px; width: 16px; } .ra-leg i.is-dash.c-green { --dc: var(--ra-green); } .ra-btn svg { width: 17px; height: 17px; stroke-width: 2.1; } /* KPI mit Icon */ .ra-kpi-top { display: flex; align-items: center; gap: 9px; min-width: 0; } .ra-kpi-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 3px; color: var(--k, var(--cp-muted)); background: color-mix(in srgb, var(--k, var(--cp-muted)) 15%, transparent); border: 1px solid color-mix(in srgb, var(--k, var(--cp-muted)) 28%, transparent); } .ra-kpi.t-muted .ra-kpi-ic { color: var(--cp-strong); background: var(--cp-hover); border-color: var(--cp-line-2); } .ra-kpi-ic svg { width: 16px; height: 16px; margin: 0 !important; } .ra-kpi-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ra-kpi-v { margin-top: 2px; } .ra-count { font-variant-numeric: tabular-nums; } .ra-page svg:not(#cp) { margin-top: 0; } /* app.all.css verschiebt alle SVG um -3px */ /* Motion: Einblenden der Bereiche */ @keyframes ra-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Motion: Linien zeichnen sich, Punkte erscheinen, Donut dreht auf */ .ra-draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: ra-draw 1.2s var(--ra-e) both; animation-delay: var(--d, 0ms); } @keyframes ra-draw { from { stroke-dashoffset: 1; } } .ra-fade { animation: ra-fade .9s ease both; animation-delay: var(--d, 0ms); } @keyframes ra-fade { from { opacity: 0; } } .ra-pop { transform-box: fill-box; transform-origin: center; animation: ra-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--d, 0ms); } @keyframes ra-pop { from { opacity: 0; transform: scale(0); } } .ra-seg { animation: ra-sweep 1s var(--ra-e) both; animation-delay: calc(var(--i) * 110ms + 150ms); } @keyframes ra-sweep { from { stroke-dasharray: 0 300; } } .ra-donut-bg { stroke: var(--cp-hover); } .ra-donut-leg > div { animation: ra-rise .5s var(--ra-e) both; animation-delay: calc(var(--i) * 70ms + 200ms); } .ra-spark { animation: ra-wipe 1.4s var(--ra-e) both; animation-delay: calc(var(--i, 0) * 60ms + 250ms); } @keyframes ra-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .ra-b-cmp { transform-origin: bottom; transform-box: fill-box; animation: ra-grow .6s var(--ra-e) both; animation-delay: calc(var(--i) * 25ms); } .ra-l-paid, .ra-l-cash, .ra-y-cur { filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); } .ra-l-cash { fill: none; stroke: var(--ra-violet); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .ra-l-cash-d { fill: var(--cp-surface); stroke: var(--ra-violet); stroke-width: 2; } .ra-l-paid-d, .ra-l-exp-d, .ra-l-cash-d { transition: r .15s ease; } .ra-cross { stroke: color-mix(in srgb, var(--cp-text) 35%, transparent); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; } .ra-hit.is-on { fill: color-mix(in srgb, var(--cp-text) 5%, transparent); } .ra-tip { min-width: 220px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: color-mix(in srgb, var(--cp-surface-3, #1e2230) 92%, transparent); transition: left .12s ease; } .ra-tip i.c-ghost { background: color-mix(in srgb, var(--cp-text) 35%, transparent) !important; } /* Jahresverlauf */ .ra-y-cur { fill: none; stroke: var(--ra-rust); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; } .ra-y-area { fill: url(#ra-g-ytd); stroke: none; } .ra-y-prev { fill: none; stroke: color-mix(in srgb, var(--cp-text) 38%, transparent); stroke-width: 2; stroke-dasharray: 5 5; stroke-linejoin: round; } .ra-y-proj { fill: none; stroke: var(--ra-rust); stroke-width: 2; stroke-dasharray: 4 5; opacity: .85; } .ra-y-cd { fill: var(--cp-surface); stroke: var(--ra-rust); stroke-width: 2; } .ra-y-pd { fill: var(--ra-rust); stroke: var(--cp-surface); stroke-width: 2; } .ra-y-pt { fill: var(--cp-strong); font: 600 11.5px var(--cp-font); } /* Abschnitts-Überschrift */ html[data-theme]:not(#cp):not(#cq) body .ra-page h2.ra-section { display: flex; align-items: center; gap: 10px; margin: 28px 2px 14px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--cp-strong) !important; } .ra-section i { width: 18px; height: 2px; border-radius: 2px; background: var(--ra-rust); box-shadow: 0 0 10px var(--ra-rust); } .ra-section::after { content: ""; flex: 1; height: 1px; background: var(--cp-line-2); } .ra-mini-exp .ra-mini-i, html[data-theme]:not(#cp) body .ra-page .ra-mini-exp button.ra-mini-i { border-left: 3px solid color-mix(in srgb, var(--ra-red) 60%, transparent); } .ra-bar b .ra-delta { margin-left: 6px; height: 18px; font-size: 10.5px; } .ra-bars .ra-bar > b { width: 112px; text-align: right; } .ra-bars .ra-bar.t-red > b { width: 164px; } /* gleiche Spurbreite in jeder Zeile */ .ra-bar.t-red .ra-bar-t i { background: linear-gradient(90deg, color-mix(in srgb, var(--ra-red) 60%, transparent), var(--ra-red)); } .ra-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--ra-violet); background: color-mix(in srgb, var(--ra-violet) 15%, transparent); vertical-align: 1px; } /* Fixkosten */ .ra-fixed { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .ra-fixed > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line-2); animation: ra-rise .5s var(--ra-e) both; } .ra-fixed span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--cp-strong); font-weight: 500; } .ra-fixed small { font-size: 11.5px; color: var(--cp-muted); font-weight: 400; } .ra-fixed b { font-size: 14px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .ra-fixed .is-sum { grid-column: 1 / -1; background: color-mix(in srgb, var(--ra-red) 10%, var(--cp-surface-2)); border-color: color-mix(in srgb, var(--ra-red) 35%, transparent); } html[data-theme]:not(#cp) body .ra-fixed .is-sum b { color: var(--ra-red); } /* Projekt-Rentabilität */ .ra-proj .ra-tr { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.2fr); } .ra-proj .ra-name { flex-direction: column; align-items: flex-start; gap: 1px; } .ra-proj .ra-name small { display: block; font-size: 11.5px; color: var(--cp-muted); font-weight: 400; } .ra-proj .ra-th span:nth-child(3) { text-align: right; } .ra-proj .ra-th span:nth-child(5) { text-align: left; } .ra-margin { display: flex; align-items: center; gap: 8px; } .ra-margin i { display: block; height: 7px; border-radius: 999px; min-width: 2px; max-width: 70%; background: var(--cp-line-2); transform-origin: left; animation: ra-grow-x .8s var(--ra-e) both; animation-delay: calc(var(--i) * 50ms + 200ms); } .ra-margin em { font-style: normal; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cp-strong); } .ra-margin small { display: none; } .ra-margin.is-good i { background: var(--ra-green); } .ra-margin.is-good em { color: var(--ra-green); } .ra-margin.is-mid i { background: var(--ra-amber); } .ra-margin.is-mid em { color: var(--ra-amber); } .ra-margin.is-low i { background: var(--ra-red); } .ra-margin.is-low em { color: var(--ra-red); } .ra-tr[style*="--i"] { animation: ra-rise .45s var(--ra-e) both; animation-delay: calc(var(--i) * 35ms); } /* KI-Analyse */ .ra-ai { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--ra-violet) 35%, var(--cp-line-2)); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ra-violet) 12%, transparent), transparent 55%), radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--ra-rust) 10%, transparent), transparent 60%), var(--cp-surface); } .ra-ai::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--ra-violet), var(--ra-rust), var(--ra-violet)); background-size: 200% 100%; animation: ra-flow 6s linear infinite; } @keyframes ra-flow { to { background-position: 200% 0; } } html[data-theme]:not(#cp) body .ra-page .ra-ai .ra-card-h h2 { display: flex; align-items: center; gap: 10px; } .ra-ai-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 3px; color: #fff; background: linear-gradient(135deg, var(--ra-violet), var(--ra-rust)); box-shadow: 0 6px 16px -6px var(--ra-violet); } .ra-ai-ico svg { width: 17px; height: 17px; margin: 0 !important; } .ra-ai .ra-btn.is-primary svg { width: 16px; height: 16px; margin: 0 !important; } html[data-theme]:not(#cp) body .ra-page .ra-ai .ra-btn.is-primary { background: linear-gradient(135deg, var(--ra-violet), var(--ra-rust)); border-color: transparent; } .ra-ai-idle { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ra-ai-idle p, .ra-ai-note { margin: 0; max-width: 720px; font-size: 13.5px; line-height: 1.6; color: var(--cp-text); } .ra-ai-note { margin-bottom: 10px; } .ra-ai-load { display: flex; align-items: center; gap: 14px; } .ra-ai-load b { display: block; font-size: 14px; font-weight: 600; color: var(--cp-strong); } .ra-ai-load span { font-size: 12.5px; color: var(--cp-muted); } .ra-ai-orb { position: relative; width: 38px; height: 38px; flex: none; } .ra-ai-orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--ra-violet); animation: ra-spin 1.1s linear infinite; } .ra-ai-orb i:nth-child(2) { inset: 6px; border-top-color: var(--ra-rust); animation-duration: .8s; animation-direction: reverse; } .ra-ai-orb i:nth-child(3) { inset: 13px; border: 0; background: radial-gradient(circle, var(--ra-rust), var(--ra-violet)); animation: ra-pulse 1.2s ease-in-out infinite; } @keyframes ra-spin { to { transform: rotate(360deg); } } @keyframes ra-pulse { 50% { transform: scale(.6); opacity: .6; } } .ra-ai-skel { display: grid; gap: 9px; margin-top: 16px; } .ra-ai-skel i { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--cp-hover) 25%, color-mix(in srgb, var(--ra-violet) 18%, transparent) 50%, var(--cp-hover) 75%); background-size: 200% 100%; animation: ra-shimmer 1.3s linear infinite; } .ra-ai-skel i:nth-child(2) { width: 88%; } .ra-ai-skel i:nth-child(3) { width: 64%; } @keyframes ra-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .ra-ai-body > * { animation: ra-rise .5s var(--ra-e) both; } html[data-theme]:not(#cp):not(#cq) body .ra-page h3.ra-ai-head { margin: 0 0 8px !important; font-size: clamp(17px, 1.6vw, 21px) !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: -.005em !important; text-transform: none !important; color: var(--cp-strong) !important; } .ra-ai-sum { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: var(--cp-text); max-width: 980px; } .ra-ai-answer { margin-bottom: 16px; padding: 12px 14px; border-radius: 3px; background: color-mix(in srgb, var(--ra-violet) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ra-violet) 30%, transparent); } .ra-ai-answer em { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ra-violet); margin-bottom: 4px; } .ra-ai-answer p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cp-strong); } .ra-ai-hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; } .ra-ai-hl > div { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line-2); border-top: 3px solid var(--t, var(--cp-line-2)); animation: ra-rise .5s var(--ra-e) both; animation-delay: calc(var(--i) * 80ms + 100ms); } .ra-ai-hl > .t-good { --t: var(--ra-green); } .ra-ai-hl > .t-bad { --t: var(--ra-red); } .ra-ai-hl > .t-neutral { --t: var(--ra-blue); } .ra-ai-hl b { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); line-height: 1.35; } .ra-ai-hl b i { font-style: normal; font-size: 10px; color: var(--t); margin-top: 3px; } .ra-ai-hl span { font-size: 12.5px; line-height: 1.55; color: var(--cp-text); } .ra-ai-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; } html[data-theme]:not(#cp):not(#cq) body .ra-page .ra-ai-cols h4 { margin: 0 0 10px !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--cp-muted) !important; } .ra-ai-act, .ra-ai-risk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: ra-a; } .ra-ai-act li, .ra-ai-risk li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 10px 44px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line-2); animation: ra-rise .5s var(--ra-e) both; animation-delay: calc(var(--i) * 80ms + 250ms); } .ra-ai-act li::before { counter-increment: ra-a; content: counter(ra-a); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--ra-violet), var(--ra-rust)); } .ra-ai-risk li::before { content: "!"; position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--ra-red); background: color-mix(in srgb, var(--ra-red) 16%, transparent); } .ra-ai-act b, .ra-ai-risk b { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); line-height: 1.35; } .ra-ai-act span, .ra-ai-risk span { font-size: 12.5px; line-height: 1.55; color: var(--cp-text); } .ra-ai-act em { flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; } .ra-ai-act .imp-hoch { color: var(--ra-green); background: color-mix(in srgb, var(--ra-green) 15%, transparent); } .ra-ai-act .imp-mittel { color: var(--ra-amber); background: color-mix(in srgb, var(--ra-amber) 15%, transparent); } .ra-ai-act .imp-niedrig { color: var(--cp-muted); background: var(--cp-hover); } .ra-ai-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cp-line); font-size: 11.5px; color: var(--cp-muted); } html[data-theme]:not(#cp) body .ra-page .ra-link { border: 0; background: none; padding: 0; color: var(--ra-rust); font: 600 12px var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .ra-page .ra-link:hover { text-decoration: underline; } .ra-ai-ask { display: flex; gap: 8px; margin-top: 16px; } html[data-theme]:not(#cp) body .ra-page .ra-ai-ask input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-strong); font: 400 14px var(--cp-font); outline: none; transition: border-color .15s ease, box-shadow .15s ease; } html[data-theme]:not(#cp) body .ra-page .ra-ai-ask input::placeholder { color: var(--cp-muted); opacity: .85; } html[data-theme]:not(#cp) body .ra-page .ra-ai-ask input:focus { border-color: color-mix(in srgb, var(--ra-violet) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ra-violet) 18%, transparent); } html[data-theme]:not(#cp) body .ra-page .ra-ai-ask .ra-btn { height: 40px; } /* Bewegung reduzieren */ @media (prefers-reduced-motion: reduce) { .ra-page *, .ra-page *::before, .ra-page *::after { animation: none !important; } } html.cp-motion-off .ra-page *, html.cp-motion-off .ra-page *::before { animation: none !important; } @media (max-width: 1100px) { .ra-ai-cols { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .ra-kpi-ic { width: 26px; height: 26px; border-radius: 3px; } .ra-kpi-ic svg { width: 14px; height: 14px; } .ra-kpi-top { gap: 7px; } .ra-proj .ra-tr { grid-template-columns: minmax(0, 1fr) auto; } .ra-proj .ra-tr > .ra-num:nth-child(3), .ra-proj .ra-tr > .ra-num:nth-child(4) { display: none; } .ra-proj .ra-margin { grid-column: 1 / 3; } .ra-proj .ra-name small { padding-left: 0; } .ra-ai-ask { flex-direction: column; } html[data-theme]:not(#cp) body .ra-page .ra-ai-ask input { font-size: 16px; } html[data-theme]:not(#cp) body .ra-page .ra-ai-ask .ra-btn { justify-content: center; } .ra-ai-idle .ra-btn { width: 100%; justify-content: center; } .ra-fixed { grid-template-columns: minmax(0, 1fr); } .ra-bars .ra-bar > b, .ra-bars .ra-bar.t-red > b { width: auto; } .ra-kpi-l { white-space: normal; letter-spacing: .06em; line-height: 1.25; } html[data-theme]:not(#cp) body .ra-page .ra-ai-ask input { flex: none; height: 44px; } .ra-margin small { display: inline; font-weight: 500; color: var(--cp-muted); } .ra-margin em { white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .ra-page h2.ra-section { margin-top: 22px !important; font-size: 12px !important; } } @media print { .ra-ai-ask, .ra-ai-foot button { display: none !important; } .ra-page *, .ra-page *::before { animation: none !important; } } /* --------------------------------------------------------------------------- v5.38.1 · Auswertung: Abschnitts-Navigation, „Auf einen Blick“, Finanz-Score, Jahresziel, Scroll-Motion, klickbare Kacheln, Ergebnisbrücke, Periodentabelle --------------------------------------------------------------------------- */ /* Laden: Fortschrittsbalken + Skelett */ .ra-progress { position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .2s ease; pointer-events: none; } .ra-page.is-loading .ra-progress { opacity: 1; } .ra-progress::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--ra-rust), transparent); animation: ra-indet 1.1s ease-in-out infinite; } @keyframes ra-indet { from { left: -40%; } to { left: 100%; } } .ra-page.is-loading .ra-body { opacity: .55; filter: saturate(.7); transition: opacity .25s ease, filter .25s ease; } .ra-skel { display: grid; gap: 12px; } .ra-sk { border-radius: 3px; border: 1px solid var(--cp-line); background: linear-gradient(100deg, var(--cp-surface) 30%, color-mix(in srgb, var(--cp-text) 6%, var(--cp-surface)) 50%, var(--cp-surface) 70%); background-size: 250% 100%; animation: ra-shimmer 1.5s linear infinite; } .ra-sk-hero { height: 230px; } .ra-sk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ra-sk-kpi { height: 134px; } .ra-sk-chart { height: 330px; } /* Abschnitts-Navigation (klebt oben, zeigt aktiven Bereich) */ .ra-nav { position: sticky; top: var(--ra-stick, 8px); z-index: 6; display: flex; align-items: center; gap: 10px; margin: -4px 0 18px; padding: 5px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-surface) 84%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 14px 34px -22px rgba(0,0,0,.7); } .ra-nav[hidden] { display: none; } .ra-nav-in { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .ra-nav-in::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp) body .ra-page .ra-nav-in button { position: relative; flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); font: 500 12.5px/1 var(--cp-font); cursor: pointer; transition: color .2s ease, background .2s ease; } html[data-theme]:not(#cp) body .ra-page .ra-nav-in button:hover { color: var(--cp-strong); background: var(--cp-hover); } html[data-theme]:not(#cp) body .ra-page .ra-nav-in button.is-on { color: var(--cp-strong); background: color-mix(in srgb, var(--ra-rust) 15%, transparent); } .ra-nav-in button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--ra-rust); transform: scaleX(0); transition: transform .3s var(--ra-e); } .ra-nav-in button.is-on::after { transform: scaleX(1); } html[data-theme]:not(#cp) body .ra-page .ra-nav-pill { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 4px 10px; border: 0; border-left: 1px solid var(--cp-line-2); border-radius: 0; background: transparent; cursor: pointer; } .ra-nav-pill b { font-size: 12px; font-weight: 600; color: var(--cp-strong); } .ra-nav-pill span { font-size: 10.5px; color: var(--cp-muted); } .ra-sec, .ra-card[id] { scroll-margin-top: calc(var(--ra-stick, 8px) + 64px); } /* Scroll-Motion: Elemente warten pausiert, bis sie sichtbar sind */ .ra-rv { animation: ra-rise .7s var(--ra-e) both; animation-delay: var(--rv, 0ms); } .ra-rv:not(.is-vis), .ra-rv:not(.is-vis) * { animation-play-state: paused !important; } .ra-kpis.ra-rv, .ra-mini.ra-rv, .ra-hero.ra-rv { animation: none; } .ra-mini-i { position: relative; overflow: hidden; animation: ra-rise .55s var(--ra-e) backwards; } .ra-kpi { animation-fill-mode: backwards; } /* ohne Nachwirkung, sonst blockiert die Animation den Hover-Lift */ .ra-mini-i:nth-child(2) { animation-delay: 50ms; } .ra-mini-i:nth-child(3) { animation-delay: 100ms; } .ra-mini-i:nth-child(4) { animation-delay: 150ms; } .ra-mini-i:nth-child(5) { animation-delay: 200ms; } .ra-mini-i:nth-child(6) { animation-delay: 250ms; } .ra-mini-i:nth-child(7) { animation-delay: 300ms; } .ra-mini-i:nth-child(8) { animation-delay: 350ms; } h2.ra-section.is-vis::after { transform-origin: left; animation: ra-grow-x 1s var(--ra-e) both .15s; } .ra-li[style*="--i"], .ra-debtors a[style*="--i"] { animation: ra-rise .45s var(--ra-e) both; animation-delay: calc(var(--i) * 45ms + 100ms); } .ra-stack i { animation-delay: calc(var(--i, 0) * 120ms + 100ms); } .ra-fixed > div[style*="--i"] { animation-delay: calc(var(--i) * 50ms); } .ra-count.is-chg { animation: ra-chg 1.4s ease; } @keyframes ra-chg { 30% { color: var(--ra-rust); } } .ra-card.ra-flash { animation: ra-flash 1.6s ease-out .35s both; } @keyframes ra-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ra-rust) 55%, transparent); border-color: var(--ra-rust); } 100% { box-shadow: 0 0 0 18px transparent; } } /* Auf einen Blick */ .ra-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; } .ra-hero > div { position: relative; overflow: hidden; min-width: 0; padding: 20px 22px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 14px 34px -26px rgba(0,0,0,.7); animation: ra-rise .7s var(--ra-e) both; } .ra-hero > div:nth-child(2) { animation-delay: 90ms; } .ra-hero > div:nth-child(3) { animation-delay: 180ms; } .ra-hero > .ra-hero-main { background: radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--ra-rust) 17%, transparent), transparent 55%), radial-gradient(80% 80% at 100% 100%, color-mix(in srgb, var(--ra-violet) 9%, transparent), transparent 60%), var(--cp-surface); } .ra-hero-k { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-muted); } .ra-hero-k > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ra-rust); box-shadow: 0 0 10px var(--ra-rust); flex: none; } html[data-theme]:not(#cp):not(#cq) body .ra-page h2.ra-hero-h { margin: 10px 0 6px !important; font-size: clamp(22px, 2.3vw, 31px) !important; font-weight: 400 !important; letter-spacing: -.015em !important; line-height: 1.15 !important; text-transform: none !important; color: var(--cp-strong) !important; } .ra-hero-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 14px; font-size: 13px; color: var(--cp-muted); } .ra-hero-sub b { font-size: 15px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-hero-sub > span { opacity: .45; } .ra-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ra-facts li { animation: ra-rise .5s var(--ra-e) both; animation-delay: calc(var(--i) * 80ms + 280ms); } html[data-theme]:not(#cp) body .ra-page .ra-fact { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 3px; border: 1px solid transparent; background: color-mix(in srgb, var(--cp-text) 3.5%, transparent); color: var(--cp-text) !important; text-decoration: none !important; font: 400 13px/1.4 var(--cp-font); text-align: left; transition: background .2s ease, border-color .2s ease, transform .2s var(--ra-e); } html[data-theme]:not(#cp) body .ra-page .ra-fact.is-link { cursor: pointer; } html[data-theme]:not(#cp) body .ra-page .ra-fact.is-link:hover { background: var(--cp-hover); border-color: var(--cp-line-2); transform: translateX(3px); } .ra-fact > i { flex: none; width: 22px; height: 22px; border-radius: 3px; display: flex; align-items: center; justify-content: center; } .ra-fact > i svg { width: 13px; height: 13px; margin: 0 !important; stroke-width: 2.6; } .ra-facts .t-good .ra-fact > i { color: var(--ra-green); background: color-mix(in srgb, var(--ra-green) 16%, transparent); } .ra-facts .t-bad .ra-fact > i { color: var(--ra-red); background: color-mix(in srgb, var(--ra-red) 16%, transparent); } .ra-facts .t-neutral .ra-fact > i { color: var(--ra-blue); background: color-mix(in srgb, var(--ra-blue) 16%, transparent); } .ra-fact > span { flex: 1; min-width: 0; } .ra-fact > .ra-go { flex: none; } .ra-fact b { color: var(--cp-strong); font-weight: 600; } /* Finanz-Score */ .ra-gauge { position: relative; max-width: 230px; margin: 10px auto 0; } .ra-gauge svg { display: block; width: 100%; height: auto; overflow: visible; margin: 0 !important; } .ra-gauge-bg { fill: none; stroke: var(--cp-hover); stroke-width: 14; stroke-linecap: round; } .ra-gauge-v { fill: none; stroke: url(#ra-g-score); stroke-width: 14; stroke-linecap: round; animation: ra-gauge 1.7s var(--ra-e) both .25s; } @keyframes ra-gauge { from { stroke-dasharray: 0 100; } } .ra-gauge-t { stroke: color-mix(in srgb, var(--cp-text) 22%, transparent); stroke-width: 2; stroke-linecap: round; } .ra-gauge-c { position: absolute; left: 0; right: 0; bottom: -2px; display: flex; flex-direction: column; align-items: center; } .ra-gauge-c b { font-size: 40px; font-weight: 300; line-height: 1; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-gauge-c > span { margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .ra-gauge.t-good .ra-gauge-c > span { color: var(--ra-green); background: color-mix(in srgb, var(--ra-green) 15%, transparent); } .ra-gauge.t-mid .ra-gauge-c > span { color: var(--ra-amber); background: color-mix(in srgb, var(--ra-amber) 15%, transparent); } .ra-gauge.t-bad .ra-gauge-c > span { color: var(--ra-red); background: color-mix(in srgb, var(--ra-red) 15%, transparent); } .ra-score-f { display: grid; gap: 8px; margin-top: 16px; } .ra-score-f > div { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 20px; align-items: center; gap: 10px; animation: ra-rise .45s var(--ra-e) both; animation-delay: calc(var(--i) * 70ms + 400ms); } .ra-score-f span { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.25; color: var(--cp-text); } .ra-score-f small { font-size: 10.5px; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ra-score-f i { display: block; height: 6px; border-radius: 3px; background: var(--cp-hover); overflow: hidden; } .ra-score-f i b { display: block; height: 100%; border-radius: 3px; transform-origin: left; animation: ra-grow-x .9s var(--ra-e) both; animation-delay: calc(var(--i) * 90ms + 550ms); } .ra-score-f i b.is-good { background: var(--ra-green); } .ra-score-f i b.is-mid { background: var(--ra-amber); } .ra-score-f i b.is-bad { background: var(--ra-red); } .ra-score-f em { font-style: normal; font-size: 12px; font-weight: 700; text-align: right; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-hero-na { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--cp-muted); } /* Jahresziel */ html[data-theme]:not(#cp) body .ra-page .ra-goal-ed { margin-left: auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp) body .ra-page .ra-goal-ed:hover { background: var(--cp-hover); color: var(--cp-strong); } .ra-goal-ed svg { width: 14px; height: 14px; margin: 0 !important; } .ra-goal { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; --gc: var(--ra-rust); } .ra-goal.t-good, .ra-goal.t-win { --gc: var(--ra-green); } .ra-goal.t-mid { --gc: var(--ra-amber); } .ra-ring { position: relative; width: 112px; height: 112px; flex: none; } .ra-ring svg { display: block; width: 100%; height: 100%; margin: 0 !important; } .ra-ring-bg { fill: none; stroke: var(--cp-hover); stroke-width: 10; } .ra-ring-p { fill: none; stroke: color-mix(in srgb, var(--ra-rust) 28%, transparent); stroke-width: 10; stroke-linecap: round; animation: ra-gauge 1.9s var(--ra-e) both .35s; } .ra-ring-v { fill: none; stroke: var(--ra-rust); stroke-width: 10; stroke-linecap: round; animation: ra-gauge 1.5s var(--ra-e) both .2s; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ra-rust) 55%, transparent)); } .ra-goal.is-done .ra-ring-v { stroke: var(--ra-green); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ra-green) 60%, transparent)); } .ra-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ra-ring-c b { font-size: 25px; font-weight: 400; color: var(--cp-strong); font-variant-numeric: tabular-nums; line-height: 1; } .ra-ring-c > span { margin-top: 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .ra-goal-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; min-width: 0; } .ra-goal-l li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; } .ra-goal-l em { flex-basis: 100%; font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); } .ra-goal-l b { font-size: 16px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .ra-goal-l b.is-good, html[data-theme]:not(#cp) body .ra-goal-l .is-win b { color: var(--ra-green); } html[data-theme]:not(#cp) body .ra-goal-l b.is-warn { color: var(--ra-amber); } .ra-goal-l small { font-size: 11.5px; color: var(--cp-muted); } .ra-goal-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 14px; } .ra-goal-empty p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--cp-text); } .ra-goal-empty em { font-style: normal; font-size: 12px; color: var(--cp-muted); } .ra-goal-ico { width: 44px; height: 44px; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--ra-rust); background: var(--cp-rust-soft); } .ra-goal-ico svg { width: 22px; height: 22px; margin: 0 !important; } .ra-goal-form { display: grid; gap: 10px; margin-top: 14px; animation: ra-rise .35s var(--ra-e) both; } .ra-goal-form[hidden] { display: none; } .ra-goal-form label { display: grid; gap: 6px; font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp) body .ra-page .ra-goal-form input { height: 40px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-strong); font: 500 15px var(--cp-font); outline: none; } html[data-theme]:not(#cp) body .ra-page .ra-goal-form input:focus { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .ra-goal-form > div { display: flex; gap: 8px; flex-wrap: wrap; } /* Klickbare Kacheln + Lichtkegel */ .ra-kpi, .ra-mini-i, .ra-hero > div { --mx: 50%; --my: -300px; } .ra-kpi::after, .ra-mini-i::after, .ra-hero > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .35s ease; background: radial-gradient(280px circle at var(--mx) var(--my), color-mix(in srgb, var(--k, var(--ra-rust)) 14%, transparent), transparent 65%); } .ra-kpi:hover::after, .ra-mini-i:hover::after, .ra-hero > div:hover::after { opacity: 1; } html[data-theme]:not(#cp) body .ra-page .is-link { cursor: pointer; text-decoration: none !important; color: inherit; font: inherit; text-align: left; } html[data-theme]:not(#cp) body .ra-page button.ra-kpi { width: 100%; background: var(--cp-surface); border: 1px solid var(--cp-line-2); } html[data-theme]:not(#cp) body .ra-page button.ra-mini-i { width: 100%; background: var(--cp-surface-2); border: 1px solid var(--cp-line-2); } html[data-theme]:not(#cp) body .ra-page a.ra-kpi, html[data-theme]:not(#cp) body .ra-page a.ra-mini-i { color: var(--cp-text) !important; } .ra-kpi.is-link, .ra-mini-i.is-link { transition: transform .3s var(--ra-e), border-color .3s ease, box-shadow .3s ease; } .ra-kpi.is-link:hover, .ra-mini-i.is-link:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--k, var(--ra-rust)) 45%, var(--cp-line-2)); box-shadow: 0 20px 40px -24px rgba(0,0,0,.8); } .ra-kpi.is-link:active, .ra-mini-i.is-link:active { transform: translateY(-1px) scale(.99); } .ra-kpi.is-link:focus-visible, .ra-mini-i.is-link:focus-visible, .ra-fact.is-link:focus-visible { outline: 2px solid var(--ra-rust); outline-offset: 2px; } .ra-mini-i > span { display: flex; align-items: center; gap: 6px; } .ra-go { flex: none; margin-left: auto; width: 24px; height: 24px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: var(--cp-muted); background: var(--cp-hover); opacity: 0; transform: translate(-4px, 4px); transition: opacity .25s ease, transform .3s var(--ra-e), color .2s ease, background .2s ease; } .ra-go svg { width: 13px; height: 13px; margin: 0 !important; } .ra-mini-i .ra-go { width: 20px; height: 20px; border-radius: 3px; } .ra-mini-i .ra-go svg { width: 11px; height: 11px; } .is-link:hover .ra-go, .is-link:focus-visible .ra-go { opacity: 1; transform: none; color: #fff; background: var(--k, var(--ra-rust)); } .ra-mini-i.is-link:hover .ra-go { background: var(--ra-rust); } @media (hover: none) { .ra-go { opacity: .75; transform: none; } } .ra-kpi-pv { position: absolute; left: 16px; bottom: 8px; z-index: 2; padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; color: var(--cp-strong); background: color-mix(in srgb, var(--cp-surface-3, #1e2230) 92%, transparent); border: 1px solid var(--cp-line-2); opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .3s var(--ra-e); pointer-events: none; } .ra-kpi:hover .ra-kpi-pv { opacity: 1; transform: none; } html[data-theme]:not(#cp) body .ra-page .ra-card-link { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 3px; font-size: 12px; font-weight: 600; color: var(--ra-rust) !important; text-decoration: none !important; transition: background .2s ease; } html[data-theme]:not(#cp) body .ra-page .ra-card-link:hover { background: color-mix(in srgb, var(--ra-rust) 12%, transparent); } .ra-card-link svg { width: 13px; height: 13px; margin: 0 !important; transition: transform .25s var(--ra-e); } .ra-card-link:hover svg { transform: translate(2px, -2px); } .ra-card-h:has(.ra-card-link) .ra-card-s { order: 3; flex-basis: 100%; margin-top: -8px; } /* Diagramm-Feinschliff */ .ra-b-rev { fill: url(#ra-g-rev); transition: opacity .2s ease; } .ra-b-cmp { transition: opacity .2s ease; } .ra-chart svg.is-hover .ra-b-rev:not(.is-hi), .ra-chart svg.is-hover .ra-b-cmp:not(.is-hi) { opacity: .38; } .ra-chart svg.is-hover circle.is-hi { stroke-width: 3.4; fill: var(--cp-strong); } .ra-avg { stroke: color-mix(in srgb, var(--cp-text) 45%, transparent); stroke-width: 1.2; stroke-dasharray: 2 4; } .ra-avg-t { fill: var(--cp-strong); font: 600 10.5px var(--cp-font); } .ra-avg-t, .ra-y-gt, .ra-y-pt { paint-order: stroke; stroke: var(--cp-surface); stroke-width: 4px; stroke-linejoin: round; } /* Lichthof: lesbar auch über Balken und Linien */ .ra-tip b { display: flex; align-items: center; gap: 6px; } .ra-tip b small { font-weight: 500; color: var(--cp-muted); } .ra-tip b .ra-delta { margin-left: auto; height: 18px; font-size: 10.5px; } .ra-y-goal { stroke: var(--ra-green); stroke-width: 1.5; stroke-dasharray: 6 5; } .ra-y-gt { fill: var(--ra-green); font: 600 11px var(--cp-font); } .ra-y-pulse { fill: none; stroke: var(--ra-rust); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ra-ping 2.2s ease-out 1.6s infinite; } @keyframes ra-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } } .ra-spark .ra-spark-l { animation: none; } /* Donut interaktiv */ .ra-donut .ra-seg { transition: opacity .25s ease, stroke-width .2s ease; } .ra-donut .ra-seg.is-on { stroke-width: 20; } .ra-donut.is-hl .ra-seg:not(.is-on) { opacity: .25; } .ra-donut-leg > div { cursor: pointer; margin: -3px -6px; padding: 3px 6px; border-radius: 3px; transition: background .2s ease, opacity .2s ease; } .ra-donut-leg > div.is-on { background: var(--cp-hover); } .ra-donut.is-hl .ra-donut-leg > div:not(.is-on) { opacity: .45; } .ra-donut.is-hl .ra-donut-l { font-size: 7.5px; letter-spacing: .03em; text-transform: none; } /* ABC-Analyse */ .ra-abc { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; font-style: normal; font-size: 10px; font-weight: 800; } .ra-abc.is-a { color: #fff; background: var(--ra-rust); } .ra-abc.is-b { color: var(--ra-amber); background: color-mix(in srgb, var(--ra-amber) 18%, transparent); } .ra-abc.is-c { color: var(--cp-muted); background: var(--cp-hover); } .ra-abc-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 8px 0; font-size: 12px; color: var(--cp-muted); } /* Ergebnisbrücke */ .ra-wf { display: grid; gap: 9px; } .ra-wf-r { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.5fr) 124px; gap: 14px; align-items: center; animation: ra-rise .45s var(--ra-e) both; animation-delay: calc(var(--i) * 120ms); } .ra-wf-l { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--cp-strong); } .ra-wf-l small { font-size: 11px; color: var(--cp-muted); } .ra-wf-t { position: relative; height: 22px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 4%, transparent); } .ra-wf-t i { position: absolute; top: 0; bottom: 0; border-radius: 3px; animation: ra-grow-x .85s var(--ra-e) both; animation-delay: calc(var(--i) * 140ms + 180ms); } .ra-wf-r.t-rev .ra-wf-t i { transform-origin: left; background: linear-gradient(90deg, #c8431b, #f47a4c); } .ra-wf-r.t-cost .ra-wf-t i { transform-origin: right; background: linear-gradient(90deg, color-mix(in srgb, var(--ra-red) 55%, transparent), var(--ra-red)); } .ra-wf-r.t-res .ra-wf-t i { transform-origin: left; background: linear-gradient(90deg, #238a5e, var(--ra-green)); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--ra-green) 55%, transparent); } .ra-wf-r.t-neg .ra-wf-t i { transform-origin: right; background: var(--ra-red); } .ra-wf-t u { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--cp-line-2); } .ra-wf-r > b { text-align: right; font-size: 13px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } html[data-theme]:not(#cp) body .ra-wf-r.t-cost > b { color: var(--ra-red); } html[data-theme]:not(#cp) body .ra-wf-r.t-res > b { color: var(--ra-green); } html[data-theme]:not(#cp) body .ra-wf-r.t-neg > b { color: var(--ra-red); } .ra-wf-r.t-res, .ra-wf-r.t-neg { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--cp-line-2); } .ra-wf-r.t-res .ra-wf-l, .ra-wf-r.t-neg .ra-wf-l { font-weight: 600; } /* Periodentabelle */ .ra-pt-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px 2px; -webkit-overflow-scrolling: touch; } .ra-page table.ra-pt { width: 100%; min-width: 660px; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; background: transparent; } .ra-page .ra-pt th, .ra-page .ra-pt td { padding: 9px 10px; text-align: right; white-space: nowrap; border: 0; border-bottom: 1px solid var(--cp-line); color: var(--cp-text); background: transparent; } .ra-page .ra-pt thead th { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); border-bottom-color: var(--cp-line-2); } .ra-page .ra-pt th:first-child { position: sticky; left: 0; z-index: 2; text-align: left; font-weight: 500; color: var(--cp-strong); background: var(--cp-surface) !important; box-shadow: 10px 0 12px -12px rgba(0,0,0,.7); } .ra-page .ra-pt thead th:first-child { color: var(--cp-muted); font-weight: 600; } .ra-page .ra-pt tbody tr { animation: ra-rise .4s var(--ra-e) both; animation-delay: calc(var(--i) * 28ms + 80ms); } .ra-page .ra-pt tbody tr:hover td, .ra-page .ra-pt tbody tr:hover th { background: color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface)); } .ra-pt-v { position: relative; } .ra-pt-v i { position: absolute; right: 8px; top: 7px; bottom: 7px; max-width: calc(100% - 16px); border-radius: 3px; background: color-mix(in srgb, var(--ra-rust) 15%, transparent); transform-origin: right; animation: ra-grow-x .8s var(--ra-e) both; animation-delay: calc(var(--i, 0) * 28ms + 200ms); } .ra-pt-v span { position: relative; } .ra-page .ra-pt tfoot th, .ra-page .ra-pt tfoot td { font-weight: 700; color: var(--cp-strong); border-bottom: 0; border-top: 1px solid var(--cp-line-2); } .ra-page .ra-pt td.is-bad { color: var(--ra-red); } .ra-pt .ra-delta { height: 20px; } .ra-pill { display: inline-block; padding: 2px 8px; border-radius: 3px; font-style: normal; font-size: 11.5px; font-weight: 600; } .ra-pill.is-good { color: var(--ra-green); background: color-mix(in srgb, var(--ra-green) 14%, transparent); } .ra-pill.is-mid { color: var(--ra-amber); background: color-mix(in srgb, var(--ra-amber) 14%, transparent); } .ra-pill.is-low { color: var(--ra-red); background: color-mix(in srgb, var(--ra-red) 14%, transparent); } /* KI-Vorschläge */ .ra-ai-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } .ra-ai-sug > span { margin-right: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp) body .ra-page .ra-ai-sug button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ra-violet) 32%, var(--cp-line-2)); background: color-mix(in srgb, var(--ra-violet) 8%, transparent); color: var(--cp-text); font: 500 12px var(--cp-font); cursor: pointer; white-space: nowrap; transition: border-color .2s ease, color .2s ease, transform .2s var(--ra-e), background .2s ease; } html[data-theme]:not(#cp) body .ra-page .ra-ai-sug button:hover { border-color: var(--ra-violet); color: var(--cp-strong); background: color-mix(in srgb, var(--ra-violet) 16%, transparent); transform: translateY(-1px); } /* Responsiv */ @media (max-width: 1200px) { .ra-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ra-hero-main { grid-column: 1 / -1; } } @media (max-width: 767px) { .ra-nav { margin: 0 0 14px; padding: 4px; border-radius: 3px; transition: top var(--cp-dur-l, .3s) var(--cp-e, ease); } html.cp-nav-hidden .ra-nav { top: calc(var(--cp-sat, 0px) + 6px); } /* Topbar gleitet weg → Navigation rückt nach oben */ html body .page-container:has(.ra-page) { overflow-x: clip !important; overflow-y: visible !important; } /* overflow:auto würde „sticky“ aushebeln */ .ra-nav-pill { display: none !important; } html[data-theme]:not(#cp) body .ra-page .ra-nav-in button { height: 32px; padding: 0 12px; font-size: 12.5px; } .ra-sk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ra-sk-hero { height: 180px; } .ra-hero { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ra-hero > div { padding: 16px; border-radius: 3px; } .ra-hero-sub b { font-size: 14px; } .ra-ring { width: 104px; height: 104px; } .ra-ring-c b { font-size: 22px; } .ra-gauge { max-width: 210px; } .ra-wf-r { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .ra-wf-t { grid-column: 1 / -1; grid-row: 2; height: 16px; } .ra-ai-sug { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; } .ra-ai-sug::-webkit-scrollbar { display: none; } .ra-kpi-pv { display: none; } .ra-name small { padding-left: 26px; } } @media print { .ra-nav, .ra-progress, .ra-ai-sug, .ra-go, .ra-card-link, .ra-goal-ed { display: none !important; } } /* v5.38.1 · Jahresziel: Status, Soll/Ist, Fortschritt in Euro, Monatsbedarf */ .ra-goal .ra-ring-v { stroke: var(--gc); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gc) 55%, transparent)); } .ra-ring-m { fill: var(--cp-strong); stroke: var(--cp-surface); stroke-width: 2.5; } .ra-goal-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; } .ra-goal-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .ra-goal-st { padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gc); background: color-mix(in srgb, var(--gc) 15%, transparent); } .ra-goal.t-bad .ra-goal-st { color: var(--ra-red); background: color-mix(in srgb, var(--ra-red) 15%, transparent); } .ra-goal-kpi > b { margin-top: 8px; font-size: 27px; font-weight: 400; line-height: 1.05; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-goal-kpi > small { font-size: 12px; color: var(--cp-muted); } .ra-gt-bar { position: relative; height: 12px; border-radius: 999px; background: var(--cp-hover); } .ra-gt-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; transform-origin: left; } .ra-gt-proj { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gc) 42%, transparent) 0 4px, color-mix(in srgb, var(--gc) 14%, transparent) 4px 8px); animation: ra-grow-x 1.3s var(--ra-e) both .55s; } .ra-gt-ist { background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 70%, #000), var(--gc)); box-shadow: 0 0 14px -3px var(--gc); animation: ra-grow-x 1.1s var(--ra-e) both .25s; } .ra-gt-bar > u { position: absolute; width: 2px; margin-left: -1px; border-radius: 2px; text-decoration: none; } .ra-gt-soll { top: -5px; bottom: -5px; background: var(--cp-strong); box-shadow: 0 0 0 2px var(--cp-surface); animation: ra-fade .6s ease both 1.2s; } .ra-gt-goal { top: -7px; bottom: -7px; background: var(--ra-green); animation: ra-fade .6s ease both 1s; } .ra-gt-goal::before { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ra-green); box-shadow: 0 0 8px var(--ra-green); } .ra-gt-leg { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 12px; font-size: 11px; color: var(--cp-muted); } .ra-gt-leg span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .ra-gt-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } .ra-gt-leg .is-ist { background: var(--gc); } .ra-gt-leg .is-proj { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gc) 55%, transparent) 0 2px, transparent 2px 4px); } .ra-gt-leg .is-soll { width: 2px; height: 12px; background: var(--cp-strong); } .ra-gt-leg .is-goal { width: 2px; height: 12px; background: var(--ra-green); } .ra-gs { display: grid; gap: 2px; } .ra-gs > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--cp-line); animation: ra-rise .45s var(--ra-e) both; } .ra-gs > div:nth-child(2) { animation-delay: 80ms; } .ra-gs > div:nth-child(3) { animation-delay: 160ms; } .ra-gs span { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ra-gs em { font-style: normal; font-size: 12.5px; color: var(--cp-text); } .ra-gs small { font-size: 11.5px; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ra-gs small.is-good, html[data-theme]:not(#cp) body .ra-gs b.is-good { color: var(--ra-green); } .ra-gs small.is-mid { color: var(--ra-amber); } .ra-gs small.is-bad { color: var(--ra-red); } .ra-gs b { flex: none; font-size: 15px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } /* =========================================================================== v5.39.0 · Ausgaben: Formular (expense-tools.js) + Kennzahlen auf der Seite =========================================================================== */ .cp-exf { --x-rust: var(--cp-rust, #e8552a); --x-green: var(--cp-success, #3fb984); --x-violet: #a37fe0; } .cp-exf-hide { display: none !important; } .cp-exf-sec { display: flex; align-items: center; gap: 10px; margin: 22px 0 14px; padding-top: 18px; border-top: 1px solid var(--cp-line); } .cp-exf .container-fluid > .cp-exf-sec:first-of-type { margin-top: 2px; padding-top: 0; border-top: 0; } .cp-exf-sec i { flex: none; width: 22px; height: 22px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; color: var(--x-rust); background: var(--cp-rust-soft); } .cp-exf-sec b { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-strong); } .cp-exf-sec span { margin-left: auto; font-size: 11.5px; color: var(--cp-muted); } /* Netto | Brutto */ .cp-exf-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .cp-exf-f { position: relative; display: flex; flex-direction: column; gap: 5px; margin: 0; font-weight: 400; } .cp-exf-f > span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); } .cp-exf-f > span small { font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .8; } html[data-theme]:not(#cp) body .cp-exf .cp-exf-f input { padding-right: 30px; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; } .cp-exf-f > em { position: absolute; right: 12px; bottom: 11px; font-style: normal; font-size: 14px; color: var(--cp-muted); pointer-events: none; } html[data-theme]:not(#cp) body .cp-exf .cp-exf-f.is-src input { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-exf-f.is-src > span { color: var(--x-rust); } .cp-exf-sumrow { margin-top: -6px; } .cp-exf-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-radius: 3px; background: var(--cp-surface-2); border: 1px dashed var(--cp-line-2); animation: cp-reveal .35s var(--cp-e, ease) both; } .cp-exf-sum[hidden] { display: none; } .cp-exf-sum span { display: flex; flex-direction: column; line-height: 1.2; } .cp-exf-sum em { font-style: normal; font-size: 10.5px; color: var(--cp-muted); } .cp-exf-sum b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-exf-sum > i { font-style: normal; font-size: 14px; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-exf-sum .is-total b { color: var(--x-rust); font-size: 15px; } /* Kostenart */ .cp-exf-kinds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } html[data-theme]:not(#cp) body .cp-exf .cp-exf-kinds button { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-text); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; } html[data-theme]:not(#cp) body .cp-exf .cp-exf-kinds button:hover { border-color: var(--cp-rust-line); transform: translateY(-1px); } html[data-theme]:not(#cp) body .cp-exf .cp-exf-kinds button.is-on { border-color: var(--x-rust); background: color-mix(in srgb, var(--x-rust) 9%, var(--cp-surface-2)); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-exf-kinds button > i { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--cp-muted); background: var(--cp-hover); } .cp-exf-kinds button.is-on > i { color: #fff; background: var(--x-rust); } .cp-exf-kinds button > i svg { width: 17px; height: 17px; margin: 0 !important; } .cp-exf-kinds b { font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-exf-kinds button > span { font-size: 11.5px; color: var(--cp-muted); line-height: 1.3; } .cp-exf-kinds u { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--x-rust); opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); } .cp-exf-kinds button.is-on u { opacity: 1; transform: none; } .cp-exf-kinds u svg { width: 11px; height: 11px; stroke-width: 3; margin: 0 !important; } .cp-exf-fix { margin-top: 14px; padding: 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--x-violet) 5%, var(--cp-surface-2)); animation: cp-reveal .35s var(--cp-e, ease) both; } .cp-exf-fix[hidden] { display: none; } .cp-exf-lab { margin: 0 0 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .cp-exf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; } html[data-theme]:not(#cp) body .cp-exf .cp-exf-chips button { height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-text); font: 500 12.5px var(--cp-font); cursor: pointer; transition: all .2s ease; } html[data-theme]:not(#cp) body .cp-exf .cp-exf-chips button:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-exf .cp-exf-chips button.is-on { border-color: var(--x-rust); background: var(--x-rust); color: #fff; } .cp-exf-cyc { display: inline-flex; align-items: center; gap: 8px; } .cp-exf-cyc[hidden] { display: none; } html[data-theme]:not(#cp) body .cp-exf .cp-exf-cyc input { width: 84px; height: 32px; padding: 0 10px; text-align: right; } .cp-exf-cyc em { font-style: normal; font-size: 12.5px; color: var(--cp-muted); } .cp-exf-eq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cp-exf-eq > span { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 3px; background: var(--cp-surface); border: 1px solid var(--cp-line); } .cp-exf-eq em { font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-exf-eq b { font-size: 15px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-exf-eq small { font-size: 11px; color: var(--cp-muted); } .cp-exf-eq .is-empty { grid-column: 1 / -1; font-size: 12.5px; color: var(--cp-muted); background: transparent; border-style: dashed; } .cp-exf-hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--cp-muted); } /* RISE-Wiederholungsfelder nur bei „Individuell“ zeigen (sonst über die Chips gesteuert) */ .cp-exf:not(.cp-exf-custom) #recurring_fields .form-group:has(#repeat_every), .cp-exf:not(.cp-exf-custom) #recurring_fields .form-group:has(#no_of_cycles) { display: none; } .cp-exf.cp-exf-custom #recurring_fields { padding: 4px 0 0; } /* Zuordnung: Intern | Kunde/Projekt */ .cp-exf-seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); } html[data-theme]:not(#cp) body .cp-exf .cp-exf-seg button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border: 0; border-radius: 3px; background: transparent; color: var(--cp-text); text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; } html[data-theme]:not(#cp) body .cp-exf .cp-exf-seg button:hover { background: var(--cp-hover); } html[data-theme]:not(#cp) body .cp-exf .cp-exf-seg button.is-on { background: var(--x-rust); color: #fff; box-shadow: 0 8px 18px -10px var(--x-rust); } .cp-exf-seg b { font-size: 13.5px; font-weight: 600; } .cp-exf-seg span { font-size: 11px; opacity: .75; } .cp-exf-seg button:not(.is-on) b { color: var(--cp-strong); } .cp-exf-opt { font-size: 10.5px; color: var(--cp-muted); font-weight: 400; } /* Titel-Vorschläge */ .cp-exf-tcol { position: relative; } .cp-exf-sug { position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 30; max-height: 340px; overflow: auto; padding: 6px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-3, #1e2230); box-shadow: 0 24px 48px -20px rgba(0,0,0,.65); animation: cp-reveal .2s var(--cp-e, ease) both; } .cp-exf-sug[hidden] { display: none; } .cp-exf-sug-h { padding: 6px 10px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-exf .cp-exf-sug button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 0; border-radius: 3px; background: transparent; color: var(--cp-text); text-align: left; cursor: pointer; } html[data-theme]:not(#cp) body .cp-exf .cp-exf-sug button:hover, html[data-theme]:not(#cp) body .cp-exf .cp-exf-sug button.is-sel { background: var(--cp-hover); } .cp-exf-sug button > span { display: flex; flex-direction: column; min-width: 0; } .cp-exf-sug b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-exf-sug small { font-size: 11.5px; color: var(--cp-muted); } .cp-exf-sug mark { padding: 0; background: transparent; color: var(--x-rust); } .cp-exf-sug-r { align-items: flex-end; flex: none; } .cp-exf-sug-r i { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 3px; color: var(--x-violet); background: color-mix(in srgb, var(--x-violet) 15%, transparent); } .cp-exf-flash { animation: cp-exf-flash 1.2s ease; border-radius: 3px; } @keyframes cp-exf-flash { 0% { background: color-mix(in srgb, var(--x-rust) 16%, transparent); } 100% { background: transparent; } } @media (max-width: 767px) { .cp-exf-sec span { display: none; } .cp-exf-kinds { grid-template-columns: minmax(0, 1fr); } .cp-exf-eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cp-exf-sug { left: 0; right: 0; } .cp-exf-sumrow .offset-md-3 { margin-left: 0; } } /* Kennzahlen über der Ausgaben-Liste */ .cp-exs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; } .cp-exs-i { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 108px; padding: 14px 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); text-align: left; animation: cp-reveal .5s var(--cp-e, ease) backwards; } .cp-exs-i:nth-child(2) { animation-delay: 50ms; } .cp-exs-i:nth-child(3) { animation-delay: 100ms; } .cp-exs-i:nth-child(4) { animation-delay: 150ms; } .cp-exs-i:nth-child(5) { animation-delay: 200ms; } .cp-exs-i:nth-child(6) { animation-delay: 250ms; } .cp-exs-i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--k, var(--cp-line-2)); } .cp-exs-i.t-rust { --k: var(--cp-rust, #e8552a); } .cp-exs-i.t-blue { --k: #6ca6d9; } .cp-exs-i.t-violet { --k: #a37fe0; } .cp-exs-i.t-amber { --k: #d6a738; } .cp-exs-i.t-muted { --k: var(--cp-muted); } .cp-exs-l { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .cp-exs-l i { width: 24px; height: 24px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: var(--k, var(--cp-muted)); background: color-mix(in srgb, var(--k, var(--cp-muted)) 15%, transparent); } .cp-exs-l svg { width: 13px; height: 13px; margin: 0 !important; } .cp-exs-i > b { font-size: 20px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-exs-i > em { font-style: normal; font-size: 11.5px; color: var(--cp-muted); } .cp-exs-d { position: absolute; top: 12px; right: 12px; padding: 2px 7px; border-radius: 3px; font-size: 11px; font-weight: 700; } .cp-exs-d.is-bad { color: #e5484d; background: color-mix(in srgb, #e5484d 14%, transparent); } .cp-exs-d.is-good { color: #3fb984; background: color-mix(in srgb, #3fb984 14%, transparent); } .cp-exs-d.is-flat { color: var(--cp-muted); background: var(--cp-hover); } html[data-theme]:not(#cp) body button.cp-exs-i { cursor: pointer; font: inherit; color: inherit; transition: transform .25s ease, border-color .25s ease; } html[data-theme]:not(#cp) body button.cp-exs-i:hover { transform: translateY(-2px); border-color: var(--cp-rust-line); } html[data-theme]:not(#cp) body .cp-exs-cta { --k: #a37fe0; background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, #a37fe0 16%, transparent), transparent 60%), var(--cp-surface); } .cp-exs-cta > b { font-size: 15px; font-weight: 600; } .cp-exs-sk { background: linear-gradient(100deg, var(--cp-surface) 30%, color-mix(in srgb, var(--cp-text) 6%, var(--cp-surface)) 50%, var(--cp-surface) 70%); background-size: 250% 100%; animation: ra-shimmer 1.5s linear infinite; } @media (max-width: 1300px) { .cp-exs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .cp-exs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cp-exs-i { min-height: 96px; padding: 12px; } .cp-exs-i > b { font-size: 17px; } } /* =========================================================================== v5.39.0 · Spaltenfilter in allen Listen (column-filters.js) =========================================================================== */ html[data-theme]:not(#cp) body th .cp-cf-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -4px 0 -4px 6px; padding: 0; vertical-align: middle; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; opacity: 0; transition: opacity .2s ease, background .2s ease, color .2s ease; } html[data-theme]:not(#cp) body th:hover .cp-cf-btn, html[data-theme]:not(#cp) body th .cp-cf-btn:focus-visible, html[data-theme]:not(#cp) body th .cp-cf-btn.is-open { opacity: 1; } html[data-theme]:not(#cp) body th .cp-cf-btn:hover, html[data-theme]:not(#cp) body th .cp-cf-btn.is-open { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp) body th.cp-cf-on .cp-cf-btn { opacity: 1; color: var(--cp-rust, #e8552a); background: var(--cp-rust-soft); } html[data-theme]:not(#cp) body th.cp-cf-on { color: var(--cp-strong) !important; } .cp-cf-btn svg { width: 12px; height: 12px; margin: 0 !important; } @media (hover: none) { html[data-theme]:not(#cp) body th .cp-cf-btn { opacity: .55; } } tr.cp-cf-hide { display: none !important; } /* Filterleiste */ .cp-cf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 8px 10px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: color-mix(in srgb, var(--cp-rust, #e8552a) 6%, var(--cp-surface)); animation: cp-reveal .3s var(--cp-e, ease) both; } .cp-cf-bar-ic { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 3px; color: #fff; background: var(--cp-rust, #e8552a); } .cp-cf-bar-ic svg { width: 12px; height: 12px; margin: 0 !important; } html[data-theme]:not(#cp) body .cp-cf-bar .cp-cf-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-text); font: 400 12px var(--cp-font); cursor: pointer; max-width: 360px; } html[data-theme]:not(#cp) body .cp-cf-bar .cp-cf-chip:hover { border-color: var(--cp-rust-line); } .cp-cf-chip b { font-weight: 600; color: var(--cp-strong); white-space: nowrap; } .cp-cf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-muted); } .cp-cf-chip i { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; color: var(--cp-muted); } .cp-cf-chip i:hover { background: var(--cp-hover); color: var(--cp-strong); } .cp-cf-chip i svg { width: 10px; height: 10px; margin: 0 !important; } html[data-theme]:not(#cp) body .cp-cf-bar .cp-cf-reset { height: 28px; padding: 0 10px; border: 0; border-radius: 3px; background: transparent; color: var(--cp-rust, #e8552a); font: 600 12px var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .cp-cf-bar .cp-cf-reset:hover { background: var(--cp-rust-soft); } .cp-cf-cnt { margin-left: auto; font-size: 12px; color: var(--cp-muted); } .cp-cf-cnt b { color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-cf-cnt em { font-style: normal; } /* Menü */ .cp-cf-pop { position: fixed; z-index: 3000; width: 300px; max-width: calc(100vw - 24px); max-height: min(520px, calc(100vh - 24px)); display: flex; flex-direction: column; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-3, #1e2230); color: var(--cp-text); font-family: var(--cp-font); box-shadow: 0 28px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.04); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center; transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1); } .cp-cf-pop.is-in { opacity: 1; transform: none; } .cp-cf-pop.is-out { opacity: 0; transform: translateY(-4px) scale(.98); } html[data-theme="light"] .cp-cf-pop { background: #fff; box-shadow: 0 24px 50px -22px rgba(20,24,40,.35), 0 0 0 1px rgba(20,24,40,.04); } .cp-cf-pop > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--cp-line); } .cp-cf-pop > header b { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-cf-sort { display: flex; gap: 4px; flex: none; } html[data-theme]:not(#cp) body .cp-cf-pop button { font-family: var(--cp-font); } html[data-theme]:not(#cp) body .cp-cf-sort button { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font-size: 11px; font-weight: 600; cursor: pointer; } html[data-theme]:not(#cp) body .cp-cf-sort button:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } .cp-cf-sort svg { width: 12px; height: 12px; margin: 0 !important; } .cp-cf-sec { padding: 10px 14px 0; display: flex; flex-direction: column; min-height: 0; } .cp-cf-sec:last-of-type { flex: 1; } .cp-cf-lab { margin-bottom: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .cp-cf-quick { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } html[data-theme]:not(#cp) body .cp-cf-quick button { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-text); font-size: 11.5px; cursor: pointer; } html[data-theme]:not(#cp) body .cp-cf-quick button:hover { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp) body .cp-cf-quick button.is-on { background: var(--cp-rust, #e8552a); border-color: var(--cp-rust, #e8552a); color: #fff; } .cp-cf-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cp-cf-range label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 11px; color: var(--cp-muted); font-weight: 500; } html[data-theme]:not(#cp) body .cp-cf-pop input[type=date], html[data-theme]:not(#cp) body .cp-cf-pop input[type=number], html[data-theme]:not(#cp) body .cp-cf-pop input[type=search] { width: 100%; height: 34px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-strong); font: 400 13px var(--cp-font); outline: none; box-shadow: none; } html[data-theme]:not(#cp) body .cp-cf-pop input:focus { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme="dark"] .cp-cf-pop input[type=date] { color-scheme: dark; } .cp-cf-list { display: flex; flex-direction: column; min-height: 0; margin: 8px -6px 0; } .cp-cf-items { overflow: auto; max-height: 240px; overscroll-behavior: contain; } .cp-cf-list label { display: flex; align-items: center; gap: 9px; margin: 0; padding: 6px 8px; border-radius: 3px; font-size: 13px; font-weight: 400; color: var(--cp-text); cursor: pointer; } .cp-cf-list label:hover { background: var(--cp-hover); } .cp-cf-list label.is-all { font-weight: 600; color: var(--cp-strong); border-bottom: 1px solid var(--cp-line); border-radius: 3px 3px 0 0; margin-bottom: 2px; } .cp-cf-list label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-cf-list label span i { color: var(--cp-muted); } .cp-cf-list label em { flex: none; font-style: normal; font-size: 11px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-cf-list input[type=checkbox] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--cp-rust, #e8552a); } .cp-cf-none { margin: 10px 0 0; font-size: 12.5px; color: var(--cp-muted); } .cp-cf-pop > footer { display: flex; align-items: center; gap: 8px; padding: 10px 14px 12px; margin-top: 10px; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp) body .cp-cf-pop > footer button { height: 32px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-text); font-size: 12.5px; font-weight: 600; cursor: pointer; } html[data-theme]:not(#cp) body .cp-cf-pop > footer button.is-primary { background: var(--cp-rust, #e8552a); border-color: var(--cp-rust, #e8552a); color: #fff; } .cp-cf-hits { margin-left: auto; font-size: 12px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } /* Werkzeugleiste: „Spalten filtern“ + Spaltenliste */ html[data-theme]:not(#cp) body .cp-cf-tool { display: inline-flex; align-items: center; gap: 7px; } .cp-cf-tool svg { width: 14px; height: 14px; margin: 0 !important; } html[data-theme]:not(#cp) body .cp-cf-tool.is-on { border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; } .cp-cf-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--cp-rust, #e8552a); } .cp-cf-n[hidden] { display: none; } .cp-cf-menu { width: 280px; } .cp-cf-mlist { overflow: auto; padding: 6px; } html[data-theme]:not(#cp) body .cp-cf-mlist button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 0; border-radius: 3px; background: transparent; color: var(--cp-text); font: 500 13px var(--cp-font); text-align: left; cursor: pointer; } html[data-theme]:not(#cp) body .cp-cf-mlist button:hover { background: var(--cp-hover); color: var(--cp-strong); } .cp-cf-mlist button i { font-style: normal; color: var(--cp-muted); font-size: 16px; } .cp-cf-mlist button em { font-style: normal; font-size: 11px; color: var(--cp-rust, #e8552a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; } html[data-theme]:not(#cp) body .cp-cf-mlist button.is-on span { color: var(--cp-strong); font-weight: 600; } @media (max-width: 640px) { .cp-cf-tool span { display: none; } } /* Handy: Menü als Blatt von unten */ .cp-cf-pop.is-sheet { left: 8px !important; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); top: auto !important; width: auto; max-width: none; max-height: 78vh; border-radius: 3px; transform: translateY(30px); transform-origin: bottom center; } .cp-cf-pop.is-sheet.is-in { transform: none; } .cp-cf-pop.is-sheet .cp-cf-items { max-height: 42vh; } .cp-cf-pop.is-sheet input { font-size: 16px !important; } @media print { .cp-cf-btn, .cp-cf-bar { display: none !important; } } /* =========================================================================== v5.40.0 · Einführungstour im Kundenportal (client-tour.js) =========================================================================== */ .cp-ctour .cp-tour-dim { position: fixed; inset: 0; background: transparent; } .cp-ctour .cp-tour-card { z-index: 2; width: 380px; padding: 18px 20px 16px; border-radius: 3px; background: var(--cp-surface-2); } html[data-theme="light"] .cp-ctour .cp-tour-card { background: #fff; } .cp-ctour .cp-tour-card.is-wide { width: 460px; padding: 26px 26px 20px; } .cp-ctour.is-center .cp-tour-card:not(.is-sheet) { left: 50% !important; top: 50% !important; translate: -50% -50%; } .cp-ct-top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .cp-ct-ic { width: 40px; height: 40px; flex: none; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--cp-rust-hi, #f06a3c), var(--cp-rust, #c8431b)); box-shadow: 0 10px 22px -12px var(--cp-rust, #e8552a); } .cp-ct-ic svg { width: 20px; height: 20px; margin: 0 !important; } .cp-tour-card.is-wide .cp-ct-ic { width: 52px; height: 52px; border-radius: 3px; } .cp-tour-card.is-wide .cp-ct-ic svg { width: 26px; height: 26px; } .cp-tour-card.is-in .cp-ct-ic { animation: cp-ct-pop .5s cubic-bezier(.3, 1.6, .5, 1) both .1s; } @keyframes cp-ct-pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } } .cp-ctour .cp-tour-kicker em { font-style: normal; } html[data-theme]:not(#cp) body .cp-ctour .cp-tour-card h3 { margin: 12px 0 6px !important; font: 500 19px/1.25 var(--cp-font) !important; } html[data-theme]:not(#cp) body .cp-ctour .cp-tour-card.is-wide h3 { font-size: 24px !important; font-weight: 400 !important; letter-spacing: -.015em; } .cp-ctour .cp-tour-card p { font-size: 13.5px; line-height: 1.6; color: var(--cp-text); } .cp-ctour .cp-tour-card.is-wide p { font-size: 14.5px; } html[data-theme]:not(#cp) body .cp-ctour .cp-ct-btn { height: 38px; padding: 0 16px; border-radius: 3px; border: 1px solid var(--cp-rust, #e8552a); background: var(--cp-rust, #e8552a); color: #fff; font: 600 13px var(--cp-font); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; } html[data-theme]:not(#cp) body .cp-ctour .cp-ct-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px var(--cp-rust, #e8552a); } html[data-theme]:not(#cp) body .cp-ctour .cp-ct-btn.is-ghost { background: transparent; border-color: var(--cp-line-2); color: var(--cp-text); } html[data-theme]:not(#cp) body .cp-ctour .cp-ct-btn.is-ghost:hover { border-color: var(--cp-rust-line); box-shadow: none; } html[data-theme]:not(#cp) body .cp-ctour .cp-tour-acts [data-t="skip"] { color: var(--cp-muted); } .cp-ct-end { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; } .cp-ct-end[hidden] { display: none; } html[data-theme]:not(#cp) body .cp-ct-end button { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-strong); font: 600 13px var(--cp-font); text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease; } html[data-theme]:not(#cp) body .cp-ct-end button:hover { border-color: var(--cp-rust-line); transform: translateY(-1px); } .cp-ct-end button svg { width: 18px; height: 18px; flex: none; color: var(--cp-rust, #e8552a); margin: 0 !important; } .cp-ct-end small { grid-column: 1 / -1; font-size: 12px; color: var(--cp-muted); } /* Handy: Karte als Blatt von unten */ .cp-ctour .cp-tour-card.is-sheet { left: 10px !important; right: 10px; top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto !important; max-width: none; padding: 18px 18px 14px; border-radius: 3px; } .cp-ctour .cp-tour-card.is-sheet .cp-tour-acts { flex-wrap: wrap; } .cp-ctour .cp-tour-card.is-sheet .cp-ct-end { grid-template-columns: 1fr; } /* Hilfe-Panel: Tour erneut starten */ html[data-theme]:not(#cp) body .cp-ct-replay { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 3px; border: 1px dashed var(--cp-line-2); background: transparent; color: var(--cp-text); text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp) body .cp-ct-replay:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-ct-ric { width: 34px; height: 34px; flex: none; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: var(--cp-rust, #e8552a); background: var(--cp-rust-soft); } .cp-ct-ric svg { width: 17px; height: 17px; margin: 0 !important; } .cp-ct-replay b { display: block; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } .cp-ct-replay small { font-size: 12px; color: var(--cp-muted); } @media (prefers-reduced-motion: reduce) { .cp-tour-card.is-in .cp-ct-ic { animation: none; } } /* v5.40.0 · Auswertung: Diagramme reagieren auf die Maus (RISE setzt svg { pointer-events: none }) */ .ra-page .ra-chart svg:not(#cp), .ra-page .ra-donut svg:not(#cp), .ra-page .ra-kpi .ra-spark:not(#cp) { pointer-events: auto; } .ra-page .ra-chart { cursor: crosshair; } .ra-page .ra-kpi .ra-spark { cursor: crosshair; } .ra-tip footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cp-line); color: var(--cp-muted); } .ra-tip footer + footer { margin-top: 2px; padding-top: 0; border-top: 0; } .ra-tip footer em { font-style: normal; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .ra-tip footer em.is-good { color: var(--ra-green); } .ra-tip footer em.is-bad { color: var(--ra-red); } .ra-tip i.is-soft { opacity: .45; } .ra-tip b small { margin-left: 2px; } .ra-y-hc { fill: var(--cp-surface); stroke: var(--ra-rust); stroke-width: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ra-rust) 60%, transparent)); } .ra-y-hc.is-proj { stroke-dasharray: 3 2; } .ra-y-hp { fill: var(--cp-surface); stroke: color-mix(in srgb, var(--cp-text) 55%, transparent); stroke-width: 2.5; } .ra-chart svg.is-hover .ra-y-pulse { opacity: .3; } /* schwebende Info */ .ra-ftip { position: fixed; z-index: 3000; max-width: 300px; padding: 9px 12px; border-radius: 3px; pointer-events: none; font: 12px/1.45 var(--cp-font); color: var(--cp-text); background: color-mix(in srgb, var(--cp-surface-3, #1e2230) 95%, transparent); border: 1px solid var(--cp-line-2); box-shadow: 0 16px 36px -16px rgba(0,0,0,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ra-ftip[hidden] { display: none; } html[data-theme="light"] .ra-ftip { background: rgba(255,255,255,.97); box-shadow: 0 14px 30px -14px rgba(20,24,40,.3); } .ra-ftip b { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--cp-strong); } .ra-ftip div { color: var(--cp-muted); font-variant-numeric: tabular-nums; } .ra-ftip div:first-of-type { color: var(--cp-text); font-weight: 500; } /* Punkt auf der Sparkline */ .ra-spark-dot { position: absolute; z-index: 2; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--k, var(--ra-rust)); box-shadow: 0 0 0 3px var(--cp-surface), 0 0 12px var(--k, var(--ra-rust)); opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .2s ease, left .08s linear, top .08s linear; pointer-events: none; } .ra-spark-dot.is-on { opacity: 1; transform: none; } /* Hover-Rückmeldung an Balken, Segmenten, Brücke */ .ra-wf-r[data-tip] { border-radius: 3px; transition: background .15s ease; } .ra-wf-r[data-tip]:hover { background: var(--cp-hover); } .ra-wf-r:hover .ra-wf-t i, .ra-stack i:hover, .ra-bar:hover .ra-bar-t i, .ra-gt-bar > i:hover { filter: brightness(1.18) saturate(1.1); } .ra-stack i { transition: filter .15s ease; } .ra-gt-bar > u::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: -7px; right: -7px; } .ra-score-f > div[data-tip] { border-radius: 3px; transition: background .15s ease; margin: 0 -6px; padding: 2px 6px; } .ra-score-f > div[data-tip]:hover { background: var(--cp-hover); } .ra-ring[data-tip], .ra-gauge[data-tip] { cursor: default; } /* =========================================================================== v5.41.0 · Qualität & Tests (qa-check.js) =========================================================================== */ .qa-page { --qa-ok: var(--cp-success, #3fb984); --qa-warn: #d6a738; --qa-bad: #e5484d; padding: 26px 28px 60px; max-width: 1560px; margin: 0 auto; color: var(--cp-text); } .qa-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .qa-kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-muted); } .qa-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust, #e8552a); box-shadow: 0 0 10px var(--cp-rust, #e8552a); } html[data-theme]:not(#cp):not(#cq) body .qa-page h1 { margin: 6px 0 4px !important; font-size: clamp(26px, 3vw, 38px) !important; font-weight: 300 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--cp-strong) !important; } .qa-sub, .qa-muted { margin: 0; font-size: 13px; color: var(--cp-muted); } .qa-muted { font-size: 12.5px; line-height: 1.55; } .qa-sum { display: flex; flex-wrap: wrap; gap: 6px; } .qa-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); font-size: 12px; color: var(--cp-muted); } .qa-pill b { color: var(--cp-strong); font-variant-numeric: tabular-nums; } .qa-pill.is-ok { border-color: color-mix(in srgb, var(--qa-ok) 40%, transparent); } .qa-pill.is-warn { border-color: color-mix(in srgb, var(--qa-warn) 45%, transparent); } .qa-pill.is-bad { border-color: color-mix(in srgb, var(--qa-bad) 50%, transparent); } .qa-card { margin-bottom: 16px; padding: 16px 18px 18px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); min-width: 0; } .qa-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } html[data-theme]:not(#cp) body .qa-page .qa-card h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-strong); } .qa-card h2 svg { width: 17px; height: 17px; color: var(--cp-rust, #e8552a); margin: 0 !important; } .qa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .qa-grid > .qa-card { margin-bottom: 0; } .qa-grid { margin-bottom: 16px; } .qa-acts { display: flex; gap: 8px; flex-wrap: wrap; } html[data-theme]:not(#cp) body .qa-page .qa-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-strong) !important; font: 600 12.5px var(--cp-font); cursor: pointer; text-decoration: none !important; } html[data-theme]:not(#cp) body .qa-page .qa-btn:hover { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp) body .qa-page .qa-btn.is-primary { background: var(--cp-rust, #e8552a); border-color: var(--cp-rust, #e8552a); color: #fff !important; } html[data-theme]:not(#cp) body .qa-page .qa-btn.is-danger { border-color: color-mix(in srgb, var(--qa-bad) 50%, transparent); color: var(--qa-bad) !important; background: transparent; } html[data-theme]:not(#cp) body .qa-page .qa-btn[disabled] { opacity: .5; cursor: default; } .qa-btn svg { width: 15px; height: 15px; margin: 0 !important; } html[data-theme]:not(#cp) body .qa-page .qa-link { border: 0; background: none; padding: 4px 6px; color: var(--cp-rust, #e8552a); font: 600 12px var(--cp-font); cursor: pointer; } .qa-vps, .qa-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; } .qa-pages { padding: 10px; border-radius: 3px; border: 1px dashed var(--cp-line-2); } .qa-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); font-size: 12.5px; font-weight: 500; color: var(--cp-text); cursor: pointer; } .qa-chip em { font-style: normal; color: var(--cp-muted); font-size: 11px; } .qa-chip input { margin: 0; accent-color: var(--cp-rust, #e8552a); } .qa-prog { position: relative; height: 26px; margin-bottom: 12px; border-radius: 3px; background: var(--cp-hover); overflow: hidden; } .qa-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--cp-rust, #e8552a) 35%, transparent), color-mix(in srgb, var(--cp-rust, #e8552a) 60%, transparent)); transition: width .4s ease; } .qa-prog span { position: relative; display: block; padding: 0 10px; line-height: 26px; font-size: 12px; color: var(--cp-strong); } .qa-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; } .qa-matrix { overflow-x: auto; } .qa-page table.qa-mx { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; } .qa-page .qa-mx th, .qa-page .qa-mx td { padding: 5px 6px; border-bottom: 1px solid var(--cp-line); text-align: center; background: transparent; color: var(--cp-text); white-space: nowrap; } .qa-page .qa-mx thead th { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .qa-mx thead th small { display: block; font-size: 10px; letter-spacing: 0; opacity: .8; } .qa-page .qa-mx tbody th { text-align: left; font-weight: 500; color: var(--cp-strong); } .qa-mx tbody th a { display: inline-flex; margin-left: 6px; color: var(--cp-muted); vertical-align: -2px; } .qa-mx tbody th a svg { width: 13px; height: 13px; margin: 0 !important; } html[data-theme]:not(#cp) body .qa-page .qa-cell { width: 44px; height: 28px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-muted); font: 700 12px var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .qa-page .qa-cell.is-ok { color: var(--qa-ok); border-color: color-mix(in srgb, var(--qa-ok) 40%, transparent); background: color-mix(in srgb, var(--qa-ok) 10%, transparent); } html[data-theme]:not(#cp) body .qa-page .qa-cell.is-warn { color: var(--qa-warn); border-color: color-mix(in srgb, var(--qa-warn) 45%, transparent); background: color-mix(in srgb, var(--qa-warn) 12%, transparent); } html[data-theme]:not(#cp) body .qa-page .qa-cell.is-bad { color: #fff; border-color: var(--qa-bad); background: var(--qa-bad); } html[data-theme]:not(#cp) body .qa-page .qa-cell.is-sel { box-shadow: 0 0 0 3px var(--cp-rust-soft); border-color: var(--cp-rust, #e8552a); } .qa-live { position: sticky; top: 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); overflow: hidden; } .qa-live-h { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 11.5px; color: var(--cp-muted); border-bottom: 1px solid var(--cp-line); } .qa-live-h b { color: var(--cp-strong); font-weight: 600; } .qa-live-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qa-frame { position: relative; height: 420px; overflow: hidden; background: var(--cp-bg, #0b0d12); } .qa-frame iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; background: #fff; pointer-events: none; } .qa-detail { margin-top: 14px; padding: 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); } .qa-detail > header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .qa-detail > header b { color: var(--cp-strong); } .qa-detail > header .qa-link { margin-left: auto; } html[data-theme]:not(#cp) body .qa-detail h4 { margin: 12px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); } .qa-detail h4 em { font-style: normal; color: var(--cp-strong); } .qa-detail ul, .qa-errl, .qa-apil, .qa-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .qa-detail li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; } .qa-detail code { font-size: 11.5px; color: var(--cp-text); background: var(--cp-hover); padding: 1px 6px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .qa-detail li span { flex: none; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .qa-ok { color: var(--qa-ok); font-size: 13px; margin: 4px 0; } .qa-bad { color: var(--qa-bad); font-size: 13px; margin: 4px 0; } .qa-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; } .qa-badge.is-ok { color: var(--qa-ok); background: color-mix(in srgb, var(--qa-ok) 14%, transparent); } .qa-badge.is-warn { color: var(--qa-warn); background: color-mix(in srgb, var(--qa-warn) 16%, transparent); } .qa-badge.is-bad { color: var(--qa-bad); background: color-mix(in srgb, var(--qa-bad) 15%, transparent); } .qa-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .qa-counts span { display: inline-flex; gap: 5px; padding: 5px 10px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); font-size: 12px; color: var(--cp-muted); } .qa-counts b { color: var(--cp-strong); } .qa-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .qa-plan { margin: 10px 0 14px; } .qa-plan li { position: relative; padding-left: 16px; font-size: 12.5px; color: var(--cp-text); } .qa-plan li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust, #e8552a); } .qa-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-strong); font-size: 12.5px; } .qa-apil li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); font-size: 12.5px; } .qa-apil li span { display: flex; flex-direction: column; } .qa-apil small { font-size: 11px; color: var(--cp-muted); font-family: ui-monospace, monospace; } .qa-apil li em { font-style: normal; font-size: 12px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .qa-apil li.is-ok { border-color: color-mix(in srgb, var(--qa-ok) 35%, transparent); } .qa-apil li.is-ok em { color: var(--qa-ok); } .qa-apil li.is-warn { border-color: color-mix(in srgb, var(--qa-warn) 40%, transparent); } .qa-apil li.is-warn em { color: var(--qa-warn); } .qa-apil li.is-bad { border-color: color-mix(in srgb, var(--qa-bad) 45%, transparent); } .qa-apil li.is-bad em { color: var(--qa-bad); } .qa-errl li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 10px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); } .qa-errl b { display: block; font-size: 12.5px; font-weight: 500; color: var(--cp-strong); word-break: break-word; } .qa-errl small { font-size: 11.5px; color: var(--cp-muted); word-break: break-all; } .qa-errl em { font-style: normal; font-size: 11.5px; color: var(--cp-muted); white-space: nowrap; } /* v5.50.9 · Fehlerprotokoll: Kopieren, ältere Dateiversionen */ .qa-errr { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } html[data-theme]:not(#cp) body .qa-page .qa-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s; } html[data-theme]:not(#cp) body .qa-page .qa-icon:hover, html[data-theme]:not(#cp) body .qa-page .qa-icon:focus-visible { color: var(--cp-strong); border-color: var(--cp-rust-line, var(--cp-line-2)); background: var(--cp-surface-2); } html[data-theme]:not(#cp) body .qa-page .qa-icon svg { width: 15px; height: 15px; } html[data-theme]:not(#cp) body .qa-page .qa-btn svg { width: 15px; height: 15px; flex: none; } html[data-theme]:not(#cp) body .qa-page .qa-btn.is-done { border-color: var(--qa-ok); color: var(--qa-ok) !important; } .qa-errl li.is-old { opacity: .7; } .qa-errl li.is-old b { font-weight: 400; } .qa-errl .qa-old { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--qa-ok); word-break: normal; } .qa-errl .qa-old svg { width: 13px; height: 13px; flex: none; } @media (max-width: 767px) { .qa-errr { flex-direction: row; align-items: center; justify-content: space-between; } } /* v5.50.8 · Sicherheits-Testlauf */ .qa-secm { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 12px; } .qa-secm article { padding: 14px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); display: grid; gap: 8px; align-content: start; } .qa-secm header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .qa-secm header b { font-size: 13.5px; color: var(--cp-strong); } .qa-secm p { margin: 0; font-size: 12.5px; } .qa-seg { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp) body .qa-page .qa-seg .qa-btn[aria-pressed="true"] { opacity: 1; cursor: default; } @media (max-width: 1100px) { .qa-layout, .qa-grid { grid-template-columns: minmax(0, 1fr); } .qa-live { position: static; } } @media (max-width: 767px) { .qa-page { padding: 16px 12px 90px; } .qa-errl li { grid-template-columns: minmax(0, 1fr); } } /* v5.41.0 · Touch (Handy, iPad): Tippflächen mindestens 34–36 px – gefunden mit „Qualität & Tests“ */ @media (pointer: coarse), (max-width: 1024px) { html[data-theme]:not(#cp) body .rst-ai-topbar-toggle { min-height: 36px; } html[data-theme]:not(#cp) body .cp-dash-views button, html[data-theme]:not(#cp) body .cp-dash-edit { min-height: 34px; } html[data-theme]:not(#cp) body .ra-page .ra-leg { height: 34px; } html[data-theme]:not(#cp) body .ra-page .ra-card-link { min-height: 34px; } html[data-theme]:not(#cp) body .rst-cal2-btn-ghost { min-height: 36px; min-width: 36px; } html[data-theme]:not(#cp) body .cp-portal-card > header a { display: inline-flex; align-items: center; min-height: 36px; } html[data-theme]:not(#cp) body th .cp-cf-btn { width: 30px; height: 30px; margin-top: -8px; margin-bottom: -8px; } html[data-theme]:not(#cp) body .cp-dash-views button { font-size: 12px; } } @media (max-width: 430px) { html[data-theme]:not(#cp) body .rst-ai-disclaimer { font-size: 11.5px; } } /* v5.41.0 · Online in ALLEN Chat-Listen einheitlich (auch Tab „Kunden“, Handy-Vollbild): grüner Ring statt Punkt + Etikett */ html[data-theme]:not(#cp):not(#cq) body .message-row .avatar .online { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .message-row:has(.avatar .online) .avatar { border-radius: 50% !important; box-shadow: 0 0 0 2px var(--cp-surface), 0 0 0 4px var(--cp-success), 0 0 14px -2px color-mix(in srgb, var(--cp-success) 60%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .message-row .cp-online-tag { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } /* =========================================================================== v5.41.0 · Kundengesundheit (client-health.js) =========================================================================== */ /* v5.42.0 · Brand-Design: Fläche, Ring und Balken in Rost (Marke), Status nur als Signalpunkt */ .cp-hc, .cp-hl { --hc: var(--cp-rust-hi); position: relative; overflow: hidden; margin: 0 0 16px; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--cp-rust-hi) 14%, transparent), transparent 50%), radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--cp-glow) 5%, transparent), transparent 60%), var(--cp-surface); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -26px rgba(0,0,0,.7); animation: cp-reveal .45s var(--cp-e, ease) both; } .cp-hc::before, .cp-hl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--cp-rust-line) 22%, color-mix(in srgb, var(--cp-glow) 45%, transparent) 50%, var(--cp-rust-line) 78%, transparent); } html[data-theme="light"] .cp-hc, html[data-theme="light"] .cp-hl { box-shadow: 0 1px 2px rgba(20,24,40,.05), 0 10px 28px -22px rgba(20,24,40,.25); } .cp-hc.t-good, :is(.cp-hc, .cp-hl) .t-good { --hc: var(--cp-success); } .cp-hc.t-ok, :is(.cp-hc, .cp-hl) .t-ok { --hc: var(--cp-rust-hi); } .cp-hc.t-mid, :is(.cp-hc, .cp-hl) .t-mid { --hc: #E0A43A; } .cp-hc.t-bad, :is(.cp-hc, .cp-hl) .t-bad { --hc: #E5484D; } .cp-hc-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc) 18%, transparent), 0 0 12px color-mix(in srgb, var(--hc) 65%, transparent); } .cp-hc { display: grid; grid-template-columns: minmax(240px, .95fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: stretch; padding: 0; } .cp-hc > * { min-width: 0; padding: 20px 22px; } .cp-hc > * + * { border-left: 1px solid var(--cp-line); } .cp-hc.is-loading { display: block; padding: 16px 18px; } .cp-hc-sk { height: 96px; border-radius: 3px; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--cp-text) 6%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: ra-shimmer 1.5s linear infinite; } .cp-hc-main { display: flex; align-items: center; gap: 18px; } .cp-hc-ring, .cp-hl-r { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; } .cp-hc-ring svg, .cp-hl-r svg { display: block; margin: 0 !important; overflow: visible; } .cp-hc-rt { fill: none; stroke: var(--cp-line-2); stroke-width: 1.3; stroke-dasharray: .3 1.7; } .cp-hc-rb { fill: none; stroke: color-mix(in srgb, var(--cp-text) 8%, transparent); stroke-width: 6; } .cp-hc-rv { fill: none; stroke-width: 6; stroke-linecap: round; animation: ra-gauge 1.4s cubic-bezier(.2,.75,.2,1) both .15s; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cp-rust-hi) 55%, transparent)); } .cp-hc-s1 { stop-color: #F47A4C; } .cp-hc-s2 { stop-color: var(--cp-rust); } .cp-hc-ring > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .cp-hc-ring b { font-size: 27px; font-weight: 600; letter-spacing: -.02em; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-hc-ring small { margin-top: 4px; font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } .cp-hc-t { min-width: 0; } .cp-hc-k { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-muted); } .cp-hc-k svg { width: 14px; height: 14px; color: var(--cp-rust-hi); margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-hc h3 { display: flex; align-items: center; gap: 10px; margin: 8px 0 5px !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.15 !important; letter-spacing: -.015em !important; color: var(--cp-strong) !important; text-transform: none !important; } .cp-hc-t p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--cp-muted); } .cp-hc-t p .is-bad { color: #E5484D; font-weight: 600; } .cp-hc-f { display: grid; gap: 10px; align-content: center; } .cp-hc-f > div { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr) 46px; gap: 16px; align-items: center; animation: cp-reveal .4s var(--cp-e, ease) both; animation-delay: calc(var(--i) * 60ms + 150ms); } .cp-hc-f span { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--cp-strong); line-height: 1.3; } .cp-hc-f small { font-size: 11px; font-weight: 400; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-hc-f .is-weak span small { color: var(--cp-rust-hi); } .cp-hc-f i { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .cp-hc-f i b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cp-rust), #F47A4C); box-shadow: 0 0 10px -1px color-mix(in srgb, var(--cp-rust-hi) 60%, transparent); transform-origin: left; animation: ra-grow-x .9s cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(var(--i) * 70ms + 300ms); } .cp-hc-f em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); text-align: right; font-variant-numeric: tabular-nums; } .cp-hc-f em small { display: inline; font-size: 11px; font-weight: 500; color: var(--cp-muted); } .cp-hc-next { display: flex; flex-direction: column; justify-content: center; } html[data-theme]:not(#cp):not(#cq) body .cp-hc-next h4 { margin: 0 0 10px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--cp-muted) !important; } .cp-hc-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .cp-hc-next li { position: relative; padding: 9px 12px 9px 30px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); border: 1px solid var(--cp-line); font-size: 12.5px; line-height: 1.45; color: var(--cp-text); } .cp-hc-next li::before { content: ""; position: absolute; left: 12px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--hc); box-shadow: 0 0 8px color-mix(in srgb, var(--hc) 70%, transparent); } /* Kundenliste */ .cp-hl > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .cp-hl-counts { display: flex; gap: 6px; flex-wrap: wrap; } .cp-hl-counts span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); font-size: 12px; color: var(--cp-muted); } .cp-hl-counts span[class^="t-"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hc); box-shadow: 0 0 8px color-mix(in srgb, var(--hc) 70%, transparent); } .cp-hl-counts b { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .cp-hl-counts .is-avg { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-text); } .cp-hl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; } html[data-theme]:not(#cp) body .cp-hl-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 3%, transparent); color: var(--cp-text) !important; text-decoration: none !important; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; animation: cp-reveal .4s var(--cp-e, ease) backwards; animation-delay: calc(var(--i) * 50ms); } html[data-theme]:not(#cp) body .cp-hl-i:hover { transform: translateY(-2px); border-color: var(--cp-rust-line); box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--cp-rust-hi) 70%, transparent); } .cp-hl-r b { position: absolute; font-size: 12.5px; font-weight: 700; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-hl-r .cp-hc-rb, .cp-hl-r .cp-hc-rv { stroke-width: 5; } .cp-hl-t { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; } .cp-hl-t b { font-size: 13px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-hl-t small { font-size: 11.5px; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-hl-t small .cp-hc-dot { width: 6px; height: 6px; margin: 0 7px 1px 2px; vertical-align: middle; box-shadow: 0 0 8px color-mix(in srgb, var(--hc) 65%, transparent); } .cp-hl-i > svg { width: 15px; height: 15px; flex: none; color: var(--cp-muted); margin: 0 !important; transition: transform .2s ease, color .2s ease; } html[data-theme]:not(#cp) body .cp-hl-i:hover > svg { color: var(--cp-rust-hi); transform: translateX(2px); } @media (max-width: 1180px) { .cp-hc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } .cp-hc > .cp-hc-next { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--cp-line); } } @media (max-width: 700px) { .cp-hc { grid-template-columns: minmax(0, 1fr); border-radius: 3px; } .cp-hc > * { padding: 16px; } .cp-hc > * + * { border-left: 0; border-top: 1px solid var(--cp-line); } .cp-hc-f > div { grid-template-columns: minmax(0, 1fr) 70px 42px; gap: 10px; } .cp-hl { padding: 14px; border-radius: 3px; } .cp-hl-list { grid-template-columns: minmax(0, 1fr); } } /* v5.41.0 · Kundenportal Handy: Hilfe-/Chat-Knopf gleitet beim Runterscrollen weg (verdeckte sonst Kacheln) und kommt beim Hochscrollen zurück */ @media (max-width: 767px) { html[data-theme]:not(#cp) body .cp-fab-dock { transition: transform .35s cubic-bezier(.2,.75,.2,1), opacity .25s ease; } html.cp-nav-hidden[data-theme]:not(#cp) body .cp-fab-dock { transform: translateY(28px) scale(.85); opacity: 0; pointer-events: none; } } /* =========================================================================== v5.42.0 · Ticket-Ansicht (ticket-tools.js): Kopf, Status-Chips, Verlauf als Karten (Kunde / Team / Notiz), Antwortfeld als eine Karte, Reaktionszeit =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-top-bar h1[data-cp-tk] { display: flex !important; align-items: center; gap: 14px; margin: 0 !important; font-size: 14px !important; letter-spacing: 0 !important; line-height: 1.2 !important; text-transform: none !important; white-space: normal !important; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-top-bar h1[data-cp-tk] > span:first-child { flex: none; width: 44px; height: 44px; margin: 0 !important; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-rust-soft); border: 1px solid var(--cp-rust-line); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-top-bar h1[data-cp-tk] > span:first-child svg { width: 20px; height: 20px; margin: 0 !important; } .cp-tk-head { display: flex; flex-direction: column; gap: 5px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-tk-id { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-tk-title { font-size: 22px; font-weight: 500; letter-spacing: -.012em; line-height: 1.25; color: var(--cp-strong); overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-top-bar .page-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-top-bar .title-button-group { flex: none; margin: 0 !important; } /* Status-Zeile */ html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > * { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section .badge.rounded-pill:not(.bg-transparent), html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section .cp-tk-act, html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > .ticket-assigned-to, html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > a.ml5 { display: inline-flex !important; align-items: center; gap: 7px; height: 30px; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--cp-line-2) !important; background: color-mix(in srgb, var(--cp-text) 3%, transparent) !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cp-text) !important; text-decoration: none !important; box-shadow: none !important; transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > a:hover, html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > a:hover .badge { border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > a:has(> .badge) { padding: 0 !important; border: 0 !important; background: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section .badge.rounded-pill:not(.bg-transparent) { --st: var(--cp-rust-hi); font-weight: 600 !important; color: var(--st) !important; border-color: color-mix(in srgb, var(--st) 40%, transparent) !important; background: color-mix(in srgb, var(--st) 11%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section .badge.rounded-pill.bg-warning { --st: #E0A43A; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section .badge.rounded-pill.bg-success { --st: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section .badge.rounded-pill:not(.bg-transparent)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st); box-shadow: 0 0 8px color-mix(in srgb, var(--st) 70%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > a.ml5:has(> .text-off) { border-style: dashed !important; background: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > a.ml5 .text-off { margin: 0 !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > a.ml5 .text-off::before { content: "+"; margin-right: 6px; color: var(--cp-rust-hi); font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > .ticket-assigned-to { padding-left: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > .ticket-assigned-to .avatar { width: 24px !important; height: 24px !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section .cp-tk-act { color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section .cp-tk-act::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat; } /* Wartezeit-Chip (Kopf + Ticketliste) */ .cp-tk-chip { --st: var(--cp-success); display: inline-flex; align-items: center; gap: 5px; height: 22px; margin-left: 8px; padding: 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--st) 38%, transparent); background: color-mix(in srgb, var(--st) 10%, transparent); color: var(--st); font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle; } .cp-tk-chip svg { width: 12px; height: 12px; margin: 0 !important; } .cp-tk-chip.s-warn { --st: #E0A43A; } .cp-tk-chip.s-breach { --st: #E5484D; } .cp-tk-chip.s-client { --st: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-status-section > .cp-tk-chip { height: 30px; padding: 0 12px; font-size: 12.5px; } /* Hauptspalte: Antwortfeld + Verlauf */ html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comments-section { padding: 0 !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; overflow: hidden; background: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #comment-form-container { padding: 18px 18px 18px 14px; border-bottom: 1px solid var(--cp-line); background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--cp-rust-hi) 8%, transparent), transparent 55%); } html[data-theme]:not(#cp):not(#cq) body .cp-tk #comment-form-container > form > .p15 { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comment-dropzone { margin: 0 !important; border: 1px solid var(--cp-line-2); border-radius: 3px; overflow: hidden; background: var(--cp-surface-2); transition: border-color .2s ease, box-shadow .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comment-dropzone:focus-within { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comment-dropzone .note-editor.note-frame { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comment-dropzone .note-toolbar { background: transparent !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comment-dropzone .note-editable { background: transparent !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-foot { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px !important; border: 0 !important; border-top: 1px solid var(--cp-line) !important; border-radius: 0 !important; background: transparent !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-foot::before, html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-foot::after { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-foot > .float-start, html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-foot > .btn { float: none !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-foot > .float-end { float: none !important; margin-left: auto !important; display: flex; align-items: center; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #save-as-note-button { background: transparent !important; border: 1px dashed color-mix(in srgb, #E0A43A 55%, transparent) !important; color: var(--cp-text) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #save-as-note-button:hover { background: color-mix(in srgb, #E0A43A 10%, transparent) !important; border-style: solid !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #save-as-note-button svg { color: #E0A43A; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-foot button[type="submit"] { margin: 0 !important; } .cp-tk-kbd { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; font-size: 11px; color: var(--cp-muted); white-space: nowrap; } .cp-tk-kbd kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 4%, transparent); box-shadow: none; font: 600 10.5px/1 var(--cp-font, inherit); color: var(--cp-text); } .cp-tk-kbd kbd + kbd { margin-right: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comments-list { display: grid; gap: 10px; padding: 16px 18px 18px; margin: 0 !important; border: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comments-list > .ticket-comment-container { position: relative; margin: 0 !important; padding: 14px 16px !important; border: 1px solid var(--cp-line) !important; border-radius: 3px !important; background: color-mix(in srgb, var(--cp-text) 2.5%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comments-list > [data-cp-who="client"] { border-left: 3px solid var(--cp-rust-hi) !important; background: linear-gradient(90deg, var(--cp-rust-soft), transparent 45%), color-mix(in srgb, var(--cp-text) 2.5%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comments-list > [data-cp-who="note"] { border: 1px dashed color-mix(in srgb, #E0A43A 45%, transparent) !important; background: color-mix(in srgb, #E0A43A 6%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comments-list > [data-cp-who="bot"] { opacity: .8; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comments-list > .comment-highlight { box-shadow: 0 0 0 2px var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-comment-container .strong { font-weight: 600 !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-comment-container small .text-off { margin-left: 6px; font-size: 11.5px; color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-comment-container p { margin: 6px 0 0 !important; font-size: 13.5px; line-height: 1.6; color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-comment-container .comment-image-box:not(:has(*)) { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-comment-container .comment-image-box:has(*) { margin-top: 10px; padding-top: 10px; border: 0 !important; border-top: 1px solid var(--cp-line) !important; width: auto !important; } .cp-tk-who { --st: var(--cp-muted); display: inline-flex; align-items: center; gap: 4px; height: 19px; margin: 0 2px 0 8px; padding: 0 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--st) 38%, transparent); background: color-mix(in srgb, var(--st) 10%, transparent); color: var(--st); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; } .cp-tk-who.w-client { --st: var(--cp-rust-hi); } .cp-tk-who.w-note { --st: #E0A43A; } .cp-tk-who svg { width: 10px; height: 10px; margin: 0 !important; } /* Seitenleiste */ html[data-theme]:not(#cp):not(#cq) body .cp-tk .details-view-right-section .card { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-ticket-info .support-type-label { display: inline-flex !important; align-items: center; width: auto !important; height: 28px; margin: 0 0 14px !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-ticket-info .box { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px !important; border: 0 !important; background: none !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-ticket-info .box .box-content { display: block !important; width: auto !important; padding: 0 !important; border: 1px solid var(--cp-line) !important; border-radius: 3px !important; background: color-mix(in srgb, var(--cp-text) 2.5%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-ticket-info .box .box-content > div { padding: 12px 10px !important; text-align: left !important; font-size: 11.5px; line-height: 1.3; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-ticket-info .box .box-content .b-r { border: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-ticket-info .box h4 { margin: 0 0 4px !important; font-size: 22px !important; font-weight: 500 !important; color: var(--cp-strong) !important; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-ticket-info .box .box-content:first-child h4 { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .details-view-right-section .info-list > .list-group-item { display: flex; align-items: center; gap: 4px; padding: 10px 0 !important; border: 0 !important; border-top: 1px solid var(--cp-line) !important; background: none !important; font-size: 13px; color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-tk .details-view-right-section .info-list > .list-group-item svg { color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-client-info .card-body > .text-center { text-align: left !important; font-size: 15px; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-client-info .card-body > .text-center::before { content: "Anfrage von"; display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-client-info .card-body > .text-center a { color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-client-info .card-body > .text-center a:hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-details-client-info .card-body > .text-center .avatar { display: none; } /* Karte Reaktionszeit */ .cp-tk-sla { --st: var(--cp-success); position: relative; overflow: hidden; } .cp-tk-sla.s-warn { --st: #E0A43A; } .cp-tk-sla.s-breach { --st: #E5484D; } .cp-tk-sla.s-client { --st: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-tk-sla .card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cp-tk-k { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } .cp-tk-k svg { width: 16px; height: 16px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-tk-goal { font-size: 11px; font-weight: 600; color: var(--cp-muted); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--cp-line-2); } .cp-tk-state { display: flex; align-items: flex-start; gap: 12px; } .cp-tk-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 18%, transparent), 0 0 14px color-mix(in srgb, var(--st) 70%, transparent); } .cp-tk-sla.s-breach .cp-tk-dot { animation: cp-tk-pulse 1.8s ease-in-out infinite; } @keyframes cp-tk-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--st) 8%, transparent), 0 0 18px color-mix(in srgb, var(--st) 80%, transparent); } } .cp-tk-state b { display: block; font-size: 16px; font-weight: 600; color: var(--cp-strong); line-height: 1.3; } .cp-tk-state small { display: block; margin-top: 2px; font-size: 12px; color: var(--cp-muted); line-height: 1.4; } .cp-tk-bar { height: 6px; margin: 14px 0 0; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .cp-tk-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--st) 70%, transparent), var(--st)); box-shadow: 0 0 10px color-mix(in srgb, var(--st) 60%, transparent); transform-origin: left; animation: ra-grow-x .9s cubic-bezier(.2,.75,.2,1) both .2s; } .cp-tk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; } .cp-tk-stats > div { min-width: 0; padding: 9px 10px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .cp-tk-stats dt { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-tk-stats dd { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-tk-mix { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--cp-muted); } .cp-tk-mix span { display: inline-flex; align-items: center; gap: 5px; } .cp-tk-mix b { color: var(--cp-strong); font-weight: 600; } .cp-tk-mix svg { width: 13px; height: 13px; margin: 0 !important; } .cp-tk-sk { height: 150px; margin: 14px; border-radius: 3px; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--cp-text) 6%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: ra-shimmer 1.5s linear infinite; } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .cp-tk-title { font-size: 18px; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-top-bar h1[data-cp-tk] > span:first-child { width: 38px; height: 38px; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comments-list { padding: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comments-list > .ticket-comment-container { padding: 12px 13px !important; } } /* =========================================================================== v5.42.0 · Berichte (reports-hub.js): Übersicht #/berichte + Navigation der RISE-Berichtsseiten; Finanzen verweisen auf die Umsatz-Auswertung =========================================================================== */ .rh-page { --rh-warn: #E0A43A; --rh-bad: #E5484D; padding: 26px 28px 60px; max-width: 1560px; margin: 0 auto; color: var(--cp-text); } .rh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .rh-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-muted); } .rh-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 10px var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .rh-page h1 { margin: 6px 0 4px !important; font-size: clamp(26px, 3vw, 38px) !important; font-weight: 300 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--cp-strong) !important; } .rh-sub { margin: 0; font-size: 13px; color: var(--cp-muted); } .rh-per { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rh-seg, .rh-step { display: inline-flex; align-items: center; padding: 3px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); } .rh-seg button, .rh-step button { height: 34px; min-width: 34px; padding: 0 14px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font: 500 13px/1 var(--cp-font, inherit); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; } .rh-step button { padding: 0; } .rh-step button svg { width: 16px; height: 16px; margin: 0 !important; } .rh-seg button:hover, .rh-step button:hover:not(:disabled) { color: var(--cp-strong); background: color-mix(in srgb, var(--cp-text) 6%, transparent); } .rh-seg button.is-on { background: var(--cp-rust-soft); color: var(--cp-rust-hi); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .rh-step button:disabled { opacity: .35; cursor: default; } .rh-lbl { min-width: 118px; padding: 0 8px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } /* Navigation (Hub + RISE-Berichtsseiten) */ .rh-nav-wrap { padding: 14px 20px 0; } .rh-navbox { margin-bottom: 18px; } .rh-nav { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); } .rh-nav::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp):not(#cq) body .rh-nav-i { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 3px; color: var(--cp-muted) !important; text-decoration: none !important; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .2s ease, color .2s ease; } html[data-theme]:not(#cp):not(#cq) body .rh-nav-i svg { width: 15px; height: 15px; margin: 0 !important; flex: none; } html[data-theme]:not(#cp):not(#cq) body .rh-nav-i:hover { color: var(--cp-strong) !important; background: color-mix(in srgb, var(--cp-text) 6%, transparent); } html[data-theme]:not(#cp):not(#cq) body .rh-nav-i.is-on { color: var(--cp-strong) !important; background: color-mix(in srgb, var(--cp-text) 8%, transparent); box-shadow: inset 0 -2px 0 var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .rh-nav-i.is-ra { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .rh-nav-i.is-ra svg:last-child { width: 12px; height: 12px; opacity: .8; } .rh-nav-g { flex: none; margin: 0 2px 0 10px; padding-left: 12px; border-left: 1px solid var(--cp-line); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .reports-tabs[data-rh] { padding: 0 !important; background: none !important; border: 0 !important; } .rh-dup { display: flex; align-items: center; gap: 14px; margin: 14px 20px 0; padding: 14px 16px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: linear-gradient(90deg, var(--cp-rust-soft), transparent 70%), var(--cp-surface); } .rh-dup > svg { flex: none; width: 20px; height: 20px; color: var(--cp-rust-hi); margin: 0 !important; } .rh-dup > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--cp-muted); } .rh-dup b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } /* Knöpfe */ html[data-theme]:not(#cp):not(#cq) body .rh-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); color: var(--cp-text) !important; text-decoration: none !important; font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; white-space: nowrap; transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .rh-btn:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .rh-btn.is-primary { border-color: transparent; background: linear-gradient(180deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff !important; } .rh-btn svg { width: 14px; height: 14px; margin: 0 !important; } /* KPI-Kacheln */ .rh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; } .rh-kpi { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 124px; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); cursor: pointer; transition: transform .2s ease, border-color .2s ease; animation: cp-reveal .45s var(--cp-e, ease) backwards; } .rh-kpi:nth-child(2) { animation-delay: 60ms; } .rh-kpi:nth-child(3) { animation-delay: 120ms; } .rh-kpi:nth-child(4) { animation-delay: 180ms; } .rh-kpi:hover, .rh-kpi:focus-visible { transform: translateY(-2px); border-color: var(--cp-rust-line); outline: none; } .rh-kpi::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cp-rust-hi) 16%, transparent), transparent); pointer-events: none; } .rh-kpi-l { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } .rh-kpi-l svg { width: 15px; height: 15px; color: var(--cp-rust-hi); margin: 0 !important; } .rh-kpi > b { font-size: 30px; font-weight: 400; letter-spacing: -.02em; line-height: 1.05; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .rh-kpi small { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--cp-muted); } .rh-d { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--cp-muted); background: color-mix(in srgb, var(--cp-text) 6%, transparent); } .rh-d.is-up { color: var(--cp-success); background: color-mix(in srgb, var(--cp-success) 12%, transparent); } .rh-d.is-down { color: var(--rh-bad); background: color-mix(in srgb, var(--rh-bad) 12%, transparent); } /* Finanzen → Auswertung */ .rh-fin { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px 24px; align-items: center; margin-bottom: 14px; padding: 18px 20px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--cp-rust-hi) 16%, transparent), transparent 55%), var(--cp-surface); } html[data-theme]:not(#cp):not(#cq) body .rh-fin h2 { margin: 6px 0 4px !important; font-size: 20px !important; font-weight: 500 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--cp-strong) !important; } .rh-fin p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); max-width: 60ch; } .rh-fin-go { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .rh-fin-go button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; transition: background .2s ease, transform .2s ease; } .rh-fin-go button:hover { background: color-mix(in srgb, var(--cp-rust-hi) 22%, transparent); transform: translateY(-1px); } .rh-fin-go svg { width: 13px; height: 13px; color: var(--cp-rust-hi); margin: 0 !important; } .rh-fin-l { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--cp-line); font-size: 12.5px; } .rh-fin-l > span { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .rh-fin-l a { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-text) !important; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .rh-fin-l a:hover { color: var(--cp-rust-hi) !important; } .rh-fin-l svg { width: 14px; height: 14px; color: var(--cp-muted); margin: 0 !important; } /* Bereichskarten */ .rh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .rh-card { min-width: 0; padding: 18px 20px 20px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 14px 34px -26px rgba(0,0,0,.7); scroll-margin-top: 90px; animation: cp-reveal .5s var(--cp-e, ease) backwards; } html[data-theme="light"] .rh-card, html[data-theme="light"] .rh-kpi, html[data-theme="light"] .rh-fin { box-shadow: 0 1px 2px rgba(20,24,40,.05), 0 10px 28px -22px rgba(20,24,40,.25); } .rh-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } html[data-theme]:not(#cp):not(#cq) body .rh-card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 3px !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cp-strong) !important; } .rh-card h2 svg { width: 17px; height: 17px; color: var(--cp-rust-hi); margin: 0 !important; } .rh-card > header p { margin: 0; font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .rh-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--cp-muted) !important; } .rh-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .rh-empty { margin: 8px 0 0; padding: 22px 16px; border-radius: 3px; border: 1px dashed var(--cp-line-2); text-align: center; font-size: 12.5px; color: var(--cp-muted); } .rh-sk { height: 260px; margin-bottom: 14px; border-radius: 3px; background: linear-gradient(100deg, var(--cp-surface) 30%, color-mix(in srgb, var(--cp-text) 5%, var(--cp-surface)) 50%, var(--cp-surface) 70%); background-size: 250% 100%; animation: ra-shimmer 1.5s linear infinite; } .rh-body { transition: opacity .2s ease; } .rh-body.is-busy { opacity: .55; pointer-events: none; } /* Säulen */ .rh-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: 3px; height: 150px; padding-bottom: 20px; border-bottom: 1px solid var(--cp-line); } .rh-bar { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 1px; outline: none; } .rh-bar > span { flex: 1; max-width: 26px; min-height: 2px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #F47A4C, var(--cp-rust)); transform-origin: bottom; animation: rh-grow .7s cubic-bezier(.2,.75,.2,1) backwards; animation-delay: calc(var(--i) * 18ms); transition: filter .15s ease; } .rh-bar > span.is-b { background: color-mix(in srgb, var(--cp-glow) 55%, var(--cp-muted)); } .rh-bar:hover > span, .rh-bar:focus-visible > span { filter: brightness(1.25); } .rh-bar > em { position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9.5px; color: var(--cp-muted); white-space: nowrap; } @keyframes rh-grow { from { transform: scaleY(0); } } .rh-page [data-tip] { position: relative; } .rh-page [data-tip]:hover::after, .rh-page [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 5; padding: 6px 9px; border-radius: 3px; background: var(--cp-strong); color: var(--cp-surface); font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); } .rh-bar[data-tip]:hover::after, .rh-bar[data-tip]:focus-visible::after { bottom: auto; top: -30px; } .rh-key { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .06em; text-transform: none; font-weight: 500; } .rh-key i { width: 9px; height: 9px; border-radius: 3px; background: var(--cp-rust-hi); } .rh-key i.is-b { margin-left: 6px; background: color-mix(in srgb, var(--cp-glow) 55%, var(--cp-muted)); } /* Ranglisten */ .rh-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .rh-rank li > a, .rh-rank li > div { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 3px; text-decoration: none !important; color: var(--cp-text) !important; transition: background .15s ease; } .rh-rank li > a:hover { background: color-mix(in srgb, var(--cp-text) 5%, transparent); } .rh-rank-t { display: flex; flex-direction: column; min-width: 0; } .rh-rank-t b { font-size: 12.5px; font-weight: 500; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rh-rank-t small { font-size: 11px; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rh-rank-b { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); overflow: hidden; } .rh-rank-b i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cp-rust), #F47A4C); transform-origin: left; animation: ra-grow-x .8s cubic-bezier(.2,.75,.2,1) backwards; animation-delay: calc(var(--i) * 50ms + 150ms); } .rh-rank em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Kennzahlen-Raster, Tabelle, Trichter, Stapel */ .rh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .rh-stats > div { min-width: 0; padding: 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .rh-stats b { display: block; font-size: 20px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .rh-stats span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.3; color: var(--cp-muted); } .rh-stats > .is-warn { border-color: color-mix(in srgb, var(--rh-warn) 40%, transparent); background: color-mix(in srgb, var(--rh-warn) 7%, transparent); } html[data-theme]:not(#cp) body .rh-stats > .is-warn b { color: var(--rh-warn); } .rh-table { display: grid; border-radius: 3px; border: 1px solid var(--cp-line); overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .rh-tr { display: grid; grid-template-columns: minmax(0, 1fr) 70px 80px 70px; gap: 8px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--cp-line); font-size: 12.5px; color: var(--cp-text) !important; text-decoration: none !important; font-variant-numeric: tabular-nums; } .rh-tr > span:not(:first-child) { text-align: right; } .rh-tr > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .rh-tr.is-h { border-top: 0; background: color-mix(in srgb, var(--cp-text) 3%, transparent); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted) !important; } .rh-tr.is-h > span:first-child { color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body a.rh-tr:hover { background: color-mix(in srgb, var(--cp-text) 4%, transparent); } .rh-tr .is-bad { color: var(--rh-bad); font-weight: 600; } .rh-funnel { display: flex; align-items: stretch; gap: 8px; } .rh-funnel > div { flex: 1; min-width: 0; padding: 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .rh-funnel > div.is-won { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .rh-funnel b { display: block; font-size: 22px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .rh-funnel span { font-size: 11px; color: var(--cp-muted); } .rh-funnel > i { display: flex; align-items: center; color: var(--cp-muted); } .rh-funnel > i svg { width: 16px; height: 16px; margin: 0 !important; } .rh-stack { display: flex; height: 12px; gap: 2px; border-radius: 999px; overflow: visible; } .rh-stack > i { min-width: 6px; border-radius: 3px; background: var(--c); transition: filter .15s ease; } .rh-stack > i:hover { filter: brightness(1.2); } .rh-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--cp-muted); } .rh-legend li { display: inline-flex; align-items: center; gap: 6px; } .rh-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .rh-legend b { color: var(--cp-strong); font-weight: 600; } @media (max-width: 1180px) { .rh-grid { grid-template-columns: minmax(0, 1fr); } .rh-fin { grid-template-columns: minmax(0, 1fr); } .rh-fin-go { justify-content: flex-start; } } @media (max-width: 767px) { .rh-page { padding: 16px 14px 90px; } .rh-per { width: 100%; } .rh-seg { flex: 1; } .rh-seg button { flex: 1; padding: 0 8px; } .rh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .rh-kpi { min-height: 108px; padding: 13px 14px; } .rh-kpi > b { font-size: 24px; } .rh-card { padding: 15px 14px 16px; border-radius: 3px; } .rh-card > header { flex-wrap: wrap; } .rh-split { grid-template-columns: minmax(0, 1fr); } .rh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rh-bars { height: 120px; gap: 2px; } .rh-nav-wrap { padding: 10px 12px 0; } .rh-dup { flex-wrap: wrap; margin: 12px 12px 0; } .rh-tr { grid-template-columns: minmax(0, 1fr) 48px 64px 56px; } } /* =========================================================================== v5.42.0 · Abonnements, Notizen, Wissensbasis, Dateien (workspace-tools.js) =========================================================================== */ .cp-ws-sk { height: 140px; border-radius: 3px; background: linear-gradient(100deg, var(--cp-surface) 30%, color-mix(in srgb, var(--cp-text) 5%, var(--cp-surface)) 50%, var(--cp-surface) 70%); background-size: 250% 100%; animation: ra-shimmer 1.5s linear infinite; } .cp-ws-muted { margin: 0; padding: 14px; border-radius: 3px; border: 1px dashed var(--cp-line-2); font-size: 12.5px; color: var(--cp-muted); text-align: center; } html[data-theme]:not(#cp):not(#cq) body .cp-ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); color: var(--cp-text) !important; text-decoration: none !important; font: 500 13px/1 var(--cp-font, inherit); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-ws-btn:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); transform: translateY(-1px); } html[data-theme]:not(#cp):not(#cq) body .cp-ws-btn.is-primary { border-color: transparent; background: linear-gradient(180deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff !important; box-shadow: 0 10px 24px -14px var(--cp-rust-hi); } .cp-ws-btn svg { width: 16px; height: 16px; margin: 0 !important; } .cp-ws-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; } /* Leerzustand (Abos, Wissensbasis, Dateien) */ .cp-ws-empty, .cp-fm-empty { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 24px 30px; border-radius: 3px; } .cp-ws-empty { margin: 0 0 16px; border: 1px solid var(--cp-line-2); background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--cp-rust-hi) 12%, transparent), transparent 60%), var(--cp-surface); animation: cp-reveal .45s var(--cp-e, ease) both; } .cp-ws-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); box-shadow: 0 0 30px -8px var(--cp-rust-hi); } .cp-ws-empty-ico svg { width: 26px; height: 26px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-ws-empty, .cp-fm-empty) h2 { margin: 0 0 6px !important; font-size: 20px !important; font-weight: 500 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--cp-strong) !important; } :is(.cp-ws-empty, .cp-fm-empty) p { max-width: 58ch; margin: 0 auto; font-size: 13px; line-height: 1.55; color: var(--cp-muted); } .cp-ws-uses { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 720px); margin: 18px 0 0; padding: 0; } .cp-ws-uses li { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); font-size: 12px; color: var(--cp-muted); text-align: left; } .cp-ws-uses b { font-size: 12.5px; font-weight: 600; color: var(--cp-strong); } .cp-ws-empty > .cp-ws-btn { margin-top: 18px; } /* Abonnements */ html[data-theme]:not(#cp) body .cp-sb-none > .card { display: none !important; } .cp-sb:not(.cp-ws-empty) { margin: 14px 0 16px; animation: cp-reveal .45s var(--cp-e, ease) both; } .cp-sb.is-loading { margin: 14px 0 16px; } .cp-sb-kpis { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .cp-sb-kpis > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 15px 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); } .cp-sb-kpis > .is-main { border-color: var(--cp-rust-line); background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--cp-rust-hi) 16%, transparent), transparent 60%), var(--cp-surface); } .cp-sb-kpis > .is-bad { border-color: color-mix(in srgb, #E5484D 45%, transparent); } .cp-sb-kpis span { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .cp-sb-kpis span svg { width: 14px; height: 14px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-sb-kpis b { font-size: 26px; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-sb-kpis small { font-size: 11.5px; color: var(--cp-muted); } .cp-sb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cp-sb-cols > div { min-width: 0; padding: 14px 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); } html[data-theme]:not(#cp):not(#cq) body .cp-sb-cols h3 { margin: 0 0 10px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--cp-muted) !important; } .cp-sb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-sb-list a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 3px; color: var(--cp-text) !important; text-decoration: none !important; transition: background .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-sb-list a:hover { background: color-mix(in srgb, var(--cp-text) 5%, transparent); } .cp-sb-when { flex: none; display: flex; flex-direction: column; width: 92px; padding: 5px 8px; border-radius: 3px; border: 1px solid var(--cp-line); font-size: 12px; font-weight: 600; color: var(--cp-strong); } .cp-sb-when small { font-size: 10.5px; font-weight: 400; color: var(--cp-muted); } .cp-sb-when.is-soon { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-sb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cp-sb-t b { font-size: 13px; font-weight: 500; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-sb-t small { font-size: 11.5px; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-sb-list em { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-style: normal; font-size: 13px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-sb-list em small { font-size: 10.5px; font-weight: 400; color: var(--cp-muted); } .cp-sb-dot { flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 8px var(--cp-rust-hi); } .cp-sb-dot.t-mid { background: #E0A43A; box-shadow: 0 0 8px #E0A43A; } /* Notizen */ .cp-nt-x { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 0 16px; max-width: 72ch; } .cp-nt-x > span:first-child { font-size: 12px; line-height: 1.45; color: var(--cp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cp-nt-x .is-empty { font-style: italic; opacity: .7; } .cp-nt-m { display: flex; flex-wrap: wrap; gap: 6px; } .cp-nt-cat, .cp-nt-f { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--cp-line-2); font-size: 11px; color: var(--cp-text); } .cp-nt-cat { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-nt-f svg { width: 11px; height: 11px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #note-table tr.cp-nt-row > td { padding-top: 14px !important; padding-bottom: 14px !important; vertical-align: top; } html[data-theme]:not(#cp):not(#cq) body #note-table .note-color-tag { width: 9px !important; height: 9px !important; margin-right: 7px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); } html[data-theme]:not(#cp):not(#cq) body #note-table td a[data-action-url*="notes/view"] { font-weight: 500; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .notes-grid-container .note-grid-card { border-radius: 3px; } /* Wissensbasis */ html[data-theme]:not(#cp):not(#cq) body .cp-kb #search-box-wrapper { position: relative; overflow: hidden; margin: 8px auto 22px; max-width: 1100px; padding: 38px 28px 30px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: radial-gradient(90% 140% at 50% -10%, color-mix(in srgb, var(--cp-rust-hi) 18%, transparent), transparent 60%), radial-gradient(40% 80% at 100% 100%, color-mix(in srgb, var(--cp-glow) 6%, transparent), transparent 70%), var(--cp-surface); } html[data-theme]:not(#cp):not(#cq) body .cp-kb .help-search-box-container { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 720px; margin: 0 auto; padding: 0 !important; background: none !important; } .cp-kb-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-muted); } .cp-kb-k i { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 10px var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-kb .help-search-box-container h2 { margin: 10px 0 6px !important; font-size: clamp(24px, 3vw, 34px) !important; font-weight: 300 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--cp-strong) !important; } .cp-kb-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--cp-muted); } .cp-kb-stats { margin: -8px 0 16px; font-size: 12px; color: var(--cp-muted); } .cp-kb-stats b { color: var(--cp-strong); font-weight: 600; } .cp-kb-stats span { margin: 0 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-kb .search-box { width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-kb #help-search-box { height: 54px !important; padding-left: 46px !important; border-radius: 3px !important; font-size: 15px !important; border: 1px solid var(--cp-line-2) !important; background-color: var(--cp-surface-2) !important; box-shadow: 0 16px 40px -28px rgba(0,0,0,.8); } html[data-theme]:not(#cp):not(#cq) body .cp-kb #help-search-box:focus { border-color: var(--cp-rust-line) !important; box-shadow: 0 0 0 4px var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-kb .cp-kb-admin { display: flex; justify-content: center; gap: 8px; margin: 16px 0 0 !important; padding: 0 !important; max-width: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-kb .cp-kb-admin .btn { height: 34px; padding: 0 12px !important; border-radius: 3px !important; font-size: 12.5px !important; background: transparent !important; } html[data-theme]:not(#cp):not(#cq) body .cp-kb .help-page { max-width: 1100px; margin: 0 auto; min-height: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-kb .help-category-box { height: 100%; padding: 20px !important; border-radius: 3px; transition: transform .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-kb a:has(.help-category-box) .card { border-radius: 3px !important; transition: border-color .2s ease, transform .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-kb a:has(.help-category-box):hover .card { border-color: var(--cp-rust-line) !important; transform: translateY(-2px); } html[data-theme]:not(#cp):not(#cq) body .cp-kb .help-category-box h4 { font-size: 16px !important; font-weight: 600 !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-kb .help-category-box .anchor { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--cp-rust-soft); color: var(--cp-rust-hi) !important; font-size: 11.5px; font-weight: 600; } .cp-kb-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; } .cp-kb-lists section { padding: 16px 18px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); } html[data-theme]:not(#cp):not(#cq) body .cp-kb-lists h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--cp-muted) !important; } .cp-kb-lists h3 svg { width: 15px; height: 15px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-kb-lists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-kb-lists a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 3px; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-kb-lists a:hover { background: color-mix(in srgb, var(--cp-text) 5%, transparent); } .cp-kb-lists b { font-size: 13px; font-weight: 500; color: var(--cp-strong); } .cp-kb-lists small { font-size: 11.5px; color: var(--cp-muted); } /* Dateien */ html[data-theme]:not(#cp):not(#cq) body #file-manager-window-area:has(> .cp-fm-empty)::before { display: none !important; content: none !important; } html[data-theme]:not(#cp):not(#cq) body #file-manager-window-area:has(> .cp-fm-empty) { display: flex !important; align-items: center; justify-content: center; min-height: 380px; padding: 20px; } .cp-fm-empty { width: min(100%, 560px); border: 1.5px dashed var(--cp-line-2); background: radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--cp-rust-hi) 9%, transparent), transparent 65%); transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body #file-manager-container.dz-drag-hover .cp-fm-empty, .cp-fm-empty:hover { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar h1 { text-transform: none !important; letter-spacing: -.005em !important; font-size: 17px !important; font-weight: 500 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar h1 > span { padding: 0 10px 0 0 !important; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-fm #view-details-button { color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #view-details-button:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-details-box .no-file-selected { padding: 24px 18px !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-details-box .no-file-selected * { white-space: normal !important; max-width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar > label { display: flex; align-items: center; gap: 7px; padding: 14px 15px 6px !important; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar > label svg { width: 13px; height: 13px; color: var(--cp-rust-hi); margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #favourite-folders:not(:has(li))::after { content: "Ordner über das Stern-Symbol als Favorit merken – sie erscheinen dann hier."; display: block; padding: 4px 15px 10px; font-size: 11.5px; line-height: 1.45; color: var(--cp-muted); } @media (max-width: 1100px) { .cp-sb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .cp-sb-cols, .cp-kb-lists, .cp-ws-uses { grid-template-columns: minmax(0, 1fr); } .cp-sb-kpis b { font-size: 22px; } .cp-sb-kpis > div { padding: 12px 13px; } .cp-ws-empty, .cp-fm-empty { padding: 26px 16px 22px; } html[data-theme]:not(#cp):not(#cq) body .cp-kb #search-box-wrapper { padding: 26px 16px 22px; border-radius: 3px; } .cp-nt-x { margin-left: 0; } } /* v5.42.0 · Touch: Erinnerungs-Glocke im ⋯-Menü (16 px) und Export-Links der Berichte als volle Tippflächen */ @media (pointer: coarse), (max-width: 1024px) { html[data-theme]:not(#cp):not(#cq) body .rst-mobile-overflow-panel #reminder-icon { min-width: 44px; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; } html[data-theme]:not(#cp):not(#cq) body .rh-fin-l a { min-height: 40px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-line); } } /* v5.42.0 · Angebots-/Vertrags-Editor: Vorlage (dunkle Schrift für Papier) auf weißem Blatt statt dunklem Editor – Blatt in PDF-Breite auf dunklem „Tisch“, Werkzeugleiste deckend und oben haftend */ html[data-theme]:not(#cp):not(#cq) body .editor-preview .note-editor.note-frame { overflow: visible !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp):not(#cq) body .editor-preview .note-editor .note-toolbar { position: sticky !important; top: 0; z-index: 6 !important; border-radius: 3px 3px 0 0 !important; background: var(--cp-surface) !important; border-bottom: 1px solid var(--cp-line-2) !important; box-shadow: 0 8px 18px -14px rgba(0,0,0,.8) !important; } html[data-theme]:not(#cp):not(#cq) body .editor-preview .note-editor .note-editing-area { background: transparent !important; padding: 28px 16px 36px; } html[data-theme]:not(#cp):not(#cq) body .editor-preview .note-editor .note-editing-area .note-editable { max-width: 880px; margin: 0 auto !important; padding: 44px 48px !important; background: #FFFFFF !important; color: #06070A !important; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 28px 60px -30px rgba(0,0,0,.9) !important; } html[data-theme]:not(#cp):not(#cq) body .editor-preview .note-editable a { color: #C0431C !important; } html[data-theme]:not(#cp):not(#cq) body .editor-preview .note-editor .note-statusbar { background: transparent !important; border-top: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .editor-preview .js-variable-tag { display: inline-block; margin: 2px 0; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 4%, transparent); font-size: 12px; color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .editor-preview .js-variable-tag:hover { border-color: var(--cp-rust-line); color: var(--cp-rust-hi); } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .editor-preview .note-editor .note-editing-area { padding: 12px 6px 18px; } html[data-theme]:not(#cp):not(#cq) body .editor-preview .note-editor .note-editing-area .note-editable { padding: 22px 16px !important; } } @media (min-width: 501px) { html[data-theme]:not(#cp):not(#cq) body .editor-preview .note-editor .note-toolbar { top: 0 !important; } } /* ab 501 px scrollt der Inhaltsbereich, nicht die Seite */ /* =========================================================================== v5.42.0 · Nachrichten (workspace-tools.js → .cp-msg): Reiter, Liste, Verlauf als Sprechblasen (eigene rechts in Rost), Sprachnachricht-Player, Antwortfeld =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-msg .message-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 16px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .message-tabs > a { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .message-tabs > a.btn-default { background: transparent !important; color: var(--cp-muted) !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .message-tabs > a.btn-default.is-on { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; box-shadow: inset 0 -2px 0 var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg :is(#message-list-box, #message-details-section) { border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-surface) !important; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-list-box .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px !important; border-bottom: 1px solid var(--cp-line) !important; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-list-box .card-header > * { float: none !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-list-box .card-header svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-msg #search-messages { width: 200px; max-width: 100%; height: 36px; border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-table td { padding: 0 !important; border: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-table .message-row { position: relative; padding: 13px 16px !important; border-bottom: 1px solid var(--cp-line) !important; cursor: pointer; transition: background .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-table .message-row:hover { background: color-mix(in srgb, var(--cp-text) 4%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-table .message-row.is-active { background: var(--cp-rust-soft) !important; box-shadow: inset 3px 0 0 var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-table .message-row.unread strong::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 8px var(--cp-rust-hi); vertical-align: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-table .message-row .w-100 { font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-table .message-row strong { font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-table .message-row .time { font-size: 11px; color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg #empty-message { min-height: 320px; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; color: var(--cp-muted); } /* Verlauf */ html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-details-section [class^="message-container-"] { display: flex; flex-direction: column; gap: 12px; padding: 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .d-flex { gap: 10px; align-items: flex-start; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .w-100 { flex: 0 1 auto; width: auto !important; max-width: min(620px, 86%); padding: 11px 14px 12px !important; border-radius: 3px 3px 3px 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 4%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m.is-me .d-flex { flex-direction: row-reverse; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m.is-me .w-100 { border-radius: 3px 3px 3px 3px; border-color: var(--cp-rust-line); background: linear-gradient(180deg, color-mix(in srgb, var(--cp-rust-hi) 16%, transparent), color-mix(in srgb, var(--cp-rust-hi) 9%, transparent)); } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m.is-first .w-100 { max-width: 100%; flex: 1 1 auto; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .w-100 > div:first-child { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .w-100 > div:first-child > *, html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .clearfix > * { float: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .clearfix { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .clearfix::before, html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .clearfix::after { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .text-off { margin-left: auto; font-size: 11px; color: var(--cp-muted) !important; order: 5; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .dropdown { order: 6; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m strong, html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m a.strong { font-size: 13px; font-weight: 600; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m label.badge { margin: 0 !important; padding: 3px 8px !important; border-radius: 999px !important; background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; border: 1px solid var(--cp-rust-line) !important; font-size: 10.5px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .w-100 > p { margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; font-size: 13.5px; line-height: 1.55; color: var(--cp-text); overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .w-100 > p.cp-m-sub { margin: 10px 0 2px !important; font-size: 16px; font-weight: 600; letter-spacing: -.005em; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .w-100 > p.is-deleted { font-style: italic; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .comment-image-box:not(:has(*)) { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .comment-image-box:has(*) { width: auto !important; margin-top: 10px; padding-top: 8px; border: 0 !important; border-top: 1px solid var(--cp-line) !important; font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .timeline-images img { border-radius: 3px; max-height: 220px; object-fit: cover; } .cp-m-audio { display: flex; align-items: center; gap: 10px; min-width: min(320px, 100%); padding: 8px 10px 8px 8px; margin: 4px 0 6px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); } .cp-m-mic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(180deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; box-shadow: 0 6px 16px -8px var(--cp-rust-hi); } .cp-m-mic svg { width: 17px; height: 17px; margin: 0 !important; } .cp-m-audio audio { flex: 1; min-width: 0; height: 36px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-audio-src { display: none !important; } /* Antwortfeld */ html[data-theme]:not(#cp):not(#cq) body .cp-msg #reply-form-container { margin-top: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form > .p15.box { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form > .box > .avatar { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form > .box > .form-group { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form > .box > .form-group:focus-within { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form textarea { min-height: 88px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; resize: none; padding: 14px 16px !important; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer { display: flex !important; align-items: center; gap: 8px; padding: 8px 10px !important; border: 0 !important; border-top: 1px solid var(--cp-line) !important; background: transparent !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer::before, html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer::after { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > * { float: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer .cp-m-kbd { margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer button[type="submit"] { margin-left: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > button[type="submit"]:only-of-type { margin-left: auto !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer .cp-m-kbd + button[type="submit"] { margin-left: 0 !important; } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-details-section [class^="message-container-"] { padding: 12px 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .w-100 { max-width: 92%; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .avatar-sm { width: 30px !important; height: 30px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg #search-messages { width: 140px; } } /* =========================================================================== v5.44.0 · Ticket-Bearbeitung: Kopf bündig, Antwortfeld mit Modus (Antwort | Interne Notiz), KI-Entwurf/Verbessern, „Senden & schließen“ =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-top-bar .page-title::before, html[data-theme]:not(#cp):not(#cq) body .cp-tk .ticket-top-bar .page-title::after { display: none !important; content: none !important; } /* clearfix wurde im Flex-Kopf zum Platzhalter → Titel eingerückt */ .cp-tk-mode-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; } .cp-tk-mode { display: inline-flex; padding: 3px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); } .cp-tk-mode button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font: 500 13px/1 var(--cp-font, inherit); cursor: pointer; transition: background .2s ease, color .2s ease; } .cp-tk-mode button svg { width: 15px; height: 15px; margin: 0 !important; } .cp-tk-mode button:hover { color: var(--cp-strong); } .cp-tk-mode button.is-on { background: var(--cp-rust-soft); color: var(--cp-rust-hi); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-tk-mode button[data-mode="note"].is-on { background: color-mix(in srgb, #E0A43A 14%, transparent); color: #E0A43A; box-shadow: inset 0 0 0 1px color-mix(in srgb, #E0A43A 45%, transparent); } .cp-tk-mode-hint { font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-tk #comment-form.is-note #ticket-comment-dropzone { border: 1px dashed color-mix(in srgb, #E0A43A 60%, transparent) !important; background: color-mix(in srgb, #E0A43A 6%, var(--cp-surface-2)) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #comment-form.is-note #ticket-comment-dropzone:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, #E0A43A 16%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-tk #comment-form:not(.is-note) #save-as-note-button, html[data-theme]:not(#cp):not(#cq) body .cp-tk #comment-form.is-note .cp-tk-foot button[type="submit"], html[data-theme]:not(#cp):not(#cq) body .cp-tk #comment-form.is-note .cp-tk-sendclose, html[data-theme]:not(#cp):not(#cq) body .cp-tk #comment-form.is-note .cp-tk-aib[data-ai="draft"] { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #comment-form:has(.cp-tk-mode) #save-as-note-button { background: linear-gradient(180deg, #E8B04A, #C98F26) !important; border: 0 !important; border-style: solid !important; color: #1A1206 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk #comment-form:has(.cp-tk-mode) #save-as-note-button svg { color: #1A1206; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-sendclose { display: inline-flex; align-items: center; gap: 7px; margin: 0 !important; background: transparent !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-sendclose:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-sendclose svg { width: 15px; height: 15px; margin: 0 !important; color: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .cp-tk .cp-tk-sendclose[hidden] { display: none !important; } .cp-tk-ai { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-tk-aib { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; transition: background .2s ease, transform .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-tk-aib:hover:not(:disabled) { background: color-mix(in srgb, var(--cp-rust-hi) 22%, transparent); transform: translateY(-1px); } .cp-tk-aib svg { width: 15px; height: 15px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-tk-aib.is-busy { opacity: .8; cursor: progress; } .cp-tk-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--cp-rust-line); border-top-color: var(--cp-rust-hi); animation: cp-tk-rot .8s linear infinite; } @keyframes cp-tk-rot { to { transform: rotate(360deg); } } .cp-tk-flash { margin: 8px 0 0; padding: 9px 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, #E0A43A 40%, transparent); background: color-mix(in srgb, #E0A43A 8%, transparent); font-size: 12.5px; color: var(--cp-text); } .cp-tk-flash.is-ok { border-color: color-mix(in srgb, var(--cp-success) 40%, transparent); background: color-mix(in srgb, var(--cp-success) 8%, transparent); } /* kompakteres Antwortfeld, wächst mit */ html[data-theme]:not(#cp):not(#cq) body .cp-tk #ticket-comment-dropzone .note-editable { height: auto !important; min-height: 130px !important; max-height: 55vh; overflow-y: auto !important; } /* Ein-/Ausgang-Kacheln doppeln die Karte „Reaktionszeit“ (Kunde/Team) → für das Team ausblenden */ html[data-theme]:not(#cp):not(#cq) body .cp-tk .details-view-right-section:has(.cp-tk-sla) #ticket-details-ticket-info .box { display: none !important; } @media (max-width: 767px) { .cp-tk-mode-hint { flex-basis: 100%; } .cp-tk-ai { border-left: 0; padding-left: 0; } .cp-tk-aib { height: 40px; } } /* v5.44.0 · Chatfenster: Name und „zuletzt aktiv“ wieder linksbündig (RISE zentriert den Kopf) */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .rise-chat-header .chat-title, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-person { text-align: left !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-person { align-items: flex-start !important; flex: 1 1 auto; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-status { justify-content: flex-start !important; flex-wrap: wrap; row-gap: 2px; text-align: left !important; } /* v5.44.0 · Wissensbasis: Verwaltungsknöpfe im Kopf mittig ausgerichtet (Text saß oben) */ html[data-theme]:not(#cp):not(#cq) body .cp-kb .cp-kb-admin .btn { display: inline-flex !important; align-items: center !important; justify-content: center; gap: 8px; height: 38px !important; min-height: 0 !important; padding: 0 16px !important; line-height: 1 !important; border-radius: 3px !important; font-size: 13px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-kb .cp-kb-admin .btn svg { width: 16px; height: 16px; margin: 0 !important; } /* =========================================================================== v5.44.0 · Notizen als Karten-Liste + Raster in Markenfarben =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards thead, html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards .cp-nt-hide { display: none !important; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards { border-collapse: separate !important; border-spacing: 0 8px !important; margin-top: -8px !important; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards tbody tr.cp-nt-row > td { padding: 14px 16px !important; border: 1px solid var(--cp-line) !important; border-width: 1px 0 !important; background: color-mix(in srgb, var(--cp-text) 2.5%, transparent) !important; vertical-align: top !important; transition: background .15s ease, border-color .15s ease; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards tbody tr.cp-nt-row > td:first-child:not(.cp-nt-hide), html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards tbody tr.cp-nt-row > td.cp-nt-main { border-left-width: 1px !important; border-radius: 3px 0 0 3px !important; box-shadow: inset 4px 0 0 var(--nc, var(--cp-rust-hi)) !important; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards tbody tr.cp-nt-row > td:last-child { border-right-width: 1px !important; border-radius: 0 3px 3px 0 !important; width: 96px; text-align: right; vertical-align: middle !important; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards tbody tr.cp-nt-row:hover > td { background: color-mix(in srgb, var(--cp-text) 5%, transparent) !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards .note-color-tag { display: none !important; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards td.cp-nt-main { padding-left: 22px !important; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards td.cp-nt-main > a[data-action-url*="notes/view"] { display: block; width: auto !important; font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards td.cp-nt-main > a[data-action-url*="notes/view"]:hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards .cp-nt-x { display: flex; flex-direction: column; gap: 8px; margin: 5px 0 0; max-width: 90ch; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards .cp-nt-t { font-size: 13px; line-height: 1.55; color: var(--cp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards .cp-nt-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards .cp-nt-date { font-size: 11.5px; color: var(--cp-muted); margin-right: 4px; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards .cp-nt-labels { display: contents; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards td:last-child a { opacity: .45; transition: opacity .15s ease; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards tr:hover td:last-child a, html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards td:last-child a:focus-visible { opacity: 1; } @media (hover: none) { html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards td:last-child a { opacity: 1; } } html[data-theme]:not(#cp):not(#cq) body .cp-nt-wrap .dt-layout-row:has(> .dt-layout-cell > .dt-info), html[data-theme]:not(#cp):not(#cq) body .cp-nt-wrap .dt-layout-table { padding-top: 0 !important; } /* Raster */ html[data-theme]:not(#cp):not(#cq) body .notes-grid-container .card.cp-ng-card { position: relative; overflow: hidden; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--nc) 12%, transparent), transparent 60%), var(--cp-surface) !important; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } html[data-theme]:not(#cp):not(#cq) body .notes-grid-container .card.cp-ng-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--nc); } html[data-theme]:not(#cp):not(#cq) body .notes-grid-container .card.cp-ng-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--nc) 55%, transparent) !important; box-shadow: 0 16px 34px -24px rgba(0,0,0,.8); } html[data-theme]:not(#cp):not(#cq) body .notes-grid-container .cp-ng-card .strong { color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .notes-grid-container .cp-ng-card .notes-grid-text-ellipsis:not(.strong) { color: var(--cp-muted); font-size: 13px; line-height: 1.55; } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards tbody tr.cp-nt-row > td { padding: 12px !important; } html[data-theme]:not(#cp):not(#cq) body #note-table.cp-nt-cards td.cp-nt-main { padding-left: 16px !important; } } /* =========================================================================== v5.44.0 · Dateizentrale (Dateien): Bestand, Suche über alle CRM-Dateien, zuletzt hochgeladen; im Ordner Typ-Filter und Listen-/Kachelansicht =========================================================================== */ .cp-fz { margin: 0 0 14px; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--cp-rust-hi) 12%, transparent), transparent 50%), var(--cp-surface); animation: cp-reveal .45s var(--cp-e, ease) both; } .cp-fz.is-loading { padding: 12px; } .cp-fz-top { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 420px); gap: 16px 22px; align-items: center; } .cp-fz-stat { display: flex; flex-direction: column; gap: 3px; padding-right: 22px; border-right: 1px solid var(--cp-line); } .cp-fz-k { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); white-space: nowrap; } .cp-fz-k svg { width: 14px; height: 14px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-fz-stat b { font-size: 28px; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-fz-stat small { font-size: 11.5px; color: var(--cp-muted); } .cp-fz-kinds { display: flex; flex-wrap: wrap; gap: 6px; } .cp-fz-kinds span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); font-size: 12px; color: var(--cp-muted); } .cp-fz-kinds span svg { width: 14px; height: 14px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-fz-kinds b { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .cp-fz-kinds .is-empty { border-style: dashed; } .cp-fz-search { position: relative; } .cp-fz-search label { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); transition: border-color .2s ease, box-shadow .2s ease; } .cp-fz-search label:focus-within { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-fz-search label svg { width: 17px; height: 17px; color: var(--cp-muted); flex: none; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fz-search input { flex: 1; min-width: 0; height: 100%; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font-size: 13.5px; color: var(--cp-strong); } .cp-fz-res { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 380px; overflow: auto; padding: 6px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); } .cp-fz-res ul, .cp-fz-recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .cp-fz-note { margin: 0; padding: 12px; font-size: 12.5px; color: var(--cp-muted); text-align: center; } .cp-fz-recent { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-fz-recent h3 { margin: 0 0 8px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--cp-muted) !important; } .cp-fz-recent ul { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; } .cp-fz-item { display: flex; align-items: center; gap: 4px; border-radius: 3px; transition: background .15s ease; } .cp-fz-recent .cp-fz-item { border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .cp-fz-item:hover { background: color-mix(in srgb, var(--cp-text) 5%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-fz-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 8px 10px; color: var(--cp-text) !important; text-decoration: none !important; } .cp-fz-ico { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-rust-hi); } .cp-fz-ico svg { width: 18px; height: 18px; margin: 0 !important; } .cp-fz-ico em { position: absolute; bottom: -5px; right: -6px; padding: 1px 4px; border-radius: 3px; background: var(--cp-rust); color: #fff; font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; } .cp-fz-ico em:empty { display: none; } .k-image .cp-fz-ico { color: #7BC4A4; } .k-video .cp-fz-ico { color: #9C8CF0; } .k-pdf .cp-fz-ico { color: #E5484D; } .k-audio .cp-fz-ico { color: #E0A43A; } .cp-fz-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cp-fz-t b { font-size: 13px; font-weight: 500; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-fz-t small { font-size: 11.5px; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-fz-dl { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 6px; border-radius: 3px; color: var(--cp-muted) !important; transition: color .15s ease, background .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-fz-dl:hover { color: var(--cp-rust-hi) !important; background: var(--cp-rust-soft); } .cp-fz-dl svg { width: 17px; height: 17px; margin: 0 !important; } /* v5.149.1: Datei-Zeile als Vorschau-Knopf; „Im Ordner zeigen“ markiert die Datei am Fundort (#cp-file=ID) */ html[data-theme]:not(#cp):not(#cq) body button.cp-fz-open { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body button.cp-fz-open:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: -2px; } html[data-theme]:not(#cp):not(#cq) body .cp-fz-go { margin-right: 0; } .cp-fz-hit, .cp-fz-hit > td { background: var(--cp-rust-soft) !important; box-shadow: inset 3px 0 0 var(--cp-rust-hi); transition: background .4s ease; } li.folder-item.cp-fz-hit { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; border-radius: 3px; } /* Werkzeugleiste im Ordner */ .cp-fm-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--cp-line); } .cp-fm-filter, .cp-fm-view { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); } .cp-fm-filter button, .cp-fm-view button { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 30px; padding: 0 11px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; transition: background .15s ease, color .15s ease; } .cp-fm-view button { padding: 0 8px; } .cp-fm-view button svg { width: 15px; height: 15px; margin: 0 !important; } .cp-fm-filter button:hover, .cp-fm-view button:hover { color: var(--cp-strong); } .cp-fm-filter button.is-on, .cp-fm-view button.is-on { background: var(--cp-rust-soft); color: var(--cp-rust-hi); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-fm ul.files-and-folders-list > li.cp-fm-off { display: none !important; } /* Listenansicht */ html[data-theme]:not(#cp):not(#cq) body .cp-fm-list ul.files-and-folders-list { display: flex !important; flex-direction: column; gap: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-fm-list ul.files-and-folders-list > li.folder-item { width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; display: flex; align-items: center; border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm-list ul.files-and-folders-list > li .folder-item-content { flex: 1; padding: 8px 12px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm-list ul.files-and-folders-list > li .icon-wrapper svg { width: 22px !important; height: 22px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm-list ul.files-and-folders-list > li .w-100 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-fm-list ul.files-and-folders-list > li .file-manager-more-menu { position: static !important; margin-right: 10px; } @media (max-width: 1100px) { .cp-fz-top { grid-template-columns: auto minmax(0, 1fr); } .cp-fz-search { grid-column: 1 / -1; } } @media (max-width: 767px) { .cp-fz { padding: 14px; } .cp-fz-top { grid-template-columns: minmax(0, 1fr); } .cp-fz-stat { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--cp-line); } .cp-fz-recent ul { grid-template-columns: minmax(0, 1fr); } .cp-fm-tools { padding: 10px; } } /* v5.45.0 · Verbindungs-/Sitzungshinweis (error-monitor.js → #cp-net) */ #cp-net { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 3000; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 14px; border-radius: 3px; border: 1px solid var(--cp-line-2, rgba(255,255,255,.16)); background: var(--cp-surface, #10131A); color: var(--cp-strong, #F6F6F4); font-size: 13px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.2,.75,.2,1), opacity .25s ease; } #cp-net.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } #cp-net i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #E0A43A; box-shadow: 0 0 10px #E0A43A; animation: cp-net-p 1.4s ease-in-out infinite; } #cp-net.is-ok i { background: var(--cp-success, #3FB984); box-shadow: 0 0 10px var(--cp-success, #3FB984); animation: none; } #cp-net.is-session i { background: #E5484D; box-shadow: 0 0 10px #E5484D; } #cp-net button { margin-left: 4px; height: 32px; padding: 0 12px; border: 0; border-radius: 3px; background: linear-gradient(180deg, var(--cp-rust-hi, #E8552A), var(--cp-rust, #C0431C)); color: #fff; font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } @keyframes cp-net-p { 50% { opacity: .35; } } @media (max-width: 767px) { #cp-net { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } /* v5.45.0 · Gespeicherte Ansichten im Menü „Spalten filtern“ */ .cp-cf-views { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--cp-line); } .cp-cf-vh { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .cp-cf-vh b { font-weight: 700; } .cp-cf-vlist { display: grid; gap: 2px; padding: 0 6px; max-height: 190px; overflow: auto; } .cp-cf-vi { display: flex; align-items: center; gap: 2px; border-radius: 3px; } .cp-cf-vi.is-on { background: var(--cp-rust-soft); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-cf-vapply { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 8px; border: 0; border-radius: 3px; background: none; color: var(--cp-strong); font: 500 13px/1 var(--cp-font, inherit); text-align: left; cursor: pointer; } .cp-cf-vapply:hover { background: color-mix(in srgb, var(--cp-text) 6%, transparent); } .cp-cf-vapply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-cf-vapply em { flex: none; font-style: normal; font-size: 11px; color: var(--cp-muted); } .cp-cf-vdel { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } .cp-cf-vdel:hover { color: #E5484D; background: color-mix(in srgb, #E5484D 10%, transparent); } .cp-cf-vdel svg { width: 12px; height: 12px; margin: 0 !important; } .cp-cf-vsave { display: flex; gap: 6px; padding: 8px 10px 4px; } .cp-cf-vsave[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-cf-vsave input { flex: 1; min-width: 0; height: 34px; padding: 0 10px !important; border-radius: 3px !important; font-size: 12.5px; } .cp-cf-vsave button { flex: none; height: 34px; padding: 0 12px; border: 0; border-radius: 3px; background: linear-gradient(180deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-cf-vsave button:disabled { opacity: .6; } .cp-cf-vnote { margin: 4px 12px; font-size: 12px; color: var(--cp-muted); } .cp-cf-vnote.is-bad { color: #E5484D; } .cp-cf-vtag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--cp-rust-soft); border: 1px solid var(--cp-rust-line); color: var(--cp-rust-hi); font-size: 12px; font-weight: 600; white-space: nowrap; } @media (pointer: coarse) { .cp-cf-vapply, .cp-cf-vsave input, .cp-cf-vsave button { height: 40px; } .cp-cf-vdel { width: 40px; height: 40px; } } /* v5.45.0 · Kundenportal: nächste Termine + Neuigkeiten (rechte Spalte) */ html[data-theme]:not(#cp) body .cp-portal-side { display: grid; gap: 16px; align-content: start; min-width: 0; } .cp-ev-list, .cp-act-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .cp-ev-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .cp-ev-day { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); line-height: 1; } .cp-ev-day b { font-size: 17px; font-weight: 600; color: var(--cp-strong); } .cp-ev-day small { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-rust-hi); } .cp-ev-t, .cp-act-list span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cp-ev-t b, .cp-act-list b { font-size: 13px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-ev-t small, .cp-act-list small { font-size: 11.5px; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-act-list a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 3px; color: var(--cp-text) !important; text-decoration: none !important; transition: background .15s ease; } html[data-theme]:not(#cp) body .cp-act-list a:hover { background: color-mix(in srgb, var(--cp-text) 5%, transparent); } .cp-act-list i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 0 4px var(--cp-rust-soft); } .cp-act-list .k-invoice i { background: #E0A43A; box-shadow: 0 0 0 4px color-mix(in srgb, #E0A43A 16%, transparent); } .cp-act-list .k-post i { background: var(--cp-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-success) 16%, transparent); } /* v5.45.0 · KI-Monatsbericht (client-health.js → .cp-rep) */ .cp-hc-rep { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; height: 38px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; transition: background .2s ease, transform .2s ease; } .cp-hc-rep:hover { background: color-mix(in srgb, var(--cp-rust-hi) 22%, transparent); transform: translateY(-1px); } .cp-hc-rep svg { width: 15px; height: 15px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-rep { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,5,8,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; } .cp-rep.is-in { opacity: 1; } .cp-rep-box { display: flex; flex-direction: column; width: min(820px, 100%); max-height: calc(100vh - 40px); border-radius: 3px; border: 1px solid var(--cp-line-2); background: radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--cp-rust-hi) 12%, transparent), transparent 60%), var(--cp-surface); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); transform: translateY(14px) scale(.985); transition: transform .3s cubic-bezier(.2,.75,.2,1); overflow: hidden; } .cp-rep.is-in .cp-rep-box { transform: none; } .cp-rep-box > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-rep-box h3 { margin: 8px 0 4px !important; font-size: 20px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--cp-strong) !important; } .cp-rep-box > header p { margin: 0; font-size: 12.5px; color: var(--cp-muted); max-width: 60ch; } .cp-rep-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } .cp-rep-x:hover { color: var(--cp-strong); } .cp-rep-x svg { width: 16px; height: 16px; margin: 0 !important; } .cp-rep-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid var(--cp-line); } .cp-rep-bar label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-rep-bar select { height: 38px; padding: 0 12px !important; border-radius: 3px !important; font-size: 13px; } .cp-rep-go { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 3px; background: linear-gradient(180deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: 0 10px 24px -14px var(--cp-rust-hi); } .cp-rep-go:disabled { opacity: .75; cursor: progress; } .cp-rep-go svg { width: 15px; height: 15px; margin: 0 !important; } .cp-rep-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: cp-tk-rot .8s linear infinite; } .cp-rep-out { flex: 1; overflow: auto; padding: 18px 22px; } .cp-rep-hint { margin: 10px 0; font-size: 13px; color: var(--cp-muted); text-align: center; } .cp-rep-hint.is-bad { color: #E5484D; } .cp-rep-sk { display: grid; gap: 10px; } .cp-rep-sk i { display: block; height: 14px; border-radius: 3px; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--cp-text) 8%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: ra-shimmer 1.4s linear infinite; } .cp-rep-sk i:nth-child(1) { width: 60%; height: 20px; } .cp-rep-sk i:nth-child(2) { width: 92%; } .cp-rep-sk i:nth-child(3) { width: 84%; } .cp-rep-sk i:nth-child(4) { width: 70%; } .cp-rep-doc { padding: 22px 24px; border-radius: 3px; background: #FFFFFF; color: #14161B; font-size: 13.5px; line-height: 1.65; box-shadow: 0 20px 50px -30px rgba(0,0,0,.9); animation: cp-reveal .4s var(--cp-e, ease) both; } .cp-rep-meta { display: flex; justify-content: space-between; gap: 10px; margin: -22px -24px 16px; padding: 14px 24px; border-radius: 3px 3px 0 0; background: #06070A; color: #F6F6F4; } .cp-rep-meta b { letter-spacing: .02em; font-weight: 600; } .cp-rep-meta span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #E8552A; align-self: center; } html[data-theme]:not(#cp):not(#cq) body .cp-rep-doc h3 { margin: 16px 0 6px !important; font-size: 14.5px !important; font-weight: 600 !important; color: #C0431C !important; text-transform: none !important; letter-spacing: 0 !important; } .cp-rep-doc p { margin: 0 0 8px; color: #14161B; } .cp-rep-doc ul { margin: 0 0 8px; padding-left: 18px; } .cp-rep-doc li { margin: 3px 0; color: #14161B; } html[data-theme]:not(#cp) body .cp-rep-doc strong { color: #06070A; } .cp-rep-note { margin: 10px 2px 0; font-size: 11.5px; color: var(--cp-muted); } .cp-rep-box > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--cp-line); } .cp-rep-box > footer[hidden] { display: none; } .cp-rep-box > footer button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); color: var(--cp-text); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-rep-box > footer button:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-rep-box > footer svg { width: 15px; height: 15px; margin: 0 !important; } @media (max-width: 640px) { .cp-rep { padding: 0; align-items: flex-end; } .cp-rep-box { max-height: 92vh; border-radius: 3px 3px 0 0; } .cp-rep-doc { padding: 16px; } .cp-rep-meta { margin: -16px -16px 12px; padding: 12px 16px; } } /* =========================================================================== v5.46.0 · Berichte: Motion & Motion Graphics (reports-hub.js) =========================================================================== */ .rh-page { --rh-ease: cubic-bezier(.2,.75,.2,1); } /* Kopf */ .rh-head .rh-kicker i, .rh-fin .rh-kicker i { animation: rh-pulse 2.6s ease-in-out infinite; } @keyframes rh-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cp-rust-hi) 14%, transparent), 0 0 16px var(--cp-rust-hi); } } html[data-theme]:not(#cp):not(#cq) body .rh-page .rh-head h1 { animation: rh-title .9s var(--rh-ease) both; } @keyframes rh-title { from { opacity: 0; transform: translateY(12px); letter-spacing: -.045em; filter: blur(4px); } } .rh-head .rh-sub { animation: cp-reveal .7s var(--rh-ease) both .12s; } .rh-per { animation: cp-reveal .7s var(--rh-ease) both .18s; } /* Gleitende Indikatoren (Zeitraum + Navigation) */ .rh-seg, .rh-nav { position: relative; } .rh-seg > button, .rh-nav > .rh-nav-i, .rh-nav > .rh-nav-g { position: relative; z-index: 1; } .rh-ind { position: absolute; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: 3px; pointer-events: none; transition: transform .45s var(--rh-ease, cubic-bezier(.2,.75,.2,1)), width .45s var(--rh-ease, cubic-bezier(.2,.75,.2,1)), opacity .2s ease; } .rh-seg > .rh-ind { background: var(--cp-rust-soft); box-shadow: inset 0 0 0 1px var(--cp-rust-line), 0 6px 16px -10px var(--cp-rust-hi); } .rh-seg button.is-on { background: transparent !important; box-shadow: none !important; } .rh-nav > .rh-ind { top: 4px; bottom: 4px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); box-shadow: inset 0 -2px 0 var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .rh-nav > .rh-nav-i.is-on, html[data-theme]:not(#cp):not(#cq) body .rh-nav > .rh-nav-i:hover { background: transparent !important; box-shadow: none !important; } /* Einblenden beim Scrollen; Animationen im Inneren warten, bis die Karte sichtbar ist */ .rh-rv { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .6s ease, transform .8s var(--rh-ease); transition-delay: calc(var(--i, 0) * 80ms); animation: none !important; } .rh-rv.is-vis { opacity: 1; transform: none; } .rh-rv:not(.is-vis) :is(.rh-bar > span, .rh-rank-b i, .rh-stack > i, .rh-g-v, .rh-tr-bar b, .rh-avg) { animation-play-state: paused !important; } .rh-body { transition: opacity .25s ease, transform .35s var(--rh-ease); } .rh-body.is-out { opacity: .3; transform: translateY(6px); } /* KPI-Kacheln: Sparkline, Hover-Kante */ .rh-kpi { isolation: isolate; } .rh-kpi > :not(.rh-spark) { position: relative; z-index: 1; } .rh-kpi .rh-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46px; z-index: 0; color: var(--cp-rust-hi); opacity: .75; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--rh-ease) .35s; } .rh-kpi.is-vis .rh-spark { clip-path: inset(0 0 0 0); } .rh-spark-l { fill: none; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .rh-kpi::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--cp-rust-line), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .rh-kpi:hover::before, .rh-kpi:focus-visible::before { opacity: 1; } .rh-kpi > b { font-variant-numeric: tabular-nums; } .rh-d { animation: rh-pop .5s var(--rh-ease) both .7s; } @keyframes rh-pop { from { opacity: 0; transform: scale(.8); } } /* Säulendiagramm mit Achse, Hilfslinien, Ø-Linie, Spalten-Hover */ .rh-chart { position: relative; padding-left: 46px; } .rh-axis { position: absolute; left: 0; top: 0; bottom: 20px; width: 42px; pointer-events: none; } .rh-axis span { position: absolute; right: 6px; transform: translateY(50%); font-size: 10px; color: var(--cp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .rh-bars { position: relative; } .rh-bars::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 20px; pointer-events: none; border-top: 1px dashed var(--cp-line); background: linear-gradient(var(--cp-line), var(--cp-line)) 0 50% / 100% 1px no-repeat; } .rh-bar { border-radius: 3px; transition: background .15s ease; } .rh-bar:hover, .rh-bar:focus-visible { background: color-mix(in srgb, var(--cp-text) 5%, transparent); } .rh-bar > span { animation-duration: .9s !important; animation-timing-function: var(--rh-ease) !important; animation-delay: calc(var(--i) * 22ms + 250ms) !important; } .rh-bar.is-max > span:first-child { box-shadow: 0 0 18px -3px var(--cp-rust-hi); } .rh-avg { position: absolute; left: 0; right: 0; height: 0; z-index: 3; border-top: 1px dashed color-mix(in srgb, var(--cp-glow) 55%, transparent); pointer-events: none; animation: rh-fade .6s ease both 1.1s; } .rh-avg span { position: absolute; right: 0; top: -19px; padding: 1px 7px; border-radius: 3px; background: var(--cp-surface); border: 1px solid var(--cp-line-2); font-size: 10px; font-weight: 600; color: var(--cp-glow); white-space: nowrap; } @keyframes rh-fade { from { opacity: 0; } } /* Ranglisten, Tabelle */ .rh-rank li { opacity: 0; transform: translateX(-8px); } .rh-rv.is-vis .rh-rank li { animation: rh-in-x .55s var(--rh-ease) forwards; animation-delay: calc(var(--i) * 60ms + 300ms); } @keyframes rh-in-x { to { opacity: 1; transform: none; } } .rh-rank-b i { animation-duration: 1s !important; animation-timing-function: var(--rh-ease) !important; animation-delay: calc(var(--i) * 70ms + 400ms) !important; } html[data-theme]:not(#cp):not(#cq) body .rh-tr > span:first-child { display: flex; flex-direction: column; gap: 5px; } .rh-tr-bar { display: block; width: min(160px, 100%); height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .rh-tr-bar b { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--cp-success) 60%, transparent), var(--cp-success)); transform-origin: left; animation: ra-grow-x 1s var(--rh-ease) both .5s; } .rh-rv.is-vis .rh-tr:not(.is-h) { animation: rh-in-x .5s var(--rh-ease) backwards; animation-delay: calc(var(--i, 0) * 50ms + 250ms); } /* Support: Messring */ .rh-sup { display: flex; gap: 10px; align-items: stretch; } .rh-sup .rh-stats.is-3 { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); } .rh-gauge { position: relative; flex: none; width: 128px; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 3px; border: 1px solid var(--cp-line); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--g, var(--cp-success)) 10%, transparent), transparent 70%); --g: var(--cp-success); } .rh-gauge.is-warn { --g: #E0A43A; } .rh-gauge.is-na { --g: var(--cp-muted); } .rh-gauge svg { width: 104px; height: 104px; margin: 0 !important; } .rh-g-b { fill: none; stroke: color-mix(in srgb, var(--cp-text) 8%, transparent); stroke-width: 6; } .rh-g-v { fill: none; stroke: var(--g); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--g) 55%, transparent)); animation: ra-gauge 1.6s var(--rh-ease, cubic-bezier(.2,.75,.2,1)) both .35s; } .rh-gauge > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; } .rh-gauge b { font-size: 22px; font-weight: 500; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .rh-gauge small { margin-top: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); } /* Vertrieb: fließende Verbindungen, Stapel wächst */ .rh-funnel > .rh-flow { position: relative; flex: 0 0 34px; align-self: center; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--cp-rust-hi) 0 6px, transparent 6px 11px); background-size: 22px 2px; animation: rh-flow 1.1s linear infinite; opacity: .85; } .rh-funnel > .rh-flow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--cp-rust-hi); border-right: 0; } @keyframes rh-flow { to { background-position: 22px 0; } } .rh-stack > i { transform-origin: left; animation: ra-grow-x .9s var(--rh-ease) both; animation-delay: calc(var(--i) * 140ms + 300ms); } .rh-funnel > div { transition: transform .25s var(--rh-ease), border-color .25s ease; } .rh-funnel > div:hover { transform: translateY(-2px); border-color: var(--cp-rust-line); } /* Zeit: laufender Timer */ .rh-live { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-success); } .rh-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-success); animation: rh-live 1.6s ease-in-out infinite; } @keyframes rh-live { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cp-success) 18%, transparent); } } /* Finanzen-Kachel: ruhig wandernder Glanz */ .rh-fin { position: relative; overflow: hidden; isolation: isolate; } .rh-fin > * { position: relative; z-index: 1; } .rh-fin::after { content: ""; position: absolute; z-index: 0; width: 60%; height: 220%; top: -60%; left: -10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cp-rust-hi) 16%, transparent), transparent 72%); animation: rh-drift 16s ease-in-out infinite alternate; pointer-events: none; } @keyframes rh-drift { to { transform: translateX(120%) translateY(10%); } } .rh-fin.is-vis .rh-fin-go button { animation: rh-pop .5s var(--rh-ease) backwards; animation-delay: calc(var(--i) * 70ms + .35s); } .rh-fin-go button svg { transition: transform .2s ease; } .rh-fin-go button:hover svg { transform: translateX(3px); } .rh-btn svg { transition: transform .2s ease; } html[data-theme]:not(#cp):not(#cq) body .rh-btn:hover svg { transform: translateX(3px); } /* Karten: feine Tiefe beim Überfahren */ .rh-card { transition: border-color .3s ease, box-shadow .3s ease, opacity .6s ease, transform .8s var(--rh-ease); } .rh-card:hover { border-color: color-mix(in srgb, var(--cp-rust-hi) 30%, var(--cp-line-2)); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 50px -34px rgba(0,0,0,.9); } /* Berichtsseiten (RISE): Inhalt gleitet ein, Tabellenzeilen gestaffelt, Diagramme */ body:has(.reports-tabs[data-rh]) .reports-tabs[data-rh] + .page-wrapper > *, body:has(.reports-tabs[data-rh]) .rh-dup { animation: cp-reveal .6s cubic-bezier(.2,.75,.2,1) both .08s; } .rh-nav-wrap { animation: cp-reveal .5s cubic-bezier(.2,.75,.2,1) both; } .rh-rows-in > tr { animation: rh-row .5s cubic-bezier(.2,.75,.2,1) both; } .rh-rows-in > tr:nth-child(2) { animation-delay: 30ms; } .rh-rows-in > tr:nth-child(3) { animation-delay: 60ms; } .rh-rows-in > tr:nth-child(4) { animation-delay: 90ms; } .rh-rows-in > tr:nth-child(5) { animation-delay: 120ms; } .rh-rows-in > tr:nth-child(6) { animation-delay: 150ms; } .rh-rows-in > tr:nth-child(7) { animation-delay: 180ms; } .rh-rows-in > tr:nth-child(8) { animation-delay: 210ms; } .rh-rows-in > tr:nth-child(9) { animation-delay: 240ms; } .rh-rows-in > tr:nth-child(10) { animation-delay: 270ms; } .rh-rows-in > tr:nth-child(n+11) { animation-delay: 300ms; } @keyframes rh-row { from { opacity: 0; transform: translateY(6px); } } .rh-chart-card { overflow: hidden; } .rh-dup { position: relative; overflow: hidden; } .rh-dup::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--cp-glow) 10%, transparent), transparent); animation: rh-sweep 1.8s ease .6s 1 both; pointer-events: none; } @keyframes rh-sweep { to { left: 110%; } } /* Bewegung reduziert */ @media (prefers-reduced-motion: reduce) { .rh-page *, .rh-page *::before, .rh-page *::after, .rh-nav-wrap, .rh-nav-wrap *, .rh-dup, .rh-dup::after, .rh-rows-in > tr { animation: none !important; transition: none !important; } .rh-rv, .rh-rank li { opacity: 1 !important; transform: none !important; } .rh-kpi .rh-spark { clip-path: none !important; } } html.cp-motion-off .rh-page *, html.cp-motion-off .rh-page *::before, html.cp-motion-off .rh-page *::after, html.cp-motion-off .rh-nav-wrap *, html.cp-motion-off .rh-rows-in > tr, html.cp-motion-off .rh-dup::after { animation: none !important; transition: none !important; } html.cp-motion-off .rh-rv, html.cp-motion-off .rh-rank li { opacity: 1 !important; transform: none !important; } html.cp-motion-off .rh-kpi .rh-spark { clip-path: none !important; } @media (max-width: 767px) { .rh-sup { flex-direction: column; } .rh-gauge { width: 100%; } .rh-sup .rh-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rh-chart { padding-left: 38px; } .rh-axis { width: 34px; } .rh-kpi .rh-spark { height: 34px; } } .rh-chart-empty { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; animation: rh-fade .5s ease both .3s; } .rh-chart-empty b { padding: 8px 14px 2px; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } .rh-chart-empty span { font-size: 12px; color: var(--cp-muted); } .rh-chart-empty::before { content: ""; position: absolute; inset: 14% 10%; z-index: -1; border-radius: 3px; background: radial-gradient(closest-side, var(--cp-surface) 55%, transparent); } /* =========================================================================== v5.47.0 · KI-Assistent in Nachrichten & Chat (msg-assist.js) =========================================================================== */ .cp-ai { position: relative; display: inline-flex; align-items: center; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-ai-btn:hover, html[data-theme]:not(#cp):not(#cq) body .cp-ai.is-open .cp-ai-btn { background: color-mix(in srgb, var(--cp-rust-hi) 22%, transparent); box-shadow: 0 0 18px -6px var(--cp-rust-hi); } .cp-ai-btn svg { width: 16px; height: 16px; color: var(--cp-rust-hi); margin: 0 !important; transition: transform .3s ease; } .cp-ai-btn:hover svg { transform: rotate(12deg) scale(1.1); } .cp-ai.is-compact .cp-ai-btn { width: 34px; height: 34px; padding: 0; border-radius: 3px; } .cp-ai.is-busy .cp-ai-btn svg { animation: cp-ai-spin 1s linear infinite; } @keyframes cp-ai-spin { to { transform: rotate(360deg); } } .cp-ai-menu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 60; width: 272px; padding: 6px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: 0 24px 50px -18px rgba(0,0,0,.85); opacity: 0; transform: translateY(6px) scale(.98); transform-origin: bottom left; pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.75,.2,1); } .cp-ai.is-open .cp-ai-menu { opacity: 1; transform: none; pointer-events: auto; } .cp-ai-h { display: flex; align-items: center; gap: 7px; padding: 6px 8px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } .cp-ai-h svg { width: 14px; height: 14px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-ai-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 3px; background: none; color: var(--cp-text); text-align: left; cursor: pointer; transition: background .15s ease; } .cp-ai-menu > button:hover:not(:disabled), .cp-ai-menu > button:focus-visible { background: color-mix(in srgb, var(--cp-text) 6%, transparent); outline: none; } .cp-ai-menu > button:disabled { opacity: .4; cursor: default; } .cp-ai-menu > button svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); margin: 0 !important; } .cp-ai-menu > button span { display: flex; flex-direction: column; min-width: 0; } .cp-ai-menu b { font-size: 13px; font-weight: 600; color: var(--cp-strong); } .cp-ai-menu small { font-size: 11px; color: var(--cp-muted); } .cp-ai-note { margin: 4px 8px 4px; font-size: 10.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-ai-undo { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: none; color: var(--cp-muted); font: 500 12px/1 var(--cp-font, inherit); cursor: pointer; animation: rh-pop .3s ease both; } html[data-theme]:not(#cp):not(#cq) body .cp-ai-undo:hover { color: var(--cp-strong); } .cp-ai-undo[hidden] { display: none !important; } .cp-ai-undo svg { width: 14px; height: 14px; margin: 0 !important; } .cp-ai-flash { position: absolute; left: 0; bottom: calc(100% + 8px); white-space: nowrap; padding: 6px 10px; border-radius: 3px; background: var(--cp-surface); border: 1px solid color-mix(in srgb, #E0A43A 45%, transparent); font-size: 12px; color: var(--cp-text); box-shadow: 0 10px 24px -12px rgba(0,0,0,.7); } /* Eingabefeld „arbeitet“: fließende Kante */ html[data-theme]:not(#cp):not(#cq) body .cp-ai-working textarea { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cp-rust-hi) 10%, transparent), transparent) !important; background-size: 200% 100% !important; animation: ra-shimmer 1.2s linear infinite; } /* Chatfenster */ html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-ai { margin: 0 2px; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-ai-menu { width: 250px; } /* Nachrichten-Seite: Emoji-Auswahl */ .cp-me { position: relative; } html[data-theme]:not(#cp):not(#cq) body .cp-me-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: none; color: var(--cp-muted); cursor: pointer; transition: color .2s ease, transform .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-me-btn:hover { color: var(--cp-rust-hi); transform: rotate(-8deg); } .cp-me-btn svg { width: 17px; height: 17px; margin: 0 !important; } .cp-me-pop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 60; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 8px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: 0 24px 50px -18px rgba(0,0,0,.85); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, transform .22s ease; } .cp-me.is-open .cp-me-pop { opacity: 1; transform: none; pointer-events: auto; } .cp-me-pop button { width: 34px; height: 34px; border: 0; border-radius: 3px; background: none; font-size: 19px; line-height: 1; cursor: pointer; transition: transform .12s ease, background .12s ease; } .cp-me-pop button:hover { background: color-mix(in srgb, var(--cp-text) 8%, transparent); transform: scale(1.18); } /* Nachrichten-Seite: Kopieren/Zitieren */ html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m .w-100 { position: relative; } .cp-m-tools { position: absolute; top: -12px; right: 10px; display: inline-flex; gap: 2px; padding: 2px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: 0 8px 18px -10px rgba(0,0,0,.8); opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; } .cp-m:hover .cp-m-tools, .cp-m-tools:focus-within { opacity: 1; transform: none; } .cp-m-tools button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } .cp-m-tools button:hover { color: var(--cp-strong); background: color-mix(in srgb, var(--cp-text) 7%, transparent); } .cp-m-tools svg { width: 14px; height: 14px; margin: 0 !important; } .cp-m.is-me .cp-m-tools { right: auto; left: 10px; } @media (hover: none) { .cp-m-tools { opacity: 1; transform: none; position: static; margin-top: 8px; } } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer .cp-ai, html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer .cp-me { flex: none; } @media (max-width: 640px) { .cp-ai-menu { width: min(272px, calc(100vw - 40px)); } .cp-ai-btn span { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ai-btn { width: 38px; padding: 0; } } /* =========================================================================== v5.47.0 · Dateien: Aufteilung – Raster statt Tabelle, Details nur bei Auswahl, Ordnerleiste haftet, sinnvolle Höhen, „Zuletzt hochgeladen“ als eine Zeile =========================================================================== */ @container cpfiles (min-width: 1101px) { html[data-theme]:not(#cp):not(#cq) body .box:has(> #file-manager-items-box) { display: grid !important; grid-template-columns: 232px minmax(0, 1fr) 320px; gap: 16px; align-items: start; } html[data-theme]:not(#cp):not(#cq) body .box:has(> #file-manager-items-box):has(> #file-details-box .no-file-selected) { grid-template-columns: 232px minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .box:has(> #file-manager-items-box) > .box-content { display: block !important; width: auto !important; min-width: 0; padding-right: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .box:has(> #file-manager-items-box) > #file-details-box:has(.no-file-selected) { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .box:has(> #file-manager-items-box) > #file-details-box { position: sticky; top: 14px; animation: cp-fm-in .35s cubic-bezier(.2,.75,.2,1) both; } html[data-theme]:not(#cp):not(#cq) body #file-details-box .card, html[data-theme]:not(#cp):not(#cq) body #file-details-box .sticky-details-section, html[data-theme]:not(#cp):not(#cq) body #file-details-box #file-manager-right-panel { width: 100% !important; } html[data-theme]:not(#cp):not(#cq) body .box:has(> #file-manager-items-box) > #file-manager-sidebar { position: sticky; top: 14px; } } @keyframes cp-fm-in { from { opacity: 0; transform: translateX(14px); } } /* Höhen: kein 670-px-Block mehr, Liste scrollt ab Bildschirmhöhe */ html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-container { min-height: 0 !important; height: auto !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-window-area { min-height: 260px !important; max-height: calc(100vh - 250px); overflow-y: auto !important; overscroll-behavior: contain; padding: 14px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-window-area:has(> .cp-fm-empty) { min-height: 300px !important; max-height: none; } html[data-theme]:not(#cp):not(#cq) body .cp-fm .cp-fm-empty { padding: 26px 22px 22px; } /* Ordnerleiste */ html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar { padding: 12px !important; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar .search-box, html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar .list-group:first-child { margin: 0 0 8px !important; width: 100% !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-search-box { height: 40px !important; border-radius: 3px !important; font-size: 13px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar .list-group-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px !important; border: 0 !important; border-radius: 3px !important; background: none !important; font-size: 13.5px; transition: background .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar .list-group-item:hover, html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar .list-group-item.active { background: color-mix(in srgb, var(--cp-text) 6%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar > label { padding: 14px 10px 6px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #favourite-folders:not(:has(li))::after { padding: 2px 10px 6px; font-size: 11px; } /* Kopf der Liste kompakter */ html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar { padding: 12px 16px !important; min-height: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar .btn { height: 38px; padding: 0 14px !important; border-radius: 3px !important; font-size: 13px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-container-card { border-radius: 3px !important; overflow: hidden; } .cp-fm-tools { padding: 8px 16px; } /* Dateizentrale: „Zuletzt hochgeladen“ als eine waagerecht scrollende Zeile */ .cp-fz-recent ul { display: flex !important; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; } .cp-fz-recent .cp-fz-item { flex: 0 0 260px; scroll-snap-align: start; } .cp-fz { padding: 14px 16px; margin-bottom: 12px; } .cp-fz-recent { margin-top: 12px; padding-top: 10px; } @media (max-width: 767px) { .cp-fz-recent .cp-fz-item { flex-basis: 230px; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-window-area { max-height: none; } } /* v5.47.0 · Antwortfeld darf Menüs (KI, Emoji) nicht abschneiden */ html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form > .box > .form-group { overflow: visible !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form textarea { border-radius: 3px 3px 0 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer { border-radius: 0 0 3px 3px !important; position: relative; z-index: 5; } html[data-theme]:not(#cp):not(#cq) body .cp-msg #reply-form-container, html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-details-section { overflow: visible !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar .btn { display: inline-flex !important; align-items: center !important; gap: 7px; line-height: 1 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar .btn svg { margin: 0 !important; } /* v5.47.0 · KI-Menü im Chatfenster: deckender Grund (der Chat nutzt durchscheinende Flächen) */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-ai-menu { background: #12151C !important; border-color: rgba(238,240,244,.16) !important; backdrop-filter: none; } html[data-theme="light"]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-ai-menu { background: #FFFFFF !important; border-color: rgba(10,12,17,.14) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-ai.is-open .cp-ai-menu { box-shadow: 0 24px 60px -18px rgba(0,0,0,.9); } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-ai-menu > button svg { width: 30px !important; height: 30px !important; min-width: 30px; padding: 7px !important; flex: none; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-ai-btn svg, html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-ai-h svg { width: 16px !important; height: 16px !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-ai-btn { background: var(--cp-rust-soft) !important; border: 1px solid var(--cp-rust-line) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ai.is-compact .cp-ai-btn { width: 34px; height: 34px; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ai-btn svg { flex: none; } /* =========================================================================== v5.48.0 · „Mein Tag“ (my-day.js): persönliche Tagesübersicht #/mein-tag Kopf mit Tagesleiste, KI-Assistent, Jetzt dran + Fokus-Timer, Aufgaben, Woche, Agenda, Wartende Kunden, Vertrieb – mit Motion (reduziert beachtet) =========================================================================== */ #rst-menu-myday > a { position: relative; } html[data-theme]:not(#cp):not(#cq) body #rst-menu-myday .cp-day-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); color: var(--cp-strong); font: 700 10.5px/20px var(--cp-font, inherit); text-align: center; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body #rst-menu-myday .cp-day-badge.is-late { background: var(--cp-rust); color: #fff; /* v5.76.7: dunkleres Rost (Weiß darauf 5,2 statt 3,6 : 1), ohne orangen Schein (Gestaltungsregel) */ box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body #rst-menu-myday .cp-day-badge[hidden] { display: none !important; } .sidebar-toggled #rst-menu-myday .cp-day-badge { position: absolute; top: 4px; right: 6px; min-width: 8px; height: 8px; padding: 0; font-size: 0; } .cp-day { --d-ease: cubic-bezier(.2,.75,.2,1); padding: 24px 28px 70px; max-width: none; margin: 0; color: var(--cp-text); } /* v5.102.1: volle Breite wie die übrigen Seiten (vorher max. 1520 px mittig → Lücken links/rechts bei eingeklapptem Menü) */ .cp-day-sk { display: grid; gap: 14px; } .cp-day-sk i { display: block; height: 110px; border-radius: 3px; background: linear-gradient(100deg, var(--cp-surface) 30%, color-mix(in srgb, var(--cp-text) 5%, var(--cp-surface)) 50%, var(--cp-surface) 70%); background-size: 250% 100%; animation: ra-shimmer 1.5s linear infinite; } .cp-day-sk i:first-child { height: 250px; } .cp-day-sk i:last-child { height: 340px; } .cp-day-err { padding: 40px; text-align: center; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-strong); font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn:hover { background: var(--cp-surface-2); border-color: color-mix(in srgb, var(--cp-text) 26%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn:active { transform: scale(.97); } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn.is-primary { border-color: transparent; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; box-shadow: 0 10px 26px -14px rgba(192,67,28,.9); } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn.is-primary:hover { box-shadow: 0 12px 30px -12px rgba(232,85,42,.95); } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn.is-icon { width: 40px; padding: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn:disabled { opacity: .55; cursor: wait; } .cp-day-btn svg { width: 16px; height: 16px; margin: 0 !important; flex: none; } .cp-day.is-refresh [data-act="refresh"] svg { animation: cp-ai-spin .9s linear infinite; } html[data-theme]:not(#cp):not(#cq) body .cp-day-x, html[data-theme]:not(#cp):not(#cq) body .cp-day-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: 3px; background: none; color: var(--cp-muted) !important; cursor: pointer; text-decoration: none !important; transition: color .15s ease, background .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-day-x:hover, html[data-theme]:not(#cp):not(#cq) body .cp-day-ib:hover { color: var(--cp-strong) !important; background: color-mix(in srgb, var(--cp-text) 8%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-day-x.is-ok { color: var(--cp-success) !important; } .cp-day-x svg, .cp-day-ib svg { width: 15px; height: 15px; margin: 0 !important; } /* ---- Kopf ---- */ .cp-day-hero { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 16px; padding: 24px 26px 18px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: linear-gradient(160deg, color-mix(in srgb, var(--cp-rust-hi) 7%, var(--cp-surface)) 0%, var(--cp-surface) 55%); box-shadow: var(--cp-shadow); } .cp-day-glow { position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(closest-side, rgba(232,85,42,.22), rgba(232,85,42,.06) 55%, transparent); filter: blur(10px); animation: cp-day-drift 22s ease-in-out infinite alternate; pointer-events: none; } html[data-theme="light"] .cp-day-glow { background: radial-gradient(closest-side, rgba(232,85,42,.14), rgba(233,220,200,.25) 55%, transparent); } @keyframes cp-day-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-120px, 40px) scale(1.08); } 100% { transform: translate(-40px, 90px) scale(.95); } } .cp-day-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; } .cp-day-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-muted); } .cp-day-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 10px var(--cp-rust-hi); animation: cp-day-beat 2.4s ease-in-out infinite; } @keyframes cp-day-beat { 50% { box-shadow: 0 0 0 5px rgba(232,85,42,.18), 0 0 14px var(--cp-rust-hi); } } .cp-day-clock { color: var(--cp-strong); letter-spacing: .12em; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-day h1 { margin: 8px 0 6px !important; font-size: clamp(28px, 3.2vw, 44px) !important; font-weight: 300 !important; letter-spacing: -.025em !important; text-transform: none !important; color: var(--cp-strong) !important; line-height: 1.08 !important; } .cp-day-hi p { margin: 0; font-size: 14px; color: var(--cp-muted); } .cp-day-hi p b { color: var(--cp-strong); font-weight: 600; } .cp-day-ring { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-surface) 70%, transparent); backdrop-filter: blur(6px); } .cp-day-ring svg { width: 70px; height: 70px; transform: rotate(-90deg); flex: none; } .cp-day-ring circle { fill: none; stroke-width: 7; } .cp-day-ring .t { stroke: color-mix(in srgb, var(--cp-text) 9%, transparent); } .cp-day-ring .v { stroke: url(#cp-day-rg); stroke-linecap: round; transition: stroke-dashoffset 1.3s var(--d-ease); filter: drop-shadow(0 0 6px rgba(232,85,42,.45)); } .cp-day-ring b { display: block; font-size: 26px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; line-height: 1.05; } .cp-day-ring b em { font-style: normal; } .cp-day-ring small { font-size: 14px; color: var(--cp-muted); font-weight: 500; } .cp-day-ring span { font-size: 12px; color: var(--cp-muted); } /* Kennzahlen */ .cp-day-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 20px 0 18px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-kpi { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 64px; padding: 10px 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-deep) 55%, transparent); color: var(--cp-text); text-align: left; cursor: pointer; overflow: hidden; transition: transform .25s var(--d-ease), border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-day-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cp-text) 26%, transparent); } .cp-day-kpi svg { grid-row: 1 / span 2; width: 36px; height: 36px; padding: 9px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-muted); margin: 0 !important; } .cp-day-kpi b { font-size: 24px; font-weight: 600; line-height: 1.05; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-day-kpi span { font-size: 12px; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body .cp-day-kpi.is-late { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-day-kpi.is-late svg { background: color-mix(in srgb, var(--cp-rust-hi) 18%, transparent); color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-day-kpi.is-late b { color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-day-kpi.is-zero b { color: var(--cp-dim); font-weight: 500; } .cp-day-kpi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%); transform: translateX(-100%); } .cp-day.is-in .cp-day-kpi::after { animation: cp-day-sheen 1.2s .5s var(--d-ease) both; } .cp-day.is-in .cp-day-kpi:nth-child(2)::after { animation-delay: .58s; } .cp-day.is-in .cp-day-kpi:nth-child(3)::after { animation-delay: .66s; } .cp-day.is-in .cp-day-kpi:nth-child(4)::after { animation-delay: .74s; } .cp-day.is-in .cp-day-kpi:nth-child(5)::after { animation-delay: .82s; } @keyframes cp-day-sheen { to { transform: translateX(100%); } } /* Tagesleiste */ .cp-day-line { position: relative; } .cp-day-allday { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .cp-day-allday span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); font-size: 12px; color: var(--cp-text); } .cp-day-allday svg { width: 13px; height: 13px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-day-track { position: relative; height: 46px; border-radius: 3px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cp-text) 5%, transparent) 0 1px, transparent 1px calc(100% / 13)), color-mix(in srgb, var(--cp-deep) 60%, transparent); border: 1px solid var(--cp-line); overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-day-lb { position: absolute; top: 7px; bottom: 7px; left: var(--l); width: var(--w); min-width: 10px; padding: 0 8px; border: 0; border-radius: 3px; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; font: 600 11.5px/32px var(--cp-font, inherit); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(192,67,28,.9); transform-origin: left center; transform: scaleX(0); transition: transform .7s var(--d-ease), filter .2s ease, opacity .3s ease; transition-delay: calc(.35s + var(--i, 0) * 90ms); } html[data-theme]:not(#cp):not(#cq) body .cp-day.is-in .cp-day-lb { transform: scaleX(1); } html[data-theme]:not(#cp):not(#cq) body .cp-day-lb:hover { filter: brightness(1.12); } .cp-day-lb.is-past { opacity: .45; } .cp-day-lb span { pointer-events: none; } .cp-day-lt { position: absolute; top: 50%; left: var(--l); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 3px; transform: rotate(45deg); background: var(--cp-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-surface) 80%, transparent); } .cp-day-now { position: absolute; top: 0; bottom: 0; left: var(--l); width: 2px; margin-left: -1px; background: var(--cp-strong); box-shadow: 0 0 10px rgba(255,255,255,.35); transition: left 1s linear; } html[data-theme="light"] .cp-day-now { box-shadow: none; } .cp-day-now::before { content: ""; position: absolute; top: -1px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--cp-strong); animation: cp-day-beat 2s ease-in-out infinite; } html[data-theme]:not(#cp) body .cp-day-now b { position: absolute; bottom: 3px; left: 6px; padding: 1px 5px; border-radius: 3px; background: var(--cp-strong); color: var(--cp-void); font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .cp-day-free { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12.5px; color: var(--cp-dim); } .cp-day-hours { position: relative; height: 18px; margin-top: 4px; } .cp-day-hours span { position: absolute; left: var(--l); transform: translateX(-50%); font-size: 10.5px; color: var(--cp-dim); font-variant-numeric: tabular-nums; } .cp-day-hours span:first-child { transform: none; } .cp-day-hours span:last-child { transform: translateX(-100%); } .cp-day-hero-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; } .cp-day-keys { margin-right: auto; font-size: 11px; color: var(--cp-dim); } .cp-day-keys kbd { padding: 1px 6px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 5%, transparent); color: var(--cp-muted); font: 600 10.5px/1.5 var(--cp-font, inherit); box-shadow: none; margin-left: 6px; } .cp-day-timer-pill { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; padding: 6px 12px; border-radius: 999px; background: var(--cp-rust-soft); border: 1px solid var(--cp-rust-line); color: var(--cp-strong); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .cp-day-timer-pill[hidden] { display: none; } .cp-day-timer-pill svg { width: 14px; height: 14px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-day-timer-pill:not([hidden]) + .cp-day-keys { display: none; } /* ---- KI-Assistent ---- */ .cp-day-ai { position: relative; margin-bottom: 16px; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: var(--cp-shadow); overflow: hidden; } .cp-day-ai::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--cp-day-a, 0deg), transparent 0 70%, rgba(232,85,42,.8) 82%, transparent 95%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .cp-day-ai.is-busy::before { opacity: 1; animation: cp-day-spin 1.6s linear infinite; } @property --cp-day-a { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes cp-day-spin { to { --cp-day-a: 360deg; } } .cp-day-ai-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .cp-day-orb { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #F9A27E, #E8552A 45%, #7A2410 100%); box-shadow: 0 0 22px -4px rgba(232,85,42,.8), inset 0 0 10px rgba(255,255,255,.25); animation: cp-day-orb 6s ease-in-out infinite; } .cp-day-orb i { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 65% 70%, rgba(255,255,255,.55), transparent 45%); animation: cp-day-orb-i 4s ease-in-out infinite; } .cp-day-ai.is-busy .cp-day-orb { animation-duration: 1.4s; } @keyframes cp-day-orb { 50% { transform: scale(1.07); box-shadow: 0 0 30px -2px rgba(232,85,42,.9), inset 0 0 12px rgba(255,255,255,.3); } } @keyframes cp-day-orb-i { 50% { transform: translate(-4px, -3px) scale(.8); } } /* v5.51.1 · KI-Symbol als plastisches 3D-Hexagon (reines CSS 3D) Aufbau je Seite: Grundplatte (.f/.k) mit Fase, erhabener Innen-Schild (.fi/.ki, eigener Schattenwurf), schwebende Glyphen-Ebene (.fg/.kg, Parallaxe) + 6 schattierte Kanten (.e1–.e6). Größe über --s, Dicke --t, spitze Ecke oben. */ .cp-hex3d { --s: 42px; --r: calc(var(--s) * .47); --a: calc(var(--r) * .8660254); --t: calc(var(--s) * .26); position: relative; flex: none; display: inline-block; width: var(--s); height: var(--s); perspective: calc(var(--s) * 3.6); animation: cp-hex3d-float 7s ease-in-out infinite; } .cp-hex3d::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(232, 85, 42, .32), rgba(232, 85, 42, .08) 55%, transparent 72%); filter: blur(4px); } .cp-hex3d::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -16%; height: 16%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(120, 30, 8, .25) 55%, transparent); filter: blur(2.5px); animation: cp-hex3d-shadow 7s ease-in-out infinite; } .cp-hex3d-b { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(-26deg); animation: cp-hex3d-spin 7s infinite; } .cp-hex3d i { position: absolute; left: 50%; top: 50%; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .cp-hex3d .f, .cp-hex3d .k, .cp-hex3d .fi, .cp-hex3d .ki, .cp-hex3d .fg, .cp-hex3d .kg { width: calc(var(--r) * 2); height: calc(var(--r) * 1.7320508); margin: calc(var(--r) * -.8660254) 0 0 calc(var(--r) * -1); } /* v5.54.0: flache Seite unten/oben wie das „O“ im Content-Logo (vorher Spitze oben) */ .cp-hex3d .f, .cp-hex3d .k, .cp-hex3d .fi b, .cp-hex3d .ki b { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); } /* Grundplatte mit Fase: außen dunkler Rand, innen Licht von links oben */ .cp-hex3d .f { transform: translateZ(calc(var(--t) / 2)); background: radial-gradient(90% 80% at 50% 50%, transparent 58%, rgba(70, 14, 2, .38) 100%), linear-gradient(150deg, #FF9E74 0%, #E8552A 38%, #B53B18 75%, #7E230C 100%); } .cp-hex3d .k { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); background: radial-gradient(90% 80% at 50% 50%, transparent 58%, rgba(60, 12, 2, .45) 100%), linear-gradient(210deg, #F07A4C 0%, #C9461F 45%, #86260D 100%); } /* erhabener Innen-Schild: eigener Schatten auf die Grundplatte (Filter am Träger, Zuschnitt am Kind) */ .cp-hex3d .fi { transform: translateZ(calc(var(--t) / 2 + var(--s) * .035)) scale(.8); filter: drop-shadow(0 calc(var(--s) * .03) calc(var(--s) * .03) rgba(70, 16, 3, .55)); } .cp-hex3d .ki { transform: rotateY(180deg) translateZ(calc(var(--t) / 2 + var(--s) * .035)) scale(.8); filter: drop-shadow(0 calc(var(--s) * .03) calc(var(--s) * .03) rgba(60, 14, 3, .6)); } .cp-hex3d .fi b, .cp-hex3d .ki b { position: absolute; inset: 0; display: block; overflow: hidden; } .cp-hex3d .fi b { background: radial-gradient(120% 90% at 30% 14%, #FFD3BD 0%, rgba(255, 190, 160, 0) 42%), linear-gradient(160deg, #FF8A5A 0%, #EF6232 40%, #D14A20 72%, #A8391A 100%); } .cp-hex3d .ki b { background: radial-gradient(120% 90% at 70% 14%, rgba(255, 196, 168, .85) 0%, rgba(255, 190, 160, 0) 42%), linear-gradient(200deg, #F2743F 0%, #D4501F 50%, #9B3113 100%); } /* Randlicht oben + wandernder Glanz auf dem Schild */ .cp-hex3d .fi b::before, .cp-hex3d .ki b::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 240, 230, .55) 0%, rgba(255, 240, 230, 0) 16%), linear-gradient(0deg, rgba(60, 12, 2, .35) 0%, rgba(60, 12, 2, 0) 22%); } .cp-hex3d .fi b::after, .cp-hex3d .ki b::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .75) 49%, rgba(255, 255, 255, .15) 56%, transparent 64%); transform: translateX(-75%); animation: cp-hex3d-sheen 7s ease-in-out infinite; mix-blend-mode: soft-light; } .cp-hex3d .ki b::after { animation-delay: -3.5s; } /* schwebende Glyphe (Parallaxe) */ .cp-hex3d .fg { transform: translateZ(calc(var(--t) / 2 + var(--s) * .1)) scale(1.12); } .cp-hex3d .kg { transform: rotateY(180deg) translateZ(calc(var(--t) / 2 + var(--s) * .1)) scale(1.12); } .cp-hex3d svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .cp-hex3d svg path { fill: #FFF8F3; filter: drop-shadow(0 1.2px 1px rgba(80, 18, 4, .55)) drop-shadow(0 0 3px rgba(255, 220, 200, .35)); } .cp-hex3d svg path.s { fill: rgba(255, 246, 240, .85); } /* Kanten: Licht von oben, jede Kante mit leichtem Verlauf (gebürstete Fläche) */ .cp-hex3d .e { width: var(--r); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--r) / -2); } /* flache Kanten oben (hellste) und unten (dunkelste), dazwischen je zwei Schrägen */ .cp-hex3d .e1 { transform: rotateZ(0deg) translateY(calc(var(--a) * -1)) rotateX(90deg); background: linear-gradient(180deg, #FFAD86, #E8683A 55%, #CC5224); } .cp-hex3d .e2 { transform: rotateZ(60deg) translateY(calc(var(--a) * -1)) rotateX(90deg); background: linear-gradient(180deg, #E0602F, #C24A1D 55%, #A63B15); } .cp-hex3d .e3 { transform: rotateZ(120deg) translateY(calc(var(--a) * -1)) rotateX(90deg); background: linear-gradient(180deg, #963110, #7E280C 55%, #661F09); } .cp-hex3d .e4 { transform: rotateZ(180deg) translateY(calc(var(--a) * -1)) rotateX(90deg); background: linear-gradient(180deg, #6E220A, #5A1B07 55%, #481505); } .cp-hex3d .e5 { transform: rotateZ(240deg) translateY(calc(var(--a) * -1)) rotateX(90deg); background: linear-gradient(180deg, #A9391A, #8E2F10 55%, #76260D); } .cp-hex3d .e6 { transform: rotateZ(300deg) translateY(calc(var(--a) * -1)) rotateX(90deg); background: linear-gradient(180deg, #F48B5E, #DD5A2A 55%, #BE461C); } @keyframes cp-hex3d-spin { 0% { transform: rotateX(-18deg) rotateY(-26deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 38% { transform: rotateX(-18deg) rotateY(154deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 50% { transform: rotateX(-18deg) rotateY(154deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 88% { transform: rotateX(-18deg) rotateY(334deg); } 100% { transform: rotateX(-18deg) rotateY(334deg); } } @keyframes cp-hex3d-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--s) * -.05)); } } @keyframes cp-hex3d-sheen { 0%, 12% { transform: translateX(-75%); } 34%, 100% { transform: translateX(75%); } } @keyframes cp-hex3d-shadow { 0%, 100% { opacity: .95; transform: scaleX(1); } 19%, 69% { opacity: .55; transform: scaleX(.62); } 44%, 94% { opacity: .95; transform: scaleX(1); } } /* KI arbeitet: gleichmäßig schneller drehen */ .cp-day-ai.is-busy .cp-hex3d-b, .cp-qc-box.is-busy .cp-hex3d-b { animation: cp-hex3d-run 1.3s linear infinite; } @keyframes cp-hex3d-run { from { transform: rotateX(-18deg) rotateY(0deg); } to { transform: rotateX(-18deg) rotateY(360deg); } } .cp-qc-box .cp-hex3d { --s: 40px; } @media (prefers-reduced-motion: reduce) { .cp-hex3d, .cp-hex3d-b, .cp-hex3d::after, .cp-hex3d .fi b::after, .cp-hex3d .ki b::after { animation: none !important; } } html.cp-motion-off .cp-hex3d-b { transform: rotateX(-18deg) rotateY(-26deg) !important; } .cp-day-ai-t { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; } .cp-day-ai-t b { font-size: 15px; color: var(--cp-strong); } .cp-day-ai-t span { font-size: 12.5px; color: var(--cp-muted); } .cp-day-ai-tabs { display: flex; gap: 6px; flex-wrap: wrap; } html[data-theme]:not(#cp):not(#cq) body .cp-day-ai-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: none; color: var(--cp-text); font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-day-ai-tabs button:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-day-ai-tabs button.is-on { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); } .cp-day-ai-tabs svg { width: 15px; height: 15px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-day-ai-out { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cp-line); animation: cp-day-drop .4s var(--d-ease) both; } .cp-day-ai-out[hidden] { display: none !important; } @keyframes cp-day-drop { from { opacity: 0; transform: translateY(-6px); } } .cp-day-ai-load { display: grid; gap: 8px; } .cp-day-ai-load span { font-size: 12.5px; color: var(--cp-muted); } .cp-day-ai-load i { display: block; height: 12px; border-radius: 999px; background: linear-gradient(100deg, color-mix(in srgb, var(--cp-text) 6%, transparent) 30%, color-mix(in srgb, var(--cp-rust-hi) 22%, transparent) 50%, color-mix(in srgb, var(--cp-text) 6%, transparent) 70%); background-size: 250% 100%; animation: ra-shimmer 1.2s linear infinite; } .cp-day-ai-load i:nth-child(3) { width: 84%; } .cp-day-ai-load i:nth-child(4) { width: 62%; } .cp-day-ai-err { margin: 0; font-size: 13px; color: var(--cp-muted); } .cp-day-ai-f { display: flex; align-items: center; gap: 2px; margin-top: 12px; } .cp-day-ai-f span { flex: 1; font-size: 11.5px; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body ul.cp-day-brief, html[data-theme]:not(#cp):not(#cq) body ol.cp-day-blocks, html[data-theme]:not(#cp):not(#cq) body ul.cp-day-tips { margin: 0 !important; padding: 0 !important; list-style: none; } .cp-day-brief { display: grid; gap: 7px; } .cp-day-brief li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; animation: cp-day-line .45s var(--d-ease) both; animation-delay: calc(var(--i, 0) * 80ms); } .cp-day-brief li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--cp-rust-hi); } @keyframes cp-day-line { from { opacity: 0; transform: translateX(-8px); } } /* Tagesplan */ .cp-day-plan-h { margin: 0 0 12px; font-size: 15.5px; font-weight: 500; color: var(--cp-strong); line-height: 1.45; } .cp-day-plan-h em { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; } .cp-day-plan-f { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-day-plan-f > svg { flex: none; width: 18px; height: 18px; margin: 2px 0 0 !important; color: var(--cp-rust-hi); } .cp-day-plan-f div { display: flex; flex-direction: column; gap: 3px; } .cp-day-plan-f span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-rust-hi); } .cp-day-plan-f small { font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-day-plan a, html[data-theme]:not(#cp):not(#cq) body .cp-day-fx a { color: var(--cp-strong) !important; font-weight: 600; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-plan a:hover, html[data-theme]:not(#cp):not(#cq) body .cp-day-fx a:hover { color: var(--cp-rust-hi) !important; } .cp-day-blocks { position: relative; display: grid; gap: 4px; } .cp-day-blocks::before { content: ""; position: absolute; left: 76px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(var(--cp-rust-line), var(--cp-line)); } .cp-day-blocks li { position: relative; display: grid; grid-template-columns: 58px 38px minmax(0, 1fr); align-items: start; gap: 0 4px; padding: 7px 8px; border-radius: 3px; animation: cp-day-line .5s var(--d-ease) both; animation-delay: calc(80ms + var(--i, 0) * 70ms); } .cp-day-blocks li.is-now { background: var(--cp-rust-soft); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-day-blocks time { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-day-blocks time small { font-size: 11px; font-weight: 500; color: var(--cp-dim); } .cp-day-bk { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 1px; border-radius: 3px; background: var(--cp-surface-2); border: 1px solid var(--cp-line-2); color: var(--cp-muted); } .cp-day-bk svg { width: 14px; height: 14px; margin: 0 !important; } .cp-day-blocks li.is-task .cp-day-bk, .cp-day-blocks li.is-now .cp-day-bk { border-color: var(--cp-rust-line); color: var(--cp-rust-hi); background: var(--cp-rust-soft); } .cp-day-blocks li.is-event .cp-day-bk { background: var(--cp-strong); color: var(--cp-void); border-color: transparent; } .cp-day-blocks li.is-break .cp-day-bk, .cp-day-blocks li.is-buffer .cp-day-bk { border-style: dashed; } .cp-day-blocks li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; } .cp-day-bt { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-dim); } .cp-day-blocks li > div small { font-size: 12px; color: var(--cp-muted); } .cp-day-tips { display: grid; gap: 6px; margin-top: 12px !important; } .cp-day-tips li { display: flex; gap: 8px; font-size: 12.5px; color: var(--cp-muted); } .cp-day-tips svg { flex: none; width: 14px; height: 14px; margin: 2px 0 0 !important; color: var(--cp-rust-hi); } /* Womit anfangen */ .cp-day-fx-k { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-rust-hi); } .cp-day-fx-k svg { width: 14px; height: 14px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-fx h3 { margin: 8px 0 6px !important; font-size: 20px !important; font-weight: 500 !important; letter-spacing: -.01em !important; text-transform: none !important; } .cp-day-fx p { margin: 0 0 6px; font-size: 14px; color: var(--cp-text); line-height: 1.5; } .cp-day-fx-s { color: var(--cp-muted) !important; font-size: 13px !important; } .cp-day-fx-s b { color: var(--cp-strong); } .cp-day-fx-a { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } /* ---- Raster ---- */ .cp-day-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(330px, 1fr); gap: 16px; align-items: start; } .cp-day-main, .cp-day-side { display: grid; gap: 16px; min-width: 0; } .cp-day-card { position: relative; min-width: 0; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: var(--cp-shadow); scroll-margin-top: 80px; transition: border-color .25s ease; } .cp-day-card:hover { border-color: color-mix(in srgb, var(--cp-text) 22%, transparent); } .cp-day-card.is-ping, .cp-day-ai.is-ping { animation: cp-day-ping 1.1s ease; } @keyframes cp-day-ping { 30% { box-shadow: 0 0 0 3px var(--cp-rust-line), var(--cp-shadow); } } .cp-day-ch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-ch h2 { display: inline-flex; align-items: center; gap: 9px; flex: 1; min-width: 0; margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cp-strong) !important; } .cp-day-ch h2 svg { width: 17px; height: 17px; color: var(--cp-rust-hi); margin: 0 !important; flex: none; } .cp-day-n { font-style: normal; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-muted); font-size: 11.5px; line-height: 22px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-day-link, html[data-theme]:not(#cp):not(#cq) body .cp-day-more { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: 500 12.5px/1.4 var(--cp-font, inherit); color: var(--cp-muted) !important; text-decoration: none !important; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-day-link:hover, html[data-theme]:not(#cp):not(#cq) body .cp-day-more:hover { color: var(--cp-rust-hi) !important; } .cp-day-link svg, .cp-day-more svg { width: 14px; height: 14px; margin: 0 !important; transition: transform .2s ease; } .cp-day-link:hover svg, a.cp-day-more:hover svg { transform: translateX(3px); } .cp-day-cf { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .cp-day-seg { position: relative; display: inline-flex; padding: 3px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); } .cp-day-seg::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 3px; background: var(--cp-rust-soft); box-shadow: inset 0 0 0 1px var(--cp-rust-line); transition: transform .35s var(--d-ease), width .35s var(--d-ease); } html[data-theme]:not(#cp):not(#cq) body .cp-day-seg button { position: relative; z-index: 1; height: 32px; padding: 0 11px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-day-seg button.is-on { color: var(--cp-rust-hi); } .cp-day-seg em { font-style: normal; margin-left: 3px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); font-size: 11px; font-variant-numeric: tabular-nums; } /* Listen */ html[data-theme]:not(#cp):not(#cq) body ul.cp-day-list { margin: 0 !important; padding: 0 !important; list-style: none; } .cp-day-list > li { display: flex; align-items: flex-start; gap: 11px; padding: 10px 4px; border-top: 1px solid var(--cp-line); } .cp-day-list > li:first-child { border-top: 0; } .cp-day-list.is-swap > li { animation: cp-day-line .35s var(--d-ease) both; animation-delay: calc(var(--i, 0) * 35ms); } .cp-day.is-in .cp-day-list > li { animation: cp-day-line .5s var(--d-ease) both; animation-delay: calc(300ms + var(--i, 0) * 45ms); } .cp-day-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-tx > a, html[data-theme]:not(#cp):not(#cq) body .cp-day-ft h3 a { color: var(--cp-strong) !important; font-size: 14px; font-weight: 500; line-height: 1.35; text-decoration: none !important; overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-day-tx > a:hover, html[data-theme]:not(#cp):not(#cq) body .cp-day-ft h3 a:hover { color: var(--cp-rust-hi) !important; } .cp-day-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--cp-muted); } .cp-day-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .cp-day-meta svg { width: 13px; height: 13px; margin: 0 !important; flex: none; } .cp-day-due { font-weight: 600; color: var(--cp-text); font-variant-numeric: tabular-nums; } .cp-day-due.is-late { color: var(--cp-rust-hi); } .cp-day-due.is-today { color: var(--cp-strong); } .cp-day-prio::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); } .cp-day-co { padding: 1px 7px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); font-size: 11px; } .cp-day-dot { flex: none; width: 8px; height: 8px; margin: 7px 3px 0; border-radius: 50%; background: var(--c, var(--cp-dim)); } .cp-day-dot.is-late { background: var(--cp-rust-hi); box-shadow: 0 0 0 4px var(--cp-rust-soft); } /* Abhaken */ html[data-theme]:not(#cp):not(#cq) body .cp-day-done { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; padding: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--cp-text) 32%, transparent); background: none; color: transparent; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; } html[data-theme]:not(#cp):not(#cq) body button.cp-day-done:hover { border-color: var(--cp-success); color: var(--cp-success); transform: scale(1.1); } .cp-day-done svg { width: 14px; height: 14px; margin: 0 !important; stroke-width: 2.6; } html[data-theme]:not(#cp):not(#cq) body .cp-day-task.is-done .cp-day-done, html[data-theme]:not(#cp):not(#cq) body .cp-day-done.is-on { border-color: var(--cp-success); background: var(--cp-success); color: #fff; } .cp-day-task.is-done .cp-day-done { animation: rh-pop .35s cubic-bezier(.2,1.6,.4,1); } .cp-day-p { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--cp-rust-hi); pointer-events: none; animation: cp-day-p .65s cubic-bezier(.2,.8,.3,1) forwards; } .cp-day-p:nth-child(2n) { background: var(--cp-success); } @keyframes cp-day-p { from { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateX(22px) scale(.3); opacity: 0; } } .cp-day-task .cp-day-tx > a { background: linear-gradient(currentColor, currentColor) 0 55% / 0 1px no-repeat; transition: background-size .4s ease, opacity .3s ease; } .cp-day-task.is-done .cp-day-tx > a { background-size: 100% 1px; opacity: .55; } .cp-day-task.is-closed .cp-day-tx > a { opacity: .7; } .cp-day-task.is-out { animation: cp-day-out .32s ease forwards !important; } @keyframes cp-day-out { to { opacity: 0; transform: translateX(22px); } } .cp-day-task.is-busy { pointer-events: none; } .cp-day-ra { display: flex; gap: 2px; opacity: 0; transition: opacity .15s ease; } .cp-day-task:hover .cp-day-ra, .cp-day-ra:focus-within { opacity: 1; } @media (hover: none) { .cp-day-ra { opacity: 1; } } .cp-day-none { flex-direction: column; align-items: center !important; gap: 4px !important; padding: 34px 10px !important; text-align: center; color: var(--cp-muted); } .cp-day-none svg { width: 32px; height: 32px; margin: 0 0 6px !important; padding: 7px; border-radius: 50%; color: var(--cp-success); background: color-mix(in srgb, var(--cp-success) 12%, transparent); } .cp-day-none b { font-size: 14.5px; color: var(--cp-strong); } .cp-day-none span { font-size: 12.5px; } .cp-day-empty { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 13px; color: var(--cp-muted); } .cp-day-empty svg { width: 15px; height: 15px; color: var(--cp-success); margin: 0 !important; flex: none; } /* Jetzt dran + Fokus-Timer */ .cp-day-focus { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; overflow: hidden; background: radial-gradient(420px 180px at 100% 0%, rgba(232,85,42,.10), transparent 70%), var(--cp-surface); } .cp-day-fk { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-rust-hi); } .cp-day-fk svg { width: 14px; height: 14px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-ft h3 { margin: 0 0 4px !important; font-size: 21px !important; font-weight: 500 !important; letter-spacing: -.01em !important; line-height: 1.3 !important; text-transform: none !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-ft h3 a { font-size: inherit; } .cp-day-ft > p { margin: 0 0 8px; font-size: 13.5px; color: var(--cp-muted); } .cp-day-fa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cp-day-focus.is-timer { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 22px; } .cp-day-focus.is-timer .cp-day-fk { flex-basis: 100%; } .cp-day-focus.is-timer .cp-day-ft { flex: 1; min-width: 220px; } .cp-day-tm { position: relative; flex: none; width: 116px; height: 116px; } .cp-day-tm svg { width: 100%; height: 100%; transform: rotate(-90deg); } .cp-day-tm circle { fill: none; stroke-width: 6; } .cp-day-tm .t { stroke: color-mix(in srgb, var(--cp-text) 9%, transparent); } .cp-day-tm .v { stroke: var(--cp-rust-hi); stroke-linecap: round; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 8px rgba(232,85,42,.55)); } .cp-day-tm b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } /* Agenda */ .cp-day-ev { position: relative; } .cp-day-when { flex: none; width: 80px; display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 3px solid var(--c); font-size: 12.5px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-day-when b { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-day-ev.is-tmrw, .cp-day-ev.is-past { opacity: .6; } html[data-theme]:not(#cp) body .cp-day-ev.is-live .cp-day-when b { color: var(--cp-rust-hi); } .cp-day-ev.is-live .cp-day-when { border-left-color: var(--cp-rust-hi); animation: cp-day-live 1.8s ease-in-out infinite; } @keyframes cp-day-live { 50% { border-left-color: transparent; } } .cp-day-nowrow { position: relative; padding: 2px 0 !important; border: 0 !important; } .cp-day-nowrow + li { border-top: 0 !important; } .cp-day-nowrow span { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-rust-hi); } .cp-day-nowrow span::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cp-rust-hi), transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-day-join, html[data-theme]:not(#cp):not(#cq) body .cp-day-step { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong) !important; font: 600 11.5px/1 var(--cp-font, inherit); text-decoration: none !important; cursor: pointer; transition: background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-day-join:hover, html[data-theme]:not(#cp):not(#cq) body .cp-day-step:hover { background: color-mix(in srgb, var(--cp-rust-hi) 22%, transparent); } .cp-day-join svg, .cp-day-step svg { width: 13px; height: 13px; margin: 0 !important; color: var(--cp-rust-hi); } /* Wartende Kunden */ .cp-day-sla { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .cp-day-sla i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--cp-rust-hi) 55%, transparent), var(--cp-rust-hi)); transition: width 1.2s var(--d-ease) .5s; } .cp-day.is-in .cp-day-sla i { width: var(--p); } .cp-day-tk.is-late .cp-day-sla i { background: var(--cp-rust-hi); box-shadow: 0 0 8px rgba(232,85,42,.6); } html[data-theme]:not(#cp):not(#cq) body a.cp-day-msg { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-deep) 50%, transparent); color: var(--cp-text) !important; text-decoration: none !important; transition: border-color .2s ease, transform .2s ease; } html[data-theme]:not(#cp):not(#cq) body a.cp-day-msg:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cp-text) 26%, transparent); } .cp-day-msg > svg:first-child { width: 34px; height: 34px; padding: 8px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-muted); margin: 0 !important; flex: none; } .cp-day-msg.has-new > svg:first-child { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-day-msg > div { flex: 1; display: flex; flex-direction: column; gap: 2px; } .cp-day-msg b { font-size: 13.5px; color: var(--cp-strong); } .cp-day-msg span { font-size: 12px; color: var(--cp-muted); } .cp-day-msg > svg:last-child { width: 16px; height: 16px; color: var(--cp-muted); margin: 0 !important; } /* Woche */ .cp-day-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cp-muted); } .cp-day-lg i { width: 8px; height: 8px; border-radius: 2px; margin-left: 6px; } .cp-day-lg i.a { background: var(--cp-rust-hi); } .cp-day-lg i.b { background: color-mix(in srgb, var(--cp-text) 45%, transparent); } .cp-day-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-wd { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 8px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-deep) 50%, transparent); color: var(--cp-text); font-family: var(--cp-font, inherit); cursor: pointer; transition: border-color .2s ease, transform .2s var(--d-ease); } html[data-theme]:not(#cp):not(#cq) body .cp-day-wd:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cp-text) 26%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-day-wd.is-today { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-day-wd.is-we { opacity: .6; } .cp-day-wb { display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; height: 64px; margin-bottom: 4px; } .cp-day-wb i { width: 12px; height: 0; min-height: 2px; border-radius: 3px 3px 2px 2px; transition: height .9s var(--d-ease); transition-delay: calc(.4s + var(--i, 0) * 60ms); } .cp-day-wd { --i: 0; } .cp-day-wb i { transition-delay: calc(.4s + var(--i) * 60ms); } .cp-day-wb i.a { background: linear-gradient(var(--cp-rust-hi), var(--cp-rust)); } .cp-day-wb i.b { background: color-mix(in srgb, var(--cp-text) 40%, transparent); } .cp-day.is-in .cp-day-wb i { height: var(--h); } .cp-day-wd b { font-size: 12.5px; font-weight: 600; color: var(--cp-strong); } .cp-day-wd small { font-size: 11px; color: var(--cp-dim); font-variant-numeric: tabular-nums; } .cp-day-wd em { font-style: normal; font-size: 11px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } /* Einblenden */ .cp-day .cp-day-hero, .cp-day .cp-day-ai, .cp-day .cp-day-card { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .7s var(--d-ease), border-color .25s ease; } .cp-day.is-in .cp-day-hero, .cp-day.is-in .cp-day-ai, .cp-day.is-in .cp-day-card { opacity: 1; transform: none; } .cp-day.is-in .cp-day-ai { transition-delay: .08s; } .cp-day.is-in .cp-day-main > :nth-child(1) { transition-delay: .14s; } .cp-day.is-in .cp-day-main > :nth-child(2) { transition-delay: .2s; } .cp-day.is-in .cp-day-main > :nth-child(3) { transition-delay: .26s; } .cp-day.is-in .cp-day-side > :nth-child(1) { transition-delay: .18s; } .cp-day.is-in .cp-day-side > :nth-child(2) { transition-delay: .24s; } .cp-day.is-in .cp-day-side > :nth-child(3) { transition-delay: .3s; } .cp-day.is-in .cp-day-side > :nth-child(n+4) { transition-delay: .36s; } @media (prefers-reduced-motion: reduce) { .cp-day *, .cp-day *::before, .cp-day *::after { animation: none !important; transition: none !important; } .cp-day .cp-day-hero, .cp-day .cp-day-ai, .cp-day .cp-day-card { opacity: 1; transform: none; } html[data-theme]:not(#cp):not(#cq) body .cp-day-lb { transform: none; } } .cp-day-now.is-after { background: var(--cp-dim); box-shadow: none; } .cp-day-now.is-after::before { display: none; } html[data-theme]:not(#cp) body .cp-day-now.is-after b { left: auto; right: 6px; background: var(--cp-surface-2); color: var(--cp-muted); } html.cp-motion-off .cp-day *, html.cp-motion-off .cp-day *::before { animation: none !important; transition: none !important; } html.cp-motion-off .cp-day .cp-day-hero, html.cp-motion-off .cp-day .cp-day-ai, html.cp-motion-off .cp-day .cp-day-card { opacity: 1; transform: none; } html[data-theme]:not(#cp):not(#cq).cp-motion-off body .cp-day-lb { transform: none; } /* Hinweis unten */ .cp-day-toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 3000; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: var(--cp-r, 3px); /* v5.70.0: 14px → var(--cp-r) */ background: #12151C; border: 1px solid rgba(238,240,244,.16); color: #F6F6F4; font: 500 13px/1.3 var(--cp-font, inherit); box-shadow: 0 20px 50px -16px rgba(0,0,0,.8); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .3s cubic-bezier(.2,.75,.2,1); } .cp-day-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .cp-day-toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-day-toast button { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: var(--cp-r-sm, 2px); /* v5.70.0: 9px → var(--cp-r-sm) */ background: rgba(232,85,42,.18); color: #F4A184; font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-day-toast button:hover { background: rgba(232,85,42,.3); color: #fff; } /* Responsiv */ @media (max-width: 1280px) { .cp-day-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cp-day-kpi:nth-child(n+4) { grid-column: span 1; } } @media (max-width: 1180px) { .cp-day-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); } } @media (max-width: 991px) { .cp-day { padding: 16px 16px 96px; } .cp-day-hero { padding: 20px 18px 16px; border-radius: 3px; } .cp-day-grid { grid-template-columns: minmax(0, 1fr); } .cp-day-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .cp-day-keys { display: none; } } @media (max-width: 700px) { .cp-day-hero-top { flex-direction: column; gap: 14px; } .cp-day-ring { align-self: stretch; } .cp-day-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 14px; } .cp-day-kpis .cp-day-kpi:last-child { grid-column: 1 / -1; } html[data-theme]:not(#cp):not(#cq) body .cp-day-kpi { min-height: 56px; padding: 8px 12px; } .cp-day-kpi b { font-size: 20px; } .cp-day-kpi svg { width: 32px; height: 32px; padding: 8px; } .cp-day-track { height: 42px; } .cp-day-hours span.is-odd { display: none; } .cp-day-side { grid-template-columns: minmax(0, 1fr); } .cp-day-card { padding: 14px; border-radius: 3px; } .cp-day-ch { gap: 8px; } .cp-day-tasks .cp-day-seg { width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-day-tasks .cp-day-seg button { flex: 1; padding: 0 4px; } .cp-day-seg em { display: none; } .cp-day-ai-tabs { width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-day-ai-tabs button { flex: 1; justify-content: center; padding: 0 8px; } .cp-day-wk { gap: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-wd { padding: 8px 2px 6px; border-radius: 3px; } .cp-day-wb { height: 48px; } .cp-day-wb i { width: 8px; } .cp-day-when { width: 66px; } .cp-day-blocks::before { left: 66px; } .cp-day-blocks li { grid-template-columns: 50px 36px minmax(0, 1fr); } .cp-day-focus.is-timer { flex-direction: column; align-items: flex-start; } .cp-day-lg { display: none; } } @media (max-width: 400px) { .cp-day-ai-tabs button svg { display: none; } } /* =========================================================================== v5.48.0 · Textbausteine (snippets.js): „/“ im Eingabefeld + Knopf „Bausteine“ =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-sn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: none; color: var(--cp-text); font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; flex: none; transition: color .2s ease, border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-btn:hover, html[data-theme]:not(#cp):not(#cq) body .cp-sn-btn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--cp-text) 30%, transparent); background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-btn svg { width: 16px !important; height: 16px !important; margin: 0 !important; flex: none; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-btn.is-compact { width: 34px; height: 34px; padding: 0 !important; margin: 0 2px; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-sn-btn { background: none !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tk-ai .cp-sn-btn { height: 34px; } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body .cp-sn-btn:not(.is-compact) { width: 38px; padding: 0; } .cp-sn-btn span { display: none; } } .cp-sn-pop { position: fixed; z-index: 4000; display: flex; flex-direction: column; min-height: 0; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-text); font-family: var(--cp-font, inherit); box-shadow: 0 28px 70px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.04); overflow: hidden; animation: cp-sn-in .18s cubic-bezier(.2,.75,.2,1) both; } html[data-theme="dark"] .cp-sn-pop, :root:not([data-theme="light"]) .cp-sn-pop { background: #12151C; border-color: rgba(238,240,244,.16); } html[data-theme="light"] .cp-sn-pop { background: #FFFFFF; border-color: rgba(10,12,17,.14); box-shadow: 0 24px 60px -20px rgba(10,12,17,.35); } @keyframes cp-sn-in { from { opacity: 0; transform: translateY(6px) scale(.985); } } .cp-sn-h { display: flex; align-items: center; gap: 8px; padding: 11px 14px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } .cp-sn-h svg { width: 14px; height: 14px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-sn-h span { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11px; color: var(--cp-dim); } .cp-sn-search { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--cp-line); } .cp-sn-search svg { width: 16px; height: 16px; color: var(--cp-muted); margin: 0 !important; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-search input { flex: 1; min-width: 0; height: 30px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--cp-strong) !important; font: 500 14px/1 var(--cp-font, inherit) !important; outline: none !important; } html[data-theme]:not(#cp):not(#cq) body ul.cp-sn-list { flex: 1; min-height: 0; margin: 0 !important; padding: 4px 6px !important; list-style: none; overflow-y: auto; overscroll-behavior: contain; } .cp-sn-list li[data-i] { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 3px; cursor: pointer; } .cp-sn-list li[data-i].is-on { background: var(--cp-rust-soft); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-sn-list li[data-i] > div { display: flex; align-items: center; gap: 8px; min-width: 0; } .cp-sn-list li b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-sn-list kbd, .cp-sn-keys kbd { padding: 1px 6px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 5%, transparent); color: var(--cp-muted); font: 600 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: none; } .cp-sn-own svg { width: 12px; height: 12px; color: var(--cp-dim); margin: 0 !important; } .cp-sn-list li > span { font-size: 12px; line-height: 1.4; color: var(--cp-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cp-sn-info { padding: 14px 10px; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-info button { border: 0; background: none; padding: 0; color: var(--cp-rust-hi); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .cp-sn-f { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-top: 1px solid var(--cp-line); } .cp-sn-keys { flex: 1; min-width: 0; font-size: 11px; color: var(--cp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-f button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font: 600 12px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-f button:hover { color: var(--cp-strong); background: color-mix(in srgb, var(--cp-text) 7%, transparent); } .cp-sn-f button svg { width: 14px; height: 14px; margin: 0 !important; } @media (hover: none) { .cp-sn-keys { visibility: hidden; } } /* Verwalten */ .cp-sn-dlg { position: fixed; inset: 0; z-index: 4100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,5,8,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cp-sn-fade .2s ease both; } @keyframes cp-sn-fade { from { opacity: 0; } } .cp-sn-box { display: flex; flex-direction: column; width: min(880px, 100%); max-height: min(720px, calc(100vh - 40px)); border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-text); font-family: var(--cp-font, inherit); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9); overflow: hidden; animation: cp-sn-in .25s cubic-bezier(.2,.75,.2,1) both; } .cp-sn-box > header { position: relative; padding: 18px 56px 14px 22px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-box h3 { display: flex; align-items: center; gap: 9px; margin: 0 !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--cp-strong) !important; } .cp-sn-box h3 svg { width: 19px; height: 19px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-sn-box header p { margin: 4px 0 0; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-x { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-x:hover { color: var(--cp-strong); background: color-mix(in srgb, var(--cp-text) 7%, transparent); } .cp-sn-x svg { width: 17px; height: 17px; margin: 0 !important; } .cp-sn-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr); } .cp-sn-body > aside { display: flex; flex-direction: column; min-height: 0; padding: 12px; border-right: 1px solid var(--cp-line); background: var(--cp-deep); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-new { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; margin-bottom: 10px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; } .cp-sn-new svg { width: 15px; height: 15px; color: var(--cp-rust-hi); margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body ul.cp-sn-side { flex: 1; min-height: 0; margin: 0 !important; padding: 0 !important; list-style: none; overflow-y: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-side button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 9px 10px; border: 0; border-radius: 3px; background: none; color: var(--cp-text); text-align: left; cursor: pointer; font-family: var(--cp-font, inherit); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-side button:hover { background: color-mix(in srgb, var(--cp-text) 6%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-side button.is-on { background: var(--cp-rust-soft); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-sn-side b { font-size: 13px; font-weight: 600; color: var(--cp-strong); } .cp-sn-side span { font-size: 11.5px; color: var(--cp-muted); } .cp-sn-form { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px 20px 18px; overflow-y: auto; } .cp-sn-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; } .cp-sn-form label > span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-form input:not([type="checkbox"]), html[data-theme]:not(#cp):not(#cq) body .cp-sn-form textarea { width: 100%; padding: 10px 12px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 400 14px/1.45 var(--cp-font, inherit) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-form input:focus, html[data-theme]:not(#cp):not(#cq) body .cp-sn-form textarea:focus { border-color: var(--cp-rust-line) !important; outline: 2px solid var(--cp-rust-soft); outline-offset: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-form textarea { min-height: 170px; resize: vertical; } .cp-sn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cp-sn-pre { position: relative; } .cp-sn-pre i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 600; color: var(--cp-rust-hi); pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-pre input { padding-left: 24px !important; } .cp-sn-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-vars button { height: 26px; padding: 0 8px; border-radius: 3px; border: 1px dashed var(--cp-line-2); background: none; color: var(--cp-text); font: 500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-vars button:hover { border-color: var(--cp-rust-line); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-chk { flex-direction: row !important; align-items: center; gap: 9px !important; cursor: pointer; } .cp-sn-chk input { width: 17px; height: 17px; accent-color: var(--cp-rust-hi); margin: 0; } .cp-sn-chk > span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--cp-text) !important; } .cp-sn-chk svg { width: 15px; height: 15px; margin: 0 !important; color: var(--cp-muted); } .cp-sn-msg { min-height: 18px; margin: 0; font-size: 12.5px; } .cp-sn-msg.is-ok { color: var(--cp-success); } .cp-sn-msg.is-err { color: var(--cp-danger); } .cp-sn-form footer { display: flex; align-items: center; gap: 10px; margin-top: auto; } .cp-sn-form footer > span { flex: 1; } .cp-sn-form footer em { font-size: 12px; color: var(--cp-muted); font-style: normal; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-save { height: 40px; padding: 0 20px; border: 0; border-radius: 3px; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; font: 600 13.5px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(192,67,28,.8); } html[data-theme]:not(#cp):not(#cq) body .cp-sn-save:disabled { opacity: .6; cursor: wait; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-del { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: none; color: var(--cp-muted); font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-sn-del:hover, html[data-theme]:not(#cp):not(#cq) body .cp-sn-del[data-sure="1"] { color: var(--cp-danger); border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); } .cp-sn-del svg { width: 14px; height: 14px; margin: 0 !important; } @media (max-width: 700px) { .cp-sn-dlg { padding: 0; align-items: flex-end; } .cp-sn-box { width: 100%; max-height: calc(100dvh - 40px); border-radius: 3px 3px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .cp-sn-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .cp-sn-body > aside { border-right: 0; border-bottom: 1px solid var(--cp-line); max-height: 34vh; } .cp-sn-row { grid-template-columns: 1fr; } } /* =========================================================================== v5.48.0 · Kundenportal: Wissensbasis-Suche im Panel „Hilfe & Support“ =========================================================================== */ html[data-theme]:not(#cp) body .cp-sp-kb[hidden] { display: none !important; } html[data-theme]:not(#cp) body .cp-sp-kbq { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 14px; height: 46px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); transition: border-color .2s ease, box-shadow .2s ease; } html[data-theme]:not(#cp) body .cp-sp-kbq:focus-within { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp) body .cp-sp-kbq svg, html[data-theme]:not(#cp) body .cp-sp-kb .cp-sp-list svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; color: var(--cp-muted); margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-sp-kbq input { flex: 1; min-width: 0; height: 44px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; outline: none !important; color: var(--cp-strong) !important; font: 500 16px/1 var(--cp-font, inherit) !important; } html[data-theme]:not(#cp) body .cp-sp-kb.is-busy .cp-sp-kbq::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--cp-rust-hi), transparent); background-size: 200% 100%; animation: ra-shimmer 1s linear infinite; } .cp-sp-kbh { margin: 0 0 6px; font-size: 11.5px; color: var(--cp-dim); } html[data-theme]:not(#cp) body .cp-sp-kb .cp-sp-list a { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-items: start; } html[data-theme]:not(#cp) body .cp-sp-kb .cp-sp-list a > svg { grid-row: 1 / span 2; margin-top: 2px !important; color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .cp-sp-kb .cp-sp-t { white-space: normal; } html[data-theme]:not(#cp) body .cp-sp-kb .cp-sp-meta { display: block; line-height: 1.45; color: var(--cp-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cp-sp-kbc { font-style: normal; margin-right: 6px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--cp-line-2); font-size: 10.5px; color: var(--cp-muted); } /* =========================================================================== v5.48.0 · Dateien: kein doppelter Rahmen um Ordnerleiste + Liste, gleiche Kanten, Suchfeld mit Innenabstand, Liste ohne Leerfläche (Nutzer-Screenshot) =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-fm .box:has(> #file-manager-items-box) { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar { padding: 12px !important; height: auto !important; min-height: 0 !important; box-shadow: var(--cp-shadow); box-sizing: border-box; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-sidebar .search-box, html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-search-box { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-right: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-container-card { margin: 0 !important; box-shadow: var(--cp-shadow); } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-window-area { min-height: 180px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-window-area:has(> .cp-fm-empty) { min-height: 260px !important; } @container cpfiles (min-width: 1101px) { html[data-theme]:not(#cp):not(#cq) body .cp-fm .box:has(> #file-manager-items-box) > #file-manager-items-box { padding: 0 !important; height: auto !important; } } /* =========================================================================== v5.48.0 · Unterhaltung weitergeben (chat-handover.js): Übergabe/Vertretung =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-fwd { order: 1; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-fwd svg { width: 16px; height: 16px; } html.cp-chat-window[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-chat-fwd { display: inline-flex !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: none; color: var(--cp-text); font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; flex: none; transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-btn:hover { border-color: color-mix(in srgb, var(--cp-text) 30%, transparent); background: color-mix(in srgb, var(--cp-text) 6%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-ho-btn svg { width: 16px !important; height: 16px !important; margin: 0 !important; color: var(--cp-muted); } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body .cp-ho-btn { width: 38px; padding: 0; } .cp-ho-btn span { display: none; } } .cp-ho-dlg { position: fixed; inset: 0; z-index: 4100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,5,8,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cp-sn-fade .2s ease both; } .cp-ho-dlg.is-out { opacity: 0; transition: opacity .18s ease; } .cp-ho-box { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(760px, calc(100dvh - 40px)); border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-text); font-family: var(--cp-font, inherit); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9); overflow: hidden; animation: cp-sn-in .25s cubic-bezier(.2,.75,.2,1) both; } .cp-ho-box.is-busy { pointer-events: none; } .cp-ho-box.is-busy::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cp-rust-hi), transparent); background-size: 200% 100%; animation: ra-shimmer 1s linear infinite; } .cp-ho-box > header { position: relative; padding: 20px 56px 14px 22px; border-bottom: 1px solid var(--cp-line); background: radial-gradient(360px 120px at 0% 0%, rgba(232,85,42,.10), transparent 70%); } html[data-theme]:not(#cp):not(#cq) body .cp-ho-box h3 { display: flex; align-items: center; gap: 9px; margin: 0 !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--cp-strong) !important; } .cp-ho-box h3 svg { width: 19px; height: 19px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-ho-sub { margin: 5px 0 0; font-size: 13px; color: var(--cp-muted); } .cp-ho-sub b { color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-ho-x { position: absolute; top: 16px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-x:hover { color: var(--cp-strong); background: color-mix(in srgb, var(--cp-text) 7%, transparent); } .cp-ho-x svg { width: 17px; height: 17px; margin: 0 !important; } .cp-ho-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px 22px 18px; overflow-y: auto; } .cp-ho-sk { display: grid; gap: 10px; } .cp-ho-sk i { display: block; height: 58px; border-radius: 3px; background: linear-gradient(100deg, var(--cp-surface-2) 30%, color-mix(in srgb, var(--cp-text) 6%, var(--cp-surface-2)) 50%, var(--cp-surface-2) 70%); background-size: 250% 100%; animation: ra-shimmer 1.4s linear infinite; } .cp-ho-err { margin: 10px 0; color: var(--cp-muted); } .cp-ho-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-modes button { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); color: var(--cp-text); text-align: left; cursor: pointer; font-family: var(--cp-font, inherit); transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-modes button.is-on { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-ho-modes svg { flex: none; width: 18px; height: 18px; margin: 1px 0 0 !important; color: var(--cp-muted); } .cp-ho-modes .is-on svg { color: var(--cp-rust-hi); } .cp-ho-modes span { display: flex; flex-direction: column; gap: 3px; } .cp-ho-modes b { font-size: 13.5px; color: var(--cp-strong); } .cp-ho-modes small { font-size: 12px; line-height: 1.4; color: var(--cp-muted); } .cp-ho-q { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px; height: 42px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); } .cp-ho-q:focus-within { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-ho-q svg { width: 16px; height: 16px; color: var(--cp-muted); margin: 0 !important; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-q input { flex: 1; min-width: 0; height: 40px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; outline: none !important; color: var(--cp-strong) !important; font: 500 14px/1 var(--cp-font, inherit) !important; } html[data-theme]:not(#cp):not(#cq) body ul.cp-ho-team { display: grid; gap: 4px; max-height: 236px; margin: 0 !important; padding: 2px !important; list-style: none; overflow-y: auto; overscroll-behavior: contain; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-team button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border-radius: 3px; border: 1px solid transparent; background: none; color: var(--cp-text); text-align: left; cursor: pointer; font-family: var(--cp-font, inherit); transition: background .15s ease, border-color .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-team button:hover { background: color-mix(in srgb, var(--cp-text) 6%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-ho-team button.is-on { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-ho-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #2A2F3A, #1A1E27); color: var(--cp-strong); font-size: 12px; font-weight: 700; letter-spacing: .02em; } html[data-theme="light"] .cp-ho-av { background: linear-gradient(135deg, #E9E9E5, #D9D9D4); } .cp-ho-n { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cp-ho-n b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } .cp-ho-n small { font-size: 11.5px; color: var(--cp-muted); } .cp-ho-team button > i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 3px; border: 1.5px solid color-mix(in srgb, var(--cp-text) 30%, transparent); color: transparent; transition: all .18s ease; } .cp-ho-team button.is-on > i { border-color: var(--cp-rust-hi); background: var(--cp-rust-hi); color: #fff; } .cp-ho-team button > i svg { width: 13px; height: 13px; margin: 0 !important; stroke-width: 2.6; } .cp-ho-none { padding: 12px; font-size: 12.5px; color: var(--cp-muted); } .cp-ho-note { display: flex; flex-direction: column; gap: 6px; margin: 0; } .cp-ho-note span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-ho-note textarea { width: 100%; min-height: 76px; padding: 10px 12px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 400 14px/1.45 var(--cp-font, inherit) !important; resize: vertical; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-note textarea:focus { border-color: var(--cp-rust-line) !important; outline: 2px solid var(--cp-rust-soft); } .cp-ho-hint, .cp-ho-hist { display: flex; gap: 8px; margin: 0; font-size: 12px; line-height: 1.45; color: var(--cp-muted); } .cp-ho-hint svg, .cp-ho-hist svg { flex: none; width: 15px; height: 15px; margin: 1px 0 0 !important; color: var(--cp-dim); } .cp-ho-hist b { color: var(--cp-strong); font-weight: 600; } .cp-ho-msg { min-height: 18px; margin: 0; font-size: 12.5px; } .cp-ho-msg.is-ok { color: var(--cp-muted); } .cp-ho-msg.is-err { color: var(--cp-danger); } .cp-ho-body footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-cancel { height: 42px; padding: 0 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: none; color: var(--cp-text); font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-go { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: 3px; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; font: 600 13.5px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(192,67,28,.85); transition: opacity .2s ease, transform .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-go:not(:disabled):active { transform: scale(.97); } .cp-ho-go svg { width: 16px; height: 16px; margin: 0 !important; } .cp-ho-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 26px 28px; text-align: center; } .cp-ho-done > span { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); animation: rh-pop .45s cubic-bezier(.2,1.6,.4,1) both; } .cp-ho-done > span svg { width: 28px; height: 28px; margin: 0 !important; stroke-width: 2.4; } html[data-theme]:not(#cp):not(#cq) body .cp-ho-done h3 { justify-content: center; margin-top: 6px !important; } .cp-ho-done p { margin: 0 0 10px; font-size: 13.5px; color: var(--cp-muted); max-width: 380px; } @media (max-width: 640px) { .cp-ho-dlg { padding: 0; align-items: flex-end; } .cp-ho-box { width: 100%; max-height: calc(100dvh - 30px); border-radius: 3px 3px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .cp-ho-modes { grid-template-columns: 1fr; } .cp-ho-body { padding: 14px 16px 16px; } } /* v5.48.0 · Nachrichten: Antwortleiste in einer Zeile (Upload, Mikro, Emoji, KI, Bausteine, Weitergeben | Antworten) */ html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer { display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > .float-start { float: none !important; display: inline-flex !important; align-items: center; gap: 6px; flex: none; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > .float-start :is(.btn, button) { display: inline-flex !important; align-items: center !important; justify-content: center; gap: 6px; height: 38px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important; white-space: nowrap !important; line-height: 1 !important; border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > .float-start :is(.btn, button) svg { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > button[type="submit"] { float: none !important; order: 99; margin-left: auto !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 8px; height: 40px !important; padding: 0 18px !important; white-space: nowrap !important; line-height: 1 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > button[type="submit"] svg { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer .cp-m-kbd { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > .float-start :is(.btn, button):is(.hide, .d-none, [hidden], [style*="display: none"], [style*="display:none"]) { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer { container: cpmsgfoot / inline-size; } @container cpmsgfoot (max-width: 940px) { html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer :is(.cp-sn-btn, .cp-ho-btn) { width: 38px; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer :is(.cp-sn-btn, .cp-ho-btn) span { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > .float-start :is(.btn, button) { width: 38px; padding: 0 !important; font-size: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > .float-start :is(.btn, button) svg { width: 17px !important; height: 17px !important; } } @container cpmsgfoot (max-width: 520px) { html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > button[type="submit"] { flex: 1 0 100%; justify-content: center; } } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer > .float-start > div { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg .cp-m-form footer .cp-m-kbd + button[type="submit"] { margin-left: auto !important; } /* v5.48.0 · Dateien: Liste bündig mit Ordnerleiste (alle Breiten), Kopfzeile Titel links / Knöpfe rechts */ html[data-theme]:not(#cp):not(#cq) body .cp-fm .box:has(> #file-manager-items-box) > #file-manager-items-box { padding: 0 !important; height: auto !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar { display: flex !important; align-items: center !important; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar::before, html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar::after { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar > h1 { float: none !important; flex: 1 1 auto; min-width: 0; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar > .title-button-group { float: none !important; display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manger-title-bar > .title-button-group .btn { margin: 0 !important; } /* v5.48.0 · Handy: Pipeline-Kopfknöpfe – mittlerer („Verkaufschance“) breiter statt abgeschnitten */ @media (max-width: 599px) { html[data-theme]:not(#cp) body .cp-crm-card .card-header .cp-crm-h-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr) !important; } html[data-theme]:not(#cp) body .cp-crm-card .card-header .cp-crm-h-actions > .cp-crm-hbtn { letter-spacing: .02em !important; text-overflow: ellipsis; } } /* =========================================================================== v5.48.1 · Dateien: Liste ohne Innenrahmen, lesbare Auswahl (RISE setzt hellgrau), Typ-Symbole mit Endung, Ordner in Markenfarbe, ruhiger Hover =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-container { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm ul.files-and-folders-list > li.folder-item { border: 1px solid var(--cp-line) !important; background: color-mix(in srgb, var(--cp-deep) 45%, transparent) !important; border-radius: 3px !important; transition: border-color .18s ease, background .18s ease, transform .18s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-fm ul.files-and-folders-list > li.folder-item:hover { border-color: color-mix(in srgb, var(--cp-text) 22%, transparent) !important; background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm ul.files-and-folders-list .folder-item-content { background: transparent !important; border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm ul.files-and-folders-list .folder-item-content.selected-folder-item { background: var(--cp-rust-soft) !important; box-shadow: inset 0 0 0 1px var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm ul.files-and-folders-list .folder-item-content.selected-folder-item :is(.item-name, a, .folder-name) { color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm ul.files-and-folders-list > li.folder-item:has(.selected-folder-item) { border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm ul.files-and-folders-list :is(.item-name, a.file-name) { color: var(--cp-strong) !important; font-weight: 500; } html[data-theme]:not(#cp):not(#cq) body .cp-fm ul.files-and-folders-list :is(small, .folder-info, .text-off) { color: var(--cp-muted) !important; font-size: 12px !important; font-variant-numeric: tabular-nums; } .cp-fm-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-muted); transition: transform .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-fm ul.files-and-folders-list > li .icon-wrapper .cp-fm-ico svg { width: 18px !important; height: 18px !important; margin: 0 !important; } .cp-fm-ico em { position: absolute; bottom: -5px; right: -7px; padding: 1px 4px; border-radius: 3px; background: var(--cp-rust); color: #fff; font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; } .cp-fm-ico em:empty { display: none; } .cp-fm-ico.is-folder { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } li.folder-item:hover .cp-fm-ico { transform: translateY(-1px) scale(1.04); } .k-image .cp-fm-ico { color: #7BC4A4; } .k-video .cp-fm-ico { color: #9C8CF0; } .k-pdf .cp-fm-ico { color: #E5484D; } .k-audio .cp-fm-ico { color: #E0A43A; } .k-doc .cp-fm-ico, .k-design .cp-fm-ico { color: var(--cp-rust-hi); } /* Kachelansicht: größere Symbole, mittig */ html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-container-card:not(.cp-fm-list) ul.files-and-folders-list > li .icon-wrapper .cp-fm-ico { width: 52px; height: 52px; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-container-card:not(.cp-fm-list) ul.files-and-folders-list > li .icon-wrapper .cp-fm-ico svg { width: 24px !important; height: 24px !important; } /* =========================================================================== v5.48.1 · Qualität & Tests: Systemzustand · Wissensbasis-Zähler · Dateien-Details bündig =========================================================================== */ .qa-hbody.is-busy { opacity: .6; transition: opacity .2s ease; } html[data-theme]:not(#cp):not(#cq) body ul.qa-htiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0 0 14px !important; padding: 0 !important; list-style: none; } .qa-htiles li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-deep) 50%, transparent); overflow: hidden; } .qa-htiles li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cp-success); } .qa-htiles li.is-warn::before { background: var(--cp-warning); } .qa-htiles li.is-bad::before { background: var(--cp-danger); } .qa-htiles span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .qa-htiles b { font-size: 18px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .qa-htiles small { font-size: 11.5px; color: var(--cp-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qa-hrow { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; } .qa-hwarn { display: grid; gap: 6px; } .qa-hwarn p { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 9px 12px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 4%, transparent); font-size: 13px; color: var(--cp-text); } .qa-hwarn p i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--cp-success); } .qa-hwarn p.is-info i { background: var(--cp-info); } .qa-hwarn p.is-warn i { background: var(--cp-warning); } .qa-hwarn p.is-bad i { background: var(--cp-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-danger) 18%, transparent); } .qa-htrend { padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); } .qa-htrend > span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .qa-htrend > div { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; height: 64px; margin-top: 8px; } .qa-htrend > div i { position: relative; display: block; height: var(--h); min-height: 3px; border-radius: 3px 3px 2px 2px; background: linear-gradient(var(--cp-rust-hi), var(--cp-rust)); animation: qa-hgrow .7s cubic-bezier(.2,.75,.2,1) both; transform-origin: bottom; } .qa-htrend > div i em { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font-style: normal; font-size: 10px; color: var(--cp-muted); } @keyframes qa-hgrow { from { transform: scaleY(0); } } .qa-htrend > small { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 4px; font-size: 10.5px; color: var(--cp-dim); text-align: center; } .qa-hbig { margin-top: 12px; font-size: 13px; } .qa-hbig summary { cursor: pointer; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .qa-hbig ul { margin: 8px 0 0 !important; padding: 0 !important; list-style: none; display: grid; gap: 4px; } .qa-hbig li { display: grid; grid-template-columns: minmax(0, 1fr) 80px 110px; gap: 10px; padding: 6px 10px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); } .qa-hbig li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .qa-hbig li b { text-align: right; font-weight: 600; } .qa-hbig li small { text-align: right; color: var(--cp-dim); } .qa-hat { margin: 10px 0 0 !important; font-size: 11.5px !important; } @media (max-width: 800px) { .qa-hrow { grid-template-columns: minmax(0, 1fr); } } /* Wissensbasis: „3 Artikel“ statt „3 artikel“ */ html[data-theme]:not(#cp):not(#cq) body .help-category-box .anchor { text-transform: none !important; } /* Dateien: Details-Spalte oben bündig mit Liste und Ordnerleiste */ html[data-theme]:not(#cp):not(#cq) body .cp-fm .box:has(> #file-manager-items-box) > #file-details-box { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-details-box .icon-wrapper svg, html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-details-box svg.folder-icon { color: var(--cp-rust-hi) !important; } /* v5.48.2 · Wissensbasis/Hilfe: Kategorie-Karten beim Überfahren lesbar (RISE setzt #f8f9fa hinter hellen Text) */ html[data-theme]:not(#cp):not(#cq) body .help-category-box, html[data-theme]:not(#cp):not(#cq) body .help-category-box:hover, html[data-theme]:not(#cp):not(#cq) body a:hover .help-category-box { background: transparent !important; } html[data-theme]:not(#cp):not(#cq) body a:has(.help-category-box) .card { transition: border-color .2s ease, transform .25s cubic-bezier(.2,.75,.2,1), background .2s ease, box-shadow .25s ease; } html[data-theme]:not(#cp):not(#cq) body a:has(.help-category-box):hover .card, html[data-theme]:not(#cp):not(#cq) body a:has(.help-category-box):focus-visible .card { background: linear-gradient(160deg, color-mix(in srgb, var(--cp-rust-hi) 8%, var(--cp-surface)), var(--cp-surface) 70%) !important; border-color: var(--cp-rust-line) !important; transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(192,67,28,.55) !important; } html[data-theme]:not(#cp):not(#cq) body a:has(.help-category-box):hover .help-category-box h4 { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body a:has(.help-category-box):hover .help-category-box .text-off, html[data-theme]:not(#cp):not(#cq) body .help-category-box .text-off { color: var(--cp-muted) !important; } html[data-theme="light"]:not(#cp):not(#cq) body a:has(.help-category-box):hover .card { background: linear-gradient(160deg, color-mix(in srgb, var(--cp-rust-hi) 6%, #fff), #fff 70%) !important; } /* v5.48.2 · Wissensbasis/Hilfe-Kategorieseite: aktive Kategorie markiert, Artikelzeilen mit Pfeil */ html[data-theme]:not(#cp):not(#cq) body a.list-group-item:is([href*="knowledge_base/category"], [href*="help/category"]) { border-radius: 3px !important; padding: 9px 12px !important; transition: background .15s ease, color .15s ease; } html[data-theme]:not(#cp):not(#cq) body a.list-group-item:is([href*="knowledge_base/category"], [href*="help/category"]):hover { background: color-mix(in srgb, var(--cp-text) 6%, transparent) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body a.list-group-item.active:is([href*="knowledge_base/category"], [href*="help/category"]) { background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; box-shadow: inset 3px 0 0 var(--cp-rust-hi); font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body a.list-group-item:is([href*="knowledge_base/view"], [href*="help/view"]) { position: relative; display: flex !important; align-items: center; gap: 10px; padding: 12px 38px 12px 14px !important; border-radius: 3px !important; transition: background .15s ease, color .15s ease; } html[data-theme]:not(#cp):not(#cq) body a.list-group-item:is([href*="knowledge_base/view"], [href*="help/view"])::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); opacity: .35; transition: transform .2s ease, opacity .2s ease; } html[data-theme]:not(#cp):not(#cq) body a.list-group-item:is([href*="knowledge_base/view"], [href*="help/view"]):hover::after { opacity: 1; transform: translate(3px, -50%) rotate(45deg); } /* =========================================================================== v5.49.0 · KI-Schnellerfassung (quick-capture.js) =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-day-btn.is-ai { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn.is-ai svg { color: var(--cp-rust-hi); } .cp-qc-dlg { position: fixed; inset: 0; z-index: 4100; display: flex; align-items: flex-start; justify-content: center; padding: min(12vh, 110px) 20px 20px; background: rgba(4,5,8,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cp-sn-fade .2s ease both; } .cp-qc-dlg.is-out { opacity: 0; transition: opacity .18s ease; } .cp-qc-box { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 60px); overflow-y: auto; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-text); font-family: var(--cp-font, inherit); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9); animation: cp-sn-in .25s cubic-bezier(.2,.75,.2,1) both; } .cp-qc-box::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--cp-day-a, 0deg), transparent 0 70%, rgba(232,85,42,.85) 82%, transparent 95%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .cp-qc-box.is-busy::before { opacity: 1; animation: cp-day-spin 1.4s linear infinite; } .cp-qc-box > header { display: flex; align-items: flex-start; gap: 14px; padding: 20px 56px 12px 20px; } .cp-qc-orb { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #F9A27E, #E8552A 45%, #7A2410 100%); box-shadow: 0 0 22px -4px rgba(232,85,42,.8); animation: cp-day-orb 6s ease-in-out infinite; } .cp-qc-orb i { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 65% 70%, rgba(255,255,255,.55), transparent 45%); animation: cp-day-orb-i 4s ease-in-out infinite; } .cp-qc-box.is-busy .cp-qc-orb { animation-duration: 1.2s; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-box h3 { margin: 2px 0 3px !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--cp-strong) !important; } .cp-qc-box header p { margin: 0; font-size: 12.5px; color: var(--cp-muted); line-height: 1.45; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-x { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-x:hover { color: var(--cp-strong); background: color-mix(in srgb, var(--cp-text) 7%, transparent); } .cp-qc-x svg { width: 17px; height: 17px; margin: 0 !important; } .cp-qc-in { display: flex; gap: 8px; align-items: stretch; margin: 0 20px; padding: 6px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); transition: border-color .2s ease, box-shadow .2s ease; } .cp-qc-in:focus-within { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-in textarea { flex: 1; min-width: 0; min-height: 48px; padding: 8px 10px !important; border: 0 !important; background: none !important; box-shadow: none !important; outline: none !important; resize: none; color: var(--cp-strong) !important; font: 500 15px/1.45 var(--cp-font, inherit) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-go { flex: none; align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border: 0; border-radius: 3px; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(192,67,28,.85); } .cp-qc-go svg { width: 16px; height: 16px; margin: 0 !important; } .cp-qc-ex { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px 0; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-ex button { max-width: 100%; padding: 5px 10px; border-radius: 999px; border: 1px dashed var(--cp-line-2); background: none; color: var(--cp-muted); font: 500 11.5px/1.3 var(--cp-font, inherit); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-ex button:hover { color: var(--cp-strong); border-color: var(--cp-rust-line); } .cp-qc-out { margin: 14px 20px 0; padding: 14px 0 18px; border-top: 1px solid var(--cp-line); animation: cp-day-drop .35s cubic-bezier(.2,.75,.2,1) both; } .cp-qc-out[hidden] { display: none !important; } .cp-qc-box.is-done .cp-qc-in, .cp-qc-box.is-done .cp-qc-ex { display: none; } .cp-qc-box.is-done .cp-qc-out { border-top: 0; margin-top: 0; } .cp-qc-load { display: grid; gap: 8px; } .cp-qc-load span { font-size: 12.5px; color: var(--cp-muted); } .cp-qc-load i { display: block; height: 12px; border-radius: 999px; background: linear-gradient(100deg, color-mix(in srgb, var(--cp-text) 6%, transparent) 30%, color-mix(in srgb, var(--cp-rust-hi) 22%, transparent) 50%, color-mix(in srgb, var(--cp-text) 6%, transparent) 70%); background-size: 250% 100%; animation: ra-shimmer 1.2s linear infinite; } .cp-qc-load i:last-child { width: 70%; } .cp-qc-err { margin: 0; font-size: 13px; color: var(--cp-muted); } .cp-qc-types { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-types button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; transition: background .2s ease, color .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-types button.is-on { background: var(--cp-rust-soft); color: var(--cp-strong); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-qc-types svg { width: 15px; height: 15px; margin: 0 !important; } .cp-qc-types .is-on svg { color: var(--cp-rust-hi); } /* v5.146.0 · Mahnstufen-Folge im KI-Erinnerungsdialog: übersprungene Stufe gestrichelt, Stand darunter */ html[data-theme]:not(#cp):not(#cq) body .cp-qc-types button.is-skip:not(.is-on) { box-shadow: inset 0 0 0 1px var(--cp-line-2); background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--cp-text) 5%, transparent) 6px 7px); } .cp-inv-dun { margin: -6px 0 14px; font-size: 12px; line-height: 1.45; color: var(--cp-dim); } .cp-qc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .cp-qc-grid label { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; } .cp-qc-grid label.is-wide { grid-column: 1 / -1; } .cp-qc-grid label > span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-qc-grid label > small { font-size: 11.5px; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-grid :is(input, select, textarea) { width: 100%; height: auto; min-height: 40px; padding: 8px 11px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 500 14px/1.35 var(--cp-font, inherit) !important; box-shadow: none !important; color-scheme: dark; } html[data-theme="light"]:not(#cp):not(#cq) body .cp-qc-grid :is(input, select, textarea) { color-scheme: light; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-grid :is(input, select, textarea):focus { border-color: var(--cp-rust-line) !important; outline: 2px solid var(--cp-rust-soft); outline-offset: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-grid textarea { resize: vertical; } .cp-qc-msg { min-height: 18px; margin: 10px 0 0; font-size: 12.5px; } .cp-qc-msg.is-ok { color: var(--cp-muted); } .cp-qc-msg.is-err { color: var(--cp-danger); } .cp-qc-out footer { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .cp-qc-out footer > span { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cp-dim); } .cp-qc-out footer > span svg { width: 13px; height: 13px; color: var(--cp-rust-hi); margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-cancel { height: 40px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: none; color: var(--cp-text); font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-qc-save, .cp-qc-open) { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border: 0; border-radius: 3px; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff !important; font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; text-decoration: none !important; box-shadow: 0 10px 24px -12px rgba(192,67,28,.85); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-save:disabled { opacity: .6; cursor: wait; } :is(.cp-qc-save, .cp-qc-open) svg { width: 15px; height: 15px; margin: 0 !important; } .cp-qc-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 4px; text-align: center; } .cp-qc-done > span { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); animation: rh-pop .45s cubic-bezier(.2,1.6,.4,1) both; } .cp-qc-done > span svg { width: 26px; height: 26px; margin: 0 !important; stroke-width: 2.4; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-done h4 { margin: 6px 0 0 !important; font-size: 17px !important; font-weight: 600 !important; text-transform: none !important; color: var(--cp-strong) !important; } .cp-qc-done p { margin: 0 0 10px; font-size: 13px; color: var(--cp-muted); } .cp-qc-done > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } @media (max-width: 640px) { .cp-qc-dlg { padding: 0; align-items: flex-end; } .cp-qc-box { width: 100%; max-height: calc(100dvh - 24px); border-radius: 3px 3px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .cp-qc-in { margin: 0 14px; } .cp-qc-ex { padding: 10px 14px 0; } .cp-qc-out { margin: 14px 14px 0; } .cp-qc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-qc-types { display: flex; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-types button { flex: 1; justify-content: center; padding: 0 6px; } .cp-qc-out footer > span { display: none; } .cp-qc-out footer { justify-content: flex-end; } } @media (prefers-reduced-motion: reduce) { .cp-qc-box, .cp-qc-box::before, .cp-qc-orb, .cp-qc-orb i, .cp-qc-out { animation: none !important; } } /* =========================================================================== v5.49.0 · Kundenportal: Meilenstein-Zeitleiste, häufige Fragen, neue Dateien =========================================================================== */ html[data-theme]:not(#cp) body .cp-portal-main { display: grid; gap: 16px; align-content: start; min-width: 0; } html[data-theme]:not(#cp) body ol.cp-ms-list { position: relative; display: grid; gap: 2px; margin: 0 !important; padding: 2px 0 0 !important; list-style: none; } .cp-ms-list::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(var(--cp-rust-line), var(--cp-line)); } .cp-ms-list li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; animation: cp-ms-in .5s cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes cp-ms-in { from { opacity: 0; transform: translateX(-8px); } } .cp-ms-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 10px; border-radius: 50%; border: 2px solid var(--cp-line-2); background: var(--cp-surface); color: #fff; } .cp-ms-dot svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .cp-ms-list li.is-done .cp-ms-dot { border-color: var(--cp-success); background: var(--cp-success); } .cp-ms-list li.is-next .cp-ms-dot { border-color: var(--cp-rust-hi); background: var(--cp-rust-hi); box-shadow: 0 0 0 5px var(--cp-rust-soft); animation: cp-ms-pulse 2.4s ease-in-out infinite; } .cp-ms-list li.is-active .cp-ms-dot { border-color: var(--cp-rust-hi); background: var(--cp-surface); } @keyframes cp-ms-pulse { 50% { box-shadow: 0 0 0 9px transparent; } } html[data-theme]:not(#cp) body .cp-ms-list li > a { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 9px 12px; border-radius: 3px; color: var(--cp-text) !important; text-decoration: none !important; transition: background .15s ease; } html[data-theme]:not(#cp) body .cp-ms-list li > a:hover { background: var(--cp-hover); } .cp-ms-top { display: flex; align-items: center; gap: 10px; min-width: 0; } .cp-ms-top b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-ms-top em { flex: none; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--cp-line-2); font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--cp-muted); } .cp-ms-list li.is-next .cp-ms-top em { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-ms-list li.is-done .cp-ms-top em { color: var(--cp-success); border-color: color-mix(in srgb, var(--cp-success) 40%, transparent); } html[data-theme]:not(#cp) body .cp-ms-list li.is-done .cp-ms-top b { color: var(--cp-muted); } .cp-ms-list li > a small { font-size: 12px; color: var(--cp-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-ms-bar { display: block; height: 4px; margin-top: 2px; border-radius: 2px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .cp-ms-bar i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--cp-rust), var(--cp-rust-hi)); animation: cp-ms-bar 1s cubic-bezier(.2,.75,.2,1) .3s both; transform-origin: left; } .cp-ms-list li.is-done .cp-ms-bar i { background: var(--cp-success); } @keyframes cp-ms-bar { from { transform: scaleX(0); } } html[data-theme]:not(#cp) body ul.cp-faq-list { display: grid; gap: 2px; margin: 0 !important; padding: 0 !important; list-style: none; } html[data-theme]:not(#cp) body .cp-faq-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 3px; color: var(--cp-text) !important; text-decoration: none !important; transition: background .15s ease; } html[data-theme]:not(#cp) body .cp-faq-list a:hover { background: var(--cp-hover); } .cp-faq-list a > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cp-faq-list a > svg:first-child { color: var(--cp-rust-hi); } .cp-faq-list a > svg:last-child { width: 15px; height: 15px; color: var(--cp-dim); transition: transform .2s ease; } .cp-faq-list a:hover > svg:last-child { transform: translateX(3px); color: var(--cp-rust-hi); } .cp-faq-list span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cp-faq-list b { font-size: 13.5px; font-weight: 500; color: var(--cp-strong); } .cp-faq-list small { font-size: 11.5px; color: var(--cp-dim); } .cp-act-list .k-file i { background: var(--cp-info); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-info) 16%, transparent); } @media (prefers-reduced-motion: reduce) { .cp-ms-list li, .cp-ms-bar i, .cp-ms-list li.is-next .cp-ms-dot { animation: none !important; } } /* =========================================================================== v5.49.0 · Rechnungs-Cockpit (invoice-tools.js): Verlauf, Beträge, Aktionen, Rechnungs-Check, QR-Karte (GiroCode + Rechnung online), Hinweis im Dialog „Öffentliche Zahlungs-URL“, KI-Zahlungserinnerung =========================================================================== */ .cp-inv { position: relative; margin: 0 0 18px; padding: 18px 20px 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--cp-rust) 11%, transparent), transparent 55%), var(--cp-surface); box-shadow: var(--cp-shadow); color: var(--cp-text); font-family: var(--cp-font, inherit); animation: cp-inv-in .45s cubic-bezier(.2,.75,.2,1) both; } @keyframes cp-inv-in { from { opacity: 0; transform: translateY(8px); } } .cp-inv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cp-inv-state { --c: var(--cp-muted); display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); font: 700 10.5px/1 var(--cp-font, inherit); letter-spacing: .1em; text-transform: uppercase; } .cp-inv-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); } .cp-inv-state.is-info { --c: var(--cp-info); } .cp-inv-state.is-warn { --c: var(--cp-warning); } .cp-inv-state.is-ok { --c: var(--cp-success); } .cp-inv-state.is-bad { --c: var(--cp-danger); } .cp-inv-state.is-bad i, .cp-inv-state.is-info i { animation: cp-inv-blink 2.4s ease-in-out infinite; } @keyframes cp-inv-blink { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 6%, transparent); } } .cp-inv-meta { min-width: 0; font-size: 13px; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-inv-due { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--cp-text); } .cp-inv-due svg { width: 15px; height: 15px; color: var(--cp-rust-hi); } .cp-inv-due.is-late, .cp-inv-due.is-late svg { color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body ol.cp-inv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 18px 0 2px !important; padding: 0 !important; list-style: none; } .cp-inv-steps li { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 32px 10px 0 0; animation: cp-inv-in .4s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 80ms + 120ms) both; } .cp-inv-steps li::before { content: ""; position: absolute; top: 12px; left: 30px; right: 6px; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); } .cp-inv-steps li:last-child::before { display: none; } .cp-inv-steps li.is-done::before { background: linear-gradient(90deg, var(--cp-rust), var(--cp-rust-hi)); transform-origin: left; animation: cp-inv-line .6s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 120ms + 250ms) both; } @keyframes cp-inv-line { from { transform: scaleX(0); } } .cp-inv-steps li > i { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--cp-text) 18%, transparent); background: var(--cp-surface); color: #fff; } .cp-inv-steps li > i svg { width: 13px; height: 13px; stroke-width: 3; } .cp-inv-steps li.is-done > i { border-color: var(--cp-rust); background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); } .cp-inv-steps li.is-now > i { border-color: var(--cp-rust-hi); box-shadow: 0 0 0 5px var(--cp-rust-soft); animation: cp-inv-pulse 2.4s ease-in-out infinite; } .cp-inv-steps li.is-now > i::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cp-rust-hi); } .cp-inv-steps li.is-part > i::after { background: conic-gradient(var(--cp-rust-hi) 0 50%, transparent 0); } .cp-inv-steps li.is-late > i { border-color: var(--cp-danger); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cp-danger) 16%, transparent); } .cp-inv-steps li.is-late > i::after { background: var(--cp-danger); } @keyframes cp-inv-pulse { 50% { box-shadow: 0 0 0 9px transparent; } } .cp-inv-steps b { font-size: 13px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .cp-inv-steps li:not(.is-done):not(.is-now) b { color: var(--cp-muted); } .cp-inv-steps small { font-size: 11.5px; color: var(--cp-dim); line-height: 1.35; } .cp-inv-steps li.is-late small { color: var(--cp-danger); font-weight: 600; } .cp-inv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } .cp-inv-kpi { min-width: 0; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 3%, transparent); } .cp-inv-kpi > span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); } .cp-inv-kpi > b { display: block; margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-inv-kpi > small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--cp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-inv-kpi.is-rust { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp) body .cp-inv-kpi.is-rust > b { color: var(--cp-rust-hi); } .cp-inv-kpi.is-bad { border-color: color-mix(in srgb, var(--cp-danger) 40%, transparent); background: color-mix(in srgb, var(--cp-danger) 8%, transparent); } html[data-theme]:not(#cp) body .cp-inv-kpi.is-bad > b { color: var(--cp-danger); } .cp-inv-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .cp-inv-bar > i { position: relative; flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .cp-inv-bar > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--cp-success), color-mix(in srgb, var(--cp-success) 65%, #fff)); transform-origin: left; animation: cp-inv-line 1s cubic-bezier(.2,.75,.2,1) .35s both; } .cp-inv-bar > span { font-size: 11.5px; font-weight: 600; color: var(--cp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-inv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; margin: 0; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2) !important; background: color-mix(in srgb, var(--cp-text) 3%, transparent) !important; color: var(--cp-text) !important; font: 600 12.5px/1 var(--cp-font, inherit); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn:active { transform: scale(.97); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn:disabled { opacity: .6; cursor: wait; } .cp-inv-btn svg { flex: none; width: 15px; height: 15px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn.is-primary { border-color: transparent !important; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)) !important; color: #fff !important; box-shadow: 0 10px 24px -12px rgba(232,85,42,.85); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn.is-primary:hover { filter: brightness(1.07); background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)) !important; border-color: transparent !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn.is-confirm, html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn.is-confirm:hover { height: auto; min-height: 38px; padding: 8px 12px; border-color: color-mix(in srgb, var(--cp-warning) 45%, transparent) !important; background: color-mix(in srgb, var(--cp-warning) 18%, transparent) !important; color: var(--cp-strong) !important; white-space: normal; text-align: left; line-height: 1.3; box-shadow: none; } .cp-inv-chk-btn { margin-left: auto !important; } .cp-inv-chk-btn em { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); } .cp-inv-chk-btn.has-warn em { background: color-mix(in srgb, var(--cp-warning) 18%, transparent); color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-chk-btn[aria-expanded="true"] { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } .cp-inv-check { margin-top: 12px; padding: 14px 16px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); animation: cp-day-drop .3s cubic-bezier(.2,.75,.2,1) both; } .cp-inv-check[hidden] { display: none !important; } .cp-inv-check > p { margin: 0 0 8px; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-check ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; margin: 0 !important; padding: 0 !important; list-style: none; } .cp-inv-check li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 8px 0; } .cp-inv-check li > i { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; } .cp-inv-check li > i svg { width: 12px; height: 12px; stroke-width: 2.6; } .cp-inv-check li.is-ok > i { background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); } .cp-inv-check li.is-warn > i { background: color-mix(in srgb, var(--cp-warning) 18%, transparent); color: var(--cp-warning); } .cp-inv-check li.is-bad > i { background: color-mix(in srgb, var(--cp-danger) 16%, transparent); color: var(--cp-danger); } .cp-inv-check li > div { flex: 1; min-width: 0; } .cp-inv-check li b { display: block; font-size: 13px; font-weight: 600; color: var(--cp-strong); } .cp-inv-check li small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-check li > :is(a, button) { flex: none; display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 2px 0; border: 0 !important; background: none !important; color: var(--cp-rust-hi) !important; font: 600 12px/1.2 var(--cp-font, inherit); text-decoration: none !important; cursor: pointer; } .cp-inv-check li > :is(a, button) svg { width: 13px; height: 13px; } html[data-theme]:not(#cp):not(#cq) body #invoice-details-top-bar a.cp-inv-issue { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body #invoice-details-top-bar a.cp-inv-issue:hover { background: color-mix(in srgb, var(--cp-rust) 24%, transparent) !important; border-color: var(--cp-rust-hi) !important; } #invoice-details-top-bar a.cp-inv-issue svg { width: 16px; height: 16px; color: var(--cp-rust-hi); } /* QR-Karte (rechte Spalte) */ .cp-inv-qr { overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-qr .cp-qr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 700; } .cp-qr-head > span { display: inline-flex; align-items: center; gap: 8px; } .cp-qr-head > span svg { width: 16px; height: 16px; color: var(--cp-rust-hi); } .cp-qr-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); } html[data-theme]:not(#cp):not(#cq) body .cp-qr-seg button { height: 28px; margin: 0; padding: 0 10px; border: 0 !important; border-radius: 3px; background: none !important; color: var(--cp-muted) !important; font: 600 11.5px/1 var(--cp-font, inherit); cursor: pointer; transition: background .15s ease, color .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-qr-seg button:hover { background: color-mix(in srgb, var(--cp-text) 6%, transparent) !important; color: var(--cp-strong) !important; border: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-qr-seg button[aria-selected="true"], html[data-theme]:not(#cp):not(#cq) body .cp-qr-seg button[aria-selected="true"]:hover { background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-qr-body { animation: cp-inv-in .3s ease both; } .cp-qr-main { display: flex; flex-direction: column; align-items: center; gap: 12px; } .cp-qr-img { position: relative; width: 188px; max-width: 100%; aspect-ratio: 1; padding: 6px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px var(--cp-line-2), 0 18px 40px -22px rgba(0,0,0,.85); overflow: hidden; } .cp-qr-img svg { display: block; width: 100%; height: 100%; } .cp-qr-img.is-in svg { animation: cp-qr-in .5s cubic-bezier(.2,.75,.2,1) both; } @keyframes cp-qr-in { from { opacity: 0; transform: scale(.94); filter: blur(4px); } } .cp-qr-img.is-in::after { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, #E8552A, transparent); box-shadow: 0 0 14px 2px rgba(232,85,42,.55); opacity: 0; animation: cp-qr-scan 1.5s ease-in-out .25s 1 both; } @keyframes cp-qr-scan { 0% { top: 8px; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } } .cp-qr-skel { position: absolute; inset: 6px; border-radius: 3px; background: linear-gradient(100deg, #ececec 30%, #f7f7f7 50%, #ececec 70%); background-size: 220% 100%; animation: cp-qr-sk 1.2s linear infinite; } @keyframes cp-qr-sk { to { background-position: -220% 0; } } .cp-qr-cap { display: flex; gap: 10px; width: 100%; margin: 0; font-size: 12px; line-height: 1.45; color: var(--cp-muted); } .cp-qr-cap > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--cp-rust-hi); } .cp-qr-cap b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body dl.cp-qr-data { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 14px 0 0 !important; padding: 8px 0 0; border-top: 1px solid var(--cp-line); } .cp-qr-data > div { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 34px; } html[data-theme]:not(#cp):not(#cq) body .cp-qr-data dt { flex: none; width: 72px; margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-qr-data dd { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; color: var(--cp-strong); } .cp-qr-data dd > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-qr-data dd > button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0 !important; border-radius: 3px; background: none !important; color: var(--cp-dim) !important; cursor: pointer; transition: color .15s ease, background .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-qr-data dd > button:hover { color: var(--cp-rust-hi) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-qr-data dd > button.is-done { color: var(--cp-success) !important; } .cp-qr-data dd > button svg { width: 14px; height: 14px; margin: 0 !important; } .cp-qr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-qr-acts .cp-inv-btn { flex: 1 1 auto; justify-content: center; height: 38px; padding: 0 10px; } .cp-qr-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; text-align: center; font-size: 13px; line-height: 1.45; color: var(--cp-muted); } .cp-qr-empty svg { width: 26px; height: 26px; color: var(--cp-dim); } .cp-qr-empty p { margin: 0; } .cp-qr-off { display: flex; gap: 10px; margin-bottom: 14px; padding: 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-warning) 35%, transparent); background: color-mix(in srgb, var(--cp-warning) 8%, transparent); } .cp-qr-off > svg { flex: none; width: 18px; height: 18px; color: var(--cp-warning); } .cp-qr-off b { display: block; font-size: 13px; color: var(--cp-strong); } .cp-qr-off p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--cp-muted); } .cp-qr-who { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-qr-who select { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); color: var(--cp-strong); font: 500 13px/1 var(--cp-font, inherit); } .cp-qr-note { display: block; font-size: 12px; line-height: 1.4; color: var(--cp-dim); } .cp-qr-draft { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--cp-warning); } .cp-qr-draft svg { flex: none; width: 15px; height: 15px; margin-top: 1px; } /* Dialog „Öffentliche Zahlungs-URL“ */ .cp-pay-note { display: flex; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-warning) 38%, transparent); background: color-mix(in srgb, var(--cp-warning) 9%, transparent); color: var(--cp-text); } .cp-pay-note.is-ok { margin: 14px 0 0; border-color: color-mix(in srgb, var(--cp-success) 35%, transparent); background: color-mix(in srgb, var(--cp-success) 8%, transparent); } .cp-pay-note > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--cp-warning); } .cp-pay-note.is-ok > svg { color: var(--cp-success); } .cp-pay-note b { display: block; font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-pay-note p { margin: 3px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--cp-muted); } .cp-pay-note.is-ok p { margin-bottom: 0; } .cp-pay-note small { font-size: 12px; color: var(--cp-dim); } .cp-pay-note.is-shake { animation: cp-inv-shake .42s ease both; } @keyframes cp-inv-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } #public-pay-url-modal-form.is-blocked :is(#view-invoice-btn, #copy-url-btn) { opacity: .45; filter: saturate(.4); } /* KI-Zahlungserinnerung (nutzt die Dialog-Bausteine der Schnellerfassung) */ .cp-inv-dlg-body { padding: 4px 20px 20px; } .cp-inv-dlg .cp-qc-types { margin-bottom: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-dlg .cp-qc-grid textarea { min-height: 250px; font-size: 13.5px; line-height: 1.55; } .cp-inv-dlg-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .cp-inv-dlg-foot > span { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cp-dim); } .cp-inv-dlg-foot > span svg { width: 13px; height: 13px; color: var(--cp-rust-hi); margin: 0 !important; } @media (min-width: 768px) and (max-width: 1199px) { .cp-inv-kpi > b { font-size: 19px; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn { height: 40px; } } @media (max-width: 767px) { .cp-inv { margin: 0 0 14px; padding: 14px; border-radius: 3px; } .cp-inv-due { margin-left: 0; width: 100%; } .cp-inv-steps li { padding-right: 4px; } .cp-inv-steps b { font-size: 12px; } .cp-inv-steps small { font-size: 10.5px; } .cp-inv-steps li::before { left: 30px; right: 2px; } .cp-inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-inv-kpi:first-child { grid-column: 1 / -1; } .cp-inv-kpi > b { font-size: 19px; } .cp-inv-acts { gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-acts .cp-inv-btn { flex: 1 1 calc(50% - 6px); justify-content: center; height: 44px; padding: 0 10px; } .cp-inv-chk-btn { margin-left: 0 !important; flex-basis: 100% !important; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-check ul { grid-template-columns: 1fr; } .cp-inv-dlg-body { padding: 4px 14px 16px; } .cp-inv-dlg-foot > span { display: none; } .cp-inv-dlg-foot { justify-content: flex-end; } html[data-theme]:not(#cp):not(#cq) body .cp-qr-acts .cp-inv-btn { height: 44px; } html[data-theme]:not(#cp):not(#cq) body .cp-qr-seg button { height: 36px; } } @media (prefers-reduced-motion: reduce) { .cp-inv, .cp-inv-steps li, .cp-inv-steps li::before, .cp-inv-steps li > i, .cp-inv-bar > i::after, .cp-inv-state i, .cp-qr-img svg, .cp-qr-img::after, .cp-qr-body, .cp-inv-check, .cp-pay-note { animation: none !important; } } html.cp-motion-off :is(.cp-inv, .cp-inv-steps li, .cp-inv-steps li::before, .cp-inv-steps li > i, .cp-inv-bar > i::after, .cp-qr-img svg, .cp-qr-img::after) { animation: none !important; } /* =========================================================================== v5.49.1 · Layout-Fixes aus „Qualität & Tests“ + eingebettete Seiten =========================================================================== */ /* Eingebettete Seiten (Mein Tag, Umsatz-Auswertung, Qualität & Tests …): später nachgeladene Inhalte der darunterliegenden Seite (z. B. „Kunden im Blick“) nicht mehr darüber mischen */ html[data-theme] body :is(#page-content, .page-content, .main-content, main, .content-wrapper):has(> .rst-inline-page) > :not(.rst-inline-page):not(script):not(style):not(template) { display: none !important; } /* iPad quer (bis 1199 px): Tippflächen wie auf Handy/iPad hoch */ @media (min-width: 1025px) and (max-width: 1199px) { html[data-theme]:not(#cp) body .rst-ai-topbar-toggle, html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle { min-height: 36px !important; } html[data-theme]:not(#cp) body .cp-dash-views button, html[data-theme]:not(#cp) body .cp-dash-edit { min-height: 34px; } html[data-theme]:not(#cp) body .cp-dash-views button { font-size: 12px; } html[data-theme]:not(#cp) body .ra-page .ra-leg { height: 34px; } html[data-theme]:not(#cp) body .ra-page .ra-card-link { min-height: 34px; } html[data-theme]:not(#cp) body .rst-cal2-btn-ghost { min-height: 36px; min-width: 36px; } html[data-theme]:not(#cp) body .cp-portal-card > header a { display: inline-flex; align-items: center; min-height: 36px; } } /* Kalender-Einträge im Monatsraster: Titel endet sauber mit „…“ statt 4 px überzustehen */ html[data-theme]:not(#cp) body .fc a.fc-daygrid-dot-event { min-width: 0; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .fc a.fc-daygrid-dot-event > .clickable { min-width: 0; flex: 1 1 auto; box-sizing: border-box; } /* =========================================================================== v5.49.1 · Qualität & Tests: Gesundheit des Portals, Nutzer intern/extern =========================================================================== */ .qa-page > * { animation: qa-rise .55s cubic-bezier(.2,.75,.2,1) both; } .qa-page > :nth-child(2) { animation-delay: .06s; } .qa-page > :nth-child(3) { animation-delay: .12s; } .qa-page > :nth-child(4) { animation-delay: .18s; } .qa-page > :nth-child(5) { animation-delay: .24s; } .qa-page > :nth-child(6) { animation-delay: .3s; } .qa-page > :nth-child(n+7) { animation-delay: .36s; } @keyframes qa-rise { from { opacity: 0; transform: translateY(14px); } } .qa-hero { --g: var(--cp-rust-hi); --beat: 2.4s; position: relative; display: grid; grid-template-columns: 200px minmax(0, 1.6fr) minmax(260px, 1fr); gap: 26px; align-items: center; margin-bottom: 16px; padding: 24px 26px; border-radius: 3px; border: 1px solid var(--cp-line-2); overflow: hidden; background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--g) 16%, transparent), transparent 55%), radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--cp-rust) 8%, transparent), transparent 60%), var(--cp-surface); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -40px rgba(0,0,0,.9); transition: background .6s ease; } .qa-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--g) 70%, transparent), transparent); } .qa-hero[data-tier="ok"] { --g: var(--qa-ok); } .qa-hero[data-tier="good"] { --g: var(--cp-rust-hi); } .qa-hero[data-tier="warn"] { --g: var(--qa-warn); } .qa-hero[data-tier="bad"] { --g: var(--qa-bad); } .qa-gauge { position: relative; width: 200px; aspect-ratio: 1; } .qa-gauge::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 60%, color-mix(in srgb, var(--g) 55%, transparent) 80%, transparent 100%); filter: blur(14px); opacity: .55; animation: qa-spin 6s linear infinite; } @keyframes qa-spin { to { transform: rotate(360deg); } } .qa-gauge svg { position: relative; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .qa-gauge circle { fill: none; stroke-width: 9; } .qa-g-track { stroke: color-mix(in srgb, var(--cp-text) 9%, transparent); } .qa-g-glow { stroke: color-mix(in srgb, var(--g) 18%, transparent); stroke-width: 18 !important; filter: blur(6px); } .qa-g-val { stroke: var(--g); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.5s cubic-bezier(.2,.75,.2,1), stroke .6s ease; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--g) 70%, transparent)); } .qa-g-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .qa-g-num b { font-size: 54px; font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .qa-g-num span { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-muted); } .qa-hero.is-loading .qa-g-num b { opacity: .35; animation: qa-blink 1.2s ease-in-out infinite; } @keyframes qa-blink { 50% { opacity: .1; } } html[data-theme]:not(#cp):not(#cq) body .qa-page .qa-hero-t { margin: 8px 0 4px !important; font-size: clamp(20px, 2vw, 26px) !important; font-weight: 400 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--cp-strong) !important; display: block; } .qa-hero-s { margin: 0 0 14px; font-size: 13px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .qa-page ul.qa-factors { display: grid; gap: 9px; margin: 0 !important; padding: 0 !important; list-style: none; } .qa-factors li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 34px; align-items: center; gap: 12px; animation: qa-rise .45s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 70ms + .15s) both; } .qa-factors li > span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 600; color: var(--cp-strong); } .qa-factors li > span small { font-size: 11.5px; font-weight: 400; color: var(--cp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qa-factors li > i { position: relative; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .qa-factors li > i b { --c: var(--cp-rust-hi); position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, transparent), var(--c)); box-shadow: 0 0 12px -2px var(--c); transition: width 1.2s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 90ms + .2s); } .qa-factors li > i b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-100%); animation: qa-sheen 2.8s ease-in-out calc(var(--i) * .3s + 1.4s) infinite; } @keyframes qa-sheen { 60%, 100% { transform: translateX(100%); } } .qa-factors li.is-ok > i b { --c: var(--qa-ok); } .qa-factors li.is-warn > i b { --c: var(--qa-warn); } .qa-factors li.is-bad > i b { --c: var(--qa-bad); } .qa-factors li > em { font-style: normal; font-size: 13px; font-weight: 700; text-align: right; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .qa-hero-live { align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-deep) 70%, transparent); } .qa-live-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cp-muted); } .qa-live-top b { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; color: var(--cp-strong); } .qa-live-top em { margin-left: auto; font-style: normal; font-size: 11.5px; } .qa-live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--g); } .qa-live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--g); opacity: 0; animation: qa-ping var(--beat) ease-out infinite; } @keyframes qa-ping { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(2.2); opacity: 0; } } .qa-ecg { width: 100%; height: 64px; } .qa-ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .qa-ecg-base { stroke: color-mix(in srgb, var(--cp-text) 10%, transparent); stroke-width: 1.5; } .qa-ecg-run { stroke: var(--g); stroke-width: 2.4; stroke-dasharray: 16 84; filter: drop-shadow(0 0 5px var(--g)); animation: qa-ecg var(--beat) linear infinite; } @keyframes qa-ecg { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } html[data-theme]:not(#cp):not(#cq) body .qa-page dl.qa-live-stats { display: grid; gap: 0; margin: 0 !important; } .qa-live-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .qa-page .qa-live-stats dt { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .qa-page .qa-live-stats dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; text-align: right; } .qa-hero.is-static .qa-factors li, .qa-hero.is-static .qa-factors li > i b { animation: none; transition: none; } /* Nutzer */ .qa-skel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .qa-skel i { height: 190px; border-radius: 3px; background: linear-gradient(100deg, color-mix(in srgb, var(--cp-text) 4%, transparent) 30%, color-mix(in srgb, var(--cp-rust-hi) 12%, transparent) 50%, color-mix(in srgb, var(--cp-text) 4%, transparent) 70%); background-size: 220% 100%; animation: qa-sk 1.3s linear infinite; } @keyframes qa-sk { to { background-position: -220% 0; } } .qa-ugrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } .qa-ucard { --u: var(--cp-rust-hi); position: relative; min-width: 0; padding: 18px; border-radius: 3px; border: 1px solid var(--cp-line); background: radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--u) 10%, transparent), transparent 55%), color-mix(in srgb, var(--cp-text) 2%, transparent); overflow: hidden; animation: qa-rise .5s cubic-bezier(.2,.75,.2,1) both; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .qa-ucard.is-ex { --u: var(--cp-info, #5b9cf5); animation-delay: .08s; } .qa-ucard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--u) 40%, transparent); box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--u) 60%, transparent); } .qa-ucard > header { display: flex; align-items: center; gap: 12px; } .qa-uico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 3px; background: color-mix(in srgb, var(--u) 16%, transparent); color: var(--u); } .qa-uico svg { width: 19px; height: 19px; } .qa-ucard > header b { display: block; font-size: 14px; font-weight: 600; color: var(--cp-strong); } .qa-ucard > header small { font-size: 12px; color: var(--cp-muted); } .qa-ubig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 16px 0 12px; } .qa-ubig b { font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .qa-ubig span { font-size: 13px; color: var(--cp-muted); } .qa-ubig em { flex-basis: 100%; font-style: normal; font-size: 12px; color: var(--cp-dim); } .qa-ustack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--cp-text) 6%, transparent); gap: 2px; } .qa-ustack i { flex: 0 0 var(--w); min-width: 3px; transform-origin: left; animation: qa-grow .9s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 90ms + .25s) both; } @keyframes qa-grow { from { transform: scaleX(0); } } .qa-ustack .s-on { background: var(--qa-ok); box-shadow: 0 0 10px var(--qa-ok); } .qa-ustack .s-today { background: var(--u); } .qa-ustack .s-week { background: color-mix(in srgb, var(--u) 65%, transparent); } .qa-ustack .s-month { background: color-mix(in srgb, var(--u) 35%, transparent); } .qa-ustack .s-old { background: color-mix(in srgb, var(--cp-text) 18%, transparent); } .qa-ustack .s-never { background: color-mix(in srgb, var(--cp-text) 8%, transparent); } html[data-theme]:not(#cp):not(#cq) body .qa-page ul.qa-ustats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0 !important; padding: 0 !important; list-style: none; } .qa-ustats li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; padding: 9px 10px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); min-width: 0; } .qa-ustats li i { width: 7px; height: 7px; border-radius: 50%; background: var(--u); } .qa-ustats li.s-on i { background: var(--qa-ok); box-shadow: 0 0 0 0 var(--qa-ok); animation: qa-live 2s ease-out infinite; } @keyframes qa-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qa-ok) 70%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } } .qa-ustats li.s-week i { background: color-mix(in srgb, var(--u) 65%, transparent); } .qa-ustats li.s-never i { background: color-mix(in srgb, var(--cp-text) 25%, transparent); } .qa-ustats li b { font-size: 18px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .qa-ustats li span { grid-column: 1 / -1; font-size: 11px; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qa-uwho { margin-top: 14px; } html[data-theme]:not(#cp):not(#cq) body .qa-page .qa-uwho h4 { margin: 0 0 8px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--cp-dim) !important; } html[data-theme]:not(#cp):not(#cq) body .qa-page .qa-uwho ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; } .qa-uwho li { display: grid; grid-template-columns: 26px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; max-width: 100%; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--cp-line); background: var(--cp-surface); animation: qa-rise .4s ease both; } .qa-uwho li > span { grid-row: 1 / 3; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--u) 20%, transparent); color: var(--u); font-size: 10px; font-weight: 700; } .qa-uwho li.is-live > span::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--qa-ok); box-shadow: 0 0 0 2px var(--cp-surface); } .qa-uwho li b { font-size: 12px; font-weight: 600; color: var(--cp-strong); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .qa-uwho li small { font-size: 10.5px; color: var(--cp-dim); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .qa-uwho li.is-live small { color: var(--qa-ok); } .qa-uempty { margin: 14px 0 0; } .qa-uact { margin-top: 16px; padding: 16px 18px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2%, transparent); } .qa-uact > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .qa-uleg { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: .06em; } .qa-uleg i { width: 9px; height: 9px; border-radius: 3px; margin-left: 8px; } .qa-uleg i.is-in { background: var(--cp-rust-hi); } .qa-uleg i.is-ex { background: var(--cp-info, #5b9cf5); } .qa-ubars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; height: 150px; margin: 14px 0 8px; } .qa-ubars > div { display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; gap: 3px; min-width: 0; } .qa-ubars > div > span { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-start; width: 100%; max-width: 28px; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 4%, transparent); overflow: hidden; } .qa-ubars > div > span i { display: block; height: var(--h); flex: none; transform-origin: bottom; animation: qa-up .8s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 45ms + .2s) both; } @keyframes qa-up { from { transform: scaleY(0); } } .qa-ubars i.is-in { background: linear-gradient(180deg, var(--cp-rust-hi), var(--cp-rust)); } .qa-ubars i.is-ex { background: linear-gradient(180deg, color-mix(in srgb, var(--cp-info, #5b9cf5) 90%, #fff), var(--cp-info, #5b9cf5)); } .qa-ubars em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--cp-strong); min-height: 13px; font-variant-numeric: tabular-nums; } .qa-ubars small { font-size: 10.5px; color: var(--cp-dim); } .qa-ubars .is-we small { color: color-mix(in srgb, var(--cp-dim) 60%, transparent); } .qa-ubars .is-today > span { box-shadow: 0 0 0 1px var(--cp-rust-line); } .qa-ubars .is-today small { color: var(--cp-rust-hi); font-weight: 700; } .qa-ubody.is-static :is(.qa-ucard, .qa-ustack i, .qa-ubars > div > span i, .qa-uwho li) { animation: none; } /* Matrix: neues Ergebnis springt kurz auf */ html[data-theme]:not(#cp) body .qa-page .qa-cell { transition: transform .2s ease, box-shadow .2s ease; } html[data-theme]:not(#cp) body .qa-page .qa-cell:hover { transform: translateY(-1px); } html[data-theme]:not(#cp) body .qa-page .qa-cell.is-pop { animation: qa-pop .5s cubic-bezier(.2,1.6,.4,1) both; } @keyframes qa-pop { from { transform: scale(.6); opacity: 0; } } .qa-card { transition: border-color .25s ease, box-shadow .25s ease; } .qa-card:hover { border-color: color-mix(in srgb, var(--cp-rust-hi) 22%, var(--cp-line-2)); } @media (max-width: 1199px) { .qa-hero { grid-template-columns: 170px minmax(0, 1fr); } .qa-gauge { width: 170px; } .qa-g-num b { font-size: 44px; } .qa-hero-live { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .qa-live-top { grid-column: 1 / -1; } } @media (max-width: 767px) { .qa-hero { grid-template-columns: 1fr; justify-items: center; padding: 20px 16px; gap: 16px; text-align: center; } .qa-gauge { width: 160px; } .qa-hero-main { width: 100%; } .qa-hero-main .qa-kicker { justify-content: center; } .qa-factors li { grid-template-columns: minmax(0, 1fr) 34px; text-align: left; } .qa-factors li > i { grid-column: 1 / -1; grid-row: 2; } .qa-hero-live { width: 100%; grid-template-columns: 1fr; text-align: left; } .qa-ugrid, .qa-skel { grid-template-columns: 1fr; } html[data-theme]:not(#cp):not(#cq) body .qa-page ul.qa-ustats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qa-ubars { gap: 3px; height: 120px; } .qa-ubars em { font-size: 9.5px; } } @media (prefers-reduced-motion: reduce) { .qa-page > *, .qa-gauge::before, .qa-factors li, .qa-factors li > i b::after, .qa-live-dot::after, .qa-ecg-run, .qa-ucard, .qa-ustack i, .qa-ubars i, .qa-uwho li, .qa-ustats li.s-on i, .qa-cell.is-pop, .qa-skel i { animation: none !important; } .qa-g-val, .qa-factors li > i b { transition: none !important; } } html.cp-motion-off :is(.qa-page > *, .qa-gauge::before, .qa-factors li, .qa-factors li > i b::after, .qa-ecg-run, .qa-ucard, .qa-ustack i, .qa-ubars i, .qa-uwho li) { animation: none !important; } /* v5.50.0 · Dokument-Vorschau im CRM (Rechnung style_ca, Angebot, Vertrag): Papier behält dunkle Schrift – modern-ui.css setzt im Dunkelmodus „.invoice-preview table { color: var(--mui-text) !important }“ */ html[data-theme]:not(#cp):not(#cq) body .invoice-preview-container .ca-inv, html[data-theme]:not(#cp):not(#cq) body .invoice-preview-container .ca-inv table { color: #06070A !important; } /* =========================================================================== v5.50.0 · Rechnung: Entwurf löschen, Korrigieren, geändert nach Versand, E-Rechnung =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn.is-danger { color: var(--cp-danger) !important; border-color: color-mix(in srgb, var(--cp-danger) 35%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn.is-danger:hover { background: color-mix(in srgb, var(--cp-danger) 12%, transparent) !important; border-color: var(--cp-danger) !important; color: var(--cp-danger) !important; } .cp-inv-changed { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-warning) 40%, transparent); background: color-mix(in srgb, var(--cp-warning) 9%, transparent); animation: cp-inv-in .4s ease both; } .cp-inv-changed > svg { flex: none; width: 20px; height: 20px; color: var(--cp-warning); } .cp-inv-changed > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cp-inv-changed b { font-size: 13.5px; color: var(--cp-strong); } .cp-inv-changed span { font-size: 12.5px; color: var(--cp-muted); line-height: 1.45; } /* v5.166.0 · Skonto im Rechnungs-Cockpit */ .cp-inv-sk { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 12px 0 0; padding: 11px 14px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2%, transparent); } .cp-inv-sk > svg { flex: none; width: 18px; height: 18px; color: var(--cp-muted); } .cp-inv-sk > div { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cp-inv-sk b { font-size: 13px; color: var(--cp-strong); } .cp-inv-sk span { font-size: 12.5px; color: var(--cp-muted); line-height: 1.45; } .cp-inv-sk.is-done > svg { color: var(--cp-success); } .cp-inv-sk.is-due { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-inv-sk.is-due > svg { color: var(--cp-rust-hi); } .cp-inv-sk.is-late { border-color: color-mix(in srgb, var(--cp-warning) 45%, transparent); background: color-mix(in srgb, var(--cp-warning) 8%, transparent); } .cp-inv-sk.is-late > svg { color: var(--cp-warning); } .cp-inv-sk.is-form { flex-direction: column; align-items: stretch; } .cp-inv-sk-f { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 260px); gap: 12px; flex: none !important; flex-direction: row !important; } .cp-inv-sk-f label { display: flex; flex-direction: column; gap: 5px; margin: 0; } .cp-inv-sk-f label > span { font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-sk-f input { height: 38px; padding: 0 11px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 500 14px/1 var(--cp-font, inherit) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-sk-f input:focus { border-color: var(--cp-rust-line) !important; outline: 2px solid var(--cp-rust-soft); } .cp-inv-sk-prev { margin: 0; font-size: 12.5px; color: var(--cp-text); } .cp-inv-sk-prev .is-warn { color: var(--cp-warning); font-size: 12.5px; } .cp-inv-sk-a { display: flex; justify-content: flex-end; gap: 8px; flex: none !important; flex-direction: row !important; } @media (max-width: 600px) { .cp-inv-sk-f { grid-template-columns: minmax(0, 1fr); } } /* v5.167.0 · Verzug im Rechnungs-Cockpit und im Mahn-Dialog */ .cp-inv-late { border-color: color-mix(in srgb, var(--cp-danger) 35%, transparent); background: color-mix(in srgb, var(--cp-danger) 6%, transparent); } .cp-inv-late > svg { color: var(--cp-danger); } .cp-inv-latecalc { margin: 8px 0 0; padding: 10px 14px; border-radius: 3px; border: 1px solid var(--cp-line); } .cp-inv-latecalc table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cp-inv-latecalc th { padding: 4px 8px 6px 0; color: var(--cp-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--cp-line); } .cp-inv-latecalc td { padding: 6px 8px 6px 0; color: var(--cp-text); border-bottom: 1px solid var(--cp-line); white-space: nowrap; } .cp-inv-latecalc td:nth-child(n+2), .cp-inv-latecalc th:nth-child(n+2) { text-align: right; } .cp-inv-latecalc small { color: var(--cp-muted); font-size: 11px; } .cp-inv-latecalc p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--cp-muted); } .cp-inv-claim { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--cp-line); cursor: pointer; font-weight: 400; } .cp-inv-claim input { flex: none; margin-top: 3px; accent-color: var(--cp-rust-hi); } .cp-inv-claim span { display: grid; gap: 2px; } .cp-inv-claim b { color: var(--cp-strong); font-size: 13px; font-weight: 500; } .cp-inv-claim small { color: var(--cp-muted); font-size: 12px; } /* v5.175.0 Rechnungskorrektur (Teilgutschrift) – Cockpit-Block und Dialog */ .cp-inv-corr svg { color: var(--cp-rust-hi); } .cp-inv-corr a { color: var(--cp-strong); text-decoration: underline; text-underline-offset: 2px; } .cp-pc { display: grid; gap: 14px; } .cp-pc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .cp-pc-tbl th { padding: 6px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); text-align: left; border-bottom: 1px solid var(--cp-line-2); } .cp-pc-tbl td { padding: 8px; vertical-align: top; border-bottom: 1px solid var(--cp-line); color: var(--cp-text); } .cp-pc-tbl .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .cp-pc-tbl td b { color: var(--cp-strong); font-weight: 600; } .cp-pc-tbl td small { display: block; margin-top: 2px; color: var(--cp-muted); font-size: 11.5px; } .cp-pc-tbl tr.is-off td { color: var(--cp-dim); } .cp-pc-q { white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pc-q input { width: 84px; height: 32px; padding: 4px 8px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 500 13px/1.2 var(--cp-font, inherit) !important; text-align: right; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pc :is(input).is-bad { border-color: var(--cp-danger) !important; } .cp-pc-q .cp-bk-lnk { margin-left: 8px; font-size: 12px; } .cp-pc-free { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto !important; align-items: end; } .cp-pc-free .cp-dd-chk { flex-direction: row !important; align-items: center; min-height: 40px; } .cp-pc-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--cp-muted); } .cp-pc-note svg { flex: none; width: 15px; height: 15px; color: var(--cp-warning); } .cp-pc-sum { display: grid; gap: 4px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2%, transparent); } .cp-pc-sum > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--cp-text); font-variant-numeric: tabular-nums; } .cp-pc-sum > div.is-total { padding-top: 4px; border-top: 1px solid var(--cp-line-2); font-size: 14px; } .cp-pc-sum > div.is-total b { color: var(--cp-strong); } .cp-pc-sum p { margin: 4px 0 0; font-size: 12.5px; color: var(--cp-muted); } .cp-pc-sum p b { color: var(--cp-strong); } .cp-pc-sum p b.is-warn { color: var(--cp-warning); } @media (max-width: 767px) { .cp-pc-free { grid-template-columns: minmax(0, 1fr) !important; } .cp-pc-tbl th:nth-child(2), .cp-pc-tbl td:nth-child(2) { display: none; } } /* v5.177.0 Lieferscheine (invoice-tools.js cpDelivery) – Block im Cockpit bzw. in der Leiste, Erstellen-/Senden-Dialog */ .cp-inv-sk.cp-ls.is-list { align-items: flex-start; } .cp-inv-sk.cp-ls.is-list > svg { margin-top: 1px; } .cp-ls-list { flex: 1 1 100%; display: grid; gap: 0; margin: 2px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--cp-line); } .cp-ls-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 0; border-bottom: 1px solid var(--cp-line); } .cp-ls-list > li:last-child { border-bottom: 0; padding-bottom: 0; } .cp-ls-list > li > i { flex: none; display: inline-flex; color: var(--cp-muted); } .cp-ls-list > li > i svg { width: 16px; height: 16px; } .cp-ls-list > li.is-sent > i { color: var(--cp-success); } .cp-ls-list > li.is-off > i, .cp-ls-list > li.is-off b { color: var(--cp-dim); } .cp-ls-list > li.is-off b { text-decoration: line-through; text-decoration-thickness: 1px; } .cp-ls-list > li > div:not(.cp-ls-acts):not(.cp-ls-cx) { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cp-ls-list > li b { font-size: 13px; font-variant-numeric: tabular-nums; } .cp-ls-acts { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-ls-acts .cp-inv-btn { height: 32px; padding: 0 10px; font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn.is-quiet { border-color: transparent !important; background: none !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-btn.is-quiet:hover { color: var(--cp-danger) !important; background: color-mix(in srgb, var(--cp-danger) 8%, transparent) !important; } .cp-ls-cx { flex: 1 1 100%; display: grid; gap: 8px; padding: 10px 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-danger) 30%, transparent); background: color-mix(in srgb, var(--cp-danger) 5%, transparent); } .cp-ls-cx label { display: flex; flex-direction: column; gap: 5px; margin: 0; } .cp-ls-cx label > span { font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-ls-cx input { height: 38px; padding: 0 11px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 500 14px/1 var(--cp-font, inherit) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ls-cx input:focus { border-color: var(--cp-rust-line) !important; outline: 2px solid var(--cp-rust-soft); } .cp-ls-cx p { margin: 0; font-size: 12.5px !important; color: var(--cp-muted); } .cp-ls-dlg.cp-ls-new .cp-qc-box { width: min(780px, 100%); } .cp-ls-tbl { margin-bottom: 6px; } .cp-ls-tbl td.cp-pc-q { white-space: nowrap; } .cp-ls-tbl td.cp-pc-q em { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-ls-tbl .cp-pc-q input.is-wrong { border-color: var(--cp-danger) !important; outline: 2px solid color-mix(in srgb, var(--cp-danger) 25%, transparent); } .cp-ls-full { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cp-success); } .cp-ls-full svg { width: 13px; height: 13px; } .cp-ls-quick { display: flex; gap: 14px; margin: 0 0 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-ls-quick .cp-bk-lnk { padding: 0 !important; border: 0 !important; background: none !important; color: var(--cp-rust-hi) !important; font: 500 12.5px/1.2 var(--cp-font, inherit); cursor: pointer; } .cp-ls-grid .cp-ls-w2 { grid-column: span 2; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-dlg.cp-ls-new .cp-qc-grid textarea { min-height: 64px; font-size: 13.5px; line-height: 1.5; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-dlg.cp-ls-new .cp-qc-grid textarea[data-lsf="address"] { min-height: 104px; } .cp-ls-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0 0; font-size: 12.5px; color: var(--cp-muted); } .cp-ls-sum b { color: var(--cp-strong); font-weight: 600; } .cp-ls-sum b.is-warn { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-warning); } .cp-ls-sum svg { flex: none; width: 14px; height: 14px; } .cp-ls-dlg .cp-inv-dlg-foot .cp-qc-cancel svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; } @media (max-width: 640px) { .cp-ls-grid .cp-ls-w2 { grid-column: 1 / -1; } .cp-ls-tbl th:nth-child(3), .cp-ls-tbl td:nth-child(3) { display: none; } .cp-ls-acts { flex: 1 1 100%; } } .cp-inv-letter { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 10px; margin: 10px 0 14px; } /* v5.174.0 Mahnschreiben als PDF */ .cp-inv-letter .cp-inv-claim { flex: 1 1 320px; margin: 0; } .cp-inv-days { display: flex; flex-direction: column; justify-content: center; gap: 3px; margin: 0; padding: 6px 10px; border-radius: 3px; border: 1px solid var(--cp-line); } .cp-inv-days span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-days select { height: 28px; min-width: 96px; padding: 2px 6px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 500 13px/1.2 var(--cp-font, inherit) !important; box-shadow: none !important; } .cp-inv-letter > .cp-qc-cancel { align-self: center; display: inline-flex; align-items: center; gap: 6px; } .cp-inv-letter > .cp-qc-cancel svg { width: 15px; height: 15px; } .cp-inv-letter-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 11px; border-radius: 3px; border: 1px solid var(--cp-rust-line, var(--cp-line-2)); background: color-mix(in srgb, var(--cp-rust-hi) 6%, transparent); font-size: 13px; color: var(--cp-text); } .cp-inv-letter-note svg { flex: none; width: 16px; height: 16px; color: var(--cp-rust-hi); } .cp-inv-letter-note b { color: var(--cp-strong); font-weight: 600; } .cp-inv-dico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-inv-dico svg { width: 20px; height: 20px; } .cp-inv-dico.is-danger { background: color-mix(in srgb, var(--cp-danger) 14%, transparent); color: var(--cp-danger); } .cp-inv-dtext { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--cp-text); } .cp-inv-dnote { display: flex; gap: 10px; margin: 0 0 6px; padding: 10px 12px; border-radius: 3px; font-size: 12.5px; line-height: 1.45; color: var(--cp-text); } .cp-inv-dnote svg { flex: none; width: 16px; height: 16px; margin-top: 1px; } .cp-inv-dnote.is-ok { background: color-mix(in srgb, var(--cp-success) 10%, transparent); } .cp-inv-dnote.is-ok svg { color: var(--cp-success); } .cp-inv-dnote.is-warn { background: color-mix(in srgb, var(--cp-warning) 10%, transparent); } .cp-inv-dnote.is-warn svg { color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-save.cp-inv-danger { background: linear-gradient(135deg, #F06A6E, var(--cp-danger)) !important; } .cp-inv-opts { display: grid; gap: 10px; } .cp-inv-opt { padding: 14px 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 2%, transparent); animation: cp-inv-in .35s ease both; } .cp-inv-opt + .cp-inv-opt { animation-delay: .07s; } .cp-inv-opt.is-rec { border-color: var(--cp-rust-line); background: radial-gradient(100% 140% at 0% 0%, var(--cp-rust-soft), transparent 60%); } .cp-inv-opt > header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .cp-inv-opt > header b { font-size: 14.5px; font-weight: 600; color: var(--cp-strong); } .cp-inv-opt > header em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-inv-opt > header em.is-muted { background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-muted); } .cp-inv-opt > p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } .cp-inv-opt > div { display: flex; flex-wrap: wrap; gap: 8px; } .cp-inv-xr { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-xr h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--cp-muted) !important; } .cp-inv-xr h5 svg { width: 15px; height: 15px; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-xr ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; margin: 0 !important; padding: 0 !important; list-style: none; } .cp-inv-xr li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; min-width: 0; } .cp-inv-xr li > i { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; } .cp-inv-xr li > i svg { width: 12px; height: 12px; stroke-width: 2.6; } .cp-inv-xr li.is-ok > i { background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); } .cp-inv-xr li.is-warn > i { background: color-mix(in srgb, var(--cp-warning) 18%, transparent); color: var(--cp-warning); } .cp-inv-xr li b { display: block; font-size: 13px; font-weight: 600; color: var(--cp-strong); } .cp-inv-xr li small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-xr-dl a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--cp-rust-hi) !important; text-decoration: none !important; } .cp-inv-xr-dl a svg { width: 14px; height: 14px; } .cp-inv-xmlnote { display: flex; gap: 10px; margin: 0 0 14px; padding: 11px 13px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); font-size: 12.5px; line-height: 1.45; color: var(--cp-text); } .cp-inv-xmlnote svg { flex: none; width: 18px; height: 18px; color: var(--cp-rust-hi); } .cp-inv-xmlnote b { display: block; font-size: 13px; color: var(--cp-strong); } .cp-inv-xmlnote.is-warn { border-color: color-mix(in srgb, var(--cp-warning) 40%, transparent); background: color-mix(in srgb, var(--cp-warning) 9%, transparent); } .cp-inv-xmlnote.is-warn svg { color: var(--cp-warning); } #invoice-item-table.cp-inv-flash { animation: cp-inv-flash 1.6s ease both; border-radius: 3px; } @keyframes cp-inv-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--cp-rust-hi); } 100% { box-shadow: 0 0 0 3px transparent; } } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .cp-inv-xr ul { grid-template-columns: 1fr; } .cp-inv-changed { flex-wrap: wrap; } .cp-inv-changed .cp-inv-btn { width: 100%; justify-content: center; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-opt .cp-inv-btn { flex: 1 1 100%; justify-content: center; height: 44px; } } /* =========================================================================== v5.50.0 · Chat-Knopf: Puls sitzt genau auf dem runden Knopf (vorher am größeren Container → versetzt) =========================================================================== */ html[data-theme]:not(#cp) body > #js-init-chat-icon.has-message::after { content: none !important; animation: none !important; box-shadow: none !important; } html[data-theme]:not(#cp) body > #js-init-chat-icon.has-message #js-chat-min-icon.chat-min-icon { position: relative; overflow: visible !important; } html[data-theme]:not(#cp) body > #js-init-chat-icon.has-message #js-chat-min-icon.chat-min-icon::before, html[data-theme]:not(#cp) body > #js-init-chat-icon.has-message #js-chat-min-icon.chat-min-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; border: 2px solid rgba(232,85,42,.7); opacity: 0; animation: cp-chat-ping 2.4s cubic-bezier(.2,.75,.2,1) infinite; } html[data-theme]:not(#cp) body > #js-init-chat-icon.has-message #js-chat-min-icon.chat-min-icon::after { animation-delay: 1.2s; } @keyframes cp-chat-ping { 0% { transform: scale(1); opacity: .85; } 80%, 100% { transform: scale(1.75); opacity: 0; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body > #js-init-chat-icon.has-message #js-chat-min-icon.chat-min-icon::before, html[data-theme]:not(#cp) body > #js-init-chat-icon.has-message #js-chat-min-icon.chat-min-icon::after { animation: none !important; } } /* =========================================================================== v5.50.0 · Mein Profil → Menü (profile-menu.js): Anleitung, drei klare Spalten, Live-Vorschau =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body #js-left-menu-customization-area.cp-lm { padding: 16px !important; border: 0 !important; border-radius: 3px; background: transparent !important; } .cp-lm-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: radial-gradient(100% 160% at 0% 0%, var(--cp-rust-soft), transparent 60%), var(--cp-surface); animation: cp-inv-in .4s ease both; } .cp-lm-intro > div { display: flex; flex-direction: column; gap: 4px; max-width: 760px; } .cp-lm-intro b { font-size: 15px; font-weight: 600; color: var(--cp-strong); } .cp-lm-intro span { font-size: 13px; line-height: 1.55; color: var(--cp-muted); } .cp-lm-intro em { font-style: normal; font-weight: 600; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-lm-intro ol { display: flex; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none; } .cp-lm-intro ol li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid var(--cp-line-2); font-size: 12px; font-weight: 600; color: var(--cp-text); } .cp-lm-intro ol i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cp-rust); color: #fff; font-style: normal; font-size: 11px; } html[data-theme]:not(#cp):not(#cq) body .cp-lm > .row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-lm > .row > .cp-lm-col { width: auto !important; max-width: none !important; padding: 0 !important; flex: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-lm .cp-lm-col > .bg-white { height: 100%; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-surface) !important; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-lm .cp-lm-col .strong, html[data-theme]:not(#cp):not(#cq) body .cp-lm .cp-lm-col.is-prev .p15.text-center { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 18px 12px !important; text-align: left !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-strong) !important; border-bottom: 1px solid var(--cp-line); margin-bottom: 12px; } .cp-lm .cp-lm-col .strong small, .cp-lm .cp-lm-sub { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cp-dim); } .cp-lm .cp-lm-col.is-prev .p15.text-center strong { font-weight: 700; } html[data-theme]:not(#cp):not(#cq) body .cp-lm .left-menu-item { display: flex !important; align-items: center; min-height: 44px; margin: 0 0 6px !important; padding: 0 12px !important; border-radius: 3px; border: 1px solid var(--cp-line-2) !important; background: var(--cp-surface-2) !important; color: var(--cp-strong) !important; font-size: 13.5px; cursor: grab; transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-lm .left-menu-item:hover { border-color: var(--cp-rust-line) !important; background: color-mix(in srgb, var(--cp-rust) 8%, var(--cp-surface-2)) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-lm .left-menu-item.ui-sortable-helper { cursor: grabbing; transform: rotate(-1deg) scale(1.02); box-shadow: 0 18px 40px -18px rgba(0,0,0,.9); border-color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-lm .left-menu-item > .float-start { flex: 1; display: flex; align-items: center; gap: 8px; float: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-lm .left-menu-item > .float-end { float: none !important; display: inline-flex; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-lm .left-menu-item svg { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-lm .left-menu-item.ml20 { margin-left: 22px !important; position: relative; min-height: 38px; font-size: 13px; background: transparent !important; } .cp-lm .left-menu-item.ml20::before { content: ""; position: absolute; left: -14px; top: -6px; bottom: 50%; width: 10px; border-left: 1px solid var(--cp-line-2); border-bottom: 1px solid var(--cp-line-2); border-bottom-left-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-lm #menu-item-list-2 { border: 1px dashed var(--cp-line-2) !important; border-radius: 3px; margin: 0 14px 12px; padding: 10px !important; text-align: left !important; } html[data-theme]:not(#cp):not(#cq) body .cp-lm #menu-item-list-1 { min-height: 160px; margin: 0 14px 14px; padding: 10px !important; border-radius: 3px; border: 1px dashed var(--cp-line-2); text-align: left !important; } .cp-lm #menu-item-list-1.is-empty { display: flex; align-items: center; justify-content: center; } .cp-lm #menu-item-list-1.is-empty::before { content: "Alles ist in deinem Menü. Punkte hierher ziehen, um sie auszublenden."; max-width: 220px; font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-lm .custom-menu-button, html[data-theme]:not(#cp):not(#cq) body .cp-lm-col.is-menu .btn-default { border: 1px dashed var(--cp-rust-line) !important; background: transparent !important; color: var(--cp-rust-hi) !important; border-radius: 3px !important; } .cp-lm-hidden { display: none !important; } .cp-lm-prev { margin: 0 14px 14px; padding: 14px 12px; border-radius: 3px; background: var(--cp-deep); border: 1px solid var(--cp-line); max-height: 620px; overflow-y: auto; } .cp-lm-prev section + section { margin-top: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-lm-prev h6 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; padding: 0 8px; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--cp-muted) !important; } .cp-lm-prev h6 i { width: 5px; height: 5px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 8px var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-lm-prev ul { margin: 0 !important; padding: 0 !important; list-style: none; } .cp-lm-prev li { padding: 7px 10px; border-radius: 3px; font-size: 13px; color: var(--cp-text); animation: cp-inv-in .25s ease both; } .cp-lm-prev li.is-sub { padding-left: 26px; font-size: 12.5px; color: var(--cp-muted); } .cp-lm-prev li.is-fixed { color: var(--cp-dim); font-style: italic; } .cp-lm-empty { margin: 0; font-size: 12.5px; color: var(--cp-dim); text-align: center; } @media (max-width: 991px) { html[data-theme]:not(#cp):not(#cq) body .cp-lm > .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .cp-lm > .row > .cp-lm-col.is-prev { grid-column: 1 / -1; } } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body .cp-lm > .row { grid-template-columns: 1fr; } .cp-lm-intro ol { display: none; } html[data-theme]:not(#cp):not(#cq) body #js-left-menu-customization-area.cp-lm { padding: 10px !important; } } /* =========================================================================== v5.50.0 · Rechnung: Karte „Verlauf“ (invoice-tools.js) =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-inv-hist .cp-hist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; } .cp-hist-head > span { display: inline-flex; align-items: center; gap: 8px; } .cp-hist-head > span svg { width: 16px; height: 16px; color: var(--cp-rust-hi); } .cp-hist-head em { font-style: normal; min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-size: 11px; font-weight: 700; } html[data-theme]:not(#cp):not(#cq) body ol.cp-hist { position: relative; margin: 0 !important; padding: 0 !important; list-style: none; } .cp-hist::before { content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--cp-rust-line), var(--cp-line) 60%, transparent); } .cp-hist li { --c: var(--cp-muted); position: relative; display: flex; gap: 12px; padding: 7px 0; animation: cp-inv-in .35s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 45ms) both; } .cp-hist li.is-more { display: none; } .cp-inv-hist.is-all .cp-hist li.is-more { display: flex; } .cp-hist li > i { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 50%; background: var(--cp-surface); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); box-shadow: 0 0 0 3px var(--cp-surface); } .cp-hist li > i svg { width: 14px; height: 14px; } .cp-hist li > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 3px; } .cp-hist li b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cp-strong); line-height: 1.3; } .cp-hist li small { font-size: 11.5px; line-height: 1.4; color: var(--cp-dim); } .cp-hist-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-muted); } .cp-hist-badge.is-xml { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-hist li.t-sent { --c: var(--cp-rust-hi); } .cp-hist li.t-reminder { --c: var(--cp-warning); } .cp-hist li.t-viewed { --c: var(--cp-info); } .cp-hist li.t-payment { --c: var(--cp-success); } .cp-hist li.t-issued { --c: var(--cp-rust); } .cp-hist li.t-overdue, .cp-hist li.t-cancelled { --c: var(--cp-danger); } .cp-hist li.t-credit { --c: var(--cp-info); } .cp-hist li.t-edit { --c: var(--cp-warning); } .cp-hist li.t-created { --c: var(--cp-dim); } .cp-hist li:first-child > i { background: color-mix(in srgb, var(--c) 16%, var(--cp-surface)); } html[data-theme]:not(#cp):not(#cq) body .cp-hist-more { width: 100%; margin: 8px 0 0; height: 36px; border-radius: 3px; border: 1px dashed var(--cp-line-2) !important; background: transparent !important; color: var(--cp-rust-hi) !important; font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-inv-hist.is-all .cp-hist-more { display: none; } @media (prefers-reduced-motion: reduce) { .cp-hist li { animation: none !important; } } /* v5.50.1 · Rechnung löschen (auch ausgestellt): Warnung + Bestätigung per Rechnungsnummer */ .cp-inv-dnote.is-bad { background: color-mix(in srgb, var(--cp-danger) 10%, transparent); } .cp-inv-dnote.is-bad svg { color: var(--cp-danger); } .cp-inv-dnote b { color: var(--cp-strong); } .cp-inv-confirm { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; } .cp-inv-confirm span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-inv-confirm input { height: 42px; padding: 0 12px !important; border-radius: 3px !important; border: 1px solid color-mix(in srgb, var(--cp-danger) 40%, transparent) !important; background: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 600 14px/1 var(--cp-font, inherit); letter-spacing: .04em; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-confirm input:focus { outline: 2px solid color-mix(in srgb, var(--cp-danger) 30%, transparent); border-color: var(--cp-danger) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-save.cp-inv-danger:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.5); } .cp-inv-opt.is-danger { border-color: color-mix(in srgb, var(--cp-danger) 30%, transparent); } html[data-theme]:not(#cp) body .cp-inv-opt.is-danger > header b { color: var(--cp-danger); } /* v5.50.1 · Rechnungsliste: Hinweis bei leerem Zeitraum (Filter nach Fälligkeitsdatum) */ .cp-inv-listhint { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 14px 16px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-warning) 38%, transparent); background: color-mix(in srgb, var(--cp-warning) 8%, transparent); animation: cp-inv-in .35s ease both; } .cp-inv-listhint > svg { flex: none; width: 20px; height: 20px; color: var(--cp-warning); } .cp-inv-listhint > div:first-of-type { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; } .cp-inv-listhint b { font-size: 13.5px; color: var(--cp-strong); } .cp-inv-listhint span { font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } .cp-inv-listhint em { font-style: normal; font-weight: 600; color: var(--cp-text); } .cp-inv-listhint-acts { display: flex; gap: 8px; flex-wrap: wrap; } html[data-theme]:not(#cp):not(#cq) body .cp-inv-listhint a.cp-inv-btn { text-decoration: none !important; } /* v5.50.2 · Kundenportal → Rechnung: Überweisungsfeld (contentag-client-portal.js renderPay) */ .cp-cpay { max-width: 1000px; margin: 0 auto 16px; padding: 18px 20px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: radial-gradient(100% 150% at 0% 0%, var(--cp-rust-soft), transparent 60%), var(--cp-surface); color: var(--cp-text); animation: cp-inv-in .45s cubic-bezier(.2,.75,.2,1) both; } .cp-cpay.is-late { border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); } .cp-cpay.is-paid { border-color: color-mix(in srgb, var(--cp-success) 40%, transparent); background: color-mix(in srgb, var(--cp-success) 8%, var(--cp-surface)); } .cp-cpay.is-paid b { font-size: 14px; color: var(--cp-strong); } .cp-cpay > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpay h3 { margin: 0 0 3px !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cp-strong) !important; } .cp-cpay header p { margin: 0; font-size: 13px; color: var(--cp-muted); } .cp-cpay.is-late header p { color: var(--cp-danger); font-weight: 600; } .cp-cpay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .cp-cpay-grid > div { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 44px 11px 13px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); } .cp-cpay-grid span { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-dim); } .cp-cpay-grid b { font-size: 14px; font-weight: 600; color: var(--cp-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-cpay button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--cp-line-2) !important; border-radius: 3px; background: transparent !important; color: var(--cp-text) !important; font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-cpay > header button { height: 38px; padding: 0 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpay-grid button { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 0 !important; color: var(--cp-dim) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cpay button:hover { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cpay button.is-done { color: var(--cp-success) !important; } .cp-cpay button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .cp-cpay-qr { margin: 12px 0 0; font-size: 12.5px; color: var(--cp-muted); } @media (max-width: 640px) { .cp-cpay { padding: 14px; margin: 0 0 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpay > header button { width: 100%; height: 42px; } } /* v5.50.2 · Mein Tag: Karte „Rechnungen: fällig & überfällig“ */ .cp-day-iv .cp-day-dot { --c: var(--cp-warning); } .cp-day-iv.is-late .cp-day-dot { --c: var(--cp-danger); } .cp-day-sum { margin: 10px 2px 0; font-size: 12.5px; color: var(--cp-muted); } .cp-day-sum b { color: var(--cp-strong); font-variant-numeric: tabular-nums; } /* =========================================================================== v5.50.4 · Kundenliste: „Kunden im Blick“ neu (client-health.js) =========================================================================== */ .cp-hl.v2 { padding: 18px 20px 16px; } .cp-hl.v2 > .cp-hl-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 18px; flex-wrap: nowrap; margin-bottom: 0; } /* v5.50.6: schlägt die alte Regel „.cp-hl > header { display:flex }“ */ .cp-hl-ti { min-width: 0; } .cp-hl-ti p { margin: 6px 0 0; font-size: 13px; color: var(--cp-muted); } .cp-hl-ti p b { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-hl-ti p b.is-warn { color: var(--cp-warning); } /* v5.76.7: Token statt festem Hellbernstein (2,2 : 1 im hellen Modus) */ html[data-theme]:not(#cp) body .cp-hl-ti p b.is-ok { color: var(--cp-success); } .cp-hl-dist { min-width: 0; display: flex; flex-direction: column; gap: 10px; } .cp-hl-bar { display: flex; gap: 3px; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--cp-text) 6%, transparent); } .cp-hl-bar i { flex: 0 0 var(--w); min-width: 4px; background: var(--hc); transform-origin: left; animation: cp-hl-grow .9s cubic-bezier(.2,.75,.2,1) both; } .cp-hl-bar i.t-bad { --hc: #E5484D; } .cp-hl-bar i.t-mid { --hc: #E0A43A; } .cp-hl-bar i.t-ok { --hc: var(--cp-rust-hi); } .cp-hl-bar i.t-good { --hc: var(--cp-success); } @keyframes cp-hl-grow { from { transform: scaleX(0); } } .cp-hl-chips { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-chips button { --hc: var(--cp-rust-hi); display: inline-flex; align-items: center; gap: 7px; height: 30px; margin: 0; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-muted) !important; font: 600 12px/1 var(--cp-font, inherit); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-chips button:hover:not(:disabled) { color: var(--cp-strong) !important; border-color: color-mix(in srgb, var(--hc) 45%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-chips button.is-on { color: var(--cp-strong) !important; border-color: color-mix(in srgb, var(--hc) 60%, transparent) !important; background: color-mix(in srgb, var(--hc) 14%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-chips button:disabled { opacity: .45; cursor: default; } .cp-hl-chips button i { width: 7px; height: 7px; border-radius: 50%; background: var(--hc); } .cp-hl-chips button.t-need { --hc: #E0A43A; } .cp-hl-chips button.t-need i { background: linear-gradient(135deg, #E5484D, #E0A43A); } .cp-hl-chips button.t-all { --hc: var(--cp-muted); } .cp-hl-chips button em { font-style: normal; font-weight: 700; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-hl-tools { display: flex; gap: 6px; align-self: start; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-tools button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 3px; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-muted) !important; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-tools button:hover, html[data-theme]:not(#cp):not(#cq) body .cp-hl-tools button[aria-expanded="true"][data-hl="info"] { color: var(--cp-rust-hi) !important; border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } .cp-hl-tools svg { width: 16px; height: 16px; transition: transform .25s ease; } .cp-hl.is-collapsed .cp-hl-tools [data-hl="toggle"] svg { transform: rotate(-90deg); } .cp-hl-explain { margin: 14px 0 0; padding: 12px 14px; border-radius: 3px; background: var(--cp-deep); border: 1px solid var(--cp-line); font-size: 12.5px; line-height: 1.55; color: var(--cp-muted); animation: cp-inv-in .3s ease both; } .cp-hl-explain[hidden] { display: none; } .cp-hl-explain b { color: var(--cp-strong); } .cp-hl-explain span { color: var(--cp-text); } .cp-hl-body { margin-top: 16px; } .cp-hl.is-collapsed .cp-hl-body, .cp-hl.is-collapsed .cp-hl-explain { display: none; } .cp-hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; } .cp-hl-c { --hc: var(--cp-rust-hi); position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 15px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--hc) 9%, transparent), transparent 60%), color-mix(in srgb, var(--cp-text) 2%, transparent); animation: cp-inv-in .45s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 60ms) both; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .cp-hl-c::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--hc); } .cp-hl-c:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--hc) 40%, transparent); box-shadow: 0 16px 34px -24px color-mix(in srgb, var(--hc) 70%, transparent); } .cp-hl-c.t-bad { --hc: #E5484D; } .cp-hl-c.t-mid { --hc: #E0A43A; } .cp-hl-c.t-ok { --hc: var(--cp-rust-hi); } .cp-hl-c.t-good { --hc: var(--cp-success); } .cp-hl-ct { display: flex; align-items: center; gap: 12px; min-width: 0; } .cp-hl-c .cp-hl-r b { font-size: 13.5px; } .cp-hl-cn { min-width: 0; display: flex; flex-direction: column; gap: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-cn > a { font-size: 14.5px; font-weight: 600; color: var(--cp-strong) !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-cn > a:hover { color: var(--cp-rust-hi) !important; } .cp-hl-cn > span { display: flex; align-items: center; gap: 8px; min-width: 0; } .cp-hl-cn small { font-size: 11.5px; color: var(--cp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-hl-tag { --hc: var(--cp-rust-hi); flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--hc) 16%, transparent); color: var(--hc); } .cp-hl-tag.t-bad { --hc: #E5484D; } .cp-hl-tag.t-mid { --hc: #E0A43A; } .cp-hl-tag.t-good { --hc: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body ul.cp-hl-f { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; } .cp-hl-f li { --fc: var(--cp-rust-hi); display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: help; } .cp-hl-f li span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-hl-f li i { position: relative; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .cp-hl-f li b { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--fc); transform-origin: left; animation: cp-hl-grow .8s cubic-bezier(.2,.75,.2,1) .2s both; } .cp-hl-f li.t-good { --fc: var(--cp-success); } .cp-hl-f li.t-mid { --fc: #E0A43A; } .cp-hl-f li.t-bad { --fc: #E5484D; } .cp-hl-next { --nc: #E0A43A; display: flex; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 3px; background: color-mix(in srgb, var(--nc) 9%, transparent); border: 1px solid color-mix(in srgb, var(--nc) 22%, transparent); } .cp-hl-next.t-bad { --nc: #E5484D; } .cp-hl-next.t-good { --nc: var(--cp-success); } .cp-hl-next > svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--nc); } .cp-hl-next span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--cp-text); } .cp-hl-next small { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-dim); } .cp-hl-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--cp-muted); } .cp-hl-meta span { display: inline-flex; align-items: center; gap: 5px; } .cp-hl-meta svg { width: 13px; height: 13px; color: var(--cp-dim); } .cp-hl-meta .is-bad, .cp-hl-meta .is-bad svg { color: #E5484D; font-weight: 600; } .cp-hl-acts { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-hl-acts :is(button, a) { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 11px; border-radius: 3px; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-text) !important; font: 600 12px/1 var(--cp-font, inherit); text-decoration: none !important; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-acts :is(button, a):hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-acts a { margin-left: auto; border-color: transparent !important; color: var(--cp-rust-hi) !important; } .cp-hl-acts svg { width: 14px; height: 14px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-more { display: block; width: 100%; margin: 12px 0 0; height: 38px; border-radius: 3px; border: 1px dashed var(--cp-line-2) !important; background: transparent !important; color: var(--cp-rust-hi) !important; font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-hl-empty { margin: 0; padding: 14px; text-align: center; font-size: 13px; color: var(--cp-dim); } @media (max-width: 1199px) { .cp-hl.v2 > .cp-hl-h { grid-template-columns: minmax(0, 1fr) auto; } .cp-hl-dist { grid-column: 1 / -1; grid-row: 2; } } @media (max-width: 640px) { .cp-hl.v2 { padding: 14px; } .cp-hl-grid { grid-template-columns: 1fr; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-chips button { height: 34px; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-acts :is(button, a) { height: 38px; flex: 1; justify-content: center; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-acts a { margin-left: 0; } html[data-theme]:not(#cp):not(#cq) body ul.cp-hl-f { gap: 4px; } .cp-hl-f li span { font-size: 8.5px; letter-spacing: .02em; } } @media (prefers-reduced-motion: reduce) { .cp-hl-bar i, .cp-hl-f li b, .cp-hl-c, .cp-hl-explain { animation: none !important; } } /* =========================================================================== v5.50.4 · Posten-Dialog (Rechnung, Kostenvoranschlag, Angebot, Vertrag, Bestellung, Abo) – invoice-tools.js enhanceItem =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body form.cp-itm .modal-body .form-group > .row { display: flex; flex-direction: column; gap: 6px; margin: 0; } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .modal-body .form-group > .row > [class*="col-"] { width: 100%; max-width: none; flex: none; padding: 0; } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .modal-body .form-group > .row > label, .cp-itm-l { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted) !important; margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .modal-body .form-group { margin-bottom: 16px; padding: 0 !important; border: 0 !important; } .cp-itm-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) 172px; gap: 14px; margin: 0 0 12px; } .cp-itm-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cp-itm-in { position: relative; display: flex; align-items: stretch; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-in input.form-control { height: 46px; min-width: 0; border-radius: 3px !important; font-size: 15px !important; font-weight: 600; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-cell.is-qty .cp-itm-in input.form-control { text-align: center; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-step { flex: none; width: 42px; height: 46px; margin: 0; padding: 0; border: 1px solid var(--cp-line-2) !important; background: var(--cp-surface-2) !important; color: var(--cp-strong) !important; font: 600 18px/1 var(--cp-font, inherit); cursor: pointer; transition: background .15s ease, color .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-step:first-child { border-radius: 3px 0 0 3px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-step:last-child { border-radius: 0 3px 3px 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-step:hover { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-cell.is-rate .cp-itm-in input.form-control { padding-right: 36px !important; text-align: right; } .cp-itm-cur { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: var(--cp-muted); pointer-events: none; } .cp-itm-chips { display: flex; flex-wrap: wrap; gap: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-chips button { height: 26px; margin: 0; padding: 0 8px; border-radius: 999px; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-muted) !important; font: 600 11px/1 var(--cp-font, inherit); cursor: pointer; transition: all .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-chips button:hover { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-chips button.is-on { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } .cp-itm-sum { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: radial-gradient(120% 160% at 100% 0%, var(--cp-rust-soft), transparent 60%), var(--cp-deep); } .cp-itm-sum span { font-size: 13px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-itm-sum b { grid-row: span 2; align-self: center; font-size: 22px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-itm-sum small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .modal-body .cp-itm-tax > .row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 18px !important; padding: 14px 16px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .modal-body .cp-itm-tax > .row > [class*="col-"] { display: contents !important; } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .modal-body .cp-itm-tax > .row > label { grid-column: 1; grid-row: 1; width: auto !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0; text-transform: none; color: var(--cp-strong) !important; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .modal-body .cp-itm-tax .cp-itm-hint { grid-column: 1; grid-row: 2; } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .modal-body .cp-itm-tax #taxable { grid-column: 2; grid-row: 1 / span 2; align-self: center; } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .cp-itm-tax #taxable { appearance: none; -webkit-appearance: none; width: 44px; height: 24px; margin: 0; border-radius: 999px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 12%, transparent); position: relative; cursor: pointer; transition: background .2s ease, border-color .2s ease; } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .cp-itm-tax #taxable::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .2s cubic-bezier(.2,.75,.2,1); } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .cp-itm-tax #taxable:checked { background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); border-color: transparent; } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .cp-itm-tax #taxable:checked::after { transform: translateX(20px); } .cp-itm-hint { display: block; font-size: 12px; line-height: 1.45; color: var(--cp-dim); text-align: left; align-self: stretch; } .cp-tax-sugg .select2-container .select2-choice, .cp-tax-sugg .select2-container .select2-selection { border-color: var(--cp-rust-hi) !important; box-shadow: 0 0 0 3px var(--cp-rust-soft) !important; } @media (max-width: 640px) { .cp-itm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cp-itm-cell.is-unit { grid-column: 1 / -1; grid-row: 2; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-chips button { height: 32px; } .cp-itm-sum b { font-size: 19px; } } .cp-itm-hint.is-warn { color: #F2B84B !important; } /* v5.146.0 · Rabatt in € geht nicht centgenau auf: Hinweis unter der Summe mit Wechsel auf Pauschale */ .cp-itm-sum .cp-itm-off { grid-column: 1 / -1; margin-top: 8px; padding: 8px 10px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-warning) 45%, transparent); background: color-mix(in srgb, var(--cp-warning) 10%, transparent); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.45; color: var(--cp-text); } .cp-itm-sum .cp-itm-off button { display: inline; margin: 0 0 0 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--cp-rust-hi); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .cp-itm-sum .cp-itm-off button:hover { color: var(--cp-strong); } /* v5.50.4 · Kunden im Blick: eingeklappt beim Öffnen – kompakte Kopfzeile mit Kurzlinks */ .cp-hl.v2.is-collapsed { padding-top: 14px; padding-bottom: 14px; } .cp-hl.is-collapsed .cp-hl-h { cursor: pointer; } .cp-hl.is-collapsed .cp-hl-chips { display: none; } .cp-hl.is-collapsed .cp-hl-tools { align-self: center; } .cp-hl-peek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-peek a { --hc: #E0A43A; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 28px; padding: 0 5px 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hc) 32%, transparent); background: color-mix(in srgb, var(--hc) 9%, transparent); color: var(--cp-text) !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important; white-space: nowrap; transition: border-color .15s ease, background .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-peek a:hover { border-color: color-mix(in srgb, var(--hc) 60%, transparent); background: color-mix(in srgb, var(--hc) 16%, transparent); color: var(--cp-strong) !important; } .cp-hl-peek a.t-bad { --hc: #E5484D; } .cp-hl-peek a i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hc); } .cp-hl-peek a b { flex: none; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--hc) 20%, transparent); color: var(--cp-strong); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } .cp-hl-peek span { font-size: 12px; font-weight: 600; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-hl-tools button[data-hl="toggle"] { width: auto; min-width: 34px; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-tools button[data-hl="toggle"] span { padding-left: 12px; font-size: 12.5px; font-weight: 600; color: var(--cp-text); white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-tools button[data-hl="toggle"]:has(span) { padding-right: 9px; } @media (min-width: 641px) and (max-width: 1199px) { .cp-hl.v2.is-collapsed > .cp-hl-h { grid-template-columns: minmax(0, 1fr) auto; } .cp-hl-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } } @media (max-width: 640px) { .cp-hl.v2 > .cp-hl-h { gap: 12px; } .cp-hl-ti p { font-size: 12.5px; line-height: 1.5; } .cp-hl-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cp-hl-chips::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-chips button { flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-tools button { width: 38px; height: 38px; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-tools button[data-hl="toggle"] span { display: none; } .cp-hl-peek { flex-wrap: nowrap; overflow-x: auto; margin-right: -14px; padding-right: 14px; scrollbar-width: none; } .cp-hl-peek::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-hl-peek a { flex: none; height: 32px; } } /* v5.50.4 · Posten-Dialog: Rabatt je Posten, Steuersatz der Rechnung */ .cp-itm-disc { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; } .cp-itm-disc .cp-itm-l em { font-style: normal; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--cp-dim); margin-left: 4px; } .cp-itm-disc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cp-itm-disc-row > .cp-itm-in { width: 132px; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-disc .cp-itm-in input.form-control { height: 40px; padding-right: 32px !important; text-align: right; font-size: 14px !important; } .cp-itm-disc.is-bad .cp-itm-in input.form-control { border-color: #E5484D !important; } .cp-itm-seg { display: inline-flex; padding: 3px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); } html[data-theme]:not(#cp):not(#cq) body .cp-itm-seg button { min-width: 34px; height: 30px; margin: 0; padding: 0 10px; border: 0 !important; border-radius: 3px; background: transparent !important; color: var(--cp-muted) !important; font: 700 13px/1 var(--cp-font, inherit); cursor: pointer; transition: background .15s ease, color .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-seg button.is-on { background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-itm-disc.is-eur .cp-itm-dq { display: none; } .cp-itm-sum em { font-style: normal; font-weight: 600; color: var(--cp-rust-hi); } .cp-itm-sum em.is-bad { color: #E5484D; } .cp-itm-sum b s { display: block; margin-bottom: 1px; font-size: 12.5px; font-weight: 500; color: var(--cp-dim); text-align: right; text-decoration-thickness: 1px; } .cp-itm-doctax { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; line-height: 1.45; font-weight: 600; text-align: left; align-self: stretch; } .cp-itm-doctax::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: currentColor; } .cp-itm-doctax.is-ok { color: var(--cp-success); } .cp-itm-doctax.is-warn { color: #F2B84B; } html[data-theme]:not(#cp):not(#cq) body form.cp-itm .modal-body .cp-itm-tax .cp-itm-doctax { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; } /* Rechnung bearbeiten: TDS (indische Quellensteuer) und leere Zweitsteuer ausblenden, belegtes TDS rot markieren */ html[data-theme] body .form-group.cp-tax-off { display: none !important; } .form-group.cp-tax-bad .select2-container .select2-choice, .form-group.cp-tax-bad .select2-container .select2-selection { border-color: #E5484D !important; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18) !important; } .form-group.cp-tax-bad > label, .form-group.cp-tax-bad .row > label { color: #E5484D !important; } .form-group .cp-itm-hint.is-warn { display: block; margin-top: 6px; } @media (max-width: 640px) { .cp-itm-disc-row > .cp-itm-in { width: 112px; } html[data-theme]:not(#cp):not(#cq) body .cp-itm-seg button { height: 34px; } } /* v5.50.4 · Listen: Spaltenbreiten ziehen wie in Excel (table-columns.js) */ html[data-theme] body table.dataTable th.cp-colw-th { position: relative; } .cp-colw-grip { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: 10px; cursor: col-resize; touch-action: none; user-select: none; } .cp-colw-grip::after { content: ""; position: absolute; top: 22%; bottom: 22%; right: 3px; width: 2px; border-radius: 2px; background: var(--cp-line-2); opacity: 0; transition: opacity .15s ease, background .15s ease; } th.cp-colw-th:hover .cp-colw-grip::after { opacity: 1; } .cp-colw-grip:hover::after, .cp-colw-grip.is-on::after { opacity: 1; top: 8%; bottom: 8%; background: var(--cp-rust-hi); } html.cp-colw-drag, html.cp-colw-drag * { cursor: col-resize !important; user-select: none !important; } @media (hover: none) { .cp-colw-grip { width: 16px; } .cp-colw-grip::after { opacity: .7; } } /* v5.180.0 · Kartenansicht der Listen (table-columns.js cards): Tabelle bleibt im DOM, Darstellung als Kartenraster. Standard auf Touch-Tablets im Hochformat, Umschalter je Liste; Sortieren über .cp-cards-sort (Kopfzeile ausgeblendet). */ html[data-theme] body .table-responsive.cp-cards-sc { overflow: visible !important; } html[data-theme] body table.dataTable.cp-cards { display: flex; flex-direction: column; width: 100% !important; min-width: 0 !important; table-layout: auto !important; border: 0 !important; background: none !important; } html[data-theme] body table.dataTable.cp-cards > colgroup, html[data-theme] body table.dataTable.cp-cards > thead { display: none !important; } html[data-theme] body table.dataTable.cp-cards > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; padding: 4px 0 2px; } html[data-theme] body table.dataTable.cp-cards > tbody > tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 10px 16px; margin: 0; padding: 14px 16px; border: 1px solid var(--cp-line) !important; border-radius: 3px; background: var(--cp-surface) !important; box-shadow: none !important; transition: border-color .15s ease, background-color .15s ease; } html[data-theme] body table.dataTable.cp-cards > tbody > tr:hover { border-color: var(--cp-rust-line) !important; } html[data-theme] body table.dataTable.cp-cards.cp-cards-lead > tbody > tr { padding-left: 46px; } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td { display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; min-width: 0; width: auto !important; max-width: none !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 13.5px; line-height: 1.4; color: var(--cp-text); } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td[data-cp-label]:not([data-cp-label=""])::before { content: attr(data-cp-label); display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); line-height: 1.2; } /* Inhalte dürfen in der Karte umbrechen (Listen kürzen Namen sonst mit „…“) */ html[data-theme]:not(#cp) body table.dataTable.cp-cards > tbody > tr > td > a { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; } html[data-theme] body table.dataTable.cp-cards > tbody { order: 1; } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-title { order: -2; grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; font-weight: 600; color: var(--cp-strong); } html[data-theme] body table.dataTable.cp-cards.cp-cards-nostatus > tbody > tr > td.cp-cr-title { grid-column: 1 / -1; } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-title::before, html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-status::before, html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-acts::before, html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-lead::before { display: none !important; } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-status { order: -1; grid-column: 2; align-items: flex-end; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-lead { position: absolute; top: 15px; left: 14px; width: 24px !important; } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cp-strong); } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-acts { order: 99; grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; align-items: center; gap: 6px; padding-top: 10px !important; border-top: 1px solid var(--cp-line) !important; } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-acts:is(:empty, .cp-cr-noacts) { display: none; } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td.cp-cr-empty { opacity: .55; } html[data-theme] body table.dataTable.cp-cards > tbody > tr > td :is(a, .badge) { max-width: 100%; } html[data-theme] body table.dataTable.cp-cards > tbody > tr:has(> td[colspan]) { grid-column: 1 / -1; display: block; padding: 28px 16px; text-align: center; } html[data-theme] body table.dataTable.cp-cards > tbody > tr:has(> td[colspan]) > td { align-items: center; text-align: center !important; } html[data-theme] body table.dataTable.cp-cards > tbody > tr.cp-cf-hide { display: none !important; } html[data-theme] body table.dataTable.cp-cards > tfoot { display: block; order: 2; margin-top: 12px; } html[data-theme] body table.dataTable.cp-cards > tfoot > tr > :is(td, th).cp-cr-cap { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme] body table.dataTable.cp-cards > tfoot > tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; padding: 12px 16px; border: 1px solid var(--cp-line-2) !important; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent) !important; } html[data-theme] body table.dataTable.cp-cards > tfoot > tr > :is(td, th) { display: flex; flex-direction: column; gap: 3px; padding: 0 !important; border: 0 !important; text-align: left !important; width: auto !important; font-variant-numeric: tabular-nums; } html[data-theme] body table.dataTable.cp-cards > tfoot > tr > :is(td, th).cp-cr-empty { display: none; } html[data-theme] body table.dataTable.cp-cards > tfoot > tr > :is(td, th)[data-cp-label]:not([data-cp-label=""])::before { content: attr(data-cp-label); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-cards-sort { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 12px; color: var(--cp-muted); } .cp-cards-sort > span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-cards-sort select { height: 38px; min-width: 220px; padding: 0 30px 0 11px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background-color: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 500 13.5px/1 var(--cp-font, inherit) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cards-btn svg { width: 15px; height: 15px; } html[data-theme]:not(#cp):not(#cq) body .cp-cards-btn[aria-pressed="true"] { color: var(--cp-rust-hi) !important; border-color: var(--cp-rust-line) !important; } /* v5.181.0: Posten der Belege als Karten (unter 760 px): eine Spalte in Belegreihenfolge, Leistung oben, Zahlen in einer Zeile */ html[data-theme] body table.dataTable.cp-cards.cp-cards-items > tbody { grid-template-columns: minmax(0, 1fr); gap: 8px; } html[data-theme] body table.dataTable.cp-cards.cp-cards-items > tbody > tr { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); padding: 12px 14px; background: color-mix(in srgb, var(--cp-text) 2%, transparent) !important; } html[data-theme] body table.dataTable.cp-cards.cp-cards-items > tbody > tr > td.cp-cr-title { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; font-size: 14px; } html[data-theme] body table.dataTable.cp-cards.cp-cards-items > tbody > tr > td.cp-cr-acts { padding-top: 8px !important; } html[data-theme] body table.dataTable.cp-cards.cp-cards-items > tbody > tr > td.cp-cr-lead { position: static; width: auto !important; grid-column: 1 / -1; order: -3; } html[data-theme] body table.dataTable.cp-cards.cp-cards-items.cp-cards-lead > tbody > tr { padding-left: 14px; } @media (prefers-reduced-motion: reduce) { html[data-theme] body table.dataTable.cp-cards > tbody > tr { transition: none; } } html[data-theme] body table.dataTable.cp-colw th { overflow: hidden; text-overflow: ellipsis; } html[data-theme] body table.dataTable.cp-colw td:not(:has(.dropdown, .dropdown-menu, select, .select2-container)) { overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; } html[data-theme] body table.dataTable.cp-colw-measure th, html[data-theme] body table.dataTable.cp-colw-measure td { white-space: nowrap !important; overflow: hidden !important; } html[data-theme] body table.dataTable.cp-colw-measure td > a.js-selection-id { display: inline; } .cp-colw-reset svg { width: 15px; height: 15px; } @media print { .cp-colw-grip, .cp-colw-reset { display: none !important; } } /* v5.50.4 · Kundenliste und Kontakte: Firmenname und Angaben einzeilig, Liste scrollt seitlich */ html[data-theme]:not(#cp) body :is(#client-table, #contact-table) td > a.js-selection-id, html[data-theme]:not(#cp) body :is(#client-table, #contact-table) tbody td:not(:has(ul)) { white-space: nowrap !important; } html[data-theme]:not(#cp) body :is(#client-table, #contact-table) td:has(> a.js-selection-id) { min-width: 0 !important; } html[data-theme]:not(#cp) body :is(#client-table, #contact-table).cp-colw td > a.js-selection-id { display: block; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp) body .table-responsive:has(> .dt-container > :is(#client-table, #contact-table)), html[data-theme]:not(#cp) body .table-responsive:has(> :is(#client-table, #contact-table)) { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* v5.50.4 · Dokumentvorschau: fett gedruckte Werte (Postentitel, Betrag, Fälligkeit, IBAN) und Überschriften auf Papier dunkel – die allgemeine Regel „body b, strong, h1–h6 { color: var(--cp-strong) }“ machte sie im dunklen Design weiß auf weiß */ html[data-theme]:not(#cp) body :is(.invoice-preview-container, .invoice-preview, .estimate-preview, .proposal-preview, .contract-preview, #order-preview) :is(b, strong, .strong, h1, h2, h3, h4, h5, h6) { color: inherit; } /* v5.50.4 · Interne Postenliste: Rabatt am Einzelpreis */ .cp-li-disc { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--cp-rust-hi); white-space: nowrap; } .cp-li-disc s { margin-right: 6px; font-weight: 500; color: var(--cp-dim); } /* v5.50.6 · Kunden im Blick eingeklappt: Verteilungsbalken mit Legende statt Filter-Chips */ .cp-hl-legend { display: none; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--cp-muted); } .cp-hl.is-collapsed .cp-hl-legend { display: flex; } .cp-hl-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .cp-hl-legend span b { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .cp-hl-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--hc); } .cp-hl-legend .t-bad { --hc: #E5484D; } .cp-hl-legend .t-mid { --hc: #E0A43A; } .cp-hl-legend .t-ok { --hc: var(--cp-rust-hi); } .cp-hl-legend .t-good { --hc: var(--cp-success); } .cp-hl.is-collapsed .cp-hl-dist { gap: 8px; } /* v5.50.6 · Rechnung bearbeiten: Leistungsdatum / -zeitraum */ .cp-svc-row { display: flex; align-items: center; gap: 10px; } .cp-svc-row > span { flex: none; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-svc-row input[type="date"].form-control { flex: 1; min-width: 0; height: 42px; color-scheme: dark; font-variant-numeric: tabular-nums; } html[data-theme="light"]:not(#cp):not(#cq) body .cp-svc-row input[type="date"].form-control { color-scheme: light; } .cp-svc-q { margin-top: 8px; } .cp-svc .cp-itm-hint { margin-top: 6px; } @media (max-width: 480px) { .cp-svc-row { flex-wrap: wrap; } .cp-svc-row input[type="date"].form-control { flex-basis: 100%; } } /* v5.50.6 · Kunden im Blick: Auf-/Zuklappen animiert */ .cp-hl.is-opening .cp-hl-chips { animation: cp-hl-rise .42s cubic-bezier(.22,.8,.26,1) .06s both; } .cp-hl.is-opening .cp-hl-body { animation: cp-hl-rise .5s cubic-bezier(.22,.8,.26,1) .08s both; } .cp-hl.is-opening .cp-hl-c { animation-delay: calc(.12s + var(--i) * 70ms); } .cp-hl.is-collapsed .cp-hl-legend, .cp-hl.is-collapsed .cp-hl-peek { animation: cp-hl-rise .4s cubic-bezier(.22,.8,.26,1) both; } .cp-hl.is-collapsed .cp-hl-peek a { animation: cp-hl-rise .4s cubic-bezier(.22,.8,.26,1) both; } .cp-hl.is-collapsed .cp-hl-peek a:nth-child(2) { animation-delay: .05s; } .cp-hl.is-collapsed .cp-hl-peek a:nth-child(3) { animation-delay: .1s; } .cp-hl.is-closing .cp-hl-body, .cp-hl.is-closing .cp-hl-chips, .cp-hl.is-closing .cp-hl-explain { opacity: 0; transform: translateY(-6px); transition: opacity .17s ease, transform .17s ease; } @keyframes cp-hl-rise { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .cp-hl.is-opening .cp-hl-chips, .cp-hl.is-opening .cp-hl-body, .cp-hl.is-collapsed .cp-hl-legend, .cp-hl.is-collapsed .cp-hl-peek, .cp-hl.is-collapsed .cp-hl-peek a { animation: none !important; } } html.cp-motion-off .cp-hl :is(.cp-hl-chips, .cp-hl-body, .cp-hl-legend, .cp-hl-peek, .cp-hl-peek a, .cp-hl-c) { animation: none !important; } /* v5.50.6 · Spalten-Panel je Benutzer (table-columns.js) */ html[data-theme] body .column-show-hide-popover.cp-colp-rise { display: none !important; } .cp-colp-btn svg { width: 16px; height: 16px; } .cp-colp { position: fixed; z-index: 1080; width: min(340px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 24px)); display: flex; flex-direction: column; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface, #111318); box-shadow: 0 30px 70px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.02); color: var(--cp-text); animation: cp-colp-in .22s cubic-bezier(.22,.8,.26,1) both; transform-origin: top left; } .cp-colp.is-out { animation: cp-colp-out .16s ease both; } @keyframes cp-colp-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } } @keyframes cp-colp-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } } .cp-colp > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--cp-line); } .cp-colp > header b { display: block; font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-colp > header span { font-size: 12px; color: var(--cp-muted); } html[data-theme] body .cp-colp .cp-colp-x { width: 28px; height: 28px; margin: -2px -4px 0 0; padding: 0; border: 0 !important; border-radius: 3px; background: transparent !important; color: var(--cp-muted) !important; font-size: 20px; line-height: 1; cursor: pointer; } html[data-theme] body .cp-colp .cp-colp-x:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } .cp-colp ul { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; } .cp-colp li { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px 4px 4px; border-radius: 3px; transition: background .15s ease, box-shadow .15s ease; user-select: none; } .cp-colp li:hover { background: var(--cp-hover, rgba(255,255,255,.04)); } .cp-colp li.is-drag { z-index: 2; background: var(--cp-surface-2); box-shadow: 0 12px 28px -12px rgba(0,0,0,.7), inset 0 0 0 1px var(--cp-rust-line); transition: none; } .cp-colp li.is-moved { box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-colp li.is-off label span { color: var(--cp-dim); } .cp-colp-grip { flex: none; display: grid; grid-template-columns: repeat(2, 3px); gap: 3px; padding: 8px 6px; cursor: grab; touch-action: none; } .cp-colp-grip i { width: 3px; height: 3px; border-radius: 50%; background: var(--cp-dim); box-shadow: 6px 0 0 var(--cp-dim); } .cp-colp-grip i { grid-column: 1; } .cp-colp li.is-drag .cp-colp-grip { cursor: grabbing; } .cp-colp li.is-ess .cp-colp-grip i { background: var(--cp-muted); box-shadow: 6px 0 0 var(--cp-muted); } .cp-colp label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0 !important; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--cp-text); } .cp-colp label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-colp label input[type="checkbox"] { flex: none; appearance: none; -webkit-appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 12%, transparent); position: relative; cursor: pointer; transition: background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-colp label input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.2,.75,.2,1); } html[data-theme]:not(#cp):not(#cq) body .cp-colp label input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); border-color: transparent; } html[data-theme]:not(#cp):not(#cq) body .cp-colp label input[type="checkbox"]:checked::after { transform: translateX(14px); } html[data-theme]:not(#cp):not(#cq) body .cp-colp label input[type="checkbox"]:disabled { opacity: .55; cursor: not-allowed; } .cp-colp li em { flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-dim); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--cp-line-2); } .cp-colp-mv { flex: none; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .15s ease; } .cp-colp li:hover .cp-colp-mv, .cp-colp li:focus-within .cp-colp-mv { opacity: 1; } html[data-theme] body .cp-colp-mv button { width: 26px; height: 26px; margin: 0; padding: 0; border: 1px solid var(--cp-line-2) !important; border-radius: 3px; background: transparent !important; color: var(--cp-muted) !important; font-size: 13px; line-height: 1; cursor: pointer; } html[data-theme] body .cp-colp-mv button:hover { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } .cp-colp > footer { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--cp-line); } html[data-theme] body .cp-colp > footer button { height: 34px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-text) !important; font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme] body .cp-colp > footer button.is-primary { border-color: transparent !important; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)) !important; color: #fff !important; } @media (hover: none) { .cp-colp-mv { opacity: 1; } .cp-colp li { min-height: 46px; } } @media (prefers-reduced-motion: reduce) { .cp-colp, .cp-colp.is-out { animation: none !important; } } html[data-theme]:not(#cp):not(#cq) body .cp-colp label input[type="checkbox"]:checked:disabled { background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)) !important; border-color: transparent !important; opacity: .45; } /* v5.50.6 · Rechtliches: Rabatt-Hinweis, versendete Rechnung, gesperrte Direktkorrektur */ .cp-disc-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } .cp-disc-note.is-warn { border-color: color-mix(in srgb, #F2B84B 40%, transparent); color: var(--cp-text); } .cp-itm-lock { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 3px; border: 1px solid color-mix(in srgb, #E5484D 40%, transparent); background: color-mix(in srgb, #E5484D 9%, transparent); font-size: 12.5px; line-height: 1.5; color: var(--cp-text); } .cp-itm-lock svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #E5484D; } .cp-itm-lock b { color: var(--cp-strong); } .cp-inv-opt.is-off { opacity: .72; border-style: dashed !important; } html[data-theme]:not(#cp) body .cp-inv-opt.is-off header b { color: var(--cp-muted); } /* v5.50.8 · Freigabe für gesperrte Rechnungen */ .cp-inv-opt.is-warn { border-color: color-mix(in srgb, var(--cp-warning) 45%, transparent); background: radial-gradient(100% 140% at 0% 0%, color-mix(in srgb, var(--cp-warning) 10%, transparent), transparent 60%); } html[data-theme]:not(#cp) body .cp-inv-opt.is-warn > header b { color: var(--cp-warning); } /* v5.50.7 · Beleg-Vorschau als echtes PDF (pdf-preview.js) */ .cp-pdfv { margin: 15px 0 0; } .cp-pdfv-bar { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-surface, #111318) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px -28px rgba(0,0,0,.8); } .cp-pdfv-seg { display: inline-flex; padding: 3px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); } html[data-theme] body .cp-pdfv-seg button { display: inline-flex; align-items: center; gap: 7px; height: 32px; margin: 0; padding: 0 12px; border: 0 !important; border-radius: 3px; background: transparent !important; color: var(--cp-muted) !important; font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme] body .cp-pdfv-seg button.is-on { background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-pdfv svg { width: 15px; height: 15px; flex: none; } .cp-pdfv-mid { display: inline-flex; align-items: center; gap: 12px; } .cp-pdfv-pg { min-width: 54px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-pdfv-zoom { display: inline-flex; align-items: center; border-radius: 3px; border: 1px solid var(--cp-line-2); overflow: hidden; } html[data-theme] body .cp-pdfv-zoom button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 32px; margin: 0; padding: 0 8px; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--cp-text) !important; font: 600 12px/1 var(--cp-font, inherit); font-variant-numeric: tabular-nums; cursor: pointer; } html[data-theme] body .cp-pdfv-zoom button:hover { background: var(--cp-hover) !important; } .cp-pdfv-zv { min-width: 58px !important; border-left: 1px solid var(--cp-line) !important; border-right: 1px solid var(--cp-line) !important; } .cp-pdfv-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; } html[data-theme] body .cp-pdfv-acts :is(button, a) { display: inline-flex; align-items: center; gap: 7px; height: 34px; margin: 0; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-text) !important; font: 600 12.5px/1 var(--cp-font, inherit); text-decoration: none !important; cursor: pointer; } html[data-theme] body .cp-pdfv-acts :is(button, a):hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; } html[data-theme] body .cp-pdfv-acts a.is-primary { border-color: transparent !important; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)) !important; color: #fff !important; } .cp-pdfv-pages { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 14px; padding: 22px 16px; border-radius: 3px; background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.035), transparent 70%), #0B0C10; border: 1px solid var(--cp-line); overflow-x: auto; min-height: 320px; } .cp-pdfv-page { position: relative; flex: none; max-width: none; margin: 0 auto; background: #fff; border-radius: 3px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.75,.2,1); } .cp-pdfv-page.is-in { opacity: 1; transform: none; } .cp-pdfv-page canvas { display: block; border-radius: 3px; } .cp-pdfv-sk { width: min(100%, 794px); aspect-ratio: 210 / 297; border-radius: 3px; background: #fff; padding: 8% 9%; display: flex; flex-direction: column; gap: 5%; opacity: .92; } .cp-pdfv-sk i { display: block; height: 7%; border-radius: 3px; background: linear-gradient(90deg, #eceae6 25%, #f6f5f2 50%, #eceae6 75%); background-size: 200% 100%; animation: cp-pdfv-sh 1.2s linear infinite; } .cp-pdfv-sk i:first-child { height: 12%; background: #06070A; } @keyframes cp-pdfv-sh { to { background-position: -200% 0; } } .cp-pdfv-err { padding: 22px; font-size: 13.5px; color: var(--cp-text); text-align: center; } html[data-theme] body .cp-pdfv-err button { margin: 0 4px; padding: 4px 10px; border-radius: 3px; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-strong) !important; cursor: pointer; } .cp-pdfv-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 0 0; font-size: 12px; color: var(--cp-dim); } .cp-pdfv.is-web .cp-pdfv-pages, .cp-pdfv.is-web .cp-pdfv-mid, .cp-pdfv.is-web .cp-pdfv-note { display: none; } html[data-theme] body .invoice-preview-container.cp-pdfv-host-off { display: none !important; } .cp-pdfv-print { position: fixed; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none; } @media (max-width: 640px) { .cp-pdfv-bar { top: 56px; padding: 8px; } .cp-pdfv-acts :is(button, a) span, .cp-pdfv-seg button span { display: none; } .cp-pdfv-acts a.is-primary span { display: inline; } .cp-pdfv-pages { padding: 12px 8px; gap: 12px; border-radius: 3px; } } @media (prefers-reduced-motion: reduce) { .cp-pdfv-page { transition: none; } .cp-pdfv-sk i { animation: none; } } @media print { .cp-pdfv { display: none !important; } html[data-theme] body .invoice-preview-container.cp-pdfv-host-off { display: block !important; } } /* v5.50.7 · Dublettenprüfung beim Anlegen (dup-check.js) */ .cp-dup { margin-top: 8px; padding: 10px 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, #F2B84B 42%, transparent); background: color-mix(in srgb, #F2B84B 8%, transparent); animation: cp-hl-rise .3s cubic-bezier(.22,.8,.26,1) both; } .cp-dup[hidden] { display: none; } .cp-dup > b { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--cp-strong); } .cp-dup > b svg { width: 15px; height: 15px; color: #F2B84B; } .cp-dup ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .cp-dup li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; } html[data-theme] body .cp-dup li a { font-weight: 600; color: var(--cp-rust-hi) !important; text-decoration: none !important; } html[data-theme] body .cp-dup li a:hover { text-decoration: underline !important; } .cp-dup li em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-dim); } .cp-dup li small { font-size: 12px; color: var(--cp-muted); } .cp-dup p { margin: 6px 0 0; font-size: 11.5px; color: var(--cp-dim); } /* v5.50.7 · Dokument-Panel in der Beleg-Ansicht (pdf-preview.js actions) */ .cp-docacts { display: flex; flex-direction: column; gap: 10px; } .cp-docacts-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cp-docacts-h span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .cp-docacts-h em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--cp-dim); white-space: nowrap; } .cp-docacts-h em svg { width: 12px; height: 12px; } .cp-docacts svg { width: 16px; height: 16px; flex: none; } html[data-theme] body a.cp-docacts-main { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-rust-line) !important; background: radial-gradient(120% 140% at 0% 0%, var(--cp-rust-soft), transparent 70%), var(--cp-deep) !important; color: var(--cp-strong) !important; text-decoration: none !important; transition: transform .15s ease, box-shadow .2s ease; } html[data-theme] body a.cp-docacts-main:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -20px rgba(232,85,42,.8); } .cp-docacts-main > svg:first-child { width: 20px; height: 20px; color: var(--cp-rust-hi); } .cp-docacts-main span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cp-docacts-main b { font-size: 14px; font-weight: 600; } .cp-docacts-main small { font-size: 11.5px; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-docacts-main > svg:last-child { color: var(--cp-muted); } .cp-docacts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } html[data-theme] body .cp-docacts-row :is(a, button) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 58px; margin: 0; padding: 8px 4px; border-radius: 3px; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-text) !important; font: 600 12px/1.2 var(--cp-font, inherit); text-decoration: none !important; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } html[data-theme] body .cp-docacts-row :is(a, button):hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; } .cp-docacts-row span { white-space: nowrap; } /* v5.51.1 · Orange Marken-Punkte als Hexagon (Kicker, Menü-Gruppen, Modal-Titel, Listenpunkte, Ungelesen) – spitze Ecke oben. Lade-, Diagramm- und Zeitleisten-Punkte bleiben rund (funktionale Marker). */ html[data-theme]:not(#cp) body .sidebar .sidebar-menu .ca-nav-group span::before, html[data-theme]:not(#cp) body .modal-title::before, html[data-theme]:not(#cp) body .cp-hero-meta .cp-dot, html[data-theme]:not(#cp) body .cp-dash-bar .cp-dot, html[data-theme]:not(#cp) body .cp-unread-dot, html[data-theme]:not(#cp) body .rst-ovf-own.has-update .rst-ovf-ico::after, html[data-theme]:not(#cp) body .rst-act-header h3::before, html[data-theme]:not(#cp) body .cp-ph-meta i, html[data-theme]:not(#cp) body .cp-sp-kicker i, html[data-theme]:not(#cp) body .cp-einv-kicker i, html[data-theme]:not(#cp) body .rst-ai-empty-kicker i, html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-dot, html[data-theme]:not(#cp) body .ra-kicker i, html[data-theme]:not(#cp) body .ra-hero-k > i, html[data-theme]:not(#cp) body .qa-kicker i, html[data-theme]:not(#cp) body .qa-plan li::before, html[data-theme]:not(#cp) body .rh-kicker i, html[data-theme]:not(#cp) body .cp-sb-dot, html[data-theme]:not(#cp) body .cp-kb-k i, html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-table .message-row.unread strong::after, html[data-theme]:not(#cp) body .cp-day-kicker i, html[data-theme]:not(#cp) body .cp-day-brief li::before, html[data-theme]:not(#cp) body .cp-lm-prev h6 i { border-radius: 0 !important; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #FFA07A 0%, #E8552A 52%, #B23A18 100%) !important; box-shadow: none !important; } html[data-theme]:not(#cp) body .sidebar .sidebar-menu .ca-nav-group span::before, html[data-theme]:not(#cp) body .cp-dash-bar .cp-dot, html[data-theme]:not(#cp) body .rst-ai-empty-kicker i, html[data-theme]:not(#cp) body .cp-lm-prev h6 i { width: 6px !important; height: 7px !important; } html[data-theme]:not(#cp) body .modal-title::before, html[data-theme]:not(#cp) body .cp-hero-meta .cp-dot, html[data-theme]:not(#cp) body .rst-act-header h3::before, html[data-theme]:not(#cp) body .cp-ph-meta i, html[data-theme]:not(#cp) body .cp-sp-kicker i, html[data-theme]:not(#cp) body .cp-einv-kicker i, html[data-theme]:not(#cp) body .ra-kicker i, html[data-theme]:not(#cp) body .ra-hero-k > i, html[data-theme]:not(#cp) body .qa-kicker i, html[data-theme]:not(#cp) body .qa-plan li::before, html[data-theme]:not(#cp) body .rh-kicker i, html[data-theme]:not(#cp) body .cp-kb-k i, html[data-theme]:not(#cp) body .cp-day-kicker i { width: 7px !important; height: 8px !important; } html[data-theme]:not(#cp) body .rst-ovf-own.has-update .rst-ovf-ico::after, html[data-theme]:not(#cp):not(#cq) body .cp-msg #message-table .message-row.unread strong::after, html[data-theme]:not(#cp) body .cp-day-brief li::before { width: 8px !important; height: 9px !important; } html[data-theme]:not(#cp) body .cp-unread-dot, html[data-theme]:not(#cp) body .rst-notif-panel .cp-ni-dot, html[data-theme]:not(#cp) body .cp-sb-dot { width: 9px !important; height: 10px !important; } /* v5.51.1 · Kundenportal: leuchtender Kartenrand der Maus folgend (wie Team-Dashboard) + Lichtkante im Kopfbereich */ html[data-theme]:not(#cp) body .cp-portal-card, html[data-theme]:not(#cp) body .cp-ph-tile { position: relative; } html[data-theme]:not(#cp) body .cp-portal-card::after, html[data-theme]:not(#cp) body .cp-ph-tile::after, html[data-theme]:not(#cp) body .cp-portal-hero::after { content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1px; background: radial-gradient(240px circle at var(--mx, -500px) var(--my, -500px), rgba(232,85,42,.75), rgba(232,85,42,.15) 40%, transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity var(--cp-dur-l) var(--cp-ease); } html[data-theme]:not(#cp) body .cp-portal-card:hover::after, html[data-theme]:not(#cp) body .cp-ph-tile:hover::after, html[data-theme]:not(#cp) body .cp-portal-hero:hover::after { opacity: 1; } @media (hover: none) { html[data-theme]:not(#cp) body .cp-portal-card::after, html[data-theme]:not(#cp) body .cp-ph-tile::after { display: none; } } /* ============================================================================= v5.52.0 · Termine verknüpfen + Meeting-Notizen (event-notes.js) Präfix = html[data-theme]:not(#cp):not(#cq) body (schlägt die Formular-/Überschriften-Regeln des Themes) ============================================================================= */ /* ---- Auswahl: Kunde / Interessent / Projekt ---- */ .cp-lk-hidden { display: none !important; } .cp-lk { position: relative; } .cp-lk-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cp-lk.has-val .cp-lk-chips { margin-bottom: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-lk-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; padding: 5px 6px 5px 10px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-strong) !important; text-decoration: none !important; transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body a.cp-lk-chip { padding-right: 12px; } html[data-theme]:not(#cp):not(#cq) body a.cp-lk-chip:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-lk-chip > svg { flex: none; width: 16px; height: 16px; margin: 0 !important; color: var(--cp-rust-hi); } .cp-lk-chip > span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.25; } .cp-lk-chip > span, .cp-lk-chip > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-lk-chip small { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-lk-chip button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-lk-chip button:hover { background: color-mix(in srgb, var(--cp-text) 10%, transparent); color: var(--cp-strong); } .cp-lk-chip button svg { width: 13px; height: 13px; margin: 0 !important; } .cp-lk-none { font-size: 13px; color: var(--cp-dim); font-style: italic; } .cp-lk-box { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); transition: border-color .2s ease, box-shadow .2s ease; } .cp-lk-box:focus-within, .cp-lk.is-open .cp-lk-box { border-color: var(--cp-rust-hi); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-lk-box > svg { flex: none; width: 16px; height: 16px; margin: 0 !important; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-lk-box input[type="text"] { flex: 1; min-width: 0; height: 40px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important; color: var(--cp-text) !important; font-size: 14px; } .cp-lk-box input::placeholder { color: var(--cp-dim); } .cp-lk-dd { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; max-height: min(340px, 52vh); overflow: auto; overscroll-behavior: contain; padding: 6px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .65); animation: cp-lk-in .18s ease both; } @keyframes cp-lk-in { from { opacity: 0; transform: translateY(-4px); } } .cp-lk-g { padding: 8px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-lk-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 3px; background: none; color: var(--cp-text); text-align: left; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-lk-opt:hover, html[data-theme]:not(#cp):not(#cq) body .cp-lk-opt.is-hi { background: var(--cp-rust-soft); } .cp-lk-opt > svg { flex: none; width: 16px; height: 16px; margin: 0 !important; color: var(--cp-muted); } .cp-lk-opt.is-cur > svg, .cp-lk-opt:hover > svg:first-child, .cp-lk-opt.is-hi > svg:first-child { color: var(--cp-rust-hi); } .cp-lk-opt > span { flex: 1; display: flex; flex-direction: column; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-lk-opt b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-lk-opt small { font-size: 11.5px; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-lk-empty { padding: 14px 12px; font-size: 13px; color: var(--cp-muted); } .cp-lk-hint { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12px; color: var(--cp-dim); } .cp-lk-hint svg { flex: none; width: 13px; height: 13px; margin: 0 !important; } .cp-lk-wait { height: 42px; border-radius: 3px; background: var(--cp-surface-2); opacity: .6; } /* ---- Termin-Ansicht (RISE events/view) ---- */ .cp-evx { display: grid; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: linear-gradient(135deg, var(--cp-rust-soft), transparent 55%), var(--cp-surface-2); } .cp-evx.is-loading { border-color: transparent; background: none; padding: 0; } .cp-evx-sk { height: 104px; border-radius: 3px; background: linear-gradient(90deg, var(--cp-surface-2), var(--cp-surface), var(--cp-surface-2)); background-size: 200% 100%; animation: cp-shimmer 1.3s linear infinite; } .cp-evx-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cp-evx-k { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-rust-hi); } .cp-evx-k svg { width: 14px; height: 14px; margin: 0 !important; } .cp-evx-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-evx-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-strong); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-evx-btn:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-evx-btn.is-primary { border-color: transparent; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-evx-btn:disabled { opacity: .55; cursor: progress; } html[data-theme]:not(#cp):not(#cq) body .cp-evx-notes { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-surface); color: var(--cp-text); text-align: left; cursor: pointer; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-evx-notes:hover { border-color: var(--cp-rust-hi); box-shadow: 0 14px 34px -20px rgba(232, 85, 42, .8); transform: translateY(-1px); } .cp-evx-notes > svg:first-child { flex: none; width: 36px; height: 36px; padding: 8px; margin: 0 !important; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-evx-notes.has-notes > svg:first-child { background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; } .cp-evx-notes > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-evx-notes b { font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-evx-notes small { font-size: 12px; color: var(--cp-muted); line-height: 1.4; } .cp-evx-notes > svg:last-child { flex: none; width: 16px; height: 16px; margin: 0 !important; color: var(--cp-rust-hi); transition: transform .2s ease; } .cp-evx-notes:hover > svg:last-child { transform: translateX(3px); } .cp-evx-edit { display: grid; gap: 10px; padding-top: 2px; animation: cp-lk-in .2s ease both; } .cp-evx-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .cp-evx-err { flex: 1; font-size: 12.5px; color: #FF8A73; } /* ---- Notiz-Arbeitsplatz ---- */ html.cp-evn-on, html.cp-evn-on body { overflow: hidden !important; } .cp-evn { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: var(--cp-void, #06070A); color: var(--cp-text); opacity: 0; transform: translateY(14px) scale(.996); transition: opacity .22s ease, transform .32s cubic-bezier(.2, .75, .2, 1); isolation: isolate; } .cp-evn.is-in { opacity: 1; transform: none; } .cp-evn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 420px at 88% -8%, rgba(232, 85, 42, .16), transparent 70%), radial-gradient(700px 380px at -6% 108%, rgba(192, 67, 28, .10), transparent 70%); } .cp-evn-load { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 14px; color: var(--cp-muted); } .cp-evn-load .cp-hex3d { --s: 58px; } .cp-evn-load.is-err svg { width: 28px; height: 28px; color: #FF8A73; } /* Kopf */ .cp-evn-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-areas: "x t s" "x t n"; align-items: start; gap: 10px 18px; padding: max(16px, env(safe-area-inset-top)) 26px 16px; border-bottom: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-surface) 72%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-x { grid-area: x; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-strong); cursor: pointer; transition: background .2s ease, transform .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-x:hover { background: var(--cp-surface-2); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-x:active { transform: scale(.95); } .cp-evn-x svg { width: 18px; height: 18px; margin: 0 !important; } .cp-evn-ttl { grid-area: t; min-width: 0; } .cp-evn-kick { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-rust-hi); } .cp-evn-hex { width: 9px; height: 10px; background: linear-gradient(160deg, #FFA07A, #E8552A 55%, #B23A18); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-ttl h2 { margin: 6px 0 6px !important; font-size: clamp(20px, 2.2vw, 28px) !important; font-weight: 500 !important; letter-spacing: -.015em !important; line-height: 1.15 !important; text-transform: none !important; color: var(--cp-strong) !important; overflow-wrap: anywhere; } .cp-evn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--cp-muted); } .cp-evn-meta > span, html[data-theme]:not(#cp):not(#cq) body .cp-evn-meta > a { display: inline-flex; align-items: center; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-meta > a { color: var(--cp-rust-hi) !important; font-weight: 600; text-decoration: none !important; } .cp-evn-meta svg { width: 14px; height: 14px; margin: 0 !important; } .cp-evn-live { padding: 3px 10px; border-radius: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; } .cp-evn-live.is-on { background: rgba(232, 85, 42, .16); color: var(--cp-rust-hi); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-evn-live.is-soon { background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-strong); } .cp-evn-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .cp-evn-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-mini { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-strong); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-mini:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-mini.is-ghost { background: none; } .cp-evn-mini svg { width: 14px; height: 14px; margin: 0 !important; } .cp-evn-status { grid-area: s; justify-self: end; display: flex; align-items: center; gap: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-timer { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-strong); font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-timer:hover { border-color: var(--cp-rust-line); } .cp-evn-timer svg { width: 14px; height: 14px; margin: 0 !important; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-timer b { font-weight: 600; color: inherit; } .cp-evn-timer span { font-size: 11.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-timer.is-run { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-evn-rec { width: 9px; height: 9px; border-radius: 50%; background: #FF4D2E; box-shadow: 0 0 0 0 rgba(255, 77, 46, .6); animation: cp-evn-rec 1.6s ease-out infinite; } @keyframes cp-evn-rec { 70% { box-shadow: 0 0 0 8px rgba(255, 77, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 46, 0); } } .cp-evn-save { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cp-muted); white-space: nowrap; } .cp-evn-save svg { width: 14px; height: 14px; margin: 0 !important; } .cp-evn-save.is-saved svg { color: #3DD68C; } .cp-evn-save.is-offline, .cp-evn-save.is-conflict { color: #FFB454; } .cp-evn-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-rust-hi); animation: cp-evn-pulse 1s ease-in-out infinite alternate; } .cp-evn-save.is-new .cp-evn-pulse { background: var(--cp-dim); animation: none; } @keyframes cp-evn-pulse { to { opacity: .25; } } .cp-evn-tools { grid-area: n; justify-self: end; display: flex; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-strong); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-btn:hover { background: var(--cp-surface-2); border-color: color-mix(in srgb, var(--cp-text) 26%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-btn:active { transform: scale(.97); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-btn:disabled { opacity: .6; cursor: progress; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-btn.is-primary { border-color: transparent; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; box-shadow: 0 10px 26px -14px rgba(192, 67, 28, .9); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-btn.is-primary:hover { box-shadow: 0 12px 30px -12px rgba(232, 85, 42, .95); } .cp-evn-btn > svg { width: 16px; height: 16px; margin: 0 !important; } .cp-evn-btn.is-primary > svg:last-child { width: 14px; height: 14px; opacity: .85; } .cp-evn-btn .cp-hex3d { --s: 20px; margin: -2px 0; } .cp-evn-btn.is-ai { border-color: var(--cp-rust-line); } .cp-evn-btn.is-wide { width: 100%; margin-top: 10px; } /* Hinweisleiste */ .cp-evn-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 14px 26px 0; padding: 11px 14px; border-radius: 3px; font-size: 13px; color: var(--cp-text); background: var(--cp-rust-soft); border: 1px solid var(--cp-rust-line); animation: cp-lk-in .25s ease both; } .cp-evn-banner.is-conflict { background: rgba(255, 180, 84, .12); border-color: rgba(255, 180, 84, .45); } .cp-evn-banner > svg { flex: none; width: 18px; height: 18px; margin: 0 !important; color: var(--cp-rust-hi); } .cp-evn-banner.is-conflict > svg { color: #FFB454; } .cp-evn-banner > span { flex: 1; min-width: 220px; } /* Inhalt */ .cp-evn-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 410px); gap: 18px; align-items: start; width: 100%; max-width: 1640px; margin: 0 auto; padding: 18px 26px max(30px, env(safe-area-inset-bottom)); } .cp-evn-main, .cp-evn-side { display: grid; gap: 18px; min-width: 0; } .cp-evn-side { position: sticky; top: 0; } .cp-evn-sec { min-width: 0; padding: 14px 16px 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: var(--cp-shadow); } .cp-evn-sec.is-notes { display: flex; flex-direction: column; min-height: max(420px, calc(100vh - 380px)); } .cp-evn-sh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-sh h3 { flex: 1; display: inline-flex; align-items: center; gap: 9px; min-width: 0; margin: 0 !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cp-strong) !important; } .cp-evn-sh h3 > svg { flex: none; width: 17px; height: 17px; margin: 0 !important; color: var(--cp-rust-hi); } .cp-evn-n { font-style: normal; padding: 1px 8px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .cp-evn-n:empty { display: none; } .cp-evn-tb { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-tb button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .15s ease, color .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-tb button:hover { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-evn-tb svg { width: 14px; height: 14px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body textarea.cp-evn-ta { flex: 1; width: 100%; min-height: 340px; padding: 14px 16px !important; border-radius: 3px !important; border: 1px solid var(--cp-line) !important; background: var(--cp-deep) !important; color: var(--cp-text) !important; font-size: 15px; line-height: 1.7; resize: vertical; tab-size: 4; } html[data-theme]:not(#cp):not(#cq) body textarea.cp-evn-ta.is-sm { flex: none; min-height: 110px; font-size: 14px; line-height: 1.6; } html[data-theme]:not(#cp):not(#cq) body textarea.cp-evn-ta:focus { border-color: var(--cp-rust-line) !important; box-shadow: 0 0 0 3px var(--cp-rust-soft) !important; background: var(--cp-deep) !important; } .cp-evn-ta::placeholder { color: var(--cp-dim); } .cp-evn-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--cp-dim); font-variant-numeric: tabular-nums; } /* Listen */ html[data-theme]:not(#cp):not(#cq) body ul.cp-evn-ls { display: grid; gap: 2px; margin: 0 !important; padding: 0 !important; list-style: none; } .cp-evn-it { display: flex; align-items: flex-start; gap: 8px; padding: 4px 2px; border-radius: 3px; transition: background .15s ease; } .cp-evn-it:hover { background: color-mix(in srgb, var(--cp-text) 4%, transparent); } .cp-evn-it.is-new { animation: cp-evn-new .5s ease both; } @keyframes cp-evn-new { from { background: var(--cp-rust-soft); transform: translateY(-3px); opacity: 0; } } .cp-evn-empty { padding: 8px 4px; font-size: 12.5px; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-empty button { padding: 0; border: 0; background: none; color: var(--cp-rust-hi); font: inherit; font-weight: 600; cursor: pointer; } .cp-evn-cb { position: relative; flex: none; margin: 5px 0 0 !important; cursor: pointer; } .cp-evn-cb input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cp-evn-cb i { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; border: 1.5px solid var(--cp-line-2); background: var(--cp-deep); transition: background .2s ease, border-color .2s ease; } .cp-evn-cb i svg { width: 13px; height: 13px; margin: 0 !important; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .2s ease; } .cp-evn-cb input:checked + i { border-color: transparent; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); } .cp-evn-cb input:checked + i svg { opacity: 1; transform: none; } .cp-evn-cb input:focus-visible + i { box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body input.cp-evn-in[type="text"] { flex: 1; min-width: 0; width: 100%; height: 30px !important; padding: 4px 8px !important; border: 1px solid transparent !important; border-radius: 3px !important; background: none !important; box-shadow: none !important; color: var(--cp-text) !important; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body input.cp-evn-in[type="text"]:hover { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body input.cp-evn-in[type="text"]:focus { border-color: var(--cp-rust-line) !important; background: var(--cp-deep) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-it.is-done input.cp-evn-in[type="text"] { color: var(--cp-dim) !important; text-decoration: line-through; } .cp-evn-dot { flex: none; width: 8px; height: 9px; margin: 11px 4px 0 6px; background: linear-gradient(160deg, #FFA07A, #E8552A 55%, #B23A18); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-rm, html[data-theme]:not(#cp):not(#cq) body .cp-evn-mv button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 2px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--cp-dim); cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; } .cp-evn-it:hover .cp-evn-rm, .cp-evn-it:focus-within .cp-evn-rm, .cp-evn-it:hover .cp-evn-mv button:not(:disabled), .cp-evn-it:focus-within .cp-evn-mv button:not(:disabled) { opacity: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-rm:hover { background: rgba(255, 90, 60, .12); color: #FF7A5C; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-mv button:hover { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-evn-mv button svg { transform: rotate(180deg); } .cp-evn-rm svg, .cp-evn-mv svg { width: 13px; height: 13px; margin: 0 !important; } @media (hover: none) { html[data-theme]:not(#cp):not(#cq) body .cp-evn-rm { opacity: .7; } } .cp-evn-prog { height: 4px; margin: -2px 0 10px; border-radius: 999px; background: var(--cp-line); overflow: hidden; } .cp-evn-prog i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--cp-rust), var(--cp-rust-hi)); transition: width .45s cubic-bezier(.2, .75, .2, 1); } .cp-evn-ab { flex: 1; min-width: 0; display: grid; gap: 4px; } .cp-evn-am { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-am select, html[data-theme]:not(#cp):not(#cq) body .cp-evn-am input[type="date"] { height: 28px !important; padding: 0 8px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-deep) !important; color: var(--cp-text) !important; font-size: 12px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-am select { max-width: 170px; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-am input[type="date"].is-late { border-color: rgba(255, 110, 80, .6) !important; color: #FF8A73 !important; } html[data-theme]:not(#cp):not(#cq) body a.cp-evn-tk { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 3px; background: rgba(61, 214, 140, .12); color: #3DD68C !important; font-size: 11.5px; font-weight: 700; text-decoration: none !important; font-variant-numeric: tabular-nums; } .cp-evn-tk svg { width: 12px; height: 12px; margin: 0 !important; } .cp-evn-add { display: flex; gap: 6px; margin-top: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-add input[type="text"] { flex: 1; min-width: 0; height: 36px !important; padding: 0 12px !important; border-radius: 3px !important; border: 1px dashed var(--cp-line-2) !important; background: none !important; font-size: 13px; color: var(--cp-text) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-add input[type="text"]:focus { border-style: solid !important; border-color: var(--cp-rust-line) !important; background: var(--cp-deep) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-add button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-rust-hi); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-add button:hover { background: var(--cp-rust-soft); border-color: var(--cp-rust-line); } .cp-evn-add button svg { width: 16px; height: 16px; margin: 0 !important; } /* Teilnehmende */ .cp-evn-people { display: flex; flex-wrap: wrap; gap: 8px; } .cp-evn-pp { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px 4px 4px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); } .cp-evn-pp > i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; } .cp-evn-pp.is-guest > i { background: var(--cp-strong); color: var(--cp-void); } .cp-evn-pp.is-mail > i { background: var(--cp-surface); color: var(--cp-muted); border: 1px solid var(--cp-line-2); } .cp-evn-pp > span { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--cp-strong); line-height: 1.2; } .cp-evn-pp > span, .cp-evn-pp small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-evn-pp small { font-size: 10.5px; font-weight: 500; color: var(--cp-muted); } /* Menü */ .cp-evn-menu { position: fixed; z-index: 5; padding: 6px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .7); animation: cp-lk-in .18s ease both; } .cp-evn-mh { padding: 8px 10px 6px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-menu button { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 3px; background: none; color: var(--cp-text); text-align: left; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-menu button:hover, html[data-theme]:not(#cp):not(#cq) body .cp-evn-menu button:focus-visible { background: var(--cp-rust-soft); outline: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-menu button.is-cur { box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-evn-menu button > svg { flex: none; width: 17px; height: 17px; margin: 1px 0 0 !important; color: var(--cp-rust-hi); } .cp-evn-menu button > span { display: flex; flex-direction: column; min-width: 0; } .cp-evn-menu button[data-t] { flex-direction: column; gap: 1px; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-menu b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } .cp-evn-menu small { font-size: 11.5px; color: var(--cp-muted); line-height: 1.35; } /* Seitenblatt */ .cp-evn-sheet { position: fixed; inset: 0; z-index: 6; } .cp-evn-sheet-bg { position: absolute; inset: 0; background: rgba(4, 5, 8, .55); opacity: 0; transition: opacity .22s ease; } .cp-evn-sheet-p { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); display: flex; flex-direction: column; border-left: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .7); transform: translateX(24px); opacity: 0; transition: transform .3s cubic-bezier(.2, .75, .2, 1), opacity .22s ease; } .cp-evn-sheet.is-in .cp-evn-sheet-bg { opacity: 1; } .cp-evn-sheet.is-in .cp-evn-sheet-p { transform: none; opacity: 1; } .cp-evn-sheet-p > header { display: flex; align-items: center; gap: 12px; padding: max(16px, env(safe-area-inset-top)) 18px 14px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-evn-sheet-p h3 { flex: 1; display: inline-flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--cp-strong) !important; } .cp-evn-sheet-p h3 > svg { width: 18px; height: 18px; margin: 0 !important; color: var(--cp-rust-hi); } .cp-evn-sheet-p h3 .cp-hex3d { --s: 22px; } .cp-evn-sheet-b { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 16px 18px max(24px, env(safe-area-inset-bottom)); } .cp-evn-sub { margin: 0 0 14px; font-size: 13px; color: var(--cp-muted); line-height: 1.5; } .cp-evn-err { margin: 8px 0 0; font-size: 12.5px; color: #FF8A73; } .cp-evn-err:empty { display: none; } .cp-evn-sa { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .cp-evn-sheet.is-link .cp-lk-dd { position: static; margin-top: 8px; max-height: none; box-shadow: none; } .cp-evn-rev { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 11px 0; border-top: 1px solid var(--cp-line); } .cp-evn-rev > div { display: flex; flex-direction: column; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-rev b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-evn-rev small { font-size: 11.5px; color: var(--cp-muted); } .cp-evn-rev pre { grid-column: 1 / -1; max-height: 320px; overflow: auto; margin: 4px 0 0; padding: 12px; border-radius: 3px; background: var(--cp-deep); border: 1px solid var(--cp-line); color: var(--cp-text); font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; } .cp-evn-sk { height: 54px; margin-bottom: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--cp-surface-2), var(--cp-surface), var(--cp-surface-2)); background-size: 200% 100%; animation: cp-shimmer 1.3s linear infinite; } .cp-evn-aib { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 0; font-size: 13.5px; color: var(--cp-muted); } .cp-evn-aib .cp-hex3d { --s: 54px; } .cp-evn-aig { margin: 16px 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-rust-hi); } .cp-evn-aip { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 6px !important; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); cursor: pointer; font-weight: 400 !important; transition: border-color .2s ease; } .cp-evn-aip:has(input:checked) { border-color: var(--cp-rust-line); } .cp-evn-aip input { flex: none; margin-top: 3px; accent-color: #E8552A; } .cp-evn-aip > span { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--cp-text); line-height: 1.45; } .cp-evn-aip small { font-size: 12.5px; color: var(--cp-muted); } .cp-evn-aip.is-dup { opacity: .62; } .cp-evn-aip em { align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-muted); font-size: 10.5px; font-style: normal; font-weight: 600; } /* Meldung */ .cp-evn-toast { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 8; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .75); font-size: 13.5px; color: var(--cp-strong); transform: translate(-50%, 18px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .3s cubic-bezier(.2, .75, .2, 1); } .cp-evn-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .cp-evn-toast > svg { flex: none; width: 17px; height: 17px; margin: 0 !important; color: #3DD68C; } .cp-evn-toast.is-bad > svg { color: #FF8A73; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-toast a, html[data-theme]:not(#cp):not(#cq) body .cp-evn-toast .cp-evn-undo { padding: 0; border: 0; background: none; color: var(--cp-rust-hi) !important; font: inherit; font-weight: 700; text-decoration: none !important; cursor: pointer; } /* Größen */ @media (max-width: 1180px) { .cp-evn-body { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); } } @media (max-width: 980px) { .cp-evn-head { grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "x t" "s s" "n n"; padding: max(12px, env(safe-area-inset-top)) 16px 12px; } .cp-evn-status { justify-self: stretch; justify-content: space-between; } .cp-evn-tools { justify-self: stretch; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; } .cp-evn-tools::-webkit-scrollbar { display: none; } .cp-evn-body { grid-template-columns: minmax(0, 1fr); padding: 14px 16px max(26px, env(safe-area-inset-bottom)); gap: 14px; } .cp-evn-main, .cp-evn-side { gap: 14px; } .cp-evn-side { position: static; } .cp-evn-sec.is-notes { min-height: 0; } html[data-theme]:not(#cp):not(#cq) body textarea.cp-evn-ta { min-height: 46vh; } .cp-evn-banner { margin: 12px 16px 0; } } @media (max-width: 560px) { .cp-evn-meta { font-size: 12.5px; } .cp-evn-tb button span { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-tb button { width: 36px; justify-content: center; padding: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-btn { height: 38px; padding: 0 12px; } .cp-evn-status { flex-wrap: wrap; } .cp-evn-sec { padding: 12px; border-radius: 3px; } .cp-evn-sheet-p { width: 100%; } .cp-evn-kbd { display: none; } .cp-evn-rev { grid-template-columns: minmax(0, 1fr) auto; } .cp-evn-rev [data-r="view"] { display: none; } } /* Handy / niedrige Fenster: Kopf scrollt mit, damit die Mitschrift Platz hat */ @media (max-width: 560px), (max-height: 560px) { .cp-evn { overflow-y: auto; overscroll-behavior: contain; } .cp-evn-body { flex: none; overflow: visible; } html[data-theme]:not(#cp):not(#cq) body textarea.cp-evn-ta { min-height: 58vh; } } @media (prefers-reduced-motion: reduce) { .cp-evn, .cp-evn *, .cp-evx *, .cp-lk * { animation: none !important; transition: none !important; } } html.cp-motion-off .cp-evn, html.cp-motion-off .cp-evn * { animation: none !important; transition: none !important; } @media print { .cp-evn { display: none !important; } } /* „Mein Tag“ + Meetings: Einstieg */ html[data-theme]:not(#cp):not(#cq) body .cp-day-join.is-notes { background: none; border-color: var(--cp-line-2); color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-join.is-notes:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong) !important; } @media (max-width: 560px) { .cp-day-join.is-notes span { display: none; } } html[data-theme]:not(#cp):not(#cq) body .rst-meet-notes { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong) !important; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-notes:hover { border-color: var(--cp-rust-hi); background: color-mix(in srgb, var(--cp-rust-hi) 22%, transparent); } html[data-theme]:not(#cp):not(#cq) body .rst-meet-success .rst-meet-notes { margin-top: 10px; } .rst-meet-notes.has-notes::after { content: ""; display: inline-block; width: 7px; height: 8px; margin-left: 6px; vertical-align: 1px; background: linear-gradient(160deg, #FFA07A, #E8552A 55%, #B23A18); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } /* ============================================================================= v5.52.0 · Passwort-Manager: nach Kunden geordnet, Zugriffsprotokoll, sichere Anzeige (password-vault.js) ============================================================================= */ .cp-pv-note { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 14px; padding: 12px 16px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: linear-gradient(135deg, var(--cp-rust-soft), transparent 60%), var(--cp-surface); font-size: 13px; color: var(--cp-muted); } .cp-pv-note > svg { flex: none; width: 20px; height: 20px; margin: 0 !important; color: var(--cp-rust-hi); } .cp-pv-note > span:not(.cp-pv-note-k) { flex: 1; min-width: 240px; line-height: 1.5; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-note b { margin-right: 6px; color: var(--cp-strong); font-weight: 600; } .cp-pv-note-k { padding: 3px 10px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); font-size: 11.5px; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body table.dataTable tbody tr.cp-pv-group, html[data-theme]:not(#cp):not(#cq) body table.dataTable tbody tr.cp-pv-group:hover { animation: none !important; background: transparent !important; } html[data-theme]:not(#cp):not(#cq) body table.dataTable tbody tr.cp-pv-group td { padding: 18px 12px 8px !important; border-bottom: 1px solid var(--cp-rust-line) !important; background: transparent !important; } .cp-pv-group td { font-size: 13px; } .cp-pv-group td > * { vertical-align: middle; } .cp-pv-gi { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-pv-group.is-none .cp-pv-gi { background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-muted); } .cp-pv-gi svg { width: 14px; height: 14px; margin: 0 !important; } .cp-pv-gn { font-weight: 600; color: var(--cp-strong); letter-spacing: .01em; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-gn a { color: var(--cp-strong) !important; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-gn a:hover { color: var(--cp-rust-hi) !important; } .cp-pv-group em { margin-left: 10px; padding: 1px 8px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-muted); font-size: 11.5px; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body a.cp-pv-client { color: var(--cp-strong) !important; font-weight: 500; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body a.cp-pv-client:hover { color: var(--cp-rust-hi) !important; } .cp-pv-lead { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } .cp-pv-proj { margin-top: 2px; font-size: 11.5px; color: var(--cp-muted); } /* Eintrag: Stärke, Countdown, Protokoll */ .cp-pv-strength { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: -6px 0 4px; font-size: 12px; color: var(--cp-muted); } .cp-pv-strength.is-form { margin: 8px 0 0; } .cp-pv-meter { display: inline-grid; grid-template-columns: repeat(4, 22px); gap: 3px; } .cp-pv-meter i { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 12%, transparent); } .cp-pv-meter.is-s0 i:nth-child(-n+1) { background: #FF5A3C; } .cp-pv-meter.is-s1 i:nth-child(-n+1) { background: #FF8A3C; } .cp-pv-meter.is-s2 i:nth-child(-n+2) { background: #FFB454; } .cp-pv-meter.is-s3 i:nth-child(-n+3) { background: #7BD88F; } .cp-pv-meter.is-s4 i { background: #3DD68C; } .cp-pv-cd { padding: 1px 8px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-weight: 600; font-variant-numeric: tabular-nums; } .cp-pv-copied { color: #3DD68C; font-weight: 600; } .cp-pv-log { margin: 6px 12px 4px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); } .cp-pv-log-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; } .cp-pv-log-h span { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-rust-hi); } .cp-pv-log-h small { font-size: 11.5px; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-log ul { display: grid; gap: 2px; margin: 0 !important; padding: 0 !important; list-style: none; } .cp-pv-log li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--cp-line); font-size: 12.5px; } .cp-pv-log li:first-child { border-top: 0; } .cp-pv-log-who { color: var(--cp-strong); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-pv-log-who em { font-style: normal; font-size: 10.5px; color: var(--cp-rust-hi); } .cp-pv-log-what { color: var(--cp-muted); } .cp-pv-log time { color: var(--cp-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 560px) { .cp-pv-log li { grid-template-columns: minmax(0, 1fr) auto; } .cp-pv-log time { grid-column: 1 / -1; } } /* ============================================================================= v5.53.0 · Dateien: Vorschau blockierte das Scrollen (Nutzermeldung) RISE (app_folders/index.php) schaltet .sticky-details-section beim Scrollen auf position:fixed (.stick w300) und setzt #file-manager-right-panel per Skript auf Fensterhöhe – im Raster-Layout sprang die Seitenhöhe, die Seite ließ sich nicht weiter scrollen. Die Detail-Spalte haftet jetzt selbst (sticky) und scrollt bei langer Vorschau in sich; das Mausrad geht am Listen-/Detail-Ende an die Seite weiter. ============================================================================= */ html[data-theme]:not(#cp):not(#cq) body .cp-fm .sticky-details-section.stick { position: static !important; top: auto !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-right-panel { height: auto !important; min-height: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fm #file-manager-window-area { overscroll-behavior: auto !important; } @container cpfiles (min-width: 1101px) { html[data-theme]:not(#cp):not(#cq) body .box:has(> #file-manager-items-box) > #file-details-box { max-height: calc(100vh - 110px); overflow-y: auto !important; overscroll-behavior: auto; scrollbar-width: thin; } } html[data-theme]:not(#cp):not(#cq) body .cp-fm .file-manager-preview-section img { max-height: 46vh; width: auto; max-width: 100%; margin: 0 auto; display: block; object-fit: contain; } /* ============================================================================= v5.53.0 · Google Meet: Button neben „Kalender“, Meetings-Bereich im Marken-Look (Nutzerwunsch) ============================================================================= */ html[data-theme]:not(#cp):not(#cq) body .page-title.ca-meet-title { display: flex; align-items: center; flex-wrap: wrap; column-gap: 4px; } html[data-theme]:not(#cp):not(#cq) body .page-title.ca-meet-title::before, html[data-theme]:not(#cp):not(#cq) body .page-title.ca-meet-title::after { display: none; } html[data-theme]:not(#cp):not(#cq) body .page-title.ca-meet-title > h1 { float: none; } html[data-theme]:not(#cp):not(#cq) body .page-title.ca-meet-title > .title-button-group { float: none; margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body .ca-meet-btn.is-inline { height: 34px; padding: 0 12px !important; margin: 0; border-radius: 3px !important; font-size: 10.5px !important; } html[data-theme]:not(#cp):not(#cq) body .ca-meet-btn.is-inline svg { width: 15px; height: 15px; } html[data-theme]:not(#cp):not(#cq) body .card-header .ca-meet-btn.is-inline { height: 30px; margin-left: 10px; padding: 0 9px !important; vertical-align: middle; } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .ca-meet-btn.is-inline span { display: none; } } /* Icons */ .rst-mi { flex: none; width: 15px; height: 15px; margin: 0 !important; vertical-align: -2px; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-header h1 { display: inline-flex; align-items: center; gap: 10px; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-header h1 .rst-mi { width: 20px; height: 20px; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .rst-meet-btn-new, html[data-theme]:not(#cp):not(#cq) body .rst-meet-btn-instant, html[data-theme]:not(#cp):not(#cq) body .rst-meet-tab, html[data-theme]:not(#cp):not(#cq) body .rst-meet-join, html[data-theme]:not(#cp):not(#cq) body .rst-meet-notes, html[data-theme]:not(#cp):not(#cq) body .rst-meet-link-copy { display: inline-flex !important; align-items: center; gap: 7px; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-tab .rst-mi { width: 14px; height: 14px; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-empty-icon { display: flex !important; align-items: center; justify-content: center; color: var(--cp-rust-hi) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-empty-icon .rst-mi { width: 26px; height: 26px; } /* Karten */ html[data-theme]:not(#cp):not(#cq) body .rst-meet-card { background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; box-shadow: var(--cp-shadow) !important; align-items: center; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-card:hover { border-color: color-mix(in srgb, var(--cp-text) 22%, transparent) !important; transform: none !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-card.soon { border-color: var(--cp-rust-line) !important; background: linear-gradient(90deg, var(--cp-rust-soft), transparent 40%), var(--cp-surface) !important; box-shadow: 0 0 0 1px var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-card-time { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-card-time-main, html[data-theme]:not(#cp):not(#cq) body .rst-meet-card-body h3 { color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-card-desc { color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-card-meta > span { display: inline-flex; align-items: center; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-card-meta .rst-mi { width: 14px; height: 14px; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .rst-meet-badge-cancelled { padding: 1px 8px; border-radius: 3px; background: rgba(255, 90, 60, .12); color: #FF7A5C !important; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-join { height: 34px; padding: 0 14px !important; border-radius: 3px !important; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)) !important; box-shadow: 0 10px 24px -14px rgba(192, 67, 28, .9) !important; color: #fff !important; font-size: 12.5px !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-copy, html[data-theme]:not(#cp):not(#cq) body .rst-meet-cancel { width: 34px !important; height: 34px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-copy:hover { border-color: var(--cp-rust-line) !important; color: var(--cp-rust-hi) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-cancel:hover { border-color: rgba(255, 90, 60, .5) !important; color: #FF7A5C !important; background: rgba(255, 90, 60, .1) !important; } /* Dialog */ html[data-theme]:not(#cp):not(#cq) body .rst-meet-overlay { background: rgba(4, 5, 8, .62) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-modal { background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2); border-radius: 3px !important; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-modal-head { background: linear-gradient(135deg, var(--cp-rust-soft), transparent 60%) !important; border-bottom-color: var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-modal-head h2 { display: inline-flex; align-items: center; gap: 10px; color: var(--cp-strong) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-modal-head h2 .rst-mi { width: 19px; height: 19px; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .rst-meet-close { color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-close:hover { background: color-mix(in srgb, var(--cp-text) 8%, transparent) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-field label { color: var(--cp-muted) !important; font-size: 12px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-req { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-hint { color: var(--cp-dim) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-checkboxes { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .rst-meet-cb { color: var(--cp-text) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-cb input[type="checkbox"] { accent-color: #E8552A; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-actions-row { border-top-color: var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-btn-cancel { border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-btn-save { background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)) !important; box-shadow: 0 10px 26px -14px rgba(192, 67, 28, .9) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-success { background: rgba(61, 214, 140, .08) !important; border: 1px solid rgba(61, 214, 140, .35) !important; color: var(--cp-strong) !important; border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-link-input { background: var(--cp-deep) !important; border-color: var(--cp-line-2) !important; color: var(--cp-text) !important; } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body .rst-meet-card { flex-wrap: wrap; } html[data-theme]:not(#cp):not(#cq) body .rst-meet-card-actions { width: 100%; justify-content: flex-start; } } /* ============================================================================= v5.53.0 · E-Mail-Verlauf: bündige Datumsspalte, Zeitgruppen, Zähler, Zusammenfassung, auch bei Verkaufschancen (Nutzerwunsch) ============================================================================= */ html[data-theme]:not(#cp):not(#cq) body .cp-mconv { grid-template-columns: 38px minmax(0, 1fr); padding: 12px 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-mconv-top { align-items: center; } html[data-theme]:not(#cp):not(#cq) body .cp-mconv-top .cp-mtag { flex: none; margin-left: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-mconv-top time { min-width: 64px; text-align: right; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-mconv.is-in .cp-mconv-top time { color: var(--cp-strong); font-weight: 500; } html[data-theme]:not(#cp):not(#cq) body .cp-mgroup { display: flex; align-items: center; gap: 10px; margin: 14px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-mgroup::after { content: ""; flex: 1; height: 1px; background: var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .rst-client-emails-list > .cp-mgroup:first-child { margin-top: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-mgroup + .cp-mconv::before { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mseg button { display: inline-flex; align-items: center; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-mseg button em { font-style: normal; min-width: 18px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-dim); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-mseg button em:empty { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mseg button.active em { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-msum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 18px; border-bottom: 1px solid var(--cp-line); font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-msum b { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-msum span { display: inline-flex; align-items: center; gap: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-msum .cp-mdir { margin: 0 2px 0 0; } html[data-theme]:not(#cp):not(#cq) body .cp-mwait { padding: 1px 9px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-weight: 600; } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body .cp-mconv-top { flex-wrap: wrap; row-gap: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-mconv-top time { min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-msum { padding: 8px 12px; } } /* ============================================================================= v5.54.0 · Schnell erfassen: Eingabe-Karte mit Art-Vorgabe, Diktieren, Zähler, Beispiel-Chips, Tastenkürzel (Nutzerwunsch) ============================================================================= */ html[data-theme]:not(#cp):not(#cq) body .cp-qc-in { flex-direction: column; gap: 0; padding: 0; margin: 4px 20px 0; border-radius: 3px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--cp-text) 3%, transparent), transparent 70%), var(--cp-deep); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-in textarea { min-height: 88px !important; max-height: 240px; padding: 16px 18px 10px !important; font: 500 16px/1.5 var(--cp-font, inherit) !important; overflow-y: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-in textarea::placeholder { color: var(--cp-dim) !important; font-weight: 400; } .cp-qc-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-top: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .cp-qc-kind { display: inline-flex; gap: 2px; padding: 3px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); min-width: 0; overflow-x: auto; scrollbar-width: none; } .cp-qc-kind::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-kind button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font: 600 12px/1 var(--cp-font, inherit); cursor: pointer; transition: background .2s ease, color .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-kind button:hover { color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-kind button.is-on { background: var(--cp-rust-soft); color: var(--cp-strong); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-qc-kind svg { width: 14px; height: 14px; margin: 0 !important; } .cp-qc-kind button.is-on svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-mic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-muted); cursor: pointer; transition: all .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-mic:hover { color: var(--cp-strong); border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-mic.is-rec { color: #fff; border-color: transparent; background: #E5484D; box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); animation: cp-qc-rec 1.4s ease-out infinite; } @keyframes cp-qc-rec { 70% { box-shadow: 0 0 0 10px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } } .cp-qc-mic svg { width: 16px; height: 16px; margin: 0 !important; } .cp-qc-count { margin-left: auto; font-size: 11px; color: var(--cp-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-qc-count.is-near { color: #FFB454; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-go { align-self: center; height: 38px; padding: 0 12px 0 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-go kbd { margin-left: 2px; padding: 1px 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); border: 0; color: #fff; font: 600 11px/1.4 var(--cp-font, inherit); box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-ex { flex-wrap: nowrap; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 12px 20px 2px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); } .cp-qc-ex::-webkit-scrollbar { display: none; } .cp-qc-ex > span { flex: none; margin-right: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-ex button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-muted); font: 500 12px/1.3 var(--cp-font, inherit); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-ex button:hover { color: var(--cp-strong); border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-qc-ex button svg { flex: none; width: 13px; height: 13px; margin: 0 !important; color: var(--cp-rust-hi); } .cp-qc-hint { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 10px 20px 18px; font-size: 11.5px; color: var(--cp-dim); } .cp-qc-hint span { display: inline-flex; align-items: center; gap: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-hint kbd { min-width: 20px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-muted); font: 600 10.5px/1.5 var(--cp-font, inherit); text-align: center; box-shadow: 0 1px 0 var(--cp-line-2); } .cp-qc-box.is-done .cp-qc-hint, .cp-qc-box:has(.cp-qc-out:not([hidden])) .cp-qc-hint { display: none; } @media (max-width: 560px) { html[data-theme]:not(#cp):not(#cq) body .cp-qc-in { margin: 4px 14px 0; } .cp-qc-kind button span { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-kind button.is-on span { display: inline; } .cp-qc-count, html[data-theme]:not(#cp):not(#cq) body .cp-qc-go kbd, .cp-qc-hint { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-ex { padding: 10px 14px 12px; } } /* ============================================================================= v5.54.0 · Mein Tag – Tagesplan: Zeitleiste mit Block-Karten, Dauer, „In Kalender übernehmen“ (Nutzerwunsch) ============================================================================= */ .cp-day-plan-top { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-plan-top .cp-day-plan-h { flex: 1; min-width: 240px; margin: 0 !important; padding-top: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn.is-cal { height: 36px; padding: 0 13px; font-size: 12.5px; border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn.is-cal:hover { background: var(--cp-rust-soft); } .cp-day-btn.is-cal svg { width: 15px; height: 15px; margin: 0 !important; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-day-plan-f { align-items: center; gap: 14px; padding: 12px 16px 12px 12px; } .cp-day-plan-fi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 3px; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)); color: #fff; box-shadow: 0 10px 24px -14px rgba(192, 67, 28, .9); } .cp-day-plan-fi svg { width: 18px; height: 18px; margin: 0 !important; color: #fff !important; } /* Zeitleiste */ html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks { gap: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks::before { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li { position: relative; grid-template-columns: 54px 34px minmax(0, 1fr); gap: 0 10px; align-items: start; padding: 0; border-radius: 0; background: none !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li::before { content: ""; position: absolute; left: calc(54px + 10px + 16px); top: -10px; bottom: -10px; width: 2px; background: var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li:first-child::before { top: 20px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li:last-child::before { bottom: auto; height: 30px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li:only-child::before { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks time { align-items: flex-end; padding-top: 9px; text-align: right; } html[data-theme]:not(#cp):not(#cq) body .cp-day-bk { width: 34px; height: 34px; margin: 4px 0 0; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li > .cp-day-bc { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px 11px 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); border-left: 3px solid var(--k, var(--cp-rust-hi)); background: var(--cp-surface-2); transition: border-color .2s ease, background .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li:hover > .cp-day-bc { border-color: color-mix(in srgb, var(--cp-text) 20%, transparent); border-left-color: var(--k, var(--cp-rust-hi)); } .cp-day-blocks li.is-task { --k: #E8552A; } .cp-day-blocks li.is-event { --k: var(--cp-strong); } .cp-day-blocks li.is-ticket { --k: #5B9DFF; } .cp-day-blocks li.is-lead { --k: #3DD68C; } .cp-day-blocks li.is-mail { --k: #B38CFF; } .cp-day-blocks li.is-break, .cp-day-blocks li.is-buffer { --k: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li.is-break > .cp-day-bc, html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li.is-buffer > .cp-day-bc { background: transparent; border-style: dashed; border-left-style: solid; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li.is-now > .cp-day-bc { background: var(--cp-rust-soft); border-color: var(--cp-rust-line); box-shadow: 0 0 0 1px var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li.is-ticket .cp-day-bk { color: #5B9DFF; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li.is-lead .cp-day-bk { color: #3DD68C; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li.is-mail .cp-day-bk { color: #B38CFF; } .cp-day-bh { display: flex; align-items: center; gap: 8px; min-height: 22px; } .cp-day-bd { padding: 1px 7px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-day-bcal { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-muted); cursor: pointer; transition: all .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-day-bcal:hover:not(:disabled) { color: var(--cp-rust-hi); border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-day-bcal:disabled { cursor: default; color: #3DD68C; border-color: rgba(61, 214, 140, .35); background: rgba(61, 214, 140, .08); } html[data-theme]:not(#cp):not(#cq) body .cp-day-bcal.is-busy { opacity: .5; cursor: progress; } .cp-day-bcal svg { width: 14px; height: 14px; margin: 0 !important; } /* Auswahl „In Kalender übernehmen“ */ .cp-day-plan-pick { margin: 0 0 14px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-surface); animation: cp-day-drop .3s cubic-bezier(.2, .75, .2, 1) both; } .cp-day-plan-pick[hidden] { display: none; } .cp-day-pick-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-pick-h b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } .cp-day-pick-h span { font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-day-plan-pick ul { display: grid; gap: 2px; margin: 0 0 10px !important; padding: 0 !important; list-style: none; } html[data-theme]:not(#cp):not(#cq) body .cp-day-plan-pick label { display: grid; grid-template-columns: 18px 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 !important; padding: 7px 8px; border-radius: 3px; cursor: pointer; font-weight: 400 !important; } .cp-day-plan-pick label:hover { background: color-mix(in srgb, var(--cp-text) 5%, transparent); } .cp-day-plan-pick label.is-added { opacity: .6; cursor: default; } .cp-day-plan-pick input { accent-color: #E8552A; margin: 0; } .cp-day-pick-t { font-size: 12.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-day-pick-n { font-size: 13px; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-day-plan-pick em { font-style: normal; font-size: 11px; color: var(--cp-dim); } .cp-day-pick-a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .cp-day-pick-m { flex: 1; min-width: 160px; font-size: 12px; color: var(--cp-muted); } @media (max-width: 560px) { html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li { grid-template-columns: 44px 28px minmax(0, 1fr); gap: 0 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-blocks li::before { left: calc(44px + 8px + 13px); } html[data-theme]:not(#cp):not(#cq) body .cp-day-bk { width: 28px; height: 28px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-plan-pick label { grid-template-columns: 18px minmax(0, 1fr); } .cp-day-pick-t { grid-column: 2; } .cp-day-pick-n { grid-column: 2; white-space: normal; } .cp-day-plan-pick em { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn.is-cal { width: 100%; justify-content: center; } } /* ============================================================================= v5.54.1 · Feinschliff aus der Seitenprüfung (Handy/iPad/Desktop, 46 Seiten × 3 Breiten) ============================================================================= */ @media (max-width: 575px) { /* RISE-Kern: .task-preview & Co. mit min-width 400px → auf Handys 14 px zu breit (Aufgaben-, Vertrags-, Angebots-, Bestellansicht) */ html[data-theme]:not(#cp):not(#cq) body .task-preview, html[data-theme]:not(#cp):not(#cq) body .process-order-preview, html[data-theme]:not(#cp):not(#cq) body .contract-preview, html[data-theme]:not(#cp):not(#cq) body .proposal-preview, html[data-theme]:not(#cp):not(#cq) body .editor-preview { min-width: 0 !important; max-width: 100% !important; } /* Shop: Kategorie-Filter 200 px + 15 px Abstand → 5 px zu breit */ html[data-theme]:not(#cp):not(#cq) body #s2id_item-categories-filter { width: 100% !important; max-width: 100%; margin-right: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .title-button-group .select2-container.w200 { max-width: 100%; } } /* Touch: kleine Schaltflächen bekommen eine unsichtbar größere Tippfläche (mind. ~40 px) */ @media (pointer: coarse) { html[data-theme]:not(#cp):not(#cq) body #reminder-icon, html[data-theme]:not(#cp):not(#cq) body .fc .fc-col-header-cell-cushion, html[data-theme]:not(#cp):not(#cq) body .rst-cal-add, html[data-theme]:not(#cp):not(#cq) body .sc-icon-sm { position: relative; } html[data-theme]:not(#cp):not(#cq) body .cp-day-done::after, html[data-theme]:not(#cp):not(#cq) body #reminder-icon::after, html[data-theme]:not(#cp):not(#cq) body .fc .fc-col-header-cell-cushion::after, html[data-theme]:not(#cp):not(#cq) body .rst-cal-add::after, html[data-theme]:not(#cp):not(#cq) body .sc-icon-sm::after { content: ""; position: absolute; inset: -8px; } } /* Content-Kalender: „+“ erschien nur beim Überfahren mit der Maus – auf Handy/iPad nie sichtbar */ @media (hover: none) { html[data-theme]:not(#cp):not(#cq) body .rst-cal-add { opacity: .8 !important; } } /* ============================================================================= v5.55.0 · Stempeluhr in der Topbar (time-clock.js) · Monatsbericht-PDF-Fuß ============================================================================= */ html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk-wrap { display: flex; align-items: center; margin: 0 6px 0 0; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk-wrap[hidden] { display: none !important; } .cp-clk { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 3px 0 12px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 4%, transparent); color: var(--cp-strong); font: 500 13px/1 var(--cp-font, inherit); white-space: nowrap; transition: border-color var(--cp-t), background-color var(--cp-t), opacity var(--cp-t); } .cp-clk.is-in { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-clk.is-paused { border-color: rgba(245,165,36,.42); background: rgba(245,165,36,.09); } .cp-clk.is-out { padding: 0; border: 0; background: none; } .cp-clk.is-busy { opacity: .55; pointer-events: none; } .cp-clk-t { display: inline-flex; align-items: center; gap: 8px; padding-right: 6px; font-variant-numeric: tabular-nums; cursor: default; } .cp-clk-t b { font-weight: 600; letter-spacing: .01em; } .cp-clk-t small { font-size: 11.5px; color: var(--cp-muted); font-weight: 500; } .cp-clk.is-paused .cp-clk-t { color: #F5A524; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-paused .cp-clk-t b { color: #F5A524; } .cp-clk.is-paused .cp-clk-t svg { width: 13px; height: 13px; } .cp-clk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-rust-hi); flex: none; box-shadow: 0 0 0 0 rgba(232,85,42,.55); animation: cpClkPulse 2s var(--cp-e) infinite; } @keyframes cpClkPulse { 0% { box-shadow: 0 0 0 0 rgba(232,85,42,.5); } 70% { box-shadow: 0 0 0 7px rgba(232,85,42,0); } 100% { box-shadow: 0 0 0 0 rgba(232,85,42,0); } } .cp-clk > button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cp-muted); cursor: pointer; transition: color var(--cp-t), background-color var(--cp-t); } .cp-clk > button svg { width: 13px; height: 13px; } .cp-clk > button:hover { color: var(--cp-strong); background: color-mix(in srgb, var(--cp-text) 9%, transparent); } .cp-clk > button[data-clk="stop"]:hover { color: #fff; background: var(--cp-rust-hi); } .cp-clk > button.is-go { color: #F5A524; } .cp-clk > button.is-go:hover { color: #1a1204; background: #F5A524; } .cp-clk > button:focus-visible, .cp-clk-chip:focus-visible, .cp-clk-pop button:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } .cp-clk-in { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; height: 36px !important; padding: 0 14px !important; border-radius: 999px !important; border: 1px solid var(--cp-line-2) !important; background: color-mix(in srgb, var(--cp-text) 4%, transparent) !important; color: var(--cp-strong) !important; font: 500 13px/1 var(--cp-font, inherit); } .cp-clk-in svg { width: 11px !important; height: 11px !important; color: var(--cp-rust-hi); } .cp-clk-in small { font-size: 11.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-clk-in:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } /* Handy: Chip unter der Topbar (nur eingestempelt/pausiert) */ .cp-clk-chip { position: fixed; top: calc(64px + env(safe-area-inset-top)); right: 12px; z-index: 1040; display: none; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cp-rust-line); background: color-mix(in srgb, var(--cp-surface) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--cp-strong); font: 600 12.5px/1 var(--cp-font, inherit); font-variant-numeric: tabular-nums; box-shadow: 0 8px 22px -10px rgba(0,0,0,.55); cursor: pointer; } .cp-clk-chip.is-paused { border-color: rgba(245,165,36,.45); color: #F5A524; } .cp-clk-chip svg { width: 11px; height: 11px; } .cp-clk-pop { position: fixed; z-index: 1060; padding: 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); color: var(--cp-text); box-shadow: 0 24px 48px -18px rgba(0,0,0,.6); font: 400 13px/1.45 var(--cp-font, inherit); animation: cpClkIn .18s var(--cp-e); } .cp-clk-pop[hidden] { display: none; } @keyframes cpClkIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .cp-clk-pop > b { display: block; font-weight: 600; color: var(--cp-strong); font-size: 13.5px; } .cp-clk-pop p { margin: 4px 0 10px; color: var(--cp-muted); } .cp-clk-pop p strong { color: var(--cp-strong); font-weight: 600; } .cp-clk-pop textarea { display: block; width: 100%; min-height: 58px; resize: vertical; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); color: var(--cp-text); font: inherit; } .cp-clk-pop textarea:focus { outline: none; border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-clk-pa { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .cp-clk-pa button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-clk-pa button svg { width: 12px; height: 12px; } .cp-clk-pa button:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-clk-pa button.is-primary { border-color: transparent; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; } .cp-clk-pa button.is-primary:hover { filter: brightness(1.06); } .cp-clk-pop > b + .cp-clk-pa { margin-top: 10px; } .cp-clk-pop .cp-clk-pa:only-of-type button { flex: 1; justify-content: center; } @media (max-width: 1199px) { .cp-clk-in span, .cp-clk-in small { display: none; } .cp-clk-in { width: 36px !important; padding: 0 !important; justify-content: center; } .cp-clk-t small { display: none; } } @media (max-width: 575px) { html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk-wrap { display: none !important; } .cp-clk-chip:not([hidden]) { display: inline-flex; } } @media (prefers-reduced-motion: reduce) { .cp-clk-dot { animation: none; } .cp-clk-pop { animation: none; } } @media print { .cp-clk-chip, .cp-clk-pop { display: none !important; } } /* Monatsbericht: Gültigkeit links, „PDF ansehen“ als Hauptaktion */ .cp-rep-box > footer { flex-wrap: wrap; align-items: center; } .cp-rep-valid { margin-right: auto; font-size: 11.5px; color: var(--cp-muted); } .cp-rep-box > footer button[data-rep="print"] { border-color: transparent; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; box-shadow: 0 6px 16px -8px rgba(232,85,42,.7); } .cp-rep-box > footer button[data-rep="print"]:hover { filter: brightness(1.06); background: linear-gradient(180deg, #EE6236, #D24A20); } /* Mein Tag: Anpassungswünsche zum KI-Tagesplan */ html[data-theme]:not(#cp):not(#cq) body .cp-day-adj { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-was { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-was svg { width: 14px; height: 14px; flex: none; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-box { display: flex; align-items: center; gap: 10px; min-height: 50px; margin: 0; padding: 6px 6px 6px 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); cursor: text; transition: border-color var(--cp-t), box-shadow var(--cp-t), background-color var(--cp-t); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-box:focus-within { border-color: var(--cp-rust-line); box-shadow: 0 0 0 4px var(--cp-rust-soft); background: color-mix(in srgb, var(--cp-text) 4%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-i { display: grid; place-items: center; flex: none; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-i svg { width: 17px; height: 17px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-box input { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--cp-text); font: 400 14px/1.3 var(--cp-font, inherit); outline: none; } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-box input::placeholder { color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-go { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 38px; padding: 0 15px; border-radius: 3px; border: 0; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; font: 500 13px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(232,85,42,.7); transition: opacity var(--cp-t), filter var(--cp-t), transform var(--cp-t); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-go svg { width: 15px; height: 15px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-go:hover:not(:disabled) { filter: brightness(1.07); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-go:active:not(:disabled) { transform: translateY(1px); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-go:disabled { opacity: .38; cursor: default; box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-chips button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-muted); font: 500 12.5px/1 var(--cp-font, inherit); white-space: nowrap; cursor: pointer; transition: color var(--cp-t), border-color var(--cp-t), background-color var(--cp-t); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-chips button:hover { color: var(--cp-strong); border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-go:focus-visible, html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-chips button:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } @media (max-width: 560px) { html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-go span { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-go { width: 38px; padding: 0; justify-content: center; } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -12px; padding-right: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-chips::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-box input { font-size: 16px; } /* iOS zoomt sonst beim Tippen */ } /* ============================================================================= v5.56.0 · Angemeldete Geräte (devices.js) · Berichts-Verlauf · Stempeluhr-Woche ============================================================================= */ .cp-dev { position: fixed; inset: 0; z-index: 2600; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,5,8,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; } .cp-dev.is-in { opacity: 1; } .cp-dev-box { display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 40px); border-radius: 3px; border: 1px solid var(--cp-line-2); background: radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--cp-rust-hi) 10%, transparent), transparent 60%), var(--cp-surface); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); transform: translateY(14px) scale(.985); transition: transform .3s cubic-bezier(.2,.75,.2,1); overflow: hidden; color: var(--cp-text); font-family: var(--cp-font, inherit); } .cp-dev.is-in .cp-dev-box { transform: none; } .cp-dev-box > header { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 16px; border-bottom: 1px solid var(--cp-line); } .cp-dev-hi { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); border: 1px solid var(--cp-rust-line); } .cp-dev-hi svg { width: 20px; height: 20px; } .cp-dev-box > header > div { flex: 1; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-dev-box h3 { margin: 2px 0 4px !important; font-size: 18px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--cp-strong) !important; } .cp-dev-box > header p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } .cp-dev-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } .cp-dev-x:hover { color: var(--cp-strong); } .cp-dev-x svg { width: 15px; height: 15px; } .cp-dev-list { overflow: auto; padding: 10px 12px; } .cp-dev-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 3px; } .cp-dev-row + .cp-dev-row { border-top: 1px solid var(--cp-line); border-radius: 0; } .cp-dev-row.is-current { background: var(--cp-rust-soft); border-radius: 3px; border-top-color: transparent; } .cp-dev-row.is-current + .cp-dev-row { border-top-color: transparent; } .cp-dev-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 5%, transparent); color: var(--cp-muted); } .cp-dev-row.is-current .cp-dev-ic { color: var(--cp-rust-hi); background: color-mix(in srgb, var(--cp-rust-hi) 14%, transparent); } .cp-dev-ic svg { width: 19px; height: 19px; } .cp-dev-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .cp-dev-t b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--cp-strong); } .cp-dev-t b em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--cp-rust-hi); color: #fff; } .cp-dev-t small { font-size: 12px; color: var(--cp-muted); overflow-wrap: anywhere; } .cp-dev-row.is-legacy .cp-dev-t b { font-weight: 500; } .cp-dev-out, .cp-dev-all { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; transition: border-color var(--cp-t), background-color var(--cp-t), color var(--cp-t); } .cp-dev-out:hover, .cp-dev-all:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-dev-out.is-confirm, .cp-dev-all.is-confirm { border-color: transparent; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; } .cp-dev-out.is-busy, .cp-dev-all.is-busy { opacity: .6; pointer-events: none; } .cp-dev-all svg { width: 15px; height: 15px; } .cp-dev-all[hidden] { display: none; } .cp-dev-box > footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--cp-line); } .cp-dev-msg { margin-right: auto; font-size: 12.5px; color: var(--cp-muted); } .cp-dev-empty { margin: 14px 10px; font-size: 13px; color: var(--cp-muted); } .cp-dev-sk { display: grid; gap: 10px; padding: 6px; } .cp-dev-sk i { display: block; height: 52px; border-radius: 3px; background: linear-gradient(100deg, color-mix(in srgb, var(--cp-text) 4%, transparent) 30%, color-mix(in srgb, var(--cp-text) 8%, transparent) 50%, color-mix(in srgb, var(--cp-text) 4%, transparent) 70%); background-size: 300% 100%; animation: cpDevSk 1.3s linear infinite; } @keyframes cpDevSk { from { background-position: 100% 0; } to { background-position: 0 0; } } .cp-dev-out:focus-visible, .cp-dev-all:focus-visible, .cp-dev-x:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } @media (max-width: 575px) { .cp-dev { align-items: flex-end; padding: 0; } .cp-dev-box { width: 100%; max-height: 88vh; border-radius: 3px 3px 0 0; padding-bottom: env(safe-area-inset-bottom); } .cp-dev-row { flex-wrap: wrap; } .cp-dev-out { margin-left: 52px; } .cp-dev-all { width: 100%; justify-content: center; height: 42px; } } @media (prefers-reduced-motion: reduce) { .cp-dev, .cp-dev-box { transition: none; } .cp-dev-sk i { animation: none; } } /* Kundenportal auf dem iPad (641–1199 px): Aktionen als ruhiges 2×2-Raster statt „Projekte“ allein in Zeile 2; Ansprechpartner volle Breite */ @media (min-width: 641px) and (max-width: 1199px) { html[data-theme]:not(#cp) body .cp-ph-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html[data-theme]:not(#cp) body .cp-ph-actions .cp-ph-btn { justify-content: center; height: 44px; min-width: 0; } html[data-theme]:not(#cp) body .cp-ph-contact { max-width: none; } } /* Stempeluhr: Zeit als Knopf (→ Wochenübersicht), „vergessen auszustempeln?“, Wochenbalken */ .cp-clk > button.cp-clk-t { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 100%; padding: 0 6px 0 0; border: 0; border-radius: 0; background: none; color: var(--cp-strong); font: inherit; cursor: pointer; } .cp-clk > button.cp-clk-t:hover { background: none; color: var(--cp-rust-hi); } .cp-clk > button.cp-clk-t svg { width: 13px; height: 13px; } .cp-clk.is-paused > button.cp-clk-t, html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-paused > button.cp-clk-t b { color: #F5A524; } .cp-clk.is-paused > button.cp-clk-t:hover, html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-paused > button.cp-clk-t:hover b { color: #FFC266; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-t:hover b { color: var(--cp-rust-hi); } .cp-clk.is-long { border-color: rgba(245,165,36,.5); background: rgba(245,165,36,.1); } .cp-clk.is-long .cp-clk-dot, .cp-clk-chip.is-long .cp-clk-dot { background: #F5A524; animation: none; box-shadow: 0 0 0 3px rgba(245,165,36,.25); } .cp-clk-chip.is-long { border-color: rgba(245,165,36,.5); } /* iPad/kleine Laptops (≤ 1199 px): Topbar lief mit Pause/Stopp um 4–8 px über (Profilbild abgeschnitten) → nur Punkt + Zeit, Tippen öffnet Woche + Pause/Ausstempeln */ @media (max-width: 1199px) { .cp-clk.is-in > button[data-clk="pause"], .cp-clk.is-in > button[data-clk="stop"], .cp-clk.is-paused > button[data-clk="resume"], .cp-clk.is-paused > button[data-clk="stop"] { display: none; } .cp-clk.is-in, .cp-clk.is-paused { padding: 0 12px; } .cp-clk > button.cp-clk-t { padding: 0; } } .cp-clk-chip { transition: opacity .22s var(--cp-e), transform .22s var(--cp-e); } .cp-clk-chip.is-away { opacity: 0; transform: translateY(-10px); pointer-events: none; } .cp-clk-pop .cp-clk-warn { color: #F5A524; } .cp-clk-wk { margin: 12px 0 2px; padding: 12px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 4%, transparent); } .cp-clk-wk-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-clk-wk-h b { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-clk-wk-b { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 92px; } .cp-clk-wk-b > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; } .cp-clk-wk-b em { font-style: normal; font-size: 9.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-clk-wk-b i { display: block; width: 100%; max-width: 22px; height: max(3px, calc(var(--h) * .56)); border-radius: 3px 3px 3px 3px; background: color-mix(in srgb, var(--cp-text) 22%, transparent); transition: height .4s var(--cp-e); } .cp-clk-wk-b .is-today i { background: linear-gradient(180deg, #FF7A4D, #D24A20); } .cp-clk-wk-b .is-today span, .cp-clk-wk-b .is-today em { color: var(--cp-strong); } .cp-clk-wk-b .is-future i { background: color-mix(in srgb, var(--cp-text) 8%, transparent); } .cp-clk-wk-b span { font-size: 11px; font-weight: 600; color: var(--cp-muted); } /* Monatsbericht: Verlauf früherer Berichte (Aufrufe des Kunden, Link aktiv/deaktiviert) */ .cp-rep-bar-r { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .cp-rep-hbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-rep-hbtn[hidden] { display: none; } .cp-rep-hbtn svg { width: 15px; height: 15px; margin: 0 !important; color: var(--cp-muted); } .cp-rep-hbtn em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--cp-strong); } .cp-rep-hbtn:hover, .cp-rep-hbtn.is-on { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-rep-hbtn.is-on em { background: var(--cp-rust-hi); color: #fff; } .cp-rep-hist-h { display: flex; flex-direction: column; gap: 3px; margin: 2px 2px 12px; } .cp-rep-hist-h b { font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-rep-hist-h span { font-size: 12px; color: var(--cp-muted); } .cp-rep-hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cp-rep-hist li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .cp-rep-hist-t, .cp-rep-hist-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cp-rep-hist-t b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } .cp-rep-hist-t small, .cp-rep-hist-m small { font-size: 12px; color: var(--cp-muted); } .cp-rep-hist-m small b { color: var(--cp-strong); font-weight: 600; } .cp-rep-hist-s { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; } .cp-rep-hist-s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .cp-rep-hist-s.is-on { color: #3FB27F; background: rgba(63,178,127,.12); } .cp-rep-hist-s.is-off { color: var(--cp-muted); background: color-mix(in srgb, var(--cp-text) 6%, transparent); } .cp-rep-hist-a { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .cp-rep-hist-a button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-text); font: 500 12px/1 var(--cp-font, inherit); cursor: pointer; white-space: nowrap; } .cp-rep-hist-a button svg { width: 13px; height: 13px; margin: 0 !important; } .cp-rep-hist-a button:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-rep-hist-a button.is-quiet { border-color: transparent; color: var(--cp-muted); } .cp-rep-hist-a button.is-quiet:hover { color: var(--cp-strong); } .cp-rep-hist-a button.is-warn { border-color: transparent; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; } .cp-rep-hist-a button:disabled { opacity: .5; pointer-events: none; } @media (max-width: 720px) { .cp-rep-hist li { grid-template-columns: minmax(0, 1fr); gap: 8px; } .cp-rep-hist-a { justify-content: flex-start; } .cp-rep-bar-r { width: 100%; } .cp-rep-bar-r .cp-rep-go { flex: 1; justify-content: center; } } /* ============================================================================= v5.57.0 · E-Mails als eigener Reiter: Liste + Leseansicht, Anhänge, Schreiben ============================================================================= */ html[data-theme]:not(#cp):not(#cq) body a.cp-mtab { display: inline-flex !important; align-items: center; gap: 7px; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools, html[data-theme]:not(#cp):not(#cq) body .cp-mx-contacts, html[data-theme]:not(#cp):not(#cq) body .cp-mx-side .cp-msum { flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-contacts .cp-mchip { flex: none; } html[data-theme]:not(#cp):not(#cq) body a.cp-mtab svg { flex: none; opacity: .8; } html[data-theme]:not(#cp):not(#cq) body .cp-mtab-n { font-style: normal; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body a.cp-mtab.active .cp-mtab-n { background: var(--cp-rust-hi); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-mx { border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface); overflow: hidden; box-shadow: var(--cp-shadow, none); } html[data-theme]:not(#cp):not(#cq) body .cp-mx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-mx-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-title h3 { margin: 0 !important; font: 600 16px/1.2 var(--cp-font) !important; letter-spacing: -.005em !important; text-transform: none !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-acts { display: flex; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); cursor: pointer; white-space: nowrap; transition: border-color var(--cp-t), background-color var(--cp-t), color var(--cp-t), opacity var(--cp-t); } html[data-theme]:not(#cp):not(#cq) body .cp-mx-btn:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-mx-btn.is-primary { border-color: transparent; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; box-shadow: 0 6px 16px -8px rgba(232,85,42,.7); } html[data-theme]:not(#cp):not(#cq) body .cp-mx-btn.is-primary:hover { filter: brightness(1.06); } html[data-theme]:not(#cp):not(#cq) body .cp-mx-btn.is-busy { opacity: .6; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-btn.is-busy svg { animation: cpSpin .9s linear infinite; } @keyframes cpSpin { to { transform: rotate(360deg); } } html[data-theme]:not(#cp):not(#cq) body .cp-mx-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); min-height: 520px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-msearch { flex: 1 1 100%; min-width: 0; height: 36px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg { width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg button em { font-style: normal; font-size: 10.5px; color: var(--cp-dim); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg button.active em { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-mx-contacts { display: flex; gap: 6px; padding: 0 14px 10px; overflow-x: auto; scrollbar-width: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-contacts::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-contacts[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-side .cp-msum { padding: 8px 16px; border-top: 1px solid var(--cp-line); font-size: 11.5px; gap: 4px 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 12px !important; overscroll-behavior: contain; scrollbar-width: thin; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-list .cp-mconv { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 10px 10px 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-list .cp-mconv .cp-mav { width: 34px; height: 34px; font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-list .cp-mconv-snip { -webkit-line-clamp: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-list .cp-mconv + .cp-mconv::before { left: 52px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-list button.cp-mconv.is-sel { background: var(--cp-rust-soft) !important; box-shadow: inset 3px 0 0 var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-list .cp-mconv.is-sel::before, html[data-theme]:not(#cp):not(#cq) body .cp-mx-list .cp-mconv.is-sel + .cp-mconv::before { opacity: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-mconv-tags { display: flex; gap: 6px; margin-top: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-mclip { display: inline-grid; place-items: center; margin-right: 5px; color: var(--cp-muted); font-style: normal; vertical-align: -1px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-head .cp-mclip { margin: 0; } /* Leseansicht rechts */ html[data-theme]:not(#cp):not(#cq) body .cp-mx-read { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: color-mix(in srgb, var(--cp-text) 1.5%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-mx-read > .cp-md-head { padding: 14px 18px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-read > .cp-md-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-md-foot:has(.cp-mcomp-slot:empty) { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-read > .cp-md-foot, html[data-theme]:not(#cp):not(#cq) body .cp-mdrawer-panel > .cp-md-foot { max-height: 70%; overflow-y: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-md-btn { display: inline-flex; align-items: center; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-btn.is-primary { border-color: transparent; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-md-btn.is-primary:hover { filter: brightness(1.06); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-md-btn[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-md-title span svg { vertical-align: -2px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-back { margin-right: -4px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-back:hover { transform: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 40px 24px; text-align: center; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-mx-empty b { color: var(--cp-strong); font-weight: 500; font-size: 15px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-empty small { max-width: 380px; color: var(--cp-dim); font-size: 12.5px; line-height: 1.55; margin-bottom: 8px; } /* Anhänge */ html[data-theme]:not(#cp):not(#cq) body .cp-matt { margin-top: 12px; padding: 12px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface); } html[data-theme]:not(#cp):not(#cq) body .cp-matt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-matt-h > span { flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-all { border: 0; background: none; color: var(--cp-rust-hi); font: 600 12px/1 var(--cp-font); cursor: pointer; padding: 4px 0; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-sig { border: 0; background: none; color: var(--cp-muted); font: 500 11.5px/1 var(--cp-font); cursor: pointer; padding: 4px 0; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-sig:hover { color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-matt-i.is-sig { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-matt.show-sig .cp-matt-i.is-sig { display: flex; } html[data-theme]:not(#cp):not(#cq) body .cp-matt.is-sigonly { padding: 8px 12px; background: none; border-style: dashed; } html[data-theme]:not(#cp):not(#cq) body .cp-matt.is-sigonly:not(.show-sig) .cp-matt-h { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-matt.is-sigonly:not(.show-sig) .cp-matt-list { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-all:hover { text-decoration: underline; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-i { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--cp-line-2); border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); overflow: hidden; transition: border-color var(--cp-t), background-color var(--cp-t); } html[data-theme]:not(#cp):not(#cq) body .cp-matt-i:hover { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-matt-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-main:hover { background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-matt-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-matt-ic.is-pdf { background: rgba(229,72,77,.14); color: #F0676B; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-ic.is-img { background: rgba(94,160,255,.14); color: #7DB2FF; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-ic.is-sheet { background: rgba(63,185,132,.14); color: #4FC692; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-ic.is-zip { background: rgba(245,165,36,.14); color: #F5A524; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 12.5px; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-matt-t small { font-size: 11px; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-matt-dl { flex: none; width: 40px; display: grid; place-items: center; border: 0; border-left: 1px solid var(--cp-line); background: none; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-dl:hover { color: var(--cp-rust-hi); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-matt .is-busy { opacity: .55; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-main:focus-visible, html[data-theme]:not(#cp):not(#cq) body .cp-matt-dl:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: -2px; } /* Vorschau (Bild/PDF) */ .cp-mview { position: fixed; inset: 0; z-index: 2700; display: flex; flex-direction: column; background: rgba(4,5,8,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s ease; } .cp-mview.is-on { opacity: 1; } .cp-mview-bar { display: flex; align-items: center; gap: 10px; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); color: #F6F6F4; } .cp-mview-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cp-mview-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1.3 var(--cp-font, inherit); } .cp-mview-t small { font-size: 11.5px; color: #9BA2AA; } .cp-mview-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 16px 16px; } .cp-mview-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.8); background: #fff; } .cp-mview-body iframe { width: min(1000px, 100%); height: 100%; border: 0; border-radius: 3px; background: #fff; } .cp-mview .cp-md-x { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: transparent; color: #F6F6F4; cursor: pointer; } .cp-mview .cp-md-x:hover { background: rgba(255,255,255,.08); } .cp-mview-nav { display: inline-flex; align-items: center; gap: 8px; } .cp-mview-nav em { font-style: normal; min-width: 48px; text-align: center; font-size: 12.5px; color: #B9BCC4; font-variant-numeric: tabular-nums; } .cp-mview-next svg { transform: rotate(180deg); } .cp-mview-err { color: #B9BCC4; } .cp-mview .cp-mskel { width: min(600px, 80vw); } @media (max-width: 575px) { .cp-mview-bar { flex-wrap: wrap; } .cp-mview-t { flex-basis: calc(100% - 50px); } .cp-mview-nav { margin-right: auto; } .cp-mview .cp-mx-btn span { display: none; } } /* Schreiben / Antworten */ html[data-theme]:not(#cp):not(#cq) body .cp-md-body.is-compose { padding: 16px 18px; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp { position: relative; display: flex; flex-direction: column; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface); overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-warn { padding: 10px 14px; font-size: 12.5px; color: var(--cp-warning); background: rgba(245,165,36,.08); border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-row { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-row[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-row label { flex: none; width: 54px; margin: 0; font-size: 12px; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-row input { flex: 1; min-width: 0; height: 42px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--cp-strong); font: 400 13.5px/1 var(--cp-font); outline: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-cct { flex: none; border: 0; background: none; color: var(--cp-muted); font: 600 12px/1 var(--cp-font); cursor: pointer; padding: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-cct:hover { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-tb { display: flex; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-tb button { width: 32px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font-size: 13.5px; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-tb button:hover { background: var(--cp-hover); color: var(--cp-strong); } /* v5.163.0: Link einfügen – kleine Zeile unter der Werkzeugleiste statt window.prompt() */ html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--cp-line); color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-link input { flex: 1; min-width: 160px; height: 30px; padding: 0 8px !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; background: var(--cp-surface-2) !important; box-shadow: none !important; color: var(--cp-strong); font: 400 13px/1 var(--cp-font); outline: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-link input:focus { border-color: var(--cp-rust, #E8552A) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-link-ok { height: 30px; padding: 0 12px; border: 0; border-radius: 3px; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; font: 600 12.5px/1 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-link-x { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-link-x:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-link-err { flex-basis: 100%; color: var(--cp-danger); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-link-err[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-ed { min-height: 180px; max-height: 46vh; overflow-y: auto; padding: 14px 16px; color: var(--cp-text); font: 400 14px/1.6 var(--cp-font); outline: none; overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp.is-reply .cp-mcomp-ed { min-height: 120px; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-ed:empty::before { content: attr(data-ph); color: var(--cp-dim); pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-ed a { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-q { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 16px 10px; font-size: 12px; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-q input { accent-color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-files:not(:empty) { padding-bottom: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-file { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 4px 4px 5px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-file .cp-matt-ic { width: 26px; height: 26px; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-file b { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-file small { color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-file button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-file button:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-tot { font-size: 11.5px; color: var(--cp-dim); margin-left: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-tot.is-bad { color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-drop { position: absolute; inset: 6px; z-index: 3; display: none; place-content: center; justify-items: center; gap: 8px; border: 2px dashed var(--cp-rust-hi); border-radius: 3px; background: color-mix(in srgb, var(--cp-surface) 88%, var(--cp-rust-hi)); color: var(--cp-rust-hi); font: 600 13px/1 var(--cp-font); pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp.is-drag .cp-mcomp-drop { display: grid; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-st { flex: 1; min-width: 0; font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-att, html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-cancel { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-cancel { border-color: transparent; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-att:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-cancel:hover { color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-cancel.is-warn { background: rgba(229,72,77,.12); color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-send { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border: 0; border-radius: 3px; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; font: 600 13px/1 var(--cp-font); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(232,85,42,.7); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-send:hover { filter: brightness(1.06); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-send:disabled { opacity: .55; cursor: default; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp.is-busy .cp-mcomp-send svg { animation: cpSpin .9s linear infinite; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp :is(button, input):focus-visible, html[data-theme]:not(#cp):not(#cq) body .cp-mx-btn:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } /* iPad hoch & Handy: nur Liste; Unterhaltung/Schreiben als Blatt */ @media (max-width: 991px) { html[data-theme]:not(#cp):not(#cq) body .cp-mx-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; height: auto !important; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-side { border-right: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-read { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-list { overflow: visible; } html[data-theme]:not(#cp):not(#cq) body .cp-mdrawer-panel { width: 100%; } } @media (max-width: 575px) { html[data-theme]:not(#cp):not(#cq) body .cp-mx { border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-head { padding: 12px 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-acts { width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-acts .cp-mx-btn { flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-md-head { flex-wrap: wrap; padding: 12px 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-acts { width: 100%; justify-content: flex-end; } html[data-theme]:not(#cp):not(#cq) body .cp-md-body { padding: 10px 10px 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-matt-list { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-row input, html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-ed { font-size: 16px; } /* iOS zoomt sonst */ html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-foot { flex-wrap: wrap; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-st { order: -1; flex-basis: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-send { margin-left: auto; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp):not(#cq) body .cp-mx-btn.is-busy svg, html[data-theme]:not(#cp):not(#cq) body .cp-mcomp.is-busy .cp-mcomp-send svg { animation: none; } } /* ============================================================================= v5.58.0 · E-Mail-Feinschliff · Zeit zuordnen (Stempeluhr) · Projekt-Dateien ============================================================================= */ /* E-Mails: weniger Abstand über der Karte, einheitliche Filterleiste */ html[data-theme]:not(#cp):not(#cq) body #cp-client-mails > .cp-mx { margin-top: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg button { min-width: 0; padding: 7px 8px; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg button[data-mf="att"] { padding: 7px 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg button svg { flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg button em { min-width: 16px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); line-height: 16px; text-align: center; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg button em.is-zero { opacity: .45; } html[data-theme]:not(#cp):not(#cq) body .cp-mx-tools .cp-mseg button.active em { background: var(--cp-rust-soft); } /* Nachrichtenkopf zweizeilig: Absender + Adresse / Empfänger + Status; rechts Anhang, Zeit, Aktionen */ html[data-theme]:not(#cp):not(#cq) body .cp-msg-head { align-items: center; gap: 12px; padding: 12px 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-head .cp-mav { width: 36px; height: 36px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-who { display: flex; flex-direction: column; gap: 3px; white-space: normal; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-l1 b { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-l1 .cp-msg-addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--cp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-l2:empty { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-side { flex: none; display: flex; align-items: center; gap: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-side time { font-size: 12px; color: var(--cp-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-side .cp-mclip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-side .cp-mclip em { font-style: normal; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-acts { display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--cp-t); } html[data-theme]:not(#cp):not(#cq) body .cp-msg:hover .cp-msg-acts, html[data-theme]:not(#cp):not(#cq) body .cp-msg.is-open .cp-msg-acts, html[data-theme]:not(#cp):not(#cq) body .cp-msg-acts:focus-within { opacity: 1; } @media (hover: none) { html[data-theme]:not(#cp):not(#cq) body .cp-msg-acts { opacity: 1; } } html[data-theme]:not(#cp):not(#cq) body .cp-msg-act { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-act:hover { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-msg-snip { padding-left: 62px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-btn.cp-md-icon.is-on { color: var(--cp-rust-hi); border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-md-head { align-items: center; } html[data-theme]:not(#cp):not(#cq) body .cp-md-title span { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } /* Schreiben: Modus-Zeile, Originalanhänge beim Weiterleiten */ html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-mode { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--cp-line); font-size: 12px; font-weight: 600; color: var(--cp-rust-hi); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-fwd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-fwd > small { flex-basis: 100%; font-size: 11.5px; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-file.is-fwd { border-style: dashed; } @media (max-width: 575px) { html[data-theme]:not(#cp):not(#cq) body .cp-msg-head { flex-wrap: wrap; row-gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-who { flex: 1 1 calc(100% - 48px); } html[data-theme]:not(#cp):not(#cq) body .cp-msg-side { width: 100%; justify-content: flex-end; padding-left: 48px; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-snip { padding-left: 14px; } } /* Stempeluhr: offene Zeit zuordnen */ .cp-clk-alloc { display: inline-flex !important; align-items: center; gap: 6px; position: relative; height: 36px; margin-left: 6px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(245,165,36,.45) !important; background: rgba(245,165,36,.1) !important; color: #F5A524 !important; font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-clk-alloc svg { width: 14px; height: 14px; } .cp-clk-alloc i { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #F5A524; box-shadow: 0 0 0 2px var(--cp-bg, #06070A); } .cp-clk-alloc:hover { background: rgba(245,165,36,.18) !important; } @media (max-width: 1199px) { .cp-clk-alloc span { display: none; } .cp-clk-alloc { width: 36px; padding: 0; justify-content: center; } } .cp-clk-pop .cp-clk-ua { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: 3px; background: rgba(245,165,36,.1); color: #F5A524; font-size: 12px; } .cp-clk-pop .cp-clk-ua button { border: 0; background: none; color: #F5A524; font: 700 12px/1 var(--cp-font, inherit); cursor: pointer; text-decoration: underline; } .cp-alloc { position: fixed; inset: 0; z-index: 2650; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,5,8,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; } .cp-alloc.is-in { opacity: 1; } .cp-alloc-box { display: flex; flex-direction: column; width: min(600px, 100%); max-height: calc(100vh - 40px); border-radius: 3px; border: 1px solid var(--cp-line-2); background: radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--cp-rust-hi) 10%, transparent), transparent 60%), var(--cp-surface); color: var(--cp-text); font-family: var(--cp-font, inherit); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); transform: translateY(14px) scale(.985); transition: transform .3s cubic-bezier(.2,.75,.2,1); overflow: hidden; } .cp-alloc.is-in .cp-alloc-box { transform: none; } .cp-alloc-box > header { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 14px; border-bottom: 1px solid var(--cp-line); } .cp-alloc-hi { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); border: 1px solid var(--cp-rust-line); } .cp-alloc-hi svg { width: 20px; height: 20px; } .cp-alloc-box > header > div { flex: 1; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-box h3 { margin: 2px 0 4px !important; font-size: 18px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--cp-strong) !important; } .cp-alloc-box > header p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } .cp-alloc-box > header p b { color: var(--cp-strong); font-weight: 600; } .cp-alloc-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--cp-line-2); border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } .cp-alloc-x svg { width: 15px; height: 15px; } .cp-alloc-body { overflow-y: auto; padding: 14px 20px 6px; display: flex; flex-direction: column; gap: 12px; } .cp-alloc-search { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); color: var(--cp-dim); } .cp-alloc-search:focus-within { border-color: var(--cp-rust-line); box-shadow: 0 0 0 4px var(--cp-rust-soft); } .cp-alloc-search svg { width: 17px; height: 17px; flex: none; } .cp-alloc-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--cp-strong); font: 400 14px/1 var(--cp-font, inherit); outline: none; padding: 0 !important; } .cp-alloc-res { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; margin-top: -6px; padding: 6px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); } .cp-alloc-res[hidden] { display: none; } .cp-alloc-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 3px; background: none; color: inherit; text-align: left; cursor: pointer; } .cp-alloc-opt:hover, .cp-alloc-opt:focus-visible { background: var(--cp-rust-soft); outline: none; } .cp-alloc-oi { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-muted); } .cp-alloc-oi svg { width: 16px; height: 16px; } .cp-alloc-oi.is-project { background: rgba(94,160,255,.12); color: #7DB2FF; } .cp-alloc-oi.is-client { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-alloc-oi.is-internal { background: rgba(63,185,132,.12); color: #4FC692; } .cp-alloc-ot { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .cp-alloc-ot b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13.5px; color: var(--cp-strong); } .cp-alloc-ot small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--cp-dim); } .cp-alloc-quick { display: flex; flex-wrap: wrap; gap: 6px; } .cp-alloc-quick:empty { display: none; } .cp-alloc-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; max-width: 100%; } .cp-alloc-chip svg { width: 14px; height: 14px; flex: none; color: var(--cp-muted); } .cp-alloc-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; } .cp-alloc-chip:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-alloc-sel { display: flex; flex-direction: column; gap: 8px; } .cp-alloc-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(90px, 150px) auto auto 30px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .cp-alloc-row:not(:has(input[type=range])) { grid-template-columns: 32px minmax(0, 1fr) auto auto 30px; } .cp-alloc-row input[type=range] { width: 100%; accent-color: var(--cp-rust-hi); } .cp-alloc-pct { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--cp-muted); } .cp-alloc-pct input { width: 46px; height: 30px; padding: 0 4px !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; background: transparent !important; color: var(--cp-strong) !important; text-align: right; font: 600 13px/1 var(--cp-font, inherit); } .cp-alloc-pct.is-full { font-weight: 600; color: var(--cp-strong); } .cp-alloc-h { font-size: 12.5px; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-alloc-rm { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } .cp-alloc-rm svg { width: 14px; height: 14px; } .cp-alloc-rm:hover { background: var(--cp-hover); color: var(--cp-strong); } .cp-alloc-even { align-self: flex-start; border: 0; background: none; color: var(--cp-rust-hi); font: 600 12px/1 var(--cp-font, inherit); cursor: pointer; padding: 4px 2px; } .cp-alloc-empty { margin: 0; padding: 12px; border: 1px dashed var(--cp-line-2); border-radius: 3px; font-size: 12.5px; color: var(--cp-dim); text-align: center; } .cp-alloc-ts { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--cp-muted); cursor: pointer; } .cp-alloc-ts[hidden] { display: none; } .cp-alloc-ts input { accent-color: var(--cp-rust-hi); } .cp-alloc-ts b { color: var(--cp-strong); font-weight: 600; } .cp-alloc-body textarea { width: 100%; min-height: 54px; resize: vertical; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); color: var(--cp-text); font: 400 13px/1.45 var(--cp-font, inherit); margin-bottom: 8px; } .cp-alloc-body textarea:focus { outline: none; border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-alloc-box > footer { display: flex; align-items: center; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--cp-line); } .cp-alloc-st { flex: 1; min-width: 0; font-size: 12px; color: var(--cp-muted); } .cp-alloc-later { height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--cp-muted); font: 500 13px/1 var(--cp-font, inherit); cursor: pointer; } .cp-alloc-later:hover { color: var(--cp-strong); } .cp-alloc-go { height: 40px; padding: 0 18px; border: 0; border-radius: 3px; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(232,85,42,.7); } .cp-alloc-go:disabled { opacity: .45; cursor: default; box-shadow: none; } .cp-alloc :is(button, input, textarea):focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } @media (max-width: 575px) { .cp-alloc { align-items: flex-end; padding: 0; } .cp-alloc-box { width: 100%; max-height: 92vh; border-radius: 3px 3px 0 0; padding-bottom: env(safe-area-inset-bottom); } .cp-alloc-row, .cp-alloc-row:not(:has(input[type=range])) { grid-template-columns: 32px minmax(0, 1fr) auto 30px; } .cp-alloc-row input[type=range] { grid-column: 1 / -1; grid-row: 2; } .cp-alloc-row .cp-alloc-h { display: none; } .cp-alloc-search input { font-size: 16px; } } /* Reiterleisten (Kunde, Projekt …): Beschriftungen nie zweizeilig – die Leiste scrollt seitlich */ html[data-theme]:not(#cp):not(#cq) body .nav-tabs.scrollable-tabs > li > a { white-space: nowrap !important; } /* Projekt → Dateien: eine Karte statt Karte in Karte, Reiter auf einer Linie, Anzahl, leerer Zustand, Ablegen */ html[data-theme]:not(#cp):not(#cq) body .cp-pf { position: relative; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; padding: 6px 12px 0 !important; border-radius: 3px 3px 0 0 !important; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs > li.title-tab h4 { display: inline-flex; align-items: center; gap: 10px; margin: 0 !important; padding: 0 16px 0 6px !important; line-height: 46px; font-size: 16px !important; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs > li > a.nav-link { display: flex !important; align-items: center; height: 46px; padding: 0 14px !important; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs { overflow: visible !important; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs .tab-title { order: 99; margin: 0 0 0 auto !important; padding: 6px 0 !important; float: none !important; position: static !important; width: auto !important; border: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs .title-button-group { float: none !important; position: static !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs .title-button-group > .hide { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pf-n { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-pf-n[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs + .tab-content { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs + .tab-content > .tab-pane > .card { margin: 0 !important; border-top: 0 !important; border-radius: 0 0 3px 3px !important; } html[data-theme]:not(#cp):not(#cq) body td.cp-pf-emptycell { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body td.cp-pf-emptycell::before, html[data-theme]:not(#cp):not(#cq) body td.cp-pf-emptycell::after { display: none !important; content: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pf-empty { display: grid; justify-items: center; gap: 8px; margin: 18px; padding: 36px 20px; border: 1.5px dashed var(--cp-line-2); border-radius: 3px; text-align: center; color: var(--cp-muted); text-transform: none; letter-spacing: normal; font-size: 13px; transition: border-color var(--cp-t), background-color var(--cp-t); } html[data-theme]:not(#cp):not(#cq) body .cp-pf-empty b { color: var(--cp-strong); font-weight: 500; font-size: 15px; } html[data-theme]:not(#cp):not(#cq) body .cp-pf-empty > span:not(.cp-pf-empty-ic) { max-width: 420px; color: var(--cp-dim); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pf-empty.is-small { padding: 22px 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-pf-empty-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); margin-bottom: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-pf-add { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-top: 6px; padding: 0 16px; border: 0; border-radius: 3px; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(232,85,42,.7); } html[data-theme]:not(#cp):not(#cq) body .cp-pf-drop { position: absolute; inset: 0; z-index: 5; display: none; place-content: center; justify-items: center; gap: 8px; border: 2px dashed var(--cp-rust-hi); border-radius: 3px; background: color-mix(in srgb, var(--cp-surface) 90%, var(--cp-rust-hi)); color: var(--cp-rust-hi); text-align: center; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pf-drop b { font-size: 16px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pf-drop span { max-width: 380px; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-pf.is-drag .cp-pf-drop { display: grid; } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body #project-files-tabs { padding: 4px 8px 0 !important; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs .tab-title { width: 100%; margin: 0; padding: 0 0 8px !important; } html[data-theme]:not(#cp):not(#cq) body #project-files-tabs > li > a.nav-link { height: 42px; padding: 0 10px !important; } } /* ============================================================================ * v5.59.0 · Stempeluhr „Zuordnen“ · E-Mail-Knopfgruppe · Projekt-Unterseiten * ========================================================================== */ /* Zuordnen-Knopf: erbte die 30-px-Rundknopf-Regel der Uhr (Text lief über, Symbol 0 px) */ html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-alloc { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto !important; min-width: 36px; height: 36px !important; margin: 0 0 0 8px; padding: 0 13px 0 11px !important; overflow: visible; border-radius: var(--cp-r, 3px) !important; border: 1px solid rgba(245,165,36,.42) !important; background: rgba(245,165,36,.08) !important; color: #F5A524 !important; font: 500 13px/1 var(--cp-font, inherit) !important; white-space: nowrap; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-alloc:hover { border-color: rgba(245,165,36,.7) !important; background: rgba(245,165,36,.16) !important; color: #FFC266 !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-alloc svg { display: block; flex: none; width: 15px !important; height: 15px !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-alloc span { color: inherit !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-alloc > i { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: #F5A524; box-shadow: 0 0 0 2px var(--cp-bg, #06070A); animation: cpAllocPing 2.6s var(--cp-e, ease-out) infinite; } @keyframes cpAllocPing { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.25); } } @media (max-width: 1199px) { html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-alloc { width: 36px !important; padding: 0 !important; margin-left: 6px; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-alloc span { display: none; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-alloc > i { animation: none; } } /* E-Mail-Leseansicht: „Antworten ▾“ als Split-Knopf, Ansicht-Werkzeuge als eine Leiste, Symbole mittig */ html[data-theme]:not(#cp):not(#cq) body .cp-md-head { position: relative; z-index: 6; } /* Menü „Antworten ▾“ über dem Mail-Inhalt */ html[data-theme]:not(#cp):not(#cq) body .cp-md-acts { gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-btn { height: 34px; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-btn.cp-md-icon { display: inline-grid; place-items: center; gap: 0; width: 34px; padding: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-md-btn svg { display: block; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-md-split { position: relative; display: inline-flex; border-radius: 3px; box-shadow: 0 6px 16px -10px rgba(210,74,32,.8); } html[data-theme]:not(#cp):not(#cq) body .cp-md-split[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-md-split > .cp-md-btn.is-primary { font-size: 12.5px; font-weight: 600; gap: 7px; padding: 0 13px 0 12px; border-radius: 3px 0 0 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-split > .cp-md-btn.cp-md-caret { width: 30px; padding: 0; justify-content: center; border-radius: 0 3px 3px 0; box-shadow: inset 1px 0 0 rgba(255,255,255,.24); } html[data-theme]:not(#cp):not(#cq) body .cp-md-split > .cp-md-caret svg { transition: transform var(--cp-dur-s, .18s) var(--cp-e, ease); } html[data-theme]:not(#cp):not(#cq) body .cp-md-split > .cp-md-caret[aria-expanded="true"] svg { transform: rotate(180deg); } html[data-theme]:not(#cp):not(#cq) body .cp-md-tools { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--cp-line); border-radius: 3px; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-md-tools:empty { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-md-tools > .cp-md-btn { width: 34px; height: 32px; border: 0; border-radius: 0; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-md-tools > .cp-md-btn + .cp-md-btn { box-shadow: inset 1px 0 0 var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-md-tools > .cp-md-btn:hover, html[data-theme]:not(#cp):not(#cq) body .cp-md-tools > .cp-md-btn.is-on, html[data-theme]:not(#cp):not(#cq) body .cp-md-tools > .cp-md-btn[aria-pressed="true"] { color: var(--cp-strong); background: var(--cp-hover); } html[data-theme]:not(#cp):not(#cq) body .cp-md-tools > .cp-md-btn.is-on { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-md-acts .cp-md-x { width: 34px; height: 34px; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-acts .cp-md-x:hover { transform: none; background: var(--cp-hover); } html[data-theme]:not(#cp):not(#cq) body .cp-md-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 236px; padding: 6px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2, #161A23) !important; box-shadow: 0 22px 44px -18px rgba(0,0,0,.7); animation: cpClkIn .16s var(--cp-e, ease); } html[data-theme]:not(#cp):not(#cq) body .cp-md-menu[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-md-menu button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 7px 10px; border: 0; border-radius: 3px; background: none; color: var(--cp-text); font: 500 13px/1.2 var(--cp-font, inherit); text-align: left; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-md-menu button:hover, html[data-theme]:not(#cp):not(#cq) body .cp-md-menu button:focus-visible { outline: none; background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-md-menu button svg { flex: none; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-md-menu button span { display: flex; flex-direction: column; gap: 3px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-md-menu button small { overflow: hidden; max-width: 190px; color: var(--cp-muted); font-size: 11.5px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; } html[data-theme="light"]:not(#cp):not(#cq) body .cp-md-menu { background: #fff !important; } @media (max-width: 575px) { html[data-theme]:not(#cp):not(#cq) body .cp-md-split { flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-md-split > .cp-md-btn.is-primary:first-child { flex: 1; justify-content: center; height: 40px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-split > .cp-md-btn.cp-md-caret { width: 40px; height: 40px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-tools { height: 40px; } html[data-theme]:not(#cp):not(#cq) body .cp-md-tools > .cp-md-btn { width: 40px; height: 38px; } } /* „Neue E-Mail“ aus der Topbar: Kundenauswahl im Schreibfenster */ html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-sel { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-sel select { flex: 1; min-width: 0; height: 42px; padding: 0 26px 0 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--cp-strong); font: 400 13.5px/1 var(--cp-font); outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-sel select option { background: var(--cp-surface-2); color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-sel svg { position: absolute; right: 2px; pointer-events: none; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-row:focus-within { background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } @media (max-width: 575px) { html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-sel select { font-size: 16px; } } /* --------------------------------------------------------------------------- v5.59.0 · Projekt-Unterseiten (project-view.js): Kopf, Reiter mit „Mehr“, Überblick, leere Listen --------------------------------------------------------------------------- */ /* Kopfzeile unter dem Projekttitel */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 0 2px; font: 400 13px/1.3 var(--cp-font, inherit); color: var(--cp-muted); letter-spacing: 0; text-transform: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta .cp-pv-m { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--cp-muted); text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta .cp-pv-m > svg { flex: none; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta a.cp-pv-m:hover { color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta a.cp-pv-m:hover > svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta .cp-pv-m > span { overflow: hidden; max-width: 280px; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta em { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-text); font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta em.is-soon { background: rgba(224,165,58,.14); color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta em.is-late { background: rgba(229,72,77,.14); color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-st { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--cp-line-2); color: var(--cp-strong); font-size: 12px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-rust-hi); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-st.is-done i { background: var(--cp-success); box-shadow: 0 0 0 3px rgba(63,185,132,.16); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-st.is-hold i { background: var(--cp-warning); box-shadow: 0 0 0 3px rgba(224,165,58,.16); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-st.is-cancel i { background: var(--cp-dim); box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-prog b { position: relative; display: block; width: 72px; height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 12%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-prog b > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #D24A20, #FF7A4D); transition: width .5s var(--cp-e, ease); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-prog > span { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } /* Kopf als Flex: Titel + Meta-Zeile links untereinander, Knöpfe rechts (RISE lässt h1 float:left fließen → Meta rutschte daneben) */ html[data-theme]:not(#cp):not(#cq) body .project-title-section .page-title { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; } html[data-theme]:not(#cp):not(#cq) body .project-title-section .page-title::before, html[data-theme]:not(#cp):not(#cq) body .project-title-section .page-title::after { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .project-title-section .page-title > div:first-child { flex: 1 1 420px; min-width: 0; padding: 16px 0 14px; } html[data-theme]:not(#cp):not(#cq) body .project-title-section .page-title > div:first-child > h1 { float: none !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .project-title-section .project-title-button-group-section { flex: none; margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body .project-title-section .project-title-button-group-section .title-button-group { float: none !important; margin-right: 0 !important; } /* Reiterleiste (Nutzerwunsch): alle Reiter in einer Zeile, per Wischen erreichbar; Verlauf am Rand, wenn es weitergeht, Pfeile nur mit Maus; Anzahl-Pillen ohne die Zeile zu verschieben */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-tabwrap { position: relative; margin-bottom: 20px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-tabwrap > #project-tabs { margin-bottom: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #project-tabs.cp-pv-swipe { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } html[data-theme]:not(#cp):not(#cq) body #project-tabs.cp-pv-swipe::-webkit-scrollbar { display: none; } html[data-theme]:not(#cp):not(#cq) body #project-tabs.cp-pv-swipe > li { flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-tabwrap::before, html[data-theme]:not(#cp):not(#cq) body .cp-pv-tabwrap::after { content: ""; position: absolute; top: 1px; bottom: 1px; z-index: 3; width: 64px; opacity: 0; pointer-events: none; transition: opacity .2s var(--cp-e, ease); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-tabwrap::before { left: 1px; border-radius: var(--cp-r) 0 0 var(--cp-r); background: linear-gradient(90deg, var(--cp-surface) 25%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-tabwrap::after { right: 1px; border-radius: 0 var(--cp-r) var(--cp-r) 0; background: linear-gradient(270deg, var(--cp-surface) 25%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-tabwrap.is-l::before, html[data-theme]:not(#cp):not(#cq) body .cp-pv-tabwrap.is-r::after { opacity: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-arrow { position: absolute; top: 50%; z-index: 4; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; transform: translateY(-50%); border: 1px solid var(--cp-line-2) !important; border-radius: 50%; background: var(--cp-surface-2) !important; color: var(--cp-text) !important; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6) !important; opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .2s var(--cp-e, ease), color .15s, border-color .15s; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-arrow.is-l { left: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-arrow.is-r { right: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-arrow:hover { border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-tabwrap.is-l > .cp-pv-arrow.is-l, html[data-theme]:not(#cp):not(#cq) body .cp-pv-tabwrap.is-r > .cp-pv-arrow.is-r { opacity: 1; pointer-events: auto; } html[data-theme]:not(#cp):not(#cq) body #project-tabs .cp-pv-n { display: inline-block; min-width: 18px; height: 18px; margin: -4px 0 -4px 7px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); color: var(--cp-text); font: 600 10.5px/18px var(--cp-font, inherit); letter-spacing: 0; text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body #project-tabs a.active .cp-pv-n { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } /* Überblick: Kennzahlen */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .cp-pv-hide { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k > div { display: grid; gap: 3px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k small { color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k b { overflow: hidden; color: var(--cp-strong); font-size: 22px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } @container cpproj (max-width: 760px) { html[data-theme]:not(#cp):not(#cq) body .cp-pv-k b { font-size: 19px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k { padding: 14px 15px; gap: 12px; } } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k span { overflow: hidden; color: var(--cp-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k em { font-style: normal; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k em.is-late { color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k em.is-live { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ki { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k.is-warn .cp-pv-ki { background: rgba(229,72,77,.12); color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ring { flex: none; transform: rotate(-90deg); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ring circle { fill: none; stroke: color-mix(in srgb, var(--cp-text) 12%, transparent); stroke-width: 5; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ring circle.is-v { stroke: var(--cp-rust-hi); stroke-linecap: round; transition: stroke-dashoffset .8s var(--cp-e, ease); } /* Überblick: „Als Nächstes“ */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-next .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-next .card-body { padding: 6px 8px 8px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0 !important; border-radius: 3px; background: none !important; color: var(--cp-muted) !important; font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-link:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-tasks { margin: 0; padding: 0; list-style: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-task { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 10px; border-radius: 3px; color: var(--cp-text) !important; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-task:hover { background: var(--cp-hover); color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-task > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-tt { flex: 1; min-width: 0; overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-due { flex: none; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-due.is-late { background: rgba(229,72,77,.13); color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-due.is-soon { background: rgba(224,165,58,.14); color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-due.is-none { background: none; color: var(--cp-dim); font-weight: 500; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--cp-rust-hi) 18%, var(--cp-surface-2)); color: var(--cp-strong); font-size: 10.5px; font-weight: 700; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-av.is-none { background: transparent; border: 1px dashed var(--cp-line-2); color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ms { display: flex; align-items: center; gap: 12px; margin: 4px 2px 6px; padding: 12px 12px; border-radius: 3px; background: linear-gradient(120deg, var(--cp-rust-soft), transparent 80%); border: 1px solid var(--cp-rust-line); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ms > div { display: grid; gap: 3px; flex: 1; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ms small { color: var(--cp-muted); font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ms b { overflow: hidden; color: var(--cp-strong); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-msp { flex: none; position: relative; width: 64px; height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 12%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-msp i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-foot { display: flex; justify-content: flex-start; padding: 6px 6px 2px; border-top: 1px solid var(--cp-line); margin-top: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-add { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px solid var(--cp-line-2) !important; border-radius: 3px; background: transparent !important; color: var(--cp-text) !important; font: 500 12.5px/1 var(--cp-font, inherit); text-decoration: none !important; cursor: pointer; box-shadow: none !important; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-add:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-add svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-foot .cp-pv-add { border-color: transparent !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-foot .cp-pv-add:hover { color: var(--cp-strong) !important; } /* Leere Listen (alle Projekt-Reiter) und „Noch keine Aktivität“ */ html[data-theme]:not(#cp):not(#cq) body td.cp-pv-emptycell { padding: 0 !important; background: transparent !important; border: 0 !important; } html[data-theme]:not(#cp):not(#cq) body td.cp-pv-emptycell::before, html[data-theme]:not(#cp):not(#cq) body td.cp-pv-emptycell::after { display: none !important; content: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-empty { display: grid; justify-items: center; gap: 8px; padding: 44px 20px 46px; text-align: center; text-transform: none; letter-spacing: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-empty b { color: var(--cp-strong); font-size: 15px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-empty > span:not(.cp-pv-empty-ic) { max-width: 420px; color: var(--cp-muted); font-size: 13px; line-height: 1.5; white-space: normal; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-empty .cp-pv-add { margin-top: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-empty-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-empty.is-small, html[data-theme]:not(#cp):not(#cq) body .cp-pv-empty.is-inline { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 26px 18px; text-align: left; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-empty.is-inline { justify-content: flex-start; flex-wrap: wrap; padding: 16px 10px; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-pv-empty.is-small, .cp-pv-empty.is-inline) > svg { flex: none; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body :is(.cp-pv-empty.is-small, .cp-pv-empty.is-inline) > div { display: grid; gap: 3px; flex: 1; min-width: 200px; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-pv-empty.is-small, .cp-pv-empty.is-inline) b { font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-pv-empty.is-small, .cp-pv-empty.is-inline) span { color: var(--cp-muted); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-empty.is-inline .cp-pv-add { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .project-activity-section > .card-body:not(:has(.d-flex)) { min-height: 150px; display: grid; place-items: center; } html[data-theme]:not(#cp):not(#cq) body .project-activity-section > .card-body:not(:has(.d-flex))::before { content: "Noch keine Aktivität – Änderungen an Aufgaben, Dateien, Kommentaren und Zeiten erscheinen hier."; max-width: 320px; color: var(--cp-muted); font-size: 13px; line-height: 1.5; text-align: center; } html[data-theme]:not(#cp):not(#cq) body .project-activity-section > .card-body:not(:has(.d-flex)) > * { display: none; } /* Kanban: leere Spalte mit Hinweis statt leerer Fläche */ html[data-theme]:not(#cp):not(#cq) body #project-tasks_kanban-section .kanban-item-list:not(:has(> *)) { position: relative; min-height: 120px; } html[data-theme]:not(#cp):not(#cq) body #project-tasks_kanban-section .kanban-item-list:not(:has(> *))::before { content: "Keine Aufgaben"; position: absolute; inset: 10px; display: grid; place-items: center; border: 1px dashed var(--cp-line-2); border-radius: 3px; color: var(--cp-dim); font-size: 12.5px; pointer-events: none; } /* Gantt ohne Aufgaben */ html[data-theme]:not(#cp):not(#cq) body #project-gantt-section #gantt-chart:not(:has(svg)) { display: grid; place-items: center; min-height: 220px; font-size: 0; color: transparent; } html[data-theme]:not(#cp):not(#cq) body #project-gantt-section #gantt-chart:not(:has(svg)) > * { display: none; } html[data-theme]:not(#cp):not(#cq) body #project-gantt-section #gantt-chart:not(:has(svg))::before { content: "Noch nichts im Zeitplan – Aufgaben mit Start- und Enddatum erscheinen hier als Balken."; max-width: 360px; color: var(--cp-muted); font-size: 13.5px; line-height: 1.5; text-align: center; } /* Überblick-Karten ruhiger: gleiche Abstände, Kopf ohne Doppellinie */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .card { border-radius: 3px !important; overflow: visible; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .card > .card-header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .card > .card-header h4 { margin: 0; } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta { gap: 8px 12px; font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-meta .cp-pv-m > span { max-width: 200px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k b { font-size: 19px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k span { white-space: normal; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ring { width: 42px; height: 42px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ki { width: 36px; height: 36px; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-task { min-height: 48px; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp):not(#cq) body :is(.cp-pv-ring circle.is-v, .cp-pv-prog b > i, .cp-pv-tabwrap::before, .cp-pv-tabwrap::after, .cp-pv-arrow) { transition: none; animation: none; } } /* Projekt → Dateien → Ordner: dieselbe Dateimanager-Optik wie die Seite „Dateien“ (workspace-tools.js setzt .cp-fm), Spalten mit Abstand und nach verfügbarer Breite (Container auf .ptb20 – das Kontextmenü liegt außerhalb) */ html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm > .ptb20 { padding: 16px !important; container-type: inline-size; container-name: cpprojfiles; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm .box { display: flex !important; align-items: flex-start; gap: 14px; border: 0 !important; background: none !important; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm .box > .box-content { display: block !important; padding-right: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-manager-sidebar { flex: none; width: 210px !important; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-manager-items-box { flex: 1 1 auto; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-details-box { flex: none; width: 280px !important; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-details-box :is(.card, .sticky-details-section, #file-manager-right-panel) { width: 100% !important; } html[data-theme]:not(#cp):not(#cq) body #file-details-box .no-file-selected { display: grid !important; justify-items: center; gap: 12px; } html[data-theme]:not(#cp):not(#cq) body #file-details-box .no-file-selected .files-icon { display: flex !important; justify-content: center; width: 100%; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #file-details-box .no-file-selected .files-icon svg { width: 44px !important; height: 44px !important; margin: 0 !important; opacity: .55; } html[data-theme]:not(#cp):not(#cq) body #file-details-box .no-file-selected-text { width: auto !important; max-width: 220px; margin: 0 auto !important; text-align: center !important; } @container cpprojfiles (max-width: 1100px) { html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm .box { display: grid !important; grid-template-columns: 200px minmax(0, 1fr); align-items: start; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-manager-sidebar, html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-details-box { width: auto !important; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-details-box { grid-column: 1 / -1; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-details-box:has(.no-file-selected) { display: none !important; } } @container cpprojfiles (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm .box { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-manager-sidebar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-manager-sidebar > * { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-manager-sidebar :has(> .help-search-box), html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-manager-sidebar .help-search-box { flex: 1 0 100%; width: 100% !important; } html[data-theme]:not(#cp):not(#cq) body #folder-tab.cp-fm #file-manger-title-bar { flex-wrap: wrap; gap: 8px; } } /* Filterleisten der Listen (Aufgaben, Stundenzettel …): Knöpfe nie zweizeilig – sie brechen als Ganzes um (iPad) */ html[data-theme]:not(#cp):not(#cq) body .filter-section-container :is(.btn, button, a.btn) { white-space: nowrap !important; } /* Mein Tag: vier KI-Knöpfe („Nächsten Tag planen“ neu) – auf dem Handy als 2×2-Raster statt gequetschter Zeile */ @media (max-width: 575px) { .cp-day-ai-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme]:not(#cp):not(#cq) body .cp-day-ai-tabs button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Stempeluhr × Aufgaben-Timer: laufender Timer in der Topbar, im Menü und beim Ausstempeln */ html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-task { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; max-width: 250px; height: 28px !important; margin: 0 4px 0 2px; padding: 0 10px 0 8px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: color-mix(in srgb, var(--cp-text) 6%, transparent) !important; color: var(--cp-strong) !important; font: 500 12.5px/1 var(--cp-font, inherit) !important; white-space: nowrap; box-shadow: none !important; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-out > button.cp-clk-task { height: 36px !important; margin-left: 8px; border-radius: var(--cp-r, 3px) !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-task:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-task svg { flex: none; width: 13px !important; height: 13px !important; color: var(--cp-rust-hi); animation: cpTmrTick 2s steps(2, end) infinite; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-task span { overflow: hidden; max-width: 150px; text-overflow: ellipsis; color: inherit !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-task b { color: var(--cp-muted) !important; font-weight: 600; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-task.is-warn { border-color: rgba(245,165,36,.5) !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-task.is-warn svg { color: #F5A524; } @keyframes cpTmrTick { 50% { opacity: .45; } } @media (max-width: 1399px) { html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-task span { max-width: 90px; } } @media (max-width: 1199px) { html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-task span { display: none; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-task svg { animation: none; } } .cp-clk-chip svg { margin-left: 2px; } .cp-clk-tm { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 10px 10px 10px 12px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: linear-gradient(120deg, var(--cp-rust-soft), transparent 85%); } .cp-clk-tm-i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-clk-tm-i svg { width: 15px; height: 15px; } .cp-clk-tm > div { display: grid; gap: 2px; flex: 1; min-width: 0; } .cp-clk-tm small { color: var(--cp-muted); font-size: 11px; } .cp-clk-tm em { overflow: hidden; color: var(--cp-muted); font-size: 11.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-clk-pop .cp-clk-tm-n { overflow: hidden; padding: 0; border: 0; background: none; color: var(--cp-strong); font: 600 13px/1.3 var(--cp-font, inherit); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-clk-pop .cp-clk-tm-n:hover { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-clk-pop .cp-clk-tm-s { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-text); font: 500 12px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-clk-pop .cp-clk-tm-s svg { width: 10px; height: 10px; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-clk-pop .cp-clk-tm-s:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-clk-tchk { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--cp-text); font-size: 12.5px; cursor: pointer; } .cp-clk-tchk input { width: 16px; height: 16px; accent-color: var(--cp-rust-hi); } .cp-alloc-auto { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0 !important; padding: 8px 10px; border-radius: 3px; background: rgba(63,185,132,.1); color: var(--cp-text); font-size: 12.5px; line-height: 1.45; } .cp-alloc-auto svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--cp-success); } .cp-alloc-auto b { color: var(--cp-strong); } /* --------------------------------------------------------------------------- v5.60.0 · Aufgabenansicht (task-view.js): Eigenschaften als Liste, Zeiterfassungs-Karte, Fußleiste --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .cp-tv .cp-tv-hide { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .col-lg-4 > .clearfix { padding: 14px 16px 6px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .col-lg-4 .container-fluid { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-props > .d-flex { align-items: center !important; margin: 0 0 6px !important; padding-bottom: 12px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-tv-props > .d-flex p { margin: 6px 0 0 !important; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-props > .d-flex .badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-prop { display: grid !important; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 4px 12px; margin: 0 !important; padding: 10px 0 !important; border-bottom: 1px solid var(--cp-line); font-size: 13.5px; line-height: 1.45; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-tv-prop:last-of-type { border-bottom: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-prop > :not(strong:first-child) { grid-column: 2; justify-self: start; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-prop.d-none { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-prop > strong:first-child { grid-column: 1; color: var(--cp-muted) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-prop a { color: var(--cp-strong); text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-prop a:hover { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-tv-prop .text-off { color: var(--cp-dim) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-prop > .mt5 { margin-top: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-due { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-muted); font-size: 11px; font-weight: 600; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-due.is-soon { background: rgba(224,165,58,.15); color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-tv-due.is-late { background: rgba(229,72,77,.14); color: var(--cp-danger); } /* Zeiterfassung */ html[data-theme]:not(#cp):not(#cq) body .cp-tv-time { margin: 10px 0 14px !important; padding: 12px !important; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time.is-running { border-color: var(--cp-rust-line); background: linear-gradient(135deg, var(--cp-rust-soft), var(--cp-surface) 70%) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--cp-strong); font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time-h svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time-total { margin-left: auto; color: var(--cp-muted); font-size: 12px; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time .cp-tv-timer { padding: 0 !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time .cp-tv-timer .btn { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin: 0 !important; border-radius: 3px !important; font-size: 13.5px !important; font-weight: 600 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time .cp-tv-timer .btn-success { border: 0 !important; background: linear-gradient(180deg, #EE6236, #D24A20) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time .cp-tv-timer .btn-success:hover { filter: brightness(1.06); } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time .cp-tv-timer .btn-danger { border: 1px solid rgba(229,72,77,.5) !important; background: rgba(229,72,77,.1) !important; color: #FF8A8E !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time .cp-tv-timer .btn svg { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time-note { display: flex; align-items: flex-start; gap: 7px; margin: 10px 2px 0 !important; color: var(--cp-muted); font-size: 12px; line-height: 1.45; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time-note:empty { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time-note svg { flex: none; margin-top: 1px; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-live { display: inline-flex; align-items: center; gap: 7px; color: var(--cp-strong); font-weight: 500; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-live svg { color: var(--cp-rust-hi); animation: cpTmrTick 2s steps(2, end) infinite; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-live b { font-variant-numeric: tabular-nums; } /* linke Spalte */ html[data-theme]:not(#cp):not(#cq) body .cp-tv .task-title-left { font-size: 20px !important; font-weight: 600; line-height: 1.3; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-tv .col-lg-8 .b-t { border-top: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .form-check-reverse .form-check-label { color: var(--cp-dim); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .form-check-reverse .form-check-input { transform: scale(.85); transform-origin: right center; } /* Fußleiste */ html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot > * { float: none !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot .cp-tv-del { order: -1; margin-right: auto !important; border-color: transparent !important; background: transparent !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot .cp-tv-del:hover { border-color: rgba(229,72,77,.45) !important; color: var(--cp-danger) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot .cp-tv-edit { order: 9; border-color: transparent !important; background: linear-gradient(180deg, #EE6236, #D24A20) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot .cp-tv-edit svg { color: #fff !important; } @media (max-width: 991px) { html[data-theme]:not(#cp):not(#cq) body .cp-tv .col-lg-4 { margin-bottom: 16px; } } @media (max-width: 575px) { html[data-theme]:not(#cp):not(#cq) body .cp-tv-prop { grid-template-columns: 90px minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot { display: grid !important; grid-template-columns: 1fr 1fr; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot > * { width: 100%; justify-content: center; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot .cp-tv-edit { grid-column: 1 / -1; order: -2; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot .cp-tv-del { margin: 0 !important; } } /* Aufgabenlisten: Timer in der Zeile */ html[data-theme]:not(#cp):not(#cq) body .cp-tl-tmr { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 4px 0 0; padding: 0; vertical-align: middle; border-radius: 3px; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-muted) !important; cursor: pointer; box-shadow: none !important; transition: color .15s, border-color .15s, background-color .15s; } html[data-theme]:not(#cp):not(#cq) body .cp-tl-tmr:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tl-tmr.is-on { border-color: rgba(229,72,77,.5) !important; background: rgba(229,72,77,.12) !important; color: #FF8A8E !important; animation: cpTmrPulse 2s ease-in-out infinite; } html[data-theme]:not(#cp):not(#cq) body .cp-tl-tmr.is-busy { opacity: .5; pointer-events: none; } @keyframes cpTmrPulse { 50% { box-shadow: 0 0 0 4px rgba(229,72,77,.12) !important; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp):not(#cq) body .cp-tl-tmr.is-on { animation: none; } } /* Touch (Handy/iPad): Text-Links in Listen hatten 14–23 px hohe Tippflächen (Prüflauf 390/834 px) → unsichtbar auf ≥ 34 px vergrößert (Innenabstand + gleich großer negativer Außenabstand – das Layout bleibt gleich) */ @media (pointer: coarse) { html[data-theme]:not(#cp):not(#cq) body :is(.dataTable tbody td a[data-act="ajax-modal"]:not(.btn):not(.edit):not(.delete), .dataTable tbody td a[href*="/view/"]:not(.btn), .cp-day-tx > a, .cp-day-list a:not(.btn), .card-title a.dark, .cp-pv-tasks a) { display: inline-block; padding-block: 8px; margin-block: -8px; } html[data-theme]:not(#cp):not(#cq) body .dataTable tbody td input[type="checkbox"], html[data-theme]:not(#cp):not(#cq) body .dataTable tbody td .checkbox-blank { min-width: 22px; min-height: 22px; } } /* --------------------------------------------------------------------------- v5.60.0 · Zeit-Auswertung (#/zeit-auswertung, time-analytics.js) --------------------------------------------------------------------------- */ .ta-page { padding: 6px 4px 40px; } .ta-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .ta-kicker { display: flex; align-items: center; gap: 8px; color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .ta-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .ta-head h1 { margin: 6px 0 4px !important; color: var(--cp-strong); font-size: 28px !important; font-weight: 600; letter-spacing: -.01em; text-transform: none !important; } .ta-sub { margin: 0; color: var(--cp-muted); font-size: 13px; } .ta-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ta-seg { display: inline-flex; padding: 3px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); } html[data-theme]:not(#cp):not(#cq) body .ta-seg button { height: 32px; padding: 0 12px; border: 0 !important; border-radius: 3px; background: none !important; color: var(--cp-muted) !important; font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: none !important; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .ta-seg button:is([aria-selected="true"], [aria-pressed="true"]) { background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; box-shadow: inset 0 0 0 1px var(--cp-rust-line) !important; } .ta-sel { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--cp-line-2); color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .ta-sel select { height: 36px; padding: 0 4px !important; border: 0 !important; background: none !important; color: var(--cp-strong) !important; font: 500 13px/1 var(--cp-font, inherit); box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .ta-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-text) !important; font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .ta-btn:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } .ta-page.is-loading .ta-body { opacity: .55; transition: opacity .2s; } .ta-skel { height: 120px; margin-bottom: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--cp-surface), color-mix(in srgb, var(--cp-text) 5%, var(--cp-surface)), var(--cp-surface)); background-size: 200% 100%; animation: taSk 1.4s linear infinite; } @keyframes taSk { to { background-position: -200% 0; } } .ta-err { color: var(--cp-danger); } .ta-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } .ta-k { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-surface); } .ta-k > div { display: grid; gap: 3px; min-width: 0; } .ta-k small { color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .ta-k b { color: var(--cp-strong); font-size: 22px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; } .ta-k span:not(.ta-ki) { color: var(--cp-muted); font-size: 12px; line-height: 1.35; } .ta-ki { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-text); } .ta-k.is-warn .ta-ki { background: rgba(224,165,58,.14); color: var(--cp-warning); } .ta-k.is-ok .ta-ki { background: rgba(63,185,132,.12); color: var(--cp-success); } .ta-card { margin-bottom: 14px; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-surface); } .ta-card > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; } html[data-theme]:not(#cp):not(#cq) body .ta-card h2 { margin: 0 !important; color: var(--cp-strong); font-size: 14px !important; font-weight: 600; text-transform: none !important; letter-spacing: 0 !important; } .ta-hint { color: var(--cp-muted); font-size: 12px; } .ta-leg { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-muted); font-size: 12px; } .ta-leg i { width: 10px; height: 10px; margin-left: 8px; border-radius: 3px; } .ta-leg i.is-w, .ta-col i.is-w { background: color-mix(in srgb, var(--cp-text) 16%, transparent); } .ta-leg i.is-a, .ta-col i.is-a { background: linear-gradient(180deg, #FF7A4D, #D24A20); } .ta-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; height: 190px; } .ta-chart > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; } .ta-chart em { color: var(--cp-muted); font-size: 10.5px; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; } .ta-chart.is-dense em { display: none; } .ta-col { position: relative; display: block; width: 100%; max-width: 34px; height: 100%; } .ta-col i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 3px 3px; transition: height .5s var(--cp-e, ease); } .ta-col i.is-a { left: 22%; right: 22%; } .ta-chart small { color: var(--cp-muted); font-size: 11px; font-weight: 600; } .ta-chart .is-today small, .ta-chart .is-today em { color: var(--cp-strong); } .ta-chart .is-future { opacity: .45; } /* v5.112.0 · Zeit-Auswertung „Je Tag“: gemeinsame Skala, Hilfslinien, Datumsachse, Wochenende, Hinweisfenster */ .ta-days > header > div { display: flex; flex-direction: column; gap: 3px; } .ta-plot { --ta-h: 200px; position: relative; padding-left: 48px; } .ta-plot .ta-area { position: relative; height: var(--ta-h); margin-top: 22px; } .ta-plot .ta-lines { position: absolute; inset: 0 0 0 -48px; pointer-events: none; border-bottom: 1px solid var(--cp-line-2, var(--cp-line)); } .ta-plot .ta-lines > span { position: absolute; left: 48px; right: 0; height: 0; border-top: 1px dashed color-mix(in srgb, var(--cp-text) 10%, transparent); } .ta-plot .ta-lines > span > b { position: absolute; left: -48px; top: -7px; width: 40px; color: var(--cp-dim, var(--cp-muted)); font-size: 10.5px; font-weight: 500; line-height: 14px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ta-plot .ta-chart { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; height: 100%; } .ta-plot .ta-chart > .ta-d { position: relative; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 0; height: 100%; min-width: 0; outline: none; cursor: default; } .ta-plot .ta-chart > .ta-d.is-future { opacity: 1; } .ta-plot .ta-d.is-we::before { content: ""; position: absolute; inset: 0 1px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--cp-text) 3%, transparent); } .ta-plot .ta-d:hover::after, .ta-plot .ta-d:focus-visible::after { content: ""; position: absolute; inset: 0 1px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--cp-rust) 6%, transparent); } .ta-plot .ta-d:focus-visible { box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .ta-plot .ta-col { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 70%; max-width: 40px; height: 100%; } .ta-plot .ta-col i { position: static; display: block; flex: 1 1 0; max-width: 16px; min-height: 0; border-radius: 3px 3px 0 0; transition: height .55s var(--cp-e, ease); } .ta-plot .ta-col i[style*="height:0%"] { visibility: hidden; } .ta-plot.is-dense .ta-col { width: 78%; gap: 1px; } .ta-plot .ta-val { position: absolute; z-index: 2; left: 0; right: 0; margin-bottom: 5px; color: var(--cp-muted); font-size: 10.5px; font-style: normal; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; } .ta-plot .ta-val.is-a { color: var(--cp-rust-hi); } .ta-plot.is-dense .ta-val { display: none; } .ta-plot .ta-d.is-today .ta-val { color: var(--cp-strong); } .ta-plot .ta-d.is-future .ta-col { opacity: .35; } .ta-plot .ta-xax { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding-top: 8px; } .ta-plot .ta-xax > span { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; color: var(--cp-muted); line-height: 1.25; } .ta-plot .ta-xax small { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; } .ta-plot .ta-xax b { font-size: 10.5px; font-weight: 500; color: var(--cp-dim, var(--cp-muted)); font-variant-numeric: tabular-nums; } .ta-plot .ta-xax .is-we { opacity: .7; } .ta-plot .ta-xax .is-today { color: var(--cp-strong); } .ta-plot .ta-xax .is-today b { color: #fff; background: var(--cp-rust); padding: 0 5px; border-radius: 3px; } .ta-plot .ta-tip { position: absolute; z-index: 5; top: 0; left: calc(50% + 22px); display: none; min-width: 210px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line-2, var(--cp-line)); background: var(--cp-surface-2, var(--cp-surface)); box-shadow: 0 10px 28px rgba(0,0,0,.18); color: var(--cp-text); font-size: 12px; text-align: left; pointer-events: none; } .ta-plot .ta-d.is-r .ta-tip { left: auto; right: calc(50% + 22px); } .ta-plot .ta-d:hover .ta-tip, .ta-plot .ta-d:focus-visible .ta-tip { display: block; } .ta-plot .ta-tip > b { display: block; margin-bottom: 6px; color: var(--cp-strong); font-size: 12px; font-weight: 600; } .ta-plot .ta-tip > span { display: flex; align-items: center; gap: 7px; padding: 2px 0; } .ta-plot .ta-tip > span i { width: 9px; height: 9px; border-radius: 2px; } .ta-plot .ta-tip > span em { margin-left: auto; padding-left: 16px; color: var(--cp-strong); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; } .ta-plot .ta-tip > small { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cp-line); color: var(--cp-muted); font-size: 11px; line-height: 1.4; white-space: normal; } .ta-tip i.is-w { background: color-mix(in srgb, var(--cp-text) 22%, transparent); } .ta-plot .ta-col i.is-w { background: color-mix(in srgb, var(--cp-text) 22%, transparent); } .ta-tip i.is-a { background: linear-gradient(180deg, #FF7A4D, #D24A20); } .ta-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; } .ta-list { margin: 0; padding: 0; list-style: none; } .ta-row { border-top: 1px solid var(--cp-line); } .ta-row:first-child { border-top: 0; } html[data-theme]:not(#cp):not(#cq) body .ta-rh { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 4px; border: 0 !important; background: none !important; color: var(--cp-text) !important; text-align: left; text-decoration: none !important; cursor: pointer; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .ta-rh:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp):not(#cq) body .ta-rh:disabled { cursor: default; } .ta-chev { flex: none; display: grid; place-items: center; width: 18px; color: var(--cp-muted); transition: transform .2s var(--cp-e, ease); } .ta-row.is-open .ta-chev { transform: rotate(90deg); } .ta-n { display: grid; gap: 5px; flex: 1; min-width: 0; } .ta-n b { overflow: hidden; color: var(--cp-strong); font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .ta-n b.is-int { color: var(--cp-muted); } .ta-n small { overflow: hidden; color: var(--cp-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .ta-v { flex: none; color: var(--cp-strong); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .ta-bar { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .ta-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #D24A20, #FF7A4D); } .ta-bar.is-int i { background: color-mix(in srgb, var(--cp-text) 30%, transparent); } .ta-sub-list { margin: 0 0 8px 28px; padding: 0; list-style: none; } .ta-sub-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 4px; border-top: 1px dashed var(--cp-line); font-size: 13px; } .ta-sub-list a { overflow: hidden; color: var(--cp-text); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; } .ta-sub-list a:hover { color: var(--cp-rust-hi); } .ta-sub-list span { flex: none; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .ta-empty { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 4px; color: var(--cp-muted); font-size: 13px; line-height: 1.5; } .ta-empty svg { flex: none; color: var(--cp-rust-hi); } .ta-tbl-wrap { overflow-x: auto; } .ta-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .ta-tbl th { padding: 8px 10px; border-bottom: 1px solid var(--cp-line-2); color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; } .ta-tbl td { padding: 10px; border-bottom: 1px solid var(--cp-line); color: var(--cp-text); white-space: nowrap; } .ta-tbl td.is-warn { color: var(--cp-warning); font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .ta-link { padding: 0; border: 0 !important; background: none !important; color: var(--cp-strong) !important; font: 500 13px/1.3 var(--cp-font, inherit); cursor: pointer; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .ta-link:hover { color: var(--cp-rust-hi) !important; } .ta-q { display: inline-block; width: 60px; height: 5px; margin-right: 8px; vertical-align: middle; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .ta-q i { display: block; height: 100%; background: var(--cp-success); } @media (max-width: 1100px) { .ta-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ta-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 575px) { html[data-theme]:not(#cp):not(#cq) body .ta-head h1 { font-size: 23px !important; } .ta-ctl { width: 100%; } .ta-seg { width: 100%; overflow-x: auto; } html[data-theme]:not(#cp):not(#cq) body .ta-seg button { flex: 1; padding: 0 8px; } .ta-k { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .ta-k b { font-size: 19px; } .ta-chart { height: 150px; gap: 4px; } .ta-chart em { display: none; } .ta-plot { --ta-h: 160px; padding-left: 40px; } .ta-plot .ta-lines { left: -40px; } .ta-plot .ta-lines > span { left: 40px; } .ta-plot .ta-lines > span > b { left: -40px; width: 34px; } .ta-plot .ta-xax small { display: none; } .ta-card { padding: 14px; } } @media (prefers-reduced-motion: reduce) { .ta-skel { animation: none; } .ta-col i, .ta-chev { transition: none; } } /* ========================================================================== v5.61.0 · Stempeluhr als EINE kompakte Pille (≈ 32 px hoch, Zeit + laufender Timer + Zuordnungs-Punkt) Alle Aktionen liegen im Menü (Klick auf die Pille) – RISEs eigenes Timer-Symbol wird dann ausgeblendet ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body #default-navbar:has(.cp-clk-wrap:not([hidden])) #topbar-timer-dropdown { display: none !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk-wrap { margin: 0 8px 0 0; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk { position: relative; gap: 0; height: 32px; padding: 0 3px; border: 1px solid var(--cp-line-2); border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 4%, transparent); font: 600 12.5px/1 var(--cp-font, inherit); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-in { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-paused, html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-long { border-color: rgba(245,165,36,.45); background: rgba(245,165,36,.09); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-main { display: inline-flex; align-items: center; gap: 7px; width: auto; height: 26px; padding: 0 9px; border: 0; border-radius: 3px; background: none; color: var(--cp-strong); font: inherit; cursor: pointer; transition: background-color var(--cp-t), color var(--cp-t); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-main:hover { background: color-mix(in srgb, var(--cp-text) 8%, transparent); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-main b { color: inherit; font-weight: 600; letter-spacing: .01em; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-out > button.cp-clk-main { padding-left: 6px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-out > button.cp-clk-main:hover { color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-paused > button.cp-clk-main { color: #F5A524; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-paused > button.cp-clk-main svg { width: 11px; height: 11px; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-main .cp-clk-dot { width: 7px; height: 7px; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-go { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; transition: filter var(--cp-t), transform var(--cp-t); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-go:hover { filter: brightness(1.08); background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-go:active { transform: scale(.94); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-go svg { width: 10px; height: 10px; margin: 0 0 0 1px; } .cp-clk-sep { display: block; width: 1px; height: 14px; margin: 0 1px; background: var(--cp-line-2); } .cp-clk-tseg { display: inline-flex; align-items: center; gap: 5px; color: var(--cp-muted); } .cp-clk-tseg svg { flex: none; width: 13px; height: 13px; margin: 0 !important; color: var(--cp-rust-hi); animation: cpTmrTick 2s steps(2, end) infinite; } .cp-clk-tseg.is-warn svg { color: #F5A524; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk .cp-clk-tseg b { color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk svg { margin-top: 0; } .cp-clk-uadot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #F5A524; box-shadow: 0 0 0 2px var(--cp-void, #06070A); pointer-events: none; } .cp-clk-chip svg { flex: none; } @media (max-width: 1199px) { html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk .cp-clk-tseg b { display: none; } } @media (prefers-reduced-motion: reduce) { .cp-clk-tseg svg { animation: none; } } /* v5.61.0 · Start-Knopf klar erkennbar: runder Rost-Knopf mit weißem ▶ (globale Topbar-Regeln machten ihn eckig + grau) */ html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-go { width: 26px; height: 26px; border-radius: 50% !important; background: linear-gradient(180deg, #F06A3D, #CF4620) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(232,85,42,.5); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-go:hover { filter: brightness(1.1); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-go svg { width: 11px !important; height: 11px !important; margin: 0 0 0 2px !important; color: #fff !important; fill: #fff !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-go svg path { fill: #fff !important; stroke: none !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk > button.cp-clk-main { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk .cp-clk-tseg svg { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk .cp-clk-tseg.is-warn svg, html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-paused > button.cp-clk-main > svg { color: #F5A524 !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-out { padding-left: 3px; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk.is-out > button.cp-clk-main { padding: 0 10px 0 7px; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk .cp-clk-tseg { padding: 0 2px 0 3px; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk .cp-clk-tseg b { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .cp-clk .cp-clk-tseg.is-warn b { color: #F5A524; } /* v5.61.0 · Listen: Filterleiste (oben) und Seitenleiste (unten) bleiben beim seitlichen Wischen/Scrollen stehen – nur die Tabelle bewegt sich */ html[data-theme]:not(#cp):not(#cq) body .table-responsive > .dt-container { width: fit-content; min-width: 100%; } html[data-theme]:not(#cp):not(#cq) body .table-responsive > .dt-container > :is(.filter-section-container, .datatable-tools) { position: sticky; left: 0; z-index: 4; width: var(--cp-scw, 100%); max-width: none; } /* Größen-Container eine Ebene höher (sonst ignoriert die Liste die Tabellenbreite und die Leisten wandern doch mit) */ html[data-theme]:not(#cp):not(#cq) body .dt-container:has(> :is(#task-table, #client-table, #lead-table)) { container-type: normal; } html[data-theme]:not(#cp):not(#cq) body :has(> .dt-container > #task-table) { container-type: inline-size; container-name: cptasks; } html[data-theme]:not(#cp):not(#cq) body :has(> .dt-container > :is(#client-table, #lead-table)) { container-type: inline-size; container-name: cplist; } /* ========================================================================== v5.61.0 · Aufgaben-Großansicht (/tasks/view/{id}) – volle Breite, Kopf mit Aktionen, Kennzahlen, Hauptspalte (Beschreibung, Checkliste, Unteraufgaben, Kommentare, Aktivität) + Seitenleiste ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body #page-content.task-preview.cp-tvp { max-width: 1640px !important; width: 100%; min-width: 0 !important; margin: 0 auto !important; padding: 20px 28px 40px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp > .row { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp > .row > .col-md-12 { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp > .row > .col-md-12 > .card { border: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp > .row > .col-md-12 > .card > .card-body { padding: 0 !important; } /* Kopf */ .cp-tvp-hero { margin: 0 0 18px; padding: 20px 22px 18px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: linear-gradient(135deg, color-mix(in srgb, var(--cp-rust-hi) 7%, var(--cp-surface)) 0%, var(--cp-surface) 46%); } .cp-tvp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; } .cp-tvp-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 12.5px; color: var(--cp-muted); } .cp-tvp-crumbs a { color: var(--cp-muted) !important; text-decoration: none !important; transition: color var(--cp-dur-s); } .cp-tvp-crumbs a:hover { color: var(--cp-rust-hi) !important; } .cp-tvp-crumbs i { font-style: normal; color: var(--cp-dim); opacity: .6; } .cp-tvp-crumbs span { color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-tvp-nav { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); flex: none; } .cp-tvp-nav[hidden] { display: none; } .cp-tvp-nav button { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: var(--cp-r-sm); background: none; color: var(--cp-text); cursor: pointer; transition: background-color var(--cp-dur-s), color var(--cp-dur-s); } .cp-tvp-nav button:hover:not(:disabled) { background: var(--cp-hover); color: var(--cp-rust-hi); } .cp-tvp-nav button:disabled { opacity: .35; cursor: default; } .cp-tvp-pos { padding: 0 6px; font-size: 12px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-tvp-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin-top: 14px; flex-wrap: wrap; } .cp-tvp-tw { min-width: 0; flex: 1 1 420px; } .cp-tvp-eyebrow { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body h1.cp-tvp-title { margin: 0 !important; padding: 0 !important; font: 600 clamp(22px, 2.1vw, 30px)/1.2 var(--cp-font) !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--cp-strong) !important; overflow-wrap: anywhere; } .cp-tvp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } .cp-tvp-chips:empty { display: none; } .cp-tvp-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); font-size: 12px; font-weight: 500; color: var(--cp-text); white-space: nowrap; text-decoration: none !important; } .cp-tvp-chip svg { flex: none; opacity: .85; } .cp-tvp-chip.is-status { --c: var(--cp-info); border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--cp-strong); } .cp-tvp-chip.is-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); } .cp-tvp-chip.is-late { border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); background: color-mix(in srgb, var(--cp-danger) 12%, transparent); color: var(--cp-danger); } .cp-tvp-chip.is-soon { border-color: color-mix(in srgb, var(--cp-warning) 45%, transparent); background: color-mix(in srgb, var(--cp-warning) 12%, transparent); color: var(--cp-warning); } .cp-tvp-chip.is-done { color: var(--cp-success); border-color: color-mix(in srgb, var(--cp-success) 40%, transparent); } .cp-tvp-chip.is-mine { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); } .cp-tvp-chip.is-mine svg { color: var(--cp-rust-hi); } .cp-tvp-chip.is-link { color: var(--cp-muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; } .cp-tvp-chip.is-link:hover { color: var(--cp-rust-hi); border-color: var(--cp-rust-line); } .cp-tvp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; font-size: 12.5px; color: var(--cp-muted); } .cp-tvp-meta:empty { display: none; } .cp-tvp-meta > span { display: inline-flex; align-items: center; gap: 8px; } .cp-tvp-meta > span + span::before { content: ""; width: 3px; height: 3px; margin-right: 10px; border-radius: 50%; background: var(--cp-dim); opacity: .7; } .cp-tvp-meta .is-off { color: var(--cp-dim); } .cp-tvp-av { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; background: var(--cp-surface-3); color: var(--cp-strong); font-size: 10px; font-weight: 600; letter-spacing: .02em; } .cp-tvp-av img { width: 100%; height: 100%; object-fit: cover; } .cp-tvp-av.is-xs { width: 20px; height: 20px; font-size: 9px; } /* Aktionen */ .cp-tvp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cp-tvp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: color-mix(in srgb, var(--cp-text) 3%, transparent); color: var(--cp-strong); font: 500 13.5px/1 var(--cp-font); white-space: nowrap; cursor: pointer; transition: background-color var(--cp-dur-s), border-color var(--cp-dur-s), color var(--cp-dur-s), filter var(--cp-dur-s); } .cp-tvp-btn[hidden] { display: none !important; } .cp-tvp-btn:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-tvp-btn:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } .cp-tvp-btn:disabled { opacity: .55; pointer-events: none; } .cp-tvp-btn.is-primary { border-color: transparent; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; } .cp-tvp-btn.is-primary:hover { filter: brightness(1.07); background: linear-gradient(180deg, #EE6236, #D24A20); } .cp-tvp-btn.is-primary.is-running { border-color: color-mix(in srgb, var(--cp-danger) 50%, transparent); background: color-mix(in srgb, var(--cp-danger) 12%, transparent); color: var(--cp-strong); } .cp-tvp-btn.is-primary.is-running svg { color: var(--cp-danger); } .cp-tvp-btn[data-tvp="done"] svg { color: var(--cp-success); } .cp-tvp-btn[data-tvp="done"]:hover { border-color: color-mix(in srgb, var(--cp-success) 50%, transparent); background: color-mix(in srgb, var(--cp-success) 10%, transparent); } .cp-tvp-btn.is-done svg { color: var(--cp-muted); } .cp-tvp-btn.is-icon { width: 38px; padding: 0; } .cp-tvp-btn.is-sm { height: 32px; padding: 0 12px; font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp-more { float: none !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp-more .btn { height: 38px; margin: 0 !important; padding: 0 13px !important; border-radius: var(--cp-r) !important; font-size: 13.5px !important; } /* Kennzahlen */ .cp-tvp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .cp-tvp-kpis:empty { display: none; } .cp-tvp-kpi { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px 14px 13px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: color-mix(in srgb, var(--cp-void) 35%, transparent); color: var(--cp-text); text-align: left; cursor: pointer; transition: border-color var(--cp-dur-s), background-color var(--cp-dur-s); } .cp-tvp-kpi:hover { border-color: var(--cp-line-2); background: var(--cp-hover); } .cp-tvp-kpi-l { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } .cp-tvp-kpi b { font-size: 20px; font-weight: 600; line-height: 1.15; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-tvp-kpi b em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--cp-muted); } .cp-tvp-kpi small { display: flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; font-size: 12px; color: var(--cp-muted); white-space: nowrap; text-overflow: ellipsis; } .cp-tvp-kpi.is-late b, .cp-tvp-kpi.is-late small { color: var(--cp-danger); } .cp-tvp-kpi.is-soon small { color: var(--cp-warning); } .cp-tvp-kpi.is-live { border-color: var(--cp-rust-line); } .cp-tvp-kpi.is-live small { color: var(--cp-strong); } .cp-tvp-kpi.is-ok small { color: var(--cp-success); } .cp-tvp-kpi.is-none b { color: var(--cp-dim); } .cp-tvp-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-rust-hi); animation: cpTmrTick 2s steps(2, end) infinite; } .cp-tvp-bar2 { display: block; width: 100%; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--cp-text) 9%, transparent); } .cp-tvp-bar2 > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #D24A20, #EE6236); transition: width var(--cp-dur-l) var(--cp-e); } .cp-tvp-kpi.is-ok .cp-tvp-bar2 > i { background: var(--cp-success); } /* Raster: Hauptspalte + Seitenleiste */ html[data-theme]:not(#cp):not(#cq) body .cp-tvp > .row > .col-md-12 > .card > .card-body > .row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 18px; align-items: start; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .card-body > .row > .col-lg-8 { grid-column: 1; grid-row: 1; width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .card-body > .row > .col-lg-4 { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 14px; width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 > .clearfix { display: flex; flex-direction: column; gap: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .container-fluid { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .container-fluid > .row { display: flex; flex-direction: column; gap: 14px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .container-fluid > .row > * { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Titel + Projekt-Zeile stehen im Kopf */ html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .row > .task-title-left, html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .row > .col-md-12:has(> strong:first-child + a[href*="/projects/view/"]), html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .row > .col-md-12:has(> strong:first-child + a[href*="/clients/view/"]), html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .row > .col-md-12:has(> #parent-task-link) { display: none !important; } /* übrige Verknüpfungen (Rechnung, Ticket, Felder …) als ruhige Zeilen */ html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .row > .col-md-12.mb15:has(> strong:first-child):not(.b-t) { padding: 10px 14px !important; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: var(--cp-surface); font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .row > .col-md-12.mb15:has(> strong:first-child):not(.b-t) > strong:first-child { margin-right: 6px; color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } /* Abschnitte als Karten */ .cp-tvp-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--cp-strong); font-size: 14px; } .cp-tvp-h b { font-weight: 600; } .cp-tvp-h svg { flex: none; color: var(--cp-rust-hi); } .cp-tvp-h.is-sub { margin: 16px 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .cp-tvp-n { margin-left: auto; color: var(--cp-muted); font-size: 12px; font-variant-numeric: tabular-nums; } .cp-tvp-n:empty { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp :is(.cp-tvp-desc, #checklist_form > .col-md-12, #sub_task_form > .col-md-12, #dependency-area:not(.hide), .cp-tvp-comments, .cp-tvp-act) { padding: 16px 18px !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r) !important; background: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp :is(#checklist_form, #sub_task_form) > .col-md-12 { margin: 0 !important; width: 100% !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp :is(#checklist_form, #sub_task_form) > .col-md-12 > .pb10.pt10 { padding-top: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-desc { font-size: 14px; line-height: 1.65; color: var(--cp-text); } .cp-tvp-desc.is-empty button { display: block; width: 100%; padding: 14px 16px; border: 1px dashed var(--cp-line-2); border-radius: var(--cp-r); background: none; color: var(--cp-muted); font: 13px/1.5 var(--cp-font); text-align: left; cursor: pointer; transition: border-color var(--cp-dur-s), color var(--cp-dur-s); } .cp-tvp-desc.is-empty button:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-comments > .b-t { border-top: 0 !important; padding-top: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-act > .box-title { display: flex; align-items: center; margin: 0 0 6px !important; padding: 0 !important; border: 0 !important; text-align: left !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-act > .box-title::before, html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-act > .box-title::after { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-act > .box-title span { padding: 0 !important; background: none !important; color: var(--cp-strong) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-act > .project-activity-logs-container { margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-act .border-bottom:last-of-type { border-bottom: 0 !important; } .cp-tvp-flash { animation: cpTvpFlash 1.2s var(--cp-e); } @keyframes cpTvpFlash { 0%, 40% { box-shadow: 0 0 0 2px var(--cp-rust-line); } 100% { box-shadow: 0 0 0 0 transparent; } } /* Seitenleiste */ html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-4 > .clearfix { margin: 0 !important; padding: 16px 18px 8px !important; border-radius: var(--cp-r) !important; background: var(--cp-surface) !important; } .cp-tvp-side { display: flex; flex-direction: column; gap: 14px; } .cp-tvp-side:empty { display: none; } .cp-tvp-card { padding: 16px 18px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: var(--cp-surface); } .cp-tvp-more-l { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--cp-muted) !important; font-size: 12px; text-decoration: none !important; } .cp-tvp-more-l:hover { color: var(--cp-rust-hi) !important; } .cp-tvp-proj { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--cp-strong) !important; font-weight: 600; font-size: 13.5px; text-decoration: none !important; } .cp-tvp-proj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-tvp-proj em { font-style: normal; color: var(--cp-muted); font-size: 12px; font-variant-numeric: tabular-nums; } .cp-tvp-proj:hover span { color: var(--cp-rust-hi); } .cp-tvp-sub { margin: 8px 0 0; font-size: 12px; color: var(--cp-muted); } .cp-tvp-sib { margin: 12px -8px 0; padding: 0; list-style: none; } .cp-tvp-sib a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px; border-radius: var(--cp-r); color: var(--cp-text) !important; font-size: 13px; text-decoration: none !important; transition: background-color var(--cp-dur-s); } .cp-tvp-sib a:hover { background: var(--cp-hover); color: var(--cp-strong) !important; } .cp-tvp-sib a > i { flex: none; width: 8px; height: 8px; border-radius: 50%; } .cp-tvp-sib a > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-tvp-sib a > em { flex: none; font-style: normal; font-size: 11.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-tvp-sib a > em.is-late { color: var(--cp-danger); } .cp-tvp-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 9px; border-top: 1px solid var(--cp-line); color: var(--cp-muted) !important; font-size: 12.5px; text-decoration: none !important; } .cp-tvp-all:hover { color: var(--cp-rust-hi) !important; } .cp-tvp-ppl, .cp-tvp-log, .cp-tvp-keys ul { margin: 0; padding: 0; list-style: none; } .cp-tvp-ppl li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 6px 0; font-size: 13px; } .cp-tvp-ppl li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-tvp-ppl li > b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cp-strong); } .cp-tvp-ppl li > .cp-tvp-bar2 { grid-column: 2 / -1; margin: 0; } .cp-tvp-log li { display: grid; grid-template-columns: 44px 40px minmax(0, 1fr); gap: 8px; padding: 5px 0; font-size: 12px; color: var(--cp-muted); border-top: 1px solid var(--cp-line); } .cp-tvp-log li:first-child { border-top: 0; } .cp-tvp-log b { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .cp-tvp-log em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-tvp-keys ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .cp-tvp-keys li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cp-muted); } .cp-tvp-keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--cp-line-2); border-bottom-width: 2px; border-radius: var(--cp-r-sm); background: var(--cp-surface-2); color: var(--cp-strong); font: 600 11px/1 var(--cp-font); box-shadow: none; } /* mitlaufende Kopfleiste */ .cp-tvp-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; height: 0; margin: 0 -28px; padding: 0 28px; overflow: hidden; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--cp-deep) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: height var(--cp-dur-m) var(--cp-e), opacity var(--cp-dur-s), border-color var(--cp-dur-s); } .cp-tvp-bar.is-on { height: 54px; opacity: 1; border-bottom-color: var(--cp-line); } .cp-tvp-bar-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cp-info); } .cp-tvp-bar b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-strong); font-weight: 600; font-size: 14px; } .cp-tvp-bar-id { flex: none; color: var(--cp-muted); font-size: 12px; } .cp-tvp-bar-a { display: flex; gap: 8px; margin-left: auto; flex: none; } /* Tablet / Handy */ @media (max-width: 1399px) { .cp-tvp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1199px) { html[data-theme]:not(#cp):not(#cq) body .cp-tvp > .row > .col-md-12 > .card > .card-body > .row { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .card-body > .row > .col-lg-4 { grid-column: 1; grid-row: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .card-body > .row > .col-lg-8 { grid-row: 2; } .cp-tvp-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body #page-content.task-preview.cp-tvp { padding: 12px 12px 32px !important; } .cp-tvp-hero { padding: 16px 14px 14px; } .cp-tvp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-tvp-kpi:last-child { grid-column: 1 / -1; } .cp-tvp-actions { width: 100%; } .cp-tvp-actions > .cp-tvp-btn:not(.is-icon) { flex: 1 1 0; } .cp-tvp-keys { display: none; } .cp-tvp-bar { margin: 0 -12px; padding: 0 12px; } .cp-tvp-bar-a .cp-tvp-btn span { display: none; } .cp-tvp-bar-a .cp-tvp-btn { width: 36px; padding: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp :is(.cp-tvp-desc, #checklist_form > .col-md-12, #sub_task_form > .col-md-12, #dependency-area:not(.hide), .cp-tvp-comments, .cp-tvp-act) { padding: 14px !important; } } @media (hover: none) { .cp-tvp-keys { display: none; } } @media (prefers-reduced-motion: reduce) { .cp-tvp-bar, .cp-tvp-bar2 > i { transition: none; } .cp-tvp-flash, .cp-tvp-livedot { animation: none; } } @media print { .cp-tvp-bar, .cp-tvp-actions, .cp-tvp-nav, .cp-tvp-keys { display: none !important; } } /* v5.61.0 · Feinschliff Aufgabenansicht (Dialog + Seite): einheitliche Knöpfe, Avatar im Kommentarfeld bündig, keine doppelten Linien */ html[data-theme]:not(#cp):not(#cq) body .cp-tv :is(.modal-body, .card-body) .btn-primary { text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important; font-weight: 500 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv :is(.card-body, .modal-body) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border-radius: var(--cp-r) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv :is(.card-body, .modal-body) .btn svg { margin: 0 !important; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container { align-items: flex-start; gap: 12px; border-bottom: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container > .flex-shrink-0 .avatar { display: block !important; width: 34px !important; height: 34px !important; margin: 2px 0 0 !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container > .flex-shrink-0 .avatar img { display: block; width: 34px !important; height: 34px !important; margin: 0 !important; border-radius: 50% !important; object-fit: cover; box-shadow: 0 0 0 2px var(--cp-surface), 0 0 0 3px var(--cp-line-2) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container .post-dropzone { margin-bottom: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container .comment_description { border-radius: var(--cp-r) var(--cp-r) 0 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container .card-footer { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; padding: 8px !important; border: 1px solid var(--cp-line-2) !important; border-top: 0 !important; border-radius: 0 0 var(--cp-r) var(--cp-r) !important; background: color-mix(in srgb, var(--cp-text) 2.5%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container .card-footer::before, html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container .card-footer::after { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container .card-footer > * { float: none !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container .card-footer .me-auto { display: flex; align-items: center; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container .card-footer .me-auto > * { float: none !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container .card-footer .btn { min-height: 36px; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .comment-form-container .card-footer .record-start-btn { width: 36px; padding: 0 !important; } /* Erinnerungen: ruhiger Kopf, keine Innenlinie am Kartenende */ html[data-theme]:not(#cp):not(#cq) body .cp-tv #task-reminders { margin: 4px 0 0 !important; padding: 12px 0 4px !important; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-tv #task-reminders > .cp-tv-rh { margin: 0 0 8px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv #task-reminders > .cp-tv-rh strong { color: var(--cp-muted) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-tv #task-reminders :is(table, tr, td, th, .b-b, .b-t, hr) { border-color: transparent !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv #task-reminders .dataTables_wrapper, html[data-theme]:not(#cp):not(#cq) body .cp-tv #task-reminders .dt-container { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .col-lg-4 .cp-tv-time + .col-md-12:empty { display: none; } /* Dialog: Aktivität beginnt unter beiden Spalten (Trennlinie lief in die rechte Karte) */ html[data-theme]:not(#cp):not(#cq) body .cp-tv .modal-body > .row { margin-bottom: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-tv .modal-body > .box-title { clear: both; margin-top: 18px !important; } /* Großansicht: Abhängigkeit als ruhiger Knopf, Kommentarliste ohne Abschlusslinie */ html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .row > .col-md-12:has(> .dropdown > .btn .feather-shuffle, > .dropdown .add-dependency-btn) .btn { background: transparent !important; border-style: dashed !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .row > .col-md-12:has(> .dropdown .add-dependency-btn) .btn:hover { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-comments .list-container > :last-child, html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-comments #task-comment-form-container { border-bottom: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-comments :is(.comment-container, .comment-list-container) > :last-child { border-bottom: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tv-time .cp-tv-time-b { display: none; } /* Timer-Knopf steht im Kopf */ html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tv-time .cp-tv-time-h { margin-bottom: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tv-time .cp-tv-time-note { margin-top: 4px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .cp-tvp-act .border-bottom:has(+ [id^="loadproject"]) { border-bottom: 0 !important; margin-bottom: 0 !important; } /* ========================================================================== v5.61.0 · Kunden → Überblick (clients-overview.js) – Brand-Design statt RISE-Kacheln ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body #overview > .cp-co-src { display: none !important; } .cp-co { display: flex; flex-direction: column; gap: 16px; padding: 18px 0 8px; } .cp-co a { text-decoration: none !important; } .cp-co-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .cp-co-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px 15px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: var(--cp-surface); color: var(--cp-text) !important; transition: border-color var(--cp-dur-s), background-color var(--cp-dur-s); } .cp-co-kpi:hover { border-color: var(--cp-rust-line); background: color-mix(in srgb, var(--cp-rust-hi) 4%, var(--cp-surface)); } .cp-co-kpi-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); } .cp-co-kpi-h svg { flex: none; color: var(--cp-rust-hi); } .cp-co-kpi b { font-size: 32px; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-co-kpi small { font-size: 12.5px; color: var(--cp-muted); } .cp-co em { font-style: normal; font-weight: 600; } .cp-co .is-up { color: var(--cp-success); } .cp-co .is-down { color: var(--cp-danger); } .cp-co-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; align-items: start; } .cp-co-main, .cp-co-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .cp-co-card { padding: 18px 20px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: var(--cp-surface); } .cp-co-card[hidden] { display: none; } .cp-co-ch { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--cp-strong); font-size: 14.5px; } .cp-co-ch b { font-weight: 600; } .cp-co-ch svg { flex: none; color: var(--cp-rust-hi); } .cp-co-ch > span { margin-left: auto; color: var(--cp-muted); font-size: 12px; text-align: right; } .cp-co-ch > a { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--cp-muted) !important; font-size: 12px; } .cp-co-ch > a:hover { color: var(--cp-rust-hi) !important; } .cp-co-bar { display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); } .cp-co-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--t, linear-gradient(90deg, #D24A20, #EE6236)); } /* Zahlungseingang */ .cp-co-fin-b { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); gap: 20px; align-items: end; } .cp-co-fin-k b { display: block; font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-co-fin-k small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--cp-muted); } .cp-co-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 120px; align-items: end; } .cp-co-bars > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; } .cp-co-bars > div > i { display: block; width: 100%; max-width: 26px; min-height: 2px; border-radius: 2px 2px 1px 1px; background: color-mix(in srgb, var(--cp-rust-hi) 40%, var(--cp-surface-3)); transition: height var(--cp-dur-l) var(--cp-e); } .cp-co-bars > div.is-now > i { background: linear-gradient(180deg, #EE6236, #D24A20); } .cp-co-bars > div:hover > i { background: var(--cp-rust-hi); } .cp-co-bars > div > span { font-size: 10.5px; color: var(--cp-muted); } .cp-co-bars > div.is-now > span { color: var(--cp-strong); font-weight: 600; } .cp-co-top { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cp-line); } .cp-co-sh { margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); } .cp-co-top ol { margin: 0; padding: 0; list-style: none; counter-reset: cpco; } .cp-co-top li a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 7px 0; color: var(--cp-text) !important; font-size: 13px; counter-increment: cpco; } .cp-co-top li a::before { content: counter(cpco); grid-row: 1 / span 2; color: var(--cp-dim); font-size: 12px; font-variant-numeric: tabular-nums; } .cp-co-top li a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-co-top li a > b { font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-co-top li a > .cp-co-bar { grid-column: 2 / -1; margin-top: 2px; } .cp-co-top li a:hover > span { color: var(--cp-rust-hi); } /* Pipeline */ .cp-co-pipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .cp-co-grp { min-width: 0; padding: 14px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: color-mix(in srgb, var(--cp-void) 30%, transparent); } .cp-co-svc .cp-co-grp { padding: 0; border: 0; background: none; } .cp-co-gh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--cp-strong); font-size: 13px; } .cp-co-gh b { font-weight: 600; } .cp-co-gh svg { flex: none; color: var(--cp-rust-hi); } .cp-co-dist { display: flex; gap: 2px; height: 6px; margin-bottom: 8px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); } .cp-co-dist > i { display: block; height: 100%; } .cp-co-rows { display: flex; flex-direction: column; } .cp-co-row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--cp-r); color: var(--cp-text) !important; font-size: 13px; transition: background-color var(--cp-dur-s); } .cp-co-row:hover { background: var(--cp-hover); color: var(--cp-strong) !important; } .cp-co-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-co-row > b { font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-co-dot, .cp-co-dist > i { --c: var(--cp-dim); } .cp-co-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .cp-co-dist > i { background: var(--c); } .cp-co :is(.cp-co-dot, .cp-co-dist > i).is-go { --c: var(--cp-rust-hi); } .cp-co :is(.cp-co-dot, .cp-co-dist > i).is-ok { --c: var(--cp-success); } .cp-co :is(.cp-co-dot, .cp-co-dist > i).is-warn { --c: var(--cp-warning); } .cp-co :is(.cp-co-dot, .cp-co-dist > i).is-bad { --c: var(--cp-danger); } .cp-co :is(.cp-co-dot, .cp-co-dist > i).is-info { --c: var(--cp-info); } /* Listen rechts */ .cp-co-list { margin: 0 -8px; padding: 0; list-style: none; } .cp-co-list a { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: var(--cp-r); color: var(--cp-text) !important; transition: background-color var(--cp-dur-s); } .cp-co-list a:hover { background: var(--cp-hover); } .cp-co-av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--cp-r); background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .cp-co-av.is-good { background: color-mix(in srgb, var(--cp-success) 14%, transparent); color: var(--cp-success); } .cp-co-av.is-ok { background: color-mix(in srgb, var(--cp-info) 14%, transparent); color: var(--cp-info); } .cp-co-av.is-mid { background: color-mix(in srgb, var(--cp-warning) 14%, transparent); color: var(--cp-warning); } .cp-co-av.is-bad { background: color-mix(in srgb, var(--cp-danger) 14%, transparent); color: var(--cp-danger); } .cp-co-lt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .cp-co-lt b { overflow: hidden; color: var(--cp-strong); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .cp-co-lt small { overflow: hidden; color: var(--cp-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .cp-co-list a > em { flex: none; color: var(--cp-muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; } .cp-co-empty { margin: 0; color: var(--cp-muted); font-size: 13px; line-height: 1.5; } /* Tablet / Handy */ @media (max-width: 1399px) { .cp-co-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1199px) { .cp-co-grid { grid-template-columns: minmax(0, 1fr); } .cp-co-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } @media (max-width: 991px) { .cp-co-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-co-fin-b { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .cp-co { padding-top: 12px; gap: 12px; } .cp-co-kpis, .cp-co-main, .cp-co-side { gap: 10px; } .cp-co-kpi { padding: 13px 14px; } .cp-co-kpi b { font-size: 26px; } .cp-co-pipe { grid-template-columns: minmax(0, 1fr); } .cp-co-card { padding: 15px 14px; } .cp-co-ch > span { display: none; } .cp-co-bars { height: 96px; gap: 4px; } } @media (prefers-reduced-motion: reduce) { .cp-co-bars > div > i { transition: none; } } html[data-theme]:not(#cp):not(#cq) body .cp-tvp .task-title-right { display: none !important; } /* Titel steht im Kopf */ @media (max-width: 767px) { .cp-tvp-meta { flex-direction: column; align-items: flex-start; gap: 6px; } .cp-tvp-meta > span + span::before { display: none; } .cp-tvp-crumbs { font-size: 12px; } } /* Aufgabenansicht: Karten-Ecken wie im restlichen Brand-Design (3 px statt 14–16 px) */ html[data-theme]:not(#cp):not(#cq) body .cp-tv .col-lg-4 > .clearfix, html[data-theme]:not(#cp):not(#cq) body .cp-tv-time, html[data-theme]:not(#cp):not(#cq) body .cp-tv-time .cp-tv-timer .btn { border-radius: var(--cp-r) !important; } /* v5.61.1 · Aufgaben-Großansicht ruhiger: keine doppelte ID/Pfad, Aktionen oben rechts, schlanke Übersichtsleiste statt Kacheln */ .cp-tvp-eyebrow { display: none !important; } .cp-tvp-tr { display: flex; align-items: center; gap: 8px; flex: none; } .cp-tvp-id { height: 28px; padding: 0 10px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: none; color: var(--cp-muted); font: 600 12px/1 var(--cp-font); font-variant-numeric: tabular-nums; letter-spacing: .02em; cursor: pointer; transition: color var(--cp-dur-s), border-color var(--cp-dur-s); } .cp-tvp-id:hover { color: var(--cp-rust-hi); border-color: var(--cp-rust-line); } .cp-tvp-crumbs a { display: inline-flex; align-items: baseline; gap: 6px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-tvp-crumbs a em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-dim); } .cp-tvp-main { align-items: flex-start !important; margin-top: 10px !important; } .cp-tvp-actions { padding-top: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-tvp-kpis { display: flex !important; flex-wrap: wrap; gap: 0; margin: 18px -22px -18px; padding: 0 6px; border-top: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-void) 22%, transparent); } .cp-tvp-st { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 16px; border: 0; background: none; color: var(--cp-text); font: 13px/1.2 var(--cp-font); text-align: left; cursor: pointer; transition: background-color var(--cp-dur-s); } .cp-tvp-st + .cp-tvp-st::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--cp-line); } .cp-tvp-st:hover { background: var(--cp-hover); } .cp-tvp-st > svg { flex: none; color: var(--cp-rust-hi); } .cp-tvp-st > b { font-size: 14.5px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-tvp-st > span { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-muted); font-size: 12.5px; } .cp-tvp-st > .cp-tvp-bar2 { width: 56px; margin: 0 0 0 2px; } .cp-tvp-st.is-none > svg, .cp-tvp-st.is-none > b { color: var(--cp-dim); } .cp-tvp-st.is-ok > svg { color: var(--cp-success); } .cp-tvp-st.is-live > span { color: var(--cp-strong); } /* Eigenschaften-Kopf: Punkte-Badge beschriftet */ html[data-theme]:not(#cp):not(#cq) body .cp-tv-props > .d-flex .badge[title="Point"]::before { content: "Punkte" !important; display: inline !important; position: static !important; width: auto !important; height: auto !important; margin: 0 5px 0 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--cp-muted); font-weight: 500; } /* Verkaufschance/Kunde stehen im Pfad */ html[data-theme]:not(#cp):not(#cq) body .cp-tvp .col-lg-8 .row > .col-md-12:has(> strong:first-child + a[href*="/leads/view/"]) { display: none !important; } /* Tastenkürzel als Popover */ .cp-tvp-keypop { position: fixed; z-index: 1065; width: 280px; padding: 14px 16px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: var(--cp-surface-2); box-shadow: var(--cp-shadow-pop); color: var(--cp-text); font-size: 12.5px; animation: cpTvpPop var(--cp-dur-s) var(--cp-e); } .cp-tvp-keypop > b { display: block; margin-bottom: 10px; color: var(--cp-strong); font-size: 13px; font-weight: 600; } .cp-tvp-keypop ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .cp-tvp-keypop li { display: flex; align-items: center; gap: 10px; color: var(--cp-muted); } .cp-tvp-keypop kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--cp-line-2); border-bottom-width: 2px; border-radius: var(--cp-r-sm); background: var(--cp-surface); color: var(--cp-strong); font: 600 11px/1 var(--cp-font); box-shadow: none; } @keyframes cpTvpPop { from { opacity: 0; transform: translateY(-4px); } } @media (hover: none) { .cp-tvp-actions [data-tvp="keys"] { display: none; } } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .cp-tvp-kpis { margin: 14px -14px -14px; padding: 0; display: grid !important; grid-template-columns: 1fr 1fr; } .cp-tvp-st { padding: 8px 12px; min-height: 48px; } .cp-tvp-st:nth-child(odd)::before { display: none; } .cp-tvp-st:nth-child(n+3) { border-top: 1px solid var(--cp-line); } .cp-tvp-st > .cp-tvp-bar2 { display: none; } .cp-tvp-crumbs a { max-width: 220px; } } @media (prefers-reduced-motion: reduce) { .cp-tvp-keypop { animation: none; } } /* ========================================================================== v5.61.1 · Termin-Dialog (Termin-Details) + Bestätigungs-Popover „Sind Sie sicher?“ ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-evm .modal-body .container-fluid > .row { row-gap: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 6px; padding-bottom: 10px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head::before, html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head::after { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head > h4 { float: none !important; display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 !important; color: var(--cp-strong) !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head > h4 > span { float: none !important; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; margin: 0 !important; border-radius: var(--cp-r); background: color-mix(in srgb, currentColor 14%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head > h4 > span svg { width: 15px; height: 15px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head > .float-end { float: none !important; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px !important; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); color: var(--cp-muted); font-size: 12.5px; white-space: nowrap; transition: border-color var(--cp-dur-s); } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head > .float-end:hover { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head > .float-end svg { width: 14px; height: 14px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head > .float-end a { color: var(--cp-text) !important; text-decoration: none !important; } /* Info-Zeilen: Symbol + Text bündig */ html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-row, html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-row > .font-14 { display: flex !important; align-items: flex-start; gap: 10px; padding-top: 5px !important; padding-bottom: 5px !important; margin-top: 0 !important; color: var(--cp-text); font-size: 14px !important; line-height: 1.5; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-row > .font-14 { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-row svg { flex: none; width: 16px !important; height: 16px !important; margin: 3px 0 0 !important; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-row.is-owner { align-items: center; margin-top: 4px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-row.is-owner .avatar { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-row a { color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-labels { display: flex !important; flex-wrap: wrap; gap: 6px; padding-top: 4px !important; padding-bottom: 8px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-labels .badge { display: inline-flex !important; align-items: center; gap: 6px; height: 24px; margin: 0 !important; padding: 0 10px !important; border: 1px solid color-mix(in srgb, var(--cp-info) 40%, transparent) !important; border-radius: var(--cp-r) !important; background: color-mix(in srgb, var(--cp-info) 10%, transparent) !important; color: var(--cp-strong) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; } /* Beschreibung: dunkle Karte statt grauem Zitatblock */ html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-desc { padding-top: 4px !important; padding-bottom: 8px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-desc blockquote { margin: 0 !important; padding: 12px 16px !important; border: 1px solid var(--cp-line) !important; border-left: 3px solid var(--cp-rust-hi) !important; border-radius: var(--cp-r) !important; background: var(--cp-surface-2) !important; color: var(--cp-text) !important; font-size: 14px !important; line-height: 1.6; text-align: left !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-desc blockquote * { color: inherit !important; background: none !important; } /* Erinnerungen */ html[data-theme]:not(#cp):not(#cq) body .cp-evm .modal-body > .container-fluid > .b-t { margin-top: 10px !important; padding-top: 14px !important; border-top: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-rh { margin-bottom: 8px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-rh strong { color: var(--cp-muted) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-evm #event-reminders :is(table, tr, td, th, .b-b, .b-t, hr) { border-color: transparent !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm #event-reminders { margin-bottom: 0 !important; } /* Fußleiste: Löschen links (zurückhaltend), Bearbeiten = Hauptaktion, Schließen neutral */ html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot > * { float: none !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot .btn { display: inline-flex !important; align-items: center; gap: 7px; min-height: 40px; border-radius: var(--cp-r) !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot .btn svg { margin: 0 !important; width: 15px; height: 15px; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot .cp-evm-del { order: -1; margin-right: auto !important; border-color: transparent !important; background: transparent !important; color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot .cp-evm-del:hover { border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent) !important; color: var(--cp-danger) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot .cp-evm-close { order: 1; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot .cp-evm-close:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot .cp-evm-edit { order: 2; border-color: transparent !important; background: linear-gradient(180deg, #EE6236, #D24A20) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot .cp-evm-edit svg { color: #fff !important; } @media (max-width: 575px) { html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot { display: grid !important; grid-template-columns: 1fr 1fr; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot .cp-evm-edit { grid-column: 1 / -1; order: -2; justify-content: center; } html[data-theme]:not(#cp):not(#cq) body .cp-evm-foot .btn { justify-content: center; } html[data-theme]:not(#cp):not(#cq) body .cp-evm .cp-evm-head { flex-direction: column; } } /* Bestätigungs-Popover (RISE appConfirmation, überall): Knöpfe nebeneinander, kein Umbruch, kein Leuchten */ html[data-theme]:not(#cp):not(#cq) body .app-popover { min-width: 240px; padding: 14px !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r) !important; background: var(--cp-surface-2) !important; box-shadow: var(--cp-shadow-pop) !important; } html[data-theme]:not(#cp):not(#cq) body .app-popover .confirmation-title { padding: 0 !important; color: var(--cp-strong) !important; font-size: 14px !important; font-weight: 600 !important; border: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .app-popover .app-popover-body { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .app-popover .custom-popover-button-area { display: flex !important; gap: 8px; margin: 12px 0 0 !important; } html[data-theme]:not(#cp):not(#cq) body .app-popover .custom-popover-button-area::before, html[data-theme]:not(#cp):not(#cq) body .app-popover .custom-popover-button-area::after { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .app-popover .custom-popover-button-area > [class*="col-"] { flex: 1 1 0; width: auto !important; max-width: none !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .app-popover .custom-popover-button-area .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; padding: 0 12px !important; border-radius: var(--cp-r) !important; font-size: 13px !important; font-weight: 500 !important; white-space: nowrap; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .app-popover .custom-popover-button-area .btn svg { width: 14px; height: 14px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .app-popover .confirmation-confirm-button { border-color: transparent !important; background: var(--cp-danger) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .app-popover .confirmation-confirm-button:hover { filter: brightness(1.08); } html[data-theme]:not(#cp):not(#cq) body .app-popover .confirmation-cancel-button { border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-text) !important; } /* v5.61.1 · Chatfenster immer über dem Seiteninhalt (WhatsApp-„›“-Griff lag mit gleichem z-index 10 davor); Dialoge (1050+) bleiben darüber */ html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper.rise-chat-wrapper { z-index: 1040 !important; } html[data-theme]:not(#cp):not(#cq) body .sc-detail-reopen { z-index: 3 !important; } /* ========================================================================== v5.62.0 · Kundenportal am Handy: lesbare Größen (≥ 11,5 px), Tipp-Flächen ≥ 40–44 px, Aktionswort bleibt sichtbar ========================================================================== */ @media (max-width: 599px) { html[data-theme]:not(#cp):not(#cq) body .cp-ph-actions .cp-ph-btn:not(.is-primary) { height: 44px; font-size: 11.5px; letter-spacing: .02em; text-transform: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-tile span { font-size: 10.5px; letter-spacing: .04em; } html[data-theme]:not(#cp):not(#cq) body .cp-td-cta { padding: 4px 8px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); font-size: 11.5px; gap: 4px; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-td-cta svg { width: 13px; height: 13px; } html[data-theme]:not(#cp):not(#cq) body a.cp-td-item { min-height: 56px; } html[data-theme]:not(#cp):not(#cq) body .cp-td-txt small { font-size: 12px; } } .cp-td-rates { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cp-line); } .cp-td-rates > h3 { margin: 0 0 8px; color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } /* Entwürfe am iPad/Handy: Zeichnen nicht durch Scrollen/Zoomen abbrechen */ .rst-pin-host.mode-draw, .rst-pin-host.mode-draw * { touch-action: none; } /* Content-Kalender (Kunde): Sprung zur nächsten offenen Freigabe + Rückmeldung statt alert() */ .rst-client-pending-banner { flex-wrap: wrap; align-items: center; gap: 8px; } .rst-client-pending-jump { height: 30px; padding: 0 12px; border: 1px solid var(--cp-rust-line, rgba(232,85,42,.38)); border-radius: var(--cp-r, 3px); background: var(--cp-rust-soft, rgba(232,85,42,.12)); color: var(--cp-strong, #F6F6F4); font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .rst-client-pending-jump:hover { filter: brightness(1.1); } .rst-cc-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1080; max-width: min(92vw, 420px); padding: 12px 16px; border: 1px solid var(--cp-line-2, rgba(238,240,244,.16)); border-radius: var(--cp-r, 3px); background: var(--cp-surface-2, #161A23); color: var(--cp-strong, #F6F6F4); font: 500 13.5px/1.45 var(--cp-font, inherit); box-shadow: var(--cp-shadow-pop); transform: translate(-50%, 12px); opacity: 0; transition: opacity .2s ease, transform .2s ease; } .rst-cc-toast.is-in { transform: translate(-50%, 0); opacity: 1; } .rst-cc-toast.is-bad { border-color: color-mix(in srgb, var(--cp-danger, #E5484D) 50%, transparent); } @media (prefers-reduced-motion: reduce) { .rst-cc-toast { transition: none; } } /* ========================================================================== v5.62.0 · Budgets & Retainer (budgets.js) – Karten in Kunden-Überblick und Kundenakte, Dialog ========================================================================== */ .cp-bg-card.is-client { margin: 0 0 16px; } .cp-bg-new { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 30px; padding: 0 12px; border: 1px solid var(--cp-rust-line); border-radius: var(--cp-r); background: var(--cp-rust-soft); color: var(--cp-strong); font: 600 12.5px/1 var(--cp-font); cursor: pointer; } .cp-bg-new:hover { filter: brightness(1.1); } .cp-bg-sk { height: 64px; border-radius: var(--cp-r); background: linear-gradient(90deg, var(--cp-surface-2), var(--cp-surface-3), var(--cp-surface-2)); background-size: 200% 100%; animation: cpBgSk 1.2s linear infinite; } @keyframes cpBgSk { to { background-position: -200% 0; } } .cp-bg-list { display: flex; flex-direction: column; gap: 10px; } .cp-bg-row { --t: var(--cp-success); padding: 12px 14px; border: 1px solid var(--cp-line); border-radius: var(--cp-r); background: color-mix(in srgb, var(--cp-void) 30%, transparent); } .cp-bg-row.is-warn { --t: var(--cp-warning); border-color: color-mix(in srgb, var(--cp-warning) 35%, transparent); } .cp-bg-row.is-over { --t: var(--cp-danger); border-color: color-mix(in srgb, var(--cp-danger) 40%, transparent); } .cp-bg-top { display: flex; align-items: flex-start; gap: 10px; } .cp-bg-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .cp-bg-t b { overflow: hidden; color: var(--cp-strong); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .cp-bg-t small { overflow: hidden; color: var(--cp-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .cp-bg-per { flex: none; padding: 3px 8px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .cp-bg-ed { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--cp-r); background: none; color: var(--cp-muted); cursor: pointer; } .cp-bg-ed:hover { border-color: var(--cp-line-2); color: var(--cp-strong); } .cp-bg-bar { position: relative; height: 8px; margin: 10px 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 9%, transparent); } .cp-bg-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--t); transition: width var(--cp-dur-l) var(--cp-e); } .cp-bg-bar > em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--cp-strong); opacity: .55; } .cp-bg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--cp-muted); font-size: 12px; font-variant-numeric: tabular-nums; } .cp-bg-meta b { color: var(--cp-strong); font-size: 14px; font-weight: 600; } .cp-bg-pct { color: var(--t) !important; font-weight: 600; } .cp-bg-range { margin-left: auto; } /* Dialog */ .cp-bgd { position: fixed; inset: 0; z-index: 1070; display: grid; place-items: center; padding: 16px; background: rgba(6,7,10,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--cp-dur-s); } .cp-bgd.is-in { opacity: 1; } .cp-bgd-box { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: var(--cp-surface); box-shadow: var(--cp-shadow-pop); transform: translateY(8px); transition: transform var(--cp-dur-m) var(--cp-e); } .cp-bgd.is-in .cp-bgd-box { transform: none; } .cp-bgd-box > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--cp-line); } .cp-bgd-box > header b { color: var(--cp-strong); font-size: 15px; font-weight: 600; } .cp-bgd-box > header button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--cp-r); background: none; color: var(--cp-muted); cursor: pointer; } .cp-bgd-f { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 16px 18px 4px; } .cp-bgd-f label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--cp-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .cp-bgd-f label.is-wide { grid-column: 1 / -1; } .cp-bgd-f :is(input, select) { height: 40px; padding: 0 10px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: var(--cp-surface-2); color: var(--cp-strong); font: 500 14px/1 var(--cp-font); letter-spacing: 0; text-transform: none; } .cp-bgd-f :is(input, select):focus { outline: none; border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-bgd-hint { margin: 10px 18px 0; color: var(--cp-muted); font-size: 12px; line-height: 1.5; } .cp-bgd-box > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 18px; } .cp-bgd-box > footer button { height: 38px; padding: 0 16px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: transparent; color: var(--cp-text); font: 500 13.5px/1 var(--cp-font); cursor: pointer; } .cp-bgd-box > footer button.is-primary { border-color: transparent; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; } .cp-bgd-box > footer button.is-del { margin-right: auto; border-color: transparent; color: var(--cp-muted); } .cp-bgd-box > footer button.is-del:hover { color: var(--cp-danger); } @media (max-width: 575px) { .cp-bgd-f { grid-template-columns: 1fr; } .cp-bg-range { margin-left: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { .cp-bg-sk { animation: none; } .cp-bg-bar > i, .cp-bgd, .cp-bgd-box { transition: none; } } /* --------------------------------------------------------------------------- v5.63.0 · Hinweis-Karten (RISE „Gespeichert“ usw.) nicht mehr hinter Chat / Hilfe & Support RISE legt .app-alert mit z-index 100 ganz unten rechts ab – genau unter die Knöpfe (z-index 1040). Desktop/iPad: über den Knöpfen; Handy: oben unter der Kopfzeile wie die Chat-Mitteilung. --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .app-alert.animate { z-index: 1045 !important; bottom: calc(84px + env(safe-area-inset-bottom)) !important; max-width: min(420px, calc(100vw - 32px)); } html[data-theme]:not(#cp) body .rst-cc-toast { bottom: calc(84px + env(safe-area-inset-bottom)); } /* Neue Benachrichtigung (Ticket, Aufgabe …): oben rechts unter der Glocke statt unten auf den Knöpfen */ html[data-theme]:not(#cp) body .rst-notif-toast { top: calc(72px + env(safe-area-inset-top)); bottom: auto; right: 20px; max-width: min(380px, calc(100vw - 24px)); transform: translateY(-10px); text-decoration: none !important; } html[data-theme]:not(#cp) body .rst-notif-toast.show { transform: none; } html[data-theme]:not(#cp) body .rst-notif-toast-body span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html[data-theme]:not(#cp) body .rst-notif-toast-body em { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--cp-rust-hi); } @media (max-width: 767px) { html[data-theme]:not(#cp) body .rst-notif-toast { top: calc(62px + env(safe-area-inset-top)); left: 12px; right: 12px; max-width: none; } html[data-theme]:not(#cp) body .app-alert.animate { top: calc(62px + env(safe-area-inset-top)) !important; bottom: auto !important; right: 12px !important; left: 12px; max-width: none; } html[data-theme]:not(#cp) body .app-alert.animate .app-alert-message { max-width: none; } html[data-theme]:not(#cp) body .rst-cc-toast { top: calc(62px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -12px); } html[data-theme]:not(#cp) body .rst-cc-toast.is-in { transform: translate(-50%, 0); } } /* --------------------------------------------------------------------------- v5.63.0 · Zugriffsberechtigungen (access-pages.js): Benutzergruppen, Rechte, Benutzerrollen, Team, IP --------------------------------------------------------------------------- */ html.cp-acc-page body .cp-acc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; margin-left: 10px; padding: 0 6px; border-radius: var(--cp-r, 3px); background: var(--cp-hover, rgba(255,255,255,.05)); color: var(--cp-muted); font: 600 11.5px/1 var(--cp-font); letter-spacing: 0; vertical-align: 2px; } html.cp-acc-page body .cp-acc-dim { color: var(--cp-dim) !important; } html.cp-acc-page body .cp-acc-av { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: var(--cp-surface-3, #1d222c); color: var(--cp-muted); font: 700 9.5px/1 var(--cp-font); letter-spacing: 0; box-shadow: 0 0 0 2px var(--cp-surface-2, #12151c); } html.cp-acc-page body .cp-acc-av img { width: 100%; height: 100%; object-fit: cover; display: block; } html.cp-acc-page body .cp-acc-av.is-lg { width: 34px; height: 34px; font-size: 12px; box-shadow: none; } html.cp-acc-page body .cp-acc-av.is-more { background: var(--cp-hover); color: var(--cp-muted); font-size: 9px; } html.cp-acc-page body .cp-acc-stack { display: inline-flex; align-items: center; margin-right: 8px; padding-left: 6px; vertical-align: middle; } html.cp-acc-page body .cp-acc-stack > .cp-acc-av { margin-left: -6px; } html.cp-acc-page body .cp-acc-ib { display: inline-flex !important; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 1px !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: var(--cp-r, 3px) !important; background: transparent !important; color: var(--cp-muted) !important; cursor: pointer; box-shadow: none !important; transition: background .15s ease, color .15s ease, border-color .15s ease; } html.cp-acc-page body .cp-acc-ib:hover, html.cp-acc-page body .cp-acc-ib:focus-visible { background: var(--cp-hover) !important; border-color: var(--cp-line-2) !important; color: var(--cp-strong) !important; } html.cp-acc-page body .cp-acc-ib.is-del:hover { color: var(--cp-danger, #E5484D) !important; border-color: color-mix(in srgb, var(--cp-danger, #E5484D) 40%, transparent) !important; } html.cp-acc-page body .cp-acc-ib svg { width: 15px !important; height: 15px !important; } /* Benutzergruppen – Liste */ html.cp-acc-page body #role-list-box { overflow: hidden; } html.cp-acc-page body #role-list-box .cp-acc-ph { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 16px 14px 20px !important; border-bottom: 1px solid var(--cp-line); } html.cp-acc-page body #role-list-box .cp-acc-ph::before, html.cp-acc-page body #role-list-box .cp-acc-ph::after, html.cp-acc-page body .cp-ip .card-header::before, html.cp-acc-page body .cp-ip .card-header::after { display: none !important; } html.cp-acc-page body #role-list-box .cp-acc-ph h4 { margin: 0 !important; padding: 0 !important; display: inline-flex; align-items: center; min-width: 0; white-space: nowrap; } html.cp-acc-page body #role-list-box .cp-acc-ph .cp-acc-add { margin: 0 !important; } html.cp-acc-page body #role-list-box .cp-acc-ph .title-button-group { margin: 0 !important; float: none !important; } html.cp-acc-page body .cp-acc-add { display: inline-flex !important; align-items: center; gap: 7px; height: 34px; padding: 0 13px !important; white-space: nowrap; font-size: 13px !important; } html.cp-acc-page body .cp-acc-admin { display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 20px; border-bottom: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-rust) 5%, transparent); } html.cp-acc-page body .cp-acc-admin-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: var(--cp-r, 3px); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html.cp-acc-page body .cp-acc-admin-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } html.cp-acc-page body .cp-acc-admin-t b { color: var(--cp-strong); font-weight: 600; font-size: 14px; } html.cp-acc-page body .cp-acc-admin-t small, html.cp-acc-page body .cp-acc-admin-m em { color: var(--cp-muted); font-size: 12px; font-style: normal; } html.cp-acc-page body .cp-acc-admin-m { display: inline-flex; align-items: center; flex: none; } html.cp-acc-page body #role-table td { padding-top: 12px !important; padding-bottom: 12px !important; vertical-align: middle; } html.cp-acc-page body #role-table td:first-child { padding-left: 20px !important; } html.cp-acc-page body #role-table .role-row { display: block; color: var(--cp-strong) !important; font-weight: 500; font-size: 14px; text-decoration: none !important; } html.cp-acc-page body #role-table .cp-acc-rmeta { display: flex; align-items: center; flex-wrap: wrap; margin-top: 5px; color: var(--cp-muted); font-size: 12px; line-height: 1.3; } html.cp-acc-page body #role-table td.option { width: 110px !important; white-space: nowrap; text-align: right !important; padding-right: 12px !important; } html.cp-acc-page body #role-table tr { cursor: pointer; transition: background .15s ease; } html.cp-acc-page body #role-table tbody tr:hover { background: var(--cp-hover) !important; } html.cp-acc-page body #role-table tbody tr.active, html.cp-acc-page body #role-table tbody tr.active:hover { background: color-mix(in srgb, var(--cp-rust) 9%, transparent) !important; box-shadow: inset 3px 0 0 var(--cp-rust) !important; } html.cp-acc-page body #role-table tbody tr.active .role-row { color: var(--cp-strong) !important; } @media (hover: hover) and (min-width: 992px) { html.cp-acc-page body #role-table tbody tr:not(:hover):not(.active) .cp-acc-ib:not(:focus-visible) { opacity: .45; } } /* Benutzergruppen – Leer-Zustand rechts */ html.cp-acc-page body #empty-role.cp-acc-empty { display: flex !important; align-items: center; justify-content: center; height: auto !important; min-height: 360px !important; padding: 40px 24px !important; text-align: center; } html.cp-acc-page body .cp-acc-empty-in { display: flex; flex-direction: column; align-items: center; max-width: 420px; } html.cp-acc-page body .cp-acc-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 16px; border: 1px solid var(--cp-line-2); border-radius: 50%; background: var(--cp-hover); color: var(--cp-rust-hi); } html.cp-acc-page body .cp-acc-empty-in > b, html.cp-acc-page body .cp-acc-tempty > b { color: var(--cp-strong); font-size: 16px; font-weight: 600; } html.cp-acc-page body .cp-acc-empty-in p, html.cp-acc-page body .cp-acc-tempty p { margin: 8px 0 0; color: var(--cp-muted); font-size: 13.5px; line-height: 1.55; } html.cp-acc-page body .cp-acc-empty-in ul { margin: 18px 0 0; padding: 14px 16px; list-style: none; border: 1px solid var(--cp-line); border-radius: var(--cp-r, 3px); text-align: left; } html.cp-acc-page body .cp-acc-empty-in li { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; color: var(--cp-text); font-size: 13px; } html.cp-acc-page body .cp-acc-empty-in li svg { flex: none; margin-top: 2px; color: var(--cp-rust-hi); } /* Rechte-Formular · v5.76.0: Stufen (Voll / Eingeschränkt / Lesen / Kein Zugriff), Freigabe-Balken, Filter, Schalter, Fußleiste */ html.cp-acc-page body .cp-lv { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); color: var(--cp-dim); font: 600 11.5px/1 var(--cp-font); letter-spacing: .01em; white-space: nowrap; } html.cp-acc-page body .cp-lv[data-lv="full"], html.cp-acc-page body .cp-pm-sum[data-lv="full"] { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html.cp-acc-page body .cp-lv[data-lv="part"], html.cp-acc-page body .cp-pm-sum[data-lv="part"] { border-color: color-mix(in srgb, var(--cp-rust) 32%, transparent); background: transparent; color: var(--cp-rust-hi); } html.cp-acc-page body .cp-lv[data-lv="read"], html.cp-acc-page body .cp-pm-sum[data-lv="read"] { border-color: var(--cp-line-2); background: transparent; color: var(--cp-text); } html.cp-acc-page body .cp-lv[data-lv="none"], html.cp-acc-page body .cp-pm-sum[data-lv="none"] { border-color: transparent; background: var(--cp-hover); color: var(--cp-muted); } /* v5.76.7: --cp-dim lag knapp unter 4,5 : 1 */ html.cp-acc-page body .cp-lvm { display: flex; width: 100%; height: 6px; overflow: hidden; border-radius: var(--cp-r, 3px); background: var(--cp-hover); } html.cp-acc-page body .cp-lvm.is-sm { height: 3px; max-width: 200px; margin-top: 8px; } html.cp-acc-page body .cp-lvm i { display: block; height: 100%; flex: none; } html.cp-acc-page body .cp-lvm i[data-lv="full"] { background: var(--cp-rust); } html.cp-acc-page body .cp-lvm i[data-lv="part"] { background: color-mix(in srgb, var(--cp-rust) 48%, transparent); } html.cp-acc-page body .cp-lvm i[data-lv="read"] { background: color-mix(in srgb, var(--cp-muted) 45%, transparent); } html.cp-acc-page body .cp-pm-lg span::before, html.cp-acc-page body .cp-mx-lg span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--cp-hover); vertical-align: 0; } html.cp-acc-page body .cp-pm-lg span[data-lv="full"]::before, html.cp-acc-page body .cp-mx-lg span[data-lv="full"]::before { background: var(--cp-rust); } html.cp-acc-page body .cp-pm-lg span[data-lv="part"]::before, html.cp-acc-page body .cp-mx-lg span[data-lv="part"]::before { background: color-mix(in srgb, var(--cp-rust) 48%, transparent); } html.cp-acc-page body .cp-pm-lg span[data-lv="read"]::before, html.cp-acc-page body .cp-mx-lg span[data-lv="read"]::before { background: color-mix(in srgb, var(--cp-muted) 45%, transparent); } html.cp-acc-page body .cp-pm-lg span[data-lv="none"]::before, html.cp-acc-page body .cp-mx-lg span[data-lv="none"]::before { background: var(--cp-line-2); } html.cp-acc-page body .cp-pm-card { overflow: visible !important; } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-head { height: auto !important; min-height: 0 !important; margin: 0 !important; background: var(--cp-surface-2) !important; } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-foot { background: var(--cp-surface-2) !important; border-radius: 0 0 var(--cp-r, 3px) var(--cp-r, 3px); } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-head::before, html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-head::after { display: none !important; } html.cp-acc-page body .cp-pm-head { position: sticky; top: 0; z-index: 5; display: flex !important; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 22px 16px !important; background: var(--cp-surface-2) !important; border-bottom: 1px solid var(--cp-line) !important; border-radius: var(--cp-r, 3px) var(--cp-r, 3px) 0 0; } html.cp-acc-page body .cp-pm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; } html.cp-acc-page body .cp-pm-ht { display: flex; flex-direction: column; gap: 4px; min-width: 0; } html.cp-acc-page body .cp-pm-ht small { color: var(--cp-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-ht h4 { margin: 0 !important; color: var(--cp-strong) !important; font-size: 21px !important; font-weight: 600 !important; letter-spacing: -.01em !important; line-height: 1.2 !important; text-transform: none !important; } html.cp-acc-page body .cp-pm-mem { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin-top: 6px; min-height: 22px; } html.cp-acc-page body .cp-pm-mem em { color: var(--cp-muted); font-size: 12.5px; font-style: normal; } html.cp-acc-page body .cp-pm-assign { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--cp-line-2); color: var(--cp-rust-hi) !important; font-size: 12.5px; font-weight: 500; text-decoration: none !important; } html.cp-acc-page body .cp-pm-assign:hover { text-decoration: underline !important; } html.cp-acc-page body .cp-pm-score { display: flex; flex-direction: column; gap: 8px; width: 340px; max-width: 100%; } html.cp-acc-page body .cp-pm-sn { display: flex; align-items: baseline; gap: 8px; } html.cp-acc-page body .cp-pm-sn b { color: var(--cp-strong); font-size: 24px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } html.cp-acc-page body .cp-pm-sn span { color: var(--cp-muted); font-size: 12.5px; } html.cp-acc-page body .cp-pm-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--cp-muted); font-size: 11.5px; } html.cp-acc-page body .cp-pm-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } html.cp-acc-page body .cp-pm-search { position: relative; display: inline-flex; align-items: center; flex: 1 1 220px; margin: 0; } html.cp-acc-page body .cp-pm-search svg { position: absolute; left: 10px; color: var(--cp-dim); pointer-events: none; } html.cp-acc-page body .cp-pm-search input { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: var(--cp-bg, #0b0d12); color: var(--cp-strong); font: 400 13px/1 var(--cp-font); outline: none; } html.cp-acc-page body .cp-pm-search input:focus { border-color: var(--cp-rust-line); } html.cp-acc-page body .cp-pm-seg { display: inline-flex; flex: none; padding: 2px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: var(--cp-bg, #0b0d12); } html.cp-acc-page body .cp-pm-seg button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 2px; background: transparent; color: var(--cp-muted); font: 500 12.5px/1 var(--cp-font); cursor: pointer; white-space: nowrap; } html.cp-acc-page body .cp-pm-seg button b { color: var(--cp-dim); font-weight: 600; font-variant-numeric: tabular-nums; } html.cp-acc-page body .cp-pm-seg button:hover { color: var(--cp-strong); } html.cp-acc-page body .cp-pm-seg button[aria-pressed="true"] { background: var(--cp-hover); color: var(--cp-strong); box-shadow: inset 0 0 0 1px var(--cp-line-2); } html.cp-acc-page body .cp-pm-seg button[aria-pressed="true"] b { color: var(--cp-rust-hi); } html.cp-acc-page body .cp-pm-seg button[data-f="dirty"] b:not(:empty) { color: var(--cp-warning, #E0A53A); } html.cp-acc-page body .cp-pm-tg, html.cp-acc-page body .cp-acc-cmp { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); cursor: pointer; white-space: nowrap; } html.cp-acc-page body .cp-pm-tg:hover, html.cp-acc-page body .cp-acc-cmp:hover { background: var(--cp-hover); color: var(--cp-strong); } html.cp-acc-page body #permissions-form .card-body { padding: 14px 16px !important; } html.cp-acc-page body #permissions-form ul.permission-list { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; } html.cp-acc-page body #permissions-form li.cp-pm-g { margin: 16px 2px 2px !important; padding: 0 !important; border: 0 !important; color: var(--cp-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; list-style: none; } html.cp-acc-page body #permissions-form li.cp-pm-g:first-child { margin-top: 4px !important; } html.cp-acc-page body #permissions-form li.cp-pm-g::before, html.cp-acc-page body #permissions-form li.cp-pm-g::after { display: none !important; } html.cp-acc-page body #permissions-form li.cp-pm { margin: 0 !important; padding: 0 !important; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r, 3px); background: var(--cp-bg-soft, rgba(255,255,255,.012)); transition: border-color .15s ease, box-shadow .15s ease; } html.cp-acc-page body #permissions-form li.cp-pm::before, html.cp-acc-page body #permissions-form li.cp-pm::after { display: none !important; } html.cp-acc-page body #permissions-form li.cp-pm:not(.is-closed) { border-color: var(--cp-line-2) !important; } html.cp-acc-page body #permissions-form li.cp-pm.is-dirty { box-shadow: inset 3px 0 0 var(--cp-warning, #E0A53A); } html.cp-acc-page body .cp-pm-h { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto 16px; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 14px; border: 0; background: transparent; color: var(--cp-strong); text-align: left; cursor: pointer; font: inherit; } html.cp-acc-page body .cp-pm-h:hover { background: var(--cp-hover); } html.cp-acc-page body .cp-pm-h:focus-visible { outline: 2px solid var(--cp-rust-line); outline-offset: -2px; } html.cp-acc-page body .cp-pm-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--cp-r, 3px); background: var(--cp-hover); color: var(--cp-dim); } html.cp-acc-page body li.cp-pm.is-on .cp-pm-ico { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html.cp-acc-page body .cp-pm-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } html.cp-acc-page body .cp-pm-t { font-size: 14px; font-weight: 500; line-height: 1.3; } html.cp-acc-page body .cp-pm-t .cp-pm-help { margin-left: 6px; color: var(--cp-dim); vertical-align: -2px; } html.cp-acc-page body .cp-pm-d { overflow: hidden; color: var(--cp-muted); font-size: 12.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } html.cp-acc-page body .cp-pm-sum { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; height: 24px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--cp-r, 3px); font-size: 11.5px; font-weight: 600; white-space: nowrap; } html.cp-acc-page body .cp-pm-chg { display: none; padding: 3px 7px; border-radius: var(--cp-r, 3px); background: color-mix(in srgb, var(--cp-warning, #E0A53A) 14%, transparent); color: var(--cp-warning, #E0A53A); font-size: 11px; font-weight: 600; } html.cp-acc-page body li.cp-pm.is-dirty .cp-pm-chg { display: inline-flex; } html.cp-acc-page body .cp-pm-chev { display: inline-flex; color: var(--cp-dim); transition: transform .2s ease; } html.cp-acc-page body li.cp-pm:not(.is-closed) .cp-pm-chev { transform: rotate(180deg); } html.cp-acc-page body li.cp-pm.is-closed .cp-pm-b { display: none; } html.cp-acc-page body .cp-pm-b { padding: 10px 18px 16px 60px; border-top: 1px solid var(--cp-line); } html.cp-acc-page body .cp-pm-b div:has(> input.form-check-input) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; min-height: 38px; margin: 1px 0; padding: 2px 10px; border: 1px solid transparent; border-radius: var(--cp-r, 3px); transition: background .12s ease, border-color .12s ease; } html.cp-acc-page body .cp-pm-b div:has(> input.form-check-input):hover { background: var(--cp-hover); } html.cp-acc-page body .cp-pm-b div:has(> input[type="radio"]:checked) { border-color: var(--cp-rust-line); background: color-mix(in srgb, var(--cp-rust) 6%, transparent); } html.cp-acc-page body .cp-pm-b div:has(> input.form-check-input) > input.form-check-input { flex: none; margin: 0 !important; } html.cp-acc-page body .cp-pm-b div:has(> input.form-check-input) > label { flex: 1 1 0; min-width: 0; } html.cp-acc-page body .cp-pm-b label { margin: 0 !important; padding: 7px 0; color: var(--cp-text); font-size: 13.5px; line-height: 1.4; cursor: pointer; } html.cp-acc-page body .cp-pm-b input.form-check-input:checked + label { color: var(--cp-strong); } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-b input.form-check-input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; position: relative; width: 30px !important; height: 18px !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r, 3px) !important; background: var(--cp-hover) !important; background-image: none !important; box-shadow: none !important; cursor: pointer; transition: background .15s ease, border-color .15s ease; } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-b input.form-check-input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 2px; background: var(--cp-muted); transition: transform .15s ease, background .15s ease; } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-b input.form-check-input[type="checkbox"]:checked { border-color: var(--cp-rust) !important; background: var(--cp-rust) !important; } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-b input.form-check-input[type="checkbox"]:checked::after { transform: translateX(12px); background: #fff; } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-b input.form-check-input[type="radio"] { -webkit-appearance: none !important; appearance: none !important; position: relative; width: 16px !important; height: 16px !important; border: 1.5px solid var(--cp-line-2) !important; border-radius: 50% !important; background: transparent !important; background-image: none !important; box-shadow: none !important; cursor: pointer; } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-b input.form-check-input[type="radio"]:checked { border-color: var(--cp-rust) !important; } html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-b input.form-check-input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--cp-rust); } html.cp-acc-page body .cp-pm-b input.form-check-input:focus-visible { outline: 2px solid var(--cp-rust-line) !important; outline-offset: 2px; } @media (min-width: 1200px) { html.cp-acc-page body .cp-pm-b div:has(> div:nth-child(5) > input.form-check-input) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; padding: 0; border: 0; } html.cp-acc-page body .cp-pm-b div:has(> div:nth-child(5) > input.form-check-input):hover { background: transparent; } } html.cp-acc-page body .cp-pm-b [id$="_area"]:not(.hide), html.cp-acc-page body .cp-pm-b [id$="_container"]:not(.hide) { margin: 4px 0 4px 14px; padding-left: 12px; border-left: 1px solid var(--cp-line-2); } html.cp-acc-page body .cp-pm-b .form-group { margin: 0 !important; padding: 0 !important; border: 0 !important; } html.cp-acc-page body .cp-pm-b .specific_dropdown { flex: 1 0 100%; padding: 4px 0 8px 28px; } html.cp-acc-page body .cp-pm-none { padding: 26px; color: var(--cp-muted); text-align: center; list-style: none; } html.cp-acc-page body .cp-pm-foot { position: sticky; bottom: 0; z-index: 5; display: flex !important; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px !important; background: var(--cp-surface-2) !important; border-top: 1px solid var(--cp-line) !important; } html.cp-acc-page body .cp-pm-state { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; color: var(--cp-dim); font-size: 12.5px; } html.cp-acc-page body .cp-pm-foot.is-dirty .cp-pm-state { color: var(--cp-warning, #E0A53A); font-weight: 500; } html.cp-acc-page body .cp-pm-foot.is-saved .cp-pm-state { color: var(--cp-success, #3FB950); } html.cp-acc-page body .cp-pm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-warning, #E0A53A); } html.cp-acc-page body .cp-pm-state.is-ping { animation: cpPmPing .5s ease; } @keyframes cpPmPing { 30% { color: var(--cp-strong); transform: translateX(3px); } 60% { transform: translateX(-2px); } } html.cp-acc-page body .cp-pm-undo { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-text); font: 500 13px/1 var(--cp-font); cursor: pointer; } html.cp-acc-page body .cp-pm-undo:hover:not(:disabled) { background: var(--cp-hover); color: var(--cp-strong); } html.cp-acc-page body .cp-pm-undo:disabled { opacity: .45; cursor: default; } html.cp-acc-page body .cp-pm-foot .cp-pm-save { margin: 0 !important; } /* v5.76.0 · Gruppenliste, Vergleich, Rückfrage */ html.cp-acc-page body #role-table .cp-acc-rmeta { display: flex; flex-direction: column; align-items: stretch; } html.cp-acc-page body #role-table .cp-acc-rm-l { display: flex; align-items: center; flex-wrap: wrap; } html.cp-acc-page body .cp-acc-sep { margin: 0 6px; color: var(--cp-dim); } html.cp-acc-page body .cp-acc-nomem { color: var(--cp-dim); font-style: italic; } html.cp-acc-page[data-theme]:not(#cp) body #role-table td.option > a.cp-acc-open { display: none !important; } html.cp-acc-page body #role-table tbody tr.active .cp-lvm.is-sm { background: color-mix(in srgb, var(--cp-strong) 10%, transparent); } html.cp-acc-page body .cp-acc-admin-t .cp-lvm { max-width: 200px; } @media (hover: hover) and (min-width: 992px) { html.cp-acc-page body #role-table tbody tr:not(:hover):not(.active):not(:focus-within) .cp-acc-ib:not(:focus-visible) { opacity: 0; } } html.cp-acc-page body .cp-acc-ph .cp-acc-cmp { height: 34px; } html.cp-acc-page body #role-list-box .title-button-group { display: inline-flex !important; align-items: center; gap: 8px; } /* v5.194.1: Kopfzeile der Gruppenliste – Titel nie gequetscht (lief unter „Vergleichen“); Knöpfe werden je nach Spaltenbreite zu Symbolen */ html.cp-acc-page body #role-list-box { container-type: inline-size; container-name: cpacc; } html.cp-acc-page body #role-list-box .cp-acc-ph h4 { flex: 0 0 auto; min-width: max-content; } html.cp-acc-page body #role-list-box .cp-acc-ph .title-button-group { flex: 0 1 auto; min-width: 0; margin-left: auto !important; } @container cpacc (max-width: 470px) { html.cp-acc-page body #role-list-box .cp-acc-cmp span { display: none; } html.cp-acc-page body #role-list-box .cp-acc-cmp { width: 34px; padding: 0; justify-content: center; } } @container cpacc (max-width: 330px) { html.cp-acc-page body #role-list-box .cp-acc-add span { display: none; } html.cp-acc-page body #role-list-box .cp-acc-add { width: 34px; padding: 0 !important; justify-content: center; } } /* v5.194.1: Einstellungsmenü und Gruppenliste bleiben stehen, nur die Rechte rechts scrollen (vorher auf die Höhe der rechten Seite gestreckt) */ @media (min-width: 992px) { html.cp-acc-page body #page-content > .row > [class*="col-"]:first-child, html.cp-acc-page body #page-content .row > .col-md-4:has(> #role-list-box) { position: sticky; top: 14px; align-self: flex-start; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } html.cp-acc-page body .cp-acc-mx, body .cp-acc-dlg { position: fixed; inset: 0; z-index: 1065; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 6, 9, .62); backdrop-filter: blur(2px); animation: cpAccIn .16s ease; } @keyframes cpAccIn { from { opacity: 0; } } html.cp-mx-open body { overflow: hidden; } .cp-acc-mx-in { display: flex; flex-direction: column; width: min(1240px, 100%); max-height: min(88vh, 900px); border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: var(--cp-surface-2, #12151c); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); } .cp-acc-mx-in > header { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--cp-line); } .cp-acc-mx-in > header > div { flex: 1 1 auto; min-width: 0; } .cp-acc-mx-in > header small { color: var(--cp-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .cp-acc-mx-in > header h3 { margin: 2px 0 0 !important; color: var(--cp-strong); font-size: 19px !important; font-weight: 600; } .cp-mx-diff { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--cp-text); font-size: 13px; cursor: pointer; white-space: nowrap; } .cp-mx-diff input { accent-color: var(--cp-rust); width: 15px; height: 15px; } .cp-mx-scroll { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; } table.cp-mx { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } table.cp-mx th, table.cp-mx td { padding: 9px 14px; border-bottom: 1px solid var(--cp-line); text-align: left; vertical-align: top; } table.cp-mx thead th { position: sticky; top: 0; z-index: 2; padding-top: 12px; padding-bottom: 12px; background: var(--cp-surface-2, #12151c); vertical-align: bottom; } table.cp-mx tbody th { position: sticky; left: 0; z-index: 1; min-width: 210px; background: var(--cp-surface-2, #12151c); color: var(--cp-strong); font-weight: 500; white-space: nowrap; } table.cp-mx thead th.cp-mx-area { left: 0; z-index: 3; color: var(--cp-dim); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } table.cp-mx .cp-mx-ai { display: inline-flex; margin-right: 9px; color: var(--cp-dim); vertical-align: -2px; } table.cp-mx .cp-mx-col { min-width: 150px; } table.cp-mx thead th.cp-mx-col { text-transform: none !important; letter-spacing: 0 !important; } table.cp-mx .cp-mx-hd { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } table.cp-mx .cp-mx-col button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 6px 8px; margin: -6px -8px; border: 1px solid transparent; border-radius: var(--cp-r, 3px); background: transparent; text-align: left; cursor: pointer; font: inherit; } table.cp-mx .cp-mx-col button:hover, table.cp-mx .cp-mx-col button:focus-visible { border-color: var(--cp-line-2); background: var(--cp-hover); outline: none; } table.cp-mx .cp-mx-ch { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-strong); font-size: 13.5px; font-weight: 600; } table.cp-mx .cp-mx-col small { color: var(--cp-muted); font-size: 11.5px; font-weight: 400; } table.cp-mx .is-admin .cp-mx-ch { color: var(--cp-rust-hi); } table.cp-mx td small { display: block; max-width: 190px; margin-top: 4px; color: var(--cp-muted); font-size: 11.5px; line-height: 1.35; } table.cp-mx td.is-admin small { display: none; } table.cp-mx tr.cp-mx-g th { padding-top: 18px; padding-bottom: 6px; color: var(--cp-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } table.cp-mx tbody tr.cp-mx-r:hover > * { background-image: linear-gradient(var(--cp-hover), var(--cp-hover)); } table.cp-mx.is-diff tr.is-same { display: none; } .cp-acc-mx-in > footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px 20px; border-top: 1px solid var(--cp-line); color: var(--cp-muted); font-size: 12px; } .cp-mx-lg { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; } .cp-acc-mx .cp-lv { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); color: var(--cp-dim); font: 600 11.5px/1 var(--cp-font); white-space: nowrap; } .cp-acc-mx .cp-lv[data-lv="full"] { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-acc-mx .cp-lv[data-lv="part"] { border-color: color-mix(in srgb, var(--cp-rust) 32%, transparent); color: var(--cp-rust-hi); } .cp-acc-mx .cp-lv[data-lv="read"] { color: var(--cp-text); } .cp-acc-mx .cp-lv[data-lv="none"] { border-color: transparent; background: var(--cp-hover); } .cp-acc-mx .cp-mx-lg span::before { content: ""; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--cp-line-2); } .cp-acc-mx .cp-mx-lg span[data-lv="full"]::before { background: var(--cp-rust); } .cp-acc-mx .cp-mx-lg span[data-lv="part"]::before { background: color-mix(in srgb, var(--cp-rust) 48%, transparent); } .cp-acc-mx .cp-mx-lg span[data-lv="read"]::before { background: color-mix(in srgb, var(--cp-muted) 45%, transparent); } .cp-acc-mx .cp-acc-ib { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-muted); cursor: pointer; } .cp-acc-mx .cp-acc-ib:hover, .cp-acc-mx .cp-acc-ib:focus-visible { border-color: var(--cp-line-2); background: var(--cp-hover); color: var(--cp-strong); } .cp-acc-dlg { z-index: 1070; } .cp-acc-dlg-in { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; width: min(460px, 100%); padding: 22px 22px 18px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: var(--cp-surface-2, #12151c); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); } .cp-acc-dlg-ic { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--cp-r, 3px); background: color-mix(in srgb, var(--cp-warning, #E0A53A) 14%, transparent); color: var(--cp-warning, #E0A53A); } .cp-acc-dlg-in b { color: var(--cp-strong); font-size: 15.5px; font-weight: 600; line-height: 36px; } .cp-acc-dlg-in p { margin: 2px 0 0; color: var(--cp-muted); font-size: 13.5px; line-height: 1.55; } .cp-acc-dlg-b { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .cp-acc-dlg-b button { height: 36px; padding: 0 14px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-text); font: 500 13px/1 var(--cp-font); cursor: pointer; } .cp-acc-dlg-b button:hover, .cp-acc-dlg-b button:focus-visible { background: var(--cp-hover); color: var(--cp-strong); outline: none; } .cp-acc-dlg-b button[data-c="discard"]:hover { color: var(--cp-danger, #E5484D); } .cp-acc-dlg-b button.is-pri { border-color: transparent; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; font-weight: 600; } .cp-acc-dlg-b button.is-pri:hover, .cp-acc-dlg-b button.is-pri:focus-visible { filter: brightness(1.06); color: #fff; box-shadow: 0 0 0 2px var(--cp-surface-2, #12151c), 0 0 0 3px var(--cp-rust-line); } /* Benutzerrollen */ html.cp-acc-page body .cp-acc-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--cp-line); } html.cp-acc-page body .cp-acc-chips { display: flex; flex-wrap: wrap; gap: 6px; } html.cp-acc-page body .cp-acc-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); cursor: pointer; } html.cp-acc-page body .cp-acc-chip b { color: var(--cp-muted); font-weight: 600; } html.cp-acc-page body .cp-acc-chip:hover { background: var(--cp-hover); color: var(--cp-strong); } html.cp-acc-page body .cp-acc-chip.is-zero { color: var(--cp-dim); } html.cp-acc-page body .cp-acc-chip.is-sel { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html.cp-acc-page body .cp-acc-chip.is-sel b { color: var(--cp-rust-hi); } html.cp-acc-page body .cp-acc-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 12px; border: 1px solid var(--cp-line); border-left: 3px solid var(--cp-warning, #E5A23A); border-radius: var(--cp-r, 3px); background: color-mix(in srgb, var(--cp-warning, #E5A23A) 6%, transparent); color: var(--cp-text); font-size: 13px; line-height: 1.5; } html.cp-acc-page body .cp-acc-note svg { flex: none; margin-top: 2px; color: var(--cp-warning, #E5A23A); } html.cp-acc-page body #user-roles-table td { vertical-align: middle; padding-top: 11px !important; padding-bottom: 11px !important; } html.cp-acc-page body #user-roles-table td.cp-acc-who { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; } html.cp-acc-page body #user-roles-table td.cp-acc-who > .cp-acc-av { grid-row: 1 / span 2; } html.cp-acc-page body #user-roles-table td.cp-acc-who > a { color: var(--cp-strong) !important; font-weight: 500; font-size: 14px; align-self: end; } html.cp-acc-page body #user-roles-table td.cp-acc-who > small { color: var(--cp-muted); font-size: 12px; align-self: start; min-height: 1em; } html.cp-acc-page body .cp-acc-you { display: inline-block; padding: 1px 6px; border-radius: var(--cp-r, 3px); background: var(--cp-hover); color: var(--cp-text); font-size: 11px; font-weight: 600; } html.cp-acc-page body .cp-acc-rc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); color: var(--cp-text); font-size: 12.5px; font-weight: 500; } html.cp-acc-page body .cp-acc-rc.is-admin { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html.cp-acc-page body .cp-acc-rc.is-member { color: var(--cp-muted); } /* Team */ html.cp-acc-page body .cp-acc-tempty { display: flex; flex-direction: column; align-items: center; max-width: 460px; margin: 0 auto; padding: 34px 16px; text-align: center; white-space: normal; text-transform: none; letter-spacing: 0; font-size: 14px; } html.cp-acc-page body .cp-acc-tempty .cp-acc-empty-ic { width: 52px; height: 52px; } html.cp-acc-page[data-theme]:not(#cp) body td.cp-acc-tcell { padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; } html.cp-acc-page[data-theme]:not(#cp) body td.cp-acc-tcell::before, html.cp-acc-page[data-theme]:not(#cp) body td.cp-acc-tcell::after { display: none !important; content: none !important; } html.cp-acc-page body .cp-ip .cp-ip-hint { display: none !important; } html.cp-acc-page body .cp-acc-cta { display: inline-flex; align-items: center; gap: 7px; height: 36px; margin-top: 16px; padding: 0 16px; border: 0; border-radius: var(--cp-r, 3px); background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; font: 600 13px/1 var(--cp-font); cursor: pointer; } html.cp-acc-page body .cp-acc-cta:hover { filter: brightness(1.06); } /* IP-Einschränkung */ html.cp-acc-page body .cp-ip .card-header { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; } html.cp-acc-page body .cp-ip .card-header h4 { margin: 0 !important; } html.cp-acc-page body .cp-ip-st { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); color: var(--cp-muted); font-size: 12px; font-weight: 600; white-space: nowrap; } html.cp-acc-page body .cp-ip-st.is-on { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html.cp-acc-page body .cp-ip-desc { margin: -6px 0 12px; color: var(--cp-muted); font-size: 13px; line-height: 1.55; } html.cp-acc-page body .cp-ip-desc b { color: var(--cp-text); font-weight: 600; } html.cp-acc-page body .cp-ip-ta { min-height: 140px !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 13.5px !important; line-height: 1.7 !important; } html.cp-acc-page body .cp-ip-hint { display: flex; align-items: center; gap: 6px; color: var(--cp-dim); font-size: 12.5px; } html.cp-acc-page body .cp-ip-check { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } html.cp-acc-page body .cp-ip-check:empty { display: none; } html.cp-acc-page body .cp-ip-ok, html.cp-acc-page body .cp-ip-bad { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--cp-muted); } html.cp-acc-page body .cp-ip-ok svg { color: var(--cp-success, #3FB950); } html.cp-acc-page body .cp-ip-bad { color: var(--cp-danger, #E5484D); } html.cp-acc-page body .cp-ip-bad.is-soft { color: var(--cp-warning, #E5A23A); } html.cp-acc-page body .cp-ip-bad code, html.cp-acc-page body .cp-ip-me code { padding: 1px 5px; border-radius: var(--cp-r, 3px); background: var(--cp-hover); color: var(--cp-strong); font-size: 12px; } html.cp-acc-page body .cp-ip-me { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--cp-line); color: var(--cp-muted); font-size: 13px; } html.cp-acc-page body .cp-ip-me em { font-style: normal; font-weight: 600; } html.cp-acc-page body .cp-ip-me em.is-ok { color: var(--cp-success, #3FB950); } html.cp-acc-page body .cp-ip-me em.is-warn { color: var(--cp-warning, #E5A23A); } html.cp-acc-page body .cp-ip-add { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); cursor: pointer; } html.cp-acc-page body .cp-ip-add:hover { background: var(--cp-hover); color: var(--cp-strong); } html.cp-acc-page body .cp-ip-warn { flex: 1 0 100%; display: flex; align-items: center; gap: 7px; margin: 0; color: var(--cp-warning, #E5A23A); font-size: 12.5px; } /* iPad / Handy */ @media (max-width: 1199px) { html.cp-acc-page body #role-list-box .cp-acc-add span { display: none; } html.cp-acc-page body #role-list-box .cp-acc-add { width: 34px; padding: 0 !important; justify-content: center; } } @media (max-width: 991px) { html.cp-acc-page body .cp-pm-head { position: static; padding: 16px !important; } html.cp-acc-page body .cp-pm-score { width: 100%; } html.cp-acc-page body .cp-pm-search { flex: 1 1 180px; } html.cp-acc-page body .cp-acc-cmp span { display: none; } html.cp-acc-page body #role-list-box { margin-bottom: 14px; } html.cp-acc-page body #empty-role.cp-acc-empty { min-height: 0 !important; padding: 28px 18px !important; } } @media (max-width: 575px) { html.cp-acc-page body .cp-pm-h { grid-template-columns: 28px minmax(0, 1fr) auto 14px; gap: 10px; padding: 10px 12px; } html.cp-acc-page body .cp-pm-ico { width: 28px; height: 28px; } html.cp-acc-page body .cp-pm-chg { display: none !important; } html.cp-acc-page body .cp-pm-sum { min-width: 0; } html.cp-acc-page body .cp-pm-b { padding: 8px 12px 14px; } html.cp-acc-page body .cp-pm-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: 100%; } html.cp-acc-page body .cp-pm-seg button { justify-content: space-between; min-width: 0; } html.cp-acc-page body .cp-pm-tg { flex: 1 1 100%; justify-content: center; } html.cp-acc-page body .cp-pm-d { white-space: normal; } html.cp-acc-page body .cp-pm-assign { flex: 1 0 100%; margin: 6px 0 0; padding: 0; border: 0; } html.cp-acc-page body .cp-pm-undo { padding: 0 10px; } html.cp-acc-page body .cp-pm-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important; } html.cp-acc-page body .cp-acc-bar { padding: 10px 14px; } html.cp-acc-page body #user-roles-table td.cp-acc-who { grid-template-columns: 30px 1fr; column-gap: 10px; } html.cp-acc-page body #user-roles-table td.cp-acc-who > .cp-acc-av { width: 30px; height: 30px; } } /* v5.76.0: Handy/iPad – .page-container (overflow:auto) hebt „sticky“ auf; bei ungespeicherten Änderungen steht die Fußleiste deshalb fest über der unteren Menüleiste (58 px + Rand + sichere Zone) */ @media (max-width: 991px) { html.cp-acc-page body .cp-pm-foot.is-dirty { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 1031; padding: 10px 14px !important; border-radius: 0 !important; box-shadow: 0 -12px 28px -18px rgba(0, 0, 0, .8); } html.cp-acc-page body #permissions-form:has(.cp-pm-foot.is-dirty) .card-body { padding-bottom: 76px !important; } /* Einblende-Animation (mui-fade-in, transform) der Karte und backdrop-filter des Rahmens machen „fixed“ sonst relativ zur Karte */ html.cp-acc-page[data-theme]:not(#cp) body #permissions-form .cp-pm-card, html.cp-acc-page[data-theme]:not(#cp) body .tab-content:has(> #permissions-form) { animation: none !important; transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } @media (max-width: 767px) { html.cp-acc-page body .cp-pm-foot.is-dirty { bottom: calc(59px + env(safe-area-inset-bottom, 0px)); } html.cp-acc-page body .cp-pm-foot.is-dirty .cp-pm-state { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.3; } } @media (prefers-reduced-motion: reduce) { html.cp-acc-page body .cp-pm-chev, html.cp-acc-page body #role-table tr { transition: none; } } /* --------------------------------------------------------------------------- v5.63.0 · Profitabilität (#/profitabilitaet, profitability.js) --------------------------------------------------------------------------- */ .pf-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pf-tbl td small { display: block; margin-top: 2px; color: var(--cp-muted); font-size: 11.5px; white-space: nowrap; } .pf-tbl td a { color: var(--cp-strong); text-decoration: none; } .pf-tbl td a:hover b { color: var(--cp-rust-hi); } .pf-tbl td b { font-weight: 500; } .pf-tbl td.is-neg, .pf-tbl td.is-neg b { color: var(--cp-danger, #E5484D); } .pf-tbl th:not(:first-child), .pf-tbl td:not(:first-child) { text-align: right; } .pf-m { display: inline-block; min-width: 54px; padding: 3px 8px; border-radius: var(--cp-r, 3px); background: var(--cp-hover); color: var(--cp-muted); font-size: 12px; font-weight: 600; text-align: center; } .pf-m.is-good { background: rgba(63,185,132,.12); color: var(--cp-success); } .pf-m.is-mid { background: rgba(224,165,58,.12); color: var(--cp-warning); } .pf-m.is-bad { background: rgba(229,72,77,.12); color: var(--cp-danger, #E5484D); } .pf-src { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--cp-r, 3px); background: var(--cp-hover); color: var(--cp-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; } .pf-src.is-own { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .pf-rates { max-height: min(56vh, 520px); overflow-y: auto; } .pf-rates label.is-wide { grid-column: 1 / -1; } @media (max-width: 1199px) { .pf-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --------------------------------------------------------------------------- v5.63.0 · Auslastung (#/auslastung, capacity.js) --------------------------------------------------------------------------- */ .cap-leg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--cp-muted); font-size: 12px; } .cap-leg i { width: 10px; height: 10px; margin-left: 8px; border-radius: 2px; } .cap-leg i.is-low, .cap-c.is-low .cap-bar i { background: color-mix(in srgb, var(--cp-text) 22%, transparent); } .cap-leg i.is-ok, .cap-c.is-ok .cap-bar i { background: var(--cp-success); } .cap-leg i.is-full, .cap-c.is-full .cap-bar i { background: var(--cp-warning); } .cap-leg i.is-over, .cap-c.is-over .cap-bar i { background: var(--cp-danger, #E5484D); } .cap-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; -webkit-overflow-scrolling: touch; } .cap-grid { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 6px; font-variant-numeric: tabular-nums; } .cap-grid thead th { padding: 2px 4px 6px; color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: left; white-space: nowrap; vertical-align: bottom; } .cap-grid thead th b { display: block; color: var(--cp-text); font-size: 12.5px; letter-spacing: .02em; } .cap-grid thead th small { display: block; margin-top: 2px; color: var(--cp-dim); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; } .cap-grid thead th.is-now b { color: var(--cp-rust-hi); } .cap-grid th.cap-p { position: sticky; left: 0; z-index: 1; width: 220px; min-width: 180px; background: var(--cp-surface); } .cap-grid tbody th.cap-p { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 0; font-weight: 400; text-align: left; } .cap-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--cp-surface-3); color: var(--cp-muted); font-size: 11.5px; font-weight: 700; } .cap-av img { width: 100%; height: 100%; object-fit: cover; } .cap-pn { display: grid; gap: 2px; min-width: 0; } .cap-pn b { overflow: hidden; color: var(--cp-strong); font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .cap-pn small { color: var(--cp-muted); font-size: 11.5px; white-space: nowrap; } .cap-grid td { padding: 0; vertical-align: top; } html[data-theme]:not(#cp):not(#cq) body .cap-c { position: relative; display: grid; gap: 4px; width: 100%; min-width: 96px; min-height: 74px; padding: 10px 11px 9px; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r, 3px) !important; background: color-mix(in srgb, var(--cp-text) 2%, transparent) !important; color: var(--cp-text); text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cap-c:hover, html[data-theme]:not(#cp):not(#cq) body .cap-c:focus-visible { border-color: var(--cp-line-2) !important; background: var(--cp-hover) !important; outline: none; } .cap-grid td.is-now .cap-c { border-color: color-mix(in srgb, var(--cp-rust) 30%, var(--cp-line)) !important; } .cap-pct { color: var(--cp-strong); font-size: 17px; font-weight: 600; line-height: 1.1; } .cap-c.is-low .cap-pct, .cap-c.is-off .cap-pct { color: var(--cp-muted); } .cap-c.is-full .cap-pct { color: var(--cp-warning); } .cap-c.is-over .cap-pct { color: var(--cp-danger, #E5484D); } html[data-theme]:not(#cp):not(#cq) body .cap-c.is-over { background: color-mix(in srgb, var(--cp-danger, #E5484D) 7%, transparent) !important; } .cap-h { color: var(--cp-muted); font-size: 11.5px; white-space: nowrap; } .cap-bar { display: block; height: 4px; margin-top: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); } .cap-bar i { display: block; height: 100%; border-radius: inherit; transition: width .4s var(--cp-e, ease); } .cap-lv { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 3px; color: var(--cp-warning); font-size: 10.5px; font-weight: 600; } .cap-n { position: absolute; right: 9px; bottom: 12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 3px; background: var(--cp-hover); color: var(--cp-muted); font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; } .cap-lv + .cap-n, .cap-c:has(.cap-lv) .cap-n { bottom: 12px; } .cap-grid .cap-nd { width: 110px; min-width: 96px; padding: 10px 4px; color: var(--cp-text); font-size: 13px; text-align: left; vertical-align: middle; } .cap-grid thead .cap-nd { vertical-align: bottom; } .cap-grid td.cap-nd span.is-zero { color: var(--cp-dim); } .cap-grid td.cap-nd small { display: block; margin-top: 3px; font-size: 11.5px; } .cap-grid td.cap-nd small.is-late { color: var(--cp-danger, #E5484D); } .cap-note { margin: 12px 2px 0; color: var(--cp-dim); font-size: 12px; line-height: 1.5; } .cap-pop { position: fixed; z-index: 1075; max-height: min(70vh, 520px); display: flex; flex-direction: column; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: var(--cp-surface-2); box-shadow: var(--cp-shadow-pop); opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; } .cap-pop.is-in { opacity: 1; transform: none; } .cap-pop.is-sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; max-height: 78vh; padding-bottom: env(safe-area-inset-bottom); transform: translateY(16px); } .cap-pop.is-sheet.is-in { transform: none; } .cap-pop > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 16px; border-bottom: 1px solid var(--cp-line); } .cap-pop > header b { display: block; color: var(--cp-strong); font-size: 14.5px; font-weight: 600; } .cap-pop > header small { color: var(--cp-muted); font-size: 12px; } .cap-pop > header button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--cp-r, 3px); background: none; color: var(--cp-muted); cursor: pointer; } .cap-pop > header button:hover { background: var(--cp-hover); color: var(--cp-strong); } .cap-pop-s { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; border-bottom: 1px solid var(--cp-line); color: var(--cp-muted); font-size: 12.5px; } .cap-pop-s span { display: inline-flex; align-items: center; gap: 4px; } .cap-pop-s b { color: var(--cp-strong); } .cap-pop ul { flex: 1 1 auto; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; } .cap-pop li { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--cp-line); } .cap-pop li:last-child { border-bottom: 0; } .cap-pop li > a { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; color: var(--cp-text); text-decoration: none; } .cap-pop li > a b { overflow: hidden; color: var(--cp-strong); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .cap-pop li > a:hover b { color: var(--cp-rust-hi); } .cap-pop li > a small { overflow: hidden; color: var(--cp-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .cap-pop li.is-late > a small { color: var(--cp-danger, #E5484D); } .cap-pop li label { flex: none; display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--cp-muted); font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cap-pop li input { width: 52px; height: 30px; padding: 0 6px !important; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r, 3px) !important; background: var(--cp-bg, #0b0d12) !important; color: var(--cp-strong) !important; font: 500 13px/1 var(--cp-font) !important; text-align: right; } html[data-theme]:not(#cp):not(#cq) body .cap-pop li input:focus { border-color: var(--cp-rust-line) !important; outline: none; } .cap-pop-empty, .cap-pop-more { margin: 0; padding: 16px; color: var(--cp-muted); font-size: 13px; } .cap-pop-more { padding: 8px 16px; font-size: 12px; } .cap-pop > footer { padding: 10px 16px; border-top: 1px solid var(--cp-line); color: var(--cp-dim); font-size: 11.5px; line-height: 1.45; } @media (max-width: 767px) { .cap-grid th.cap-p { width: 150px; min-width: 140px; } .cap-pn small { display: none; } html[data-theme]:not(#cp):not(#cq) body .cap-c { min-width: 84px; min-height: 64px; padding: 8px 9px; } .cap-pct { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .cap-pop, .cap-bar i { transition: none; } } /* --------------------------------------------------------------------------- v5.63.0 · Arbeitskosten & nicht abgerechnete Stunden (labour.js): Projekt, Aufgabe, Kunde, Kunden-Überblick --------------------------------------------------------------------------- */ .cp-lb-card { margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--cp-line); border-radius: var(--cp-r, 3px); background: var(--cp-surface); } .cp-lb-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 0 0 12px; color: var(--cp-strong); font-size: 14.5px; } .cp-lb-ch b { font-weight: 600; } .cp-lb-ch svg, .cp-lb-client .cp-co-ch svg, .cp-lb-ov .cp-co-ch svg { flex: none; color: var(--cp-rust-hi); } .cp-lb-ch > span { margin-left: auto; color: var(--cp-dim); font-size: 12px; } .cp-lb-sk { height: 64px; border-radius: var(--cp-r, 3px); background: linear-gradient(90deg, var(--cp-surface), color-mix(in srgb, var(--cp-text) 5%, var(--cp-surface)), var(--cp-surface)); background-size: 200% 100%; animation: taSk 1.2s linear infinite; } .cp-lb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .cp-lb-st { display: grid; gap: 3px; min-width: 0; padding: 11px 13px; border: 1px solid var(--cp-line); border-radius: var(--cp-r, 3px); background: color-mix(in srgb, var(--cp-text) 2%, transparent); } .cp-lb-st small { color: var(--cp-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .cp-lb-st b { color: var(--cp-strong); font-size: 19px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; } .cp-lb-st > span { color: var(--cp-muted); font-size: 12px; line-height: 1.4; } .cp-lb-st.is-neg b { color: var(--cp-danger, #E5484D); } .cp-lb-st.is-warn { border-color: color-mix(in srgb, var(--cp-warning) 45%, var(--cp-line)); } .cp-lb-st.is-warn b { color: var(--cp-warning); } .cp-lb-st .is-late { color: var(--cp-danger, #E5484D); } .cp-lb-m { display: inline-block; padding: 0 6px; border-radius: var(--cp-r, 3px); font-weight: 600; } .cp-lb-m.is-good { background: rgba(63,185,132,.12); color: var(--cp-success); } .cp-lb-m.is-mid { background: rgba(224,165,58,.12); color: var(--cp-warning); } .cp-lb-m.is-bad { background: rgba(229,72,77,.12); color: var(--cp-danger, #E5484D); } .cp-lb-ppl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; margin: 12px 0 0; padding: 0; list-style: none; } .cp-lb-ppl li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; grid-template-rows: auto 3px; align-items: center; column-gap: 8px; row-gap: 4px; padding: 6px 0; font-size: 12.5px; } .cp-lb-ppl .cp-lb-pn { overflow: hidden; color: var(--cp-text); text-overflow: ellipsis; white-space: nowrap; } .cp-lb-ppl em { color: var(--cp-muted); font-style: normal; font-variant-numeric: tabular-nums; } .cp-lb-ppl b { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .cp-lb-ppl .cp-lb-bar { grid-column: 2 / -1; } .cp-lb-av { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; overflow: hidden; border-radius: 50%; background: var(--cp-surface-3); color: var(--cp-muted); font-size: 9px; font-weight: 700; } .cp-lb-av img { width: 100%; height: 100%; object-fit: cover; } .cp-lb-bar { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); } .cp-lb-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #D24A20, #FF7A4D); } .cp-lb-bar.is-lg { height: 5px; margin: 8px 0 4px; } .cp-lb-bar.is-ok > i { background: var(--cp-success); } .cp-lb-bar.is-full > i { background: var(--cp-warning); } .cp-lb-bar.is-over > i { background: var(--cp-danger, #E5484D); } .cp-lb-est { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--cp-muted); } .cp-lb-est b { color: var(--cp-strong); font-size: 15px; font-weight: 600; } .cp-lb-est small { color: var(--cp-dim); font-size: 11.5px; } .cp-lb-est em { font-style: normal; font-weight: 600; color: var(--cp-text); } .cp-lb-est.is-over em { color: var(--cp-danger, #E5484D); } .cp-lb-est.is-full em { color: var(--cp-warning); } .cp-lb-note { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--cp-muted); font-size: 12px; } .cp-lb-note.is-warn { color: var(--cp-danger, #E5484D); } .cp-lb-note svg { flex: none; } .cp-lb-task { margin-top: 14px; } /* Kunde */ .cp-lb-client .cp-co-ch, .cp-lb-ov .cp-co-ch { flex-wrap: wrap; } .cp-lb-rate { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--cp-muted); font-size: 12px; font-weight: 500; } html[data-theme]:not(#cp):not(#cq) body .cp-lb-ib { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent !important; border-radius: var(--cp-r, 3px) !important; background: transparent !important; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-lb-ib:hover { border-color: var(--cp-line-2) !important; background: var(--cp-hover) !important; color: var(--cp-strong); } .cp-lb-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 18px; padding: 14px 16px; border: 1px solid var(--cp-line); border-radius: var(--cp-r, 3px); background: color-mix(in srgb, var(--cp-text) 2%, transparent); } .cp-lb-open.is-on { border-color: color-mix(in srgb, var(--cp-rust) 30%, var(--cp-line)); } .cp-lb-open.is-warn { border-color: color-mix(in srgb, var(--cp-warning) 50%, var(--cp-line)); border-left: 3px solid var(--cp-warning); background: color-mix(in srgb, var(--cp-warning) 5%, transparent); } .cp-lb-oh { display: grid; gap: 2px; } .cp-lb-oh small { color: var(--cp-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .cp-lb-oh b { color: var(--cp-strong); font-size: 22px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; } .cp-lb-open.is-warn .cp-lb-oh b { color: var(--cp-warning); } .cp-lb-open.is-zero .cp-lb-oh b { color: var(--cp-muted); } .cp-lb-oh span { color: var(--cp-text); font-size: 12.5px; } .cp-lb-om { color: var(--cp-muted); font-size: 12.5px; line-height: 1.5; } .cp-lb-om em { color: var(--cp-warning); font-style: normal; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-lb-mark { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r, 3px) !important; background: transparent !important; color: var(--cp-strong) !important; font: 500 12.5px/1 var(--cp-font); white-space: nowrap; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-lb-mark:hover { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-lb-mark:disabled { opacity: .6; cursor: default; } .cp-lb-list { margin: 10px 0 0; padding: 0; list-style: none; } .cp-lb-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 88px; align-items: center; gap: 12px; padding: 8px 2px; border-top: 1px solid var(--cp-line); font-size: 13px; } .cp-lb-list li:first-child { border-top: 0; } .cp-lb-list a, .cp-lb-list span { overflow: hidden; color: var(--cp-text); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; } .cp-lb-list a:hover { color: var(--cp-rust-hi); } .cp-lb-list em { color: var(--cp-muted); font-style: normal; font-size: 12.5px; font-variant-numeric: tabular-nums; } .cp-lb-list b { color: var(--cp-strong); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .cp-lb-list li.is-warn em { color: var(--cp-warning); } .cp-lb-sub { margin: 14px 0 0; color: var(--cp-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .cp-lb-stats.is-client { margin-top: 14px; } .cp-lb-client, .cp-lb-ov { margin-bottom: 16px; } .cp-lb-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 1080; display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 16px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: var(--cp-surface-2); color: var(--cp-strong); font-size: 13.5px; box-shadow: var(--cp-shadow-pop); transform: translate(-50%, 10px); opacity: 0; transition: opacity .2s ease, transform .2s ease; } .cp-lb-toast.is-in { transform: translate(-50%, 0); opacity: 1; } .cp-lb-toast button { height: 30px; padding: 0 12px; border: 1px solid var(--cp-rust-line); border-radius: var(--cp-r, 3px); background: var(--cp-rust-soft); color: var(--cp-rust-hi); font: 600 12.5px/1 var(--cp-font); cursor: pointer; } @media (max-width: 767px) { .cp-lb-open { grid-template-columns: 1fr; } html[data-theme]:not(#cp):not(#cq) body .cp-lb-mark { justify-content: center; width: 100%; } .cp-lb-list li { grid-template-columns: minmax(0, 1fr) auto; } .cp-lb-list li b { grid-column: 2; } .cp-lb-list li em { grid-column: 1; grid-row: 2; } .cp-lb-list li > a, .cp-lb-list li > span { grid-column: 1; grid-row: 1; } .cp-lb-list li > b { grid-row: 1 / span 2; } .cp-lb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-lb-toast { left: 12px; right: 12px; transform: translateY(10px); } .cp-lb-toast.is-in { transform: none; } } @media (prefers-reduced-motion: reduce) { .cp-lb-sk { animation: none; } .cp-lb-toast { transition: none; } } /* --------------------------------------------------------------------------- v5.64.0 · Touch-Flächen für Finger (iPad/Handy): Mess-Rundgang fand 17–26 px hohe Ziele (Stempeluhr, Kennzahl-Chips, Export, Erinnerungen im ⋯-Menü, Portal-Kontakt, Aufgaben-Häkchen) --------------------------------------------------------------------------- */ @media (pointer: coarse) { html[data-theme]:not(#cp):not(#cq) body .cp-clk-go { width: 34px !important; height: 34px !important; min-width: 34px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-clk-main, html[data-theme]:not(#cp):not(#cq) body .cp-clk-chip { min-height: 34px !important; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-kpi-flag, .cp-overdue, .cp-hint-all, .cp-crm-hbtn) { display: inline-flex !important; align-items: center; min-height: 36px !important; } html[data-theme]:not(#cp):not(#cq) body .rst-mobile-overflow-item > a.nav-link, html[data-theme]:not(#cp):not(#cq) body #reminder-icon { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px !important; min-height: 44px !important; } html[data-theme]:not(#cp):not(#cq) body .update-todo-status-checkbox { min-width: 36px; min-height: 36px; display: inline-flex !important; align-items: center; justify-content: center; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-clinks a { display: inline-flex !important; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px !important; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); } html[data-theme]:not(#cp):not(#cq) body .clickable.p15 > a:only-child, html[data-theme]:not(#cp):not(#cq) body #pwa-install-banner a { display: inline-flex; align-items: center; min-height: 40px; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-lb-ib, .cp-acc-ib) { width: 40px !important; height: 40px !important; } html[data-theme]:not(#cp):not(#cq) body .page-title .star-icon, html[data-theme]:not(#cp):not(#cq) body a.star-icon { min-width: 40px; min-height: 40px; display: inline-flex !important; align-items: center; justify-content: center; } } .cap-pop li.is-hidden .cap-pop-hid { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; color: var(--cp-muted); } .cap-pop li.is-hidden .cap-pop-hid b { color: var(--cp-muted); font-weight: 500; font-style: italic; font-size: 13px; } .cap-pop li.is-hidden .cap-pop-hid small { font-size: 11.5px; } /* --------------------------------------------------------------------------- v5.64.0 · Stabilität: Hinweise (stability.js), Parallele Änderungen (record-guard.js), Sitzung (error-monitor.js) --------------------------------------------------------------------------- */ .cp-st-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 3001; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 24px)); padding: 11px 10px 11px 14px; border: 1px solid color-mix(in srgb, var(--cp-danger, #E5484D) 45%, var(--cp-line-2)); border-left: 3px solid var(--cp-danger, #E5484D); border-radius: var(--cp-r, 3px); background: var(--cp-surface-2); color: var(--cp-strong); font: 500 13.5px/1.45 var(--cp-font); box-shadow: var(--cp-shadow-pop); transform: translate(-50%, 10px); opacity: 0; transition: opacity .2s ease, transform .2s ease; } .cp-st-toast.is-in { transform: translate(-50%, 0); opacity: 1; } .cp-st-toast > svg { flex: none; color: var(--cp-danger, #E5484D); } .cp-st-toast > span { flex: 1 1 auto; } .cp-st-toast > button { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-strong); font: 600 12.5px/1 var(--cp-font); cursor: pointer; } .cp-st-toast > button.cp-st-x { width: 32px; padding: 0; border-color: transparent; color: var(--cp-muted); font-size: 18px; } .cp-rg-warn { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--cp-warning) 50%, var(--cp-line)); border-left: 3px solid var(--cp-warning); border-radius: var(--cp-r, 3px); background: color-mix(in srgb, var(--cp-warning) 8%, var(--cp-surface-2)); color: var(--cp-text); } .cp-rg-warn > svg { flex: none; margin-top: 1px; color: var(--cp-warning); } .cp-rg-t { flex: 1 1 260px; display: grid; gap: 3px; font-size: 13px; line-height: 1.45; } .cp-rg-t b { color: var(--cp-strong); font-size: 13.5px; } .cp-rg-act { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-rg-act button { height: 34px; padding: 0 13px; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r, 3px) !important; background: transparent !important; color: var(--cp-strong) !important; font: 600 12.5px/1 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-rg-act button.is-warn { border-color: color-mix(in srgb, var(--cp-warning) 60%, transparent) !important; color: var(--cp-warning) !important; } #cp-net button.is-2 { background: transparent !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-strong) !important; } @media (max-width: 767px) { .cp-st-toast { left: 12px; right: 12px; max-width: none; transform: translateY(10px); } .cp-st-toast.is-in { transform: none; } } @media (prefers-reduced-motion: reduce) { .cp-st-toast { transition: none; } } /* --------------------------------------------------------------------------- v5.64.0 · Automatisierungen (#/automationen, automations.js) --------------------------------------------------------------------------- */ .au-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } html[data-theme]:not(#cp):not(#cq) body .au-preset { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-r, 3px) !important; background: color-mix(in srgb, var(--cp-text) 2%, transparent) !important; color: var(--cp-text); text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; } html[data-theme]:not(#cp):not(#cq) body .au-preset:hover, html[data-theme]:not(#cp):not(#cq) body .au-preset:focus-visible { border-color: var(--cp-rust-line) !important; background: var(--cp-rust-soft) !important; outline: none; } .au-preset b { color: var(--cp-strong); font-size: 13.5px; font-weight: 600; } .au-preset span, .au-main span { color: var(--cp-muted); font-size: 12.5px; line-height: 1.5; } .au-when { color: var(--cp-rust-hi); font-weight: 600; } .au-then { display: inline-flex; vertical-align: -2px; color: var(--cp-dim); } .au-list, .au-log { margin: 0; padding: 0; list-style: none; } .au-list li { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-top: 1px solid var(--cp-line); } .au-list li:first-child { border-top: 0; } .au-list li.is-off .au-main { opacity: .55; } .au-main { flex: 1 1 auto; display: grid; gap: 3px; min-width: 0; } .au-main b { color: var(--cp-strong); font-size: 14px; font-weight: 600; } .au-main small { color: var(--cp-dim); font-size: 11.5px; } .au-acts { display: flex; gap: 4px; } html[data-theme]:not(#cp):not(#cq) body .au-ib { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent !important; border-radius: var(--cp-r, 3px) !important; background: transparent !important; color: var(--cp-muted) !important; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .au-ib:hover { border-color: var(--cp-line-2) !important; background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .au-ib.is-del:hover { color: var(--cp-danger, #E5484D) !important; } .au-sw { position: relative; flex: none; display: inline-block; width: 38px; height: 22px; margin: 0; cursor: pointer; } .au-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .au-sw i { position: absolute; inset: 0; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 18%, transparent); transition: background .2s ease; } .au-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s ease; } .au-sw input:checked + i { background: var(--cp-rust); } .au-sw input:checked + i::after { transform: translateX(16px); } .au-sw input:focus-visible + i { outline: 2px solid var(--cp-rust-line); outline-offset: 2px; } .au-log li { display: grid; grid-template-columns: 96px minmax(120px, 220px) minmax(0, 1fr); gap: 12px; padding: 7px 2px; border-top: 1px dashed var(--cp-line); font-size: 12.5px; } .au-log li:first-child { border-top: 0; } .au-log time { color: var(--cp-dim); font-variant-numeric: tabular-nums; } .au-log b { overflow: hidden; color: var(--cp-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .au-log span { overflow: hidden; color: var(--cp-muted); text-overflow: ellipsis; white-space: nowrap; } .au-err { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--cp-line); border-radius: var(--cp-r, 3px); color: var(--cp-muted); } /* v5.65.0 · empfohlene Regeln + Checklisten-Feld */ .au-presets > header { flex-wrap: wrap; } .au-presets .au-defaults { margin-left: auto; } .au-presets .au-ok { margin-left: auto; color: var(--cp-success, #3DB57A); font-size: 12.5px; font-weight: 500; } html[data-theme="light"] .au-presets .au-ok { color: color-mix(in srgb, var(--cp-success, #1F9D67) 72%, #000); } .au-dlg .cp-bgd-f textarea { min-height: 76px; padding: 9px 10px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r); background: var(--cp-surface-2); color: var(--cp-strong); font: 500 14px/1.45 var(--cp-font); letter-spacing: 0; text-transform: none; resize: vertical; } .au-dlg .cp-bgd-f textarea:focus { outline: none; border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } @media (max-width: 575px) { .au-presets .au-defaults, .au-presets .au-ok { margin-left: 0; width: 100%; justify-content: center; text-align: center; } } /* schmale Handys: „Vorschau“ eigene Zeile über Abbrechen/Speichern (wurde bei 320 px links abgeschnitten) */ @media (max-width: 575px) { .au-dlg .cp-bgd-box > footer { flex-wrap: wrap; } .au-dlg .cp-bgd-box > footer button[data-p="preview"] { flex: 1 0 100%; margin-right: 0; } } .au-dlg .au-sec { margin-top: 4px; color: var(--cp-rust-hi); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .au-dlg .is-wide { grid-column: 1 / -1; } .au-dlg [hidden] { display: none !important; } .au-ph { margin: -4px 0 0; color: var(--cp-dim); font-size: 11.5px; line-height: 1.8; } .au-ph code { padding: 1px 5px; border-radius: var(--cp-r, 3px); background: var(--cp-hover); color: var(--cp-text); font-size: 11px; } .au-chk { flex-direction: row !important; align-items: center; gap: 8px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 12.5px !important; color: var(--cp-text) !important; } .au-prev { min-height: 1em; color: var(--cp-muted); font-size: 12.5px; } .au-prev b { color: var(--cp-strong); } .au-prev ul { margin: 6px 0 0; padding-left: 18px; } .au-dlg .cp-bgd-box > footer button[data-p="preview"] { margin-right: auto; } @media (max-width: 575px) { .au-log li { grid-template-columns: 1fr; gap: 2px; } .au-list li { flex-wrap: wrap; } .au-acts { margin-left: auto; } } .cp-lb-err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 12px 14px; border: 1px dashed var(--cp-line-2); border-radius: var(--cp-r, 3px); color: var(--cp-muted); font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-lb-err button { height: 32px; padding: 0 12px; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r, 3px) !important; background: transparent !important; color: var(--cp-strong) !important; font: 500 12.5px/1 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp) body .cp-ni-more { display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--cp-r, 3px); background: var(--cp-hover); color: var(--cp-muted); font-size: 11px; font-weight: 600; } /* --------------------------------------------------------------------------- v5.65.0 · Audit-Nacharbeit R-03 Passwort-Manager: kein Excel-/Druck-Export der Einträge (enthält nur Metadaten, aber Liste aller Zugänge je Kunde) --------------------------------------------------------------------------- */ [id^="password-manager-"][id$="-table_wrapper"] :is(.buttons-excel, .buttons-print), .card:has(table[id^="password-manager-"]) :is(.buttons-excel, .buttons-print), .tab-pane:has(table[id^="password-manager-"]) :is(.buttons-excel, .buttons-print) { display: none !important; } /* --------------------------------------------------------------------------- v5.66.0 · Topbar passt auf 1280–1500 px (Laptop) und iPad hoch/quer Messung: bei 1366 px ragte die Leiste 52 px, bei 834 px 152 px über den Rand – das Profilmenü war abgeschnitten. --------------------------------------------------------------------------- */ @media (max-width: 1500px) { html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle .rst-ai-tb-label { display: none !important; } html[data-theme]:not(#cp) body #default-navbar .rst-ai-topbar-toggle { padding-left: 10px !important; padding-right: 10px !important; } /* Name weicht dem Avatar (Begrüßung steht im Dashboard; Screenreader: aria-label aus a11y.js) */ html[data-theme]:not(#cp) body #default-navbar #user-dropdown .user-name { display: none !important; } } @media (max-width: 1100px) { /* Hell/Dunkel steckt im „⋯“-Menü (Ansicht) – in der Leiste entbehrlich */ html[data-theme]:not(#cp) body #default-navbar .mui-theme-toggle-wrap { display: none !important; } html[data-theme]:not(#cp) body #default-navbar .navbar-nav > li.nav-item > a.nav-link:not(#user-dropdown):not(.dropdown-toggle-split) { min-width: 40px !important; padding-left: 8px !important; padding-right: 8px !important; } } /* v5.66.0 · Touch: Dashboard-Ansichten (21 px) und Pipeline-Werte (23 px) waren am Handy zu klein zum Tippen (Messung 390 px) */ @media (pointer: coarse) { html[data-theme]:not(#cp) body .cp-dash-views button { min-height: 36px !important; } html[data-theme]:not(#cp) body button.cp-pl-opp-val { min-height: 36px !important; } } /* v5.66.0 · Content-Kommentare: „Nur intern“ (Kunde sieht es nicht) */ .rst-comments-compose { flex-wrap: wrap; } .rst-comments-compose .rst-comments-internal { flex: 1 0 100%; display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--cp-muted); font-size: 12.5px; cursor: pointer; } .rst-comments-compose .rst-comments-internal input { width: 16px; height: 16px; margin: 0; accent-color: var(--cp-rust); } html[data-theme]:not(#cp) body .rst-comment.is-internal { border-left: 3px solid var(--cp-warning, #E0A23B) !important; background: color-mix(in srgb, var(--cp-warning, #E0A23B) 7%, transparent) !important; } .rst-comment-internal { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--cp-warning, #E0A23B) 16%, transparent); color: var(--cp-warning, #B97A12); font-size: 11px; font-weight: 600; } /* ================================================================ v5.71.0 · Mehrkanal-Posteingang (Instagram, Messenger, Website-KI-Chat) Kanal-Symbole in Markenfarbe (klein, wie das WhatsApp-Symbol), Profilbild + Kanal-Abzeichen am Avatar, Kanäle-Dialog (Liste, Kacheln), Website-Chat-Angaben im Kontaktbereich, Hinweisband statt Eingabe. ================================================================ */ html[data-theme]:not(#cp) body .sc-ch-icon.sc-ch--instagram { background: linear-gradient(45deg, #f58529 0%, #dd2a7b 55%, #8134af 100%) !important; color: #fff !important; } html[data-theme]:not(#cp) body .sc-ch-icon.sc-ch--messenger { background: #0866ff !important; color: #fff !important; } html[data-theme]:not(#cp) body .sc-ch-icon.sc-ch--webchat { background: var(--cp-rust) !important; color: #fff !important; } /* Avatar: Profilbild (Instagram/Messenger) + Kanal-Abzeichen unten rechts */ html[data-theme]:not(#cp) body .sc-avatar { position: relative; } html[data-theme]:not(#cp) body .sc-avatar .sc-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } html[data-theme]:not(#cp) body .sc-avatar .sc-av-ch { position: absolute; right: -3px; bottom: -3px; display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px var(--cp-surface) !important; line-height: 0; } html[data-theme]:not(#cp) body .sc-avatar .sc-av-ch .sc-ch-icon { width: 15px; height: 15px; flex: 0 0 15px; } html[data-theme]:not(#cp) body .sc-avatar .sc-av-ch .sc-ch-icon svg { width: 9px; height: 9px; } html[data-theme]:not(#cp) body .sc-conv.active .sc-avatar .sc-av-ch, html[data-theme]:not(#cp) body .sc-conv:hover .sc-avatar .sc-av-ch { box-shadow: 0 0 0 2px var(--cp-surface-2) !important; } /* Kennung in der Liste (z. B. @benutzername) */ html[data-theme]:not(#cp) body .sc-conv-ph.is-handle { font-variant-numeric: normal; } /* Seitenleiste: Kanäle */ html[data-theme]:not(#cp) body .sc-side-item .sc-side-icon .sc-ch-icon { width: 16px; height: 16px; flex: 0 0 16px; } html[data-theme]:not(#cp) body .sc-side-item .sc-side-icon .sc-ch-icon svg { width: 10px; height: 10px; } /* Blase der KI-Assistentin (Website-Chat) – wie eigene Nachricht, mit Kennung */ html[data-theme]:not(#cp) body .sc-msg-ai svg { color: var(--cp-rust-hi); } /* Hinweisband statt Antwortfeld (Website-Chat) */ html[data-theme]:not(#cp) body .sc-ro-band { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; padding: 9px 12px; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; background: var(--cp-surface-2) !important; color: var(--cp-text) !important; font: 500 12.5px/1.45 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-ro-band > svg { flex: 0 0 auto; color: var(--cp-rust-hi); } html[data-theme]:not(#cp) body .sc-ro-band .sc-ro-t { flex: 1 1 260px; min-width: 0; } html[data-theme]:not(#cp) body .sc-ro-band .sc-ro-acts { display: flex; gap: 6px; flex-wrap: wrap; } /* v5.71.1: Handy – Band einzeilig mit Kurztext und kurzen Knöpfen (extensions.css) */ html[data-theme]:not(#cp) body .sc-ro-band .sc-ro-s, html[data-theme]:not(#cp) body .sc-ro-band .sc-ro-ls { display: none; } @container scchat (max-width: 500px) { html[data-theme]:not(#cp) body .sc-ro-band { flex-wrap: nowrap; gap: 8px; padding: 6px 10px; } html[data-theme]:not(#cp) body .sc-ro-band .sc-ro-t, html[data-theme]:not(#cp) body .sc-ro-band .sc-ro-l { display: none; } html[data-theme]:not(#cp) body .sc-ro-band .sc-ro-s { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .sc-ro-band .sc-ro-ls { display: inline; } html[data-theme]:not(#cp) body .sc-ro-band .sc-ro-acts { flex: 0 0 auto; flex-wrap: nowrap; } } /* Kontaktbereich: Website-Chat-Angaben, Instagram-Profil */ html[data-theme]:not(#cp) body .sc-chd { display: flex; flex-direction: column; gap: 6px; } html[data-theme]:not(#cp) body .sc-chd-row { display: flex; gap: 8px; min-width: 0; font: 400 12.5px/1.45 var(--cp-font) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp) body .sc-chd-k { flex: 0 0 92px; color: var(--cp-muted) !important; font-weight: 500; } html[data-theme]:not(#cp) body .sc-chd-v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .sc-case { padding: 8px 10px; border: 1px solid var(--cp-line-2) !important; border-left: 3px solid var(--cp-rust) !important; border-radius: var(--cp-r-sm) !important; background: var(--cp-surface-2) !important; } html[data-theme]:not(#cp) body .sc-case + .sc-case { margin-top: 6px; } html[data-theme]:not(#cp) body .sc-case-h { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 4px; color: var(--cp-strong) !important; font: 600 12.5px/1.3 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-case-h time { color: var(--cp-muted) !important; font-weight: 500; } /* Kanäle-Dialog */ html[data-theme]:not(#cp) body .ch-list { display: flex; flex-direction: column; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; margin: 0 0 14px; } html[data-theme]:not(#cp) body .ch-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0; } html[data-theme]:not(#cp) body .ch-row + .ch-row { border-top: 1px solid var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .ch-row > .sc-ch-icon, html[data-theme]:not(#cp) body .ch-tile > .sc-ch-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 3px; } html[data-theme]:not(#cp) body .ch-row > .sc-ch-icon svg, html[data-theme]:not(#cp) body .ch-tile > .sc-ch-icon svg { width: 17px; height: 17px; } html[data-theme]:not(#cp) body .ch-row-main { flex: 1 1 auto; min-width: 0; } html[data-theme]:not(#cp) body .ch-row-name { color: var(--cp-strong) !important; font: 600 13.5px/1.3 var(--cp-font) !important; } html[data-theme]:not(#cp) body .ch-row-sub { color: var(--cp-muted) !important; font: 400 12px/1.35 var(--cp-font) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp) body .ch-row .sc-check.ch-row-tg { margin: 0; flex: 0 0 auto; } html[data-theme]:not(#cp) body .ch-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html[data-theme]:not(#cp) body .ch-tile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left; border: 1px solid var(--cp-line-2) !important; border-radius: var(--cp-r-sm) !important; background: var(--cp-surface) !important; color: var(--cp-text) !important; cursor: pointer; transition: border-color var(--cp-dur-s, 180ms) var(--cp-ease, ease); } html[data-theme]:not(#cp) body button.ch-tile:hover, html[data-theme]:not(#cp) body button.ch-tile:focus-visible { border-color: var(--cp-rust) !important; } html[data-theme]:not(#cp) body .ch-tile > svg:last-child { margin-left: auto; flex: 0 0 auto; color: var(--cp-muted); } html[data-theme]:not(#cp) body .ch-tile-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html[data-theme]:not(#cp) body .ch-tile-t strong { color: var(--cp-strong) !important; font: 600 13px/1.3 var(--cp-font) !important; } html[data-theme]:not(#cp) body .ch-tile-t span { color: var(--cp-muted) !important; font: 400 11.5px/1.35 var(--cp-font) !important; } html[data-theme]:not(#cp) body .ch-tile.is-soon { opacity: .55; cursor: default; } html[data-theme]:not(#cp) body .ch-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } html[data-theme]:not(#cp) body .sc-steps { margin: 6px 0 0; padding-left: 18px; color: var(--cp-text) !important; font: 400 12.5px/1.5 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-steps li + li { margin-top: 4px; } @media (max-width: 640px) { html[data-theme]:not(#cp) body .ch-tiles { grid-template-columns: 1fr; } html[data-theme]:not(#cp) body .ch-row { flex-wrap: wrap; } html[data-theme]:not(#cp) body .ch-row-main { flex: 1 1 calc(100% - 50px); } } html[data-theme]:not(#cp) body .ch-manual { margin-top: 10px; } html[data-theme]:not(#cp) body .ch-manual > summary { cursor: pointer; margin: 0 0 8px; } html[data-theme]:not(#cp) body .sc-steps .sc-kv-row { margin-top: 6px; } /* v5.71.1 (Prüfung): Kunden-Vorschlag aus der Angabe des Website-Besuchers (unbestätigt) – gestrichelt wie „+ Etikett“ */ html[data-theme]:not(#cp) body .sc-attr-sugg { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 6px; padding: 6px 8px !important; border: 1px dashed var(--cp-line-2) !important; border-radius: var(--cp-r) !important; background: transparent !important; box-shadow: none !important; color: var(--cp-muted) !important; font: 400 12px/1.4 var(--cp-font) !important; } html[data-theme]:not(#cp) body .sc-attr-sugg > span { min-width: 0; overflow-wrap: anywhere; } html[data-theme]:not(#cp) body .sc-attr-sugg strong { color: var(--cp-strong) !important; font-weight: 500; } html[data-theme]:not(#cp) body .sc-attr-sugg .sc-link-btn { padding-left: 0 !important; font-size: 12px !important; white-space: nowrap; } /* v5.71.0 (Feinschliff Social Inbox): Kanal-Symbole ruhiger – kleine dunkle Scheibe, nur das Zeichen in Kanalfarbe (Abzeichen am Avatar, Kopfzeile, Kontaktbereich, Filter); in der Seitenleiste einfarbig wie alle Symbole, aktiv in Rost; volle Markenfarben nur noch als Logo im Kanäle-Dialog. */ html[data-theme]:not(#cp) body .sc-ch-icon:not(.sc-ch-txt) { background: var(--cp-surface-3) !important; box-shadow: inset 0 0 0 1px var(--cp-line-2) !important; } html[data-theme]:not(#cp) body .sc-ch-icon.sc-ch--whatsapp { color: #25D366 !important; } html[data-theme]:not(#cp) body .sc-ch-icon.sc-ch--instagram { color: #E4405F !important; } html[data-theme]:not(#cp) body .sc-ch-icon.sc-ch--messenger { color: #4C8DFF !important; } html[data-theme]:not(#cp) body .sc-ch-icon.sc-ch--webchat { color: var(--cp-rust-hi) !important; } html[data-theme="light"]:not(#cp) body .sc-ch-icon.sc-ch--whatsapp { color: #128C4A !important; } html[data-theme="light"]:not(#cp) body .sc-ch-icon.sc-ch--messenger { color: #0866FF !important; } /* Abzeichen am Avatar: 16 px, Ring in Flächenfarbe, Zeichen 9 px */ html[data-theme]:not(#cp) body .sc-avatar .sc-av-ch { right: -2px; bottom: -2px; box-shadow: 0 0 0 2px var(--cp-surface) !important; } html[data-theme]:not(#cp) body .sc-avatar .sc-av-ch .sc-ch-icon { width: 16px; height: 16px; flex: 0 0 16px; } html[data-theme]:not(#cp) body .sc-avatar .sc-av-ch .sc-ch-icon svg { width: 9px; height: 9px; } html[data-theme]:not(#cp) body .sc-detail-hero .sc-avatar .sc-av-ch .sc-ch-icon { width: 18px; height: 18px; flex: 0 0 18px; } html[data-theme]:not(#cp) body .sc-detail-hero .sc-avatar .sc-av-ch .sc-ch-icon svg { width: 10px; height: 10px; } /* Kopfzeile / Kontaktbereich: Symbol und Kennung sauber auf einer Linie */ html[data-theme]:not(#cp) body .sc-chat-phone-row { gap: 6px; } html[data-theme]:not(#cp) body .sc-chat-phone-row .sc-ch-icon, html[data-theme]:not(#cp) body .sc-detail-hero-phone-row .sc-ch-icon { width: 16px; height: 16px; flex: 0 0 16px; } html[data-theme]:not(#cp) body .sc-chat-phone-row .sc-ch-icon svg, html[data-theme]:not(#cp) body .sc-detail-hero-phone-row .sc-ch-icon svg { width: 9px; height: 9px; } html[data-theme]:not(#cp) body .sc-detail-hero-phone-row { display: inline-flex; align-items: center; gap: 6px; } /* Seitenleiste: einfarbig wie die übrigen Symbole, aktiv in Rost (keine bunten Kreise in der Leiste) */ html[data-theme]:not(#cp) body .sc-side-item .sc-side-icon .sc-ch-icon { background: transparent !important; box-shadow: none !important; color: inherit !important; width: 18px; height: 18px; flex: 0 0 18px; } html[data-theme]:not(#cp) body .sc-side-item .sc-side-icon .sc-ch-icon svg { width: 16px; height: 16px; } html[data-theme]:not(#cp) body .sc-side-item.active .sc-side-icon .sc-ch-icon { color: var(--cp-rust-hi) !important; } /* Kanäle-Dialog und „Kanal hinzufügen“: Logos in voller Markenfarbe */ html[data-theme]:not(#cp) body :is(.ch-row, .ch-tile) > .sc-ch-icon.sc-ch--whatsapp { background: #25D366 !important; color: #fff !important; box-shadow: none !important; } html[data-theme]:not(#cp) body :is(.ch-row, .ch-tile) > .sc-ch-icon.sc-ch--instagram { background: linear-gradient(45deg, #f58529 0%, #dd2a7b 55%, #8134af 100%) !important; color: #fff !important; box-shadow: none !important; } html[data-theme]:not(#cp) body :is(.ch-row, .ch-tile) > .sc-ch-icon.sc-ch--messenger { background: #0866ff !important; color: #fff !important; box-shadow: none !important; } html[data-theme]:not(#cp) body :is(.ch-row, .ch-tile) > .sc-ch-icon.sc-ch--webchat { background: var(--cp-rust) !important; color: #fff !important; box-shadow: none !important; } /* v5.76.7 · Lesbarkeit im hellen Modus: RISE setzt in Übersichts-Widgets feste Inline-Farben für helle Hintergründe (z. B. Rechnungen „Nicht gezahlt“ #FAC108 – auf Weiß 1,6 : 1) → im hellen Modus auf die dunkleren Status-Töne abbilden */ html[data-theme="light"]:not(#cp) body #page-content [style*="FAC108" i] { color: var(--cp-warning) !important; } html[data-theme="light"]:not(#cp) body #page-content .invoice-overview-widget-link [style*="F5325C" i] { color: var(--cp-danger) !important; } html[data-theme="light"]:not(#cp) body #page-content .invoice-overview-widget-link [style*="6690F4" i] { color: var(--cp-info) !important; } /* v5.77.0 · Aufgabenformular: Frist-Kürzel, „Weitere Felder“ (task-view.js) */ #task-form .cp-tf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } #task-form .cp-tf-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, color .12s ease; } #task-form .cp-tf-chip:hover { background: var(--cp-hover); color: var(--cp-strong); } #task-form .cp-tf-chip.is-on { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } #task-form .cp-tf-chip.is-clear { color: var(--cp-muted); } #task-form .cp-tf-chip.is-clear.is-on { border-color: var(--cp-line-2); background: var(--cp-hover); color: var(--cp-text); } #task-form .cp-tf-toggle { margin: 4px 0 10px; } #task-form .cp-tf-toggle button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 1px dashed var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-text); font: 500 13px/1.2 var(--cp-font); text-align: left; cursor: pointer; } #task-form .cp-tf-toggle button:hover { background: var(--cp-hover); color: var(--cp-strong); } #task-form .cp-tf-toggle small { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--cp-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } #task-form .cp-tf-toggle i { font-style: normal; color: var(--cp-dim); transition: transform .2s ease; } #task-form .cp-tf-toggle button[aria-expanded="true"] i { transform: rotate(180deg); } #task-form .cp-tf-toggle button[aria-expanded="true"] small { visibility: hidden; } html[data-theme]:not(#cp) body #task-form.cp-tf-compact .cp-tf-more { display: none !important; } @media (max-width: 575px) { #task-form .cp-tf-toggle small { display: none; } #task-form .cp-tf-chip { height: 32px; } } /* v5.77.1 · Projektzeit erfassen: Dauer-Kürzel (time-clock.js) */ #timelog-form .cp-tl-dur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; padding-left: calc(25% + 0px); } #timelog-form .cp-tl-dur > span { margin-right: 4px; color: var(--cp-muted); font-size: 12px; } #timelog-form .cp-tf-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); cursor: pointer; white-space: nowrap; } #timelog-form .cp-tf-chip:hover { background: var(--cp-hover); color: var(--cp-strong); } #timelog-form .cp-tf-chip.is-on { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } @media (max-width: 767px) { #timelog-form .cp-tl-dur { padding-left: 0; } #timelog-form .cp-tf-chip { height: 32px; } } /* v5.77.2 · Termin hinzufügen: Tag- und Dauer-Kürzel (event-notes.js) */ #event-form .cp-ev-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 14px; padding-left: 25%; } #event-form .cp-ev-chips > span { margin-right: 4px; color: var(--cp-muted); font-size: 12px; min-width: 36px; } #event-form .cp-tf-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); cursor: pointer; white-space: nowrap; } #event-form .cp-tf-chip:hover { background: var(--cp-hover); color: var(--cp-strong); } #event-form .cp-tf-chip.is-on { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } @media (max-width: 767px) { #event-form .cp-ev-chips { padding-left: 0; } #event-form .cp-tf-chip { height: 32px; } } /* v5.77.3 · Kunde/Verkaufschance hinzufügen: „Weitere Angaben“ (contentag-crm.js) */ :is(#client-form, #lead-form) .cp-tf-toggle { margin: 4px 0 12px; } :is(#client-form, #lead-form) .cp-tf-toggle button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 1px dashed var(--cp-line-2); border-radius: var(--cp-r, 3px); background: transparent; color: var(--cp-text); font: 500 13px/1.2 var(--cp-font); text-align: left; cursor: pointer; } :is(#client-form, #lead-form) .cp-tf-toggle button:hover { background: var(--cp-hover); color: var(--cp-strong); } :is(#client-form, #lead-form) .cp-tf-toggle small { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--cp-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } :is(#client-form, #lead-form) .cp-tf-toggle i { font-style: normal; color: var(--cp-dim); transition: transform .2s ease; } :is(#client-form, #lead-form) .cp-tf-toggle button[aria-expanded="true"] i { transform: rotate(180deg); } :is(#client-form, #lead-form) .cp-tf-toggle button[aria-expanded="true"] small { visibility: hidden; } html[data-theme]:not(#cp) body :is(#client-form, #lead-form).cp-cf-compact .cp-cf-more { display: none !important; } @media (max-width: 575px) { :is(#client-form, #lead-form) .cp-tf-toggle small { display: none; } } /* v5.77.5 · Aufgabenliste: leere optionale Spalten ausgeblendet (task-view.js setzt cp-hc-) */ table#task-table.cp-hc-1 > * > tr > :nth-child(1), table#task-table.cp-hc-2 > * > tr > :nth-child(2), table#task-table.cp-hc-3 > * > tr > :nth-child(3), table#task-table.cp-hc-4 > * > tr > :nth-child(4), table#task-table.cp-hc-5 > * > tr > :nth-child(5), table#task-table.cp-hc-6 > * > tr > :nth-child(6), table#task-table.cp-hc-7 > * > tr > :nth-child(7), table#task-table.cp-hc-8 > * > tr > :nth-child(8), table#task-table.cp-hc-9 > * > tr > :nth-child(9), table#task-table.cp-hc-10 > * > tr > :nth-child(10), table#task-table.cp-hc-11 > * > tr > :nth-child(11), table#task-table.cp-hc-12 > * > tr > :nth-child(12), table#task-table.cp-hc-13 > * > tr > :nth-child(13), table#task-table.cp-hc-14 > * > tr > :nth-child(14) { display: none !important; } table#task-table[class*="cp-hc-"] { width: 100% !important; } /* DataTables setzt die Breite in px (mit allen Spalten berechnet) → sonst leerer Querscroll */ /* v5.77.5 · Kundenliste: leere Labels / Umsatzspalten mit nur 0,00 € ausgeblendet (task-view.js) */ table#client-table.cp-hc-1 > * > tr > :nth-child(1), table#client-table.cp-hc-2 > * > tr > :nth-child(2), table#client-table.cp-hc-3 > * > tr > :nth-child(3), table#client-table.cp-hc-4 > * > tr > :nth-child(4), table#client-table.cp-hc-5 > * > tr > :nth-child(5), table#client-table.cp-hc-6 > * > tr > :nth-child(6), table#client-table.cp-hc-7 > * > tr > :nth-child(7), table#client-table.cp-hc-8 > * > tr > :nth-child(8), table#client-table.cp-hc-9 > * > tr > :nth-child(9), table#client-table.cp-hc-10 > * > tr > :nth-child(10), table#client-table.cp-hc-11 > * > tr > :nth-child(11), table#client-table.cp-hc-12 > * > tr > :nth-child(12), table#client-table.cp-hc-13 > * > tr > :nth-child(13), table#client-table.cp-hc-14 > * > tr > :nth-child(14) { display: none !important; } table#client-table[class*="cp-hc-"] { width: 100% !important; } /* v5.78.0 · Kostenvoranschlag (invoice-tools.js): Status-Leiste im Stil des Rechnungs-Cockpits, leere Postenliste, Logo im Dunkelmodus sichtbar (dunkles Standard-Logo auf dunkler Dokumentkarte) */ html[data-theme]:not(#cp):not(#cq) body .cp-est ol.cp-inv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cp-est .cp-inv-acts { align-items: center; } .cp-est-hint { min-width: 0; font-size: 12.5px; color: var(--cp-muted); } .cp-est-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 12px; text-align: center; } .cp-est-empty b { font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-est-empty span { max-width: 420px; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body :is(#estimate-item-table, #proposal-item-table, #contract-item-table) td.dt-empty:has(.cp-est-empty) { padding: 0 !important; color: var(--cp-text) !important; font-size: 13px; letter-spacing: normal; text-transform: none; } html[data-theme]:not(#cp):not(#cq) body :is(#estimate-item-table, #proposal-item-table, #contract-item-table) td.dt-empty:has(.cp-est-empty)::before { display: none !important; content: none !important; } /* v5.83.0: KV-Kopf ist jetzt weißes Papier wie die Rechnung → Logo nicht mehr invertieren */ html[data-theme="dark"] body .card:is(:has(#proposal-item-table), :has(#contract-item-table), :has(#order-item-table)):not(:has(.header-style)) img[src*="default-invoice-logo"] { filter: invert(1) hue-rotate(180deg); } @media (max-width: 575px) { html[data-theme]:not(#cp):not(#cq) body .cp-est ol.cp-inv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cp-est .cp-inv-kpis { grid-template-columns: 1fr 1fr; } .cp-est .cp-inv-kpi:first-child { grid-column: 1 / -1; } .cp-est-hint { flex-basis: 100%; } } /* v5.78.1 · Dialog „Öffentliche Zahlungs-URL“: Hinweis mit zwei Knöpfen (Entwurf: ausstellen / interne Vorschau) */ .cp-pay-note .cp-inv-btn { margin: 0 8px 0 0 !important; text-decoration: none !important; } /* =========================================================================== v5.79.0 · KI-Assistent für Vertrag, Angebot, Kostenvoranschlag (doc-ai.js) Dialog im Stil der KI-Zahlungserinnerung (.cp-qc-dlg/.cp-qc-box), breiter =========================================================================== */ .cp-dai .cp-qc-box { width: min(820px, 100%); } .cp-dai-orb { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-dai-orb svg { width: 20px; height: 20px; } .cp-dai .cp-qc-box header h3 { margin: 0 0 3px; font-size: 16px; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-dai .cp-qc-grid textarea { min-height: 96px; } .cp-dai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-dai-chips button { height: auto; min-height: 30px; padding: 5px 11px; border: 1px solid var(--cp-line-2); border-radius: 999px; background: transparent; color: var(--cp-text); font: 500 12.5px/1.3 var(--cp-font, inherit); text-align: left; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-dai-chips button:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); } .cp-dai-sum > p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body ul.cp-dai-notes { margin: 0 0 12px !important; padding: 10px 12px !important; list-style: none; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-warning) 35%, transparent); background: color-mix(in srgb, var(--cp-warning) 8%, transparent); } .cp-dai-notes li { display: flex; gap: 8px; padding: 3px 0; font-size: 12.5px; line-height: 1.45; color: var(--cp-text); } .cp-dai-notes svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--cp-warning); } .cp-dai-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--cp-muted); } .cp-dai-bar.is-warn span { color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-dai-link { padding: 0; border: 0; background: none; color: var(--cp-rust-hi); font: 600 12px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body :is(ol.cp-dai-list, ol.cp-dai-items) { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; margin: 0 !important; padding: 0 2px 0 0 !important; list-style: none; } .cp-dai-list li { padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .cp-dai-list label { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; cursor: pointer; font-weight: 400; } .cp-dai-list label b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--cp-strong); } .cp-dai input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--cp-rust); } .cp-dai-tag { flex: none; padding: 3px 7px; border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .is-mod .cp-dai-tag { background: color-mix(in srgb, var(--cp-info) 16%, transparent); color: var(--cp-info); } .is-new .cp-dai-tag { background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); } .is-del .cp-dai-tag { background: color-mix(in srgb, var(--cp-danger) 16%, transparent); color: var(--cp-danger); } .cp-dai-list p { margin: 4px 0 0 25px; font-size: 13px; line-height: 1.5; } .cp-dai-old { color: var(--cp-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cp-danger) 60%, transparent); } .cp-dai-new { color: var(--cp-strong); padding-left: 8px; border-left: 2px solid var(--cp-success); } .cp-dai-list small { display: block; margin: 6px 0 0 25px; font-size: 11.5px; color: var(--cp-dim); } .cp-dai-items li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .cp-dai-pick { padding-top: 9px; margin: 0; } .cp-dai-it { flex: 1; min-width: 0; display: grid; gap: 6px; } .cp-dai-it-top { display: flex; align-items: center; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-dai-in { width: 100%; min-width: 0; padding: 6px 9px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 500 13px/1.35 var(--cp-font, inherit) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-dai-in:focus { border-color: var(--cp-rust-line) !important; outline: 2px solid var(--cp-rust-soft); outline-offset: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-dai-in.is-title { font-weight: 600 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-dai-in.is-desc { resize: vertical; font-size: 12.5px !important; color: var(--cp-text) !important; } .cp-dai-src { flex: none; padding: 3px 7px; border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; } .cp-dai-src.is-cat { background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); } .cp-dai-src.is-user { background: color-mix(in srgb, var(--cp-info) 16%, transparent); color: var(--cp-info); } .cp-dai-src.is-est { background: color-mix(in srgb, var(--cp-warning) 18%, transparent); color: var(--cp-warning); } .cp-dai-it-nums { display: grid; grid-template-columns: 90px 1fr 120px auto; gap: 8px; align-items: end; } .cp-dai-it-nums label { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; } .cp-dai-it-nums label > span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-dai-line { padding: 0 2px 7px; font-size: 13px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 92px; } .cp-dai-total { font-size: 13px !important; font-weight: 600; color: var(--cp-strong) !important; } .cp-dai-done { display: flex; gap: 12px; padding: 14px 16px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-success) 35%, transparent); background: color-mix(in srgb, var(--cp-success) 8%, transparent); } .cp-dai-done.is-warn { border-color: color-mix(in srgb, var(--cp-warning) 38%, transparent); background: color-mix(in srgb, var(--cp-warning) 9%, transparent); } .cp-dai-done > svg { flex: none; width: 20px; height: 20px; color: var(--cp-success); } .cp-dai-done.is-warn > svg { color: var(--cp-warning); } .cp-dai-done b { display: block; font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-dai-done p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--cp-muted); } .cp-dai .cp-inv-dlg-foot .cp-qc-cancel { display: inline-flex; align-items: center; gap: 6px; } .cp-dai .cp-inv-dlg-foot .cp-qc-cancel svg { width: 14px; height: 14px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-dai-btn { display: inline-flex; align-items: center; gap: 7px; } .cp-dai-btn svg { width: 16px; height: 16px; color: var(--cp-rust-hi); margin: 0 !important; } @media (max-width: 575px) { .cp-dai-it-nums { grid-template-columns: 1fr 1fr; } .cp-dai-line { grid-column: 1 / -1; text-align: left; padding-bottom: 0; } .cp-dai-list p, .cp-dai-list small { margin-left: 0; } } /* v5.80.0 · KI-Assistent erweitert (doc-ai.js): Reiter, Prüfen, E-Mail, Fokus, Verlauf, Wort-Diff */ .cp-dai .cp-dai-tabs { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; } .cp-dai-intro { display: flex; gap: 12px; padding: 14px 16px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .cp-dai-intro > svg { flex: none; width: 22px; height: 22px; color: var(--cp-rust-hi); } .cp-dai-intro b { display: block; font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-dai-intro p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } .cp-dai-focus { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px; padding: 9px 12px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); cursor: pointer; font-weight: 400; } .cp-dai-focus span { font-size: 12.5px; line-height: 1.45; color: var(--cp-strong); } .cp-dai-chips.is-hist { margin-top: 10px; align-items: center; } .cp-dai-chips.is-hist em { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-dim); } .cp-dai-chips.is-hist em svg { width: 13px; height: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-dai-chips.is-hist button { border-style: dashed; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-dai-sec { font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-dai-diff { margin: 4px 0 0 25px; font-size: 13px; line-height: 1.55; color: var(--cp-text); } .cp-dai-diff ins { text-decoration: none; padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--cp-success) 18%, transparent); color: var(--cp-strong); } .cp-dai-diff del { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--cp-danger) 14%, transparent); color: var(--cp-muted); text-decoration-color: color-mix(in srgb, var(--cp-danger) 70%, transparent); } .cp-dai-fld { margin: 6px 0 0 25px; } .cp-dai-fld em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-dai-fld .cp-dai-diff, .cp-dai-fld .cp-dai-old, .cp-dai-fld .cp-dai-new { margin-left: 0; } .cp-dai-check li { display: grid; gap: 4px; } .cp-dai-pt-head { display: flex; align-items: center; gap: 9px; min-width: 0; } .cp-dai-pt-head b { min-width: 0; font-size: 13px; font-weight: 600; color: var(--cp-strong); } .cp-dai-check li > p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cp-text); } .cp-dai-check .is-high { border-color: color-mix(in srgb, var(--cp-danger) 40%, transparent); } .cp-dai-check .is-high .cp-dai-tag { background: color-mix(in srgb, var(--cp-danger) 16%, transparent); color: var(--cp-danger); } .cp-dai-check .is-mid .cp-dai-tag { background: color-mix(in srgb, var(--cp-warning) 18%, transparent); color: var(--cp-warning); } .cp-dai-check .is-info .cp-dai-tag { background: color-mix(in srgb, var(--cp-info) 16%, transparent); color: var(--cp-info); } html[data-theme]:not(#cp):not(#cq) body .cp-dai-fix { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-top: 4px; padding: 0 11px; border: 1px solid var(--cp-rust-line); border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-strong); font: 600 12px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-dai-fix:hover { background: color-mix(in srgb, var(--cp-rust) 22%, transparent); } .cp-dai-fix svg { width: 14px; height: 14px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-dai-sum.is-ok { display: flex; gap: 10px; padding: 12px 14px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-success) 35%, transparent); background: color-mix(in srgb, var(--cp-success) 8%, transparent); } .cp-dai-sum.is-ok > svg { flex: none; width: 20px; height: 20px; color: var(--cp-success); } .cp-dai-sum.is-ok > p { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-dai .cp-qc-grid textarea[name="cp-dai-mail"] { min-height: 240px; font-size: 13.5px; line-height: 1.55; } @media (max-width: 575px) { .cp-dai .cp-dai-tabs button { padding: 0 10px; } .cp-dai-diff, .cp-dai-fld { margin-left: 0; } } /* =========================================================================== v5.81.0 · Zahlung hinzufügen (Zahlungsart-Knöpfe, Betrag, Datum), Zahlungen-Karte, Abschlags- und Schlussrechnung (billing-tools.js) =========================================================================== */ html[data-theme]:not(#cp):not(#cq) body #invoice-payment-form .cp-pay-has > .select2-container { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; } .cp-pay-methods { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-pay-m { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font: 500 13px/1.2 var(--cp-font, inherit); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-pay-m:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-pay-m.is-on { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); box-shadow: inset 0 0 0 1px var(--cp-rust-line); } .cp-pay-m em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-pay-m:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } .cp-pay-more { width: 100%; } .cp-pay-more > summary { display: inline-block; margin: 2px 0; font-size: 12px; font-weight: 600; color: var(--cp-rust-hi); cursor: pointer; list-style: none; } .cp-pay-more > summary::-webkit-details-marker { display: none; } .cp-pay-more[open] { display: flex; flex-wrap: wrap; gap: 6px; } .cp-pay-more[open] > summary { width: 100%; } #invoice-payment-form label.error[for="invoice_payment_method_id"] { display: block; margin-top: 6px; } .cp-pay-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-pay-chips button { height: 30px; padding: 0 11px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pay-chips button:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-pay-chips button.is-on { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); } .cp-pay-amt small { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12.5px; color: var(--cp-muted); } .cp-pay-amt small svg { flex: none; width: 15px; height: 15px; } .cp-pay-amt small.is-part svg { color: var(--cp-info); } .cp-pay-amt small b { color: var(--cp-strong); } .cp-pay-amt small.is-over, .cp-pay-amt small.is-over svg { color: var(--cp-warning); } .cp-pay-amt small.is-ok svg { color: var(--cp-success); } .cp-pay-sum { padding: 12px 16px 14px; border-bottom: 1px solid var(--cp-line); } .cp-pay-sum-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--cp-muted); } .cp-pay-sum-row b { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .cp-pay-sum-row b.is-ok { color: var(--cp-success); } .cp-pay-sum-bar { position: relative; display: block; height: 5px; margin: 9px 0 10px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .cp-pay-sum-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .cp-pay-sum-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 36px; border: 1px solid var(--cp-rust-line); border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-strong); font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pay-sum-btn:hover { background: color-mix(in srgb, var(--cp-rust) 22%, transparent); } .cp-pay-sum-btn svg { width: 15px; height: 15px; color: var(--cp-rust-hi); margin: 0 !important; } .cp-pay-sum small { font-size: 11.5px; color: var(--cp-dim); } .cp-pi .cp-qc-box { width: min(760px, 100%); } .cp-pi .cp-qc-box header h3 { margin: 0 0 3px; font-size: 16px; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-pi .cp-qc-types button:disabled { opacity: .45; cursor: not-allowed; } .cp-pi-src { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-line); background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); } .cp-pi-src small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-pi-src > div:first-child b { display: block; font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-pi-src > div:first-child span { font-size: 12px; color: var(--cp-muted); } .cp-pi-kpis { display: flex; gap: 16px; text-align: right; } .cp-pi-kpis b { display: block; font-size: 14px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-pi-kpis .is-bad b { color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body ol.cp-pi-list { display: grid; gap: 4px; margin: 10px 0 0 !important; padding: 0 !important; list-style: none; } .cp-pi-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 12px; border-radius: 3px; border: 1px solid var(--cp-line); font-size: 12.5px; } .cp-pi-list li.is-off { opacity: .55; } .cp-pi-list a { font-weight: 600; color: var(--cp-rust-hi); } .cp-pi-list span { color: var(--cp-muted); } .cp-pi-list em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-muted); } .cp-pi-list em.is-ok { background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); } .cp-pi-list em.is-draft { background: color-mix(in srgb, var(--cp-warning) 18%, transparent); color: var(--cp-warning); } .cp-pi-list b { font-variant-numeric: tabular-nums; color: var(--cp-strong); } .cp-pi-grid { margin-top: 14px; } .cp-pi-amt { display: flex; gap: 6px; } .cp-pi-amt input { flex: 1; min-width: 0; } .cp-pi-unit { display: inline-flex; flex: none; border: 1px solid var(--cp-line-2); border-radius: 3px; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-pi-unit button { width: 38px; border: 0; background: transparent; color: var(--cp-muted); font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pi-unit button.is-on { background: var(--cp-rust-soft); color: var(--cp-strong); } .cp-pi-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .cp-pi-sum > div { padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); } .cp-pi-sum small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-pi-sum b { font-size: 16px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-pi-sum .is-main { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-pi-warn { display: flex; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-warning) 38%, transparent); background: color-mix(in srgb, var(--cp-warning) 9%, transparent); font-size: 12.5px; line-height: 1.45; color: var(--cp-text); } .cp-pi-warn[hidden] { display: none; } .cp-pi-warn svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--cp-warning); } .cp-pi-calc { display: grid; margin-top: 14px; border: 1px solid var(--cp-line); border-radius: 3px; overflow: hidden; } .cp-pi-calc > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: 13px; color: var(--cp-text); border-top: 1px solid var(--cp-line); } .cp-pi-calc > div:first-child { border-top: 0; } .cp-pi-calc span small { display: block; font-size: 11.5px; color: var(--cp-dim); } .cp-pi-calc b { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cp-strong); } .cp-pi-calc .is-minus b { color: var(--cp-danger); } .cp-pi-calc .is-total { font-weight: 600; background: color-mix(in srgb, var(--cp-text) 3%, transparent); } .cp-pi-calc .is-main { background: var(--cp-rust-soft); } .cp-pi-calc .is-main b { font-size: 15px; } .cp-pi-kind .cp-qc-types { margin-bottom: 6px; } .cp-pi-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-pi-go { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--cp-rust-hi); font: 600 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-pi-go svg { width: 13px; height: 13px; margin: 0 !important; } .cp-pi-docs { display: grid; gap: 6px; margin-top: 8px; max-height: 240px; overflow-y: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-pi-docs button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font: 400 12.5px/1.3 var(--cp-font, inherit); text-align: left; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pi-docs button:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-pi-docs b { font-weight: 600; color: var(--cp-strong); } .cp-pi-docs span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-muted); } .cp-pi-docs em { font-style: normal; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-pi-link { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 9px 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: color-mix(in srgb, var(--cp-text) 3%, transparent); font-size: 12.5px; color: var(--cp-muted); } .cp-pi-link > svg { flex: none; width: 16px; height: 16px; color: var(--cp-rust-hi); } .cp-pi-link span { flex: 1; min-width: 0; } .cp-pi-link b { color: var(--cp-strong); } .cp-pi-link a { color: var(--cp-rust-hi); font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pi-link button { flex: none; height: 30px; padding: 0 11px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font: 600 12px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pi-link button:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } @media (max-width: 575px) { .cp-pi-src { grid-template-columns: 1fr; } .cp-pi-kpis { text-align: left; flex-wrap: wrap; } .cp-pi-sum { grid-template-columns: 1fr 1fr; } .cp-pi-sum .is-main { grid-column: 1 / -1; } .cp-pi-list li { grid-template-columns: auto minmax(0, 1fr) auto; } .cp-pi-list em { display: none; } .cp-pi-link { flex-wrap: wrap; } } .cp-pay-admin { align-self: center; margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--cp-rust-hi) !important; } /* v5.81.1 · Login: von Chrome automatisch ausgefüllte Felder lesbar (vorher weiße Schrift auf Chrome-Gelb – eine spätere box-shadow-Regel überschrieb den Inset-Trick). Höhere Spezifität, beide Themes, auch :hover/:focus und :autofill. */ html[data-theme]:not(#cp):not(#cq) body :is(.form-signin, .rst-signin-card, .signin-page) input:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :autofill) { -webkit-text-fill-color: #F4F5F7 !important; caret-color: #F4F5F7 !important; box-shadow: 0 0 0 1000px #15181F inset !important; -webkit-box-shadow: 0 0 0 1000px #15181F inset !important; transition: background-color 9999s ease-out 0s !important; } html[data-theme="light"]:not(#cp):not(#cq) body :is(.form-signin, .rst-signin-card, .signin-page) input:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :autofill) { -webkit-text-fill-color: #14161B !important; caret-color: #14161B !important; box-shadow: 0 0 0 1000px #FFFFFF inset !important; -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important; } /* auch in Formularen im CRM (Kunde anlegen o. ä.): Autofill nicht gelb/unlesbar */ html[data-theme="dark"]:not(#cp):not(#cq) body .modal input:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus) { -webkit-text-fill-color: var(--cp-strong, #F4F5F7) !important; box-shadow: 0 0 0 1000px var(--cp-deep, #0B0D12) inset !important; transition: background-color 9999s ease-out 0s !important; } /* v5.81.1 · KI-Assistent / Abschlagsrechnung: Dialog passt in den Bildschirm, Inhalt scrollt, Fußleiste bleibt sichtbar (vorher: Box höher als das Fenster, unten abgeschnitten, kein Scrollen) */ .cp-qc-dlg:is(.cp-dai, .cp-pi) { align-items: center; padding: 3vh 16px; } .cp-qc-dlg:is(.cp-dai, .cp-pi) > .cp-qc-box { display: flex; flex-direction: column; max-height: 94vh; max-height: 94dvh; overflow: hidden; } .cp-qc-dlg:is(.cp-dai, .cp-pi) > .cp-qc-box > header { flex: none; } .cp-qc-dlg:is(.cp-dai, .cp-pi) .cp-inv-dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-dai :is(ol.cp-dai-list, ol.cp-dai-items) { max-height: none; overflow: visible; } .cp-qc-dlg:is(.cp-dai, .cp-pi) .cp-inv-dlg-foot { position: sticky; bottom: 0; z-index: 2; margin: 12px -20px 0; padding: 12px 20px 16px; border-top: 1px solid var(--cp-line); background: var(--cp-surface); } @media (max-width: 575px) { .cp-qc-dlg:is(.cp-dai, .cp-pi) { padding: 0; align-items: stretch; } .cp-qc-dlg:is(.cp-dai, .cp-pi) > .cp-qc-box { max-height: 100dvh; border-radius: 0; } .cp-qc-dlg:is(.cp-dai, .cp-pi) .cp-inv-dlg-foot { margin: 12px -14px 0; padding: 10px 14px 14px; } } /* v5.82.0 · Vertragsunterschrift der Agentur (billing-tools.js / invoice-tools.js) */ .cp-sign-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-warning) 40%, transparent); background: color-mix(in srgb, var(--cp-warning) 10%, transparent); color: var(--cp-warning); font: 600 11.5px/1 var(--cp-font, inherit); white-space: nowrap; } .cp-sign-chip.is-ok { border-color: color-mix(in srgb, var(--cp-success) 38%, transparent); background: color-mix(in srgb, var(--cp-success) 10%, transparent); color: var(--cp-success); } .cp-sign-chip svg { width: 14px; height: 14px; } .cp-sign-info { display: flex; flex-direction: column; gap: 3px; margin: 0 0 14px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); } .cp-sign-info b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } .cp-sign-info span { font-size: 12.5px; line-height: 1.45; color: var(--cp-text); } .cp-sign-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-sign-tools button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-sign-tools button:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-sign-tools button[data-s="saved"] { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); } .cp-sign-tools button[hidden] { display: none !important; } .cp-sign-tools svg { width: 14px; height: 14px; margin: 0 !important; } .cp-sign-tools label { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 12.5px; font-weight: 400; color: var(--cp-muted); cursor: pointer; } #accept-contract-form #signature canvas { border-radius: 3px; touch-action: none; } /* v5.82.0 · Dokument löschen (billing-tools.js) */ .cp-del .cp-qc-box { width: min(520px, 100%); } .cp-dai-orb.is-bad { border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); background: color-mix(in srgb, var(--cp-danger) 12%, transparent); color: var(--cp-danger); } .cp-del-txt { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--cp-text); } .cp-del-ok { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; font-weight: 400; color: var(--cp-strong); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-save.is-danger { background: var(--cp-danger) !important; box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-save.is-danger:disabled { opacity: .45; cursor: not-allowed; } html[data-theme]:not(#cp):not(#cq) body .dropdown-menu .cp-del-doc { color: var(--cp-danger) !important; } html[data-theme]:not(#cp):not(#cq) body #accept-contract-form #signature canvas { display: block; background: #FFFFFF !important; border: 1px solid var(--cp-line-2) !important; box-shadow: inset 0 -28px 0 -27px #C9CDD4; cursor: crosshair; } #accept-contract-form .cp-sign-label { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } #accept-contract-form .cp-sign-label::after { content: " – mit Maus, Trackpad oder Finger im weißen Feld zeichnen"; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cp-dim); } /* v5.82.1 · Info-Zeile „Enthaltene Posten-Rabatte“ unter den Summen (invoice-tools.js) */ .cp-li-disc-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; margin: 8px 0 0 auto; max-width: 420px; padding: 9px 12px; border-radius: 3px; border: 1px dashed var(--cp-line-2); font-size: 12.5px; color: var(--cp-muted); } .cp-li-disc-sum b { font-weight: 600; color: var(--cp-success); font-variant-numeric: tabular-nums; text-align: right; } .cp-li-disc-sum small { grid-column: 1 / -1; font-size: 11.5px; color: var(--cp-dim); } /* v5.84.0 · Unterschreiben-Dialog für Kostenvoranschlag/Angebot (billing-tools.js) */ .cp-sign-dlg .cp-qc-box { width: min(680px, 100%); } .cp-sign-dlg .cp-qc-box header h3 { margin: 0 0 3px; font-size: 16px; font-weight: 600; color: var(--cp-strong); } .cp-sign-dlg .cp-sign-label { margin: 2px 0 6px; font-size: 11.5px; color: var(--cp-dim); } .cp-sign-pad { display: block; width: 100%; height: 200px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: #FFFFFF; touch-action: none; cursor: crosshair; } /* v5.85.0 · „Bereits erstellt …“ in der Status-Leiste (Angebot/Vertrag/KV) */ .cp-doc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 9px 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-info) 35%, transparent); background: color-mix(in srgb, var(--cp-info) 8%, transparent); font-size: 12.5px; color: var(--cp-muted); } .cp-doc-links > svg { flex: none; width: 15px; height: 15px; color: var(--cp-info); } .cp-doc-links a { font-weight: 600; color: var(--cp-strong) !important; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cp-info) 50%, transparent); text-underline-offset: 3px; } /* v5.87.0 · PDF-Archiv (billing-tools.js) */ .cp-doc-archive { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 14px; padding: 8px 12px; border-radius: 3px; border: 1px solid var(--cp-line, rgba(127,127,127,.25)); font-size: 12.5px; color: var(--cp-muted); } .cp-doc-archive > svg { flex: none; width: 15px; height: 15px; } .cp-doc-archive .cp-arc-t { font-weight: 600; color: var(--cp-strong); } .cp-doc-archive button { padding: 3px 9px; border-radius: 3px; border: 1px solid var(--cp-line, rgba(127,127,127,.3)); background: transparent; color: var(--cp-strong); font-size: 12px; cursor: pointer; } .cp-doc-archive button:hover { border-color: var(--cp-strong); } .cp-doc-archive button.is-bad { border-color: var(--cp-bad, #c0392b); color: var(--cp-bad, #c0392b); } .cp-doc-archive .cp-arc-none { font-style: italic; } /* v5.88.0 · Beleg-Vorschau (Team + Kundenportal): ein Kopfbereich statt doppelter Leisten (pdf-preview.js), Radius 3 px */ html[data-theme] body .cp-pdfv .cp-pdfv-bar, html[data-theme] body .cp-pdfv .cp-pdfv-pages, html[data-theme] body .cp-pdfv .cp-pdfv-seg, html[data-theme] body .cp-pdfv .cp-pdfv-zoom, html[data-theme] body .cp-pdfv .cp-pdfv-acts a, html[data-theme] body .cp-pdfv .cp-pdfv-acts button, html[data-theme] body .cp-pdfv .cp-pdfv-seg button { border-radius: 3px !important; } .cp-pdfv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin: 0 0 12px; padding: 18px 20px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: linear-gradient(180deg, color-mix(in srgb, var(--cp-surface, #111318) 96%, #fff 4%), var(--cp-surface, #111318)); position: relative; overflow: hidden; animation: cp-pdfv-rise .45s cubic-bezier(.2,.7,.2,1) both; } .cp-pdfv-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cp-rust); } .cp-pdfv-id { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 12px; min-width: 0; } .cp-pdfv-kind { grid-column: 1 / -1; font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cp-muted); } .cp-pdfv-id > b { font-size: 21px; font-weight: 600; letter-spacing: .2px; color: var(--cp-strong); line-height: 1.15; } .cp-pdfv-id > small { grid-column: 1 / -1; font-size: 13px; color: var(--cp-text); opacity: .85; } .cp-pdfv-chip { justify-self: start; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--cp-line-2); font-size: 11.5px; font-weight: 600; letter-spacing: .3px; color: var(--cp-strong); } .cp-pdfv-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .cp-pdfv-chip.is-ok { color: var(--cp-ok, #3FB27F); border-color: color-mix(in srgb, var(--cp-ok, #3FB27F) 40%, transparent); background: color-mix(in srgb, var(--cp-ok, #3FB27F) 10%, transparent); } .cp-pdfv-chip.is-info { color: var(--cp-info, #5B8DEF); border-color: color-mix(in srgb, var(--cp-info, #5B8DEF) 40%, transparent); background: color-mix(in srgb, var(--cp-info, #5B8DEF) 10%, transparent); } .cp-pdfv-chip.is-info i { animation: cp-pdfv-pulse 1.8s ease-in-out infinite; } .cp-pdfv-chip.is-bad { color: var(--cp-bad, #E0605E); border-color: color-mix(in srgb, var(--cp-bad, #E0605E) 40%, transparent); background: color-mix(in srgb, var(--cp-bad, #E0605E) 10%, transparent); } .cp-pdfv-chip.is-muted { color: var(--cp-muted); } .cp-pdfv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } html[data-theme] body a.cp-pdfv-b, .cp-pdfv-b { display: inline-flex !important; align-items: center; gap: 8px; height: 38px; margin: 0 !important; padding: 0 16px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-text) !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; float: none !important; transition: border-color .15s, background .15s, color .15s; } .cp-pdfv-b svg { width: 16px; height: 16px; } html[data-theme] body a.cp-pdfv-b:hover { border-color: var(--cp-strong) !important; color: var(--cp-strong) !important; } html[data-theme] body a.cp-pdfv-b.is-primary { border-color: transparent !important; background: var(--cp-rust) !important; color: #fff !important; } html[data-theme] body a.cp-pdfv-b.is-primary:hover { background: var(--cp-rust-hi) !important; } html[data-theme] body a.cp-pdfv-b.is-ghost:hover { border-color: var(--cp-bad, #E0605E) !important; color: var(--cp-bad, #E0605E) !important; } .cp-pdfv-bar .cp-pdfv-acts { margin-left: auto; } @keyframes cp-pdfv-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes cp-pdfv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (max-width: 640px) { .cp-pdfv-head { padding: 14px; } .cp-pdfv-id > b { font-size: 18px; } .cp-pdfv-cta { width: 100%; } .cp-pdfv-cta .cp-pdfv-b { flex: 1 1 auto; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .cp-pdfv-head, .cp-pdfv-chip i { animation: none !important; } } @media print { .cp-pdfv-head { display: none !important; } } /* v5.88.0 · Kommentare bei Kostenvoranschlag/Angebot (Team + Kundenportal): ruhige Karte, Eingabe + Fußleiste als eine Einheit, Knöpfe in einer Reihe */ html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section { border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-surface) !important; box-shadow: none !important; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-header, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-header { display: flex !important; align-items: center; gap: 10px; padding: 16px 18px !important; border-bottom: 1px solid var(--cp-line) !important; background: transparent !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .2px; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-header svg, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-header svg { width: 16px !important; height: 16px !important; color: var(--cp-rust) !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-body, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-body { padding: 16px 18px 18px !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .post-dropzone, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .post-dropzone { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section textarea#description, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .note-editor, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section textarea#description, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .note-editor { display: block; width: 100% !important; min-height: 96px; margin: 0 !important; padding: 12px 14px !important; border: 1px solid var(--cp-line-2) !important; border-bottom: 0 !important; border-radius: 3px 3px 0 0 !important; background: color-mix(in srgb, var(--cp-text) 3%, transparent) !important; color: var(--cp-strong) !important; font-size: 13.5px !important; line-height: 1.55 !important; resize: vertical; box-shadow: none !important; transition: border-color .15s, background .15s; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section textarea#description:focus, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section textarea#description:focus { outline: none !important; border-color: var(--cp-strong) !important; background: color-mix(in srgb, var(--cp-text) 5%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 !important; padding: 8px !important; border: 1px solid var(--cp-line-2) !important; border-radius: 0 0 3px 3px !important; background: color-mix(in srgb, var(--cp-text) 2%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer::before, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer::before, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer::after, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer::after { display: none !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer > *, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer > *, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .me-auto > *, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .me-auto > * { float: none !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .me-auto, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .me-auto { display: flex !important; align-items: center; gap: 6px; margin-right: auto !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .btn-default, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .record-start-btn, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .upload-file-button, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .btn-default, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .record-start-btn, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .upload-file-button { display: inline-flex !important; align-items: center; justify-content: center; width: 38px !important; min-width: 38px; height: 38px !important; padding: 0 !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: transparent !important; color: var(--cp-muted) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .btn-default:hover, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .record-start-btn:hover, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .upload-file-button:hover, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .btn-default:hover, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .record-start-btn:hover, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .upload-file-button:hover { border-color: var(--cp-strong) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .btn-default span.hidden-xs, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .btn-default span.hidden-xs { display: none !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer button[type=submit], html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer button[type=submit] { display: inline-flex !important; align-items: center; gap: 8px; height: 38px !important; margin-left: auto !important; padding: 0 16px !important; border-radius: 3px !important; border: 0 !important; background: var(--cp-rust) !important; color: #fff !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: .6px; text-transform: none !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer button[type=submit]:hover, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer button[type=submit]:hover { background: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer button[type=submit] svg, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer button[type=submit] svg { width: 15px !important; height: 15px !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .dropzone-previews, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .post-file-previews, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .dropzone-previews, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .post-file-previews { margin: 8px 0 0 !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .comment-container, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .media, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section [id^=estimate-comment-], html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section [id^=proposal-comment-], html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .comment-container, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .media, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section [id^=estimate-comment-], html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section [id^=proposal-comment-] { border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-body:not(:has(.comment-container, [id$=-comment-container] .d-flex)) #comment-form-container::after, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-body:not(:has(.comment-container, [id$=-comment-container] .d-flex)) #comment-form-container::after { content: 'Fragen zum Dokument? Schreiben Sie uns hier – wir antworten so schnell wie möglich.'; display: block; margin-top: 10px; font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .comment-container, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .comment-container { margin: 0 0 12px !important; padding: 12px 0 0 !important; border-top: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .comment-container .bg-white, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .comment-container .bg-white { background: transparent !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .comment-container .avatar img, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .comment-container .avatar img { border-radius: 50% !important; } /* v5.88.1 · Kommentar-Fußleiste: verborgene Aufnahme-Knöpfe bleiben verborgen, „Posten“ in derselben Reihe (schmale Seitenspalte) */ html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .hide, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .d-none, html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .record-end-btn.hide, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .hide, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .d-none, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .record-end-btn.hide { display: none !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer { flex-wrap: nowrap !important; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer .me-auto, html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer .me-auto { flex: 0 1 auto; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body #estimate-comments-section .card-footer button[type=submit], html[data-theme]:not(#cp):not(#cq) body #proposal-comments-section .card-footer button[type=submit] { flex: 0 0 auto; white-space: nowrap; padding: 0 14px !important; } /* v5.89.0 · E-Mail schreiben: Messung nur mit Einwilligung (email-client-tab.js) */ .cp-mcomp-track { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 0 4px; font-size: 12px; color: var(--cp-muted); cursor: pointer; white-space: nowrap; } .cp-mcomp-track input { margin: 0; accent-color: var(--cp-rust); } @media (max-width: 640px) { .cp-mcomp-track span { white-space: normal; } } /* v5.90.0 · Abgeschlossene Belege: Schreibschutz-Hinweis, Freischaltung, Änderungsprotokoll (doc-lock.js) */ .cp-lock { margin: 10px 0 0; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface); overflow: hidden; } .cp-lock-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--cp-line); } .cp-lock-row > svg { flex: none; width: 18px; height: 18px; color: var(--cp-strong); } .cp-lock-row.is-open > svg { color: var(--cp-warn, #E0A33A); } .cp-lock-row > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cp-lock-row b { font-size: 13px; font-weight: 600; color: var(--cp-strong); } .cp-lock-row small { font-size: 12px; color: var(--cp-muted); } .cp-lock.is-locked { border-left: 2px solid var(--cp-strong); } .cp-lock-row.is-open { background: color-mix(in srgb, var(--cp-warn, #E0A33A) 8%, transparent); } .cp-lock-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-strong); font-size: 12.5px; font-weight: 600; cursor: pointer; } .cp-lock-btn svg { width: 15px; height: 15px; } .cp-lock-btn:hover { border-color: var(--cp-strong); } html[data-theme] body .cp-lock-btn.is-primary { border-color: transparent; background: var(--cp-rust); color: #fff; } html[data-theme] body .cp-lock-btn.is-primary:hover { background: var(--cp-rust-hi); } .cp-lock-hist-h { padding: 6px 10px; } .cp-lock-link { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; } .cp-lock-link:hover { color: var(--cp-strong); } .cp-lock-link svg { width: 15px; height: 15px; } .cp-lock-list { list-style: none; margin: 0; padding: 0 14px 12px; max-height: 420px; overflow: auto; } .cp-lock-list > li { display: grid; grid-template-columns: 118px 150px 1fr; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--cp-line); font-size: 12.5px; color: var(--cp-text); } .cp-lock-list > li.is-empty { display: block; color: var(--cp-muted); } .cp-lock-list time { color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-lock-list em { font-style: normal; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-lock-list b { color: var(--cp-strong); font-weight: 600; } .cp-lock-list b.is-bad { color: var(--cp-bad, #E0605E); } .cp-lock-list ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .cp-lock-list ul li span { color: var(--cp-muted); } .cp-lock-list s { color: var(--cp-muted); } .cp-lock-list ins { text-decoration: none; color: var(--cp-strong); } @media (max-width: 720px) { .cp-lock-row { flex-wrap: wrap; } .cp-lock-list > li { grid-template-columns: 1fr; } } .cp-lock-f { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; font-size: 12.5px; color: var(--cp-muted); } .cp-lock-f textarea, .cp-lock-f input { width: 100%; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: transparent; color: var(--cp-strong); font-size: 13.5px; } .cp-lock-f textarea:focus, .cp-lock-f input:focus { outline: none; border-color: var(--cp-strong); } .cp-lock-err { margin: 10px 0 0; font-size: 12.5px; color: var(--cp-bad, #E0605E); } /* gesperrt: Bearbeiten-Werkzeuge ausblenden (der Server weist Änderungen ohnehin ab) – v5.90.2: höhere Spezifität gegen die Tabellen-Icons */ html[data-theme]:not(#cp):not(#cq) body.cp-doc-locked [data-action-url*="/item_modal_form"], html[data-theme]:not(#cp):not(#cq) body.cp-doc-locked [data-action-url*="/discount_modal_form"], html[data-theme]:not(#cp):not(#cq) body.cp-doc-locked [data-action-url$="s/modal_form"][data-post-id]:not([data-post-is_clone]), html[data-theme]:not(#cp):not(#cq) body.cp-doc-locked a[href*="/editor/"], html[data-theme]:not(#cp):not(#cq) body.cp-doc-locked [data-action-url*="/delete_item"], html[data-theme]:not(#cp):not(#cq) body.cp-doc-locked .cp-del-doc, html[data-theme]:not(#cp):not(#cq) body.cp-doc-locked [data-action-url$="s/delete"], html[data-theme]:not(#cp):not(#cq) body.cp-doc-locked :is(#invoice-item-table, #estimate-item-table, #proposal-item-table, #contract-item-table) :is(a.edit, a.delete, .move-icon), html[data-theme]:not(#cp):not(#cq) body.cp-doc-locked [data-est="add"] { display: none !important; } /* v5.91.0 · Rechtsseiten (RISE „Seiten“: Impressum, Datenschutz, AGB) – ruhige Lesetypografie, Radius 3 px */ .ca-legal { max-width: 860px; margin: 0 auto; padding: 8px 4px 40px; color: var(--cp-text, #D9DCE1); font-size: 14.5px; line-height: 1.7; } .ca-legal-head { padding: 26px 0 22px; margin-bottom: 18px; border-bottom: 1px solid var(--cp-line-2, rgba(255,255,255,.12)); } .ca-legal-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cp-muted, #9BA2AA); } .ca-legal-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cp-rust, #C0431C); } .ca-legal h1 { margin: 10px 0 6px; font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: .2px; color: var(--cp-strong, #F6F6F4); } .ca-legal-lead { margin: 0; font-size: 15px; color: var(--cp-text, #D9DCE1); } .ca-legal-stand { margin: 6px 0 0; font-size: 12.5px; color: var(--cp-muted, #9BA2AA); } .ca-legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .ca-legal-nav a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--cp-line-2, rgba(255,255,255,.14)); color: var(--cp-text, #D9DCE1) !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important; } .ca-legal-nav a:hover { border-color: var(--cp-strong, #F6F6F4); color: var(--cp-strong, #F6F6F4) !important; } .ca-legal section { padding: 16px 0; border-bottom: 1px solid var(--cp-line, rgba(255,255,255,.07)); } .ca-legal section:last-child { border-bottom: 0; } .ca-legal h2 { margin: 0 0 8px; font-size: 16.5px; font-weight: 600; color: var(--cp-strong, #F6F6F4); } .ca-legal p { margin: 0 0 8px; } .ca-legal a { color: var(--cp-strong, #F6F6F4); text-decoration: underline; text-decoration-color: var(--cp-rust, #C0431C); text-underline-offset: 3px; } .ca-legal ul { margin: 6px 0 8px; padding-left: 20px; } .ca-legal ul li { margin: 4px 0; } .ca-legal ol { counter-reset: abs; list-style: none; margin: 0; padding: 0; } .ca-legal ol > li { counter-increment: abs; position: relative; margin: 0 0 8px; padding-left: 38px; } .ca-legal ol > li::before { content: "(" counter(abs) ")"; position: absolute; left: 0; top: 0; color: var(--cp-muted, #9BA2AA); font-variant-numeric: tabular-nums; } .ca-legal strong, .ca-legal b { color: var(--cp-strong, #F6F6F4); font-weight: 600; } html:not([data-theme="dark"]) .ca-legal { color: #2A2D33; } html:not([data-theme="dark"]) .ca-legal h1, html:not([data-theme="dark"]) .ca-legal h2, html:not([data-theme="dark"]) .ca-legal strong, html:not([data-theme="dark"]) .ca-legal b, html:not([data-theme="dark"]) .ca-legal a { color: #06070A; } @media (max-width: 640px) { .ca-legal { font-size: 14px; padding: 4px 2px 32px; } .ca-legal h1 { font-size: 24px; } .ca-legal ol > li { padding-left: 32px; } } @media print { .ca-legal-nav { display: none; } .ca-legal, .ca-legal * { color: #000 !important; } } /* v5.93.0 · Kostenvoranschlag anfordern: Auswahl im Fenster (Katalog oder freie Anfrage) */ .ca-er-options { display: flex; flex-direction: column; gap: 10px; } .ca-er-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--cp-line-2, rgba(255,255,255,.12)); border-radius: 3px; background: color-mix(in srgb, var(--cp-text, #fff) 2%, transparent); color: var(--cp-strong, inherit) !important; text-decoration: none !important; transition: border-color .15s ease, background .15s ease; } .ca-er-option:hover { border-color: var(--cp-rust, #d4552a); background: color-mix(in srgb, var(--cp-rust, #d4552a) 6%, transparent); } .ca-er-ic { flex: 0 0 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: color-mix(in srgb, var(--cp-rust, #d4552a) 14%, transparent); color: var(--cp-rust, #d4552a); } .ca-er-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ca-er-txt strong { font-size: 14px; font-weight: 600; } .ca-er-txt small { font-size: 12.5px; line-height: 1.45; color: var(--cp-muted, #8a8f98); } .ca-er-go { flex: 0 0 auto; color: var(--cp-muted, #8a8f98); } /* v5.93.0 · „Bestellung prüfen“: Fußleiste geordnet (Datei/Aufnahme links, Aktionen rechts), auf dem Handy untereinander */ #order-dropzone .card-footer { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; } #order-dropzone .card-footer::before, #order-dropzone .card-footer::after { display: none !important; } #order-dropzone .card-footer > .float-start { float: none !important; margin-right: auto; } #order-dropzone .card-footer > .float-start .me-auto { display: flex; align-items: center; gap: 8px; } #order-dropzone .card-footer > .float-start .me-auto > * { float: none !important; margin: 0 !important; } #order-dropzone .card-footer .upload-file-button { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; height: 38px !important; padding: 0 14px !important; white-space: nowrap; border-radius: 3px !important; } #order-dropzone .card-footer .record-start-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 3px !important; } #order-dropzone .card-footer > .btn { float: none !important; margin: 0 !important; height: 38px; display: inline-flex !important; align-items: center; gap: 6px; white-space: nowrap; border-radius: 3px !important; } #order-dropzone .card-footer > button[type=submit] { order: 3; } #order-dropzone .card-footer > #ca-request-estimate-btn { order: 2; } #order-dropzone .card-footer > .find-more-items-btn { order: 1; } @media (max-width: 640px) { #order-dropzone .card-footer > .float-start { width: 100%; } #order-dropzone .card-footer > .btn { flex: 1 1 100%; justify-content: center; } } /* v5.94.0 · Kostenvoranschlag-Anfrage: Kopf, Leistungstabelle, Eckdaten */ .ca-er-top { margin-bottom: 18px !important; } .ca-er-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ca-er-top-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } .ca-er-top-ic { flex: 0 0 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: color-mix(in srgb, var(--cp-rust, #d4552a) 14%, transparent); color: var(--cp-rust, #d4552a); } .ca-er-top-kicker { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cp-muted, #8a8f98); margin-bottom: 3px; } .ca-er-top-title { margin: 0 0 8px !important; padding: 0 !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.25; color: var(--cp-strong, inherit); letter-spacing: .2px; } .ca-er-top-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .ca-er-top-meta .badge { border-radius: 3px !important; font-size: 11.5px !important; padding: 5px 9px !important; font-weight: 600; letter-spacing: .3px; } .ca-er-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--cp-line-2, rgba(255,255,255,.12)); border-radius: 3px; font-size: 12.5px; color: var(--cp-text, inherit) !important; text-decoration: none !important; background: transparent; } a.ca-er-chip:hover { border-color: var(--cp-strong, #fff); } .ca-er-chip .avatar { margin-right: 0 !important; } .ca-er-chip-plain { color: var(--cp-muted, #8a8f98) !important; } .ca-er-top-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ca-er-top-actions .btn { display: inline-flex !important; align-items: center; gap: 6px; height: 38px; border-radius: 3px !important; white-space: nowrap; } .ca-er-card { border-radius: 3px !important; overflow: hidden; } .ca-er-card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--cp-line, rgba(255,255,255,.08)); } .ca-er-kicker { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cp-muted, #8a8f98); margin-bottom: 4px; } .ca-er-h { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; color: var(--cp-strong, inherit); } .ca-er-count { font-size: 12px; color: var(--cp-muted, #8a8f98); border: 1px solid var(--cp-line-2, rgba(255,255,255,.12)); border-radius: 3px; padding: 3px 8px; } .ca-er-table { width: 100%; border-collapse: collapse; } .ca-er-table th { padding: 11px 22px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cp-muted, #8a8f98); border-bottom: 1px solid var(--cp-line, rgba(255,255,255,.08)); } .ca-er-table td { padding: 14px 22px; vertical-align: top; border-bottom: 1px solid var(--cp-line, rgba(255,255,255,.08)); font-size: 13.5px; color: var(--cp-text, inherit); } .ca-er-table tfoot td { border-bottom: 0; font-weight: 600; color: var(--cp-strong, inherit); font-size: 14px; background: color-mix(in srgb, var(--cp-text, #fff) 2%, transparent); } .ca-er-item-title { font-weight: 600; color: var(--cp-strong, inherit); } .ca-er-item-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted, #8a8f98); max-width: 640px; } .ca-er-nowrap { white-space: nowrap; } .ca-er-ab { font-size: 11px; color: var(--cp-muted, #8a8f98); font-weight: 400; } .ca-er-hint { display: flex; align-items: center; gap: 6px; padding: 10px 22px 16px; font-size: 12px; color: var(--cp-muted, #8a8f98); } .ca-er-section { padding: 16px 22px; border-top: 1px solid var(--cp-line, rgba(255,255,255,.08)); } .ca-er-card-head + .ca-er-section { border-top: 0; } .ca-er-label { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cp-muted, #8a8f98); margin-bottom: 8px; } .ca-er-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ca-er-label-row > span { display: inline-flex; align-items: center; gap: 6px; } .ca-er-value { font-size: 13.5px; line-height: 1.6; color: var(--cp-text, inherit); white-space: normal; } .ca-er-link { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; } .ca-er-empty { color: var(--cp-muted, #8a8f98); font-size: 13px; } .ca-er-info { border-radius: 3px !important; } .ca-er-dl { margin: 0; } .ca-er-dl-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--cp-line, rgba(255,255,255,.08)); } .ca-er-dl-row:first-child { padding-top: 0; } .ca-er-dl-row:last-child { border-bottom: 0; padding-bottom: 0; } .ca-er-dl dt { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cp-muted, #8a8f98); } .ca-er-dl dd { margin: 0; font-size: 13.5px; color: var(--cp-strong, inherit); word-break: break-word; } .ca-er-sub { display: block; font-size: 12.5px; margin-top: 2px; } @media (max-width: 640px) { .ca-er-top-title { font-size: 19px !important; } .ca-er-top-actions { width: 100%; } .ca-er-top-actions .btn { flex: 1 1 auto; justify-content: center; } .ca-er-table th, .ca-er-table td { padding-left: 14px; padding-right: 14px; } .ca-er-card-head, .ca-er-section, .ca-er-hint { padding-left: 14px; padding-right: 14px; } } /* v5.95.0 · Kostenvoranschlag-Anfrage: Kopf ohne Umbruch, Fortschritt, nächster Schritt, Werkzeuge, KV-Liste, Ansprechpartner, Druck */ .ca-er-top-main { flex: 1 1 auto; } .ca-er-top-text { flex: 1 1 auto; min-width: 0; } .ca-er-top-actions { flex: 0 0 auto; } .ca-er-print { width: 38px; justify-content: center; padding: 0 !important; } .ca-er-progress { border-radius: 3px !important; margin-bottom: 16px; overflow: hidden; } .ca-er-steps { display: grid; grid-template-columns: repeat(var(--ca-steps, 5), minmax(0, 1fr)); margin: 0; padding: 20px 22px 16px; list-style: none; counter-reset: none; } .ca-er-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; } .ca-er-step::before { content: ""; position: absolute; top: 13px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--cp-line-2, rgba(255,255,255,.12)); } .ca-er-step:first-child::before { display: none; } .ca-er-step.is-done::before, .ca-er-step.is-current::before { background: var(--cp-rust, #d4552a); } .ca-er-step-dot { position: relative; z-index: 1; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--cp-line-2, rgba(255,255,255,.18)); background: var(--cp-surface, #15171c); font-size: 12px; font-weight: 600; color: var(--cp-muted, #8a8f98); } .ca-er-step.is-done .ca-er-step-dot { border-color: var(--cp-rust, #d4552a); background: var(--cp-rust, #d4552a); color: #fff; } .ca-er-step.is-current .ca-er-step-dot { border-color: var(--cp-rust, #d4552a); color: var(--cp-rust, #d4552a); } .ca-er-step-label { font-size: 12px; line-height: 1.3; color: var(--cp-muted, #8a8f98); overflow-wrap: anywhere; } .ca-er-step.is-done .ca-er-step-label { color: var(--cp-text, inherit); } .ca-er-step.is-current .ca-er-step-label { color: var(--cp-strong, inherit); font-weight: 600; } .ca-er-progress.is-canceled .ca-er-steps { opacity: .45; } .ca-er-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--cp-line, rgba(255,255,255,.08)); background: color-mix(in srgb, var(--cp-text, #fff) 2%, transparent); border-left: 3px solid var(--cp-rust, #d4552a); } .ca-er-next.is-overdue { border-left-color: #e0a106; } .ca-er-next-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 320px; font-size: 13.5px; color: var(--cp-text, inherit); } .ca-er-next-kicker { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cp-rust, #d4552a); } .ca-er-next-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ca-er-next-side .btn { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 3px !important; white-space: nowrap; } .ca-er-age { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cp-muted, #8a8f98); white-space: nowrap; } .ca-er-next.is-overdue .ca-er-age { color: #e0a106; font-weight: 600; } .ca-er-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ca-er-tool { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--cp-line-2, rgba(255,255,255,.12)); border-radius: 3px; font-size: 12px; color: var(--cp-text, inherit) !important; text-decoration: none !important; } .ca-er-tool:hover { border-color: var(--cp-rust, #d4552a); color: var(--cp-strong, #fff) !important; } .ca-er-history { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--cp-muted, #8a8f98); } .ca-er-history b { color: var(--cp-strong, inherit); font-weight: 600; } .ca-er-est-list { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; } .ca-er-est { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--cp-line-2, rgba(255,255,255,.12)); border-radius: 3px; text-decoration: none !important; color: var(--cp-text, inherit) !important; font-size: 12.5px; } .ca-er-est:hover { border-color: var(--cp-rust, #d4552a); } .ca-er-est-id { font-weight: 600; color: var(--cp-strong, inherit); } .ca-er-est-st { justify-self: start; font-size: 11px; padding: 2px 7px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text, #fff) 8%, transparent); color: var(--cp-muted, #8a8f98); } .ca-er-est-st.st-sent { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #7fb0ff; } .ca-er-est-st.st-accepted { background: color-mix(in srgb, #22c55e 18%, transparent); color: #5fd58a; } .ca-er-est-st.st-declined { background: color-mix(in srgb, #ef4444 18%, transparent); color: #f08a8a; } .ca-er-est-amt { white-space: nowrap; font-variant-numeric: tabular-nums; } .ca-er-contact { margin-top: 16px; } .ca-er-contact-kicker { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cp-muted, #8a8f98); margin-bottom: 10px; } .ca-er-contact-row { display: flex; align-items: center; gap: 12px; } .ca-er-contact-row strong { display: block; font-size: 14px; color: var(--cp-strong, inherit); } .ca-er-contact-row small { display: block; font-size: 12px; color: var(--cp-muted, #8a8f98); } .ca-er-tools-block { margin-top: 12px; } .ca-er-tools-block .ca-er-tool { flex: 1 1 auto; justify-content: center; } @media (max-width: 640px) { .ca-er-steps { padding: 16px 10px 12px; } .ca-er-step-label { font-size: 10.5px; } .ca-er-next { padding: 12px 14px; } } @media print { .estimate-request-details-view ~ *, #sidebar, .sidebar, #left-menu-toggle-mask, .navbar, #ca-help-fab, .ca-er-top-actions, .ca-er-tools, .details-view-top-button, .action-option, .ca-er-next-side .btn, [class*="support-widget"], .cp-portal-head { display: none !important; } body, .page-container, .main-scrollable-page, .scrollable-page { background: #fff !important; color: #111 !important; overflow: visible !important; height: auto !important; } .page-content, .details-view-wrapper { padding: 0 !important; margin: 0 !important; } .ca-er-card, .ca-er-info, .ca-er-progress { box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important; } .ca-er-card *, .ca-er-info *, .ca-er-progress *, .ca-er-top * { color: #111 !important; } } /* v5.98.0 · Kundenportal: Suche wieder sichtbar – eigene Kundensuche (api.php handleClientSearch) */ /* v5.98.0 · Nachrichten: ruhiges Zwei-Spalten-Layout (3 px, gleich hoch, ohne Außenkasten), echte Leerzustände */ html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg .box:has(> .message-view) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg .box-content.message-view { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg .message-view > .row { margin: 0 !important; row-gap: 16px; align-items: stretch; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg .message-view > .row > [class*="col-"] { display: flex; flex-direction: column; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg .message-view > .row > [class*="col-"]:first-child { padding-left: 0 !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg .message-view > .row > [class*="col-"]:last-child { padding-right: 0 !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg :is(#message-list-box, #message-details-section) { border-radius: 3px !important; box-shadow: none !important; flex: 1 1 auto; min-height: 460px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-list-box .card-header { min-height: 58px; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-list-box .card-header > .float-start { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .3px; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-list-box .card-header > .float-end { flex: 0 1 240px; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #search-messages { width: 100% !important; border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg .message-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg .message-tabs > a { margin: 0 !important; border-radius: 3px !important; height: 38px; display: inline-flex !important; align-items: center; gap: 6px; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-table :is(td.dataTables_empty, td.dt-empty) { padding: 0 !important; background: transparent !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-list-box .card-header::before, html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-list-box .card-header::after { display: none !important; content: none !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-table_wrapper .dt-paging, html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-table_wrapper .dt-length, html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-table_wrapper .dt-info { font-size: 12px; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-table_wrapper:has(td.dataTables_empty, td.dt-empty) :is(.dt-paging, .dt-length, .dt-info, .datatable-tools, .dataTables_paginate, .dataTables_length, .dataTables_info) { display: none !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #empty-message { min-height: 0 !important; height: 100%; border: 0 !important; box-shadow: none !important; background: transparent !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #empty-message > .box-content { width: 100%; } .cp-msg-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 24px; text-align: center; min-height: 340px; } .cp-msg-empty.is-detail { min-height: 420px; } .cp-msg-empty-ico { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: color-mix(in srgb, var(--cp-rust, #d4552a) 12%, transparent); color: var(--cp-rust, #d4552a); margin-bottom: 6px; } .cp-msg-empty-ico svg { width: 24px; height: 24px; } .cp-msg-empty strong { font-size: 15px; font-weight: 600; color: var(--cp-strong, inherit); text-transform: none; letter-spacing: 0; } .cp-msg-empty > span:not(.cp-msg-empty-ico) { max-width: 360px; font-size: 13px; line-height: 1.55; color: var(--cp-muted, #8a8f98); text-transform: none; letter-spacing: 0; } .cp-msg-empty .cp-ws-btn { margin-top: 10px; } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg .message-view > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg :is(#message-list-box, #message-details-section) { min-height: 0; } .cp-msg-empty.is-detail { display: none; } } html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-msg #message-table :is(td.dataTables_empty, td.dt-empty):has(.cp-msg-empty)::before { display: none !important; content: none !important; } /* v5.98.0 · Dateien im Kundenportal (Reiter „Ordner“): gleiches Raster wie /file_manager – dort fehlte der Container (eine Box mehr dazwischen) */ html[data-theme]:not(#cp) body #file-grid-tab > .ptb20:has(> .box > #file-manager-items-box) { container-type: inline-size; container-name: cpfiles; padding-top: 4px !important; } html[data-theme]:not(#cp):not(#cq) body #file-grid-tab.cp-fm > .ptb20 > .box { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #file-grid-tab.cp-fm #file-manager-items-box { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #file-grid-tab.cp-fm #file-manager-container-card { margin: 0 !important; border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #file-grid-tab.cp-fm #file-manager-sidebar { border-radius: 3px !important; } /* ============================================================================ * v5.98.0 · Einstellungen → Kundenberechtigungen (settings/client_permissions) * Kopf mit Live-Übersicht, Bereichskarten, Schalter-Zeilen mit Erklärung, Menü-Vorschau, Speichern-Leiste * ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .ca-cp .card { border-radius: 3px !important; margin-bottom: 16px !important; overflow: visible; } .ca-cp-hero { padding: 0 !important; } .ca-cp-hero-top { padding: 22px 24px 18px; } .ca-cp-kicker { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cp-muted, #8a8f98); margin-bottom: 4px; } html[data-theme] body .ca-cp-title { margin: 0 0 8px !important; padding: 0 !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.25; color: var(--cp-strong, inherit); } .ca-cp-lead { margin: 0; max-width: 780px; font-size: 13px; line-height: 1.6; color: var(--cp-muted, #8a8f98); } .ca-cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--cp-line, rgba(255,255,255,.08)); } .ca-cp-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 24px; border-left: 1px solid var(--cp-line, rgba(255,255,255,.08)); min-width: 0; } .ca-cp-stat:first-child { border-left: 0; } .ca-cp-stat-l { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--cp-muted, #8a8f98); } .ca-cp-stat-v { font-size: 15px; font-weight: 600; color: var(--cp-strong, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ca-cp-stat[data-tone="ok"] .ca-cp-stat-v { color: var(--cp-success, #3FB984); } .ca-cp-stat[data-tone="warn"] .ca-cp-stat-v { color: var(--cp-warning, #E0A53A); } .ca-cp-stat[data-tone="info"] .ca-cp-stat-v { color: var(--cp-info, #6CA6D9); } .ca-cp-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--cp-line, rgba(255,255,255,.08)); } .ca-cp-ic { flex: 0 0 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--cp-rust-soft, rgba(192,67,28,.1)); color: var(--cp-rust, #C0431C); } .ca-cp-head-txt { flex: 1 1 auto; min-width: 0; } html[data-theme] body .ca-cp-head h3 { margin: 0 0 2px !important; padding: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--cp-strong, inherit); } .ca-cp-head p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted, #8a8f98); } .ca-cp-count { flex: none; align-self: center; font-size: 12px; color: var(--cp-muted, #8a8f98); border: 1px solid var(--cp-line-2, rgba(255,255,255,.12)); border-radius: 3px; padding: 3px 8px; white-space: nowrap; } .ca-cp-body { padding: 2px 22px; } .ca-cp-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--cp-line, rgba(255,255,255,.08)); } .ca-cp-body > .ca-cp-row:last-child, .ca-cp-body > div:last-child > .ca-cp-row { border-bottom: 0; } html[data-theme] body .ca-cp-txt { display: flex; flex-direction: column; gap: 3px; margin: 0 !important; padding: 0 !important; min-width: 0; font-weight: 400; cursor: pointer; } div.ca-cp-txt { cursor: default; } .ca-cp-t { font-size: 13.5px; font-weight: 600; color: var(--cp-strong, inherit); line-height: 1.4; } .ca-cp-h { font-size: 12.5px; line-height: 1.5; color: var(--cp-muted, #8a8f98); max-width: 640px; } .ca-cp-need, .ca-cp-warn { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; line-height: 1.4; } .ca-cp-need { color: var(--cp-dim, #7E858E); } .ca-cp-warn { color: var(--cp-warning, #E0A53A); } .ca-cp-row.has-dep .ca-cp-need { display: none; } .ca-cp-row.has-dep { padding-left: 16px; position: relative; } .ca-cp-row.has-dep::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 50%; width: 7px; border-left: 1px solid var(--cp-line-2, rgba(255,255,255,.14)); border-bottom: 1px solid var(--cp-line-2, rgba(255,255,255,.14)); } .ca-cp-row.is-dep-off .ca-cp-t { color: var(--cp-muted, #8a8f98); } .ca-cp-row.is-dep-off .ca-cp-need { display: inline-flex; color: var(--cp-warning, #E0A53A); } html[data-theme] body .ca-cp-ctl.form-check { flex: none; margin: 0 !important; padding: 0 !important; min-height: 0 !important; display: inline-flex; } html[data-theme] body .ca-cp-ctl.form-check .form-check-input { -webkit-appearance: none; appearance: none; margin: 0 !important; float: none !important; cursor: pointer; } .ca-cp-row-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; } .ca-cp-field { min-width: 0; } .ca-cp-field .select2-container { width: 100% !important; } .ca-cp-row-block { display: block; } .ca-cp-row-block > .ca-cp-txt { margin-bottom: 12px !important; } .ca-cp-field-full { margin-top: 12px; } .ca-cp-field-full.is-replaced { display: none; } .ca-cp-menus { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } html[data-theme] body .ca-cp-menu { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--cp-line-2, rgba(255,255,255,.14)); border-radius: 3px; background: var(--cp-surface-2, transparent); color: var(--cp-strong, inherit); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color var(--cp-dur-s, 180ms) var(--cp-ease, ease), color var(--cp-dur-s, 180ms) var(--cp-ease, ease), background var(--cp-dur-s, 180ms) var(--cp-ease, ease); } html[data-theme] body .ca-cp-menu:hover { border-color: var(--cp-strong, #fff); } html[data-theme] body .ca-cp-menu:focus-visible { outline: 2px solid var(--cp-rust, #C0431C); outline-offset: 2px; } .ca-cp-menu svg { width: 14px !important; height: 14px !important; flex: none; } .ca-cp-menu svg.ca-cp-menu-eye { width: 13px !important; height: 13px !important; opacity: .55; } .ca-cp-ic svg { width: 16px !important; height: 16px !important; } .ca-cp-need svg, .ca-cp-warn svg, .ca-cp-legend svg { width: 12px !important; height: 12px !important; flex: none; } .ca-cp-bar-state svg { width: 14px !important; height: 14px !important; } html[data-theme] body .ca-cp-menu.is-hidden { background: transparent; border-style: dashed; color: var(--cp-dim, #7E858E); } html[data-theme] body .ca-cp-menu.is-hidden > span { text-decoration: line-through; } html[data-theme] body .ca-cp-menu.is-off { background: transparent; color: var(--cp-dim, #7E858E); opacity: .75; } .ca-cp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11.5px; color: var(--cp-muted, #8a8f98); } .ca-cp-legend span { display: inline-flex; align-items: center; gap: 6px; } .ca-cp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .ca-cp-dot.is-on { background: var(--cp-success, #3FB984); } .ca-cp-dot.is-hidden { border: 1px dashed var(--cp-dim, #7E858E); } .ca-cp-dot.is-off { background: var(--cp-warning, #E0A53A); } .ca-cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .ca-cp-grid > .card { min-width: 0; } .ca-cp-person { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } .ca-cp-person img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; } .ca-cp-person small { margin-left: 6px; font-size: 11.5px; color: var(--cp-muted, #8a8f98); } .ca-cp-person em, .ca-cp-opt-off { margin-left: 6px; font-style: normal; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--cp-warning, #E0A53A); } .ca-cp-person.is-inactive img { filter: grayscale(1); opacity: .7; } .ca-cp-sortable .select2-search-choice { cursor: grab; } .ca-cp-sortable .sortable-ghost { opacity: .35; } .ca-cp-ext-body > .mb20 { margin: 14px 0 0 !important; } html[data-theme] body .ca-cp-ext-body .highlight-toolbar { display: inline; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: 11px !important; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cp-muted, #8a8f98) !important; } html[data-theme] body .ca-cp-ext-body .form-group { margin: 0 !important; padding: 12px 0 !important; border-bottom: 1px solid var(--cp-line, rgba(255,255,255,.08)); } html[data-theme] body .ca-cp-ext-body .form-group:last-child { border-bottom: 0; } html[data-theme] body .ca-cp-ext-body .form-group.form-switch { padding-left: 0 !important; } html[data-theme] body .ca-cp-ext-body .form-group > .row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .ca-cp-ext-body .form-group > .row > label { flex: 1 1 auto; width: auto; max-width: none; padding: 0 !important; margin: 0 !important; font-size: 13.5px; font-weight: 600; color: var(--cp-strong, inherit); } html[data-theme] body .ca-cp-ext-body .form-group > .row > div { flex: none; width: auto; max-width: none; padding: 0 !important; } html[data-theme] body .ca-cp-ext-body .form-check-input { margin: 0 !important; float: none !important; } html[data-theme] body .ca-cp-ext-body .form-switch .form-check-input { -webkit-appearance: none; appearance: none; } .ca-cp-bar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 18px; background: var(--cp-surface, #fff); border: 1px solid var(--cp-line-2, rgba(255,255,255,.14)); border-radius: 3px; box-shadow: var(--cp-shadow, 0 8px 24px -16px rgba(0,0,0,.4)); } .ca-cp-bar-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cp-muted, #8a8f98); } .ca-cp-bar.is-dirty { border-color: var(--cp-rust-line, rgba(192,67,28,.35)); } .ca-cp-bar.is-dirty .ca-cp-bar-state { color: var(--cp-rust, #C0431C); font-weight: 600; } .ca-cp-bar-actions { display: inline-flex; gap: 8px; } .ca-cp-bar-actions .btn[hidden] { display: none !important; } .ca-cp-bar-actions .btn { display: inline-flex !important; align-items: center; gap: 6px; height: 36px; border-radius: 3px !important; } @media (max-width: 1199px) { .ca-cp-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .ca-cp-hero-top { padding: 18px 16px 14px; } html[data-theme] body .ca-cp-title { font-size: 19px !important; } .ca-cp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ca-cp-stat { padding: 12px 16px; border-left: 0; border-top: 1px solid var(--cp-line, rgba(255,255,255,.08)); } .ca-cp-head { padding: 16px 16px 12px; } .ca-cp-body { padding: 2px 16px; } .ca-cp-row-field { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ca-cp-bar { padding: 10px 12px; } .ca-cp-bar-actions { width: 100%; } .ca-cp-bar-actions .btn { flex: 1 1 auto; justify-content: center; } } /* ============================================================================ * v5.100.0 · Ecken-Regel – Angleichung des RISE-Kerns (app.all.css, modern-ui.css, chat-modern.css) * Alle Zwischenwerte 4–49 px → 3 px (Ecken-Struktur bleibt, z. B. „3px 3px 0 0“). Ausgenommen sind echte Kreise/Pillen: * Häkchen, Lade-Kreisel, Farbwahl, Fortschrittsringe, Bildlaufleisten, Datums-Pillen in der Zeitleiste, Typ-Labels. * Regel: Flächen/Bedienelemente 3 px · Kreis nur Avatare/Punkte/Ringe · Pille nur Chips/Zähler/Schalter/Balken * ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body div.dropdown-menu.dt-button-collection.fixed { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body table.dtcr-cloned.dataTable { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .datepicker { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td, html[data-theme]:not(#cp):not(#cq) body .datepicker table tr th { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td span { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .bootstrap-timepicker-widget a.btn, html[data-theme]:not(#cp):not(#cq) body .bootstrap-timepicker-widget input { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .bootstrap-timepicker-widget table td a:hover { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .dropzone .dz-preview.dz-file-preview .dz-image { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .dropzone .dz-preview .dz-image { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .dropzone .dz-preview .dz-progress { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .dropzone .dz-preview .dz-error-message { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .awesomplete > ul { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .global-search-modal .modal-dialog .modal-content { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .dt-search input { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .datatable-search, html[data-theme]:not(#cp):not(#cq) body .custom-filter-search { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .dt-container .dt-paging .dt-paging-button { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .dt-container .dt-paging .dt-paging-button .page-link { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .dt-container .dt-paging .dt-paging-button .page-link:hover { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .dt-container .dt-paging .dt-paging-button.active .page-link { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .select2-container .select2-choice { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body td.option a.square-btn, html[data-theme]:not(#cp):not(#cq) body .action-option.square-btn { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .fc-button { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .dropzone { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .post-dropzone { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .datepicker.dropdown-menu { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .note-editor.note-frame { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .filter-section-container .select2-choice, html[data-theme]:not(#cp):not(#cq) body .datatable-tools .select2-choice, html[data-theme]:not(#cp):not(#cq) body .timesheet-buttons .select2-choice, html[data-theme]:not(#cp):not(#cq) body .item-categories-filter-section .select2-choice { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .non-round-option-button { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .select2-drop { border-radius: 0 0 3px 3px !important; } html[data-theme]:not(#cp):not(#cq) body .tox.tox-tinymce { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #client-details-page-contact-table tbody tr:last-child td:first-child { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #client-details-page-contact-table tbody tr:last-child td:last-child { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body pre { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .card .card-header:first-child { border-radius: 3px 3px 0 0 !important; } html[data-theme]:not(#cp):not(#cq) body .widget-icon { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .general-form.white .select2-container-multi.form-control .select2-choices { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .general-form .input-group-addon { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .nav-tabs { border-radius: 3px 3px 0 0 !important; } html[data-theme]:not(#cp):not(#cq) body .page-title { border-radius: 3px 3px 0 0 !important; } html[data-theme]:not(#cp):not(#cq) body #timeline:before { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .content-sidebar .list-group-item:hover, html[data-theme]:not(#cp):not(#cq) body .content-sidebar .list-group-item.active { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .project_and_clock_status_widget { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body #clock-status-widget { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .checkbox-blank { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .milestone { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .milestone .badge { border-radius: 3px 3px 0 0 !important; } html[data-theme]:not(#cp):not(#cq) body .help-search-box { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .app-popover { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .todo-input-box input { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .todo-input-box button { border-radius: 0 3px 3px 0 !important; } html[data-theme]:not(#cp):not(#cq) body .kanban-col.kanban-col-collapsed .kanban-col-title { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .kanban-col .kanban-col-title { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .kanban-col .kanban-item-list .kanban-item { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .rise-chat-wrapper { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .rise-chat-footer { border-radius: 0 0 3px 3px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-other .chat-msg { border-radius: 0 3px 3px 3px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-other.single-message .chat-msg { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-other.first-message .chat-msg { border-radius: 3px 3px 3px 2px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-other.middle-message .chat-msg { border-radius: 2px 3px 3px 2px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-other.last-message .chat-msg { border-radius: 2px 3px 3px 3px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-me.single-message .chat-msg { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-me.first-message .chat-msg { border-radius: 3px 3px 2px 3px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-me.middle-message .chat-msg { border-radius: 3px 2px 2px 3px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-me.last-message .chat-msg { border-radius: 3px 2px 3px 3px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-me .chat-msg { border-radius: 3px 0 3px 3px !important; } html[data-theme]:not(#cp):not(#cq) body .invoice-preview-container { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .lead-migration-contacts { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .icon-tag { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .sortable-file-row .sortable-file { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .cart-grid-item { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .cart-item-image-container .cart-item-image { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .edit-image-file { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .comment-highlight { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .sub-task-filter-kanban-active, html[data-theme]:not(#cp):not(#cq) body .sub-task-filter-active { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .bg-transparent-white { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .missed-reminder { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .nav-pills { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .nav-pills li a { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .folder-item-content { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .file-manager-preview-section img { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .file-manager-preview-section video { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .file-list-view { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .saved-file-info { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .file-manager-preview-section .text-white { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .global-search-modal .modal-content { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .highlight-toolbar { border-radius: 0 3px 3px 0 !important; } html[data-theme]:not(#cp):not(#cq) body .note-color-tag { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .mobile-mirror .more-options-btn .dropdown-menu { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .editor-preview { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .flex-item-row { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .wrapper-resizable { border-radius: 3px 0 0 3px !important; } html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.day:hover, html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.focused { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.active, html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.active.active, html[data-theme]:not(#cp):not(#cq) body .datepicker table tr td.today { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body.public-view .card, html[data-theme]:not(#cp):not(#cq) body.signin-page .card, html[data-theme]:not(#cp):not(#cq) body.signup-page .card, html[data-theme]:not(#cp):not(#cq) body .form-signin .card { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body.public-view .form-control, html[data-theme]:not(#cp):not(#cq) body.signin-page .form-control, html[data-theme]:not(#cp):not(#cq) body .form-signin .form-control { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body.public-view .btn-primary, html[data-theme]:not(#cp):not(#cq) body.signin-page .btn-primary, html[data-theme]:not(#cp):not(#cq) body .form-signin .btn-primary { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-modernized .chat-me .chat-msg, html[data-theme]:not(#cp):not(#cq) body .chat-modernized .chat-me .chat-message, html[data-theme]:not(#cp):not(#cq) body .chat-modernized .my-message, html[data-theme]:not(#cp):not(#cq) body .chat-modernized .message-right { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .chat-modernized .chat-other .chat-msg, html[data-theme]:not(#cp):not(#cq) body .chat-modernized .chat-other .chat-message, html[data-theme]:not(#cp):not(#cq) body .chat-modernized .their-message, html[data-theme]:not(#cp):not(#cq) body .chat-modernized .message-left { border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .rst-typing { border-radius: 3px !important; } /* Bootstrap 5: zentrale Rundungs-Variablen auf die Regel setzen (Dialoge, Menüs, Hinweise, Seitenzahlen, Tooltips, Listen folgen) */ html[data-theme], html[data-theme] body { --bs-border-radius: 3px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 3px; --bs-border-radius-xl: 3px; --bs-border-radius-xxl: 3px; --bs-border-radius-2xl: 3px; } html[data-theme]:not(#cp):not(#cq) body .btn-close { border-radius: 3px !important; } /* v5.100.1 · Aktionsmenü (⋯) in Info-Karten wurde abgeschnitten (Karte overflow:hidden, Menü länger als Karte → „Löschen“ u. a. unsichtbar). Solange ein Menü in einer Karte offen ist, darf es über die Karte hinausragen. */ html[data-theme]:not(#cp):not(#cq) body .card:has(.dropdown-menu.show) { overflow: visible !important; z-index: 5; } html[data-theme]:not(#cp):not(#cq) body .card:has(.dropdown-menu.show) > .card-header { overflow: visible !important; } /* v5.100.2 · „⋯“-Knopf ohne Einträge ausblenden (z. B. Stornorechnung: RISE erlaubt keine Aktionen → vorher leeres Menü) */ html[data-theme]:not(#cp):not(#cq) body .action-option[data-bs-toggle="dropdown"]:has(+ .dropdown-menu):not(:has(+ .dropdown-menu li)) { display: none !important; } /* ============================================================================ * v5.100.5 · Kundenansicht → Reiter „Finanzen“ (client-finance.js) * Kopf · Kennzahlen · Zu erledigen · Belegkette · gruppierte Unterreiter mit den originalen RISE-Listen * ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-fin-tab { display: inline-flex !important; align-items: center; gap: 7px; } .cp-fin-tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cp-danger); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; } .cp-fin { display: flex; flex-direction: column; gap: 16px; } .cp-fin .cp-fin-ic { flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 3px; } .cp-fin-head-txt { flex: 1 1 380px; min-width: 0; } .cp-fin-kicker { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cp-muted); margin-bottom: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-head h3 { margin: 0 0 4px !important; font-size: 19px !important; font-weight: 600 !important; color: var(--cp-strong) !important; text-transform: none !important; letter-spacing: 0 !important; } .cp-fin-head p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--cp-muted); max-width: 640px; } .cp-fin-acts { display: flex; align-items: center; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font: 500 13px/1 var(--cp-font, inherit); white-space: nowrap; text-decoration: none !important; cursor: pointer; transition: border-color var(--cp-dur-s, .18s) var(--cp-ease, ease), background var(--cp-dur-s, .18s) var(--cp-ease, ease), color var(--cp-dur-s, .18s) var(--cp-ease, ease); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-btn:hover { border-color: var(--cp-dim); background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-btn.is-primary { background: var(--cp-rust); border-color: var(--cp-rust); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-btn.is-primary:hover { background: var(--cp-rust-hi); border-color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-btn.is-primary::after { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-icon { width: 34px; padding: 0; } .cp-fin-btn.is-busy .cp-fin-ic { animation: cp-fin-spin 0.9s linear infinite; } @keyframes cp-fin-spin { to { transform: rotate(360deg); } } html[data-theme]:not(#cp):not(#cq) body .cp-fin-new .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 9px; } /* Kennzahlen */ html[data-theme]:not(#cp):not(#cq) body .cp-fin { container-type: inline-size; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-kpis { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 3px; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-kpi { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 20px; box-shadow: 1px 0 0 var(--cp-line), 0 1px 0 var(--cp-line); cursor: pointer; transition: background var(--cp-dur-s, .18s) var(--cp-ease, ease); } /* Trennlinien als Schatten rechts/unten (am Rand vom Rahmen abgeschnitten) → keine Lücken, wenn eine Reihe nicht voll ist; Spalten nach Platz */ @container (max-width: 1100px) { html[data-theme]:not(#cp):not(#cq) body .cp-fin-kpis[data-n="5"], html[data-theme]:not(#cp):not(#cq) body .cp-fin-kpis[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (max-width: 600px) { html[data-theme]:not(#cp):not(#cq) body .cp-fin-kpis[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html[data-theme]:not(#cp):not(#cq) body .cp-fin-kpi:hover { background: var(--cp-hover); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-kpi:focus-visible { outline: 2px solid var(--cp-rust); outline-offset: -2px; } .cp-fin-kpi-l { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cp-muted); } .cp-fin-kpi b { font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-fin-kpi small { font-size: 12px; line-height: 1.4; color: var(--cp-muted); } .cp-fin-kpi.is-bad b { color: var(--cp-danger); } .cp-fin-kpi.is-bad small { color: var(--cp-danger); } .cp-fin-kpi.is-warn small { color: var(--cp-warning); } .cp-fin-kpi.is-ok small { color: var(--cp-success); } .cp-fin-err { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 16px 20px; font-size: 13px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-link { all: unset; cursor: pointer; color: var(--cp-rust-hi); text-decoration: underline; } /* Zu erledigen + Belegkette */ .cp-fin-mid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-card { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 3px; overflow: hidden; } .cp-fin-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-card h4 { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--cp-strong) !important; text-transform: none !important; letter-spacing: 0 !important; } .cp-fin-card h4 .cp-fin-ic { color: var(--cp-rust); } .cp-fin-todo-n:not(:empty) { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cp-surface-3); color: var(--cp-strong); font-size: 11px; font-weight: 600; } .cp-fin-todo ul { list-style: none; margin: 0; padding: 0; } .cp-fin-todo li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--cp-line); } .cp-fin-todo li:first-child { border-top: 0; } .cp-fin-todo li > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cp-fin-todo li b { font-size: 13px; font-weight: 600; color: var(--cp-strong); } .cp-fin-todo li small { font-size: 12px; line-height: 1.45; color: var(--cp-muted); } .cp-fin-todo-ic { flex: 0 0 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--cp-surface-3); color: var(--cp-muted); } .cp-fin-todo li.is-bad .cp-fin-todo-ic { background: color-mix(in srgb, var(--cp-danger) 14%, transparent); color: var(--cp-danger); } .cp-fin-todo li.is-warn .cp-fin-todo-ic { background: color-mix(in srgb, var(--cp-warning) 15%, transparent); color: var(--cp-warning); } .cp-fin-todo li.is-info .cp-fin-todo-ic { background: color-mix(in srgb, var(--cp-info) 15%, transparent); color: var(--cp-info); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-todo li .cp-fin-btn { height: 30px; padding: 0 10px; font-size: 12.5px; flex: none; } .cp-fin-done { display: flex; align-items: center; gap: 12px; padding: 18px; } .cp-fin-done > .cp-fin-ic { color: var(--cp-success); } .cp-fin-done b { display: block; font-size: 13.5px; color: var(--cp-strong); } .cp-fin-done small { font-size: 12.5px; color: var(--cp-muted); } .cp-fin-steps { list-style: none; margin: 0; padding: 8px 0; } .cp-fin-steps li { position: relative; } .cp-fin-steps li + li::before { content: ""; position: absolute; left: 32px; top: -6px; height: 12px; border-left: 1px dashed var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-step { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 18px; cursor: pointer; transition: background var(--cp-dur-s, .18s) var(--cp-ease, ease); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-step:hover { background: var(--cp-hover); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-step:focus-visible { outline: 2px solid var(--cp-rust); outline-offset: -2px; } .cp-fin-step-ic { flex: 0 0 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust); } .cp-fin-step-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cp-fin-step-t b { font-size: 13px; font-weight: 600; color: var(--cp-strong); } .cp-fin-step-t small { font-size: 12px; color: var(--cp-muted); } .cp-fin-step em { flex: none; font-style: normal; font-size: 12px; color: var(--cp-muted); white-space: nowrap; } .cp-fin-step.is-bad em { color: var(--cp-danger); font-weight: 600; } .cp-fin-step > .cp-fin-ic:last-child { color: var(--cp-dim); } /* Unterreiter + Listen */ html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav-wrap { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 3px; padding: 6px 8px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 2px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav > li { margin: 0 !important; float: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav > li.cp-fin-grp { padding: 0 6px 0 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--cp-dim); white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav > li.cp-fin-grp:first-child { padding-left: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav .cp-fin-grp-a { pointer-events: none; color: inherit !important; text-decoration: none !important; cursor: default; padding: 0 !important; border: 0 !important; background: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav > li.cp-fin-grp ~ li.cp-fin-grp { margin-left: 8px !important; border-left: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav a.cp-fin-sec { display: inline-flex !important; align-items: center; gap: 6px; height: 34px; padding: 0 9px !important; margin: 0 !important; border: 0 !important; border-radius: 3px !important; background: transparent !important; color: var(--cp-muted) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav a.cp-fin-sec:hover { color: var(--cp-strong) !important; background: var(--cp-hover) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav a.cp-fin-sec.active { color: var(--cp-strong) !important; background: var(--cp-surface-3) !important; box-shadow: inset 0 -2px 0 var(--cp-rust) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav a.cp-fin-sec::after, html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav a.cp-fin-sec::before { display: none !important; } .cp-fin-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cp-surface-3); color: var(--cp-muted); font-size: 11px; font-style: normal; font-weight: 600; } .cp-fin-sec.active .cp-fin-n { background: var(--cp-rust); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-body > .tab-pane { padding: 0 !important; } /* Ladeplatzhalter */ .cp-fin-skel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 18px 20px; } .cp-fin-skel.is-rows { grid-template-columns: minmax(0, 1fr); gap: 10px; } .cp-fin-skel i { display: block; height: 44px; border-radius: 3px; background: linear-gradient(90deg, var(--cp-surface-2) 0%, var(--cp-surface-3) 50%, var(--cp-surface-2) 100%); background-size: 200% 100%; animation: cp-fin-shimmer 1.4s ease-in-out infinite; } @keyframes cp-fin-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* v5.103.0 · Projektansicht → Finanzen: Budget-Balken in der Ergebnis-Karte */ .cp-pfin-budget { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 12px; padding: 12px 14px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); } .cp-pfin-brow { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--cp-text); } .cp-pfin-brow b { font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-pfin-brow.is-sub { font-size: 12px; color: var(--cp-muted); font-variant-numeric: tabular-nums; } .cp-pfin-bar { height: 6px; margin-top: 4px; border-radius: 999px; overflow: hidden; background: var(--cp-surface-3); } .cp-pfin-bar i { display: block; height: 100%; } .cp-pfin-bar .is-billed { background: var(--cp-info, #5B9BFF); } .cp-pfin-bar .is-cost { background: var(--cp-success); } .cp-pfin-bar .is-warn { background: var(--cp-warning); } .cp-pfin-bar .is-over { background: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body #project-tabs .cp-fin-tab { gap: 6px; } /* v5.101.1 · Unterreiter immer in einer Zeile: zu eng → Gruppentitel weg (Trennlinie bleibt), dann seitlich scrollen */ @container (max-width: 1380px) { html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav > li.cp-fin-grp { padding: 0 !important; font-size: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav > li.cp-fin-grp:first-child { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav > li.cp-fin-grp ~ li.cp-fin-grp { height: 20px; margin: 0 6px !important; } } @container (max-width: 1115px) { html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav a.cp-fin-sec { padding: 0 7px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-nav a.cp-fin-sec > .cp-fin-ic { display: none; } } /* Hauptreiter der Kundenansicht mit Symbol (wie E-Mails/Finanzen) */ html[data-theme]:not(#cp):not(#cq) body #client-details-tabs > li > a.cp-tab-ic { display: inline-flex !important; align-items: center; gap: 7px; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body #client-details-tabs > li > a.cp-tab-ic > svg { flex: none; opacity: .8; } html[data-theme]:not(#cp):not(#cq) body #client-details-tabs > li > a.cp-tab-ic.active > svg, html[data-theme]:not(#cp):not(#cq) body #client-details-tabs > li > a.cp-tab-ic:hover > svg { opacity: 1; } /* v5.101.0 · Ergebnis-Karte + Ausgaben-Kurzübersicht (Bereich „Kosten“) */ .cp-fin-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .cp-fin-res-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cp-dim); } .cp-fin-res-body { padding: 6px 18px 16px; } .cp-fin-res-rows { margin: 0; } .cp-fin-res-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--cp-line); } .cp-fin-res-rows > div:first-child { border-top: 0; } .cp-fin-res-rows dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--cp-text); } .cp-fin-res-rows dt small { font-size: 12px; font-weight: 400; color: var(--cp-muted); } .cp-fin-res-rows dd { margin: 0; flex: none; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-fin-res-rows > div.is-sum { border-top: 1px solid var(--cp-line-2); margin-top: 2px; padding-top: 11px; } .cp-fin-res-rows > div.is-sum dt { font-weight: 600; color: var(--cp-strong); } .cp-fin-res-rows > div.is-sum dd { font-size: 17px; } .cp-fin-res-rows > div.is-ok dd { color: var(--cp-success); } .cp-fin-res-rows > div.is-bad dd { color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-res-rows .cp-fin-link { color: var(--cp-text); text-decoration: underline; text-decoration-color: var(--cp-line-2); text-underline-offset: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-res-rows .cp-fin-link:hover { color: var(--cp-rust-hi); text-decoration-color: currentColor; } .cp-fin-res-bar { display: flex; height: 6px; margin: 4px 0 12px; border-radius: 999px; overflow: hidden; background: var(--cp-surface-3); } .cp-fin-res-bar i { display: block; height: 100%; } .cp-fin-res-bar .is-cost { background: color-mix(in srgb, var(--cp-warning) 70%, transparent); } .cp-fin-res-bar .is-margin { background: var(--cp-success); } .cp-fin-res-note, .cp-fin-xsum-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12px; line-height: 1.5; color: var(--cp-muted); } .cp-fin-res-note .cp-fin-ic, .cp-fin-xsum-note > .cp-fin-ic { flex: none; margin-top: 2px; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-fin-res-note a { color: var(--cp-rust-hi) !important; text-decoration: underline; text-underline-offset: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-xsum { margin-bottom: 14px; background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 3px; } .cp-fin-xsum-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); } .cp-fin-xsum-stats > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 18px; box-shadow: 1px 0 0 var(--cp-line); } .cp-fin-xsum-stats span { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cp-muted); } .cp-fin-xsum-stats > div > b { font-size: 19px; font-weight: 600; line-height: 1.2; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-fin-xsum-stats small { font-size: 12px; color: var(--cp-muted); } .cp-fin-xsum-stats ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .cp-fin-xsum-stats li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; } .cp-fin-xsum-stats li em { font-style: normal; color: var(--cp-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-fin-xsum-stats li b { font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-fin-xsum-note { align-items: center; padding: 10px 18px; border-top: 1px solid var(--cp-line); } .cp-fin-res-note > span, .cp-fin-xsum-note > span { flex: 1 1 auto; min-width: 0; } @container (max-width: 760px) { .cp-fin-xsum-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cp-fin-xsum-stats > div:last-child { grid-column: 1 / -1; box-shadow: 0 -1px 0 var(--cp-line); } } @media (max-width: 1100px) { .cp-fin-mid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body .cp-fin-head { padding: 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-fin-kpi { padding: 12px 14px; } .cp-fin-kpi b { font-size: 18px; } .cp-fin-todo li { flex-wrap: wrap; } .cp-fin-step em { display: none; } } @media (prefers-reduced-motion: reduce) { .cp-fin-skel i, .cp-fin-btn.is-busy .cp-fin-ic { animation: none; } } /* ============================================================================ * v5.102.0 · Passwort-Manager: Formular „Allgemein“ (Abschnitte, Beschriftung oben), Generator, Freigabe * ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-pwf .container-fluid { padding: 0 !important; } .cp-pwf-sec { padding: 16px 0; border-top: 1px solid var(--cp-line); } .cp-pwf-sec:first-of-type { padding-top: 2px; border-top: 0; } .cp-pwf-sec:last-of-type { padding-bottom: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .cp-pwf-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--cp-muted) !important; } .cp-pwf-h svg { width: 14px; height: 14px; color: var(--cp-rust-hi); } .cp-pwf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; } .cp-pwf-full { grid-column: 1 / -1; } .cp-pwf-f { min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf-f > label { display: block; margin: 0 0 6px !important; padding: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--cp-text) !important; text-transform: none !important; letter-spacing: 0 !important; } .cp-pwf-req { font-style: normal; color: var(--cp-rust-hi); } .cp-pwf-carry { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--cp-success) 40%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--cp-success) 10%, transparent); font-size: 12.5px; color: var(--cp-text); } .cp-pwf-carry[hidden] { display: none; } .cp-pwf-carry > svg { flex: none; width: 16px; height: 16px; color: var(--cp-success); } .cp-pwf-opt { font-weight: 400; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .cp-pwf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; letter-spacing: .02em; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .cp-pwf-help.is-ok { color: var(--cp-success) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .cp-pwf-help.is-bad { color: var(--cp-danger) !important; } .cp-pwf-cathint { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--cp-rust-line, var(--cp-line-2)); border-radius: 3px; background: var(--cp-rust-soft); font-size: 12.5px; line-height: 1.5; color: var(--cp-text); } .cp-pwf-cathint[hidden] { display: none; } .cp-pwf-cathint > svg { flex: none; width: 16px; height: 16px; color: var(--cp-rust-hi); } .cp-pwf-cathint > span { flex: 1 1 auto; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf-hintbtn { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--cp-rust-line, var(--cp-line-2)); border-radius: 3px; background: var(--cp-surface); color: var(--cp-rust-hi) !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf-hintbtn:hover { background: var(--cp-hover); } .cp-pwf-help { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-pwf textarea.form-control { min-height: 84px; resize: vertical; } /* Eingabeleisten (Adresse, Passwort): alle Teile gleich hoch, Ecken nur außen */ html[data-theme]:not(#cp):not(#cq) body .cp-pwf .input-group { flex-wrap: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .input-group > .form-control { min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .input-group > .form-control, html[data-theme]:not(#cp):not(#cq) body .cp-pwf .input-group > .input-group-text, html[data-theme]:not(#cp):not(#cq) body .cp-pwf .input-group > .dropdown > .input-group-text { height: 40px; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwf-ib, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwg-gen, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwg-toggle { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; height: 100%; min-height: 38px; padding: 0 11px !important; border: 1px solid var(--cp-line-2) !important; border-radius: 0 !important; background: var(--cp-surface-2) !important; color: var(--cp-muted) !important; font-size: 13px; font-weight: 500; text-decoration: none !important; cursor: pointer; transition: color .15s, background .15s; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwf-ib { width: 40px; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwf-ib:hover, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwg-gen:hover, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwg-toggle:hover, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwg-toggle[aria-expanded="true"] { color: var(--cp-strong) !important; background: var(--cp-hover) !important; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwg-gen { color: var(--cp-text) !important; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .input-group > .dropdown:last-child > .cp-pwg-toggle, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .input-group > .cp-pwf-ib:last-child { border-radius: 0 3px 3px 0 !important; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .input-group > .form-control:first-child { border-radius: 3px 0 0 3px !important; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwf-ib.is-off { opacity: .4; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwf-ib.is-done { color: var(--cp-success) !important; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwg-gen svg, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwg-toggle svg, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwf-ib svg { flex: none; margin: 0 !important; } .cp-pwf .cp-pv-strength.is-form { margin: 8px 0 0; } /* Zuordnung & Freigabe: Beschriftung oben, Select2 ohne Doppelrahmen */ html[data-theme]:not(#cp):not(#cq) body .cp-pwf .cp-pwf-share .form-group { margin-bottom: 14px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .cp-pwf-share .form-group > .row { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .cp-pwf-share .form-group > .row > [class*="col-md-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .cp-pwf-share .form-group > .row > label { margin: 0 0 6px !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--cp-text) !important; text-transform: none !important; letter-spacing: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .select2-container.form-control { height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwf-share-hint { margin: 0 0 10px !important; font-size: 12px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .share-with-section, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] #share-with-client-contact:not(.hide) { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px !important; padding: 12px 14px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .share-with-section .form-group { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwf-grp { font-size: 10.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .share-with-section label, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] #share-with-client-contact label { margin: 0 0 0 8px !important; font-size: 13px !important; color: var(--cp-text) !important; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .specific_dropdown, html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .specific_dropdown_client { margin: 8px 0 2px 26px; } /* Generator */ html[data-theme]:not(#cp):not(#cq) body .cp-pwg-menu { width: 310px; padding: 14px !important; } .cp-pwg-head { margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cp-muted); } .cp-pwg-out { display: flex; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-pwg-out .form-control { height: 38px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .02em; text-align: left; } html[data-theme]:not(#cp):not(#cq) body .cp-pwg-ib { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pwg-ib:hover { color: var(--cp-strong); background: var(--cp-hover); } .cp-pwg-meter { height: 4px; margin: 10px 0 4px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--cp-text) 12%, transparent); } .cp-pwg-meter i { display: block; height: 100%; width: 0; transition: width .2s; } .cp-pwg-meter i.is-s1 { width: 25%; background: #FF8A3C; } .cp-pwg-meter i.is-s2 { width: 50%; background: #FFB454; } .cp-pwg-meter i.is-s3 { width: 75%; background: #7BD88F; } .cp-pwg-meter i.is-s4 { width: 100%; background: #3DD68C; } .cp-pwg-meter-t { font-size: 12px; color: var(--cp-muted); } .cp-pwg-len { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 0 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-pwg-len label { margin: 0 !important; font-size: 12.5px !important; color: var(--cp-text) !important; } .cp-pwg-len b { font-size: 13px; color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-pwg-opts { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pwg-menu .form-range { accent-color: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .cp-pwg-menu .form-range::-webkit-slider-thumb { background: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .cp-pwg-menu .form-range::-moz-range-thumb { background: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .cp-pwf .select2-container .select2-choice { display: flex !important; align-items: center; height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.2 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pwg-opts .form-check-label { font-size: 12.5px !important; color: var(--cp-text) !important; } .cp-pwg-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--cp-line); } @media (max-width: 575px) { .cp-pwf-grid { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body form[id^="password-manager-"] .cp-pwg-gen .cp-pwg-gen-t { display: none; } } /* ============================================================================ * v5.104.0 · Social Inbox im eigenen Fenster (?cp_inbox=1 bzw. window.name) – nur der Posteingang, randlos, volle Höhe * ========================================================================== */ html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body #default-navbar, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body #left-menu-toggle-mask > .sidebar, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body #mobile-bottom-menu, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body #js-init-chat-icon, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .cp-fab-dock, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .rst-ai-sidebar, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .cp-clk-chip, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body #cp-ambient, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .cp-msg-toast, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .rst-install-banner, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .cp-update-bar { display: none !important; } html.cp-inbox-window, html.cp-inbox-window body { overflow: hidden !important; } html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body #left-menu-toggle-mask { margin: 0 !important; padding: 0 !important; } html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .page-container { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .main-scrollable-page { height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .page-content > :not(.rst-inline-page), html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body #page-content > :not(.rst-inline-page) { display: none !important; } html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .page-content, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body #page-content { margin: 0 !important; padding: 0 !important; } html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .rst-inline-page-ext[data-rst-page="ext-whatsapp"] { margin: 0 !important; padding: 0 !important; max-width: none !important; height: 100vh; height: 100dvh; display: flex; flex-direction: column; } html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .sc-app, html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .sc-app.no-detail { flex: 1 1 auto; height: auto !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* großer zweiter Bildschirm: breitere Liste (mehr Vorschautext) und Kontakt-Details */ @media (min-width: 1600px) { html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .sc-app { grid-template-columns: 228px minmax(360px, 420px) minmax(0, 1fr) 360px !important; } html.cp-inbox-window[data-theme]:not(#cp):not(#cq) body .sc-app.no-detail { grid-template-columns: 228px minmax(360px, 420px) minmax(0, 1fr) !important; } } /* Knopf „eigenes Fenster“ nur am Rechner; Hinweisleiste im Hauptfenster */ @media (max-width: 820px) { html:not(.cp-inbox-window) .sc-pop-btn { display: none !important; } } html[data-theme]:not(#cp):not(#cq) body .sc-pop-note { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--cp-rust-line, var(--cp-line-2)); border-radius: 3px; background: var(--cp-rust-soft); font-size: 13px; color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .sc-pop-note > svg { flex: none; width: 18px; height: 18px; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .sc-pop-note > span { flex: 1 1 auto; min-width: 0; line-height: 1.45; } html[data-theme]:not(#cp):not(#cq) body .sc-pop-note b { font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .sc-pop-note .ext-btn { flex: none; } /* v5.105.0 · Passwort-Typen E-Mail, Kreditkarte, Softwarelizenz im gleichen Layout wie Allgemein/Bankkonto (Beschriftung oben) */ html[data-theme]:not(#cp):not(#cq) body #password-manager-email-form .form-group, html[data-theme]:not(#cp):not(#cq) body #password-manager-credit-card-form .form-group, html[data-theme]:not(#cp):not(#cq) body #password-manager-software-license-form .form-group { margin-bottom: 14px !important; } html[data-theme]:not(#cp):not(#cq) body #password-manager-email-form .form-group > .row, html[data-theme]:not(#cp):not(#cq) body #password-manager-credit-card-form .form-group > .row, html[data-theme]:not(#cp):not(#cq) body #password-manager-software-license-form .form-group > .row { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #password-manager-email-form .form-group > .row > label[class*="col-md-"], html[data-theme]:not(#cp):not(#cq) body #password-manager-credit-card-form .form-group > .row > label[class*="col-md-"], html[data-theme]:not(#cp):not(#cq) body #password-manager-software-license-form .form-group > .row > label[class*="col-md-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 0 6px !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--cp-text) !important; text-transform: none !important; letter-spacing: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #password-manager-email-form .form-group > .row > .col-md-9, html[data-theme]:not(#cp):not(#cq) body #password-manager-credit-card-form .form-group > .row > .col-md-9, html[data-theme]:not(#cp):not(#cq) body #password-manager-software-license-form .form-group > .row > .col-md-9 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #password-manager-email-form .form-group > .row > .col-md-8, html[data-theme]:not(#cp):not(#cq) body #password-manager-credit-card-form .form-group > .row > .col-md-8, html[data-theme]:not(#cp):not(#cq) body #password-manager-software-license-form .form-group > .row > .col-md-8 { flex: 0 0 calc(100% - 46px) !important; max-width: calc(100% - 46px) !important; width: calc(100% - 46px) !important; padding: 0 !important; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body #password-manager-email-form .form-group > .row > .col-md-1, html[data-theme]:not(#cp):not(#cq) body #password-manager-credit-card-form .form-group > .row > .col-md-1, html[data-theme]:not(#cp):not(#cq) body #password-manager-software-license-form .form-group > .row > .col-md-1 { flex: 0 0 46px !important; width: 46px !important; max-width: 46px !important; padding: 0 0 0 6px !important; } html[data-theme]:not(#cp):not(#cq) body #password-manager-email-form .form-group > .row > .col-md-1 > .btn, html[data-theme]:not(#cp):not(#cq) body #password-manager-credit-card-form .form-group > .row > .col-md-1 > .btn, html[data-theme]:not(#cp):not(#cq) body #password-manager-software-license-form .form-group > .row > .col-md-1 > .btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #password-manager-email-form .form-control:not(textarea), html[data-theme]:not(#cp):not(#cq) body #password-manager-credit-card-form .form-control:not(textarea), html[data-theme]:not(#cp):not(#cq) body #password-manager-software-license-form .form-control:not(textarea) { height: 40px; } html[data-theme]:not(#cp):not(#cq) body #password-manager-email-form .select2-container .select2-choice, html[data-theme]:not(#cp):not(#cq) body #password-manager-credit-card-form .select2-container .select2-choice, html[data-theme]:not(#cp):not(#cq) body #password-manager-software-license-form .select2-container .select2-choice { display: flex !important; align-items: center; height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.2 !important; } html[data-theme]:not(#cp):not(#cq) body #password-manager-email-form .select2-container.form-control, html[data-theme]:not(#cp):not(#cq) body #password-manager-credit-card-form .select2-container.form-control, html[data-theme]:not(#cp):not(#cq) body #password-manager-software-license-form .select2-container.form-control { height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* ============================================================================ * v5.106.0 · Social Inbox: Spaltenbreiten ziehbar, Navigation einklappbar (Hauptseite und eigenes Fenster) * ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .sc-app > .sc-split { position: absolute; top: 0; bottom: 0; z-index: 25; width: 10px; margin-left: -5px; cursor: col-resize; touch-action: none; outline: none; } html[data-theme]:not(#cp):not(#cq) body .sc-app > .sc-split[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .sc-app > .sc-split::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .15s; } html[data-theme]:not(#cp):not(#cq) body .sc-app > .sc-split:hover::after, html[data-theme]:not(#cp):not(#cq) body .sc-app > .sc-split.is-drag::after, html[data-theme]:not(#cp):not(#cq) body .sc-app > .sc-split:focus-visible::after { background: var(--cp-rust); } body.sc-resizing, body.sc-resizing * { cursor: col-resize !important; user-select: none !important; } /* eingeklappte Navigation = Symbolleiste wie bei schmaler Inbox */ html[data-theme]:not(#cp):not(#cq) body .sc-app.sc-nav-collapsed .sc-side-section { padding: 0 8px; } html[data-theme]:not(#cp):not(#cq) body .sc-app.sc-nav-collapsed .sc-side-title, html[data-theme]:not(#cp):not(#cq) body .sc-app.sc-nav-collapsed .sc-side-label, html[data-theme]:not(#cp):not(#cq) body .sc-app.sc-nav-collapsed .sc-side-count, html[data-theme]:not(#cp):not(#cq) body .sc-app.sc-nav-collapsed .sc-side-add-row { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .sc-app.sc-nav-collapsed .sc-side-item { justify-content: center; padding: 0 !important; height: 40px; position: relative; } html[data-theme]:not(#cp):not(#cq) body .sc-app.sc-nav-collapsed .sc-side-item.has-badge::before { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .sc-app.sc-nav-collapsed .sc-side-item .sc-sec-warn { position: absolute; top: 7px; right: 7px; margin: 0; } /* Einklapp-Knopf nur, wenn die Leiste nicht ohnehin schmal ist */ @container wa (max-width: 1439px) { html[data-theme]:not(#cp):not(#cq) body .sc-nav-toggle { display: none !important; } } @media (max-width: 820px) { html[data-theme]:not(#cp):not(#cq) body .sc-nav-toggle { display: none !important; } } /* v5.107.0 · Social Inbox: Symbole exakt mittig – app.all.css gibt jedem SVG margin-top:-3px (für Symbole neben Text); in zentrierten Kreisen/Knöpfen saß jedes Symbol dadurch 1,5 px zu hoch */ html[data-theme]:not(#cp):not(#cq) body .rst-inline-page-ext :is(button, a, .sc-ch-icon, .sc-av-ch, .sc-side-icon, .sc-avatar, .sc-icon, .sc-icon-sm, .sc-user-av, .sc-conv-assignee, .sc-assigned-avatar, .sc-tab, .ext-btn, [class*="-ic"]) > svg, html[data-theme]:not(#cp):not(#cq) body .wa-modal-back :is(button, a, .sc-ch-icon, .sc-av-ch, .sc-side-icon, .sc-avatar, .sc-icon, .sc-icon-sm, .sc-user-av, .sc-conv-assignee, .sc-assigned-avatar, .sc-tab, .ext-btn, [class*="-ic"]) > svg, html[data-theme]:not(#cp):not(#cq) body .ext-modal :is(button, a, .sc-ch-icon, .sc-av-ch, .sc-side-icon, .sc-avatar, .sc-icon, .sc-icon-sm, .sc-user-av, .sc-conv-assignee, .sc-assigned-avatar, .sc-tab, .ext-btn, [class*="-ic"]) > svg, html[data-theme]:not(#cp):not(#cq) body .sc-popover :is(button, a, .sc-ch-icon, .sc-av-ch, .sc-side-icon, .sc-avatar, .sc-icon, .sc-icon-sm, .sc-user-av, .sc-conv-assignee, .sc-assigned-avatar, .sc-tab, .ext-btn, [class*="-ic"]) > svg, html[data-theme]:not(#cp):not(#cq) body .wa-pop :is(button, a, .sc-ch-icon, .sc-av-ch, .sc-side-icon, .sc-avatar, .sc-icon, .sc-icon-sm, .sc-user-av, .sc-conv-assignee, .sc-assigned-avatar, .sc-tab, .ext-btn, [class*="-ic"]) > svg { margin-top: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .sc-avatar.is-emoji { font-size: 20px !important; line-height: 1; } html[data-theme]:not(#cp):not(#cq) body .sc-avatar .sc-av-person { width: 46%; height: 46%; margin: 0 !important; opacity: .75; } /* ============================================================================ * v5.108.0 · Projekt-Unterseiten einheitlich: Kopfzeile (Titel 16 px, 64 px hoch, 20 px Rand), Aktionen rechts, Unterreiter * in der Zeile, Karten ohne Versatz; Kommentare/Kundenkommentare neu gestaltet * ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > .card { margin-top: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .card-header.title-tab, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .tab-title, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > ul.nav-tabs.title, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .cp-pf > ul.nav-tabs.title, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > ul.nav-tabs { display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 6px 16px; min-height: 64px !important; height: auto !important; padding: 10px 20px !important; margin: 0 !important; float: none !important; border: 0 !important; border-bottom: 1px solid var(--cp-line) !important; border-radius: 3px 3px 0 0 !important; background: transparent !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .card-header.title-tab > h4, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .tab-title > h4, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > ul.nav-tabs.title > h4, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .cp-pf > ul.nav-tabs.title > h4, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > ul.nav-tabs > h4, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .card-header.title-tab > li.title-tab > h4, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .tab-title > li.title-tab > h4, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > ul.nav-tabs.title > li.title-tab > h4, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .cp-pf > ul.nav-tabs.title > li.title-tab > h4, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > ul.nav-tabs > li.title-tab > h4 { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; float: none !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cp-strong) !important; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .card-header.title-tab > li.title-tab, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .tab-title > li.title-tab, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > ul.nav-tabs.title > li.title-tab, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .cp-pf > ul.nav-tabs.title > li.title-tab, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > ul.nav-tabs > li.title-tab { margin: 0 8px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .card-header.title-tab > .title-button-group, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .tab-title > .title-button-group, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > ul.nav-tabs.title > .title-button-group, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .cp-pf > ul.nav-tabs.title > .title-button-group, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > ul.nav-tabs > .title-button-group, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .card-header.title-tab > .tab-title, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .tab-title > .tab-title, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > ul.nav-tabs.title > .tab-title, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .cp-pf > ul.nav-tabs.title > .tab-title, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > ul.nav-tabs > .tab-title { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 0 auto !important; padding: 0 !important; float: none !important; border: 0 !important; background: none !important; min-height: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .card-header.title-tab > .tab-title > .title-button-group, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .tab-title > .tab-title > .title-button-group, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > ul.nav-tabs.title > .tab-title > .title-button-group, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .cp-pf > ul.nav-tabs.title > .tab-title > .title-button-group, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > ul.nav-tabs > .tab-title > .title-button-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; float: none !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .card-header.title-tab .title-button-group .btn, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > .tab-title .title-button-group .btn, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .card > ul.nav-tabs.title .title-button-group .btn, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .cp-pf > ul.nav-tabs.title .title-button-group .btn, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > ul.nav-tabs .title-button-group .btn { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] .cp-pv-head-sub { flex: 1 1 260px; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] .cp-pv-head-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cp-surface-3); color: var(--cp-muted); font-size: 11.5px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] .cp-pv-head-n[hidden] { display: none !important; } /* Kopfzeile außerhalb der Karte (Dateien, Passwörter): eigener Rahmen, Karte darunter schließt bündig an */ html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .cp-pf > ul.nav-tabs.title, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > ul.nav-tabs { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; border-bottom-color: var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .cp-pf > .tab-content > .tab-pane > .card, html[data-theme]:not(#cp):not(#cq) body .project-details-view .tab-pane[id^="project-"] > .clearfix > .tab-content > .tab-pane > .card { border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: 0 !important; } /* Kommentare / Kundenkommentare */ html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-form-container, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-form-container { gap: 12px; padding: 18px 20px !important; margin: 0 !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-form-container .avatar, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-form-container .avatar { padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .avatar img, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .avatar img { width: 36px !important; height: 36px !important; border-radius: 50% !important; object-fit: cover; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-form-container .post-dropzone, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-form-container .post-dropzone { margin: 0 !important; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); overflow: hidden; transition: border-color .15s; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-form-container .post-dropzone:focus-within, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-form-container .post-dropzone:focus-within { border-color: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-form-container .comment_description, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-form-container .comment_description, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-form-container .note-editor, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-form-container .note-editor { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-form-container textarea.comment_description, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-form-container textarea.comment_description { min-height: 92px; padding: 12px 14px !important; resize: vertical; font-size: 14px; line-height: 1.55; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-form-container .post-dropzone > footer, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-form-container .post-dropzone > footer { display: flex !important; align-items: center; gap: 10px; padding: 8px 10px !important; margin: 0 !important; border: 0 !important; border-top: 1px solid var(--cp-line) !important; border-radius: 0 !important; background: transparent !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-form-container .post-dropzone > footer > .float-start, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-form-container .post-dropzone > footer > .float-start { float: none !important; display: flex; align-items: center; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-form-container .post-dropzone > footer > .float-end, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-form-container .post-dropzone > footer > .float-end { float: none !important; margin-left: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .cp-cm-hint, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .cp-cm-hint { margin-left: auto; font-size: 11.5px; color: var(--cp-dim); white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-container, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-container { padding: 16px 20px !important; margin: 0 !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-container .comment-avatar, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-container .comment-avatar { margin-right: 4px; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-container .mb5 .dark.strong, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-container .mb5 .dark.strong { font-weight: 600 !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-container .mb5 small, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-container .mb5 small { margin-left: 6px; font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-container p, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-container p { margin: 4px 0 10px !important; font-size: 14px; line-height: 1.6; color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-container .mb15 > a, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-container .mb15 > a, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-container .mb15 > span > a, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-container .mb15 > span > a { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; font-size: 12.5px; color: var(--cp-muted) !important; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .comment-container .mb15 > a:hover, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .comment-container .mb15 > a:hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section [id^="reply-list-"], html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section [id^="reply-list-"] { margin-top: 6px; padding-left: 14px; border-left: 2px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .cp-cm-empty, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .cp-cm-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 20px; text-align: center; color: var(--cp-muted); font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .cp-cm-empty b, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .cp-cm-empty b { font-size: 14.5px; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .cp-cm-empty .cp-cm-empty-ic, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .cp-cm-empty .cp-cm-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .cp-cm-empty .cp-cm-empty-ic svg, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .cp-cm-empty .cp-cm-empty-ic svg { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-comments-section .cp-cm-empty span, html[data-theme]:not(#cp):not(#cq) body .project-details-view #project-customer_feedback-section .cp-cm-empty span { max-width: 440px; line-height: 1.5; } /* ============================================================================ * v5.109.0 · Projekt-Überblick: links Arbeit, rechts Steckbrief/Team/Kunde/Aktivität; Kacheln anklickbar * ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov > .row.cp-pv-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 20px; align-items: start; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov > .row.cp-pv-cols > .cp-pv-left, html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov > .row.cp-pv-cols > .cp-pv-right { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .cp-pv-left > .row { display: flex; flex-direction: column; gap: 20px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .cp-pv-left > .row > [class*="col-"] { width: 100% !important; max-width: none !important; flex: none !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .cp-pv-left > .row > [class*="col-"]:empty, html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .cp-pv-left > .row > .project-custom-fields:not(:has(*)) { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .cp-pv-right { display: flex; flex-direction: column; gap: 20px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .cp-pv-right > [class*="col-"] { width: 100% !important; max-width: none !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov .cp-pv-cols .card { margin: 0 !important; } @media (max-width: 1100px) { html[data-theme]:not(#cp):not(#cq) body .cp-pv-ov > .row.cp-pv-cols { grid-template-columns: minmax(0, 1fr); } } /* Steckbrief */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-brief .card-body { padding: 4px 20px 12px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl > div:first-child { border-top: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl dt { font-size: 12.5px; font-weight: 500; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl dd { margin: 0; min-width: 0; font-size: 13.5px; color: var(--cp-text); overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl dd a { color: var(--cp-strong) !important; font-weight: 500; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl dd a:hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl dd em { font-style: normal; font-weight: 600; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl dd em.is-late { color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl dd em.is-soon { color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-dl .cp-pv-st { display: inline-flex; } /* Kacheln als Sprungziele */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-k[data-go] { cursor: pointer; transition: border-color .15s, background .15s; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k[data-go]:hover { border-color: var(--cp-line-2) !important; background: var(--cp-hover) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-k[data-go]:focus-visible { outline: 2px solid var(--cp-rust); outline-offset: -2px; } /* v5.109.1 · Kanal-Symbole pixelgenau mittig: Kreis und Symbol mit gerader Differenz (vorher z. B. 16 px Kreis / 9 px Symbol → 3,5 px Rand = halbe Pixel, das Symbol wirkte schief). Regel: Symbol = Kreis − 6 px (3 px je Seite); Kreise mit ganzen Pixelmaßen */ html[data-theme]:not(#cp):not(#cq) body .sc-ch-icon:not(.sc-ch-txt) { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .sc-ch-icon:not(.sc-ch-txt) > svg { display: block !important; flex: none; width: calc(100% - 6px) !important; height: calc(100% - 6px) !important; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .sc-avatar .sc-av-ch .sc-ch-icon { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; } html[data-theme]:not(#cp):not(#cq) body #sc-detail .sc-avatar .sc-av-ch .sc-ch-icon { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; } html[data-theme]:not(#cp):not(#cq) body .sc-chat-phone-row .sc-ch-icon { width: 14px !important; height: 14px !important; flex: 0 0 14px !important; } html[data-theme]:not(#cp):not(#cq) body .ch-row > .sc-ch-icon > svg, html[data-theme]:not(#cp):not(#cq) body .ch-tile > .sc-ch-icon > svg { width: 18px !important; height: 18px !important; } /* ============================================================================ * v5.110.0 · Projektkopf: Infozeile in eigener Zeile + Projekt-Assistent (Hinweise, KI-Zusammenfassung) * ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .project-title-section > .cp-pv-meta { margin: -2px 0 14px !important; } html[data-theme]:not(#cp):not(#cq) body .project-title-section > .cp-pv-meta .cp-pv-m + .cp-pv-m::before, html[data-theme]:not(#cp):not(#cq) body .project-title-section > .cp-pv-meta .cp-pv-st + .cp-pv-m::before { content: ""; width: 1px; height: 14px; margin-right: 9px; background: var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .project-title-section > .cp-pv-meta em.is-live { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .project-title-section > .cp-pv-meta .cp-pv-prog { gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-pa { margin: 0 0 16px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-chip.is-ok { border-color: color-mix(in srgb, var(--cp-success) 45%, transparent); color: var(--cp-success) !important; background: color-mix(in srgb, var(--cp-success) 8%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pa .cp-chip svg { flex: none; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pa button.cp-chip { cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pa-health { display: inline-flex; align-items: center; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; } html[data-theme]:not(#cp):not(#cq) body .cp-pa-health.is-ok { background: color-mix(in srgb, var(--cp-success) 14%, transparent); color: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .cp-pa-health.is-warn { background: color-mix(in srgb, var(--cp-warning) 16%, transparent); color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-pa-health.is-bad { background: color-mix(in srgb, var(--cp-danger) 14%, transparent); color: var(--cp-danger); } /* ============================================================================ * v5.111.0 · Einheitliches KI-Zeichen (Content-Agency-Sechseck + Stern), animiert * Ruhe: Lichtpunkt läuft in 5 s um das Sechseck, Stern funkelt (atmet + Vierteldrehung). * Arbeitet (Laden/Denken): beides 1,4 s. Markup: window.CP_AI_INNER / CP_AI_SVG / CP_AI_TILE (head-snippet.php). * ========================================================================== */ svg .cp-aim-hex { opacity: .42; stroke-width: 1.7px; } svg .cp-aim-run { stroke-width: 1.9px; stroke-dasharray: 20 80; stroke-dashoffset: 0; animation: cp-aim-run 5s linear infinite; } svg .cp-aim-star { transform-box: fill-box; transform-origin: center; animation: cp-aim-star 5s ease-in-out infinite; } svg.is-busy .cp-aim-run, .is-loading svg .cp-aim-run, .is-busy svg .cp-aim-run, [aria-busy="true"] svg .cp-aim-run, .cp-sum-think svg .cp-aim-run, .cp-mt-load svg .cp-aim-run, .cp-mt-prog-hex svg .cp-aim-run, .cp-evn-load svg .cp-aim-run, .cp-evn-aib svg .cp-aim-run { animation-duration: 1.4s; } svg.is-busy .cp-aim-star, .is-loading svg .cp-aim-star, .is-busy svg .cp-aim-star, [aria-busy="true"] svg .cp-aim-star, .cp-sum-think svg .cp-aim-star, .cp-mt-load svg .cp-aim-star, .cp-mt-prog-hex svg .cp-aim-star, .cp-evn-load svg .cp-aim-star, .cp-evn-aib svg .cp-aim-star { animation-duration: 1.4s; } @keyframes cp-aim-run { to { stroke-dashoffset: -100; } } @keyframes cp-aim-star { 0%, 100% { transform: scale(.82) rotate(0deg); opacity: .85; } 50% { transform: scale(1.06) rotate(90deg); opacity: 1; } } @media (prefers-reduced-motion: reduce) { svg .cp-aim-run { display: none; } svg .cp-aim-hex { opacity: 1; } svg .cp-aim-star { animation: none; } } html.cp-motion-off svg .cp-aim-run { display: none; } html.cp-motion-off svg .cp-aim-hex { opacity: 1; } html.cp-motion-off svg .cp-aim-star { animation: none; } /* ruhig, wo es viele gibt: Avatare im KI-Chatverlauf */ .rst-ai-avatar svg .cp-aim-run { display: none; } .rst-ai-avatar svg .cp-aim-hex { opacity: 1; } .rst-ai-avatar svg .cp-aim-star { animation: none; } /* Assistent-Kachel: keine zusätzliche Drehung mehr (die alte Sonne drehte sich) */ .cp-assist-ico svg:has(.cp-aim-hex) { animation: none !important; width: 18px; height: 18px; } html[data-theme]:not(#cp):not(#cq) body .cp-assist-ico { color: var(--cp-rust-hi) !important; } /* Kachel statt 3D-Sechseck (gleiche Größen über --s wie bisher) */ html[data-theme]:not(#cp):not(#cq) body .cp-hex3d.cp-ai-tile { --s: 42px; position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--s); height: var(--s); margin: 0; border-radius: 3px; background: var(--cp-rust-soft); border: 1px solid var(--cp-rust-line, rgba(232,85,42,.3)); color: var(--cp-rust-hi); transform: none !important; animation: none !important; perspective: none; filter: none; } html[data-theme]:not(#cp):not(#cq) body .cp-hex3d.cp-ai-tile::before, html[data-theme]:not(#cp):not(#cq) body .cp-hex3d.cp-ai-tile::after { content: none !important; display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-hex3d.cp-ai-tile > svg { position: static; inset: auto; width: 58%; height: 58%; margin: 0 !important; overflow: visible; } html[data-theme]:not(#cp):not(#cq) body .cp-hex3d.cp-ai-tile svg path { fill: none !important; filter: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-hex3d.cp-ai-tile svg path.cp-aim-star { fill: currentColor !important; } /* kleine Stellen (in Knöpfen, Überschriften): nur das Zeichen, ohne Kachel */ html[data-theme]:not(#cp):not(#cq) body .cp-evn-btn .cp-hex3d.cp-ai-tile, html[data-theme]:not(#cp):not(#cq) body .cp-evn-sheet-p h3 .cp-hex3d.cp-ai-tile { background: none; border: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-evn-btn .cp-hex3d.cp-ai-tile > svg, html[data-theme]:not(#cp):not(#cq) body .cp-evn-sheet-p h3 .cp-hex3d.cp-ai-tile > svg { width: 100%; height: 100%; } /* „Die KI liest …“: Zeichen statt Umlaufbahn */ .cp-sum-think > svg.cp-aim { flex: none; color: var(--cp-rust-hi); margin: 0 !important; } /* v5.111.0 · Aufgaben-Assistent (Dialog und Vollseite) */ html[data-theme]:not(#cp):not(#cq) body .cp-ta { margin: 0 0 14px !important; } html[data-theme]:not(#cp):not(#cq) body .task-view-modal-body > .cp-ta { margin: 0 0 16px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ta .cp-sum { padding-left: 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-ta .cp-step { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-ta-stepacts { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; } html[data-theme]:not(#cp):not(#cq) body .task-view-modal-body > .cp-ta .cp-sum { grid-template-columns: minmax(0, 1fr); gap: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-ta-stepacts .cp-crm-btn { white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-ta-flash { box-shadow: 0 0 0 2px var(--cp-rust) !important; transition: box-shadow .3s; } /* ============================================================================ v5.112.0 · Einheitlicher, kompakter Seitenkopf (page-head.js) – eine Zeile: Titel Beschreibung ····· Aktionen Gilt auch für die vorhandenen Köpfe der #/…-Seiten (ta/rh/ra/qa), damit alle Seiten gleich beginnen. ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body :is(.cp-ph, .ta-head, .rh-head, .ra-head, .qa-head) { display: flex !important; flex-wrap: wrap; align-items: center !important; justify-content: space-between; gap: 10px 20px !important; min-height: 40px; margin: 0 0 14px !important; padding: 0; border: 0; background: none; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-ph-t, .ta-title, .rh-head > div:first-child, .ra-title, .qa-head > div:first-child) { display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; flex: 1 1 380px; min-width: 0; } /* Bereichs-Vorspann („● CRM & PROJEKTE /“) im Seitenkopf ausgeblendet – das Menü zeigt den Bereich bereits (Wunsch Nutzer) */ html[data-theme]:not(#cp):not(#cq) body :is(.cp-ph-k, .ta-head .ta-kicker, .rh-head .rh-kicker, .ra-head .ra-kicker, .qa-head .qa-kicker) { display: none !important; } html[data-theme]:not(#cp):not(#cq) body :is(h1.cp-ph-h, .ta-head h1, .rh-head h1, .ra-title h1, .qa-head h1) { margin: 0 !important; padding: 0 !important; color: var(--cp-strong) !important; font-family: var(--cp-font) !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -.01em !important; text-transform: none !important; white-space: nowrap; animation: none !important; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-ph-s, .ta-sub, .rh-sub, .ra-sub, .qa-head .qa-sub) { flex: 1 1 360px; min-width: 0; max-width: none !important; margin: 0 !important; overflow: hidden; color: var(--cp-muted) !important; font-size: 12.5px !important; line-height: 1.4 !important; white-space: nowrap; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-a { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-a > .title-button-group { float: none !important; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 !important; padding: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-a > .title-button-group .btn, html[data-theme]:not(#cp):not(#cq) body .cp-ph-a > .title-button-group > .dropdown { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-a .cp-ph-btn { display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; transform: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-a .cp-ph-btn svg { width: 15px; height: 15px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-a .title-button-group > .btn.cp-ph-primary { background: var(--cp-rust) !important; border-color: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-a .title-button-group > .btn.cp-ph-primary svg { color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-a .title-button-group > .btn.cp-ph-primary:hover { background: var(--cp-rust-hi) !important; border-color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-ph-src, .cp-ph-gone) { display: none !important; } /* Karte unter einem ausgeblendeten Kopf („PROJEKTE“ …) bekommt ihren oberen Rand zurück */ html[data-theme]:not(#cp):not(#cq) body #page-content.cp-ph-on .cp-ph-gone + .card { border-top: 1px solid var(--cp-line) !important; border-top-left-radius: 3px !important; border-top-right-radius: 3px !important; } /* #/…-Seiten: Filterzeile der Asset-Bibliothek ohne Titel – Auswahl nicht über die volle Breite */ html[data-theme]:not(#cp):not(#cq) body .rst-inline-page.cp-ph-on .rst-assets-header { justify-content: flex-start !important; } html[data-theme]:not(#cp):not(#cq) body .rst-inline-page.cp-ph-on .rst-assets-filters { flex: 0 1 auto !important; width: auto !important; } html[data-theme]:not(#cp):not(#cq) body .rst-inline-page.cp-ph-on .rst-assets-client { width: 280px !important; max-width: 100%; flex: none !important; } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .cp-ph-a, html[data-theme]:not(#cp):not(#cq) body .cp-ph-a > .title-button-group { width: 100%; justify-content: flex-start; } html[data-theme]:not(#cp):not(#cq) body :is(h1.cp-ph-h, .ta-head h1, .rh-head h1, .ra-title h1, .qa-head h1) { font-size: 20px !important; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-ph-s, .ta-sub, .rh-sub, .ra-sub, .qa-head .qa-sub) { flex-basis: 100%; white-space: normal; } } /* v5.113.0 · Qualität & Tests: Spalte „Laden“ (Sekunden bis vollständig geladen, darunter Anzahl API-Aufrufe, „!“ = doppelte) */ .qa-page .qa-perf { display: inline-flex; flex-direction: column; align-items: center; min-width: 42px; padding: 3px 6px; border-radius: 3px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; } .qa-page .qa-perf small { font-size: 10px; font-weight: 500; opacity: .75; } .qa-page .qa-perf.is-ok { background: color-mix(in srgb, var(--cp-success) 12%, transparent); color: var(--cp-success); } .qa-page .qa-perf.is-warn { background: color-mix(in srgb, #D49A1F 14%, transparent); color: #B7801A; } .qa-page .qa-perf.is-bad { background: color-mix(in srgb, var(--cp-danger, #E5484D) 12%, transparent); color: var(--cp-danger, #E5484D); } /* ========================================================================== v5.113.0 · Kunden → Überblick neu: Kennzahlen im einheitlichen Kachel-Format, „Kunden im Blick“ in der Übersicht, Rechnungen als Pipeline-Gruppe, Stunden + Budgets nebeneinander, feste Reihenfolge der Karten ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-co { gap: 14px; padding: 16px 0 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-co-kpis.ta-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; } html[data-theme]:not(#cp):not(#cq) body a.cp-co-k { color: var(--cp-text) !important; text-decoration: none !important; transition: border-color var(--cp-dur-s, .15s), background-color var(--cp-dur-s, .15s); } html[data-theme]:not(#cp):not(#cq) body a.cp-co-k:hover { border-color: var(--cp-rust-line); background: color-mix(in srgb, var(--cp-rust-hi) 4%, var(--cp-surface)); } html[data-theme]:not(#cp):not(#cq) body a.cp-co-k .ta-ki { color: var(--cp-rust-hi); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body a.cp-co-k.is-warn .ta-ki { color: var(--cp-warning); background: rgba(224,165,58,.14); } html[data-theme]:not(#cp):not(#cq) body a.cp-co-k [data-sub] em { font-style: normal; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-co-main { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; } html[data-theme]:not(#cp):not(#cq) body .cp-co-main > * { grid-column: 1 / -1; min-width: 0; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-co-main > .cp-hl { order: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-co-main > .cp-co-fin { order: 2; } html[data-theme]:not(#cp):not(#cq) body .cp-co-main > .cp-lb-ov { order: 3; grid-column: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-co-main > .cp-bg-card { order: 4; grid-column: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-co-main > .cp-co-pipec { order: 5; } html[data-theme]:not(#cp):not(#cq) body .cp-co-main:not(:has(> .cp-bg-card)) > .cp-lb-ov, html[data-theme]:not(#cp):not(#cq) body .cp-co-main:not(:has(> .cp-lb-ov:not([hidden]))) > .cp-bg-card { grid-column: 1 / -1; } html[data-theme]:not(#cp):not(#cq) body .cp-co-side { gap: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-co-card { padding: 16px 18px; } html[data-theme]:not(#cp):not(#cq) body .cp-co-pipe { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-co-row .cp-co-pct { margin-left: auto; color: var(--cp-muted); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-co-row .cp-co-pct + b { min-width: 18px; text-align: right; } /* „Kunden im Blick“ als ruhige Karte in der Übersicht (vorher Leiste mit Verlauf über allen Reitern) */ html[data-theme]:not(#cp):not(#cq) body .cp-co-main > .cp-hl { margin: 0 !important; padding: 16px 18px; border-color: var(--cp-line); background: var(--cp-surface) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-co-main > .cp-hl::before { display: none; } /* Neueste Kunden: runde, ruhige Initialen statt rosa Quadrate */ html[data-theme]:not(#cp):not(#cq) body .cp-co-new .cp-co-av { border-radius: 50%; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-strong); } @media (max-width: 991px) { html[data-theme]:not(#cp):not(#cq) body .cp-co-main { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .cp-co-main > .cp-lb-ov, html[data-theme]:not(#cp):not(#cq) body .cp-co-main > .cp-bg-card { grid-column: 1 / -1; } } /* v5.113.0 · Ausgaben-Kennzahlen im einheitlichen Kachel-Format (vorher farbige Randstreifen) – kompakte Variante für 6 Spalten */ html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k { position: relative; gap: 11px; padding: 14px 14px; min-width: 0; text-align: left; font: inherit; color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k .ta-ki { width: 36px; height: 36px; } html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k .ta-ki svg { width: 16px; height: 16px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k small { letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k b { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k > div > span { font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-exs button.cp-exs-k { width: 100%; cursor: pointer; transition: border-color var(--cp-dur-s, .15s), background-color var(--cp-dur-s, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-exs button.cp-exs-k:hover { border-color: var(--cp-rust-line); background: color-mix(in srgb, var(--cp-rust-hi) 4%, var(--cp-surface)); } html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k.is-cta .ta-ki { color: var(--cp-rust-hi); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k.is-cta b { font-size: 15px; line-height: 1.25; white-space: normal; } html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k .cp-exs-d { top: 10px; right: 10px; } @media (max-width: 1399px) { html[data-theme]:not(#cp):not(#cq) body .cp-exs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .cp-exs { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k { flex-direction: column; align-items: flex-start; gap: 8px; } } /* v5.113.0 · Einheitliche Knopf-Schrift: alle Knöpfe in normaler Schreibweise. Vorher Hauptknöpfe (btn-primary, „VERFASSEN“, „+ NEUES ASSET“, Dialog-Fußzeile auf dem Handy) in gesperrten Großbuchstaben, die Seitenkopf-Knöpfe dagegen normal. Anmeldeseite unverändert. */ html[data-theme]:not(#cp):not(#cq) body :is(.btn-primary, .btn-info, .rst-cal2-btn-primary, [class*="rst-"][class*="btn-primary"], .rst-media-new-btn, .rst-assets-add-btn, .rst-meet-btn-new, #ajaxModal .modal-footer .btn):not(.form-signin *) { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; } /* v5.113.0 · Leere Tabellen: „Kein Eintrag gefunden.“ in normaler Schreibweise statt gesperrter Großbuchstaben */ html[data-theme]:not(#cp):not(#cq) body :is(.dt-empty, .dataTables_empty) { color: var(--cp-muted) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; } /* v5.113.0 · Formular-Dialoge: Höhe folgt dem Inhalt (höchstens Bildschirmhöhe − 200 px, dann Bildlauf). RISE misst beim Öffnen und setzt die Höhe fest – klappt das Formular danach Felder zusammen (z. B. „Weitere Felder“ bei Aufgaben), blieb eine große Leerfläche. */ @media (min-width: 768px) { html[data-theme]:not(#cp):not(#cq) body #ajaxModal form .modal-body { height: auto !important; max-height: calc(100vh - 200px); overflow-y: auto !important; } } /* Ein Hauptknopf je Dialog: „Speichern und fortfahren/anzeigen“ (btn-info) als umrandeter Nebenknopf, „Speichern“ bleibt in Rost */ html[data-theme]:not(#cp):not(#cq) body #ajaxModal .modal-footer .btn-info { background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body #ajaxModal .modal-footer .btn-info svg { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body #ajaxModal .modal-footer .btn-info:hover { border-color: var(--cp-rust-line) !important; background: color-mix(in srgb, var(--cp-rust-hi) 5%, var(--cp-surface)) !important; color: var(--cp-strong) !important; } /* ========================================================================== v5.116.0 · Content-Agency-Symbolsatz im Content-Kalender (Team, Kundenportal, Dashboard-Kachel) – eigene Linien-Symbole statt Emojis ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body :is(.cp-ico, .cp-plat-g) { display: inline-block; flex: none; margin: 0 !important; vertical-align: -.15em; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-ico, .cp-plat-g) .f { fill: currentColor; stroke: none; } html[data-theme]:not(#cp):not(#cq) body .cp-plat-t { display: inline-grid; place-items: center; flex: none; border-radius: 3px; background: var(--pc, var(--cp-rust)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } html[data-theme]:not(#cp):not(#cq) body .cp-plat-t .cp-plat-g { stroke-width: 2; } html[data-theme="dark"]:not(#cp):not(#cq) body :is(.cp-plat-t--tiktok, .cp-plat-t--twitter, .cp-plat-t--x, .cp-plat-t--threads) { background: #2A2E36; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } /* Dashboard-Kachel „Content & Freigaben“ */ html[data-theme]:not(#cp):not(#cq) body .cp-cw-title { display: flex; align-items: center; gap: 9px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-cw-title .cp-cw-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Kalenderkacheln: Status-Symbol im hellen Kreis auf der Plattformfarbe */ html[data-theme]:not(#cp):not(#cq) body .rst-cal-post-status { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.24); color: #fff; font-size: 0; } html[data-theme]:not(#cp):not(#cq) body .rst-cal-post-status .cp-ico { width: 10px; height: 10px; stroke-width: 2.4; } /* Liste: Aktionsknöpfe, Kunde/Kampagne/Checkliste */ html[data-theme]:not(#cp):not(#cq) body .rst-cal2-list-actions button { color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .rst-cal2-list-actions button:hover { color: var(--cp-rust-hi); background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-cal2-list-actions button[data-act-list="delete"]:hover { color: var(--cp-danger, #E5484D); background: color-mix(in srgb, var(--cp-danger, #E5484D) 10%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-cal2-list-meta, .rst-cal2-list-checklist, .rst-post-decision-head) .cp-ico { vertical-align: -2px; opacity: .75; } /* Freigabe-Link */ html[data-theme]:not(#cp):not(#cq) body .rst-approval-link-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-size: 0; } html[data-theme]:not(#cp):not(#cq) body .rst-approval-link-icon .cp-ico { width: 24px; height: 24px; } /* Plattform-Vorschauen: Linien-Symbole statt Emojis */ html[data-theme]:not(#cp):not(#cq) body .rst-prev-ig-actions { display: flex; align-items: center; gap: 14px; letter-spacing: 0; font-size: 0; color: #262626; } html[data-theme]:not(#cp):not(#cq) body .rst-prev-ig-actions .rst-prev-sp { flex: 1; } html[data-theme]:not(#cp):not(#cq) body .rst-prev-tw-actions { display: flex; justify-content: space-between; max-width: 420px; letter-spacing: 0; font-size: 0; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-prev-li-actions, .rst-prev-fb-actions) { display: flex; flex-wrap: wrap; gap: 6px 18px; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-prev-li-actions, .rst-prev-fb-actions) > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-prev-li-meta, .rst-prev-fb-meta) .cp-ico { vertical-align: -1px; } /* Kommentare: Rolle mit Symbol (Agentur = Sechseck der Marke) */ html[data-theme]:not(#cp):not(#cq) body .rst-comment-role { display: inline-flex; align-items: center; gap: 5px; } html[data-theme]:not(#cp):not(#cq) body .rst-comment-role.is-agency .cp-ico { color: var(--cp-rust-hi); } /* v5.116.0 · Dunkles Design: schwarze Plattformfarben (TikTok, X, Threads) in Auswahl-Chips und Vorschau-Knöpfen hell darstellen */ html[data-theme="dark"]:not(#cp):not(#cq) body :is([style*="color:#000000"], [style*="color:#010101"]):is(.rst-post-plat-chip-ico, button, span) { color: var(--cp-strong) !important; } /* ========================================================================== v5.117.0 · Mediengestaltung: eigene Dateiart-Symbole (Foto, Video, PDF, Design, Dokument, Präsentation, Tabelle, Audio, Archiv, Datei) ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .cp-file-t { display: inline-grid; place-items: center; flex: none; border-radius: 3px; background: color-mix(in srgb, var(--fc) 13%, transparent); color: var(--fc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 22%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-file-t .cp-file-g { stroke-width: 1.7; } html[data-theme="dark"]:not(#cp):not(#cq) body .cp-file-t { background: color-mix(in srgb, var(--fc) 18%, transparent); color: color-mix(in srgb, var(--fc) 72%, #fff); } /* große Vorschau für Nicht-Bilder: Kachel + Art (z. B. „Design · PSD“) + Dateiname */ html[data-theme]:not(#cp):not(#cq) body :is(.rst-media-doc-icon, .rst-mc-doc-ic) { display: grid; place-items: center; opacity: 1 !important; font-size: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-doc-kind { margin-top: 8px; color: var(--cp-strong); font-size: 12px; font-weight: 600; letter-spacing: .02em; } html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-media-thumb.is-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } html[data-theme]:not(#cp):not(#cq) body .rst-media-row-icon { display: grid; place-items: center; width: 100%; height: 100%; font-size: 0; } /* Typ-Chip: Symbol in der Art-Farbe */ html[data-theme]:not(#cp):not(#cq) body :is(.rst-mx-chip-type, .rst-mx-type) .cp-file-g { flex: none; } /* Kennzahlen der Mediengestaltung im einheitlichen Kachel-Format: Status-Symbol links, Bezeichnung · Zahl · Zusatz rechts (statt Punkt) */ html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat { display: grid !important; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 2px; align-items: center; } html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat > .rst-mx-stat-ic { grid-row: 1 / span 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; --sc: var(--cp-muted); background: color-mix(in srgb, var(--sc) 12%, transparent); color: var(--sc); } html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat[data-s="pending_approval"] > .rst-mx-stat-ic { --sc: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat[data-s="rejected"] > .rst-mx-stat-ic { --sc: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat[data-s="approved"] > .rst-mx-stat-ic { --sc: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat[data-s=""] > .rst-mx-stat-ic { --sc: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat > .rst-mx-stat-ic svg { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat .rst-media-stat-l::before { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat .rst-media-stat-n { font-size: 22px !important; } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .rst-mx .rst-mx-stat > .rst-mx-stat-ic { grid-row: auto; width: 32px; height: 32px; margin-bottom: 4px; } } /* ========================================================================== v5.118.0 · Asset-Bibliothek: eigene Symbole (Asset-Arten + Dateiarten), Abschnittsköpfe mit Kachel und Anzahl, Linien-Aktionen ========================================================================== */ html[data-theme]:not(#cp):not(#cq) body .rst-assets-section h3 { display: flex !important; align-items: center; gap: 10px; color: var(--cp-strong) !important; font-size: 13px !important; letter-spacing: .06em !important; } html[data-theme]:not(#cp):not(#cq) body .rst-assets-section h3 .rst-assets-count { margin-left: 2px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-muted); font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: 0; } html[data-theme]:not(#cp):not(#cq) body .rst-asset-thumb-fallback { display: grid; place-items: center; font-size: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .rst-asset-thumb-fallback[hidden] { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .rst-asset-actions button { color: var(--cp-muted); font-size: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .rst-asset-actions button:hover { color: var(--cp-rust-hi); background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-asset-actions button[data-act="delete"]:hover { color: var(--cp-danger, #E5484D); background: color-mix(in srgb, var(--cp-danger, #E5484D) 10%, transparent) !important; } /* --------------------------------------------------------------------------- v5.119.0 · Suchleiste in jedem Auswahlfeld (select-search.js) + Select2-Suche im selben Stil --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop { position: fixed; z-index: 1000000; display: flex; flex-direction: column; min-width: 220px; overflow: hidden; background: var(--cp-surface) !important; color: var(--cp-text); border: 1px solid var(--cp-line-2); border-radius: 3px; box-shadow: var(--cp-shadow-pop); font: 400 14px/1.35 var(--cp-font); text-align: left; letter-spacing: 0; text-transform: none; opacity: 0; transform: translateY(-4px); transition: opacity var(--cp-dur-xs, 120ms) ease, transform var(--cp-dur-xs, 120ms) ease; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-up { transform: translateY(4px); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-in { opacity: 1; transform: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-head { flex: none; padding: 14px 16px 4px; font-size: 13px; font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-q { flex: none; display: flex; align-items: center; gap: 8px; margin: 8px; padding: 0 8px 0 10px; height: 38px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-dim); transition: border-color var(--cp-t, .15s), box-shadow var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-q:focus-within { border-color: var(--cp-rust-hi); box-shadow: 0 0 0 3px var(--cp-rust-soft); background: var(--cp-surface); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-q svg { flex: none; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop .cp-ss-q input { flex: 1 1 auto; min-width: 0; height: 100% !important; min-height: 0 !important; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--cp-text) !important; font: inherit; font-size: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-n { flex: none; font-size: 11.5px; color: var(--cp-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-n:empty { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--cp-dim); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-x:hover { background: var(--cp-hover); color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-x[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 6px 6px; list-style: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-opt { display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 0; padding: 7px 10px; border-radius: 3px; cursor: pointer; color: var(--cp-text); overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-txt { flex: 1 1 auto; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-opt.is-empty { color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-opt.is-sel { font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-ok { flex: none; display: grid; place-items: center; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-ok svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-opt.is-act { background: var(--cp-rust); color: var(--cp-on-rust, #fff); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-opt.is-act .cp-ss-ok { color: var(--cp-on-rust, #fff); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-opt.is-dis { opacity: .45; cursor: default; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-opt mark { padding: 0; border-radius: 2px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-weight: 600; box-shadow: 0 0 0 1px var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-opt.is-act mark { background: rgba(255,255,255,.22); color: inherit; box-shadow: 0 0 0 1px rgba(255,255,255,.22); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-grp { position: sticky; top: 0; z-index: 1; margin: 0 -6px; padding: 9px 16px 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-rust-hi); background: var(--cp-surface); border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-none, html[data-theme]:not(#cp):not(#cq) body .cp-ss-more { flex: none; padding: 10px 16px 14px; font-size: 13px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-more { padding-top: 6px; border-top: 1px solid var(--cp-line); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-none[hidden], html[data-theme]:not(#cp):not(#cq) body .cp-ss-more[hidden] { display: none; } /* Feld bleibt markiert, solange seine Liste offen ist */ html[data-theme]:not(#cp):not(#cq) body select.cp-ss-open { border-color: var(--cp-rust-hi) !important; box-shadow: 0 0 0 3px var(--cp-rust-soft) !important; } /* Handy: Blatt von unten */ html[data-theme]:not(#cp):not(#cq) body .cp-ss-scrim { position: fixed; inset: 0; z-index: 999999; background: rgba(6,7,10,.45); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-sheet { position: fixed; min-width: 0; border-width: 1px 0 0; border-radius: 3px 3px 0 0; transform: translateY(16px); padding-bottom: env(safe-area-inset-bottom, 0); } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-sheet.is-in { transform: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-sheet .cp-ss-q { height: 44px; margin: 8px 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-sheet .cp-ss-list { padding: 0 8px 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-sheet .cp-ss-opt { min-height: 44px; font-size: 15px; } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop, html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-up, html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-sheet { transform: none; transition: none; } } /* Select2 (RISE-Felder): gleiche Suchleiste – Lupe links, Platzhalter, Rost-Fokus, Treffer markiert */ html[data-theme]:not(#cp):not(#cq) body .select2-search { padding: 8px 8px 6px !important; } html[data-theme]:not(#cp):not(#cq) body .select2-search input { height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 10px 0 34px !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; box-shadow: none !important; color: var(--cp-text) !important; background: var(--cp-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.6' cy='8.6' r='5.6' fill='none' stroke='%237E858E' stroke-width='1.7'/%3E%3Cpath d='M12.8 12.8l4.2 4.2' stroke='%237E858E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px 50% / 15px 15px !important; } html[data-theme]:not(#cp):not(#cq) body .select2-search input:focus { border-color: var(--cp-rust-hi) !important; box-shadow: 0 0 0 3px var(--cp-rust-soft) !important; background-color: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .select2-search input.select2-active { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.6' cy='8.6' r='5.6' fill='none' stroke='%237E858E' stroke-width='1.7'/%3E%3Cpath d='M12.8 12.8l4.2 4.2' stroke='%237E858E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"), url("/assets/js/select2/select2-spinner.gif") !important; background-repeat: no-repeat !important; background-position: 11px 50%, right 10px center !important; background-size: 15px 15px, 16px 16px !important; } html[data-theme]:not(#cp):not(#cq) body .select2-results .select2-match { text-decoration: none; border-radius: 2px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .select2-results .select2-highlighted .select2-match { background: rgba(255,255,255,.22); color: inherit; } html[data-theme]:not(#cp):not(#cq) body .select2-results .select2-no-results, html[data-theme]:not(#cp):not(#cq) body .select2-results .select2-searching { padding: 10px 12px !important; background: transparent !important; color: var(--cp-muted) !important; font-size: 13px; } /* --------------------------------------------------------------------------- v5.120.0 · Auswahlfelder auch geschlossen im Marken-Stil + eigene Symbole in den Feldern (Content-Kalender, Mediengestaltung, Assets) --------------------------------------------------------------------------- */ /* Statt System-Knopf (macOS: runde Kapsel mit Doppelpfeil, niedriger als die Textfelder) dieselbe Fläche wie ein Textfeld mit feinem Pfeil rechts; mit data-cp-ico zusätzlich die Kachel der aktuellen Auswahl links (select-search.js setzt --cp-ss-ico). Ausgenommen: Mehrfach-/Listenauswahl und zwei bewusst randlose Auswahlen (Meeting-Verfassen, Zeit-Auswertung). */ html[data-theme]:not(#cp):not(#cq):not(#cr) body select:not([multiple]):not([size]:not([size="1"])):not(.cp-mcomp-sel select):not(.ta-sel select) { -webkit-appearance: none !important; appearance: none !important; background-image: var(--cp-ss-ico, none), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8.2l4 4 4-4' fill='none' stroke='%237E858E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 10px 50%, right 10px center !important; background-size: 20px 20px, 16px 16px !important; padding-right: 34px !important; cursor: pointer; text-overflow: ellipsis; } html[data-theme]:not(#cp):not(#cq):not(#cr) body select:not([multiple]):not([size]:not([size="1"])):not(.cp-mcomp-sel select):not(.ta-sel select).cp-ss-open { background-image: var(--cp-ss-ico, none), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 12.2l4-4 4 4' fill='none' stroke='%23C0431C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body select:not([multiple]):not([size]:not([size="1"])):not(.cp-mcomp-sel select):not(.ta-sel select).cp-ss-ico { padding-left: 40px !important; } /* Auswahl im Fließtext („Wiedervorlage nach [14] Tagen“): kleiner Pfeil, schmaler Abstand */ html[data-theme]:not(#cp):not(#cq):not(#cr) body .cp-auto select:not([multiple]):not([size]:not([size="1"])):not(.cp-mcomp-sel select):not(.ta-sel select) { padding-right: 18px !important; background-position: 6px 50%, right 3px center !important; background-size: 16px 16px, 12px 12px !important; } /* Pflichtfeld noch ohne Auswahl („Kunde auswählen …“) wie ein Platzhalter */ html[data-theme]:not(#cp):not(#cq):not(#cr) body select:not([multiple]):not([size]:not([size="1"])):required:has(> option:checked[value=""]) { color: var(--cp-dim) !important; } html[data-theme]:not(#cp):not(#cq):not(#cr) body select:not([multiple]):not([size]:not([size="1"])):disabled { cursor: default; opacity: .6; } /* Kachel vor jedem Eintrag der Suchliste */ html[data-theme]:not(#cp):not(#cq) body .cp-ss-ic { flex: none; display: grid; place-items: center; width: 20px; height: 20px; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-ic svg { display: block; margin: 0; } /* auf der Rost-Zeile: getönte Kacheln auf weißem Grund, sonst verschwimmt z. B. rostfarbene Schrift */ html[data-theme]:not(#cp):not(#cq) body .cp-ss-opt.is-act .cp-ss-ic { border-radius: 3px; background: #fff; } /* dunkles Design: getönte Kacheln (Status, Kunden-Initialen) in der Liste etwas heller */ html[data-theme="dark"]:not(#cp):not(#cq) body .cp-ss-opt:not(.is-act) .cp-ss-ic svg.is-tint { filter: brightness(1.3) saturate(1.1); } /* Textfelder mit Symbol links (Content-Kalender: Datum, Titel, Hashtags, Kampagne, Tags, Medien-Link) */ html[data-theme]:not(#cp):not(#cq) body .cp-fi { position: relative; display: block; width: 100%; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-fi > .cp-ico { position: absolute; left: 12px; top: 50%; z-index: 1; margin: -8px 0 0 !important; color: var(--cp-dim); pointer-events: none; transition: color var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-fi.is-ta > .cp-ico { top: 12px; margin-top: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fi:focus-within > .cp-ico { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-fi > .cp-ico ~ :is(input, textarea) { display: block; width: 100%; box-sizing: border-box; padding-left: 38px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-fi input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-fi input::-webkit-calendar-picker-indicator:hover { opacity: .9; } /* v5.121.0 · Mediengestaltung: Symbole in den Eingaben (Titel, Briefing, Link, Kommentare, Markierungen, Rückmeldung des Kunden) */ html[data-theme]:not(#cp):not(#cq) body .cp-fi.is-ta.is-sm > .cp-ico { top: 10px; left: 11px; } html[data-theme]:not(#cp):not(#cq) body .cp-fi.is-sm > .cp-ico ~ textarea { padding-left: 35px !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-upload-btn { display: inline-flex !important; align-items: center; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .rst-media-upload-btn > .cp-ico { flex: none; margin: 0; } /* v5.122.0 · Kurze Auswahllisten (bis 6 Einträge, reine Zahlen wie „7 / 10 / 14 / 21 / 30“) ohne Suchfeld: kompakte Liste in Feldbreite. Das Suchfeld bleibt unsichtbar im Fokus (Tastatur: ↑ ↓ Enter Esc, Tippen springt zum Eintrag). */ html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-noq { min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-noq .cp-ss-q { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-noq .cp-ss-list { padding: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-noq .cp-ss-opt { min-height: 30px; padding: 5px 10px; gap: 8px; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-noq.is-sheet .cp-ss-list { padding: 6px 8px 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-ss-pop.is-noq.is-sheet .cp-ss-opt { min-height: 44px; font-size: 15px; } /* Massenaktion „Löschen“: Bestätigungsknopf in Gefahr-Rot */ html[data-theme]:not(#cp):not(#cq) body .cp-crm-btn.is-danger { background: var(--cp-danger); border-color: var(--cp-danger); color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .cp-crm-btn.is-danger:hover { background: color-mix(in srgb, var(--cp-danger) 86%, #000); border-color: color-mix(in srgb, var(--cp-danger) 86%, #000); } html[data-theme]:not(#cp):not(#cq) body .cp-crm-btn.is-danger svg { margin: 0; } /* v5.123.0 · Kästchen-Auswahl für Kunden, Interessenten und Projekte (contentag-crm.js, rs*) – Optik wie bei den Aufgaben */ html[data-theme]:not(#cp):not(#cq) body table.cp-rsel :is(.cp-rsel-box, .cp-rsel-all) { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -2px 8px -2px -3px; padding: 0; vertical-align: middle; border: 0; border-radius: var(--cp-r); background: transparent !important; box-shadow: none !important; cursor: pointer; pointer-events: auto !important; } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel .cp-rsel-box::after { content: ""; position: absolute; inset: -7px; } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel :is(td, th):has(> .cp-rsel-box, > .cp-rsel-all) { white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel .cp-tsel-mark { display: block; width: 16px; height: 16px; margin: 0; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--cp-muted) 75%, transparent); border-radius: var(--cp-r); background: var(--cp-surface) center / 11px no-repeat; transition: background-color var(--cp-dur-s) var(--cp-ease), border-color var(--cp-dur-s) var(--cp-ease), transform var(--cp-dur-xs) var(--cp-ease); } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel :is(.cp-rsel-box, .cp-rsel-all:not(:disabled)):hover > .cp-tsel-mark { border-color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel :is(.cp-rsel-box, .cp-rsel-all):active > .cp-tsel-mark { transform: scale(.9); } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel :is(.cp-rsel-box, .cp-rsel-all)[aria-checked="true"] > .cp-tsel-mark { border-color: var(--cp-rust); background-color: var(--cp-rust) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important; } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel .cp-rsel-all[aria-checked="mixed"] > .cp-tsel-mark { border-color: var(--cp-rust); background-color: var(--cp-rust) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") !important; } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel .cp-rsel-all:disabled { cursor: default; opacity: .4; } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel :is(.cp-rsel-box, .cp-rsel-all):focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 1px; } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel tbody tr.cp-rsel-on > td { background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body table.cp-rsel tbody tr.cp-rsel-on > td:first-child { box-shadow: inset 2px 0 0 var(--cp-rust); } /* --------------------------------------------------------------------------- v5.124.0 · Content-Kalender: Kampagnen (Ansicht + Dialog), Kennzahlen zum Zeitraum, neuer Beitrags-Editor --------------------------------------------------------------------------- */ /* Kennzahlen: CRM-Kacheln, klickbar */ html[data-theme]:not(#cp):not(#cq) body .rst-cal2-stats-row { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } html[data-theme]:not(#cp):not(#cq) body button.cp-cal-k { width: 100%; margin: 0; text-align: left; font: inherit; cursor: pointer; transition: border-color var(--cp-t, .15s), background var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body button.cp-cal-k:hover { border-color: var(--cp-rust-line); background: color-mix(in srgb, var(--cp-rust) 3%, var(--cp-surface)); } html[data-theme]:not(#cp):not(#cq) body button.cp-cal-k:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-cal-k .ta-ki svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-cal-k.is-info .ta-ki { background: rgba(59,130,246,.12); color: #3B82F6; } html[data-theme]:not(#cp):not(#cq) body .cp-cal-k.is-ok .ta-ki { background: rgba(139,92,246,.12); color: #8B5CF6; } html[data-theme]:not(#cp):not(#cq) body .cp-cal-k.is-rust .ta-ki { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } @media (max-width: 1200px) { html[data-theme]:not(#cp):not(#cq) body .rst-cal2-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { html[data-theme]:not(#cp):not(#cq) body .rst-cal2-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Kampagnen-Ansicht: Navigation und Beitrags-Filter ohne Bedeutung */ html[data-theme]:not(#cp):not(#cq) body .rst-inline-page-calendar.is-campaigns :is([data-act="prev"], [data-act="next"], .rst-cal-today) { visibility: hidden; } html[data-theme]:not(#cp):not(#cq) body .rst-inline-page-calendar.is-campaigns :is(.rst-cal-platform, .rst-cal-status, .rst-cal-campaign) { display: none !important; } /* Kampagnen-Hinweis (Liste, Editor-Kopf) */ html[data-theme]:not(#cp):not(#cq) body .cp-camp-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; margin-left: 6px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1; color: color-mix(in srgb, var(--cc) 82%, var(--cp-text)); background: color-mix(in srgb, var(--cc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-chip svg { margin: 0; flex: none; } /* Kampagnen-Übersicht */ html[data-theme]:not(#cp):not(#cq) body .cp-camps-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-camps-sum { display: flex; gap: 8px; flex-wrap: wrap; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--cp-line-2); color: var(--cp-text); font-size: 12px; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-st b { color: var(--cp-strong); font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-st i { width: 7px; height: 7px; border-radius: 50%; background: #3B82F6; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-st.is-active i { background: #10B981; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-st.is-paused i { background: #F59E0B; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-st.is-done i { background: #64748B; } html[data-theme]:not(#cp):not(#cq) body .cp-camps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 14px 20px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface); box-shadow: inset 3px 0 0 var(--cc); transition: border-color var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-camp:hover { border-color: var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-h { display: flex; align-items: flex-start; gap: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; color: var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-ic svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-t { min-width: 0; flex: 1; display: grid; gap: 5px; justify-items: start; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-t h3 { margin: 0; font: 600 15px/1.3 var(--cp-font); color: var(--cp-strong); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-t .cp-camp-st { height: 20px; padding: 0 8px; font-size: 11px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-acts { display: flex; gap: 2px; margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-acts button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-acts button:hover { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-acts button[data-camp="delete"]:hover { background: color-mix(in srgb, var(--cp-danger) 10%, transparent); color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-acts svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-warn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 3px; background: rgba(224,165,58,.12); color: var(--cp-warning); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-warn svg { flex: none; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-warn span { flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-warn button { padding: 4px 10px; border: 1px solid currentColor; border-radius: 3px; background: transparent; color: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-meta .is-wide { grid-column: 1 / -1; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-meta dt { margin: 0; color: var(--cp-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-meta dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 3px 0 0; min-width: 0; color: var(--cp-text); font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-meta dd em { color: var(--cp-dim); font-style: normal; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-cli { display: inline-flex; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-cli svg { display: block; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-tm { color: var(--cp-muted); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-time { height: 4px; border-radius: 999px; background: var(--cp-line); overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-time i { display: block; height: 100%; background: var(--cc); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-pn { color: var(--cp-muted); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-pn b { color: var(--cp-strong); font-size: 15px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-bar { display: flex; gap: 2px; height: 8px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-bar i { display: block; min-width: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; color: var(--cp-muted); font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-leg span { display: inline-flex; align-items: center; gap: 5px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-leg i { width: 8px; height: 8px; border-radius: 50%; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-none { margin-top: 4px; color: var(--cp-dim); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-plats { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-goal { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--cp-muted); font-size: 13px; line-height: 1.45; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-f > div { display: flex; gap: 6px; flex-wrap: wrap; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-f button:disabled { opacity: .45; cursor: not-allowed; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-bud { color: var(--cp-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-camps-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 20px; border: 1px dashed var(--cp-line-2); border-radius: 3px; text-align: center; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-camps-empty > svg { color: var(--cp-rust-hi); width: 30px; height: 30px; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-camps-empty b { color: var(--cp-strong); font-size: 15px; } html[data-theme]:not(#cp):not(#cq) body .cp-camps-empty span { max-width: 460px; font-size: 13px; line-height: 1.5; } /* Kampagnen-Dialog */ html[data-theme]:not(#cp):not(#cq) body .cp-camp-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,5,8,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--cp-dur-s, .18s) ease; } html[data-theme="light"]:not(#cp):not(#cq) body .cp-camp-modal { background: rgba(10,12,17,.35); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-modal.is-on { opacity: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-card { position: relative; display: flex; flex-direction: column; width: min(780px, 100%); max-height: 92vh; overflow: auto; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface); box-shadow: var(--cp-shadow-pop); color: var(--cp-text); transform: translateY(10px); transition: transform var(--cp-dur-m, .24s) var(--cp-e, ease); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-modal.is-on .cp-camp-card { transform: none; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-card .rst-post-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer; font-size: 18px; line-height: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 16px 28px 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-form .cp-pe-f.is-wide { grid-column: 1 / -1; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-card :is(input:not([type="checkbox"]), select, textarea) { width: 100%; box-sizing: border-box; min-height: 40px; padding: 9px 12px; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-colors { display: flex; flex-wrap: wrap; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-colors button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 3px; background: var(--cc); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } html[data-theme]:not(#cp):not(#cq) body .cp-camp-colors button[aria-checked="true"] { outline: 2px solid var(--cp-strong); outline-offset: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-msg { display: none; margin: 0 28px; padding: 8px 12px; border-radius: 3px; background: color-mix(in srgb, var(--cp-danger) 10%, transparent); color: var(--cp-danger); font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-msg.is-on { display: block; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-confirm { display: flex; align-items: center; gap: 8px; color: var(--cp-text); font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-camp-confirm svg { flex: none; margin: 0; color: var(--cp-danger); } /* Beitrags-Editor (auch für den Kampagnen-Dialog: Kopf, Felder, Fuß) */ html[data-theme]:not(#cp):not(#cq) body .rst-post-modal .rst-post-card.cp-pe { width: min(1200px, 100%); max-width: none; max-height: 94vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer; font-size: 18px; line-height: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-head { flex: none; padding: 22px 64px 0 28px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-ttl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-post-modal, .cp-camp-modal) .cp-pe-head h2 { margin: 0; font: 600 20px/1.25 var(--cp-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-id { color: var(--cp-dim); font-size: 12px; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-stc { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; color: var(--cp-muted); font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-sub > svg, html[data-theme]:not(#cp):not(#cq) body .cp-pe-sub svg { margin: 0 4px 0 0; vertical-align: -2px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-sub em { font-style: normal; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-sub .cp-camp-chip { margin-left: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-tabs { flex: none; padding: 12px 28px 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-tabbody { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 28px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-main { display: grid; gap: 14px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-sec { min-width: 0; padding: 16px 18px 6px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-sec > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--cp-muted); font: 600 11px/1 var(--cp-font); letter-spacing: .12em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-sec > h3 svg { margin: 0; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-f { display: grid; gap: 6px; min-width: 0; margin: 0 0 12px; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-post-modal, .cp-camp-modal) .cp-pe-f > span { display: flex; align-items: center; gap: 6px; color: var(--cp-muted) !important; font-size: 12px !important; font-weight: 500; } html[data-theme]:not(#cp):not(#cq) body .cp-pe :is(input:not([type="checkbox"]):not([type="file"]), select, textarea) { width: 100%; box-sizing: border-box; min-height: 40px; padding: 9px 12px; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe textarea[name="content"] { min-height: 170px; line-height: 1.5; resize: vertical; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-platforms-multi { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-hc { font-style: normal; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-hc.is-warn { color: var(--cp-warning); font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-cnt { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--cp-line-2); color: var(--cp-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-cnt svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-cnt.is-ok { color: var(--cp-success); border-color: color-mix(in srgb, var(--cp-success) 35%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-cnt.is-warn { color: var(--cp-warning); border-color: color-mix(in srgb, var(--cp-warning) 45%, transparent); background: color-mix(in srgb, var(--cp-warning) 8%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-cnt.is-err { color: var(--cp-danger); border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); background: color-mix(in srgb, var(--cp-danger) 8%, transparent); font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-quick > span { color: var(--cp-dim); font-size: 12px; margin-right: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-quick button { height: 28px; padding: 0 10px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-text); font-size: 12px; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-quick button:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-camp { display: flex; align-items: center; gap: 10px; margin: -2px 0 12px; padding: 10px 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cc) 32%, transparent); background: color-mix(in srgb, var(--cc) 7%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-camp[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-camp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cc); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-camp > div { display: grid; gap: 2px; min-width: 0; flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-camp b { color: var(--cp-strong); font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-camp span { color: var(--cp-muted); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-camp button { flex: none; padding: 5px 10px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface); color: var(--cp-text); font-size: 12px; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-camp button:hover { border-color: var(--cp-rust-line); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-media-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-media-upload-btn { display: inline-flex; align-items: center; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-media-upload-btn svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-media-preview:not(:empty) { margin: 10px 0 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-side { position: sticky; top: 0; display: grid; gap: 14px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-card { border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-card-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cp-line); color: var(--cp-strong); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-card-h > svg { margin: 0; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-prevtabs { display: flex; gap: 4px; margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-prevtabs button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface); color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-prevtabs button.active { border-color: var(--cp-rust-hi); color: var(--cp-rust-hi); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-prevtabs svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-stage { max-height: 460px; overflow: auto; padding: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-stage .rst-prev { width: 100%; max-width: none; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-score { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-score.is-ok { color: var(--cp-success); background: color-mix(in srgb, var(--cp-success) 12%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-score.is-warn { color: var(--cp-warning); background: color-mix(in srgb, var(--cp-warning) 12%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-score.is-err { color: var(--cp-danger); background: color-mix(in srgb, var(--cp-danger) 12%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-ready { display: grid; gap: 2px; margin: 0; padding: 8px 12px 10px; list-style: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-ready li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; color: var(--cp-text); font-size: 12.5px; line-height: 1.35; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-ready li svg { flex: none; margin: 1px 0 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-ready li.is-ok svg { color: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-ready li.is-na { color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-ready li.is-na svg { color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-ready li.is-bad { color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-ready li.is-bad svg { color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-msg:not(:empty) { flex: none; margin: 0 28px 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-foot { flex: none; display: flex !important; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 14px 28px; border-top: 1px solid var(--cp-line); background: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-foot-l, html[data-theme]:not(#cp):not(#cq) body .cp-pe-foot-r { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-foot :is(.rst-post-btn-primary, .rst-post-btn-secondary, .rst-post-btn-danger) { display: inline-flex; align-items: center; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-foot svg { margin: 0; } @media (max-width: 1000px) { html[data-theme]:not(#cp):not(#cq) body .cp-pe-grid { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .cp-pe-side { position: static; } } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body :is(.cp-pe-row, .cp-camp-form, .cp-camp-meta) { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body :is(.cp-pe-head) { padding: 18px 56px 0 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-tabbody, html[data-theme]:not(#cp):not(#cq) body .cp-camp-form { padding-left: 16px; padding-right: 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-tabs { padding: 10px 16px 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-foot { padding: 12px 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-camps-grid { grid-template-columns: minmax(0, 1fr); } } /* v5.124.0 · Seitenleiste des Editors: Vorschau + Prüfliste gemeinsam sichtbar */ html[data-theme]:not(#cp):not(#cq) body .cp-pe-side { max-height: calc(94vh - 230px); overflow-y: auto; overscroll-behavior: contain; } html[data-theme]:not(#cp):not(#cq) body .cp-pe-stage { max-height: 330px; } html[data-theme]:not(#cp):not(#cq) body .cp-pe label.rst-post-plat-chip[hidden] { display: none !important; } @media (max-width: 1000px) { html[data-theme]:not(#cp):not(#cq) body .cp-pe-side { max-height: none; overflow: visible; } } /* --------------------------------------------------------------------------- v5.125.0 · Mediengestaltung: Vorschau (Lightbox) und Markierungs-Werkzeuge im Content-Agency-Design (Team + Kundenportal; überschreibt die alten Indigo-/Pink-Verläufe aus media-approval.css) --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox { background: rgba(6,7,10,.94) !important; font-family: var(--cp-font) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox :is(.rst-lb-close, .rst-lb-prev, .rst-lb-next) { display: grid !important; place-items: center; width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 3px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #E4E5E4 !important; font-size: 0 !important; transition: background var(--cp-t, .15s), border-color var(--cp-t, .15s), color var(--cp-t, .15s) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox .rst-lb-close { width: 40px !important; height: 40px !important; top: 18px !important; right: 18px !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox :is(.rst-lb-close, .rst-lb-prev, .rst-lb-next):hover { background: rgba(232,85,42,.16) !important; border-color: rgba(232,85,42,.55) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox :is(.rst-lb-close, .rst-lb-prev, .rst-lb-next) svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox.is-single :is(.rst-lb-prev, .rst-lb-next) { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox .rst-lb-stage :is(img, video) { border-radius: 3px; box-shadow: 0 30px 80px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06); } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox .rst-lb-meta { display: flex !important; align-items: center; gap: 12px !important; padding: 8px 14px 8px 8px !important; max-width: min(92vw, 780px) !important; background: rgba(16,19,26,.94) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 3px !important; box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); color: #E4E5E4 !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox .cp-lb-tile { display: inline-flex; flex: none; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox .cp-lb-txt { display: grid; gap: 1px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox .cp-lb-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #F6F6F4 !important; font-size: 14px !important; font-weight: 600 !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox .cp-lb-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9BA2AA !important; font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox .cp-lb-count { flex: none; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.12); color: #9BA2AA !important; font-size: 12px; font-variant-numeric: tabular-nums; } /* Werkzeugleiste */ html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at { display: inline-flex !important; align-items: center; flex-wrap: nowrap; gap: 8px !important; padding: 6px 8px 6px 4px !important; margin: 0; background: rgba(16,19,26,.95) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 3px !important; box-shadow: 0 16px 36px -14px rgba(0,0,0,.75) !important; color: #E4E5E4; font: 500 12.5px/1 var(--cp-font) !important; backdrop-filter: blur(12px); } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .cp-at-drag { display: grid !important; place-items: center; width: 20px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.35) !important; background: transparent !important; border: 0 !important; cursor: grab; font-size: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .cp-at-drag:hover { color: rgba(255,255,255,.7) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at.dragging { cursor: grabbing; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at svg { margin: 0; flex: none; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .cp-at-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 3px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .rst-pin-mode { all: unset; box-sizing: border-box; display: inline-flex !important; align-items: center; gap: 7px !important; width: auto !important; height: 32px !important; padding: 0 10px !important; border: 0 !important; border-radius: 2px !important; background: transparent !important; box-shadow: none !important; color: #BFC4CB !important; font: 500 12.5px/1 var(--cp-font) !important; cursor: pointer; transition: background var(--cp-t, .15s), color var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .rst-pin-mode:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .rst-pin-mode.active { background: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at kbd { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 2px; border: 1px solid currentColor; background: transparent; color: inherit; font: 600 9.5px/1 var(--cp-font); opacity: .55; box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .rst-pin-mode.active kbd { opacity: .8; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .cp-at-sep { width: 1px; height: 22px; background: rgba(255,255,255,.12); } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .cp-at-colors { display: inline-flex; align-items: center; gap: 7px; padding: 0 2px; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .rst-pin-color { all: unset; box-sizing: border-box; display: block !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; cursor: pointer; background: var(--c) !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25) !important; transition: transform var(--cp-dur-xs, .12s) ease, box-shadow var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .rst-pin-color:hover { transform: scale(1.1); } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .rst-pin-color.active { box-shadow: 0 0 0 2px #10131A, 0 0 0 4px var(--c) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .cp-at-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 3px; background: transparent; color: #BFC4CB; font: 500 12.5px/1 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .cp-at-btn:hover { color: #fff; border-color: rgba(255,255,255,.28); } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .cp-at-btn.is-on { color: var(--cp-rust-hi); border-color: rgba(232,85,42,.55); background: rgba(232,85,42,.12); } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at :is(.rst-pin-mode, .rst-pin-color, .cp-at-btn):focus-visible { outline: 2px solid var(--cp-rust-hi) !important; outline-offset: 2px; } /* Werkzeugleiste im Detail-Dialog (über dem Bild, im hellen/dunklen Design) */ html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .rst-pin-toolbar.cp-at { position: static !important; display: flex !important; width: max-content; max-width: 100%; margin: 12px 0 0 !important; background: var(--cp-surface-2) !important; border-color: var(--cp-line-2) !important; box-shadow: none !important; color: var(--cp-text); backdrop-filter: none; } html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .rst-pin-toolbar.cp-at .cp-at-drag { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .rst-pin-toolbar.cp-at .cp-at-seg { background: var(--cp-surface); border-color: var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .rst-pin-toolbar.cp-at .rst-pin-mode { color: var(--cp-muted) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .rst-pin-toolbar.cp-at .rst-pin-mode:hover { background: var(--cp-hover) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .rst-pin-toolbar.cp-at .rst-pin-mode.active { background: var(--cp-rust) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .rst-pin-toolbar.cp-at .cp-at-sep { background: var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .rst-pin-toolbar.cp-at .rst-pin-color.active { box-shadow: 0 0 0 2px var(--cp-surface-2), 0 0 0 4px var(--c) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .rst-pin-toolbar.cp-at .cp-at-btn { color: var(--cp-muted); border-color: var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .rst-pin-toolbar.cp-at .cp-at-btn:hover { color: var(--cp-strong); border-color: var(--cp-dim); } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at :is(.rst-pin-mode span, .rst-pin-mode kbd, .cp-at-btn span) { display: none; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .rst-pin-mode { padding: 0 9px !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-toolbar.cp-at .cp-at-colors { gap: 6px; } } /* Markierungen: nummerierte Pins in Markenfarbe (Zeichnungen in ihrer Farbe), Antwortzahl als Abzeichen */ html[data-theme]:not(#cp):not(#cq) body .rst-pin { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: var(--cp-rust); color: #fff !important; font: 700 12.5px/1 var(--cp-font) !important; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff, 0 8px 18px -6px rgba(0,0,0,.6) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin:hover { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(232,85,42,.28), 0 10px 22px -6px rgba(0,0,0,.65) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .rst-pin.draft { background: var(--cp-rust-hi); animation: cp-pin-ring 1.4s ease-out infinite !important; } @keyframes cp-pin-ring { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(232,85,42,.55); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 14px rgba(232,85,42,0); } } html[data-theme]:not(#cp):not(#cq) body .cp-pin-rc { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; background: #10131A; border: 1.5px solid #fff; color: #fff; font: 700 9.5px/1 var(--cp-font); } html[data-theme]:not(#cp):not(#cq) body .rst-drawing-path { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); } html[data-theme]:not(#cp):not(#cq) body .rst-pin-host.cp-at-hide :is(.rst-pin-layer, .rst-drawing-layer, .rst-pin-hint) { opacity: 0 !important; pointer-events: none !important; transition: opacity var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .rst-pin-host.cp-at-hide { cursor: default !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-hint { padding: 7px 12px !important; border-radius: 3px !important; background: rgba(16,19,26,.9) !important; border: 1px solid rgba(255,255,255,.1); color: #E4E5E4 !important; font: 500 12px/1.2 var(--cp-font) !important; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-hint svg { margin: 0 6px 0 0; vertical-align: -2px; } /* Kommentar-Popups an der Markierung */ html[data-theme]:not(#cp):not(#cq) body :is(.rst-pin-compose, .rst-pin-thread) { background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; box-shadow: var(--cp-shadow-pop) !important; color: var(--cp-text) !important; font-family: var(--cp-font) !important; min-width: 280px !important; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-pin-compose-arrow, .rst-pin-thread-arrow) { background: var(--cp-surface) !important; box-shadow: 1px 1px 0 var(--cp-line-2) !important; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-pin-compose, .rst-pin-thread-reply) textarea { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; color: var(--cp-text) !important; box-shadow: none !important; font: 13px/1.45 var(--cp-font) !important; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-pin-compose, .rst-pin-thread-reply) textarea:focus { border-color: var(--cp-rust-hi) !important; box-shadow: 0 0 0 3px var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-pin-send, .rst-pin-thread-reply-send) { background: var(--cp-rust) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--cp-rust) !important; border-radius: 3px !important; box-shadow: none !important; font: 600 12.5px/1 var(--cp-font) !important; padding: 8px 12px !important; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-pin-send, .rst-pin-thread-reply-send):hover { background: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-cancel { background: transparent !important; color: var(--cp-muted) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; font: 500 12.5px/1 var(--cp-font) !important; padding: 8px 12px !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-cancel:hover { color: var(--cp-strong) !important; border-color: var(--cp-dim) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-thread-head { background: transparent !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-thread-title { display: inline-flex; align-items: center; gap: 8px; color: var(--cp-strong) !important; font: 600 13px/1 var(--cp-font) !important; letter-spacing: 0 !important; text-transform: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pin-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pc, var(--cp-rust)); color: #fff; font: 700 10.5px/1 var(--cp-font); font-style: normal; } html[data-theme]:not(#cp):not(#cq) body .cp-pin-no:empty { display: none; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-thread-close { color: var(--cp-muted) !important; border-radius: 3px !important; background: transparent !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-thread-close:hover { color: var(--cp-strong) !important; background: var(--cp-hover) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-msg { border-color: var(--cp-line) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-msg-head strong { color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-msg-time { color: var(--cp-dim) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-msg-body { color: var(--cp-text) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-msg-del { color: var(--cp-dim) !important; border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-msg-del:hover { color: var(--cp-danger) !important; background: color-mix(in srgb, var(--cp-danger) 10%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-pin-thread-reply { background: var(--cp-surface-2) !important; border-top: 1px solid var(--cp-line) !important; } /* v5.125.0 · Content-Kalender: Medien-Karte statt Google-Fehlerseite (private Drive-Dateien) */ html[data-theme]:not(#cp):not(#cq) body .cp-media-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); } html[data-theme]:not(#cp):not(#cq) body .cp-media-card > div { display: grid; gap: 3px; min-width: 0; flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-media-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-strong); font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-media-card span { color: var(--cp-muted); font-size: 12px; line-height: 1.4; } html[data-theme]:not(#cp):not(#cq) body .cp-media-card a { flex: none; padding: 7px 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; color: var(--cp-text) !important; font-size: 12.5px; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-media-card a:hover { border-color: var(--cp-rust-line); color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-media-preview :is(img, video) { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-surface-2); object-fit: contain; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-media-upload-btn { height: 38px; padding: 0 14px !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; background: var(--cp-surface-2) !important; color: var(--cp-text) !important; font: 500 13px/1 var(--cp-font) !important; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-media-upload-btn:hover { border-color: var(--cp-rust-line) !important; color: var(--cp-rust-hi) !important; background: var(--cp-rust-soft) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-media-upload-status { font-size: 12.5px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-media-upload-status.ok { color: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .cp-pe .rst-post-media-upload-status.err { color: var(--cp-danger); } /* --------------------------------------------------------------------------- v5.125.0 · Content-Kalender: realistische Plattform-Vorschau (.pv*) – Farben/Schrift der Plattformen, hell/dunkel wie das CRM --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .cp-pe-stage { max-height: 520px !important; padding: 14px !important; background: color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface-2)); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv { --pv-bg: #fff; --pv-fg: #0f1419; --pv-sub: #65676b; --pv-line: #e4e6eb; --pv-link: #0064d1; max-width: 340px; margin: 0 auto; overflow: hidden; border-radius: 3px; background: var(--pv-bg); color: var(--pv-fg); border: 1px solid var(--pv-line); box-shadow: 0 10px 28px -16px rgba(0,0,0,.45); font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0; text-align: left; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv svg { margin: 0; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv b { font-weight: 600; color: var(--pv-fg); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-link { color: var(--pv-link); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ph { color: var(--pv-sub); font-style: italic; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-more { all: unset; color: var(--pv-sub); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-more:hover { text-decoration: underline; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-who { display: grid; gap: 1px; min-width: 0; flex: 1; line-height: 1.25; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-who span { display: inline-flex; align-items: center; gap: 4px; color: var(--pv-sub); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-dots { color: var(--pv-fg); font-size: 12px; letter-spacing: 1px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ava { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--pv-line); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ava svg { width: 100%; height: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ava.is-ring { padding: 2px; background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ava.is-ring svg { border-radius: 50%; box-shadow: 0 0 0 2px var(--pv-bg); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ava.is-sq { border-radius: 3px; width: 44px; height: 44px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-media { position: relative; width: 100%; overflow: hidden; background: #111; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-media img { display: block; width: 100%; height: 100%; object-fit: cover; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-media.is-empty { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--pv-line) 70%, var(--pv-bg)), var(--pv-line)); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-media.is-empty > span { display: grid; justify-items: center; gap: 6px; color: var(--pv-sub); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 20px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-text { padding: 0 12px 10px; font-size: 14px; overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-bar { display: flex; align-items: center; justify-content: space-around; gap: 4px; margin: 0 12px; padding: 8px 0; border-top: 1px solid var(--pv-line); color: var(--pv-sub); font-size: 12.5px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-bar svg { margin-right: 5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-bar > span:empty { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-main { display: grid; gap: 6px; min-width: 0; flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-main .pv-text { padding: 0; } /* Instagram */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ig { --pv-bg: #fff; --pv-fg: #000; --pv-sub: #737373; --pv-line: #dbdbdb; --pv-link: #00376b; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ig .pv-acts { display: flex; align-items: center; gap: 14px; padding: 10px 12px 6px; color: var(--pv-fg); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ig .pv-acts i { flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ig .pv-cap { padding: 0 12px; font-size: 14px; overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ig .pv-meta { padding: 6px 12px 12px; color: var(--pv-sub); font-size: 11px; letter-spacing: .02em; text-transform: uppercase; } /* Facebook */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-fb { --pv-bg: #fff; --pv-fg: #050505; --pv-sub: #65676b; --pv-line: #ced0d4; --pv-link: #0064d1; font-size: 15px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-fb .pv-media { margin-bottom: 4px; } /* LinkedIn */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-li { --pv-bg: #fff; --pv-fg: rgba(0,0,0,.9); --pv-sub: rgba(0,0,0,.6); --pv-line: #e8e8e8; --pv-link: #0a66c2; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-li .pv-who span { font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-li .pv-follow { align-self: flex-start; color: var(--pv-link); font-weight: 600; font-size: 13px; white-space: nowrap; } /* X / Threads */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-x { --pv-bg: #fff; --pv-fg: #0f1419; --pv-sub: #536471; --pv-line: #eff3f4; --pv-link: #1d9bf0; font-size: 15px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-th { --pv-bg: #fff; --pv-fg: #000; --pv-sub: #999; --pv-line: #e5e5e5; --pv-link: #0095f6; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-pv-stage .pv-x, .cp-pv-stage .pv-th) .pv-who { display: flex; align-items: baseline; gap: 4px; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-pv-stage .pv-x, .cp-pv-stage .pv-th) .pv-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-pv-stage .pv-x, .cp-pv-stage .pv-th) .pv-who .pv-dots { margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-pv-stage .pv-x, .cp-pv-stage .pv-th) .pv-media { border-radius: 14px; border: 1px solid var(--pv-line); } html[data-theme]:not(#cp):not(#cq) body :is(.cp-pv-stage .pv-x, .cp-pv-stage .pv-th) .pv-acts { display: flex; justify-content: space-between; max-width: 92%; color: var(--pv-sub); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-th .pv-acts { justify-content: flex-start; gap: 18px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-over { background: rgba(244,33,46,.18); color: inherit; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-warn { color: #f4212e; font-size: 12px; font-weight: 600; } /* TikTok (Hochformat mit Aktionsspalte) */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-tt { --pv-bg: #000; --pv-fg: #fff; --pv-sub: rgba(255,255,255,.75); --pv-line: #2f2f2f; --pv-link: #fff; max-width: 260px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-tt .pv-media::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-tt-side { position: absolute; right: 8px; bottom: 70px; z-index: 1; display: grid; justify-items: center; gap: 14px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-tt-side .pv-ava { width: 38px; height: 38px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-tt-cap { position: absolute; left: 10px; right: 56px; bottom: 10px; z-index: 1; display: grid; gap: 4px; color: #fff; font-size: 12.5px; text-shadow: 0 1px 2px rgba(0,0,0,.6); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-tt-cap b { color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-tt-cap small { opacity: .85; font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-tt .pv-more { color: #fff; font-weight: 600; } /* YouTube */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-yt { --pv-bg: #fff; --pv-fg: #0f0f0f; --pv-sub: #606060; --pv-line: #e5e5e5; --pv-link: #065fd4; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-yt .pv-main span { color: var(--pv-sub); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-yt-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.35; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-yt-dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 4px; border-radius: 3px; background: rgba(0,0,0,.8); color: #fff; font-size: 11px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-yt-d { color: var(--pv-sub); font-size: 12.5px; } /* Pinterest */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-pin { --pv-bg: #fff; --pv-fg: #111; --pv-sub: #767676; --pv-line: #efefef; max-width: 240px; border: 0; box-shadow: none; background: transparent; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-pin .pv-media { border-radius: 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-pin-save { position: absolute; right: 8px; top: 8px; padding: 8px 12px; border-radius: 999px; background: #e60023; color: #fff; font-size: 12.5px; font-weight: 700; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-pin-t { display: block; padding: 8px 4px 0; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-pin .pv-row { align-items: center; padding: 6px 4px; font-size: 12px; color: var(--pv-sub); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-pin .pv-ava { width: 24px; height: 24px; } /* Newsletter / Blog */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-nl { --pv-bg: #f4f5f7; --pv-fg: #1d2129; --pv-sub: #6b7280; --pv-line: #e5e7eb; --pv-link: #B83E19; max-width: 360px; padding: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-nl-mail { overflow: hidden; border-radius: 3px; background: #fff; border: 1px solid var(--pv-line); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-nl-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--pv-line); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-nl-h > div { display: grid; flex: 1; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-nl-h span { color: var(--pv-sub); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-nl .pv-text { padding: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-nl-btn { display: inline-block; margin: 0 12px 14px; padding: 8px 14px; border-radius: 3px; background: #B83E19; color: #fff; font-size: 13px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-blog { --pv-bg: #fff; --pv-fg: #1d2129; --pv-sub: #6b7280; --pv-line: #e5e7eb; --pv-link: #B83E19; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-blog-b { display: grid; gap: 6px; padding: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-blog-b small { color: var(--pv-link); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-blog-b > b { font: 700 18px/1.25 Georgia, "Times New Roman", serif; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-blog .pv-text { padding: 0; font: 400 14px/1.6 Georgia, "Times New Roman", serif; color: #374151; } /* Dunkles CRM → Dunkelmodus der Plattformen */ html[data-theme="dark"]:not(#cp):not(#cq) body .cp-pv-stage .pv-ig { --pv-bg: #000; --pv-fg: #f5f5f5; --pv-sub: #a8a8a8; --pv-line: #262626; --pv-link: #e0f1ff; } html[data-theme="dark"]:not(#cp):not(#cq) body .cp-pv-stage .pv-fb { --pv-bg: #242526; --pv-fg: #e4e6eb; --pv-sub: #b0b3b8; --pv-line: #3e4042; --pv-link: #4599ff; } html[data-theme="dark"]:not(#cp):not(#cq) body .cp-pv-stage .pv-li { --pv-bg: #1b1f23; --pv-fg: rgba(255,255,255,.9); --pv-sub: rgba(255,255,255,.6); --pv-line: #38434f; --pv-link: #71b7fb; } html[data-theme="dark"]:not(#cp):not(#cq) body .cp-pv-stage .pv-x { --pv-bg: #000; --pv-fg: #e7e9ea; --pv-sub: #71767b; --pv-line: #2f3336; --pv-link: #1d9bf0; } html[data-theme="dark"]:not(#cp):not(#cq) body .cp-pv-stage .pv-th { --pv-bg: #101010; --pv-fg: #f3f5f7; --pv-sub: #777; --pv-line: #2b2b2b; --pv-link: #5ab0ff; } html[data-theme="dark"]:not(#cp):not(#cq) body .cp-pv-stage .pv-yt { --pv-bg: #0f0f0f; --pv-fg: #f1f1f1; --pv-sub: #aaa; --pv-line: #272727; --pv-link: #3ea6ff; } html[data-theme="dark"]:not(#cp):not(#cq) body .cp-pv-stage .pv-pin { --pv-fg: #efefef; --pv-sub: #a5a5a5; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-bar { justify-content: space-around; padding: 6px 0 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-b { display: grid; justify-items: center; gap: 3px; min-width: 0; color: var(--pv-sub); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-b svg { margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-b em { font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ava svg { background: var(--pv-bg); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-ava.is-ring svg { border-radius: 50%; } /* Lightbox: Leiste mittig über dem Bild (vom Nutzer verschobene Leisten haben eine feste Position im style-Attribut und bleiben dort) */ html[data-theme]:not(#cp):not(#cq) body .rst-lb-toolbar-slot > .rst-pin-toolbar.cp-at:not([style*="fixed"]) { position: relative !important; top: auto !important; right: auto !important; left: auto !important; } /* --------------------------------------------------------------------------- v5.126.0 · Kundenportal Content-Kalender: Beitragsansicht wie im Team-Editor (realistische Vorschau links, Freigabe rechts), Kennzahlen --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage { padding: 14px; background: color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface-2)); } html[data-theme]:not(#cp):not(#cq) body .rst-client-post-card.cp-cpv { position: relative; display: flex; flex-direction: column; width: min(1120px, 100%); max-width: none !important; max-height: 94vh; padding: 0 !important; overflow: hidden; background: var(--cp-surface) !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; box-shadow: var(--cp-shadow-pop) !important; color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-post-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer; font-size: 18px; line-height: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .cp-pe-head { padding-bottom: 14px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .cp-pe-sub b { color: var(--cp-strong); font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-plats { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-plats > span { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 22px; align-items: start; padding: 18px 28px 24px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-prev { position: sticky; top: 0; display: grid; gap: 10px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .cp-pv-stage { max-height: min(640px, 70vh); overflow: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-file a, html[data-theme]:not(#cp):not(#cq) body .cp-cpv-file span { display: inline-flex; align-items: center; gap: 8px; color: var(--cp-muted) !important; font-size: 12.5px; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-file a:hover { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-file svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-side { display: grid; gap: 16px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-side :is(.rst-client-decide, .rst-client-already-decided, .rst-client-comments-wrap) { margin: 0 !important; padding: 16px 18px !important; border: 1px solid var(--cp-line) !important; border-radius: 3px !important; background: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-side h3 { margin: 0 0 10px !important; color: var(--cp-muted) !important; font: 600 11px/1 var(--cp-font) !important; letter-spacing: .12em !important; text-transform: uppercase !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-side textarea { width: 100%; box-sizing: border-box; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-side .rst-client-comments-compose { display: grid; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-side .rst-client-comments-compose > button { justify-self: end; } @media (max-width: 900px) { html[data-theme]:not(#cp):not(#cq) body .cp-cpv-grid { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 20px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv-prev { position: static; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .cp-pe-head { padding: 18px 56px 12px 16px; } } /* Kennzahlen im Kundenportal: vier Kacheln */ html[data-theme]:not(#cp):not(#cq) body .rst-cal2-stats-row.cp-cc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-cc-stats .cp-cal-k.is-ok .ta-ki { background: rgba(63,185,132,.12); color: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .cp-cc-stats .cp-cal-k.is-info .ta-ki { background: rgba(139,92,246,.12); color: #8B5CF6; } @media (max-width: 760px) { html[data-theme]:not(#cp):not(#cq) body .rst-cal2-stats-row.cp-cc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Kunden-Beitragsansicht: Entscheidung wie in der Mediengestaltung (Freigeben = Rost, sonst ruhige Umrisse), Senden in Rost */ html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-client-decide-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-client-decide-btns .rst-client-btn-approve { grid-column: 1 / -1; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv :is(.rst-client-btn-approve, .rst-client-btn-changes, .rst-client-btn-reject, .rst-client-btn-undo) { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 40px; padding: 0 14px; border-radius: 3px; font: 600 13px/1 var(--cp-font); cursor: pointer; text-align: center; box-shadow: none; transition: background var(--cp-t, .15s), border-color var(--cp-t, .15s), color var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-cpv :is(.rst-client-btn-approve, .rst-client-btn-changes, .rst-client-btn-reject) svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-client-btn-approve { background: var(--cp-rust); border: 1px solid var(--cp-rust); color: #fff; height: 44px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-client-btn-approve:hover:not(:disabled) { background: var(--cp-rust-hi); border-color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-cpv :is(.rst-client-btn-changes, .rst-client-btn-reject, .rst-client-btn-undo) { background: transparent; border: 1px solid var(--cp-line-2); color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-client-btn-changes:hover:not(:disabled) { border-color: color-mix(in srgb, var(--cp-warning) 60%, transparent); color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-client-btn-reject:hover:not(:disabled) { border-color: color-mix(in srgb, var(--cp-danger) 55%, transparent); color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-client-btn-undo:hover:not(:disabled) { border-color: var(--cp-dim); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-cpv :is(.rst-client-btn-approve, .rst-client-btn-changes, .rst-client-btn-reject, .rst-client-btn-undo):disabled { opacity: .55; cursor: wait; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv :is(.rst-client-btn-approve, .rst-client-btn-changes, .rst-client-btn-reject, .rst-client-btn-undo):focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-client-comments-compose > button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 3px; background: var(--cp-rust); color: #fff; font: 600 13px/1 var(--cp-font); cursor: pointer; justify-self: end; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-client-comments-compose > button:hover:not(:disabled) { background: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-client-already-decided { text-align: left; align-items: flex-start; color: var(--cp-text); font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-cpv .rst-comments-loading { padding: 18px; border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-muted); text-align: center; font-size: 13px; } /* --------------------------------------------------------------------------- v5.127.0 · Mediengestaltung: Ansicht „wie auf der Plattform“ (Lightbox + Detail, Team + Kundenportal) und Story-Vorschau --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .cp-mk { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 3px; font: 500 12.5px/1 var(--cp-font); } html[data-theme]:not(#cp):not(#cq) body .cp-mk[hidden] { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-mk-l { padding: 0 8px 0 6px; color: #9BA2AA; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-mk button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 0; border-radius: 2px; background: transparent; color: #BFC4CB; font: inherit; cursor: pointer; transition: background var(--cp-t, .15s), color var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-mk button svg { margin: 0; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mk button:hover { background: rgba(255,255,255,.07); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-mk button.active { background: var(--cp-rust); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-mk button:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 1px; } /* Lightbox: oben links, Symbole – nur die aktive Ansicht mit Namen */ html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox > .cp-mk { position: absolute; top: 18px; left: 18px; z-index: 8; background: rgba(16,19,26,.95); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 36px -14px rgba(0,0,0,.75); } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox > .cp-mk button:not(.active) span { display: none; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox.cp-mk-active :is(.rst-lb-stage, .rst-lb-toolbar-slot) { visibility: hidden !important; } html[data-theme]:not(#cp):not(#cq) body:has(.rst-media-lightbox.cp-mk-active) > .rst-pin-toolbar { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox > .cp-mk-panel { position: absolute; inset: 74px 96px 92px; z-index: 6; display: grid; justify-items: center; align-content: start; gap: 12px; overflow-y: auto; overscroll-behavior: contain; } html[data-theme]:not(#cp):not(#cq) body .cp-mk-panel[hidden] { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox > .cp-mk-panel .cp-pv-stage { padding: 0; background: transparent; width: 100%; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox > .cp-mk-panel .pv { max-width: 380px; box-shadow: 0 30px 70px -24px rgba(0,0,0,.85); } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox > .cp-mk-panel :is(.pv-story, .pv-tt) { max-width: 300px; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox > .cp-mk-panel .pv-yt { max-width: 520px; } html[data-theme]:not(#cp):not(#cq) body .cp-mk-fit { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 3px; font: 500 12.5px/1.3 var(--cp-font); } html[data-theme]:not(#cp):not(#cq) body .cp-mk-fit:empty { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mk-fit svg { margin: 0; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-mk-fit.is-ok { background: rgba(63,185,132,.14); color: #3FB984; } html[data-theme]:not(#cp):not(#cq) body .cp-mk-fit.is-warn { background: rgba(224,165,58,.14); color: #E0A53A; } /* Detail-Dialog: Leiste über dem Bild im CRM-Design, Fläche statt Original */ html[data-theme]:not(#cp):not(#cq) body .cp-mk.is-inline { flex-wrap: wrap; margin: 12px 0 8px; background: var(--cp-surface-2); border: 1px solid var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .cp-mk.is-inline .cp-mk-l { color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-mk.is-inline button { color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-mk.is-inline button:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-mk.is-inline button.active { background: var(--cp-rust); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-mk-panel.is-inline { display: grid; justify-items: center; gap: 10px; padding: 16px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 4%, var(--cp-surface-2)); } html[data-theme]:not(#cp):not(#cq) body .cp-mk-panel.is-inline .cp-pv-stage { padding: 0; background: transparent; width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-mk-active .rst-media-detail-preview { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-mk-active .rst-media-detail-modal .rst-pin-toolbar { display: none !important; } @media (max-width: 820px) { html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox > .cp-mk { top: auto; bottom: 86px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); overflow-x: auto; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox > .cp-mk .cp-mk-l { display: none; } html[data-theme]:not(#cp):not(#cq) body .rst-media-lightbox > .cp-mk-panel { inset: 64px 12px 140px; } html[data-theme]:not(#cp):not(#cq) body .cp-mk.is-inline button span { display: none; } } /* Story-Vorschau (9:16) */ html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-story { --pv-bg: #000; --pv-fg: #fff; --pv-sub: rgba(255,255,255,.8); --pv-line: #262626; --pv-link: #fff; max-width: 260px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-story .pv-media::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; background: linear-gradient(rgba(0,0,0,.55), transparent); z-index: 1; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-story .pv-media::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-top { position: absolute; inset: 8px 8px auto; z-index: 2; display: grid; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-top > i { display: block; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff 35%, rgba(255,255,255,.35) 35%); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-who { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 12.5px; text-shadow: 0 1px 2px rgba(0,0,0,.5); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-who .pv-ava { width: 28px; height: 28px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-who b { color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-who span { opacity: .85; font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-cap { position: absolute; left: 12px; right: 12px; bottom: 96px; z-index: 2; color: #fff; font-size: 13px; line-height: 1.35; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-cap .pv-more { color: #fff; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-bottom { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: grid; justify-items: center; gap: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff; color: #111; font-size: 12.5px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-msg { display: flex; align-items: center; gap: 10px; width: 100%; color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-pv-stage .pv-st-msg span { flex: 1; padding: 8px 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; font-size: 12px; opacity: .9; } html[data-theme]:not(#cp):not(#cq) body .rst-media-detail-modal .cp-mk.is-inline { margin: 12px 16px 8px; } /* --------------------------------------------------------------------------- v5.128.0 · Asset-Bibliothek neu: Kennzahlen, Suche/Filter, Markenprofil, Karten (Datei/Farbe/Schrift), Liste, Mehrfachauswahl, Hochladen, Ansicht (Lightbox) und Editor im Content-Agency-Design --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .cp-al { position: relative; padding: 20px 22px 26px !important; --ck1: color-mix(in srgb, var(--cp-text) 3%, var(--cp-surface)); --ck2: color-mix(in srgb, var(--cp-text) 8%, var(--cp-surface)); } html[data-theme]:not(#cp):not(#cq) body .rst-inline-page.cp-ph-on .cp-al > .rst-assets-header { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al > .rst-assets-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 14px; border: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al > .rst-assets-header h1 { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al .rst-assets-filters { display: flex; gap: 8px; flex: none; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-assets-upload-btn, .rst-assets-add-btn) { display: inline-flex !important; align-items: center; gap: 7px; } html[data-theme]:not(#cp):not(#cq) body :is(.rst-assets-upload-btn, .rst-assets-add-btn) svg { margin: 0; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al .rst-assets-body { padding: 0 !important; overflow: visible; max-height: none; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-al, .cp-al-lb, .cp-al-ed-modal) .is-checker { background: repeating-conic-gradient(var(--ck1) 0 25%, var(--ck2) 0 50%) 0 0 / 16px 16px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-modal { --ck1: color-mix(in srgb, var(--cp-text) 3%, var(--cp-surface)); --ck2: color-mix(in srgb, var(--cp-text) 8%, var(--cp-surface)); } /* Kennzahlen */ html[data-theme]:not(#cp):not(#cq) body .cp-al-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-k .ta-ki { color: var(--fc); background: color-mix(in srgb, var(--fc) 13%, transparent); } html[data-theme="dark"]:not(#cp):not(#cq) body .cp-al-k .ta-ki { color: color-mix(in srgb, var(--fc) 72%, #fff); background: color-mix(in srgb, var(--fc) 18%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-al-k .ta-ki svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-k .cp-al-kt { display: grid; gap: 3px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-k .cp-al-kt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-k.is-active { border-color: var(--cp-rust-line); box-shadow: inset 0 -2px 0 var(--cp-rust); } /* Werkzeugzeile */ html[data-theme]:not(#cp):not(#cq) body .cp-al-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-bar .rst-assets-client { flex: none; width: 260px !important; max-width: 100%; min-height: 40px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-q { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 200px; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-q > svg { position: absolute; left: 12px; z-index: 1; margin: 0; color: var(--cp-dim); pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-q:focus-within > svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-q input { width: 100%; min-height: 40px; padding: 9px 40px 9px 38px !important; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-q kbd { position: absolute; right: 10px; padding: 1px 7px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-dim); font: 500 11px/1.5 var(--cp-font); box-shadow: none; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-q input:focus ~ kbd, html[data-theme]:not(#cp):not(#cq) body .cp-al-q input:not(:placeholder-shown) ~ kbd { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tools { display: flex; align-items: center; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sort { position: relative; display: flex; align-items: center; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sort > svg { position: absolute; left: 11px; z-index: 1; margin: 0; color: var(--cp-dim); pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sort select { width: 190px; min-height: 40px; padding-left: 34px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-views { display: inline-flex; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-al-views button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; background: transparent; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-al-views button + button { border-left: 1px solid var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .cp-al-views button:hover { color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-al-views button.active { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-views svg { margin: 0; } /* Arten-Filter */ html[data-theme]:not(#cp):not(#cq) body .cp-al-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--cp-line-2); border-radius: 999px; background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); cursor: pointer; transition: border-color var(--cp-t, .15s), background var(--cp-t, .15s), color var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip svg { margin: 0; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip em { color: var(--cp-dim); font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip.active { border-color: var(--cp-rust); background: var(--cp-rust); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip.active :is(svg, em) { color: rgba(255,255,255,.85); } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip.is-fav.active { border-color: rgba(224,165,58,.55); background: rgba(224,165,58,.14); color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip.is-fav.active :is(svg, em) { color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip.is-fav.active svg path { fill: currentColor; } html[data-theme]:not(#cp):not(#cq) body .cp-al-chips-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--cp-line-2); } /* Knöpfe */ html[data-theme]:not(#cp):not(#cq) body .cp-al-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); white-space: nowrap; text-decoration: none !important; cursor: pointer; transition: border-color var(--cp-t, .15s), background var(--cp-t, .15s), color var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-al-btn svg { margin: 0; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-btn:hover { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-btn.is-primary { border-color: var(--cp-rust); background: var(--cp-rust); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-al-btn.is-primary:hover { border-color: var(--cp-rust-hi); background: var(--cp-rust-hi); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-al-btn.is-danger { border-color: color-mix(in srgb, var(--cp-danger) 40%, transparent); background: transparent; color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-al-btn.is-danger:hover { background: color-mix(in srgb, var(--cp-danger) 10%, transparent); color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-al-btn.is-ghost { border-color: transparent; background: transparent; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-al-btn.is-ghost:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-al-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-al-x:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-al-x[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-x svg { margin: 0; } /* Auswahlleiste */ html[data-theme]:not(#cp):not(#cq) body .cp-al-sel { position: fixed; left: 50%; bottom: 22px; z-index: 1040; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 8px 8px 8px 16px; border: 1px solid var(--cp-rust-line); border-radius: 3px; background: color-mix(in srgb, var(--cp-rust) 8%, var(--cp-surface-2)); box-shadow: var(--cp-shadow-pop); transform: translateX(-50%); animation: cpAlUp .18s ease; } @keyframes cpAlUp { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } html[data-theme]:not(#cp):not(#cq) body:has(.cp-al.is-selecting) .cp-al-toast { bottom: 90px; } html[data-theme]:not(#cp):not(#cq) body .cp-al.is-selecting { padding-bottom: 90px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sel[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sel > b { color: var(--cp-strong); font-size: 13px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sel-sp { flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sel-cli { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cp-muted); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sel-cli select { width: 220px; min-height: 34px; } /* Ablegen (ganze Karte) */ html[data-theme]:not(#cp):not(#cq) body .cp-al .rst-assets-dropzone { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; margin: 0; padding: 0; border: 2px dashed var(--cp-rust-hi); border-radius: 3px; background: color-mix(in srgb, var(--cp-surface) 90%, transparent); backdrop-filter: blur(3px); box-shadow: none; pointer-events: none; text-align: center; } html[data-theme]:not(#cp):not(#cq) body .cp-al .rst-assets-dropzone[hidden] { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al .rst-assets-dropzone svg { display: block; width: 34px; height: 34px; margin: 0 auto 10px; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al .rst-assets-dz-head { color: var(--cp-strong) !important; font-size: 16px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-al .rst-assets-dz-sub { margin-top: 4px; color: var(--cp-muted) !important; font-size: 13px; } /* Hochladen */ html[data-theme]:not(#cp):not(#cq) body .cp-al-up { margin: 0 0 18px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up-h { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-al-up-h > svg { margin: 0; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-up-h b { flex: 1; color: var(--cp-strong); font-size: 13px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up-n { color: var(--cp-dim); font-size: 12px; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up ul { max-height: 260px; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up li { display: flex; align-items: center; gap: 12px; padding: 7px 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up li > div { display: grid; flex: 1; gap: 4px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up li b { overflow: hidden; color: var(--cp-text); font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up li small { color: var(--cp-dim); font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up-bar { display: block; height: 4px; border-radius: 999px; background: var(--cp-line); overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up-bar i { display: block; width: 0; height: 100%; background: var(--cp-rust); transition: width .2s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up li.is-ok .cp-al-up-bar i { background: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .cp-al-up li.is-err .cp-al-up-bar i { width: 100% !important; background: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-al-up li.is-err small { color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-al-up-st { display: grid; flex: none; place-items: center; width: 18px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up-st svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up li.is-ok .cp-al-up-st { color: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .cp-al-up li.is-err .cp-al-up-st { color: var(--cp-danger); } /* Markenprofil */ html[data-theme]:not(#cp):not(#cq) body .cp-al-kit { margin: 0 0 24px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface); overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--cp-line); background: linear-gradient(90deg, color-mix(in srgb, var(--cp-rust) 7%, transparent), transparent 60%); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-h > svg { display: block; flex: none; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-h > div:not(.cp-al-kit-acts) { display: grid; gap: 3px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-h small { color: var(--cp-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-h h2 { margin: 0; color: var(--cp-strong) !important; font: 600 15px/1.3 var(--cp-font) !important; letter-spacing: 0 !important; text-transform: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-acts { display: flex; gap: 6px; margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-g { display: grid; grid-template-columns: 260px minmax(0, 1.4fr) minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-g > div { min-width: 0; padding: 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-g > div + div { border-left: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-g h3 { margin: 0 0 10px; color: var(--cp-muted); font: 600 10.5px/1 var(--cp-font); letter-spacing: .12em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-logo { display: grid; align-content: start; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-logo > span { color: var(--cp-muted); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-logo a { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-lb { display: grid; place-items: center; width: 100%; height: 140px; padding: 14px; border: 1px solid var(--cp-line); border-radius: 3px; cursor: zoom-in; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-lb img { max-width: 100%; max-height: 100%; object-fit: contain; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-sw button { display: grid; grid-template-rows: 46px auto auto; padding: 0; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); text-align: left; cursor: copy; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-sw button:hover { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-sw i { display: block; background: var(--sw); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-sw b { padding: 6px 8px 0; overflow: hidden; color: var(--cp-strong); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-sw b:empty { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-sw span { padding: 3px 8px 7px; color: var(--cp-muted); font: 500 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-fonts { display: grid; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-fonts button { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-text); text-align: left; cursor: zoom-in; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-fonts button:hover { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-fonts span { width: 44px; color: var(--cp-strong); font-size: 26px; line-height: 1; text-align: center; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-fonts b { font: 500 13px/1.3 var(--cp-font); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 10px; border: 1px dashed var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-muted); font: 500 12.5px/1.2 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-add:hover { border-color: var(--cp-rust-hi); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-add svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-logo .cp-al-kit-add { height: 140px; } /* Abschnitte + Raster */ html[data-theme]:not(#cp):not(#cq) body .cp-al-sec { margin: 0 0 26px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sec > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--cp-strong) !important; font: 600 13.5px/1 var(--cp-font) !important; letter-spacing: 0 !important; text-transform: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sec > h2 em { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-muted); font-size: 11px; font-style: normal; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-grid.is-colors { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } html[data-theme]:not(#cp):not(#cq) body .cp-al-grid.is-fonts { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* Karte */ html[data-theme]:not(#cp):not(#cq) body .cp-al-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface); overflow: hidden; transition: border-color var(--cp-t, .15s), box-shadow var(--cp-t, .15s), transform var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-al-card:hover { border-color: var(--cp-line-2); box-shadow: 0 14px 30px -18px rgba(0,0,0,.55); transform: translateY(-1px); } html[data-theme]:not(#cp):not(#cq) body .cp-al-card.is-sel { border-color: var(--cp-rust-hi); box-shadow: 0 0 0 1px var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-th { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--cp-line); background: var(--cp-surface-2); cursor: zoom-in; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-al-th img { display: block; width: 100%; height: 100%; object-fit: contain; } html[data-theme]:not(#cp):not(#cq) body .cp-al-th.is-checker img { padding: 16px; box-sizing: border-box; object-fit: contain; } html[data-theme]:not(#cp):not(#cq) body .cp-al-fb { display: grid; place-items: center; gap: 8px; max-width: 100%; padding: 0 12px; box-sizing: border-box; } html[data-theme]:not(#cp):not(#cq) body .cp-al-fb small { max-width: 100%; overflow: hidden; color: var(--cp-muted); font-size: 11.5px; text-align: center; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-al, .cp-al-lb, .cp-al-ed-modal) .is-checker.is-ck-light { --ck1: #FFFFFF; --ck2: #ECECE8; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-al, .cp-al-lb, .cp-al-ed-modal) .is-checker.is-ck-dark { --ck1: #1C2029; --ck2: #262B35; } html[data-theme]:not(#cp):not(#cq) body .cp-al-fb[hidden], html[data-theme]:not(#cp):not(#cq) body .cp-al img[hidden] { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-fmt { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 2px 6px; border-radius: 3px; background: rgba(10,12,17,.72); color: #F2F2F0; font: 600 10px/1.35 var(--cp-font); letter-spacing: .06em; } html[data-theme]:not(#cp):not(#cq) body .cp-al-play { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; background: rgba(10,12,17,.62); } html[data-theme]:not(#cp):not(#cq) body .cp-al-play::before { content: ""; width: 14px; height: 16px; margin-left: 3px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ck { position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1.5px solid rgba(255,255,255,.85); border-radius: 3px; background: rgba(10,12,17,.45); color: transparent; cursor: pointer; opacity: 0; transition: opacity .12s ease, background .12s ease; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-al-card:hover, .cp-al.is-selecting) .cp-al-ck, html[data-theme]:not(#cp):not(#cq) body .cp-al-ck:is(.is-on, :focus-visible) { opacity: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ck.is-on { border-color: var(--cp-rust); background: var(--cp-rust); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ck svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-fav { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 3px; background: rgba(10,12,17,.5); color: #fff; cursor: pointer; opacity: 0; transition: opacity .12s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-al-card:hover .cp-al-fav, html[data-theme]:not(#cp):not(#cq) body .cp-al-fav:is(.is-on, :focus-visible) { opacity: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-al-fav.is-on { color: #F2B544; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-al-fav.is-on, .cp-al-star, .cp-al-tacts .is-on, .cp-al-lb-btn.is-on) svg path { fill: currentColor; } html[data-theme]:not(#cp):not(#cq) body .cp-al-fav svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-hov { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 2px; padding: 3px; border-radius: 3px; background: rgba(10,12,17,.8); backdrop-filter: blur(6px); opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-al-card:is(:hover, :focus-within) .cp-al-hov { opacity: 1; transform: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-hov button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 2px; background: transparent; color: #E4E5E4; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-al-hov button:hover { background: rgba(232,85,42,.28); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .cp-al-hov button.is-del:hover { background: rgba(229,72,77,.34); } html[data-theme]:not(#cp):not(#cq) body .cp-al-hov svg { margin: 0; } @media (hover: none) { html[data-theme]:not(#cp):not(#cq) body :is(.cp-al-hov, .cp-al-ck, .cp-al-fav) { opacity: 1; transform: none; } } html[data-theme]:not(#cp):not(#cq) body .cp-al-cb { display: grid; gap: 6px; min-width: 0; padding: 10px 12px 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cb > b { overflow: hidden; color: var(--cp-strong); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-meta { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--cp-muted); font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-info { overflow: hidden; color: var(--cp-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cli { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cli svg { display: block; flex: none; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cli > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cli.is-gen { color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-al-cli.is-gen svg { width: 14px; height: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tags { display: flex; flex-wrap: wrap; gap: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tags span { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-muted); font-size: 11px; } /* Farbkarte */ html[data-theme]:not(#cp):not(#cq) body .cp-al-sw { position: relative; height: 120px; border-bottom: 1px solid var(--cp-line); background: var(--sw); cursor: zoom-in; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sw-hex { position: absolute; left: 12px; bottom: 11px; color: var(--on); font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; opacity: .92; transition: opacity .14s; } html[data-theme]:not(#cp):not(#cq) body .cp-al-card:hover .cp-al-sw-hex { opacity: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-codes button { display: grid; gap: 2px; min-width: 0; padding: 6px 8px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); text-align: left; cursor: copy; } html[data-theme]:not(#cp):not(#cq) body .cp-al-codes button:hover { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-al-codes small { color: var(--cp-dim); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; } html[data-theme]:not(#cp):not(#cq) body .cp-al-codes span { overflow: hidden; color: var(--cp-text); font: 500 11.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-con { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--cp-muted); font-size: 11px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-con em { color: var(--cp-success); font-style: normal; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-al-con .is-bad em { color: var(--cp-dim); } /* Schriftkarte */ html[data-theme]:not(#cp):not(#cq) body .cp-al-spec { position: relative; display: grid; align-content: center; gap: 6px; height: 130px; padding: 14px 16px; border-bottom: 1px solid var(--cp-line); background: var(--cp-surface-2); color: var(--cp-strong); cursor: zoom-in; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-al-spec-aa { font-size: 52px; font-weight: 500; line-height: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-al-spec-s { overflow: hidden; color: var(--cp-muted); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-spec .cp-al-fmt { top: 10px; right: 44px; bottom: auto; left: auto; } /* Liste */ html[data-theme]:not(#cp):not(#cq) body .cp-al-table { border: 1px solid var(--cp-line); border-radius: 3px; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr { display: grid; grid-template-columns: 34px minmax(0, 2.6fr) 128px minmax(0, 1.2fr) 120px 104px 178px; align-items: center; gap: 0 12px; padding: 8px 12px; border-top: 1px solid var(--cp-line); color: var(--cp-text); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr:first-child { border-top: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr.is-head { padding-top: 9px; padding-bottom: 9px; background: var(--cp-surface-2); color: var(--cp-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr:not(.is-head):hover { background: var(--cp-hover); } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr.is-sel { background: color-mix(in srgb, var(--cp-rust) 7%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr > span { min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr .cp-al-ck { position: static; border-color: var(--cp-line-2); background: var(--cp-surface); opacity: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr .cp-al-ck.is-on { border-color: var(--cp-rust); background: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr .cp-al-cli { max-width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tn { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: zoom-in; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tn > span:last-child { display: grid; gap: 2px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tn b { overflow: hidden; color: var(--cp-strong); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tn small { overflow: hidden; color: var(--cp-dim); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-al-tsw, .cp-al-tfont, .cp-al-tth) { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 3px; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tsw { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-text) 12%, transparent); } html[data-theme]:not(#cp):not(#cq) body :is(.cp-al-tfont, .cp-al-tth) { background: var(--cp-surface-2); color: var(--cp-strong); font-size: 20px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tth img { width: 100%; height: 100%; object-fit: cover; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tth.is-checker img { padding: 4px; box-sizing: border-box; object-fit: contain; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tacts { display: flex; justify-content: flex-end; gap: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tacts button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tacts button:hover { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-tacts button.is-del:hover { background: color-mix(in srgb, var(--cp-danger) 10%, transparent); color: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body .cp-al-tacts button.is-on { color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-al-tacts svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-star { display: inline-flex; color: var(--cp-warning); vertical-align: -1px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-star svg { margin: 0; } /* Leer + Laden */ html[data-theme]:not(#cp):not(#cq) body .cp-al-empty { display: grid; justify-items: center; gap: 10px; padding: 52px 20px; border: 1px dashed var(--cp-line-2); border-radius: 3px; color: var(--cp-muted); text-align: center; } html[data-theme]:not(#cp):not(#cq) body .cp-al-empty > svg { margin: 0; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-empty b { color: var(--cp-strong); font-size: 15px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-empty > span { max-width: 480px; font-size: 13px; line-height: 1.5; } html[data-theme]:not(#cp):not(#cq) body .cp-al-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-skel i { display: block; height: 214px; border-radius: 3px; background: linear-gradient(90deg, var(--cp-surface-2), color-mix(in srgb, var(--cp-text) 5%, var(--cp-surface-2)), var(--cp-surface-2)); background-size: 200% 100%; animation: taSk 1.2s linear infinite; } /* Hinweis unten */ html[data-theme]:not(#cp):not(#cq) body .cp-al-toast { position: fixed; left: 50%; bottom: 28px; z-index: 100030; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 10px 14px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-3); color: var(--cp-strong); font: 500 13px/1.35 var(--cp-font); box-shadow: var(--cp-shadow-pop); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-al-toast.is-on { opacity: 1; transform: translate(-50%, 0); } html[data-theme]:not(#cp):not(#cq) body .cp-al-toast svg { flex: none; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-toast.is-ok svg { color: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body .cp-al-toast.is-err svg { color: var(--cp-danger); } /* Rückfrage (über der Ansicht) */ html[data-theme]:not(#cp):not(#cq) body .cp-camp-modal.cp-al-ask { z-index: 100020; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ask .cp-camp-card { width: min(480px, 100%); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ask .cp-pe-head { padding-bottom: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ask .cp-pe-sub { line-height: 1.5; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ask .cp-pe-foot { margin-top: 14px !important; } /* Ansicht (Lightbox) */ html[data-theme]:not(#cp):not(#cq) body .cp-al-lb { --ck1: #1C2029; --ck2: #252A34; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb .cp-al-stage { width: min(92vw, 1200px); max-height: calc(100vh - 190px); } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb .cp-al-stage > * { max-height: calc(100vh - 190px); } html[data-theme]:not(#cp):not(#cq) body .cp-al-vimg { display: grid; place-items: center; max-width: 100%; border-radius: 3px; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vimg.is-checker { padding: 24px; box-shadow: 0 30px 80px -24px rgba(0,0,0,.85) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb .cp-al-vimg img { max-height: calc(100vh - 200px) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb .cp-al-vimg.is-checker img { max-height: calc(100vh - 250px) !important; box-shadow: none !important; border-radius: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb .cp-al-vpdf { width: min(92vw, 1100px) !important; height: calc(100vh - 190px) !important; max-height: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor { display: grid; gap: 10px; width: min(580px, 92vw); box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-sw { display: flex; justify-content: space-between; align-items: flex-end; height: 260px; padding: 20px 22px; border-radius: 3px; background: var(--sw); color: var(--on); box-shadow: 0 30px 80px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06); } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-sw b { font-size: 18px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-sw span { font-size: 46px; font-weight: 600; line-height: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-codes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-codes button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 3px; background: rgba(16,19,26,.95); color: #E4E5E4; text-align: left; cursor: copy; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-codes button:hover { border-color: rgba(232,85,42,.55); } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-codes small { grid-column: 1; color: #9BA2AA; font-size: 10px; font-weight: 600; letter-spacing: .12em; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-codes span { grid-column: 1; overflow: hidden; font: 500 13px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-codes svg { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: #9BA2AA; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-con { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-con > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 3px; font-size: 13px; box-shadow: 0 0 0 1px rgba(255,255,255,.06); } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-con b { font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-con span { font-variant-numeric: tabular-nums; opacity: .92; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vfont { display: grid; gap: 14px; width: min(900px, 92vw); padding: 26px 28px; border-radius: 3px; background: #F6F6F3; color: #111318; overflow: auto; box-shadow: 0 30px 80px -24px rgba(0,0,0,.85) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vfont input.cp-al-vfont-in { width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid #D9D9D4 !important; border-radius: 3px; background: #fff !important; color: #111318 !important; font: 400 13.5px/1.3 var(--cp-font) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vfont-s { line-height: 1.15; overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vfont-s[data-s="64"] { font-size: 60px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vfont-s[data-s="36"] { font-size: 34px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vfont-s[data-s="20"] { font-size: 20px; line-height: 1.4; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vfont-abc { padding-top: 14px; border-top: 1px solid #DDDDD8; color: #30333A; font-size: 22px; line-height: 1.5; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vfont-note { display: flex; align-items: center; gap: 6px; margin: 0; color: #8A6A1F; font: 12.5px/1.4 var(--cp-font); } html[data-theme]:not(#cp):not(#cq) body .cp-al-vfont-note svg { flex: none; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcard { display: grid; justify-items: center; gap: 10px; width: min(460px, 92vw); padding: 30px 28px; border: 1px solid rgba(255,255,255,.1); border-radius: 3px; background: rgba(16,19,26,.96); color: #E4E5E4; text-align: center; box-shadow: 0 30px 80px -24px rgba(0,0,0,.85) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcard img { max-width: 100%; max-height: 260px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcard b { color: #F6F6F4; font-size: 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcard > span:not(.cp-al-fb) { color: #9BA2AA; font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcard p { margin: 0; color: #BFC4CB; font-size: 13px; line-height: 1.5; white-space: pre-wrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcard .cp-al-btn { margin-top: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb .cp-al-lb-meta { max-width: min(94vw, 920px) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb .cp-lb-txt { flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb .cp-lb-txt .cp-al-star { color: #F2B544; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb-acts { display: flex; flex: none; gap: 2px; margin-left: auto; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.12); } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #BFC4CB !important; text-decoration: none !important; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb-btn:hover { background: rgba(232,85,42,.18); color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb-btn.is-del:hover { background: rgba(229,72,77,.25); } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb-btn.is-on { color: #F2B544 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb-btn svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb-sw { display: block; width: 34px; height: 34px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); } /* Editor */ html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-modal .cp-camp-card.cp-al-ed { width: min(980px, 100%); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-g { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 20px; padding: 16px 28px 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-main { min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-types button { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 10px 6px 7px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-text); font: 500 12.5px/1.2 var(--cp-font); text-align: left; cursor: pointer; transition: border-color var(--cp-t, .15s), background var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-al-types button:hover { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-al-types button[aria-checked="true"] { border-color: var(--cp-rust-hi); background: var(--cp-rust-soft); color: var(--cp-strong); box-shadow: inset 0 0 0 1px var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body :is(.cp-al-ed-file, .cp-al-ed-color)[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-drop { display: grid; justify-items: center; gap: 4px; padding: 18px 16px; border: 1.5px dashed var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-muted); text-align: center; cursor: pointer; transition: border-color var(--cp-t, .15s), background var(--cp-t, .15s); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-drop svg { margin: 0 0 2px; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-drop b { color: var(--cp-strong); font-size: 13px; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-drop span { font-size: 12px; line-height: 1.4; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-drop:is(:hover, :focus-visible, .is-over) { border-color: var(--cp-rust-hi); background: var(--cp-rust-soft); outline: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-drop.is-busy { opacity: .6; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-prog { display: grid; gap: 4px; margin-top: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-prog[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-prog b { overflow: hidden; color: var(--cp-text); font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-prog small { color: var(--cp-dim); font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-cin { display: flex; align-items: center; gap: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-cin input[type="color"] { flex: none; width: 48px !important; height: 40px !important; min-height: 40px; padding: 3px !important; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-cin .cp-fi { flex: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-cin input[name="color_hex"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-fav { position: relative; display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; color: var(--cp-text); font-size: 13px; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-fav input { position: absolute; opacity: 0; pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--cp-dim); transition: background .15s ease, opacity .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-fav input:checked + .cp-al-ed-sw { background: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-fav input:checked + .cp-al-ed-sw::after { transform: translateX(14px); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-fav input:focus-visible + .cp-al-ed-sw { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-fav > span:last-child svg { margin: 0 3px 0 0; color: var(--cp-warning); vertical-align: -2px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-side { position: sticky; top: 0; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-prev { display: grid; gap: 10px; padding: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pi { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface); overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pi img { width: 100%; height: 100%; object-fit: contain; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pi.is-checker img { padding: 12px; box-sizing: border-box; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pc { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; height: 150px; padding: 14px; border-radius: 3px; background: var(--sw); color: var(--on); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pc b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pc span { font-size: 30px; font-weight: 600; line-height: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-dl dt { align-self: center; color: var(--cp-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-dl dd { margin: 0; color: var(--cp-text); font: 500 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pf { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pf span { font-size: 54px; line-height: 1; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pf p { margin: 0; font-size: 17px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pf small { color: var(--cp-muted); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pe { display: grid; justify-items: center; gap: 8px; padding: 26px 12px; color: var(--cp-muted); font-size: 12.5px; text-align: center; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pm { display: grid; gap: 2px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pm b { overflow: hidden; color: var(--cp-strong); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-pm span { color: var(--cp-muted); font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-modal .cp-camp-msg { margin: 0 28px 8px; } /* schmale Bildschirme */ @media (max-width: 1200px) { html[data-theme]:not(#cp):not(#cq) body .cp-al-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1000px) { html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-g { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-g > div + div { border-left: 0; border-top: 1px solid var(--cp-line); } html[data-theme]:not(#cp):not(#cq) body .cp-al-table:not(.is-client) .cp-al-tr { grid-template-columns: 34px minmax(0, 1fr) 130px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-table:not(.is-client) .cp-al-tr > span:nth-child(n+3):nth-child(-n+6) { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-table.is-client .cp-al-tr { grid-template-columns: minmax(0, 1fr) 120px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-table.is-client .cp-al-tr > span:nth-child(n+2):nth-child(-n+4) { display: none; } } @media (max-width: 860px) { html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-g { grid-template-columns: minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-side { position: static; } } @media (max-width: 700px) { html[data-theme]:not(#cp):not(#cq) body .cp-al { padding: 14px 12px 20px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme]:not(#cp):not(#cq) body .cp-al-bar .rst-assets-client { width: 100% !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-grid, html[data-theme]:not(#cp):not(#cq) body .cp-al-grid:is(.is-colors, .is-fonts) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-g { padding: 14px 16px 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb .cp-al-lb-meta { flex-wrap: wrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-lb-acts { margin-left: 0; padding-left: 0; border-left: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-vcolor-codes { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------------- v5.129.0 · Asset-Bibliothek im Kundenportal (nur ansehen/herunterladen) + Sichtbarkeit „Im Kundenportal zeigen“ im Team --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .cp-al-hov a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 2px; color: #E4E5E4 !important; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-hov a:hover { background: rgba(232,85,42,.28); color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-hov a svg, html[data-theme]:not(#cp):not(#cq) body .cp-al-tacts a svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tacts a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; color: var(--cp-muted) !important; text-decoration: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tacts a:hover { background: var(--cp-rust-soft); color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-fav.is-static { opacity: 1; cursor: default; } html[data-theme]:not(#cp):not(#cq) body .cp-al-fav.is-static svg path { fill: currentColor; } html[data-theme]:not(#cp):not(#cq) body .cp-al-table.is-client .cp-al-tr { grid-template-columns: minmax(0, 2.6fr) 128px 150px 120px 170px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-int { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-left: 4px; padding: 1px 7px 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--cp-warning) 12%, transparent); color: var(--cp-warning); font-size: 10.5px; font-style: normal; font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-al-int svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr .cp-al-int { padding: 2px 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-portal { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid var(--cp-line-2); border-radius: 3px; color: var(--cp-muted); font-size: 12px; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-portal svg { margin: 0; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-none { margin: 0; padding: 14px 12px; border: 1px dashed var(--cp-line-2); border-radius: 3px; color: var(--cp-dim); font-size: 12.5px; text-align: center; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-logo .cp-al-kit-none { display: grid; place-items: center; height: 140px; box-sizing: border-box; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-fav.is-portal > span:last-child svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-fav.is-portal.is-off { cursor: not-allowed; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-fav input:disabled + .cp-al-ed-sw { opacity: .45; } html[data-theme]:not(#cp):not(#cq) body .cp-al-ed-ph { color: var(--cp-dim); font-style: normal; } html[data-theme]:not(#cp):not(#cq) body .rst-inline-page-assets > .cp-ph { margin-bottom: 14px !important; } /* --------------------------------------------------------------------------- v5.130.0 · Asset-Bibliothek: Kunden laden im Portal hoch (Dialog), Zeichen „vom Kunden / von Ihnen“, Filter „Vom Kunden“ --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .cp-al-cu { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-left: 4px; padding: 1px 7px 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--cp-info) 11%, transparent); color: var(--cp-info); font-size: 10.5px; font-style: normal; font-weight: 600; vertical-align: 1px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cu svg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr i.cp-al-cu { padding: 2px 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip.is-cu.active { border-color: color-mix(in srgb, var(--cp-info) 55%, transparent); background: color-mix(in srgb, var(--cp-info) 11%, transparent); color: var(--cp-info); } html[data-theme]:not(#cp):not(#cq) body .cp-al-chip.is-cu.active :is(svg, em) { color: var(--cp-info); } html[data-theme]:not(#cp):not(#cq) body .cp-ph-a .cp-al-cu-open { height: 36px; padding: 0 14px; font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cu-modal .cp-camp-card.cp-al-cud { width: min(660px, 100%); } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-b { display: grid; gap: 14px; padding: 16px 28px 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-b .cp-pe-f { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-b textarea { width: 100%; min-height: 64px; box-sizing: border-box; padding: 9px 12px 9px 38px; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-types { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-types button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px 0 7px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-text); font: 500 12.5px/1 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-types button > svg { margin: 0 2px 0 4px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-types button:hover { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-types button[aria-checked="true"] { border-color: var(--cp-rust-hi); background: var(--cp-rust-soft); color: var(--cp-strong); box-shadow: inset 0 0 0 1px var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-types button[aria-checked="true"] > svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-al-up.is-dlg { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up.is-dlg ul { max-height: 230px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up.is-dlg .cp-al-up-st { width: 30px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up.is-dlg .cp-al-x { width: 26px; height: 26px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-sum { color: var(--cp-muted); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cud .rst-post-btn-primary svg { margin: 0 2px 0 0; vertical-align: -2px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-cu-modal .cp-camp-msg { margin: 0 28px 8px; } @media (max-width: 640px) { html[data-theme]:not(#cp):not(#cq) body .cp-al-cud-b { padding: 14px 16px 4px; } } /* --------------------------------------------------------------------------- v5.131.0 · Asset-Bibliothek nach Audit: Liste per Tastatur, Hinweise, Ladezustand, Schließen ohne Nachlauf, Mobil, Sammelaktionen --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .cp-al-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } html[data-theme]:not(#cp):not(#cq) body button.cp-al-tn { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: zoom-in; } html[data-theme]:not(#cp):not(#cq) body button.cp-al-tn:focus-visible { outline: 2px solid var(--cp-rust-hi); outline-offset: 2px; border-radius: 3px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-link { padding: 0; border: 0; background: none; color: var(--cp-rust-hi); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-al-more { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 9px 12px; border-radius: 3px; background: color-mix(in srgb, var(--cp-warning) 10%, transparent); color: var(--cp-text); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-al-more svg { flex: none; margin: 0; color: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body .cp-al-hint { color: var(--cp-dim); font-style: normal; font-weight: 400; } html[data-theme]:not(#cp):not(#cq) body .cp-al.is-loading .rst-assets-body { opacity: .55; pointer-events: none; transition: opacity .15s ease; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-camp-modal, .cp-al-lb).is-closing { pointer-events: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sel.is-busy { pointer-events: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-spin { flex: none; width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--cp-rust) 30%, transparent); border-top-color: var(--cp-rust); border-radius: 50%; animation: cpAlSpin .8s linear infinite; } @keyframes cpAlSpin { to { transform: rotate(360deg); } } html[data-theme]:not(#cp):not(#cq) body .cp-al-up-h .cp-al-btn { height: 30px; margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-al-up-h .cp-al-btn + .cp-al-up-n { margin-left: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-al-kit-lb .cp-al-fb[hidden] { display: none; } @media (hover: none) { /* Touch: keine überlagerten Werkzeuge auf schmalen Karten – Tippen öffnet die Ansicht mit allen Aktionen */ html[data-theme]:not(#cp):not(#cq) body .cp-al-hov { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-q kbd { display: none; } } @media (max-width: 700px) { html[data-theme]:not(#cp):not(#cq) body .cp-al-sel { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; transform: none; animation: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sel-cli { flex: 1 1 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sel-cli select { flex: 1; width: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-al-sel-sp { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-al.is-selecting { padding-bottom: 240px !important; } html[data-theme]:not(#cp):not(#cq) body:has(.cp-al.is-selecting) .cp-al-toast { bottom: 250px; } } /* v5.131.0: Hauptaktion im Kopf ist „Dateien hochladen“ – „Neues Asset“ als Zweitknopf (die alte Rost-Regel galt für den Knopf überall) */ html[data-theme]:not(#cp):not(#cq) body .rst-assets-add-btn:not(.cp-ph-primary) { background: var(--cp-surface-2) !important; border: 1px solid var(--cp-line-2) !important; color: var(--cp-text) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-assets-add-btn:not(.cp-ph-primary):hover { background: var(--cp-surface-2) !important; border-color: var(--cp-rust-line) !important; color: var(--cp-strong) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .rst-assets-add-btn:not(.cp-ph-primary) svg { color: currentColor !important; } html[data-theme]:not(#cp):not(#cq) body .cp-al-tr > span[role="cell"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ── v5.133.0 · Mediengestaltung: „Erneut zur Freigabe vorlegen“ im Editor ───────────────────────────── */ html[data-theme]:not(#cp):not(#cq) body .rst-media-resubmit { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--cp-line); border-radius: var(--cp-r, 3px); background: var(--cp-surface-2); } html[data-theme]:not(#cp):not(#cq) body .rst-media-overlay .rst-media-resubmit .rst-media-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cp-strong) !important; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .rst-media-resubmit .rst-media-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .rst-media-resubmit small { color: var(--cp-muted); font-size: 12px; line-height: 1.45; } /* ── v5.135.0 · Status und Abwesenheitsnotiz (user-status.js) – Punkte/Chips rund, alles andere 3 px ─────────── */ html[data-theme]:not(#cp):not(#cq) body [data-tone] { --us: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body [data-tone="danger"] { --us: var(--cp-danger); } html[data-theme]:not(#cp):not(#cq) body [data-tone="warning"] { --us: var(--cp-warning); } html[data-theme]:not(#cp):not(#cq) body [data-tone="info"] { --us: var(--cp-info); } html[data-theme]:not(#cp):not(#cq) body [data-tone="success"] { --us: var(--cp-success); } html[data-theme]:not(#cp):not(#cq) body #user-dropdown .avatar { position: relative; overflow: visible !important; } html[data-theme]:not(#cp):not(#cq) body .cp-us-dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--us); box-shadow: 0 0 0 2px var(--cp-surface, #fff); pointer-events: none; } html[data-theme]:not(#cp) body #js-rise-chat-wrapper .cp-person-av .cp-us-dot { top: 0; right: 0; bottom: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-us-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 4px 0 0; padding: 3px 9px 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--us) 13%, transparent); color: var(--cp-strong); font: 500 11.5px/1.3 var(--cp-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } html[data-theme]:not(#cp):not(#cq) body .cp-us-pill i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--us); } html[data-theme]:not(#cp):not(#cq) body .cp-us-pill em { font-style: normal; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-us-pill em::before { content: "·"; margin-right: 5px; } html[data-theme]:not(#cp):not(#cq) body .cp-chat-status .cp-us-pill { margin: 0 0 0 6px; padding: 1px 8px 1px 6px; font-size: 11px; } html[data-theme]:not(#cp):not(#cq) body .user-dropdown-menu .cp-us-li { border-bottom: 1px solid var(--cp-line); margin-bottom: 4px; padding-bottom: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-us-cur { display: flex !important; align-items: center; gap: 10px; white-space: normal !important; } html[data-theme]:not(#cp):not(#cq) body .cp-us-cur-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--us); } html[data-theme]:not(#cp):not(#cq) body .cp-us-cur-t { display: grid; gap: 1px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-us-cur-t b { font-weight: 600; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-us-cur-t small { color: var(--cp-muted); font-size: 11.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-us-modal { z-index: 100015; } html[data-theme]:not(#cp):not(#cq) body .cp-us-modal .cp-camp-card { width: min(560px, 100%); position: relative; } html[data-theme]:not(#cp):not(#cq) body .cp-us-x { all: unset; position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 3px; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-us-x:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-us-x:focus-visible, html[data-theme]:not(#cp):not(#cq) body .cp-us-opt:focus-visible { outline: 2px solid var(--cp-rust); outline-offset: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-us-body { display: grid; gap: 10px; padding: 16px 28px 18px; } html[data-theme]:not(#cp):not(#cq) body .cp-us-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } html[data-theme]:not(#cp):not(#cq) body .cp-us-opt { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 10px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-text); font: 500 12.5px/1.25 var(--cp-font); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-us-opt i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--us); } html[data-theme]:not(#cp):not(#cq) body .cp-us-opt:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-us-opt[aria-checked="true"] { border-color: var(--cp-rust); background: var(--cp-rust-soft); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-us-lbl { margin: 4px 0 -4px; font: 600 11px/1.3 var(--cp-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-us-lbl small { text-transform: none; letter-spacing: 0; font-weight: 500; } html[data-theme]:not(#cp):not(#cq) body .cp-us-in { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-strong); font: 400 13.5px/1 var(--cp-font); } html[data-theme]:not(#cp):not(#cq) body .cp-us-in:focus { outline: none; border-color: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .cp-us-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-items: end; } html[data-theme]:not(#cp):not(#cq) body .cp-us-row .cp-us-lbl { grid-column: 1 / -1; } html[data-theme]:not(#cp):not(#cq) body .cp-us-row #cp-us-date[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-us-pub { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--cp-text); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-us-pub[hidden] { display: none; } html[data-theme]:not(#cp):not(#cq) body .cp-us-pub input { width: 16px; height: 16px; margin: 0; accent-color: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .cp-us-err { margin: 0; color: var(--cp-danger); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-us-prof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-us-prof .cp-us-edit { box-sizing: border-box; height: 34px; padding: 0 12px; font-size: 13px; } html[data-theme]:not(#cp):not(#cq) body .cp-us-prof .cp-us-pill { margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-us-note { flex-basis: 100%; order: 3; margin: 0; max-width: 520px; color: var(--cp-muted); font-size: 12.5px; line-height: 1.45; } html[data-theme]:not(#cp):not(#cq) body .cp-us-edit { all: unset; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--cp-line-2); border-radius: 3px; font: 500 12px/1.2 var(--cp-font); color: var(--cp-text); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-us-edit:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-us-edit:focus-visible { outline: 2px solid var(--cp-rust); outline-offset: 2px; } html[data-theme]:not(#cp):not(#cq) body .cp-sp-abs { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 6px 9px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); } html[data-theme]:not(#cp):not(#cq) body .cp-sp-abs i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--us, var(--cp-info)); } html[data-theme]:not(#cp):not(#cq) body .cp-sp-abs span { display: grid; gap: 2px; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-sp-abs b { font-weight: 600; font-size: 12.5px; color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-sp-abs small { font-size: 12px; color: var(--cp-muted); line-height: 1.4; } @media (max-width: 560px) { html[data-theme]:not(#cp):not(#cq) body .cp-us-body { padding: 14px 16px 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-us-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme]:not(#cp):not(#cq) body .cp-us-row { grid-template-columns: 1fr; } } /* v5.135.1 · Status im Kundenportal: Punkt am Profilbild der Ansprechperson (Bild bleibt rund, Punkt ragt heraus), Zeile in der Leiste */ html[data-theme]:not(#cp):not(#cq) body .cp-sp-avatar { position: relative; overflow: visible !important; } html[data-theme]:not(#cp):not(#cq) body .cp-sp-avatar img { border-radius: 50%; } html[data-theme]:not(#cp):not(#cq) body .cp-sp-avatar .cp-us-dot { right: -1px; bottom: -1px; width: 12px; height: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-pb-status { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11.5px; color: var(--cp-muted); line-height: 1.3; } html[data-theme]:not(#cp):not(#cq) body .cp-pb-status i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--us); } /* ============================================================================= v5.142.0 · Kundenportal-Prüfung: Markenregeln durchgesetzt (gilt auch fürs Team-Dashboard) – kein oranger Schein/Lichtfleck, keine umlaufende Lichtkante, keine pulsierenden Ringe – Knöpfe eckig (3px), rund nur Avatare, Punkte, Zähler – heller Modus: „Neue Nachricht“ lesbar; Handy: Betragskachel in voller Breite, Beschriftung ≥ 11px – feste Knöpfe unten rechts verdecken das Seitenende nicht mehr ============================================================================= */ html[data-theme]:not(#cp):not(#cq) body.dashboard-page #page-content .cp-dash-grid .card::before, html[data-theme]:not(#cp):not(#cq) body .cp-hero-stats .card::before, html[data-theme]:not(#cp):not(#cq) body .cp-portal-card::after, html[data-theme]:not(#cp):not(#cq) body .cp-ph-tile::after, html[data-theme]:not(#cp):not(#cq) body .cp-portal-hero::after, html[data-theme]:not(#cp):not(#cq) body .cp-beam { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-portal-hero { background: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-portal-bar { background: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-portal-bar::before { background: var(--cp-rust-line) !important; opacity: 1 !important; } html[data-theme]:not(#cp):not(#cq) body .cp-sp-launch, html[data-theme]:not(#cp):not(#cq) body .cp-chat-launch { border-radius: var(--cp-r, 3px) !important; box-shadow: 0 10px 28px -16px rgba(0,0,0,.55) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-chat-launch:hover { transform: none; } html[data-theme]:not(#cp):not(#cq) body .cp-chat-launch.is-unread { animation: none !important; background: var(--cp-rust) !important; border-color: var(--cp-rust) !important; color: var(--cp-on-rust, #fff) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-btn.has-unread { color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-btn .cp-ph-badge, html[data-theme]:not(#cp):not(#cq) body .cp-mt-ico { animation: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-mt-ico, html[data-theme]:not(#cp):not(#cq) body .cp-mt-open, html[data-theme]:not(#cp):not(#cq) body .cp-mt-x, html[data-theme]:not(#cp):not(#cq) body .rst-notif-panel .rst-notif-mark-all, html[data-theme]:not(#cp):not(#cq) body .cp-np .load-more { border-radius: var(--cp-r, 3px) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-msg-toast { box-shadow: 0 24px 60px -24px rgba(0,0,0,.85) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-direct-avatar img { box-shadow: 0 0 0 1px var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body #js-rise-chat-wrapper .cp-person.has-unread .cp-person-av img { box-shadow: 0 0 0 2px var(--cp-rust-hi) !important; } html[data-theme] .cp-tour-spot { box-shadow: 0 0 0 9999px rgba(3,4,7,.72), 0 0 0 1px rgba(232,85,42,.8) !important; } html[data-theme="light"] .cp-tour-spot { box-shadow: 0 0 0 9999px rgba(10,12,17,.45), 0 0 0 1px rgba(192,67,28,.8) !important; } .cp-tour-spot::after { animation: none !important; opacity: .6 !important; } .cp-ct-ic { background: var(--cp-rust, #C0431C) !important; box-shadow: none !important; } html.cp-portal #page-content { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } @media (max-width: 599px) { html[data-theme]:not(#cp):not(#cq) body .cp-ph-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme]:not(#cp):not(#cq) body .cp-ph-tiles .cp-ph-tile.is-amount { grid-column: 1 / -1; order: -1; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-tile b { overflow: visible; text-overflow: clip; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-tile span { font-size: 11px; letter-spacing: .04em; } html[data-theme]:not(#cp):not(#cq) body .cp-ph-actions .cp-ph-btn:not(.is-primary) { font-size: 11px; letter-spacing: .02em; } } /* ============================================================================= v5.143.0 · Finanzen- und Aufgaben-Prüfung: Markenregeln (kein Violett, kein oranger Schein, Ecken 3px, Kontraste) ============================================================================= */ /* Umsatz-Auswertung / KI-Analyse: Violett → Markenfarbe bzw. neutraler Ton, ohne Lichtkegel und Schein */ html[data-theme] .ra-page { --ra-violet: #A8968A; } html[data-theme="light"] .ra-page { --ra-violet: #7A6A5E; } html[data-theme]:not(#cp):not(#cq) body .ra-ai { background: var(--cp-surface) !important; border-color: var(--cp-line-2) !important; } html[data-theme]:not(#cp):not(#cq) body .ra-ai::before { height: 1px !important; background: var(--cp-rust-line) !important; animation: none !important; } html[data-theme]:not(#cp):not(#cq) body .ra-ai-ico { background: var(--cp-rust) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .ra-page .ra-ai .ra-btn.is-primary { background: var(--cp-rust) !important; border-color: var(--cp-rust) !important; } html[data-theme]:not(#cp):not(#cq) body .ra-ai-answer { background: var(--cp-rust-soft) !important; border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body .ra-ai-answer em { color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .ra-ai-skel i { background: linear-gradient(90deg, var(--cp-hover) 25%, var(--cp-rust-soft) 50%, var(--cp-hover) 75%) !important; background-size: 200% 100% !important; } .ra-ai-load > .cp-aim, .ra-ai-load > svg { width: 28px; height: 28px; flex: none; color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .ra-hero > .ra-hero-main { background: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .ra-hero-k > i { box-shadow: none !important; } .ra-kpi::after, .ra-mini-i::after, .ra-hero > div::after { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-exs-cta { --k: var(--cp-rust-hi); background: var(--cp-surface) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-exs-d.is-bad { color: var(--cp-danger) !important; background: color-mix(in srgb, var(--cp-danger) 12%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-exs-d.is-good { color: var(--cp-success) !important; background: color-mix(in srgb, var(--cp-success) 12%, transparent) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-dai-orb { border-radius: 3px !important; } /* Mein Tag / Schnellerfassung / Aufgabenansicht: kein Schein, eckig, Markenfarben, lesbare Rot-Töne */ .cp-day-glow, .cp-day-orb, .cp-qc-orb { display: none !important; } .cp-day-ring .v, .cp-day-tm .v { filter: none !important; } .cp-day-ai::before, .cp-qc-box::before { display: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-tk.is-late .cp-day-sla i { box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn.is-primary, html[data-theme]:not(#cp):not(#cq) body .cp-qc-go, html[data-theme]:not(#cp):not(#cq) body :is(.cp-qc-save, .cp-qc-open), html[data-theme]:not(#cp):not(#cq) body .cp-day-adj-go { box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-btn.is-primary:hover { box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-done, html[data-theme]:not(#cp):not(#cq) body .cp-qc-mic, .cp-day-none svg, .cp-qc-done > span { border-radius: 3px !important; } .cp-day-plan-fi { box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time .cp-tv-timer .btn-success, html[data-theme]:not(#cp):not(#cq) body .cp-tv-foot .cp-tv-edit, html[data-theme]:not(#cp):not(#cq) body .cp-tvp-btn.is-primary { background: var(--cp-rust) !important; color: var(--cp-on-rust, #fff) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tv-time .cp-tv-timer .btn-danger, html[data-theme]:not(#cp):not(#cq) body .cp-tl-tmr.is-on { color: var(--cp-danger) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-toast { background: var(--cp-surface-2) !important; border-color: var(--cp-line-2) !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-day-toast button { background: var(--cp-rust-soft) !important; color: var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body #project-gantt-section #gantt-chart:not(:has(svg))::before { content: "Noch nichts im Zeitplan – Aufgaben mit Startdatum und Frist erscheinen hier als Balken." !important; } /* KI-Assistent: eigene Nachrichten und Startknopf ohne orangen Schein */ html[data-theme]:not(#cp):not(#cq) body .rst-ai-msg.user .rst-ai-bubble { box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .rst-ai-fab { box-shadow: 0 10px 28px -16px rgba(0,0,0,.55) !important; } /* v5.143.5 · Gantt lesbarer: dezente Wochenenden, kräftigere Schrift, Titel links (contentag-enhance.js), Farbe nach Balken */ html[data-theme]:not(#cp):not(#cq) body .gantt .weekends-highlight { fill: var(--cp-text) !important; opacity: .035 !important; } html[data-theme]:not(#cp):not(#cq) body .gantt .bar-label { font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: .01em; } html[data-theme]:not(#cp):not(#cq) body .gantt .bar-label.cp-gl-in { text-anchor: start !important; } html[data-theme]:not(#cp):not(#cq) body .gantt .bar-label.cp-gl-dark:not(.big) { fill: #15171C !important; } html[data-theme]:not(#cp):not(#cq) body .gantt .bar-wrapper.no-drag .bar:not([style*="fill"]), html[data-theme]:not(#cp):not(#cq) body .gantt .bar-wrapper.no-drag:is(:hover, .active) .bar:not([style*="fill"]) { fill: var(--cp-surface-3) !important; stroke: var(--cp-line-2) !important; stroke-width: 1px !important; } html[data-theme]:not(#cp):not(#cq) body .gantt .bar-wrapper.no-drag .bar:not([style*="fill"]) ~ .bar-label { font-weight: 600 !important; } html[data-theme]:not(#cp):not(#cq) body .gantt .bar-wrapper.no-drag .bar:not([style*="fill"]) ~ .bar-label:not(.big) { fill: var(--cp-text) !important; } /* Meilenstein-Balken: Farbe folgt dem Design, auch nach Umschalten */ /* v5.143.7 · Ausgaben-Kacheln nach verfügbarer Breite statt Fensterbreite (angehefteter KI-Assistent): ab 1250 px Inhalt 6, sonst 3 Spalten; Überschriften zweizeilig statt „…“ */ @media (min-width: 768px) { html[data-theme]:not(#cp):not(#cq) body .cp-exs { grid-template-columns: repeat(auto-fill, minmax(clamp(calc(100% / 6 - 12px), calc((1250px - 100%) * 999), calc(100% / 3 - 12px)), 1fr)) !important; } } html[data-theme]:not(#cp):not(#cq) body .cp-exs .cp-exs-k small { white-space: normal !important; text-overflow: clip !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } /* v5.143.7 · Tabellenköpfe: Der (unsichtbare) Spaltenfilter-Knopf stand im Textfluss und rutschte in schmalen Spalten in eine zweite Zeile – Überschriften standen dadurch auf zwei Höhen und z. B. die ID-Spalte war unnötig breit. Jetzt absolut im Kopf (th.cp-colw-th ist position: relative). */ html[data-theme]:not(#cp):not(#cq) body table.dataTable th.cp-colw-th .cp-cf-btn { position: absolute; top: 50%; right: 16px; z-index: 2; margin: 0 !important; transform: translateY(-50%); } html[data-theme]:not(#cp):not(#cq) body table.dataTable th.cp-colw-th.text-right .cp-cf-btn { right: auto; left: 6px; } html[data-theme]:not(#cp) body th:where(.cp-colw-th) .cp-cf-btn:where(:not(:hover):not(.is-open)) { background: var(--cp-surface); } html[data-theme]:not(#cp):not(#cq) body table.dataTable th.cp-colw-th.cp-cf-on:not(.text-right) { padding-right: 42px !important; } html[data-theme]:not(#cp):not(#cq) body table.dataTable th.cp-colw-th.cp-cf-on.text-right { padding-left: 34px !important; } @media (hover: none) { html[data-theme]:not(#cp):not(#cq) body table.dataTable th.cp-colw-th:has(.cp-cf-btn):not(.text-right) { padding-right: 50px !important; } html[data-theme]:not(#cp):not(#cq) body table.dataTable th.cp-colw-th.text-right:has(.cp-cf-btn) { padding-left: 42px !important; } } /* Projektliste neben dem angehefteten KI-Assistenten: Kunde nicht über fünf Zeilen, Frist-Hinweis darf umbrechen, leere Preis-Spalte nicht 10 % breit */ html[data-theme]:not(#cp):not(#cq) body #project-table td:has(> a[href*="/clients/view/"]) { min-width: 140px; } html[data-theme]:not(#cp):not(#cq) body #project-table :is(th, td).w10p.text-right { width: 1% !important; } html[data-theme]:not(#cp):not(#cq) body table.dataTable td small.cp-due { white-space: normal !important; } html[data-theme]:not(#cp):not(#cq) body table.dataTable td:has(> small.cp-due) { min-width: 118px; } /* v5.143.8 · Kundenportal: Platzhalter der Begrüßung bis die Übersicht geladen ist (kein Springen) */ html[data-theme]:not(#cp) body .cp-portal-hero.is-skel { display: block; min-height: 324px; background: linear-gradient(100deg, var(--cp-surface) 30%, color-mix(in srgb, var(--cp-text) 5%, var(--cp-surface)) 50%, var(--cp-surface) 70%); background-size: 250% 100%; animation: ra-shimmer 1.5s linear infinite; } @media (max-width: 767px) { html[data-theme]:not(#cp) body .cp-portal-hero.is-skel { min-height: 420px; } } @media (prefers-reduced-motion: reduce) { html[data-theme]:not(#cp) body .cp-portal-hero.is-skel { animation: none; } } /* v5.144.6 · Stempeluhr-Menü: Hinweis „keine offene Zeit zum Zuordnen“ ruhig statt gelb */ html[data-theme]:not(#cp):not(#cq) body .cp-clk-pop .cp-clk-ua.is-done { background: color-mix(in srgb, var(--cp-text) 5%, transparent); color: var(--cp-muted); font-size: 12px; } /* v5.144.7 · Zuordnungs-Dialog „Wofür war die Zeit?“: ein Suchfeld statt Rahmen im Rahmen (globale Eingabefeld-Regel und :focus-visible-Umriss lagen innen), Fokus nur als Randfarbe ohne Schein, Vorschläge mit Überschrift und Farbe je Art, „Zuordnen“ ohne orangen Schatten */ html[data-theme]:not(#cp):not(#cq) body .cp-alloc-search { height: 46px; padding: 0 14px; gap: 10px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2); box-shadow: none; transition: border-color .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-search:focus-within { border-color: var(--cp-rust-hi); box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-search svg { color: var(--cp-muted); transition: color .15s ease; } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-search:focus-within svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-search input, html[data-theme]:not(#cp):not(#cq) body .cp-alloc-search input:focus, html[data-theme]:not(#cp):not(#cq) body .cp-alloc-search input:focus-visible { height: 100%; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--cp-strong) !important; font-size: 14px; } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-search input::placeholder { color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-res { margin-top: -8px; border-color: var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-body textarea, html[data-theme]:not(#cp):not(#cq) body .cp-alloc-body textarea:focus, html[data-theme]:not(#cp):not(#cq) body .cp-alloc-body textarea:focus-visible { border: 1px solid var(--cp-line-2) !important; background: var(--cp-surface-2) !important; box-shadow: none !important; outline: none !important; color: var(--cp-strong) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-body textarea:focus { border-color: var(--cp-rust-hi) !important; } .cp-alloc-qwrap { display: flex; flex-direction: column; gap: 8px; } .cp-alloc-qwrap:has(.cp-alloc-quick:empty) { display: none; } .cp-alloc-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-chip { height: 34px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-chip.is-project svg { color: #7DB2FF; } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-chip.is-client svg { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-chip.is-internal svg { color: #4FC692; } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-x:hover { background: var(--cp-hover); color: var(--cp-strong); } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-go { box-shadow: none; } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-go:disabled { opacity: 1; background: color-mix(in srgb, var(--cp-text) 8%, transparent); color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-alloc-empty { background: transparent; } /* v5.144.8 · E-Mail-Editor (Kundenakte): „An“/„Betreff“ sind randlose Zeilen – kein 2-px-Umriss ums Feld (Rahmen im Rahmen), Fokus als Balken links an der Zeile */ html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-row input:focus-visible { outline: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-mcomp-row:focus-within { box-shadow: inset 2px 0 0 var(--cp-rust-hi); } /* v5.144.9 · Sprachschalter im Markendesign: gezeichnete Flagge (SVG statt Emoji) + Kürzel in der Markenschrift, ruhig wie die übrigen Symbole der Leiste; Menü mit Name, Kürzel und Häkchen – aktive Sprache dezent markiert statt vollflächig orange */ .rst-flag { display: inline-block; flex: none; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; line-height: 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--cp-text, #888) 22%, transparent); } .rst-flag svg { display: block; width: 100%; height: 100%; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .rst-lang-toggle { display: inline-flex !important; align-items: center !important; gap: 7px; height: 36px; padding: 0 9px !important; border: 0 !important; border-radius: 3px !important; background: transparent !important; color: var(--cp-text) !important; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .rst-lang-toggle:hover, html[data-theme]:not(#cp):not(#cq) body #default-navbar .rst-lang-toggle[aria-expanded="true"] { background: var(--cp-hover) !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .rst-lang-toggle .rst-current-flag { display: inline-flex; font-size: 0; line-height: 0; } html[data-theme]:not(#cp):not(#cq) body .rst-cur-code { font: 600 11px/1 var(--cp-font, inherit); letter-spacing: .14em; color: var(--cp-muted); transition: color .15s ease; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .rst-lang-toggle:hover .rst-cur-code, html[data-theme]:not(#cp):not(#cq) body #default-navbar .rst-lang-toggle[aria-expanded="true"] .rst-cur-code { color: var(--cp-rust-hi); } html[data-theme]:not(#cp):not(#cq) body #default-navbar .rst-lang-toggle .rst-chev { width: 11px; height: 11px; margin: 0 !important; color: var(--cp-dim); transition: transform .15s ease; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .rst-lang-toggle[aria-expanded="true"] .rst-chev { transform: rotate(180deg); } html[data-theme]:not(#cp):not(#cq) body .rst-lang-menu { min-width: 210px; padding: 6px !important; } html[data-theme]:not(#cp):not(#cq) body .rst-lang-menu .rst-lang-btn { display: flex !important; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-width: 0; height: 38px; margin: 0; padding: 0 10px !important; border: 0 !important; border-radius: 3px !important; background: transparent !important; color: var(--cp-text) !important; font: 500 13.5px/1 var(--cp-font, inherit) !important; text-align: left; } html[data-theme]:not(#cp):not(#cq) body .rst-lang-menu .rst-lang-btn:hover { background: var(--cp-hover) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-lang-menu .rst-lang-btn .flag { display: inline-flex; font-size: 0; line-height: 0; } html[data-theme]:not(#cp):not(#cq) body .rst-lang-menu .rst-lang-name { flex: 1; min-width: 0; font: inherit; letter-spacing: 0; } /* eigene Klasse – „.code“ bekam die Code-Kachel (Rahmen, Mono-Schrift) */ html[data-theme]:not(#cp):not(#cq) body .rst-lang-abbr { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .rst-lang-ok { width: 14px; height: 14px; margin: 0 !important; color: var(--cp-rust-hi); visibility: hidden; } html[data-theme]:not(#cp):not(#cq) body .rst-lang-menu .rst-lang-btn.active { background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; box-shadow: inset 2px 0 0 var(--cp-rust-hi) !important; } html[data-theme]:not(#cp):not(#cq) body .rst-lang-menu .rst-lang-btn.active .rst-lang-ok { visibility: visible; } html[data-theme]:not(#cp):not(#cq) body .rst-lang-menu .rst-lang-btn.active .rst-lang-abbr { color: var(--cp-rust-hi); } @media (max-width: 767px) { /* Handy: nur die Flagge – Platz in der Leiste */ html[data-theme]:not(#cp):not(#cq) body #default-navbar .rst-lang-toggle { width: 36px !important; min-width: 36px !important; padding: 0 !important; justify-content: center !important; } html[data-theme]:not(#cp):not(#cq) body #default-navbar .rst-lang-toggle :is(.rst-cur-code, .rst-chev) { display: none !important; } } /* v5.144.9 · „Neuigkeiten“ nur noch einmal: im Menü „Weitere Funktionen → Hilfe“ (mit „Neue Version verfügbar“). Der Eintrag im Profilmenü bleibt unsichtbar im DOM – mobile-topbar.js öffnet die Neuigkeiten über dessen Link. */ html[data-theme]:not(#cp):not(#cq) body .rst-changelog-menu-item { display: none !important; } /* v5.144.11 · Globale Suche: Trefferzahl an den Bereichs-Chips, Symbol statt Emoji in der leeren Ansicht, „KI-Assistent fragen“, Hinweis Strg/⌘+Enter */ html[data-theme]:not(#cp):not(#cq) body .cp-scope .cp-scope-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); color: var(--cp-strong); font: 600 10.5px/1 var(--cp-font, inherit); font-variant-numeric: tabular-nums; vertical-align: 1px; } html[data-theme]:not(#cp):not(#cq) body .cp-scope.active .cp-scope-n { background: rgba(255,255,255,.22); color: #fff; } html[data-theme]:not(#cp):not(#cq) body .rst-empty .rst-empty-big { display: grid; place-items: center; width: 48px; height: 48px !important; margin: 0 auto 10px !important; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 5%, transparent); color: var(--cp-muted); font-size: 0; } html[data-theme]:not(#cp):not(#cq) body .rst-empty .rst-empty-big svg { width: 22px; height: 22px; margin: 0 !important; } html[data-theme]:not(#cp):not(#cq) body .rst-empty small { display: block; margin-top: 4px; color: var(--cp-dim); font-size: 11px; } html[data-theme]:not(#cp):not(#cq) body .cp-ai-group .rst-res-icon { color: var(--cp-rust-hi); } @media (max-width: 767px) { html[data-theme]:not(#cp):not(#cq) body .rst-key-newtab { display: none !important; } } /* --------------------------------------------------------------------------- v5.145.0 · Support & Feedback neu (Nutzerwunsch „Support-Bereich ausarbeiten und verbessern“) Markenfarben statt Indigo mit Glow, SVG statt Emojis, Typ-Karten, Dringlichkeit, Soforthilfe, Erfolgsansicht. --------------------------------------------------------------------------- */ html[data-theme]:not(#cp) body .rst-support-overlay.cp-sup-ov { align-items: center; padding: 20px; background: rgba(4,5,8,.62); font-family: var(--cp-font, inherit); } html[data-theme]:not(#cp) body .rst-support-modal.cp-sup { display: flex; flex-direction: column; width: min(640px, 100%); max-height: calc(100vh - 40px); overflow: hidden; border-radius: 3px !important; background: radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--cp-rust-hi) 9%, transparent), transparent 60%), var(--cp-surface) !important; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9) !important; } .cp-sup-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 14px; border-bottom: 1px solid var(--cp-line); } .cp-sup-hi { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); border: 1px solid var(--cp-rust-line); } .cp-sup svg { margin-top: 0; } .cp-sup-hi svg { width: 20px; height: 20px; } .cp-sup-ht { flex: 1; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-sup .rst-support-title { margin: 2px 0 4px !important; font-size: 18px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--cp-strong) !important; } .cp-sup-ht p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-sup .cp-sup-x { all: unset; flex: none; box-sizing: border-box; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--cp-line-2); border-radius: 3px; background: none; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-x:hover { color: var(--cp-strong); border-color: var(--cp-rust-line); } .cp-sup-x svg { width: 15px; height: 15px; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-form { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; gap: 0; } .cp-sup-form[hidden], .cp-sup-done[hidden], .cp-sup-urg[hidden], .cp-sup-help[hidden] { display: none !important; } .cp-sup-body { overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; } .cp-sup-lbl { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-dim); } .cp-sup-field .cp-sup-lbl { margin: 0; } .cp-sup-cnt { margin-left: auto; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--cp-dim); } .cp-sup-cnt.is-near { color: var(--cp-warning); } /* Typ-Karten */ .cp-sup-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cp-sup-type { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .cp-sup-type input { position: absolute; opacity: 0; pointer-events: none; } .cp-sup-type:hover { border-color: var(--cp-rust-line); } .cp-sup-ti { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-muted); transition: background .15s ease, color .15s ease; } .cp-sup-ti svg { width: 17px; height: 17px; } .cp-sup-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cp-sup-tt b { font-size: 13px; font-weight: 500; color: var(--cp-strong); line-height: 1.3; } .cp-sup-tt small { font-size: 11.5px; line-height: 1.4; color: var(--cp-dim); } .cp-sup-tc { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: var(--cp-rust); color: #fff; opacity: 0; transform: scale(.7); transition: opacity .15s ease, transform .15s ease; } .cp-sup-tc svg { width: 12px; height: 12px; stroke-width: 2.6; } .cp-sup-type:has(input:checked) { border-color: var(--cp-rust-hi); background: var(--cp-rust-soft); } .cp-sup-type:has(input:checked) .cp-sup-ti { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-sup-type:has(input:checked) .cp-sup-tc { opacity: 1; transform: none; } .cp-sup-type:has(input:focus-visible) { outline: 2px solid var(--cp-rust-line); outline-offset: 2px; } /* Dringlichkeit */ .cp-sup-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); } .cp-sup-seg label { position: relative; margin: 0; cursor: pointer; } .cp-sup-seg input { position: absolute; opacity: 0; pointer-events: none; } .cp-sup-seg span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 3px; font-size: 12.5px; font-weight: 500; color: var(--cp-muted); transition: background .15s ease, color .15s ease; } .cp-sup-seg label:hover span { color: var(--cp-strong); } .cp-sup-seg input:checked + span { background: var(--cp-surface-3, var(--cp-surface-2)); color: var(--cp-strong); box-shadow: inset 0 0 0 1px var(--cp-line-2); } .cp-sup-seg .is-high input:checked + span { background: color-mix(in srgb, var(--cp-danger) 14%, transparent); color: var(--cp-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-danger) 40%, transparent); } .cp-sup-seg input:focus-visible + span { outline: 2px solid var(--cp-rust-line); outline-offset: 1px; } /* Felder */ .cp-sup-field { display: flex; flex-direction: column; gap: 8px; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-in { width: 100%; height: 44px; margin: 0; padding: 0 14px !important; border: 1px solid var(--cp-line-2) !important; border-radius: 3px !important; background: color-mix(in srgb, var(--cp-text) 3%, transparent) !important; box-shadow: none !important; color: var(--cp-strong) !important; font: 400 14px/1.4 var(--cp-font, inherit) !important; outline: none !important; transition: border-color .15s ease, box-shadow .15s ease; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-ta { height: auto; min-height: 140px; padding: 12px 14px !important; resize: vertical; line-height: 1.55 !important; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-in::placeholder { color: var(--cp-dim); opacity: 1; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-in:focus { border-color: var(--cp-rust-line) !important; box-shadow: 0 0 0 3px var(--cp-rust-soft) !important; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-in.is-bad { border-color: color-mix(in srgb, var(--cp-danger) 60%, transparent) !important; } /* Soforthilfe */ .cp-sup-help { display: flex; flex-direction: column; gap: 2px; margin-top: -6px; padding: 10px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-2); } .cp-sup-help .cp-sup-lbl { margin: 2px 4px 6px; } .cp-sup-hrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 3px; background: none; color: inherit; text-align: left; text-decoration: none !important; cursor: pointer; font: inherit; } .cp-sup-hrow:hover, .cp-sup-hrow:focus-visible { background: var(--cp-rust-soft); outline: none; } .cp-sup-hico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-muted); } .cp-sup-hrow.is-ai .cp-sup-hico { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-sup-hico svg { width: 15px; height: 15px; } .cp-sup-htx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .cp-sup-htx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--cp-strong); } .cp-sup-htx small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--cp-dim); } .cp-sup-hx { flex: none; color: var(--cp-dim); } .cp-sup-hx svg { width: 14px; height: 14px; } /* Kontext */ .cp-sup-ctx { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--cp-line); border-radius: 3px; cursor: pointer; } .cp-sup-ctx input { flex: none; margin: 2px 0 0; accent-color: var(--cp-rust-hi); } .cp-sup-ctx-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cp-sup-ctx-t b { font-size: 12.5px; font-weight: 500; color: var(--cp-strong); } .cp-sup-ctx-t small { font-size: 11.5px; line-height: 1.5; color: var(--cp-dim); overflow-wrap: anywhere; } html[data-theme]:not(#cp):not(#cq) body .cp-sup-ctx-t code { display: inline; margin: 0 !important; padding: 1px 5px !important; border: 0 !important; border-radius: 3px !important; background: color-mix(in srgb, var(--cp-text) 7%, transparent) !important; box-shadow: none !important; color: var(--cp-text) !important; font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace !important; white-space: normal; } /* v5.199.0 · Anhänge (Screenshots, PDF, Text) */ .cp-sup-files { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: -6px; } .cp-sup-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 12px; border: 1px dashed var(--cp-line-2); border-radius: 3px; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-attach { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: none; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-attach:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-sup .cp-sup-attach:focus-visible { outline: none; border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } .cp-sup-attach svg { width: 15px; height: 15px; } .cp-sup-drop small { min-width: 0; font-size: 11.5px; line-height: 1.45; color: var(--cp-dim); } .cp-sup-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .cp-sup-thumbs[hidden] { display: none; } .cp-sup-th { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px; border: 1px solid var(--cp-line); border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); } .cp-sup-th img, .cp-sup-th-i { flex: none; width: 52px; height: 40px; border-radius: 3px; object-fit: cover; background: color-mix(in srgb, var(--cp-text) 6%, transparent); } .cp-sup-th-i { display: grid; place-items: center; color: var(--cp-muted); } .cp-sup-th-i svg { width: 18px; height: 18px; } .cp-sup-th.is-busy img { opacity: .45; } .cp-sup-th-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .cp-sup-th-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--cp-strong); } .cp-sup-th-t small { font-size: 11px; color: var(--cp-dim); font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-th-x { all: unset; flex: none; box-sizing: border-box; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 3px; color: var(--cp-muted); cursor: pointer; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-th-x:hover, html[data-theme]:not(#cp) body .cp-sup .cp-sup-th-x:focus-visible { background: var(--cp-rust-soft); color: var(--cp-strong); } .cp-sup-th-x svg { width: 13px; height: 13px; } .cp-sup-dropmsg { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--cp-rust-hi); border-radius: 3px; background: color-mix(in srgb, var(--cp-surface) 86%, var(--cp-rust-hi)); color: var(--cp-rust-hi); font-size: 13px; font-weight: 500; pointer-events: none; } .cp-sup-files.is-drag .cp-sup-dropmsg { display: flex; } .cp-sup-dropmsg svg { width: 16px; height: 16px; } /* Fußzeile */ .cp-sup-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--cp-line); } .cp-sup-news { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-sup-news:hover { color: var(--cp-strong); } .cp-sup-news svg { width: 14px; height: 14px; } .cp-sup-st { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--cp-muted); text-align: right; } .cp-sup-st.is-err { color: var(--cp-danger); } html[data-theme]:not(#cp) body .cp-sup .cp-sup-ghost { height: 38px; padding: 0 14px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: none; color: var(--cp-text); font: 500 13px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: none; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-ghost:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-sup .cp-sup-go { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 16px; border: 0; border-radius: 3px; background: linear-gradient(180deg, #EE6236, #D24A20); color: #fff; font: 600 13px/1 var(--cp-font, inherit); cursor: pointer; box-shadow: none; } html[data-theme]:not(#cp) body .cp-sup .cp-sup-go:hover:not(:disabled) { background: linear-gradient(180deg, #F26B40, #DA5226); } html[data-theme]:not(#cp) body .cp-sup .cp-sup-go:disabled { opacity: .6; cursor: progress; } .cp-sup-go svg { width: 15px; height: 15px; } .cp-sup-go kbd { padding: 3px 5px; border: 0; border-radius: 3px; background: rgba(255,255,255,.18); color: #fff; font: 600 10.5px/1 var(--cp-font, inherit); box-shadow: none; } /* Erfolg */ .cp-sup-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 24px 30px; text-align: center; } .cp-sup-done-i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 3px; background: color-mix(in srgb, var(--cp-success) 14%, transparent); color: var(--cp-success); border: 1px solid color-mix(in srgb, var(--cp-success) 35%, transparent); } .cp-sup-done-i svg { width: 26px; height: 26px; stroke-width: 2.2; } html[data-theme]:not(#cp):not(#cq) body .cp-sup-done h4 { margin: 6px 0 0 !important; font-size: 18px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--cp-strong) !important; } .cp-sup-done p { margin: 0; max-width: 430px; font-size: 13px; line-height: 1.55; color: var(--cp-muted); overflow-wrap: anywhere; } .cp-sup-done-a { display: flex; gap: 8px; margin-top: 10px; } @media (max-width: 600px) { html[data-theme]:not(#cp) body .rst-support-overlay.cp-sup-ov { padding: 10px; align-items: flex-end; } html[data-theme]:not(#cp) body .rst-support-modal.cp-sup { max-height: calc(100vh - 20px); } .cp-sup-types { grid-template-columns: 1fr; } .cp-sup-type { flex-direction: row; align-items: center; padding: 10px 12px; } .cp-sup-tc { top: 50%; margin-top: -9px; } .cp-sup-go kbd, .cp-sup-news span { display: none; } .cp-sup-foot { flex-wrap: wrap; } .cp-sup-st { flex-basis: 100%; order: -1; text-align: left; } .cp-sup-news { margin-right: auto; } } /* v5.145.0: „Neuigkeiten“ – aktueller Eintrag ohne orangen Glow (Markenregel) */ html[data-theme]:not(#cp) body .rst-cl-release.is-current::before { box-shadow: none; } /* v5.145.3 · E-Mail-Ansicht: externe Bilder blockiert (Datenschutz) – Hinweisleiste über der Mail */ html[data-theme]:not(#cp) body .cp-mimg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 8px; padding: 8px 10px 8px 12px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); color: var(--cp-muted); font-size: 12.5px; line-height: 1.4; } html[data-theme]:not(#cp) body .cp-mimg-i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-muted); } html[data-theme]:not(#cp) body .cp-mimg-i svg { width: 14px; height: 14px; margin: 0; } html[data-theme]:not(#cp) body .cp-mimg-t { flex: 1 1 220px; min-width: 0; } html[data-theme]:not(#cp) body .cp-mimg button { height: 28px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font: 500 12px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp) body .cp-mimg button:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } html[data-theme]:not(#cp) body .cp-mimg button[data-img="once"] { border-color: var(--cp-rust-line); color: var(--cp-rust-hi); } /* --------------------------------------------------------------------------- v5.145.6 · Papierkorb (#/ext-trash) neu – Markendesign, SVG statt Emojis, Filter, Suche --------------------------------------------------------------------------- */ .cp-tr { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; color: var(--cp-text); font-family: var(--cp-font, inherit); } .cp-tr svg { margin-top: 0; flex: none; } .cp-tr-head { display: flex; align-items: flex-start; gap: 14px; } .cp-tr-hi { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 3px; background: var(--cp-rust-soft); color: var(--cp-rust-hi); border: 1px solid var(--cp-rust-line); } .cp-tr-ht { flex: 1; min-width: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-tr-ht h1 { margin: 2px 0 4px !important; font-size: 22px !important; font-weight: 500 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--cp-strong) !important; } .cp-tr-ht p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cp-muted); } .cp-tr-count { flex: none; align-self: center; font-size: 12.5px; color: var(--cp-dim); font-variant-numeric: tabular-nums; } .cp-tr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cp-tr-search { display: flex; align-items: center; gap: 9px; flex: 1 1 260px; max-width: 380px; height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 3%, transparent); color: var(--cp-dim); } .cp-tr-search:focus-within { border-color: var(--cp-rust-line); box-shadow: 0 0 0 3px var(--cp-rust-soft); } html[data-theme]:not(#cp) body .cp-tr-search input { flex: 1; min-width: 0; height: 100%; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--cp-strong) !important; font: 400 13.5px/1 var(--cp-font, inherit) !important; outline: none !important; } .cp-tr-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cp-tr-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: 999px; background: transparent; color: var(--cp-muted); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-tr-chip span { font-size: 11px; color: var(--cp-dim); font-variant-numeric: tabular-nums; } .cp-tr-chip:hover { color: var(--cp-strong); border-color: var(--cp-rust-line); } .cp-tr-chip[aria-pressed="true"] { background: var(--cp-rust-soft); border-color: var(--cp-rust-line); color: var(--cp-rust-hi); } .cp-tr-chip[aria-pressed="true"] span { color: inherit; } .cp-tr-info { border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-surface-2); font-size: 12.5px; color: var(--cp-muted); } .cp-tr-info summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; color: var(--cp-text); font-weight: 500; } .cp-tr-info summary::-webkit-details-marker { display: none; } .cp-tr-info summary svg { color: var(--cp-dim); } .cp-tr-info p { margin: 0; padding: 0 12px 10px 35px; line-height: 1.55; } .cp-tr-list { display: flex; flex-direction: column; gap: 6px; } .cp-tr-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface); transition: opacity .2s ease, transform .2s ease, border-color .15s ease; } .cp-tr-row:hover { border-color: color-mix(in srgb, var(--cp-text) 18%, transparent); } .cp-tr-row.is-busy { opacity: .6; } .cp-tr-row.is-out { opacity: 0; transform: translateX(8px); } .cp-tr-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-muted); } .cp-tr-row.is-task .cp-tr-ic { background: rgba(63,185,132,.12); color: #4FC692; } .cp-tr-row.is-project .cp-tr-ic { background: rgba(94,160,255,.12); color: #7DB2FF; } .cp-tr-row.is-post .cp-tr-ic, .cp-tr-row.is-media .cp-tr-ic, .cp-tr-row.is-asset .cp-tr-ic { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-tr-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cp-tr-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--cp-strong); } .cp-tr-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--cp-dim); } .cp-tr-days { padding: 3px 9px; border: 1px solid var(--cp-line-2); border-radius: 999px; font-size: 11.5px; color: var(--cp-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .cp-tr-days.is-soon { border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); color: var(--cp-danger); } .cp-tr-acts { display: flex; gap: 6px; } .cp-tr-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; } .cp-tr-btn:hover:not(:disabled) { border-color: var(--cp-rust-line); color: var(--cp-strong); } .cp-tr-btn.is-restore { color: var(--cp-rust-hi); border-color: var(--cp-rust-line); } .cp-tr-btn.is-purge { width: 34px; padding: 0; justify-content: center; color: var(--cp-muted); } .cp-tr-btn.is-purge:hover:not(:disabled) { color: var(--cp-danger); border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); } .cp-tr-btn:disabled { cursor: progress; } .cp-tr-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; border: 1px dashed var(--cp-line-2); border-radius: 3px; color: var(--cp-dim); text-align: center; } .cp-tr-empty.is-small { padding: 28px 20px; } .cp-tr-empty b { color: var(--cp-strong); font-weight: 500; font-size: 14px; } .cp-tr-empty span { font-size: 12.5px; } .cp-tr-skel { display: flex; flex-direction: column; gap: 6px; } .cp-tr-skel i { display: block; height: 58px; border-radius: 3px; background: linear-gradient(90deg, var(--cp-surface-2), color-mix(in srgb, var(--cp-text) 5%, var(--cp-surface-2)), var(--cp-surface-2)); background-size: 200% 100%; animation: cp-tr-sk 1.2s linear infinite; } @keyframes cp-tr-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (max-width: 700px) { .cp-tr-row { grid-template-columns: 36px minmax(0, 1fr) auto; } .cp-tr-days { display: none; } .cp-tr-btn.is-restore span { display: none; } .cp-tr-btn.is-restore { width: 34px; padding: 0; justify-content: center; } .cp-tr-count { display: none; } } /* v5.145.7 · Papierkorb: Mehrfachauswahl, Bearbeitungsleiste, „Papierkorb leeren“ */ .cp-tr-row { grid-template-columns: 22px 36px minmax(0, 1fr) auto auto; cursor: default; user-select: none; } .cp-tr-row .cp-tr-t small { user-select: text; } .cp-tr-row.is-sel { border-color: var(--cp-rust-line); background: color-mix(in srgb, var(--cp-rust-hi) 7%, var(--cp-surface)); } .cp-tr-cb, .cp-tr-all { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; } .cp-tr-cb input, .cp-tr-all input { width: 16px; height: 16px; margin: 0; accent-color: var(--cp-rust-hi); cursor: pointer; } .cp-tr-all { height: 40px; padding: 0 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; font-size: 12.5px; color: var(--cp-muted); } .cp-tr-all:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } .cp-tr-all:has(input:disabled) { opacity: .5; cursor: default; } .cp-tr-btn.is-empty { flex: none; align-self: center; color: var(--cp-muted); } .cp-tr-btn.is-empty:hover:not(:disabled) { color: var(--cp-danger); border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); } .cp-tr-btn[hidden] { display: none; } .cp-tr { padding-bottom: 70px; } @media (max-width: 700px) { .cp-tr-row { grid-template-columns: 22px 36px minmax(0, 1fr) auto; } .cp-tr-btn.is-empty span { display: none; } .cp-tr-btn.is-empty { width: 34px; padding: 0; justify-content: center; } } /* v5.145.8 · Menü: Plugin-Punkt ausgeblendet (im RISE-Menü-Editor entfernt oder kein Recht) */ .sidebar-menu li.ca-menu-off { display: none !important; } /* v5.145.8 · Rollenformular: Content-Agency-Bereiche (ca-areas.php) */ .permission-list li.ca-perm .ca-perm-hint { margin: 2px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); max-width: 720px; } .permission-list li.ca-perm .ca-perm-def { margin-left: 4px; font-size: 11px; color: var(--cp-dim); font-weight: 400; } .permission-list li.ca-perm.is-info .ca-perm-hint { margin-bottom: 0; } /* --------------------------------------------------------------------------- v5.145.9 · Einstellungsseiten (settings-pages.js) im Stil der Kundenberechtigungen (ca-cp-*) --------------------------------------------------------------------------- */ .cp-set .cp-set-hidden { display: none !important; } html[data-theme]:not(#cp) body .cp-set > .card.cp-set-hero { margin-bottom: 14px !important; border-radius: 3px !important; } html[data-theme]:not(#cp) body .cp-set > .card:not(.cp-set-hero) { border-radius: 3px !important; overflow: visible; } /* Listen-Kopf ohne Titel: nur die Knöpfe rechts */ html[data-theme]:not(#cp) body .cp-set .page-title.cp-set-pt { display: flex; justify-content: flex-end; min-height: 0; padding: 12px 16px !important; border-bottom: 1px solid var(--cp-line) !important; } /* Reiter im Markenstil (Unterstrich statt Kasten) */ html[data-theme]:not(#cp) body .cp-set .card > ul.nav.nav-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 14px !important; border-bottom: 1px solid var(--cp-line) !important; background: transparent !important; } html[data-theme]:not(#cp) body .cp-set .card > ul.nav.nav-tabs > li > a { padding: 13px 12px 11px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; color: var(--cp-muted) !important; font: 500 13px/1 var(--cp-font, inherit) !important; letter-spacing: 0 !important; text-transform: none !important; } html[data-theme]:not(#cp) body .cp-set .card > ul.nav.nav-tabs > li > a:hover { color: var(--cp-strong) !important; } html[data-theme]:not(#cp) body .cp-set .card > ul.nav.nav-tabs > li > a.active { color: var(--cp-strong) !important; border-bottom-color: var(--cp-rust-hi) !important; } /* Formularzeilen: Bezeichnung links, Feld rechts, Trennlinie */ html[data-theme]:not(#cp) body .cp-set form .card-body { padding: 4px 0 !important; } html[data-theme]:not(#cp) body .cp-set form .card-body > .form-group, html[data-theme]:not(#cp) body .cp-set form .card-body > div > .form-group { margin: 0 !important; padding: 13px 22px !important; border-bottom: 1px solid var(--cp-line) !important; } html[data-theme]:not(#cp) body .cp-set form .card-body > .form-group:last-child { border-bottom: 0 !important; } html[data-theme]:not(#cp) body .cp-set form .form-group > .row { align-items: center; row-gap: 8px; } html[data-theme]:not(#cp) body .cp-set form .form-group > .row > label { margin: 0 !important; padding-top: 0 !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--cp-strong) !important; line-height: 1.4; } html[data-theme]:not(#cp) body .cp-set form .form-group > .row > label .help, html[data-theme]:not(#cp) body .cp-set form .form-group > .row > label small { font-weight: 400; color: var(--cp-dim); } html[data-theme]:not(#cp) body .cp-set form .form-group .help-block, html[data-theme]:not(#cp) body .cp-set form .form-group .text-off { font-size: 12px !important; color: var(--cp-dim) !important; } /* Speicherleiste: fest am unteren Rand, Zustand links, Knopf rechts */ html[data-theme]:not(#cp) body .cp-set .card-footer.cp-set-bar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 22px !important; border-top: 1px solid var(--cp-line) !important; background: color-mix(in srgb, var(--cp-surface) 92%, transparent) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 0 0 3px 3px !important; } .cp-set-bar .cp-set-st { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cp-muted); } .cp-set-bar .cp-set-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cp-success); } .cp-set-bar.is-dirty .cp-set-st { color: var(--cp-strong); } .cp-set-bar.is-dirty .cp-set-st::before { background: var(--cp-rust-hi); } @media (max-width: 767px) { html[data-theme]:not(#cp) body .cp-set form .card-body > .form-group { padding: 12px 14px !important; } html[data-theme]:not(#cp) body .cp-set .card-footer.cp-set-bar { padding: 10px 14px !important; } } /* --------------------------------------------------------------------------- v5.146.1 · Zahlungsarten (payment_methods): Hinweis, Liste mit Art/Status/Nutzung, Dialog mit Erklärung und Schlüsselfeldern --------------------------------------------------------------------------- */ .cp-pm-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cp-line); } .cp-pm-info > div { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } .cp-pm-info svg { flex: none; margin-top: 2px; color: var(--cp-rust-hi); } .cp-pm-info b { color: var(--cp-strong); font-weight: 600; } .cp-pm-row { display: flex !important; align-items: center; gap: 10px; } .cp-pm-row .move-icon { cursor: grab; color: var(--cp-dim); display: inline-flex; } .cp-pm-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-pm-t { display: flex; flex-direction: column; min-width: 0; } .cp-pm-t b { font-weight: 600; color: var(--cp-strong); } .cp-pm-t small { font-size: 11.5px; color: var(--cp-dim); } .cp-pm-desc { font-size: 12.5px; color: var(--cp-muted); } .cp-pm-desc.is-none, .cp-pm-use.is-none { color: var(--cp-dim); font-size: 12px; } .cp-pm-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--cp-line-2); font-size: 11.5px; font-weight: 600; color: var(--cp-muted); white-space: nowrap; } .cp-pm-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-dim); } .cp-pm-chip.is-on { color: var(--cp-strong); border-color: color-mix(in srgb, var(--cp-success) 45%, transparent); } .cp-pm-chip.is-on::before { background: var(--cp-success); } .cp-pm-chip.is-man::before { background: var(--cp-rust-hi); } .cp-pm-use { display: inline-flex; flex-direction: column; font-size: 12.5px; color: var(--cp-text); font-variant-numeric: tabular-nums; } .cp-pm-use small { font-size: 11px; color: var(--cp-dim); } html[data-theme]:not(#cp) body #payment-method-table tbody tr.sortable-ghost { opacity: .45; } /* Dialog */ #payment-method-form .cp-pm-intro { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); } #payment-method-form .cp-pm-intro b { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } #payment-method-form .cp-pm-intro span { font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } #payment-method-form .cp-pm-secret { position: relative; display: flex; } html[data-theme]:not(#cp):not(#cq) body #payment-method-form .cp-pm-secret input { padding-right: 42px !important; } html[data-theme]:not(#cp):not(#cq) body #payment-method-form .cp-pm-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 3px; background: transparent; color: var(--cp-dim); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body #payment-method-form .cp-pm-eye:hover, html[data-theme]:not(#cp):not(#cq) body #payment-method-form .cp-pm-eye[aria-pressed="true"] { color: var(--cp-rust-hi); } @media (max-width: 767px) { .cp-pm-info { grid-template-columns: 1fr; padding: 12px; } } /* v5.145.10 · RISE-Updates abgeschaltet (Nutzerentscheidung): Menüpunkt „Aktualisierungen“ ausblenden */ #settings-left-menu-accordion a[href$="/Updates"], #settings-left-menu-accordion a[href$="/updates"] { display: none !important; } /* --------------------------------------------------------------------------- v5.145.11 · Verkaufschancen leer: hochwertiger Vertriebstrichter (contentag-crm.js funnelArt, .is-v2) Stufen bauen nacheinander auf, Lichtband läuft durch, Verkaufschancen fließen (einige steigen aus), Abschluss leuchtet auf. --------------------------------------------------------------------------- */ .cp-funnel-art.is-v2 { overflow: visible; } .cp-funnel-art.is-v2 path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; stroke-width: 1.2; } .cp-funnel-art.is-v2 .s0 { stop-color: var(--cp-rust-hi); stop-opacity: .2; } .cp-funnel-art.is-v2 .s1 { stop-color: var(--cp-rust-hi); stop-opacity: .04; } .cp-funnel-art.is-v2 .seg { stroke: var(--cp-rust-hi); stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 0; opacity: 0; animation: cp-fa-in .75s cubic-bezier(.2, .75, .2, 1) forwards; } .cp-funnel-art.is-v2 .g1 { stroke-opacity: .3; animation-delay: .05s; } .cp-funnel-art.is-v2 .g2 { stroke-opacity: .48; animation-delay: .16s; } .cp-funnel-art.is-v2 .g3 { stroke-opacity: .68; animation-delay: .27s; } .cp-funnel-art.is-v2 .g4 { stroke-opacity: .95; animation-delay: .38s; } @keyframes cp-fa-in { from { opacity: 0; transform: scaleX(.55) translateY(-5px); } to { opacity: 1; transform: none; } } .cp-funnel-art.is-v2 .b0 { stop-color: var(--cp-rust-hi); stop-opacity: 0; } .cp-funnel-art.is-v2 .b1 { stop-color: var(--cp-rust-hi); stop-opacity: .28; } .cp-funnel-art.is-v2 .sweep { animation: cp-fa-sweep 4.2s cubic-bezier(.45, 0, .55, 1) 1.1s infinite; } @keyframes cp-fa-sweep { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(138px); } } .cp-funnel-art.is-v2 .lead { fill: var(--cp-rust-hi); offset-rotate: 0deg; offset-distance: 0%; opacity: 0; animation: cp-fa-win 3.6s cubic-bezier(.45, .05, .35, 1) infinite; } .cp-funnel-art.is-v2 .lead.out { fill: var(--cp-muted); animation-name: cp-fa-out; animation-duration: 3.2s; } .cp-funnel-art.is-v2 .lead.tail { opacity: 0; animation-name: cp-fa-tail; } .cp-funnel-art.is-v2 .lead.tail.out { animation-name: cp-fa-tail-out; } @keyframes cp-fa-tail { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: .35; } 86% { opacity: .3; } 100% { offset-distance: 100%; opacity: 0; } } @keyframes cp-fa-tail-out { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: .3; } 55% { opacity: .22; } 100% { offset-distance: 100%; opacity: 0; } } .cp-funnel-art.is-v2 .edge { stroke: var(--cp-rust-hi); stroke-width: 1.4; stroke-linecap: round; opacity: 0; animation: cp-fa-edge .75s cubic-bezier(.2, .75, .2, 1) forwards; } .cp-funnel-art.is-v2 .edge.g1 { stroke-opacity: .45; animation-delay: .05s; } .cp-funnel-art.is-v2 .edge.g2 { stroke-opacity: .62; animation-delay: .16s; } .cp-funnel-art.is-v2 .edge.g3 { stroke-opacity: .8; animation-delay: .27s; } .cp-funnel-art.is-v2 .edge.g4 { stroke-opacity: 1; animation-delay: .38s; } @keyframes cp-fa-edge { from { opacity: 0; } to { opacity: 1; } } @keyframes cp-fa-win { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } @keyframes cp-fa-out { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: .9; } 55% { opacity: .75; } 100% { offset-distance: 100%; opacity: 0; } } .cp-funnel-art.is-v2 .won rect { fill: var(--cp-rust-soft); stroke: var(--cp-rust-line); stroke-width: 1; } .cp-funnel-art.is-v2 .won path { fill: none; stroke: var(--cp-rust-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cp-funnel-art.is-v2 .won { transform-box: fill-box; transform-origin: 50% 50%; animation: cp-fa-won 1.8s cubic-bezier(.2, .75, .2, 1) 4.4s infinite; } @keyframes cp-fa-won { 0% { transform: scale(1.18); } 35%, 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .cp-funnel-art.is-v2 .seg, .cp-funnel-art.is-v2 .edge { opacity: 1; animation: none; transform: none; } .cp-funnel-art.is-v2 .sweep, .cp-funnel-art.is-v2 .won { animation: none; } .cp-funnel-art.is-v2 .lead { display: none; } } /* v5.145.11: größer im leeren Zustand – Punkte und Spuren bleiben bei 120 × 90 px sonst zu klein */ html[data-theme]:not(#cp) body .cp-crm-empty.is-inline .cp-funnel-art.is-v2 { width: 168px !important; height: 126px !important; } @media (max-width: 767px) { html[data-theme]:not(#cp) body .cp-crm-empty.is-inline .cp-funnel-art.is-v2 { width: 128px !important; height: 96px !important; } } /* --------------------------------------------------------------------------- v5.147.0 · Einstellungen Content Agency (ca-settings.js) Seiten ca_settings/: Kopf wie die übrigen Einstellungsseiten (ca-cp-hero), Karten mit Zeilen (ca-cp-row), eigene Speicher-Leiste je Karte. Ecken 3 px; rund nur Punkte, Chips, Schalter und Optionsfelder. Kein Leuchten. --------------------------------------------------------------------------- */ .cp-cs { max-width: 920px; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .card { border-radius: 3px !important; overflow: visible; } html[data-theme]:not(#cp):not(#cq) body .cp-cs > .card.cp-cs-hero { margin-bottom: 14px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-card { margin-bottom: 16px !important; } .cp-cs .ca-cp-ic svg.cp-aim { width: 16px !important; height: 16px !important; } /* Ladeplatzhalter */ .cp-cs-load .card { padding: 22px 24px; margin-bottom: 14px; border-radius: 3px; } .cp-cs-load span { display: block; height: 10px; margin-bottom: 12px; border-radius: 3px; background: var(--cp-surface-3); animation: cp-cs-pulse 1.4s ease-in-out infinite; } .cp-cs-load span:nth-child(1) { width: 22%; height: 8px; } .cp-cs-load span:nth-child(2) { width: 46%; height: 16px; } .cp-cs-load span:nth-child(3) { width: 78%; } .cp-cs-load span:nth-child(4) { width: 64%; margin-bottom: 0; } .cp-cs-load-card span:nth-child(1) { width: 34%; height: 12px; } @keyframes cp-cs-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cp-cs-load span { animation: none; } } /* Zeilen: Bezeichnung + Hilfe links, Feld rechts */ .cp-cs-body { padding-top: 2px; padding-bottom: 2px; } .cp-cs-row > .ca-cp-txt { flex: 1 1 auto; } .cp-cs-ctl { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 58%; } .cp-cs-row.is-block { display: block; } .cp-cs-row.is-block > .cp-cs-ctl { max-width: none; justify-content: flex-start; margin-top: 10px; } .cp-cs-row.is-info > .cp-cs-ctl { flex-wrap: wrap; } .cp-cs-sub { margin: 18px 0 2px; padding-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cp-muted); } .cp-cs-body > .cp-cs-sub:first-child { margin-top: 12px; } .cp-cs-hint { margin: 4px 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } .cp-cs-empty, .cp-cs-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 14px 0; font-size: 13px; line-height: 1.5; color: var(--cp-muted); } .cp-cs-note { padding-top: 12px; color: var(--cp-dim); border-top: 1px solid var(--cp-line); } .cp-cs-empty svg, .cp-cs-note svg { flex: none; margin-top: 2px; } .cp-cs-retry { margin: 0 0 16px; } /* Felder */ html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-ctl > input.form-control, html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-ctl > select.form-control { width: 260px; max-width: 100%; height: 38px; min-height: 38px; font-size: 13.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-num { display: inline-flex; align-items: center; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-num > .form-control { width: 130px; height: 38px; min-height: 38px; text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; } .cp-cs-unit { min-width: 62px; font-size: 12.5px; color: var(--cp-muted); white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-ctl > textarea.cp-cs-area { width: 100%; height: auto; min-height: 84px; resize: vertical; font-size: 13.5px; line-height: 1.5; } .cp-cs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .form-control.cp-cs-mono { font-size: 13px; } .cp-cs-range { display: inline-flex; align-items: center; gap: 8px; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-range > .form-control { width: 116px; height: 38px; min-height: 38px; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .form-control.is-bad { border-color: var(--cp-danger) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .form-control:disabled { opacity: .6; cursor: not-allowed; } .cp-cs-row .ca-cp-ctl .form-check-input:disabled { opacity: .5; cursor: not-allowed; } /* Werte, Kennzeichen, Knöpfe */ .cp-cs-val { font-size: 13px; font-weight: 600; color: var(--cp-strong); text-align: right; overflow-wrap: anywhere; } .cp-cs-val.is-none { font-weight: 400; color: var(--cp-dim); } .cp-cs-preview { font-size: 14px; font-weight: 600; color: var(--cp-strong); overflow-wrap: anywhere; } .cp-cs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--cp-line-2); border-radius: 999px; font-size: 12px; line-height: 1.4; color: var(--cp-text); white-space: nowrap; } .cp-cs-chip > i { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-dim); flex: none; } .cp-cs-chip.is-ok > i { background: var(--cp-success); } .cp-cs-chip.is-info > i { background: var(--cp-info); } .cp-cs-chip.is-warn { color: var(--cp-warning); border-color: color-mix(in srgb, var(--cp-warning) 40%, transparent); } .cp-cs-chip.is-warn > i { background: var(--cp-warning); } .cp-cs-chip.is-off { color: var(--cp-muted); } .cp-cs-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-btn { display: inline-flex !important; align-items: center; gap: 7px; min-height: 34px; padding: 6px 12px; border-radius: 3px !important; font-size: 12.5px; white-space: nowrap; } .cp-cs-btn svg { width: 14px; height: 14px; flex: none; } .cp-cs-btn.is-busy { opacity: .6; pointer-events: none; } .cp-cs-tokens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .cp-cs-fmt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; } .cp-cs-fmt .cp-cs-tokens { margin-top: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-fmt > .form-control { width: 320px; max-width: 100%; height: 38px; min-height: 38px; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-token { padding: 2px 7px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; color: var(--cp-text); font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; transition: border-color var(--cp-dur-s, 180ms) var(--cp-ease, ease), color var(--cp-dur-s, 180ms) var(--cp-ease, ease); } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-token:hover { border-color: var(--cp-rust-line); color: var(--cp-strong); } .cp-cs-token:focus-visible { outline: 2px solid var(--cp-rust); outline-offset: 2px; } /* Kostensätze je Person */ .cp-cs-table { margin: 2px 0 6px; border-top: 1px solid var(--cp-line); } .cp-cs-tr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 9px 0; border-bottom: 1px solid var(--cp-line); } .cp-cs-tr:last-child { border-bottom: 0; } .cp-cs-name { font-size: 13.5px; font-weight: 600; color: var(--cp-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-cs-src { font-size: 12.5px; color: var(--cp-muted); } .cp-cs-tr .cp-cs-unit { min-width: 0; } /* Auswahl mit Erklärung (Schutzmodus) */ .cp-cs-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-opt { display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 10px 12px; border: 1px solid var(--cp-line-2); border-radius: 3px; background: transparent; cursor: pointer; transition: border-color var(--cp-dur-s, 180ms) var(--cp-ease, ease), background var(--cp-dur-s, 180ms) var(--cp-ease, ease); } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-opt:hover { border-color: var(--cp-dim); } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-opt:has(input:checked) { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-opt:has(input:disabled) { cursor: default; opacity: .75; } .cp-cs-opt > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cp-cs-opt b { font-size: 13px; font-weight: 600; color: var(--cp-strong); } .cp-cs-opt small { font-size: 12px; line-height: 1.45; color: var(--cp-muted); } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-opt input.form-check-input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; position: relative; float: none; width: 16px; height: 16px; margin: 2px 0 0 !important; border: 1.5px solid var(--cp-line-2) !important; border-radius: 50% !important; background: transparent !important; background-image: none !important; box-shadow: none !important; cursor: inherit; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-opt input.form-check-input[type="radio"]:checked { border-color: var(--cp-rust) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-opt input.form-check-input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--cp-rust); } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-opt input.form-check-input[type="radio"]:focus-visible { outline: 2px solid var(--cp-rust); outline-offset: 2px; } /* Kanäle (Kontrollkästchen) */ .cp-cs-checks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-check { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 500; color: var(--cp-text); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-check .form-check-input { float: none; margin: 0; flex: none; } /* Speicher-Leiste je Karte */ .cp-cs-foot { position: relative; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; padding: 11px 22px; border-top: 1px solid var(--cp-line); border-radius: 0 0 3px 3px; background: color-mix(in srgb, var(--cp-surface) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .cp-cs-st { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cp-muted); } .cp-cs-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cp-success); flex: none; } .cp-cs-foot.is-dirty { position: sticky; border-top-color: var(--cp-rust-line); } /* nur mit Änderungen am unteren Rand mitlaufen */ .cp-cs-foot.is-dirty .cp-cs-st { color: var(--cp-strong); font-weight: 600; } .cp-cs-foot.is-dirty .cp-cs-st::before { background: var(--cp-rust-hi); } .cp-cs-foot.is-busy .cp-cs-st::before { background: var(--cp-dim); } .cp-cs-acts { display: inline-flex; gap: 8px; margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-acts .btn { display: inline-flex !important; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 3px !important; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-acts .btn[hidden] { display: none !important; } .cp-cs-acts .btn svg { width: 14px; height: 14px; flex: none; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-save:disabled { opacity: .45; cursor: default; } /* Systemprüfung */ .cp-cs-result { margin: 2px 0 16px; padding: 12px 14px; border: 1px solid var(--cp-line); border-radius: 3px; background: var(--cp-deep); } .cp-cs-result[hidden] { display: none !important; } .cp-cs-warns p, .cp-cs-ok { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--cp-warning); } .cp-cs-ok { color: var(--cp-success); } .cp-cs-warns svg, .cp-cs-ok svg { flex: none; margin-top: 2px; } .cp-cs-list { margin: 6px 0 0; padding: 0; list-style: none; } .cp-cs-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--cp-line); font-size: 12.5px; color: var(--cp-muted); } .cp-cs-list li b { font-weight: 600; color: var(--cp-strong); text-align: right; font-variant-numeric: tabular-nums; } .cp-cs-result .cp-cs-hint { margin: 8px 0 0; } /* v5.198.0 · E-Mail-Echtheit in der Systemprüfung */ .cp-cs-chip.is-bad { color: var(--cp-danger); border-color: color-mix(in srgb, var(--cp-danger) 40%, transparent); } .cp-cs-chip.is-bad > i { background: var(--cp-danger); } .cp-cs-mail { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--cp-line); } .cp-cs-mail-h { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cp-muted); } .cp-cs-mail-h b { text-transform: none; letter-spacing: 0; color: var(--cp-strong); } .cp-cs-mail .cp-cs-ok { margin-top: 10px; } .cp-cs-fix { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--cp-line); border-left: 3px solid var(--cp-warning); border-radius: 3px; background: var(--cp-surface-2, transparent); } .cp-cs-fix-h { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--cp-text); } .cp-cs-fix-h b { color: var(--cp-strong); } .cp-cs-result .cp-cs-fix .cp-cs-hint { margin: 6px 0 0; } .cp-cs-fix code, .cp-cs-dns code { padding: 1px 5px; border-radius: 3px; background: var(--cp-surface-3, rgba(127,127,127,.12)); font-size: 12px; overflow-wrap: anywhere; word-break: break-all; } .cp-cs-dns { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; margin: 10px 0 0; } .cp-cs-dns-k { grid-column: 1 / -1; font-size: 12px; color: var(--cp-muted); } .cp-cs-dns-v { display: block; padding: 8px 10px !important; line-height: 1.45; color: var(--cp-strong); user-select: all; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-copy { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; } @media (max-width: 520px) { .cp-cs-dns { grid-template-columns: minmax(0, 1fr); } .cp-cs-copy { justify-self: start; } } /* Tablet und Handy: Zeilen untereinander, Felder volle Breite */ @media (max-width: 767px) { .cp-cs-opts { grid-template-columns: minmax(0, 1fr); } .cp-cs-foot { padding: 10px 16px; } } @media (max-width: 600px) { .cp-cs-row { flex-direction: column; align-items: stretch; gap: 10px; } .cp-cs-ctl { max-width: none; justify-content: flex-start; flex-wrap: wrap; } .cp-cs-row.is-info > .cp-cs-ctl { justify-content: flex-start; } .cp-cs-val { text-align: left; } .cp-cs-links, .cp-cs-checks { justify-content: flex-start; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-ctl > input.form-control, html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-ctl > select.form-control { width: 100%; height: 44px; min-height: 44px; font-size: 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-num > .form-control, html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-range > .form-control { height: 44px; min-height: 44px; font-size: 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-ctl > textarea.cp-cs-area { font-size: 16px; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-fmt > .form-control { width: 100%; height: 44px; min-height: 44px; font-size: 16px; } .cp-cs-row .ca-cp-ctl.form-check { align-self: flex-start; } .cp-cs-tr { grid-template-columns: minmax(0, 1fr) auto; } .cp-cs-tr .cp-cs-src { grid-column: 1; grid-row: 2; } .cp-cs-tr .cp-cs-num { grid-column: 2; grid-row: 1 / span 2; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-tr .cp-cs-num > .form-control { width: 104px; } .cp-cs-acts { width: 100%; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-acts .btn { flex: 1 1 auto; justify-content: center; height: 42px; } html[data-theme]:not(#cp):not(#cq) body .cp-cs .cp-cs-btn { white-space: normal; text-align: left; } } /* --------------------------------------------------------------------------- v5.154.0 · Liquidität (cashflow.js, #/liquiditaet): Kontostand-Linie, Eingänge/Ausgänge je Woche, Wochen, Planposten Farben mit dem dataviz-Validator geprüft (CVD/Kontrast): dunkel #4A90E2/#E8552A, hell #2F6FA8/#C0431C --------------------------------------------------------------------------- */ .cp-cf-page { --cf-in: #4A90E2; --cf-out: #E8552A; --cf-line: var(--cp-text); } html[data-theme="light"] .cp-cf-page { --cf-in: #2F6FA8; --cf-out: #C0431C; } .cp-cf-warn { border-color: color-mix(in srgb, var(--cp-warning) 45%, transparent) !important; } .cp-cf-warn svg { color: var(--cp-warning) !important; } .cp-cf-chart > header { margin-bottom: 6px; } .cp-cf-plot { position: relative; width: 100%; min-height: 200px; } .cp-cf-plot svg { display: block; max-width: 100%; overflow: visible; } .cp-cf-grid { stroke: color-mix(in srgb, var(--cp-text) 9%, transparent); stroke-width: 1; } .cp-cf-zero { stroke: color-mix(in srgb, var(--cp-text) 32%, transparent); stroke-width: 1; } .cp-cf-min { stroke: var(--cp-warning); stroke-width: 1.5; stroke-dasharray: 5 4; } .cp-cf-ax { fill: var(--cp-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; } .cp-cf-lbl { fill: var(--cp-strong); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .cp-cf-line { fill: none; stroke: var(--cf-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .cp-cf-area { fill: color-mix(in srgb, var(--cf-line) 7%, transparent); stroke: none; } .cp-cf-dot { fill: var(--cf-line); stroke: var(--cp-surface); stroke-width: 2; } .cp-cf-dot.is-low { fill: var(--cp-warning); } .cp-cf-cross { stroke: color-mix(in srgb, var(--cp-text) 35%, transparent); stroke-width: 1; } .cp-cf-bar.is-in { fill: var(--cf-in); } .cp-cf-bar.is-out { fill: var(--cf-out); } .cp-cf-band { fill: color-mix(in srgb, var(--cp-text) 5%, transparent); } .cp-cf-hit { fill: transparent; cursor: default; outline: none; } .cp-cf-hit:focus-visible { fill: color-mix(in srgb, var(--cp-rust) 8%, transparent); } .cp-cf-plot [hidden] { display: none; } .cp-cf-tip { position: absolute; z-index: 5; min-width: 200px; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface-2, var(--cp-surface)); box-shadow: 0 8px 22px rgba(0,0,0,.28); pointer-events: none; font-size: 12px; } .cp-cf-tip[hidden] { display: none; } .cp-cf-tip > b { display: block; margin-bottom: 5px; color: var(--cp-strong); font-weight: 600; } .cp-cf-tip > span { display: flex; align-items: center; gap: 7px; padding: 2px 0; color: var(--cp-text); } .cp-cf-tip > span i { width: 9px; height: 9px; border-radius: 2px; } .cp-cf-tip > span em { margin-left: auto; padding-left: 14px; color: var(--cp-strong); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; } .cp-cf-tip > small { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--cp-line); color: var(--cp-muted); } .cp-cf-tip i.is-bal, .cp-cf-leg i.is-bal { background: var(--cf-line); } .cp-cf-tip i.is-in, .cp-cf-leg i.is-in { background: var(--cf-in); } .cp-cf-tip i.is-out, .cp-cf-leg i.is-out { background: var(--cf-out); } .cp-cf-leg { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-muted); font-size: 12px; } .cp-cf-leg i { width: 10px; height: 10px; margin-left: 8px; border-radius: 2px; } .cp-cf-page .ta-tbl .is-num { text-align: right; white-space: nowrap; } .cp-cf-tbl tr.cp-cf-wk { cursor: pointer; } .cp-cf-tbl tr.cp-cf-wk:hover td { background: var(--cp-hover); } .cp-cf-tbl tr.cp-cf-wk:focus-visible { outline: 2px solid var(--cp-rust-line); outline-offset: -2px; } .cp-cf-tbl tr.is-low td:nth-child(5) b { color: var(--cp-warning); } .cp-cf-tbl td.is-neg { color: var(--cp-text); } .cp-cf-tbl td.is-act { width: 30px; text-align: right; color: var(--cp-muted); } .cp-cf-chev svg { transition: transform .2s var(--cp-e, ease); } .cp-cf-wk.is-open .cp-cf-chev svg { transform: rotate(90deg); } .cp-cf-now { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--cp-rust-soft); color: var(--cp-strong); font-size: 10.5px; font-style: normal; font-weight: 600; } .cp-cf-tbl tr.cp-cf-sub > td { padding: 0 10px 12px; background: var(--cp-deep); } .cp-cf-items { display: grid; gap: 3px; margin: 8px 0 0; padding: 0; list-style: none; } .cp-cf-items > li { display: flex; align-items: center; gap: 8px 12px; padding: 7px 10px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); border-left: 3px solid var(--cf-in); } .cp-cf-items > li.is-out { border-left-color: var(--cf-out); } html[data-theme]:not(#cp):not(#cq) body .cp-cf-it { display: grid; gap: 1px; flex: 1; min-width: 0; color: var(--cp-text) !important; text-decoration: none !important; } .cp-cf-it b { color: var(--cp-strong); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-cf-it small { color: var(--cp-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-cf-it-k { color: var(--cp-dim, var(--cp-muted)); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body a.cp-cf-it:hover b { color: var(--cp-rust-hi); } .cp-cf-it-a { flex: none; color: var(--cp-strong); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .cp-cf-over { flex: none; padding: 1px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cp-warning) 50%, transparent); color: var(--cp-warning); font-size: 10.5px; font-style: normal; font-weight: 600; } .cp-cf-planlist { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; } .cp-cf-plan { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 3px; border: 1px solid var(--cp-line); border-left: 3px solid var(--cf-out); background: var(--cp-deep); } .cp-cf-plan.is-in { border-left-color: var(--cf-in); } .cp-cf-plan > div { display: grid; gap: 2px; flex: 1; min-width: 0; } .cp-cf-plan b { color: var(--cp-strong); font-size: 13px; font-weight: 600; } .cp-cf-plan small { color: var(--cp-muted); font-size: 11.5px; } .cp-cf-pform { padding: 12px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-deep); } .cp-cf-pact { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .cp-qc-grid label.cp-cf-chk { flex-direction: row; align-items: flex-start; gap: 9px; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-grid .cp-cf-chk input[type="checkbox"] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; padding: 0 !important; border: 0 !important; background: none; outline: none; accent-color: var(--cp-rust-hi); } .cp-qc-grid label.cp-cf-chk span { flex: 1; min-width: 0; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 400; color: var(--cp-text); line-height: 1.45; } .cp-cf-set .cp-qc-grid > p { display: flex; align-items: center; gap: 6px; margin: 0; } .cp-cf-disc { display: flex; align-items: flex-start; gap: 6px; margin: 4px 2px 0; } .cp-cf-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 18px; text-align: center; } html[data-theme]:not(#cp):not(#cq) body .cp-cf-empty h2 { margin: 0 !important; } .cp-cf-empty p { max-width: 560px; margin: 0; color: var(--cp-muted); font-size: 13px; line-height: 1.55; } .cp-cf-disc svg { flex: none; margin-top: 2px; } @media (max-width: 767px) { .cp-cf-items > li { flex-wrap: wrap; } .cp-cf-tip { min-width: 170px; } } /* --------------------------------------------------------------------------- v5.150.0 · Steuern & Export (taxes.js, #/steuern): USt-Voranmeldung, Prüfliste, ZM, EÜR, DATEV-Export, Einstellungen --------------------------------------------------------------------------- */ .cp-tx-page .ta-tbl .is-num { text-align: right; } .cp-tx-page .ta-tbl tr.is-total td { border-top: 1px solid var(--cp-line-2); color: var(--cp-strong); font-weight: 600; } .cp-tx-page .ta-tbl td { white-space: normal; } .cp-tx-page .ta-tbl td.is-num { white-space: nowrap; } .cp-tx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; } .cp-tx-setline { color: var(--cp-muted); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-tx-page .cp-bk-lnk { padding: 0 !important; border: 0 !important; background: none !important; color: var(--cp-rust-hi) !important; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; } html[data-theme]:not(#cp):not(#cq) body .cp-tx-page .cp-bk-lnk:hover { text-decoration: underline; } /* Zeitraum-Leiste */ .cp-tx-periods { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; } .cp-tx-periods.is-q { grid-template-columns: repeat(4, minmax(0, 1fr)); } html[data-theme]:not(#cp):not(#cq) body .cp-tx-per { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 9px 10px 12px; border: 1px solid var(--cp-line) !important; border-radius: 3px; background: var(--cp-surface) !important; color: var(--cp-text) !important; text-align: left; cursor: pointer; box-shadow: none !important; overflow: hidden; } html[data-theme]:not(#cp):not(#cq) body .cp-tx-per:hover { border-color: var(--cp-rust-line) !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tx-per.is-sel { border-color: var(--cp-rust-hi) !important; background: var(--cp-rust-soft) !important; } .cp-tx-per small { color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .cp-tx-per b { max-width: 100%; overflow: hidden; color: var(--cp-strong); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .cp-tx-per i { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 10%, transparent); } .cp-tx-per.is-filed i { background: var(--cp-success); } .cp-tx-per.is-due i { background: var(--cp-warning); } .cp-tx-per.is-overdue i { background: var(--cp-danger); } .cp-tx-per.is-running i { background: var(--cp-info); } .cp-tx-per.is-future, .cp-tx-per.is-empty { opacity: .55; } /* Kopf, Status */ .cp-tx-main > header > div:first-child { display: grid; gap: 3px; } .cp-tx-head-r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cp-tx-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--cp-line-2); color: var(--cp-text); font-size: 12px; font-weight: 500; white-space: nowrap; } .cp-tx-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-muted); } .cp-tx-chip.is-ok i { background: var(--cp-success); } .cp-tx-chip.is-warn i { background: var(--cp-warning); } .cp-tx-chip.is-bad i { background: var(--cp-danger); } .cp-tx-chip.is-info i { background: var(--cp-info); } .cp-tx-chip.is-bad { border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); color: var(--cp-danger); } .cp-tx-filed { display: inline-flex; align-items: center; gap: 5px; color: var(--cp-success); font-size: 12px; } .cp-tx-warn { border-color: color-mix(in srgb, var(--cp-warning) 45%, transparent) !important; } .cp-tx-warn svg { color: var(--cp-warning) !important; } .cp-tx-kpis { margin: 4px 0 14px; } .cp-tx-kpis .ta-k { background: var(--cp-deep); } /* Kennzahlen-Tabelle */ .cp-tx-kzn { display: inline-block; min-width: 34px; padding: 2px 6px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-strong); font-family: var(--cp-mono, ui-monospace, monospace); font-size: 12px; font-weight: 600; text-align: center; } .cp-tx-kz tr.is-total .cp-tx-kzn { background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-tx-kz td.is-act { width: 40px; text-align: right; } html[data-theme]:not(#cp):not(#cq) body button.cp-tx-drill:not(.cp-bk-lnk) { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--cp-line-2) !important; border-radius: 3px; background: none !important; color: var(--cp-muted) !important; cursor: pointer; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body button.cp-tx-drill:not(.cp-bk-lnk):hover { color: var(--cp-strong) !important; border-color: var(--cp-rust-line) !important; } .cp-tx-drill svg { transition: transform .2s var(--cp-e, ease); } .cp-tx-drill[aria-expanded="true"] svg { transform: rotate(90deg); } .cp-tx-kz tr.cp-tx-sub > td { padding: 0 10px 12px; background: var(--cp-deep); } .cp-tx-drillbox { padding-top: 8px; } .cp-tx-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .cp-tx-foot svg { flex: none; } .cp-tx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; } html[data-theme]:not(#cp):not(#cq) body a.ta-btn { text-decoration: none !important; } .cp-tx-disc { display: flex; align-items: flex-start; gap: 6px; margin: 4px 2px 0; } .cp-tx-disc svg { flex: none; margin-top: 2px; } /* Belegzeilen (Prüfliste, Aufklappen) */ .cp-tx-items { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; } .cp-tx-items > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 10px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-tx-it { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 100%; padding: 0; border: 0 !important; background: none !important; color: var(--cp-text) !important; text-align: left; text-decoration: none !important; cursor: pointer; } .cp-tx-it b { color: var(--cp-strong); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-tx-it span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-tx-it:hover b { color: var(--cp-rust-hi); } .cp-tx-it-m { color: var(--cp-muted); } .cp-tx-it-a { margin-left: auto; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-tx-it-a small { color: var(--cp-muted); } .cp-tx-cl { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .cp-tx-c { padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); } .cp-tx-c-h { display: flex; gap: 10px; } .cp-tx-c-i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px; background: color-mix(in srgb, var(--cp-info) 14%, transparent); color: var(--cp-info); } .cp-tx-c.is-warn .cp-tx-c-i { background: color-mix(in srgb, var(--cp-warning) 14%, transparent); color: var(--cp-warning); } .cp-tx-c-h b { color: var(--cp-strong); font-size: 13px; font-weight: 600; } .cp-tx-c-h b em { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 9%, transparent); color: var(--cp-text); font-size: 11px; font-style: normal; } .cp-tx-c-h p { margin: 3px 0 0; color: var(--cp-muted); font-size: 12.5px; line-height: 1.5; } .cp-tx-ok { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cp-success); font-size: 13px; } .cp-tx-rc { display: inline-flex; padding: 2px; border-radius: 3px; border: 1px solid var(--cp-line-2); } html[data-theme]:not(#cp):not(#cq) body .cp-tx-rc button { height: 24px; padding: 0 9px; border: 0 !important; border-radius: 3px; background: none !important; color: var(--cp-muted) !important; font-size: 11.5px; font-weight: 500; cursor: pointer; box-shadow: none !important; } html[data-theme]:not(#cp):not(#cq) body .cp-tx-rc button:hover { background: var(--cp-rust-soft) !important; color: var(--cp-strong) !important; } /* EÜR */ .cp-tx-chart { height: 170px; } .cp-tx-chart > div { cursor: default; } .cp-tx-col i.is-a { left: 30%; right: 30%; } /* DATEV */ .cp-tx-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; } .cp-tx-f > span { display: block; margin-bottom: 8px; color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .cp-tx-range { display: flex; align-items: center; gap: 8px; } .cp-tx-range input { max-width: 170px; } .cp-tx-range span { color: var(--cp-muted); font-size: 12.5px; } .cp-tx-quick { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; } .cp-tx-checks { display: grid; gap: 8px; } .cp-tx-chk { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--cp-line); cursor: pointer; } .cp-tx-chk:hover { border-color: var(--cp-rust-line); } .cp-tx-chk input { flex: none; margin-top: 3px; accent-color: var(--cp-rust-hi); } .cp-tx-chk span { display: grid; gap: 2px; } .cp-tx-chk b { color: var(--cp-strong); font-size: 13px; font-weight: 500; } .cp-tx-chk small { color: var(--cp-muted); font-size: 12px; line-height: 1.4; } /* v5.165.0 · DATEV-Stammdaten */ .cp-tx-mrow { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--cp-line); } .cp-tx-inl { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--cp-muted); font-size: 12.5px; font-weight: 400; cursor: pointer; } .cp-tx-inl input { margin: 0; accent-color: var(--cp-rust-hi); } .cp-tx-dvres { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cp-line); } .cp-tx-dvsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; } .cp-tx-dvsum > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 3px; background: var(--cp-deep); border: 1px solid var(--cp-line); } .cp-tx-dvsum small { color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .cp-tx-dvsum b { color: var(--cp-strong); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; } .cp-tx-dvsum span { color: var(--cp-muted); font-size: 12px; font-variant-numeric: tabular-nums; } .cp-tx-warnlist { margin: 0 0 12px; padding: 10px 12px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-warning) 40%, transparent); font-size: 12.5px; } .cp-tx-warnlist summary { display: flex; align-items: center; gap: 7px; color: var(--cp-strong); cursor: pointer; } .cp-tx-warnlist summary svg { color: var(--cp-warning); } .cp-tx-warnlist ul { margin: 8px 0 0; padding-left: 20px; color: var(--cp-muted); line-height: 1.6; } /* Einstellungen */ .cp-tx-srow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); align-items: center; gap: 8px 24px; padding: 12px 0; border-top: 1px solid var(--cp-line); } .cp-tx-set > header + .cp-tx-srow { border-top: 0; padding-top: 0; } .cp-tx-srow > div:first-child { display: grid; gap: 3px; } .cp-tx-srow b { color: var(--cp-strong); font-size: 13px; font-weight: 500; } .cp-tx-srow small { color: var(--cp-muted); font-size: 12px; line-height: 1.45; } .cp-tx-sctl { display: flex; justify-content: flex-end; } .cp-tx-sctl > select, .cp-tx-sctl > input { width: 100%; } .cp-tx-unit { position: relative; display: block; width: 100%; } .cp-tx-unit i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--cp-muted); font-style: normal; pointer-events: none; } .cp-tx-unit input { padding-right: 30px !important; text-align: right; } .cp-tx-mono { font-family: var(--cp-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; } .cp-tx-accs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; } .cp-tx-acc { display: grid; gap: 5px; margin: 0; } .cp-tx-acc > span { color: var(--cp-text); font-size: 12.5px; font-weight: 500; } .cp-tx-src { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-muted); font-size: 10.5px; font-style: normal; font-weight: 500; } .cp-tx-set .form-control.is-invalid { border-color: var(--cp-danger) !important; } .cp-tx-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; padding: 10px 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); } .cp-tx-savebar > span { margin-right: auto; } .cp-tx-savebar.is-dirty { border-color: var(--cp-rust-line); } .cp-tx-savebar.is-dirty > span { color: var(--cp-strong); } /* v5.155.0 · Anlagen (AfA) im Reiter „Anlagen“ */ .cp-tx-barr { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } .cp-an-tbl td { vertical-align: top; } .cp-an-sub { display: block; margin-top: 2px; color: var(--cp-muted); font-size: 11.5px; } .cp-an-st { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--cp-line-2); color: var(--cp-muted); font-size: 10.5px; font-style: normal; font-weight: 600; } .cp-an-act { white-space: nowrap; text-align: right; } html[data-theme]:not(#cp):not(#cq) body .cp-an-act .cp-bk-lnk { margin-left: 10px; font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-an-sub .cp-bk-lnk { font-size: 11.5px; } .cp-an-plan { max-width: 560px; margin: 8px 0 0; } .cp-an-prev { display: grid; gap: 4px; margin: 12px 0 0; color: var(--cp-text); font-size: 12.5px; line-height: 1.5; } .cp-an-prev b { color: var(--cp-strong); } .cp-an-hint { color: var(--cp-warning); } .cp-an-disp { padding-top: 10px; } .cp-an-disp > .ta-hint { margin: 8px 0 0; } .cp-an-form .cp-qc-grid input:disabled { opacity: .5; } /* v5.156.0 · Zusammenfassende Meldung (Reiter „ZM“) und USt-IdNr.-Prüfung */ .cp-zm-tbl td { vertical-align: middle; } .cp-zm-tbl td a { color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-zm-tbl td a:hover { color: var(--cp-rust-hi); } .cp-zm-v { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } html[data-theme]:not(#cp):not(#cq) body .cp-zm-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } html[data-theme]:not(#cp):not(#cq) body .cp-zm-chk:disabled { opacity: .5; cursor: wait; } html[data-theme]:not(#cp):not(#cq) body select.form-control.cp-zm-kind { width: auto; min-width: 210px; height: 30px; padding: 0 28px 0 9px; font-size: 12.5px; } .cp-zm-empty { margin: 4px 0 0; } /* v5.157.0 · Kassenbuch (#/kassenbuch) */ .cp-kb-name { display: inline-flex; align-items: center; gap: 8px; color: var(--cp-strong); font-size: 13.5px; font-weight: 600; } .cp-kb-tbl td { vertical-align: top; } .cp-kb-text { color: var(--cp-strong); } .cp-kb-tbl tr.is-off td:not(.cp-an-act) { color: var(--cp-dim); } .cp-kb-tbl tr.is-off .cp-kb-text, .cp-kb-tbl tr.is-off td.is-num { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cp-muted) 55%, transparent); } .cp-kb-tbl tr.is-rev .cp-kb-text { color: var(--cp-warning); } .cp-kb-carry td { color: var(--cp-muted); } .cp-kb-stform { display: grid; gap: 8px; max-width: 760px; padding: 8px 0 2px; } .cp-kb-stform .ta-hint { margin: 0; } .cp-qc-grid.cp-kb-coins { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 6px; } .cp-kb-cointxt { margin: 12px 0 0; } .cp-kb-sum, .cp-kb-prev { margin: 12px 0 0; color: var(--cp-text); font-size: 13px; line-height: 1.5; } .cp-kb-sum b, .cp-kb-prev b { color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-kb-okt { color: var(--cp-success); } .cp-kb-diff { color: var(--cp-warning); } .cp-tx-c.is-bad .cp-tx-c-i { background: color-mix(in srgb, var(--cp-danger) 14%, transparent); color: var(--cp-danger); } .cp-kb-cl { margin-top: 10px; } /* v5.158.0 · BWA (Reiter „BWA“ in Steuern & Export) */ .cp-bw-tbl td, .cp-bw-tbl th { white-space: nowrap; } .cp-bw-tbl td:first-child { white-space: normal; min-width: 220px; } html[data-theme]:not(#cp):not(#cq) body .cp-bw-line { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0 !important; background: none !important; color: inherit !important; font: inherit; text-align: left; cursor: pointer; box-shadow: none !important; } .cp-bw-line svg { flex: none; color: var(--cp-dim); transition: transform var(--cp-dur-s, .15s) var(--cp-ease, ease); } .cp-bw-line[aria-expanded="true"] svg { transform: rotate(90deg); } html[data-theme]:not(#cp):not(#cq) body .cp-bw-line:hover span { color: var(--cp-rust-hi); } .cp-bw-lab { padding-left: 19px; } .cp-bw-tbl tr.is-total .cp-bw-lab { padding-left: 0; } .cp-bw-p, .cp-bw-v { color: var(--cp-muted); } .cp-bw-tbl tr.cp-bw-res td { background: color-mix(in srgb, var(--cp-text) 4%, transparent); } .cp-bw-tbl tr.cp-bw-sub td { padding-top: 5px; padding-bottom: 5px; color: var(--cp-muted); font-size: 12.5px; } .cp-bw-tbl tr.cp-bw-sub td:first-child { padding-left: 38px; } .cp-tx-chart > div.is-sel small { color: var(--cp-strong); font-weight: 700; } .cp-tx-chart > div.is-future { opacity: .35; } .cp-bw-map summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; } .cp-bw-map summary::-webkit-details-marker { display: none; } .cp-bw-map summary b { color: var(--cp-strong); font-size: 14px; font-weight: 600; } .cp-bw-map[open] summary { margin-bottom: 10px; } /* v5.159.0 · GoBD-Export (Reiter DATEV-Export) */ .cp-gb-txt { margin: 0; line-height: 1.55; } .cp-gb-res { margin-top: 14px; } /* v5.160.0 · Offene Posten (Reiter in Steuern & Export) */ html[data-theme]:not(#cp):not(#cq) body .ta-sel input.cp-op-date { height: 34px; padding: 0 6px 0 0; border: 0 !important; background: none !important; color: var(--cp-strong) !important; font: 500 13px/1 var(--cp-font, inherit); box-shadow: none !important; color-scheme: dark; } html[data-theme="light"]:not(#cp):not(#cq) body .ta-sel input.cp-op-date { color-scheme: light; } .cp-op-age { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .cp-op-b { display: grid; gap: 4px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); } .cp-op-b small { color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .cp-op-b b { color: var(--cp-strong); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .cp-op-b em { color: var(--cp-muted); font-size: 11.5px; font-style: normal; } .cp-op-bar { display: block; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 8%, transparent); overflow: hidden; } .cp-op-bar i { display: block; height: 100%; border-radius: 999px; background: var(--cp-muted); } .cp-op-b.is-d30 .cp-op-bar i { background: color-mix(in srgb, var(--cp-warning) 70%, transparent); } .cp-op-b.is-d60 .cp-op-bar i { background: var(--cp-warning); } .cp-op-b.is-d90 .cp-op-bar i { background: color-mix(in srgb, var(--cp-danger) 75%, transparent); } .cp-op-b.is-d90p .cp-op-bar i { background: var(--cp-danger); } .cp-op-tbl td, .cp-op-tbl th { white-space: nowrap; } .cp-op-tbl td:first-child { white-space: normal; min-width: 200px; } .cp-op-tbl tfoot td { border-top: 1px solid var(--cp-line-2); color: var(--cp-strong); font-weight: 600; } .cp-op-od { color: var(--cp-warning); } @media (max-width: 900px) { .cp-op-age { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* v5.162.0 · Anlage EÜR (Reiter EÜR) */ .cp-ae-tbl tr.cp-ae-sec td { padding-top: 16px; color: var(--cp-strong); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--cp-line-2); } .cp-ae-tbl tr.is-nd td { color: var(--cp-muted); } .cp-ae-tbl td:nth-child(3) { min-width: 280px; } /* v5.172.0 · Zahlungsbedingungen (Einstellungen → Finanzen, Rechnungsformular) */ .cp-pt-table { display: grid; gap: 0; } .cp-pt-tr { display: grid; grid-template-columns: 96px 92px 84px 96px minmax(0, 1fr) 80px 96px; align-items: center; gap: 8px 10px; padding: 7px 0; border-bottom: 1px solid var(--cp-line); } .cp-pt-tr.is-head { padding-top: 0; color: var(--cp-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .cp-pt-tr.is-new { border-bottom: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-pt-tr .form-control { height: 36px; min-height: 36px; font-size: 13px; } /* v5.176.0 Textvorlagen (ca-settings.js, invoice-tools.js) */ .cp-tt-item { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--cp-line); } .cp-tt-item.is-new { border-bottom: 0; } .cp-tt-head { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) 70px 96px; align-items: center; gap: 8px 10px; } .cp-tt-item.is-new .cp-tt-head { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); } html[data-theme]:not(#cp):not(#cq) body .cp-tt-head .form-control { height: 36px; min-height: 36px; font-size: 13px; } .cp-tt-texts { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; } .cp-tt-texts label { display: grid; gap: 4px; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-tt-texts textarea.form-control, html[data-theme]:not(#cp):not(#cq) body .cp-dt-edit textarea.form-control { min-height: 84px !important; height: auto !important; line-height: 1.45 !important; resize: vertical; } .cp-tt-texts label > span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-cs-hint code { padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-strong); font-size: 12px; } @media (max-width: 767px) { .cp-tt-head, .cp-tt-item.is-new .cp-tt-head, .cp-tt-texts { grid-template-columns: minmax(0, 1fr); } } .cp-dt-field .cp-dt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .cp-dt-field .cp-dt-row select { flex: 1 1 220px; max-width: 360px; } .cp-dt-field .cp-bk-lnk { font-size: 12.5px; } .cp-dt-edit { display: grid; gap: 8px; margin-top: 8px; } .cp-dt-edit label { display: grid; gap: 4px; margin: 0; } .cp-dt-edit label > span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); } .cp-pt-def, .cp-pt-del { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 400; color: var(--cp-text); cursor: pointer; } .cp-pt-def input, .cp-pt-del input { margin: 0; accent-color: var(--cp-rust-hi); } .cp-pt-cl { font-size: 12px; color: var(--cp-muted); } @media (max-width: 900px) { .cp-pt-tr { grid-template-columns: 1fr 1fr 1fr; } .cp-pt-tr.is-head { display: none; } } .cp-pt-field .cp-pt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .cp-pt-field select { flex: 1 1 260px; } .cp-pt-field label.cp-pt-cdef { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: 12.5px; color: var(--cp-text); } /* v5.170.0 · Mahnlauf (Reiter Offene Posten) */ .cp-dn-n { margin-left: 4px; font-style: normal; font-size: 11px; color: var(--cp-muted); } .cp-dn-tbl td { vertical-align: top; } .cp-dn-tbl td:first-child { min-width: 180px; } .cp-dn-st { display: inline-flex; gap: 4px; align-items: center; } .cp-dn-st i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--cp-line-2); } .cp-dn-st i.is-on { background: var(--cp-rust-hi); border-color: var(--cp-rust-hi); } .cp-dn-next { max-width: 280px; font-size: 12.5px; color: var(--cp-text); } .cp-dn-due .cp-dn-next { color: var(--cp-warning); font-weight: 600; } .cp-dn-blocked td { color: var(--cp-muted); } .cp-dn-warn { color: var(--cp-warning) !important; } .cp-dn-form { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) !important; } @media (max-width: 767px) { .cp-dn-form { grid-template-columns: minmax(0, 1fr) !important; } } /* v5.173.0 SEPA-Lastschrift (taxes.js Offene Posten → Lastschrift, invoice-tools.js .cp-inv-dd) */ .cp-dd-tbl td { vertical-align: top; } .cp-dd-tbl td:nth-child(2) { min-width: 170px; } .cp-dd-tbl tr.is-off td { color: var(--cp-dim); } .cp-dd-tbl tr.is-sel td { background: color-mix(in srgb, var(--cp-rust-hi) 5%, transparent); } .cp-dd-tbl th.cp-dd-cb, .cp-dd-tbl td.cp-dd-cb { width: 34px; padding-right: 0; } .cp-dd-cb input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--cp-rust-hi); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-dd-date { width: 148px; height: 34px; padding: 4px 8px !important; border-radius: 3px !important; border: 1px solid var(--cp-line-2) !important; background: var(--cp-deep) !important; color: var(--cp-strong) !important; font: 500 13px/1.3 var(--cp-font, inherit) !important; box-shadow: none !important; color-scheme: dark; } html[data-theme="light"]:not(#cp):not(#cq) body .cp-dd-date { color-scheme: light; } html[data-theme]:not(#cp):not(#cq) body .cp-dd-date:focus { border-color: var(--cp-rust-line) !important; outline: 2px solid var(--cp-rust-soft); outline-offset: 0; } .cp-dd-hints { max-width: 300px; font-size: 12px; line-height: 1.4; } .cp-dd-hints span { display: block; color: var(--cp-warning); } .cp-dd-hints span + span { margin-top: 3px; } .cp-dd-hints span.is-err { color: var(--cp-danger); font-weight: 600; } .cp-dd-hints span.is-ready { color: var(--cp-success); } .cp-dd-run { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cp-line); } .cp-dd-run .ta-sel select { max-width: 320px; } .cp-dd-chk { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--cp-text); cursor: pointer; } .cp-dd-chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--cp-rust-hi); } .cp-qc-grid label.cp-dd-chk { flex-direction: row; align-items: center; } .cp-qc-grid label.cp-dd-chk > span { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--cp-text); } html[data-theme]:not(#cp):not(#cq) body .cp-qc-grid label.cp-dd-chk input { width: 16px; min-height: 0; height: 16px; padding: 0 !important; } .cp-dd-sum { font-size: 13px; color: var(--cp-muted); align-self: center; } .cp-dd-sum b { color: var(--cp-strong); } .cp-dd-one { grid-template-columns: minmax(0, 1fr) !important; } .cp-dd-form .cp-tx-actions .ta-hint { flex: 1 1 260px; } .cp-dd-files { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .cp-dd-files > li { padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); } .cp-dd-files > li.is-open { border-color: var(--cp-line-2); } .cp-dd-fh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .cp-dd-fh .cp-bw-line span { display: flex; flex-direction: column; gap: 2px; } .cp-dd-fh .cp-bw-line small { color: var(--cp-muted); font-size: 12px; } .cp-dd-fs { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; } .cp-dd-fs b { color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-dd-files .cp-tx-items > li .cp-tx-chip { height: 22px; font-size: 11.5px; } .cp-dd-retf { flex: 1 1 100%; margin-top: 6px; } .cp-inv-dd svg { color: var(--cp-info); } .cp-inv-dd.is-done svg { color: var(--cp-success); } .cp-inv-dd.is-late svg { color: var(--cp-warning); } @media (max-width: 767px) { .cp-dd-fs { margin-left: 0; } .cp-dd-run .cp-tx-barr { margin-left: 0; } } /* v5.169.0 · Kostenstellen (Reiter BWA) */ .cp-ko-tbl td { vertical-align: middle; } .cp-ko-tbl td:first-child { min-width: 200px; } .cp-ko-no { margin-left: 6px; color: var(--cp-muted); font-size: 11.5px; } .cp-ko-barh { width: 18%; } .cp-ko-bar { min-width: 90px; } .cp-ko-bar i { display: block; height: 6px; border-radius: 3px; background: var(--cp-success); } .cp-ko-bar i.is-neg { background: var(--cp-danger); } .cp-ko-neg { color: var(--cp-danger); } .cp-ko-none td { color: var(--cp-muted); } .cp-ko-tbl tfoot td { border-top: 1px solid var(--cp-line-2); font-weight: 600; color: var(--cp-strong); } /* v5.164.0 · Lieferanten (Belegeingang) */ .cp-vd-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 12px; } .cp-vd-tbl td { vertical-align: top; } .cp-vd-tbl .is-num { text-align: right; white-space: nowrap; } .cp-vd-tbl td:first-child { min-width: 220px; } .cp-vd-tbl td.cp-vd-std { min-width: 170px; max-width: 280px; white-space: normal; color: var(--cp-text); font-size: 12.5px; } .cp-vd-tbl td.cp-tx-mono { padding-left: 14px; } .cp-vd-warn { border-color: color-mix(in srgb, var(--cp-warning) 55%, transparent) !important; color: var(--cp-warning) !important; } .cp-vd-form { padding: 8px 0 4px; } .cp-vd-form > .ta-hint { margin: 10px 0 0; } .cp-vd-merge { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } html[data-theme]:not(#cp):not(#cq) body .cp-vd-merge select { height: 34px; padding: 0 28px 0 9px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); color: var(--cp-strong); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-vd-del { color: var(--cp-danger) !important; } .cp-vd-warn-t { color: var(--cp-warning); } .cp-vd-warn-t svg { vertical-align: -2px; } @media (max-width: 1100px) { .cp-tx-periods { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cp-tx-accs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-tx-form { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .cp-tx-periods { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cp-tx-periods.is-q { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-tx-srow { grid-template-columns: minmax(0, 1fr); } .cp-tx-sctl { justify-content: stretch; } .cp-tx-accs { grid-template-columns: minmax(0, 1fr); } .cp-tx-tabs { width: 100%; overflow-x: auto; } .cp-tx-range { flex-wrap: wrap; } .cp-tx-range input { max-width: none; flex: 1 1 140px; } .cp-tx-it-a { margin-left: 0; } } /* --------------------------------------------------------------------------- v5.149.0 · Belegeingang (receipts.js, #/belege): Hochladen per Ziehen/Kamera, KI-Erkennung, Prüfen mit Vorschau, Buchen --------------------------------------------------------------------------- */ .cp-rc-page { position: relative; } .cp-rc-dropmask { position: fixed; inset: 0; z-index: 4000; display: none; place-items: center; background: rgba(4,5,8,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; } .cp-rc-page.is-drop .cp-rc-dropmask { display: grid; } .cp-rc-dropmask > span { display: grid; justify-items: center; gap: 8px; padding: 34px 48px; border-radius: 3px; border: 2px dashed var(--cp-rust-hi); background: var(--cp-surface); color: var(--cp-strong); text-align: center; } .cp-rc-dropmask svg { color: var(--cp-rust-hi); } .cp-rc-dropmask b { font-size: 16px; font-weight: 600; } .cp-rc-dropmask small { color: var(--cp-muted); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body label.ta-btn { margin: 0; cursor: pointer; } .cp-rc-cam { display: none !important; } @media (pointer: coarse) { .cp-rc-cam { display: inline-flex !important; } } .cp-rc-list { list-style: none; } .cp-rc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--cp-line); } .cp-rc-row:last-child { border-bottom: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-rc-main { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 4px; border: 0; border-radius: 3px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; } html[data-theme]:not(#cp):not(#cq) body .cp-rc-main:hover { background: color-mix(in srgb, var(--cp-text) 4%, transparent); } .cp-rc-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); color: var(--cp-muted); } .cp-rc-who { display: grid; gap: 2px; min-width: 0; } .cp-rc-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } .cp-rc-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--cp-muted); } .cp-rc-err { font-style: normal; font-size: 11.5px; color: var(--cp-warning); } .cp-rc-err.is-soft { color: var(--cp-dim); } .cp-rc-amt { display: grid; justify-items: end; font-size: 14px; font-weight: 600; color: var(--cp-strong); font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-rc-amt small { font-size: 11px; font-weight: 400; color: var(--cp-dim); } .cp-rc-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; max-width: 520px; } .cp-rc-side .cp-bk-act { margin-top: 0; } .cp-rc-st, .cp-rc-bank, .cp-rc-due { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--cp-line-2); font-size: 11.5px; font-weight: 600; color: var(--cp-muted); white-space: nowrap; } .cp-rc-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-dim); } .cp-rc-st.is-ready { color: var(--cp-strong); border-color: var(--cp-rust-line); } .cp-rc-st.is-ready::before { background: var(--cp-rust-hi); } .cp-rc-st.is-done { color: var(--cp-strong); border-color: color-mix(in srgb, var(--cp-success) 45%, transparent); } .cp-rc-st.is-done::before { background: var(--cp-success); } .cp-rc-st.is-warn, .cp-rc-due.is-late { color: var(--cp-warning); border-color: color-mix(in srgb, var(--cp-warning) 45%, transparent); } .cp-rc-st.is-warn::before { background: var(--cp-warning); } .cp-rc-st.is-busy::before { background: var(--cp-rust-hi); animation: cp-rc-pulse 1s ease-in-out infinite; } @keyframes cp-rc-pulse { 50% { opacity: .25; } } .cp-rc-bank svg { color: var(--cp-rust-hi); } .cp-rc-bank.is-sure { border-color: color-mix(in srgb, var(--cp-success) 45%, transparent); } .cp-rc-bank.is-sure svg { color: var(--cp-success); } .cp-rc-booked { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cp-muted); } .cp-rc-booked svg { color: var(--cp-success); } .cp-rc-busy { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cp-muted); } .cp-rc-busy i { width: 40px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--cp-rust-hi), transparent); background-size: 200% 100%; animation: taSk 1.2s linear infinite; } .cp-rc-row.st-booked .cp-rc-who b, .cp-rc-row.st-discarded .cp-rc-who b { color: var(--cp-muted); } /* Prüfen-Dialog: Vorschau links, Formular rechts */ .cp-qc-dlg.cp-rc-dlg .cp-qc-box { width: min(1180px, 100%); } /* v5.151.0: vorher von .cp-bk-dlg (720 px, steht weiter unten) überschrieben */ .cp-rc-dlg.cp-qc-dlg { padding-top: min(5vh, 40px); } .cp-rc-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; padding: 4px 20px 20px; } .cp-rc-prev { min-height: 520px; height: min(72vh, 820px); border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); overflow: hidden; display: grid; place-items: center; } .cp-rc-prev iframe { width: 100%; height: 100%; border: 0; background: #fff; } .cp-rc-prev img { max-width: 100%; max-height: 100%; object-fit: contain; } .cp-rc-form { min-width: 0; } .cp-rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-rc-calc { margin: 8px 0 0; font-size: 12px; color: var(--cp-dim); font-variant-numeric: tabular-nums; } .cp-rc-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 9px 11px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cp-warning) 45%, transparent); background: color-mix(in srgb, var(--cp-warning) 10%, transparent); font-size: 12.5px; line-height: 1.45; color: var(--cp-text); } .cp-rc-hint svg { flex: none; margin-top: 2px; color: var(--cp-warning); } /* v5.151.0 · E-Rechnungen (XRechnung/ZUGFeRD): Kennzeichen in der Liste, lesbare Darstellung, Umschalter PDF / E-Rechnung */ .cp-rc-ico.is-ei { color: var(--cp-info); } .cp-rc-hint.is-ok { border-color: color-mix(in srgb, var(--cp-success) 40%, transparent); background: color-mix(in srgb, var(--cp-success) 8%, transparent); } .cp-rc-hint.is-ok svg { color: var(--cp-success); } .cp-rc-eichip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cp-info) 45%, transparent); color: var(--cp-info); font-size: 11px; font-weight: 600; white-space: nowrap; } .cp-rc-prev.is-ei, .cp-rc-pane.is-ei { display: block; place-items: initial; overflow: auto; padding: 16px 18px; background: var(--cp-surface); } .cp-rc-prev.has-tabs { display: flex; flex-direction: column; place-items: initial; } .cp-rc-ptabs { flex: none; align-self: flex-start; margin: 8px; } .cp-rc-pane { flex: 1; min-height: 0; display: grid; place-items: center; } .cp-rc-pane[hidden] { display: none !important; } .cp-rc-pane iframe { width: 100%; height: 100%; border: 0; background: #fff; } .cp-rc-pane img { max-width: 100%; max-height: 100%; object-fit: contain; } .cp-ei { display: grid; gap: 14px; font-size: 12.5px; color: var(--cp-text); } .cp-ei-h { display: grid; gap: 6px; } .cp-ei-h h4 { margin: 0; color: var(--cp-strong); font-size: 16px; font-weight: 600; } .cp-ei-badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 22px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--cp-success) 14%, transparent); color: var(--cp-success); font-size: 11px; font-weight: 600; } .cp-ei-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cp-ei-parties section { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); } .cp-ei-parties small { color: var(--cp-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .cp-ei-parties b { color: var(--cp-strong); font-size: 13px; font-weight: 600; } .cp-ei-parties span { color: var(--cp-muted); line-height: 1.45; } .cp-ei-parties i { color: var(--cp-text); font-style: normal; } .cp-ei-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; margin: 0; } .cp-ei-facts dt { color: var(--cp-muted); font-size: 11px; font-weight: 500; } .cp-ei-facts dd { margin: 1px 0 0; color: var(--cp-strong); word-break: break-word; } .cp-ei .ta-tbl { font-size: 12px; } .cp-ei .ta-tbl th.is-num, .cp-ei .ta-tbl td.is-num { text-align: right; white-space: nowrap; } .cp-ei .ta-tbl td { white-space: normal; vertical-align: top; } .cp-ei .ta-tbl td small { display: block; margin-top: 2px; color: var(--cp-muted); font-size: 11.5px; } .cp-ei-tot { display: grid; gap: 4px; justify-self: end; min-width: min(300px, 100%); margin: 0; } .cp-ei-tot > div { display: flex; justify-content: space-between; gap: 18px; font-variant-numeric: tabular-nums; } .cp-ei-tot dt { color: var(--cp-muted); font-weight: 400; } .cp-ei-tot dd { margin: 0; color: var(--cp-strong); } .cp-ei-tot .is-pay { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--cp-line-2); } .cp-ei-tot .is-pay dt, .cp-ei-tot .is-pay dd { color: var(--cp-strong); font-size: 14px; font-weight: 600; } .cp-ei-sub { margin: 4px 0 -4px; color: var(--cp-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .cp-ei-notes { margin: 0; color: var(--cp-text); line-height: 1.5; white-space: pre-line; } @media (max-width: 767px) { .cp-ei-parties { grid-template-columns: minmax(0, 1fr); } } .cp-rc-iban { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 12px 0 0; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--cp-line); font-size: 12.5px; } .cp-rc-iban span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-dim); } .cp-rc-iban b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--cp-strong); } /* v5.152.0 · IBAN im Beleg bearbeitbar; „Zu bezahlen“ mit Auswahl und SEPA-Sammelüberweisung (pain.001) */ .cp-rc-iban > label { display: grid; gap: 5px; flex: 1 1 260px; margin: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-rc-ibanin { width: 100%; height: 36px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); color: var(--cp-strong); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .02em; } html[data-theme]:not(#cp):not(#cq) body .cp-rc-ibanin:focus { outline: none; border-color: var(--cp-rust-hi); } .cp-rc-list.is-due .cp-rc-row { grid-template-columns: 26px minmax(0, 1fr) auto; } .cp-rc-pick { display: grid; place-items: center; margin: 0; cursor: pointer; } .cp-rc-pick input, .cp-rc-pickall input { width: 16px; height: 16px; margin: 0; accent-color: var(--cp-rust-hi); cursor: pointer; } .cp-rc-pick input:disabled { cursor: not-allowed; opacity: .4; } .cp-rc-sepabar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 10px; padding: 10px 14px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-surface); } .cp-rc-pickall { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--cp-text); font-size: 12.5px; cursor: pointer; } .cp-rc-picksum { margin-right: auto; color: var(--cp-strong); font-size: 12.5px; font-variant-numeric: tabular-nums; } .cp-rc-sepa { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cp-info) 45%, transparent); color: var(--cp-info); font-size: 11.5px; font-weight: 500; white-space: nowrap; } .cp-rc-sepalist ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .cp-rc-sepalist li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 10px; border-radius: 3px; background: color-mix(in srgb, var(--cp-text) 2.5%, transparent); font-size: 12.5px; } .cp-rc-sepalist li > span { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; color: var(--cp-muted); } .cp-rc-sepalist li > span b { color: var(--cp-strong); font-weight: 600; } .cp-rc-sepaamt { color: var(--cp-strong); font-variant-numeric: tabular-nums; } .cp-qc-dlg.cp-rc-sepadlg .cp-qc-box { width: min(900px, 100%); } .cp-rc-sepabody { padding: 4px 20px 20px; } .cp-rc-sepahead { margin-bottom: 12px; } .cp-rc-sepaitems { display: grid; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; } .cp-rc-sepaitems > li { display: grid; grid-template-columns: 22px minmax(0, 1.1fr) minmax(0, 1fr) 120px; align-items: start; gap: 10px 12px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); } .cp-rc-sepaitems > li .cp-rc-pick { padding-top: 6px; } .cp-rc-sepaitems > li.is-bad { opacity: .6; } .cp-rc-sepaitems > li.is-fraud { border-color: color-mix(in srgb, var(--cp-danger) 55%, transparent); } .cp-rc-sepawho { display: grid; gap: 3px; min-width: 0; } .cp-rc-sepawho b { color: var(--cp-strong); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-rc-sepawho small { color: var(--cp-muted); font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .cp-rc-separef, .cp-rc-sepaamt-in { display: grid; gap: 4px; margin: 0; } .cp-rc-separef span, .cp-rc-sepaamt-in span { color: var(--cp-dim, var(--cp-muted)); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-rc-separef, .cp-rc-sepaamt-in) input { width: 100%; height: 34px; padding: 0 9px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-strong); font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-rc-sepaamt-in input { text-align: right; font-variant-numeric: tabular-nums; } html[data-theme]:not(#cp):not(#cq) body :is(.cp-rc-separef, .cp-rc-sepaamt-in) input:focus { outline: none; border-color: var(--cp-rust-hi); } .cp-rc-sepatotal { margin: 0 0 12px; color: var(--cp-muted); font-size: 13px; text-align: right; } .cp-rc-sepatotal b { color: var(--cp-strong); } /* v5.153.0 · Belege per E-Mail (Gmail-Label) */ .cp-rc-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 10px 14px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-surface); color: var(--cp-muted); font-size: 12.5px; } .cp-rc-mail > svg { flex: none; color: var(--cp-info); } .cp-rc-mail > span { flex: 1 1 320px; line-height: 1.5; } .cp-rc-mail b { color: var(--cp-strong); font-weight: 600; } .cp-rc-mail i { color: var(--cp-text); font-style: normal; } .cp-rc-mail.is-off > svg { color: var(--cp-dim, var(--cp-muted)); } .cp-rc-src { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--cp-line-2); color: var(--cp-muted); font-size: 11.5px; white-space: nowrap; } .cp-qc-dlg.cp-rc-maildlg .cp-qc-box { width: min(560px, 100%); } .cp-rc-maildlg .cp-bk-note { margin-top: 12px; } .cp-qc-grid label.cp-rc-mailauto { flex-direction: row; align-items: flex-start; gap: 9px; cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-qc-grid .cp-rc-mailauto input[type="checkbox"] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; padding: 0 !important; border: 0 !important; background: none; outline: none; accent-color: var(--cp-rust-hi); } .cp-qc-grid label.cp-rc-mailauto span { flex: 1; min-width: 0; line-height: 1.45; } .cp-qc-grid label.cp-rc-mailauto span { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 400; color: var(--cp-text); } @media (max-width: 767px) { .cp-rc-list.is-due .cp-rc-row { grid-template-columns: 26px minmax(0, 1fr); } .cp-rc-list.is-due .cp-rc-side { grid-column: 2; } .cp-rc-sepaitems > li { grid-template-columns: 22px minmax(0, 1fr); } .cp-rc-separef, .cp-rc-sepaamt-in { grid-column: 2; } .cp-rc-sepabody { padding: 4px 12px 14px; } } .cp-rc-banks { display: grid; gap: 6px; } .cp-rc-banks .cp-bk-reason span { display: grid; gap: 2px; } .cp-rc-banks .cp-bk-reason small { font-size: 11.5px; color: var(--cp-dim); } .cp-rc-banks .cp-bk-lv { margin-left: 6px; vertical-align: middle; } .cp-rc-form .cp-inv-dlg-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--cp-line); } @media (max-width: 980px) { .cp-rc-split { grid-template-columns: minmax(0, 1fr); } .cp-rc-prev { min-height: 320px; height: 46vh; } .cp-rc-row { grid-template-columns: minmax(0, 1fr); } .cp-rc-side { justify-content: flex-start; max-width: none; } } @media (max-width: 560px) { html[data-theme]:not(#cp):not(#cq) body .cp-rc-main { grid-template-columns: 34px minmax(0, 1fr); } .cp-rc-main .cp-rc-amt { grid-column: 2; justify-items: start; } .cp-rc-grid { grid-template-columns: minmax(0, 1fr); } .cp-rc-split { padding: 4px 12px 14px; } } /* --------------------------------------------------------------------------- v5.148.0 · Bankabgleich (bank.js, #/bankabgleich): Umsätze mit Vorschlägen, Import, Zuordnen/Aufteilen, Ohne Beleg --------------------------------------------------------------------------- */ html[data-theme]:not(#cp):not(#cq) body .ta-btn.cp-bk-primary { border-color: transparent !important; background: linear-gradient(135deg, var(--cp-rust-hi), var(--cp-rust)) !important; color: #fff !important; } html[data-theme]:not(#cp):not(#cq) body .ta-btn.cp-bk-primary:hover { filter: brightness(1.06); } html[data-theme]:not(#cp):not(#cq) body .ta-btn:disabled { opacity: .55; cursor: wait; } .cp-bk-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); } .cp-bk-note svg { flex: none; margin-top: 2px; color: var(--cp-rust-hi); } .cp-bk-note b { color: var(--cp-strong); font-weight: 600; } .cp-bk-empty { display: grid; justify-items: center; gap: 10px; padding: 36px 24px; text-align: center; } .cp-bk-empty p { max-width: 560px; margin: 0; color: var(--cp-muted); font-size: 13px; line-height: 1.55; } .cp-bk-empty-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-bk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } .cp-bk-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-surface); color: var(--cp-dim); } .cp-bk-search.is-wide { flex: none; width: 100%; margin-bottom: 8px; } .cp-bk-search:focus-within { border-color: var(--cp-rust-line); } html[data-theme]:not(#cp):not(#cq) body .cp-bk-search input { flex: 1; min-width: 0; height: 34px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--cp-strong) !important; font: 400 13px/1 var(--cp-font, inherit); } .cp-bk-list { list-style: none; margin: 0 0 14px; padding: 0; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-surface); } .cp-bk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 42%); align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--cp-line); } .cp-bk-row:last-child { border-bottom: 0; } html[data-theme]:not(#cp):not(#cq) body .cp-bk-main { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 4px; border: 0; border-radius: 3px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; } html[data-theme]:not(#cp):not(#cq) body .cp-bk-main:hover { background: color-mix(in srgb, var(--cp-text) 4%, transparent); } .cp-bk-date { display: grid; justify-items: center; line-height: 1.1; font-variant-numeric: tabular-nums; } .cp-bk-date b { font-size: 14px; font-weight: 600; color: var(--cp-strong); } .cp-bk-date small { font-size: 10.5px; color: var(--cp-dim); } .cp-bk-who { display: grid; min-width: 0; gap: 2px; } .cp-bk-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--cp-strong); } .cp-bk-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--cp-muted); } .cp-bk-amt { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .cp-bk-row.is-in .cp-bk-amt, .cp-bk-amt.is-in { color: var(--cp-success); } .cp-bk-row.is-out .cp-bk-amt, .cp-bk-amt.is-out { color: var(--cp-strong); } .cp-bk-row.st-matched .cp-bk-who b, .cp-bk-row.st-ignored .cp-bk-who b { color: var(--cp-muted); } .cp-bk-sug { display: grid; gap: 4px; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); font-size: 12.5px; color: var(--cp-text); } .cp-bk-sug p { margin: 0; line-height: 1.45; } .cp-bk-sug p b { color: var(--cp-strong); font-weight: 600; } .cp-bk-sug > small { font-size: 11.5px; color: var(--cp-dim); line-height: 1.4; } .cp-bk-sug.is-sure { border-color: color-mix(in srgb, var(--cp-success) 45%, transparent); } .cp-bk-sug.is-likely { border-color: var(--cp-rust-line); } .cp-bk-sug.is-none { grid-template-columns: minmax(0, 1fr); color: var(--cp-muted); } .cp-bk-lv { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--cp-line-2); color: var(--cp-muted); } .cp-bk-sug.is-sure .cp-bk-lv, .cp-bk-lv.is-sure { border-color: color-mix(in srgb, var(--cp-success) 50%, transparent); color: var(--cp-success); } .cp-bk-sug.is-likely .cp-bk-lv, .cp-bk-lv.is-likely { border-color: var(--cp-rust-line); color: var(--cp-rust-hi); } .cp-bk-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } html[data-theme]:not(#cp):not(#cq) body .cp-bk-act .ta-btn { height: 32px; padding: 0 11px; font-size: 12.5px; } html[data-theme]:not(#cp):not(#cq) body .cp-bk-lnk { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; border: 0; border-radius: 3px; background: none; color: var(--cp-muted); font: 500 12.5px/1 var(--cp-font, inherit); cursor: pointer; } html[data-theme]:not(#cp):not(#cq) body .cp-bk-lnk:hover { color: var(--cp-strong); background: color-mix(in srgb, var(--cp-text) 6%, transparent); } .cp-bk-done { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cp-muted); } .cp-bk-done > svg { flex: none; color: var(--cp-success); } .cp-bk-done.is-skip > svg, .cp-bk-done.is-busy > svg { color: var(--cp-dim); } .cp-bk-done > span { flex: 1; display: grid; gap: 2px; min-width: 0; } .cp-bk-done small { color: var(--cp-dim); font-size: 11.5px; } .cp-bk-none { display: flex; align-items: center; gap: 10px; color: var(--cp-muted); font-size: 13px; } .cp-bk-none svg { color: var(--cp-success); } .cp-bk-pager { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--cp-muted); font-size: 12.5px; } /* Dialoge */ .cp-bk-dlg .cp-qc-box { width: min(720px, 100%); } .cp-bk-dlg-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-rust-hi); } .cp-bk-dlg-body { padding: 4px 20px 20px; } .cp-bk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--cp-line); background: var(--cp-deep); } .cp-bk-facts > div { display: grid; gap: 2px; min-width: 0; } .cp-bk-facts > div.is-wide { grid-column: 1 / -1; } .cp-bk-facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-dim); } .cp-bk-facts dd { margin: 0; font-size: 13px; color: var(--cp-strong); overflow-wrap: anywhere; } .cp-bk-facts dd small { display: block; font-size: 11.5px; color: var(--cp-muted); } .cp-bk-h { margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); } .cp-bk-cands, .cp-bk-pick, .cp-bk-alloc ul, .cp-bk-linked { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .cp-bk-cands li, .cp-bk-pick li, .cp-bk-alloc li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--cp-line); font-size: 12.5px; } .cp-bk-cands li > div, .cp-bk-pick li > span, .cp-bk-alloc li > span { flex: 1; min-width: 0; display: block; line-height: 1.45; } .cp-bk-cands li > div > small, .cp-bk-pick li > span > small { display: block; margin-top: 2px; } .cp-bk-cands small, .cp-bk-pick small { font-size: 11.5px; color: var(--cp-dim); } .cp-bk-cands b, .cp-bk-pick b, .cp-bk-alloc b { color: var(--cp-strong); font-weight: 600; } html[data-theme]:not(#cp):not(#cq) body .cp-bk-dlg .ta-btn { height: 32px; padding: 0 11px; font-size: 12.5px; flex: none; } .cp-bk-in { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; border-radius: 3px; border: 1px solid var(--cp-line-2); background: var(--cp-deep); } html[data-theme]:not(#cp):not(#cq) body .cp-bk-in input { width: 92px; height: 32px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: right; color: var(--cp-strong) !important; font: 600 13px/1 var(--cp-font, inherit); font-variant-numeric: tabular-nums; } .cp-bk-in em { font-style: normal; color: var(--cp-dim); font-size: 12px; } .cp-bk-sum { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; } .cp-bk-sum.is-ok { color: var(--cp-success); } .cp-bk-sum.is-bad { color: var(--cp-warning); } .cp-bk-muted { margin: 0; color: var(--cp-dim); font-size: 12.5px; } .cp-bk-state { margin: 0 0 8px; color: var(--cp-muted); font-size: 13px; } .cp-bk-linked li a { color: var(--cp-rust-hi); } .cp-bk-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--cp-line); } .cp-bk-reasons { display: grid; gap: 6px; margin: 0 0 12px; } .cp-bk-reason { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--cp-line); cursor: pointer; font-size: 13px; color: var(--cp-text); } .cp-bk-reason:has(input:checked) { border-color: var(--cp-rust-line); background: var(--cp-rust-soft); color: var(--cp-strong); } .cp-bk-reason input, .cp-bk-remember input { accent-color: var(--cp-rust-hi); } .cp-bk-remember { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 12.5px; color: var(--cp-muted); cursor: pointer; } .cp-bk-drop { position: relative; display: grid; justify-items: center; gap: 4px; margin: 0 0 14px; padding: 22px 16px; border-radius: 3px; border: 1px dashed var(--cp-line-2); background: var(--cp-deep); text-align: center; cursor: pointer; } .cp-bk-drop.is-over, .cp-bk-drop:focus-within { border-color: var(--cp-rust-hi); background: var(--cp-rust-soft); } .cp-bk-drop.has-file { border-style: solid; border-color: var(--cp-rust-line); } .cp-bk-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .cp-bk-drop-ico { color: var(--cp-rust-hi); } .cp-bk-drop b { font-size: 13.5px; color: var(--cp-strong); font-weight: 600; } .cp-bk-drop small { font-size: 11.5px; color: var(--cp-dim); } .cp-bk-drop em { font-style: normal; font-size: 12.5px; color: var(--cp-rust-hi); font-weight: 600; } .cp-bk-exhint { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 9px 11px; border-radius: 3px; border: 1px solid var(--cp-rust-line); background: var(--cp-rust-soft); font-size: 12.5px; line-height: 1.45; color: var(--cp-text); } .cp-bk-exhint svg { flex: none; margin-top: 2px; color: var(--cp-rust-hi); } /* Rückfragen (cpAsk): Zeilenumbrüche im Text zeigen (Liste der Zuordnungen) */ .cp-al-ask .cp-pe-sub { white-space: pre-line; } @media (max-width: 900px) { .cp-bk-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .cp-bk-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 560px) { html[data-theme]:not(#cp):not(#cq) body .cp-bk-main { grid-template-columns: 44px minmax(0, 1fr); } .cp-bk-main .cp-bk-amt { grid-column: 2; } .cp-bk-facts { grid-template-columns: minmax(0, 1fr); } .cp-bk-cands li, .cp-bk-pick li, .cp-bk-alloc li { flex-wrap: wrap; } .ta-kpis.cp-bk-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* v5.189.0 · Sprungleiste auf langen Belegseiten (table-columns.js „cp-dj“): unten mittig, wie Hinweise (cpToast) gestaltet */ html[data-theme]:not(#cp) body .cp-dj { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1035; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; margin: 0; border: 1px solid var(--cp-line-2); border-radius: 3px; background: var(--cp-surface-3); color: var(--cp-strong); font: 600 13px/1 var(--cp-font); box-shadow: var(--cp-shadow-pop); cursor: pointer; -webkit-tap-highlight-color: transparent; } html[data-theme]:not(#cp) body .cp-dj[hidden] { display: none; } html[data-theme]:not(#cp) body .cp-dj:hover { border-color: var(--cp-rust-hi, #E8552A); } html[data-theme]:not(#cp) body .cp-dj:focus-visible { outline: 2px solid var(--cp-rust-hi, #E8552A); outline-offset: 2px; } html[data-theme]:not(#cp) body .cp-dj svg { flex: none; margin: 0; color: var(--cp-rust-hi, #E8552A); transition: transform .2s ease; } html[data-theme]:not(#cp) body .cp-dj[data-dir="up"] svg { transform: rotate(180deg); } html[data-theme]:not(#cp) body .details-view-wrapper > :is(.details-view-left-section, .w-100, .details-view-right-section) { scroll-margin-top: 76px; } @media print { html[data-theme]:not(#cp) body .cp-dj { display: none !important; } } /* v5.195.0 · Zeitgesteuerter Rechnungsversand – „Später senden“ im Sendedialog und Hinweis auf der Rechnung */ .ca-sched { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid var(--cp-line-2, rgba(0,0,0,.12)); border-radius: 3px; background: var(--cp-surface-2, rgba(0,0,0,.02)); } .ca-sched-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--cp-strong, inherit); } .ca-sched-head strong { font-weight: 600; } .ca-sched-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ca-sched-row label { margin: 0; color: var(--cp-muted, #6b7280); font-size: 13px; } .ca-sched-row input.form-control { width: auto !important; min-width: 160px; border-radius: 3px !important; } .ca-sched-row input[type="time"].form-control { min-width: 120px; } .ca-sched-unit { color: var(--cp-muted, #6b7280); font-size: 13px; } .ca-sched-sum { margin: 12px 0 4px; color: var(--cp-strong, inherit); font-weight: 500; font-size: 13.5px; } .ca-sched-hint { margin: 0; color: var(--cp-muted, #6b7280); font-size: 12.5px; line-height: 1.5; } .ca-sched-warn { margin: 8px 0 0; color: var(--cp-warning, #B7791F); font-size: 12.5px; line-height: 1.45; } .cp-inv-sched { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--cp-line-2, rgba(0,0,0,.12)); border-left: 3px solid var(--cp-rust-hi, #E8552A); border-radius: 3px; background: var(--cp-surface-2, rgba(0,0,0,.02)); } .cp-inv-sched.is-failed { border-left-color: var(--cp-danger, #E5484D); } .cp-inv-sched-ic { flex: none; margin-top: 1px; color: var(--cp-rust-hi, #E8552A); } .cp-inv-sched.is-failed .cp-inv-sched-ic { color: var(--cp-danger, #E5484D); } .cp-inv-sched-t { flex: 1 1 auto; min-width: 0; } .cp-inv-sched-t b { display: block; color: var(--cp-strong, inherit); font-weight: 600; font-size: 14px; } .cp-inv-sched-t small { display: block; margin-top: 3px; color: var(--cp-muted, #6b7280); font-size: 12.5px; line-height: 1.5; } .cp-inv-sched-a { flex: none; display: flex; gap: 8px; } .cp-inv-sched-a button { height: 32px; padding: 0 12px; border: 1px solid var(--cp-line-2, rgba(0,0,0,.15)); border-radius: 3px; background: transparent; color: var(--cp-text, inherit); font-size: 12.5px; cursor: pointer; white-space: nowrap; } .cp-inv-sched-a button:hover { background: var(--cp-hover, rgba(0,0,0,.04)); color: var(--cp-strong, inherit); } .cp-inv-sched-a button:disabled { opacity: .5; cursor: default; } @media (max-width: 575px) { .cp-inv-sched { flex-wrap: wrap; } .cp-inv-sched-a { width: 100%; } } /* v5.196.0 · Rechnungslisten: geplanter bzw. fehlgeschlagener Versand */ .cp-inv-sched-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--cp-rust-line, rgba(232,85,42,.35)); border-radius: 3px; color: var(--cp-rust-hi, #E8552A); font-size: 11.5px; line-height: 18px; white-space: nowrap; vertical-align: 1px; } .cp-inv-sched-badge svg { width: 12px; height: 12px; } .cp-inv-sched-badge.is-failed { border-color: color-mix(in srgb, var(--cp-danger, #E5484D) 45%, transparent); color: var(--cp-danger, #E5484D); }