:root {
--sidebar-w: 260px;
--header-h: 60px;
/* Brand color */
--brand: #07a1e2;
--brand-light: #2cb5f0;
--brand-dark: #0689c2;
--brand-bg: rgba(7,161,226,0.08);
--brand-ring: rgba(7,161,226,0.35);
/* Semantic colors */
--blue: #07a1e2;
--blue-light: #2cb5f0;
--blue-bg: rgba(7,161,226,0.08);
--green: #22c55e;
--green-bg: #f0fdf4;
--red: #ef4444;
--red-bg: #fef2f2;
--orange: #f97316;
--orange-bg: #fff7ed;
--accent: #007aff;
/* Gray scale — Light Mode */
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;
--bg-main: #f1f5f9;
/* Surfaces — Light (soft frosted) */
--bg-body: #f1f5f9;
--bg-card: rgba(255,255,255,0.72);
--bg-card-hover: rgba(255,255,255,0.9);
--bg-input: rgba(255,255,255,0.85);
--bg-sidebar: rgba(255,255,255,0.6);
--bg-header: rgba(255,255,255,0.65);
--bg-modal: rgba(255,255,255,0.82);
--bg-modal-solid: #ffffff;
/* Borders — Light */
--border: rgba(148,163,184,0.25);
--border-light: rgba(148,163,184,0.12);
--border-glass: rgba(255,255,255,0.55);
/* Text — Light */
--text: #0f172a;
--text-secondary: #64748b;
--text-muted: #94a3b8;
/* Radii */
--radius: 14px;
--radius-lg: 20px;
--radius-sm: 10px;
/* Shadows — Light (soft, diffused) */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
--shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
--shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05);
/* Glass */
--glass-blur: blur(24px);
--glass-blur-heavy: blur(40px);
/* Font */
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
/* Semantic status */
--clr-ok-bg: rgba(34,197,94,0.1); --clr-ok-text: #16a34a;
--clr-err-bg: rgba(239,68,68,0.08); --clr-err-text: #dc2626; --clr-err-text2: #7f1d1d; --clr-err-border: rgba(239,68,68,0.2); --clr-err-row: rgba(239,68,68,0.06);
--clr-warn-bg: rgba(245,158,11,0.1); --clr-warn-border: rgba(245,158,11,0.2); --clr-warn-text: #b45309;
--clr-info-bg: rgba(7,161,226,0.08); --clr-info-border: rgba(7,161,226,0.2); --clr-info-text: #0689c2;
--clr-row-diff: rgba(239,68,68,0.05);
/* Controls */
--ctrl-bg: rgba(241,245,249,0.6);
--ctrl-border: rgba(148,163,184,0.3);
--ctrl-focus-ring: rgba(7,161,226,0.35);
--ctrl-radius: 8px;
--ctrl-padding: 8px 10px;
/* Badges */
--badge-draft-bg: rgba(148,163,184,0.12);
--badge-draft-text: #64748b;
--badge-draft-border: rgba(148,163,184,0.25);
--badge-final-bg: rgba(34,197,94,0.1);
--badge-final-text: #16a34a;
--badge-final-border: rgba(34,197,94,0.25);
--badge-contract-bg: rgba(7,161,226,0.1);
--badge-contract-text: #0689c2;
--badge-contract-border: rgba(7,161,226,0.25);
/* Labels */
--label-size: 11px;
--label-weight: 500;
--label-spacing: 0.06em;
--label-color: var(--text-muted);
/* Transition */
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
html.dark {
color-scheme: dark;
--brand: #2cb5f0;
--brand-light: #5ec8f5;
--brand-dark: #07a1e2;
--brand-bg: rgba(7,161,226,0.12);
--brand-ring: rgba(44,181,240,0.3);
--blue: #2cb5f0;
--blue-light: #5ec8f5;
--blue-bg: rgba(7,161,226,0.12);
--green: #4ade80;
--green-bg: rgba(34,197,94,0.12);
--red: #f87171;
--red-bg: rgba(239,68,68,0.12);
--orange: #fb923c;
--orange-bg: rgba(249,115,22,0.12);
--accent: #0a84ff;
--gray-50: #0b0f19;
--gray-100: #111827;
--gray-200: #1e293b;
--gray-300: #334155;
--gray-400: #94a3b8;
--gray-500: #cbd5e1;
--gray-600: #cbd5e1;
--gray-700: #e2e8f0;
--gray-800: #f1f5f9;
--gray-900: #f8fafc;
--bg-main: #0f1420;
--bg-body: #0b0f19;
--bg-card: rgba(17,24,39,0.88);
--bg-card-hover: rgba(30,41,59,0.75);
--bg-input: rgba(17,24,39,0.9);
--bg-sidebar: rgba(11,15,25,0.95);
--bg-header: rgba(11,15,25,0.92);
--bg-modal: rgba(17,24,39,0.92);
--bg-modal-solid: #111827;
--border: rgba(255,255,255,0.12);
--border-light: rgba(255,255,255,0.06);
--border-glass: rgba(255,255,255,0.14);
--text: #f8fafc;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow: 0 4px 12px rgba(0,0,0,0.3);
--shadow-md: 0 8px 24px rgba(0,0,0,0.4);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
--clr-ok-bg: rgba(34,197,94,0.12); --clr-ok-text: #4ade80;
--clr-err-bg: rgba(239,68,68,0.1); --clr-err-text: #f87171; --clr-err-text2: #fca5a5; --clr-err-border: rgba(239,68,68,0.2); --clr-err-row: rgba(239,68,68,0.08);
--clr-warn-bg: rgba(245,158,11,0.12); --clr-warn-border: rgba(245,158,11,0.2); --clr-warn-text: #fbbf24;
--clr-info-bg: rgba(44,181,240,0.1); --clr-info-border: rgba(44,181,240,0.2); --clr-info-text: #5ec8f5;
--clr-row-diff: rgba(239,68,68,0.06);
/* Controls — Dark */
--ctrl-bg: rgba(30,34,53,0.8);
--ctrl-border: rgba(255,255,255,0.12);
--ctrl-focus-ring: rgba(44,181,240,0.4);
/* Badges — Dark */
--badge-draft-bg: rgba(148,163,184,0.1);
--badge-draft-text: #94a3b8;
--badge-draft-border: rgba(148,163,184,0.2);
--badge-final-bg: rgba(74,222,128,0.12);
--badge-final-text: #4ade80;
--badge-final-border: rgba(74,222,128,0.2);
--badge-contract-bg: rgba(44,181,240,0.12);
--badge-contract-text: #5ec8f5;
--badge-contract-border: rgba(44,181,240,0.2);
}
/* Inter font loaded via in for non-blocking delivery */
* { margin:0; padding:0; box-sizing:border-box; }
/* Number-Input Spinner ausblenden wenn Suffix vorhanden */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
html { scroll-behavior:smooth; }
body {
font-family:var(--font); background:var(--bg-body); color:var(--text);
height:100vh; height:100dvh; display:flex; overflow:hidden;
transition:background var(--transition), color var(--transition);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
font-feature-settings:'cv02','cv03','cv04','cv11';
}
/* Ambient light mesh — Light mode: colorful gradient that shows through glass */
html::before {
content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(ellipse 900px 600px at 15% 8%, rgba(7,161,226,0.14), transparent 55%),
radial-gradient(ellipse 700px 500px at 78% 12%, rgba(139,92,246,0.10), transparent 55%),
radial-gradient(ellipse 800px 600px at 85% 75%, rgba(34,197,94,0.08), transparent 55%),
radial-gradient(ellipse 600px 500px at 25% 80%, rgba(245,158,11,0.07), transparent 55%);
}
/* Ambient glow — Dark mode: richer, deeper glows */
html.dark::before {
background:
radial-gradient(ellipse 900px 600px at 12% 8%, rgba(7,161,226,0.16), transparent 55%),
radial-gradient(ellipse 700px 500px at 75% 10%, rgba(139,92,246,0.12), transparent 55%),
radial-gradient(ellipse 800px 600px at 88% 72%, rgba(34,197,94,0.08), transparent 55%),
radial-gradient(ellipse 600px 500px at 20% 82%, rgba(245,158,11,0.06), transparent 55%);
}
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:var(--gray-400); background-clip:padding-box; }
/* Glass utility */
.glass {
background:var(--bg-card);
backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
border:1px solid var(--border-glass);
}
.glass-heavy {
backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
}
/* === Sidebar === */
.sidebar {
width:var(--sidebar-w); height:100vh; height:100dvh; position:fixed; left:0; top:0;
background:var(--bg-sidebar);
backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
border-right:1px solid var(--border-glass);
color:var(--text); display:flex; flex-direction:column;
z-index:100; transition:width var(--transition), background var(--transition);
}
.sidebar-brand {
padding:18px 20px 14px; border-bottom:1px solid var(--border-light);
display:flex; align-items:center; gap:0; flex-wrap:wrap;
}
.sb-brand-full { display:flex; align-items:center; }
.sb-brand-icon { display:none; }
.sb-dots { margin-left:auto; }
.sidebar-brand h1 { font-size:18px; font-weight:700; letter-spacing:-0.02em; }
.sidebar-brand .subtitle { font-size:11px; color:var(--text-muted); margin-top:2px; font-weight:500; }
.sidebar-nav { flex:1; padding:14px 10px; overflow-y:auto; }
.nav-section { margin-bottom:4px; }
.nav-section-title {
font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
color:var(--text-muted); padding:8px 14px 6px; user-select:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between;
}
.nav-section-title:hover { color:var(--text); }
.nav-section-title::after { content:''; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-135deg); transition:transform 0.2s; }
.nav-section.collapsed .nav-section-title::after { transform:rotate(45deg); }
.nav-section.collapsed .nav-item { display:none; }
.nav-section.collapsed .nav-item.active { display:flex; opacity:0.7; }
.sidebar.collapsed { width:52px !important; }
.sidebar.collapsed .sidebar-brand h1, .sidebar.collapsed .sidebar-brand .subtitle { display:none; }
.sidebar.collapsed .sidebar-nav { padding:8px 4px; }
.sidebar.collapsed .nav-section-title { display:none; }
.sidebar.collapsed .nav-item { padding:10px; justify-content:center; font-size:0; gap:0; }
.sidebar.collapsed .nav-item svg { width:20px; height:20px; }
.sidebar.collapsed .nav-item span, .sidebar.collapsed .nav-item .badge { display:none; }
.sidebar.collapsed .sidebar-footer { display:none; }
.sidebar.collapsed ~ .main { margin-left:52px; }
.sidebar-toggle { position:absolute; right:-12px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:101; box-shadow:var(--shadow); transition:all 0.2s; }
.sidebar-toggle:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
.sidebar-toggle svg { width:14px; height:14px; }
.nav-item {
display:flex; align-items:center; gap:11px; padding:10px 14px;
border-radius:var(--radius-sm); cursor:pointer; font-size:14px; font-weight:500;
color:var(--text-secondary); transition:all 0.2s ease; border:none; background:none;
width:100%; text-align:left; font-family:inherit;
}
.nav-item:hover { background:var(--brand-bg); color:var(--text); }
.nav-item.active {
background:var(--brand-bg); color:var(--brand);
box-shadow:inset 3px 0 0 var(--brand);
}
.nav-item svg { width:18px; height:18px; flex-shrink:0; }
.nav-item .badge {
margin-left:auto; font-size:11px; font-weight:600; padding:2px 8px;
border-radius:99px; background:var(--border); color:var(--text-muted);
}
.nav-item.active .badge { background:var(--brand-bg); color:var(--brand); }
.sidebar-footer {
padding:14px 18px; border-top:1px solid var(--border-light);
font-size:11px; color:var(--text-muted);
}
.sidebar-footer .version { font-weight:600; }
/* === Status dots in sidebar === */
.status-dots { display:flex; gap:6px; align-items:center; }
.status-dots .dot { width:7px; height:7px; border-radius:50%; background:var(--gray-400); transition:background var(--transition); cursor:default; }
.status-dots .dot.online { background:#34C759; box-shadow:0 0 8px rgba(52,199,89,0.5); }
.status-dots .dot.offline { background:var(--red); box-shadow:0 0 6px rgba(239,68,68,0.3); }
.sidebar.collapsed .sb-brand-full { display:none !important; }
.sidebar.collapsed .sb-brand-icon { display:block !important; text-align:center; }
.sidebar.collapsed .sidebar-brand { flex-direction:column; align-items:center; padding:14px 4px 10px; }
.sidebar.collapsed .sb-dots { margin-left:0; margin-top:6px; justify-content:center; }
/* === Main === */
.main { margin-left:var(--sidebar-w); flex:1; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; position:relative; z-index:1; transition:margin-left 0.2s ease; }
.main-header {
height:var(--header-h); background:var(--bg-header);
backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
border-bottom:1px solid var(--border-glass);
display:flex; align-items:center; padding:0 28px; gap:16px;
position:sticky; top:0; z-index:50;
transition:background var(--transition);
}
.main-header h2 { font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.hdr-btn {
background:var(--bg-card); border:1px solid var(--border); cursor:pointer;
color:var(--text-secondary); width:36px; height:36px; border-radius:var(--radius-sm);
display:flex; align-items:center; justify-content:center; transition:all 0.2s ease;
backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.hdr-btn:hover { background:var(--brand-bg); color:var(--brand); border-color:var(--brand); }
.profile-dropdown { position:relative; }
.profile-menu {
display:none; position:absolute; top:46px; right:0;
background:var(--bg-modal);
backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
border:1px solid var(--border-glass); border-radius:var(--radius);
box-shadow:var(--shadow-lg); min-width:220px; z-index:100; padding:6px 0;
animation:modalIn 0.2s ease-out;
}
.profile-menu.show { display:block; }
.profile-menu-item {
display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:13px;
color:var(--text-secondary); cursor:pointer; border:none; background:none;
width:100%; text-align:left; transition:all 0.15s; border-radius:0;
}
.profile-menu-item:hover { background:var(--brand-bg); color:var(--brand); }
.profile-menu-divider { height:1px; background:var(--border-light); margin:4px 0; }
.main-content { flex:1; padding:28px; padding-bottom:60px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* Master-Detail back button: hidden on desktop, shown on mobile via media query */
.md-back-btn { display:none; }
/* === Page sections (toggled) === */
.page { display:none; }
.page.active { display:block; }
/* FIBU-Seite: Vollbild — globale Sidebar, Header, Banner ausblenden */
body:has(#pageFibu.active) > #mainSidebar,
body:has(#pageFibu.active) > .sidebar-backdrop { display:none !important; }
.main:has(#pageFibu.active) { margin-left:0 !important; }
.main:has(#pageFibu.active) > .main-header,
.main:has(#pageFibu.active) > #aiQuoteBanner,
.main:has(#pageFibu.active) > #bpRetryBanner { display:none !important; }
.main-content:has(#pageFibu.active) {
padding:0 !important; overflow:hidden !important;
display:flex !important; flex-direction:column !important;
}
#pageFibu.active {
display:flex !important; flex-direction:column;
flex:1; min-height:0; overflow:hidden;
}
/* Absence Gantt Grid-Linien */
:root {
--abs-grid-line: rgba(0,0,0,0.08);
--abs-grid-line-v: rgba(0,0,0,0.05);
}
html.dark {
--abs-grid-line: rgba(255,255,255,0.08);
--abs-grid-line-v: rgba(255,255,255,0.04);
}
/* Absence Kalender: füllt gesamten Viewport */
.main-content:has(#pageAbsence.active.abs-calendar-mode) {
padding:10px 16px 6px !important; overflow:hidden !important;
display:flex !important; flex-direction:column !important;
}
#pageAbsence.active.abs-calendar-mode {
display:flex !important; flex-direction:column !important;
flex:1 1 0 !important; overflow:hidden !important;
}
/* === Cards === */
.card {
background:var(--bg-card);
backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
border:1px solid var(--border-glass); border-radius:var(--radius-lg);
box-shadow:var(--shadow); transition:all var(--transition);
}
.card-header {
padding:18px 24px; border-bottom:1px solid var(--border-light);
display:flex; align-items:center; justify-content:space-between;
}
.card-header h3 { font-size:15px; font-weight:700; letter-spacing:-0.01em; }
.card-body { padding:22px 24px; }
/* ============================================================
DASHBOARD — Liquid Glass Design System
Inspired by Apple's Liquid Glass: layered translucency,
specular edge highlights, depth through blur, living color.
============================================================ */
/* --- Dashboard greeting --- */
.dash-greeting {
margin-bottom:28px;
}
.dash-greeting-text {
font-size:28px; font-weight:700; letter-spacing:-0.03em; color:var(--text);
line-height:1.2;
}
.dash-greeting-sub {
font-size:14px; color:var(--text-muted); margin-top:4px; font-weight:450;
}
/* --- Stat cards — Liquid Glass --- */
.stats-grid {
display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:32px;
}
.stat-card {
position:relative; overflow:hidden; cursor:pointer;
/* Multi-layer glass */
background:
linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 100%);
backdrop-filter:blur(40px) saturate(1.8);
-webkit-backdrop-filter:blur(40px) saturate(1.8);
/* Specular edge — top+left brighter like light catching glass */
border:1px solid transparent;
border-image:linear-gradient(
135deg,
rgba(255,255,255,0.7) 0%,
rgba(255,255,255,0.3) 40%,
rgba(255,255,255,0.1) 100%
) 1;
border-radius:20px;
/* border-image breaks border-radius, use outline trick */
border:none;
outline:1px solid rgba(255,255,255,0.35);
outline-offset:-1px;
padding:24px; box-shadow:
0 1px 1px rgba(0,0,0,0.02),
0 4px 12px rgba(0,0,0,0.06),
0 12px 32px rgba(0,0,0,0.04),
inset 0 1px 0 rgba(255,255,255,0.5);
transition:all 0.45s cubic-bezier(0.2, 0, 0, 1);
}
html.dark .stat-card {
background:
linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
outline-color:rgba(255,255,255,0.1);
box-shadow:
0 1px 1px rgba(0,0,0,0.1),
0 4px 12px rgba(0,0,0,0.25),
0 12px 32px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Inner specular highlight — top edge glow */
.stat-card::before {
content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.6) 70%, transparent);
pointer-events:none;
}
html.dark .stat-card::before {
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.15) 70%, transparent);
}
/* Ambient color glow behind card */
.stat-card::after {
content:''; position:absolute; bottom:-20px; right:-20px; width:100px; height:100px;
background:radial-gradient(circle, var(--stat-accent, var(--brand)), transparent 70%);
opacity:0.08; pointer-events:none; transition:opacity 0.4s;
border-radius:50%; filter:blur(20px);
}
html.dark .stat-card::after { opacity:0.12; }
.stat-card:hover {
transform:translateY(-3px);
box-shadow:
0 2px 4px rgba(0,0,0,0.03),
0 8px 20px rgba(0,0,0,0.08),
0 20px 48px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.6);
outline-color:rgba(255,255,255,0.5);
}
html.dark .stat-card:hover {
box-shadow:
0 2px 4px rgba(0,0,0,0.15),
0 8px 20px rgba(0,0,0,0.35),
0 20px 48px rgba(0,0,0,0.2),
inset 0 1px 0 rgba(255,255,255,0.12);
outline-color:rgba(255,255,255,0.18);
}
.stat-card:hover::after { opacity:0.14; }
html.dark .stat-card:hover::after { opacity:0.2; }
.stat-card .stat-icon {
width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
background:color-mix(in srgb, var(--stat-accent, var(--brand)) 12%, transparent);
color:var(--stat-accent, var(--brand)); margin-bottom:16px;
transition:all 0.35s ease;
box-shadow:0 2px 8px color-mix(in srgb, var(--stat-accent, var(--brand)) 15%, transparent);
}
.stat-card:hover .stat-icon { transform:scale(1.06); box-shadow:0 4px 12px color-mix(in srgb, var(--stat-accent, var(--brand)) 25%, transparent); }
.stat-card .stat-icon svg { width:22px; height:22px; }
.stat-card .label { font-size:11px; font-weight:600; color:var(--stat-accent, var(--text-muted)); text-transform:uppercase; letter-spacing:0.06em; }
.stat-card .value { font-size:36px; font-weight:800; margin-top:4px; color:var(--text); letter-spacing:-0.04em; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat-card .sub { font-size:12px; color:var(--text-muted); margin-top:6px; font-weight:450; }
/* --- Dashboard content sections --- */
.dash-section-title {
font-size:14px; font-weight:600; color:var(--text-secondary);
letter-spacing:-0.01em; margin:36px 0 14px 2px;
}
#pageDashboard .dash-section-title:first-child { margin-top:4px; }
/* Dashboard row layouts — content-aware */
.dash-row-1, .dash-row-2, .dash-row-3 { display:grid; gap:16px; }
.dash-row-1 { grid-template-columns:1fr; }
.dash-row-2 { grid-template-columns:repeat(2, 1fr); }
.dash-row-3 { grid-template-columns:repeat(3, 1fr); }
/* Legacy compat */
.dash-grid { display:grid; gap:16px; }
.dash-grid-2 { grid-template-columns:repeat(2, 1fr); }
.dash-grid-3 { grid-template-columns:repeat(3, 1fr); }
.dash-grid-4 { grid-template-columns:repeat(4, 1fr); }
/* --- Dashboard cards — Glass panels --- */
.dash-card {
position:relative;
background:linear-gradient(160deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.18) 100%);
backdrop-filter:blur(32px) saturate(1.6);
-webkit-backdrop-filter:blur(32px) saturate(1.6);
border:none; outline:1px solid rgba(255,255,255,0.3);
outline-offset:-1px;
border-radius:20px; padding:22px 24px;
box-shadow:
0 2px 8px rgba(0,0,0,0.04),
0 8px 24px rgba(0,0,0,0.05),
inset 0 1px 0 rgba(255,255,255,0.4);
transition:all 0.35s cubic-bezier(0.2, 0, 0, 1);
}
html.dark .dash-card {
background:linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
outline-color:rgba(255,255,255,0.08);
box-shadow:
0 2px 8px rgba(0,0,0,0.2),
0 8px 24px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Specular top highlight */
.dash-card::before {
content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0.5) 60%, transparent);
pointer-events:none;
}
html.dark .dash-card::before {
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.1) 60%, transparent);
}
.dash-card:hover {
transform:translateY(-2px);
box-shadow:
0 4px 12px rgba(0,0,0,0.06),
0 12px 32px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.5);
outline-color:rgba(255,255,255,0.45);
}
html.dark .dash-card:hover {
box-shadow:
0 4px 12px rgba(0,0,0,0.3),
0 12px 32px rgba(0,0,0,0.2),
inset 0 1px 0 rgba(255,255,255,0.1);
outline-color:rgba(255,255,255,0.14);
}
.dash-card-title {
font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:16px;
display:flex; align-items:center; gap:8px;
}
.dash-card-title .dash-card-icon {
width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
font-size:15px; flex-shrink:0;
}
.dash-muted { color:var(--text-muted); font-size:13px; }
.dash-stat { text-align:center; min-width:0; flex:1; }
.dash-stat-value { font-size:22px; font-weight:700; line-height:1.2; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.dash-stat-label { font-size:11px; color:var(--text-muted); margin-top:4px; font-weight:500; white-space:nowrap; }
.dash-stat-row { display:flex; justify-content:space-around; gap:4px; flex-wrap:wrap; }
/* --- Glass progress bars --- */
.dash-progress-track {
height:10px; border-radius:6px; overflow:hidden; position:relative;
background:rgba(0,0,0,0.06);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
}
html.dark .dash-progress-track {
background:rgba(255,255,255,0.08);
box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);
}
.dash-progress-fill {
height:100%; border-radius:6px; transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
position:relative; overflow:hidden;
}
/* Glass shine on progress bar */
.dash-progress-fill::after {
content:''; position:absolute; top:0; left:0; right:0; height:50%;
background:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 100%);
border-radius:inherit;
}
/* --- Loader --- */
.dash-loader { padding:60px 0; text-align:center; }
.dash-loader-bar {
width:140px; height:4px; margin:0 auto; border-radius:3px;
background:rgba(0,0,0,0.06); overflow:hidden; position:relative;
}
html.dark .dash-loader-bar { background:rgba(255,255,255,0.08); }
.dash-loader-bar::after {
content:''; position:absolute; top:0; left:-40%; width:40%; height:100%;
background:linear-gradient(90deg, transparent, var(--brand), transparent);
border-radius:3px; animation:dashLoad 1.2s ease-in-out infinite;
}
@keyframes dashLoad { 0%{left:-40%} 100%{left:100%} }
/* --- Entrance animation (nur auf sichtbaren Seiten) --- */
@keyframes dashCardIn {
from { opacity:0; transform:translateY(16px); }
to { opacity:1; transform:translateY(0); }
}
.dash-animate { animation:dashCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.page:not(.active) .dash-animate { animation:none; }
/* --- Large screen optimization (4K / 32") --- */
@media (min-width:1800px) {
.dash-greeting-text { font-size:32px; }
.stats-grid { gap:20px; }
.stat-card { padding:28px; }
.stat-card .value { font-size:40px; }
.stat-card .stat-icon { width:48px; height:48px; border-radius:16px; }
.stat-card .stat-icon svg { width:24px; height:24px; }
.dash-grid { gap:20px; }
.dash-card { padding:26px 28px; }
.dash-stat-value { font-size:32px; }
}
/* --- Ultra-wide: volle Breite nutzen --- */
@media (min-width:2200px) {
.dash-greeting-text { font-size:36px; }
.dash-stat-value { font-size:36px; }
.dash-card { padding:28px 32px; }
.stats-grid { gap:24px; }
.dash-grid { gap:24px; }
}
/* ═══════════════════════════════════════════════════════════════
DIGITALER EINGANG — Split-Pane Layout (Apple Mail Style)
3 Spalten: Objekt-Liste | Detail | PDF-Viewer
═══════════════════════════════════════════════════════════════ */
/* Posteingang: randlos, füllt gesamten main-content */
#pagePosteingang {
position:relative; overflow:hidden;
height:calc(100% + 28px + 60px); /* kompensiere main-content padding */
margin:-28px; margin-bottom:-60px;
}
@media (max-width:768px) {
#pagePosteingang { margin:-14px; margin-bottom:-60px; height:calc(100% + 14px + 60px); }
}
/* ── Layout Container ── */
.pe-layout {
display:flex; height:100%; overflow:hidden;
}
/* ── Spalte 1: Objekt-Liste ── */
.pe-list-col {
width:280px; flex-shrink:0;
display:flex; flex-direction:column;
border-right:1px solid var(--border-light);
background:var(--bg-body);
overflow:hidden;
}
.pe-list-header {
padding:14px 14px 10px; flex-shrink:0;
border-bottom:1px solid var(--border-light);
}
.pe-search-wrap {
position:relative; margin-bottom:10px;
}
.pe-search-icon {
position:absolute; left:10px; top:50%; transform:translateY(-50%);
color:var(--text-muted); pointer-events:none;
}
.pe-search {
width:100%; padding:8px 12px 8px 34px; border-radius:10px;
border:1px solid var(--border-glass); background:var(--bg-card);
backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
font-size:13px; font-family:var(--font); color:var(--text);
transition:all 0.2s; outline:none;
}
.pe-search::placeholder { color:var(--text-muted); }
.pe-search:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.pe-quick-filters {
display:flex; gap:0; margin-bottom:10px;
background:var(--bg-card); border:1px solid var(--border);
border-radius:10px; padding:3px; position:relative;
overflow:hidden;
}
.pe-pill {
flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
padding:6px 4px; border-radius:8px; font-size:11px; font-weight:600;
border:none; background:transparent;
color:var(--text-muted); cursor:pointer;
transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
font-family:var(--font); white-space:nowrap; position:relative; z-index:1;
}
.pe-pill:hover { color:var(--text); }
.pe-pill.active {
color:var(--brand); background:var(--bg-card-hover);
box-shadow:0 1px 4px rgba(0,0,0,0.06), 0 0.5px 1px rgba(0,0,0,0.04);
}
html.dark .pe-pill.active {
background:rgba(255,255,255,0.08);
box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.pe-pill-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.pe-list-actions {
display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.pe-list-stats { font-size:11px; color:var(--text-muted); flex:1; }
.pe-refresh-btn { padding:5px 8px !important; }
.pe-list-scroll {
flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.pe-empty-state {
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:40px 20px; color:var(--text-muted); text-align:center;
}
.pe-empty-state svg { opacity:0.3; margin-bottom:8px; }
.pe-empty-state p { font-size:13px; }
.pe-list-done {
flex-shrink:0; border-top:1px solid var(--border-light);
}
.pe-done-toggle {
display:flex; align-items:center; gap:6px; padding:10px 14px;
font-size:12px; font-weight:600; color:var(--text-muted);
cursor:pointer; user-select:none; transition:background 0.15s;
}
.pe-done-toggle:hover { background:var(--bg-card-hover); }
.pe-done-toggle svg { transition:transform 0.2s; flex-shrink:0; }
/* ── Objekt-Zeile (wird von JS gerendert) ── */
.pe-obj-row {
display:flex; align-items:center; gap:10px;
padding:12px 14px; cursor:pointer;
border-bottom:1px solid var(--border-light);
transition:background 0.15s, border-color 0.15s;
position:relative;
}
.pe-obj-row:hover { background:var(--bg-card-hover); }
.pe-obj-row.selected {
background:var(--brand-bg);
box-shadow:inset 3px 0 0 var(--brand);
}
.pe-obj-indicator {
width:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pe-obj-dot {
width:8px; height:8px; border-radius:50%;
}
.pe-obj-dot.red { background:var(--red); }
.pe-obj-dot.green { background:var(--green); }
.pe-obj-dot.blue { background:var(--brand); }
.pe-obj-dot.gray { background:var(--gray-300); }
.pe-obj-count {
min-width:20px; height:20px; border-radius:10px;
background:linear-gradient(135deg, #ff453a, #e03e34); color:white;
font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
padding:0 5px; box-shadow:0 1px 4px rgba(255,69,58,0.3);
animation:pePulse 2s ease-in-out infinite;
}
@keyframes pePulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,69,58,0.4);} 50%{box-shadow:0 0 0 5px rgba(255,69,58,0);} }
.pe-obj-info { flex:1; min-width:0; }
.pe-obj-name {
font-size:13px; font-weight:600; color:var(--text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
letter-spacing:-0.01em;
}
.pe-obj-meta {
font-size:11px; color:var(--text-muted); margin-top:1px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pe-obj-preview {
font-size:11px; color:var(--text-secondary); margin-top:2px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pe-obj-right { flex-shrink:0; text-align:right; }
.pe-obj-time { font-size:10px; color:var(--text-muted); display:block; }
.pe-obj-online {
width:7px; height:7px; border-radius:50%; background:#30d158;
display:inline-block; box-shadow:0 0 4px rgba(48,209,88,0.5);
margin-top:4px;
}
/* ── Spalte 2: Detail ── */
.pe-detail-col {
flex:1; min-width:0;
display:flex; flex-direction:column;
overflow:hidden; background:var(--bg-body);
}
.pe-detail-empty {
flex:1; display:flex; flex-direction:column;
align-items:center; justify-content:center;
color:var(--text-muted);
}
.pe-detail-header {
padding:16px 20px; flex-shrink:0;
border-bottom:1px solid var(--border-light);
display:flex; align-items:center; gap:12px;
}
.pe-back-btn {
display:none; width:32px; height:32px; border-radius:8px; border:none;
background:transparent; color:var(--text-muted); cursor:pointer;
align-items:center; justify-content:center; flex-shrink:0;
transition:all 0.15s;
}
.pe-back-btn:hover { background:var(--bg-card-hover); color:var(--text); }
.pe-detail-title { flex:1; min-width:0; }
.pe-detail-title h3 {
font-size:17px; font-weight:700; letter-spacing:-0.02em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0;
}
.pe-detail-title .pe-detail-sub {
font-size:12px; color:var(--text-muted); margin-top:2px;
}
.pe-detail-badges { display:flex; gap:5px; flex-shrink:0; flex-wrap:wrap; }
/* ── Segmented Control (iOS-style) ── */
.pe-segmented {
display:flex; margin:12px 20px; padding:3px;
background:var(--bg-card); border:1px solid var(--border);
border-radius:10px; position:relative; flex-shrink:0;
}
.pe-seg {
flex:1; padding:8px 8px; font-size:12px; font-weight:600;
border-radius:8px; border:none; background:transparent;
cursor:pointer; position:relative; z-index:1;
color:var(--text-muted); font-family:var(--font);
transition:color 0.2s; text-align:center; white-space:nowrap;
}
.pe-seg:hover { color:var(--text); }
.pe-seg.active { color:var(--text); }
.pe-seg-badge {
font-size:9px; font-weight:700; padding:1px 5px; border-radius:8px;
margin-left:3px; vertical-align:1px;
}
.pe-seg-badge.red { background:var(--red-bg); color:var(--red); }
.pe-seg-badge.green { background:var(--green-bg); color:var(--green); }
.pe-seg-badge.muted { background:var(--gray-100); color:var(--text-muted); }
.pe-seg-slider {
position:absolute; height:calc(100% - 6px); border-radius:8px;
background:var(--bg-card-hover); box-shadow:var(--shadow-sm);
transition:left 0.25s cubic-bezier(0.4,0,0.2,1), width 0.25s;
top:3px; z-index:0;
}
/* ── Detail Body ── */
.pe-detail-body {
flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
padding:16px 20px;
}
/* ── Reply Bar (Sticky) ── */
.pe-reply-bar {
flex-shrink:0; padding:10px 16px;
background:var(--bg-card); backdrop-filter:var(--glass-blur);
-webkit-backdrop-filter:var(--glass-blur);
border-top:1px solid var(--border);
padding-bottom:max(10px, env(safe-area-inset-bottom));
}
.pe-reply-context {
font-size:11px; color:var(--text-muted); margin-bottom:6px;
display:flex; align-items:center; gap:6px;
}
.pe-reply-input { display:flex; gap:8px; align-items:flex-end; }
.pe-reply-input textarea {
flex:1; padding:8px 12px; border:1px solid var(--border);
border-radius:10px; font-size:13px; font-family:var(--font);
background:var(--bg-input); color:var(--text); resize:none;
min-height:36px; max-height:120px; outline:none;
transition:border-color 0.2s;
}
.pe-reply-input textarea:focus { border-color:var(--brand); }
.pe-reply-actions { display:flex; gap:4px; flex-shrink:0; }
.pe-reply-send { min-height:36px; }
/* ── Spalte 3: PDF ── */
.pe-pdf-col {
width:0; flex-shrink:0; overflow:hidden;
transition:width 0.3s cubic-bezier(0.4,0,0.2,1);
border-left:1px solid var(--border);
display:flex; flex-direction:column; background:var(--bg-body);
}
.pe-pdf-col.open { width:520px; }
/* Resize-Handle am linken Rand */
.pe-pdf-resize {
position:absolute; left:-3px; top:0; bottom:0; width:6px;
cursor:col-resize; z-index:5;
transition:background 0.15s;
}
.pe-pdf-resize:hover, .pe-pdf-resize.active {
background:var(--brand); opacity:0.4;
}
.pe-pdf-col { position:relative; }
.pe-pdf-header {
display:flex; justify-content:space-between; align-items:center;
padding:12px 16px; border-bottom:1px solid var(--border);
flex-shrink:0;
background:var(--bg-card); backdrop-filter:var(--glass-blur);
-webkit-backdrop-filter:var(--glass-blur);
}
.pe-pdf-title {
font-size:13px; font-weight:600; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.pe-pdf-area { flex:1; overflow-y:auto; padding:12px; }
.pe-pdf-area canvas { cursor:zoom-in; transition:opacity 0.15s; }
.pe-pdf-area canvas:hover { opacity:0.92; }
/* Fullscreen PDF Overlay */
.pe-pdf-fullscreen {
position:fixed; inset:0; z-index:9000;
background:rgba(0,0,0,0.9);
display:flex; flex-direction:column;
animation:peFsIn 0.2s ease-out;
}
@keyframes peFsIn { from { opacity:0; } to { opacity:1; } }
.pe-pdf-fs-header {
display:flex; align-items:center; justify-content:space-between;
padding:12px 24px; flex-shrink:0;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.pe-pdf-fs-title { color:rgba(255,255,255,0.7); font-size:13px; font-weight:500; }
.pe-pdf-fs-close {
width:36px; height:36px; border-radius:50%;
background:rgba(255,255,255,0.12); border:none;
color:white; font-size:18px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background 0.15s;
}
.pe-pdf-fs-close:hover { background:rgba(255,255,255,0.25); }
.pe-pdf-fs-body {
flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
display:flex; flex-direction:column; align-items:center;
padding:20px 0 40px;
}
.pe-pdf-fs-body canvas {
display:block; margin:0 auto 4px; max-width:95vw;
box-shadow:0 4px 24px rgba(0,0,0,0.5);
border-radius:2px;
}
/* ── Badges (wiederverwendbar) ── */
.pe-badge {
font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; color:white;
display:inline-block; line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,0.12);
}
.pe-badge-green { background:linear-gradient(135deg, #30d158, #28b84d); }
.pe-badge-red { background:linear-gradient(135deg, #ff453a, #e03e34); }
.pe-badge-blue { background:linear-gradient(135deg, #0a84ff, #0070e0); }
.pe-badge-orange { background:linear-gradient(135deg, #ff9f0a, #e08f09); }
.pe-badge-yellow { background:linear-gradient(135deg, #ffd60a, #e6c009); color:#1a1d23; }
.pe-badge-muted { background:var(--border); color:var(--text-muted); box-shadow:none; }
/* ── Chat Messages ── */
/* ── iMessage iOS 26 Style Bubbles ── */
.pe-message {
position:relative; max-width:65%; padding:10px 16px;
font-size:15px; line-height:22px; letter-spacing:-0.3px;
font-family:var(--font); border-radius:20px; border:none;
word-wrap:break-word; margin-bottom:2px; box-shadow:none;
}
.pe-message-admin {
margin-left:auto; margin-right:0;
background:#0b93f6; color:#fff;
border-radius:20px 20px 4px 20px;
}
.pe-message-pruefer {
margin-right:auto; margin-left:0;
background:#e5e5ea; color:#000;
border-radius:20px 20px 20px 4px;
}
html.dark .pe-message-admin { background:#0a84ff; }
html.dark .pe-message-pruefer { background:#38383a; color:#f5f5f7; }
/* Tail (letztes Message einer Gruppe) */
.pe-message-admin.pe-msg-tail::before {
content:''; position:absolute; bottom:0; right:-7px;
width:20px; height:20px; background:#0b93f6;
border-bottom-left-radius:16px 14px;
}
.pe-message-admin.pe-msg-tail::after {
content:''; position:absolute; bottom:0; right:-20px;
width:20px; height:20px; background:var(--bg-body);
border-bottom-left-radius:10px;
}
html.dark .pe-message-admin.pe-msg-tail::before { background:#0a84ff; }
.pe-message-pruefer.pe-msg-tail::before {
content:''; position:absolute; bottom:0; left:-7px;
width:20px; height:20px; background:#e5e5ea;
border-bottom-right-radius:16px 14px;
}
.pe-message-pruefer.pe-msg-tail::after {
content:''; position:absolute; bottom:0; left:-20px;
width:20px; height:20px; background:var(--bg-body);
border-bottom-right-radius:10px;
}
html.dark .pe-message-pruefer.pe-msg-tail::before { background:#38383a; }
/* Ohne Tail → rund */
.pe-message:not(.pe-msg-tail) { border-radius:20px; }
/* Abstand bei Sender-Wechsel */
.pe-msg-gap { margin-top:12px; }
/* Sender-Name */
.pe-msg-sender { font-size:12px; font-weight:500; color:var(--text-muted); margin-bottom:2px; margin-left:4px; }
.pe-msg-sender-right { text-align:right; margin-right:24px; margin-left:0; }
/* Meta */
.pe-message-meta { font-size:11px; margin-top:3px; letter-spacing:0; font-weight:400; }
.pe-message-admin .pe-message-meta { color:rgba(255,255,255,0.55); }
.pe-message-pruefer .pe-message-meta { color:rgba(0,0,0,0.35); }
html.dark .pe-message-pruefer .pe-message-meta { color:rgba(255,255,255,0.4); }
/* Links */
.pe-message-admin a { color:#fff; text-decoration:underline; }
.pe-message-pruefer a { color:var(--brand); }
/* Nachricht Hover-Aktionen (Bearbeiten/Löschen) */
.pe-msg-actions {
display:none; margin-top:6px; gap:4px; justify-content:flex-end;
}
.pe-msg-actions button {
border:none; cursor:pointer; padding:3px 8px;
border-radius:6px; line-height:1; font-size:11px;
}
.pe-message-admin .pe-msg-actions button { background:rgba(255,255,255,0.2); color:#fff; }
.pe-message-admin .pe-msg-actions button:hover { background:rgba(255,255,255,0.35); }
.pe-message-pruefer .pe-msg-actions button { background:rgba(0,0,0,0.08); color:rgba(0,0,0,0.5); }
.pe-message-pruefer .pe-msg-actions button:hover { background:rgba(0,0,0,0.15); color:rgba(0,0,0,0.7); }
html.dark .pe-message-pruefer .pe-msg-actions button { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.5); }
html.dark .pe-message-pruefer .pe-msg-actions button:hover { background:rgba(255,255,255,0.2); color:rgba(255,255,255,0.7); }
.pe-message:hover .pe-msg-actions { display:flex; }
/* ── Question Card ── */
.pe-question {
margin-bottom:12px; border-radius:14px; overflow:hidden;
border:1px solid var(--border);
background:linear-gradient(160deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08));
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
transition:border-color 0.2s;
}
html.dark .pe-question { background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)); }
.pe-question.pe-open { border-color:rgba(255,69,58,0.3); }
.pe-question-header {
padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:8px;
background:rgba(0,0,0,0.015);
}
html.dark .pe-question-header { background:rgba(255,255,255,0.02); }
.pe-question.pe-open .pe-question-header { background:rgba(255,69,58,0.03); }
/* ── Person Cards ── */
.pe-person-card {
padding:12px 14px; border-radius:12px; margin-bottom:6px;
background:linear-gradient(160deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06));
border:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-wrap:wrap;
transition:all 0.15s;
}
html.dark .pe-person-card { background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)); }
.pe-person-card:hover { background:rgba(0,0,0,0.02); }
html.dark .pe-person-card:hover { background:rgba(255,255,255,0.04); }
.pe-person-avatar {
width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:700; color:white; flex-shrink:0;
background:linear-gradient(135deg, var(--accent), #5856d6);
}
.pe-person-avatar.approved { background:linear-gradient(135deg, #30d158, #28b84d); }
.pe-person-avatar.sent { background:linear-gradient(135deg, #0a84ff, #0070e0); }
.pe-person-avatar.viewed { background:linear-gradient(135deg, #5ac8fa, #32ade6); }
.pe-avatar-wrap { position:relative; flex-shrink:0; }
.pe-online-dot {
position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%;
background:#30d158; border:2px solid var(--bg-card);
}
/* ── Icon Buttons ── */
.pe-icon-btn {
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
background:transparent; color:var(--text-muted); cursor:pointer;
transition:all 0.15s; flex-shrink:0;
}
.pe-icon-btn:hover { background:var(--bg-card-hover); color:var(--text); border-color:var(--accent); }
.pe-icon-btn:active { transform:scale(0.92); }
.pe-icon-btn.danger:hover { color:#ff453a; border-color:#ff453a; }
/* ── Beleg Button ── */
.pe-beleg-btn {
display:inline-flex; align-items:center; gap:4px;
font-size:11px; font-weight:600; padding:4px 10px; border-radius:8px;
background:var(--accent); color:white; border:none; cursor:pointer;
transition:all 0.2s; text-decoration:none;
}
.pe-beleg-btn:hover { filter:brightness(1.1); }
.pe-beleg-btn svg { flex-shrink:0; }
/* ── Facilioo Icon ── */
.pe-facilioo-icon {
display:inline-flex; align-items:center; gap:3px; vertical-align:middle;
text-decoration:none; padding:2px 6px; border-radius:6px;
background:rgba(10,132,255,0.08); transition:background 0.2s;
}
.pe-facilioo-icon:hover { background:rgba(10,132,255,0.15); }
/* ── Timeline Dot ── */
.pe-timeline-dot {
width:12px; height:12px; border-radius:50%; flex-shrink:0;
position:absolute; left:-22px; top:4px;
border:2px solid var(--bg-body); box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
/* ── Danger Zone ── */
.pe-danger-zone {
margin-top:20px; padding-top:14px; border-top:1px solid rgba(255,69,58,0.15);
}
/* ═══ RESPONSIVE: iPad (768–1024px) ═══ */
@media (min-width:769px) and (max-width:1024px) {
.pe-list-col { width:260px; }
.pe-pdf-col.open {
position:absolute; right:0; top:0; bottom:0;
width:55%; z-index:10;
box-shadow:-8px 0 32px rgba(0,0,0,0.12);
}
.pe-detail-body { padding:14px 16px; }
.pe-segmented { margin:10px 16px; }
}
/* ═══ RESPONSIVE: iPhone (< 768px) ═══ */
@media (max-width:768px) {
.pe-layout { position:relative; }
.pe-list-col { width:100%; border-right:none; }
.pe-detail-col {
position:absolute; inset:0;
transform:translateX(100%);
transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
z-index:2;
}
.pe-layout.detail-open .pe-detail-col { transform:translateX(0); }
.pe-back-btn { display:inline-flex; }
.pe-pdf-col {
position:absolute; inset:0; width:100% !important;
transform:translateX(100%);
transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
z-index:3;
}
.pe-pdf-col.open { transform:translateX(0); width:100% !important; }
.pe-search { font-size:16px !important; padding:10px 12px 10px 36px; }
.pe-obj-row { min-height:56px; }
.pe-seg { padding:10px 6px; font-size:11px; min-height:40px; }
.pe-detail-header { padding:12px 14px; }
.pe-detail-body { padding:12px 14px; }
.pe-reply-input textarea { font-size:16px !important; }
}
/* ═══ RESPONSIVE: Small phones (< 400px) ═══ */
@media (max-width:400px) {
.pe-list-header { padding:10px 10px 8px; }
.pe-obj-row { padding:10px 10px; gap:8px; }
.pe-seg { padding:8px 4px; font-size:10px; }
}
/* ═══ RESPONSIVE: Desktop 1080p (1024–1800px) ═══ */
@media (min-width:1024px) and (max-width:1800px) {
.pe-list-col { width:300px; }
.pe-list-header { padding:16px 16px 12px; }
.pe-search { padding:9px 12px 9px 36px; font-size:13px; }
.pe-obj-row { padding:14px 16px; }
.pe-obj-name { font-size:14px; }
.pe-obj-meta { font-size:11px; }
.pe-obj-preview { font-size:11px; }
.pe-detail-header { padding:18px 24px; }
.pe-detail-title h3 { font-size:18px; }
.pe-detail-title .pe-detail-sub { font-size:12px; }
.pe-segmented { margin:14px 24px; padding:3px; }
.pe-seg { padding:9px 14px; font-size:12px; }
.pe-detail-body { padding:18px 24px; max-width:none; }
.pe-message { max-width:75%; }
.pe-question { margin-bottom:14px; border-radius:14px; }
.pe-question-header { padding:14px 18px; }
.pe-person-card { padding:14px 18px; gap:14px; border-radius:14px; }
.pe-person-avatar { width:40px; height:40px; font-size:14px; }
.pe-icon-btn { width:32px; height:32px; }
.pe-badge { padding:4px 12px; font-size:10px; }
.pe-reply-bar { padding:12px 24px; }
.pe-reply-input textarea { font-size:14px; padding:10px 14px; min-height:40px; }
.pe-reply-send { min-height:40px; padding:8px 18px !important; font-size:13px !important; }
.pe-pdf-col.open { width:520px; }
.pe-pdf-area { padding:16px; }
}
/* ═══ RESPONSIVE: Large displays (> 1800px) ═══ */
@media (min-width:1800px) {
/* ── Liste: etwas breiter ── */
.pe-list-col { width:340px; }
.pe-list-header { padding:18px 18px 12px; }
.pe-search { padding:11px 14px 11px 40px; font-size:14px; border-radius:12px; }
.pe-search-icon { width:18px; height:18px; left:12px; }
.pe-quick-filters { margin-bottom:12px; border-radius:11px; padding:3px; }
.pe-pill { padding:7px 6px; font-size:12px; }
.pe-obj-row { padding:14px 18px; gap:12px; }
.pe-obj-name { font-size:15px; }
.pe-obj-meta { font-size:12px; }
.pe-obj-preview { font-size:12px; }
.pe-done-toggle { padding:12px 18px; font-size:13px; }
/* ── Detail ── */
.pe-detail-header { padding:22px 36px; gap:16px; }
.pe-detail-title h3 { font-size:22px; letter-spacing:-0.02em; }
.pe-detail-title .pe-detail-sub { font-size:13px; margin-top:3px; }
.pe-detail-badges .pe-badge { padding:5px 14px; font-size:11px; }
/* Tabs als Underline-Tabs (besser bei großer Breite) */
.pe-segmented {
margin:0; padding:0 36px; border-radius:0; border:none;
border-bottom:1px solid var(--border-light); background:transparent;
}
.pe-seg { padding:12px 22px; font-size:13px; border-radius:0; position:relative; }
.pe-seg:hover { background:rgba(0,0,0,0.02); }
.pe-seg.active { background:transparent; color:var(--accent); font-weight:700; }
.pe-seg.active::after {
content:''; position:absolute; bottom:-1px; left:8px; right:8px;
height:2.5px; background:var(--accent); border-radius:2px 2px 0 0;
}
.pe-seg-badge { font-size:10px; padding:2px 7px; }
.pe-seg-slider { display:none; }
.pe-detail-body { padding:24px 36px; }
/* ── Chat ── */
.pe-message { font-size:15px; padding:12px 18px; max-width:60%; }
.pe-message-meta { font-size:11px; }
.pe-question { margin-bottom:16px; border-radius:16px; }
.pe-question-header { padding:16px 20px; }
/* ── Personen ── */
.pe-person-card { padding:16px 22px; gap:16px; border-radius:14px; margin-bottom:10px; }
.pe-person-avatar { width:44px; height:44px; font-size:15px; }
.pe-icon-btn { width:34px; height:34px; border-radius:9px; }
.pe-badge { padding:4px 12px; font-size:11px; }
.pe-beleg-btn { font-size:12px; padding:6px 14px; }
/* ── Reply-Bar ── */
.pe-reply-bar { padding:14px 36px; }
.pe-reply-context { font-size:12px; }
.pe-reply-input textarea { font-size:14px; padding:11px 16px; min-height:42px; border-radius:12px; }
.pe-reply-send { min-height:42px; padding:10px 22px !important; font-size:13px !important; border-radius:10px !important; }
/* ── PDF ── */
.pe-pdf-col.open { width:620px; }
.pe-pdf-title { font-size:14px; }
/* ── Sonstiges ── */
.pe-danger-zone { margin-top:24px; padding-top:16px; }
.pe-empty-state { padding:60px 24px; }
.pe-empty-state svg { width:52px; height:52px; }
.pe-empty-state p { font-size:15px; }
}
/* ═══ RESPONSIVE: Ultra-wide (> 2560px) ═══ */
@media (min-width:2560px) {
.pe-list-col { width:380px; }
.pe-detail-header { padding:24px 44px; }
.pe-segmented { padding:0 44px; }
.pe-detail-body { padding:28px 44px; }
.pe-reply-bar { padding:16px 44px; }
.pe-pdf-col.open { width:720px; }
}
/* === WEG Overview — Liquid Glass === */
.weg-toolbar {
display:flex; gap:10px; align-items:center; flex-wrap:wrap;
padding:14px 18px; margin-bottom:16px;
background:linear-gradient(160deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.15) 100%);
backdrop-filter:blur(28px) saturate(1.5);
-webkit-backdrop-filter:blur(28px) saturate(1.5);
border:none; outline:1px solid rgba(255,255,255,0.25); outline-offset:-1px;
border-radius:16px;
box-shadow:0 2px 8px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.35);
}
html.dark .weg-toolbar {
background:linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 100%);
outline-color:rgba(255,255,255,0.07);
box-shadow:0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.weg-kpis {
display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:16px;
}
.weg-kpi {
padding:16px 18px; border-radius:16px; text-align:center;
background:linear-gradient(160deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.15) 100%);
backdrop-filter:blur(28px) saturate(1.5);
-webkit-backdrop-filter:blur(28px) saturate(1.5);
border:none; outline:1px solid rgba(255,255,255,0.25); outline-offset:-1px;
box-shadow:0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.35);
transition:all 0.3s cubic-bezier(0.2,0,0,1);
}
html.dark .weg-kpi {
background:linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
outline-color:rgba(255,255,255,0.06);
box-shadow:0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}
.weg-kpi:hover { transform:translateY(-2px); }
.weg-kpi-val { font-size:28px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.weg-kpi-label { font-size:11px; color:var(--text-muted); margin-top:4px; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; }
.weg-grid { display:grid; grid-template-columns:1fr; gap:10px; width:100%; }
.weg-obj {
position:relative;
background:linear-gradient(160deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.16) 100%);
backdrop-filter:blur(32px) saturate(1.6);
-webkit-backdrop-filter:blur(32px) saturate(1.6);
border:none; outline:1px solid rgba(255,255,255,0.28); outline-offset:-1px;
border-radius:16px; overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.35);
transition:all 0.3s cubic-bezier(0.2,0,0,1);
}
html.dark .weg-obj {
background:linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 100%);
outline-color:rgba(255,255,255,0.07);
box-shadow:0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.weg-obj::before {
content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.45) 40%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.45) 60%, transparent);
pointer-events:none;
}
html.dark .weg-obj::before {
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.08) 60%, transparent);
}
.weg-obj:hover { transform:translateY(-1px); outline-color:rgba(255,255,255,0.4); }
html.dark .weg-obj:hover { outline-color:rgba(255,255,255,0.12); }
.weg-obj-header {
display:flex; align-items:center; gap:14px; padding:14px 18px; cursor:pointer; user-select:none;
}
.weg-obj-nr {
font-size:13px; font-weight:700; color:var(--brand);
background:rgba(7,161,226,0.08); padding:4px 10px; border-radius:8px;
font-variant-numeric:tabular-nums; flex-shrink:0;
}
.weg-obj-street { font-size:14px; font-weight:600; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.weg-obj-meta { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.weg-obj-meta-tag {
font-size:10px; font-weight:600; color:var(--text-muted); background:var(--bg-hover);
padding:2px 8px; border-radius:6px; white-space:nowrap;
}
/* Pipeline */
.weg-pipeline {
display:flex; align-items:center; gap:0; padding:0 18px 14px;
}
.weg-pipe-step {
display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; min-width:0;
position:relative;
}
.weg-pipe-step:not(:last-child)::after {
content:''; position:absolute; top:9px; left:calc(50% + 10px); right:calc(-50% + 10px);
height:2px; background:var(--border); z-index:0;
}
.weg-pipe-step.done:not(:last-child)::after { background:#30d158; }
.weg-pipe-step.warn:not(:last-child)::after { background:#ff9f0a; }
.weg-pipe-dot {
width:18px; height:18px; border-radius:50%; z-index:1;
display:flex; align-items:center; justify-content:center;
font-size:9px; color:white; font-weight:700;
background:var(--border); border:2px solid var(--bg-body);
box-shadow:0 1px 4px rgba(0,0,0,0.1);
transition:all 0.3s;
}
.weg-pipe-step.done .weg-pipe-dot { background:#30d158; }
.weg-pipe-step.warn .weg-pipe-dot { background:#ff9f0a; }
.weg-pipe-step.error .weg-pipe-dot { background:#ff453a; }
.weg-pipe-step.active .weg-pipe-dot { background:var(--brand); box-shadow:0 0 0 3px rgba(7,161,226,0.25); }
.weg-pipe-label { font-size:9px; color:var(--text-muted); font-weight:500; text-align:center; line-height:1.2; max-width:80px; word-wrap:break-word; }
.weg-pipe-step.done .weg-pipe-label { color:#30d158; }
.weg-pipe-step.warn .weg-pipe-label { color:#ff9f0a; }
.weg-pipe-step.error .weg-pipe-label { color:#ff453a; }
/* Detail panel */
.weg-obj-detail {
display:none; padding:0 18px 16px;
border-top:1px solid var(--border);
background:rgba(0,0,0,0.01);
}
html.dark .weg-obj-detail { background:rgba(255,255,255,0.01); }
.weg-obj-detail.open { display:block; }
.weg-detail-grid {
display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px;
padding-top:14px;
}
.weg-detail-item { font-size:12px; }
.weg-detail-label { color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:0.04em; font-weight:600; margin-bottom:2px; }
.weg-detail-val { color:var(--text); font-weight:500; }
.weg-detail-val a { color:var(--brand); text-decoration:none; }
.weg-detail-val a:hover { text-decoration:underline; }
/* Responsive WEG — Tablet */
@media (max-width:1024px) {
.weg-toolbar { flex-wrap:wrap; }
.weg-toolbar select { min-width:100px; font-size:12px; }
}
/* Responsive WEG — iPhone */
@media (max-width:768px) {
.weg-kpis { grid-template-columns:repeat(2, 1fr); gap:8px; }
.weg-kpi { padding:10px 12px; border-radius:12px; }
.weg-kpi-val { font-size:20px; }
.weg-kpi-label { font-size:9px; }
.weg-toolbar {
padding:10px 12px; gap:6px; border-radius:12px;
flex-direction:column; align-items:stretch;
}
.weg-toolbar > div[style*="margin-left:auto"] { margin-left:0 !important; justify-content:space-between; }
.weg-toolbar input, .weg-toolbar select { width:100% !important; min-width:0 !important; max-width:none !important; font-size:13px; }
.weg-obj { border-radius:12px; }
.weg-obj-header { padding:10px 12px; gap:8px; flex-wrap:wrap; }
.weg-obj-nr { font-size:12px; padding:3px 8px; }
.weg-obj-street { font-size:12px; flex-basis:calc(100% - 80px); }
.weg-obj-meta { flex-basis:100%; justify-content:flex-start; }
.weg-pipeline { padding:0 12px 10px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.weg-pipe-step { min-width:50px; }
.weg-pipe-dot { width:16px; height:16px; font-size:8px; }
.weg-pipe-label { font-size:8px; max-width:55px; }
.weg-detail-grid { grid-template-columns:1fr; gap:8px; }
.weg-detail-item { display:flex; gap:8px; align-items:baseline; }
.weg-detail-label { min-width:100px; flex-shrink:0; }
/* Tabelle nutzt bestehende .data-table Mobile-Styles (weiter unten) */
}
/* Sehr kleine Bildschirme */
@media (max-width:400px) {
.weg-kpis { grid-template-columns:repeat(2, 1fr); gap:6px; }
.weg-kpi { padding:8px 10px; }
.weg-kpi-val { font-size:18px; }
.weg-pipe-step { min-width:42px; }
}
@media (min-width:1800px) {
.weg-kpi-val { font-size:34px; }
.weg-obj-header { padding:16px 22px; }
.weg-pipeline { padding:0 22px 16px; }
.weg-pipe-label { font-size:10px; max-width:110px; }
}
/* === Porto KPI Cards === */
.porto-kpi {
background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:16px 16px 14px;
text-align:center; transition:transform 0.15s, box-shadow 0.15s;
border-bottom:3px solid var(--kpi-color, #D1D5DB);
box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
html.dark .porto-kpi { background:var(--bg-card); border-color:var(--border-glass); box-shadow:none; }
.porto-kpi:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.porto-kpi svg { margin:0 auto 6px; display:block; opacity:0.9; }
.porto-kpi-num { font-size:2rem; font-weight:700; letter-spacing:-0.03em; color:var(--kpi-color); line-height:1.1; }
.porto-kpi-label { font-size:12px; font-weight:600; color:#6B7280; margin-top:4px; text-transform:uppercase; letter-spacing:0.05em; }
html.dark .porto-kpi-label { color:var(--text-muted); }
/* Porto filter chips */
.portoFilterBtn { border-radius:20px !important; padding:4px 14px !important; font-weight:500 !important; border:1.5px solid #D1D5DB !important; background:#fff !important; color:#374151 !important; transition:all 0.15s !important; }
.portoFilterBtn:hover:not(.active) { background:#F3F4F6 !important; border-color:#9CA3AF !important; }
.portoFilterBtn.active { border-color:transparent !important; }
html.dark .portoFilterBtn { background:var(--bg-secondary) !important; border-color:var(--border) !important; color:var(--text) !important; }
html.dark .portoFilterBtn:hover:not(.active) { background:var(--bg-card-hover) !important; }
html.dark .portoFilterBtn.active { border-color:transparent !important; }
/* Porto table dark mode */
/* Porto table: light mode */
.porto-table thead tr { background:#F8FAFC; border-bottom:2px solid #E2E8F0; }
.porto-table th { color:#374151; }
.porto-table .porto-nr { color:#4B5563; }
.porto-table .porto-name { color:#111827; }
.porto-table .porto-addr { color:#4B5563; }
.porto-table .porto-email-text { color:#111827; }
/* Porto table: dark mode */
html.dark .porto-table thead tr { background:var(--bg-secondary); border-bottom-color:var(--border); }
html.dark .porto-table th { color:var(--text-muted); }
html.dark .porto-table tr { border-bottom-color:var(--border); }
html.dark .porto-table tr:hover { background:var(--bg-secondary) !important; }
html.dark .porto-table .porto-nr { color:var(--text-muted); }
html.dark .porto-table .porto-name { color:var(--text); }
html.dark .porto-table .porto-addr { color:var(--text-muted); }
html.dark .porto-table .porto-email-text { color:var(--text); }
@media (max-width:900px) { #portoStats { grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:600px) { #portoStats { grid-template-columns:repeat(2,1fr) !important; } }
/* === PDF unterschreiben Page === */
.ps-info-banner { display:flex; align-items:center; gap:10px; background:#EFF6FF; border:1px solid #BFDBFE; border-radius:10px; padding:12px 16px; margin-bottom:20px; }
.ps-info-text { flex:1; font-size:14px; color:#1E40AF; }
.ps-info-link { color:#2563EB; font-weight:600; text-decoration:none; white-space:nowrap; }
.ps-info-link:hover { text-decoration:underline; }
.ps-info-close { background:none; border:none; color:#93C5FD; font-size:18px; cursor:pointer; padding:0 4px; line-height:1; }
.ps-info-close:hover { color:#1E40AF; }
.ps-card { background:#fff; border:1px solid #E5E7EB; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,0.06); overflow:hidden; }
.ps-card-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #F1F5F9; }
.ps-card-title { font-size:16px; font-weight:700; color:#111827; }
.ps-card-subtitle { font-size:13px; color:#6B7280; margin-top:2px; }
.ps-btn-outline { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1.5px solid #D1D5DB; color:#374151; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.15s; font-family:inherit; }
.ps-btn-outline:hover { background:#F9FAFB; }
.ps-btn-primary-page { display:inline-flex; align-items:center; gap:6px; background:#2563EB; color:#fff; border:none; border-radius:8px; padding:8px 18px; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; font-family:inherit; }
.ps-btn-primary-page:hover { background:#1D4ED8; box-shadow:0 4px 12px rgba(37,99,235,0.25); }
.ps-table { width:100%; border-collapse:collapse; }
.ps-table thead tr { background:#F8FAFC; border-bottom:2px solid #E5E7EB; }
.ps-table th { padding:10px 24px; font-size:11px; font-weight:700; color:#6B7280; letter-spacing:0.07em; text-transform:uppercase; text-align:left; }
.ps-table td { padding:16px 24px; border-bottom:1px solid #F1F5F9; vertical-align:middle; }
.ps-table tbody tr { transition:background 0.1s; cursor:pointer; }
.ps-table tbody tr:hover { background:#F8FAFC; }
.ps-table tbody tr:last-child td { border-bottom:none; }
.ps-badge-done { display:inline-flex; align-items:center; gap:4px; background:#DCFCE7; color:#14532D; border:1px solid #86EFAC; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
.ps-badge-draft { display:inline-flex; align-items:center; gap:4px; background:#FEF9C3; color:#713F12; border:1px solid #FDE047; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
.ps-badge-active { display:inline-flex; align-items:center; gap:4px; background:#DBEAFE; color:#1E3A8A; border:1px solid #93C5FD; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
.ps-badge-cancelled { display:inline-flex; align-items:center; gap:4px; background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
.ps-file-pill { display:inline-flex; align-items:center; gap:4px; background:#F3F4F6; border-radius:4px; padding:2px 8px; font-size:12px; color:#6B7280; font-family:monospace; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:4px; }
.ps-signer-dots { display:flex; align-items:center; }
.ps-signer-dot { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; border:2px solid #fff; }
.ps-signer-dot:not(:first-child) { margin-left:-6px; }
.ps-signer-dot.signed { background:#16A34A; color:#fff; }
.ps-signer-dot.invited { background:#2563EB; color:#fff; }
.ps-signer-dot.pending { background:#E5E7EB; color:#9CA3AF; }
.ps-date-relative { font-size:12px; color:#9CA3AF; margin-top:2px; }
.ps-action-done { color:#16A34A; font-weight:600; font-size:13px; display:flex; align-items:center; gap:4px; }
.ps-action-start { background:#2563EB; color:#fff; border:none; border-radius:6px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; font-family:inherit; }
.ps-action-start:hover { background:#1D4ED8; }
.ps-action-delete { background:none; border:none; color:#EF4444; font-size:13px; cursor:pointer; margin-left:12px; font-family:inherit; padding:4px; }
.ps-action-delete:hover { color:#DC2626; text-decoration:underline; }
.ps-action-resend { background:none; border:1px solid #D1D5DB; color:#374151; border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer; transition:all 0.15s; font-family:inherit; margin-right:8px; }
.ps-action-resend:hover { border-color:#2563EB; color:#2563EB; }
/* Dark mode for Protokoll page */
html.dark #bpRetryBanner { background:rgba(220,38,38,0.08); border-color:rgba(220,38,38,0.2); }
html.dark #bpRetryBanner span { color:#FCA5A5; }
html.dark .ps-info-banner { background:rgba(37,99,235,0.08); border-color:rgba(37,99,235,0.2); }
html.dark .ps-info-text { color:var(--brand-light); }
html.dark .ps-info-link { color:var(--brand); }
html.dark .ps-info-close { color:rgba(37,99,235,0.4); }
html.dark .ps-info-close:hover { color:var(--brand); }
html.dark .ps-card { background:var(--bg-card); border-color:var(--border); box-shadow:none; }
html.dark .ps-card-header { border-color:var(--border); }
html.dark .ps-card-title { color:var(--text); }
html.dark .ps-card-subtitle { color:var(--text-muted); }
html.dark .ps-btn-outline { background:var(--bg-card); border-color:var(--border); color:var(--text); }
html.dark .ps-btn-outline:hover { background:var(--bg-card-hover); }
html.dark .ps-table thead tr { background:var(--bg-secondary); border-color:var(--border); }
html.dark .ps-table th { color:var(--text-muted); }
html.dark .ps-table td { border-color:var(--border-light); }
html.dark .ps-table tbody tr:hover { background:var(--bg-secondary); }
html.dark .ps-file-pill { background:var(--bg-secondary); color:var(--text-muted); }
html.dark .ps-signer-dot { border-color:var(--bg-card); }
html.dark .ps-signer-dot.pending { background:var(--gray-600); color:var(--gray-400); }
html.dark .ps-date-relative { color:var(--text-muted); }
.ps-title-link { color:#111827; }
.ps-signer-count { font-size:11px; color:#9CA3AF; margin-top:2px; }
.ps-date-main { font-size:14px; color:#374151; }
html.dark .ps-title-link { color:var(--text); }
html.dark .ps-signer-count { color:var(--text-muted); }
html.dark .ps-date-main { color:var(--text); }
html.dark .ps-action-done { color:#4ADE80; }
html.dark .ps-action-delete { color:#F87171; }
html.dark .ps-action-delete:hover { color:#EF4444; }
html.dark .ps-action-resend { border-color:var(--border); color:var(--text); }
html.dark .ps-action-resend:hover { border-color:var(--brand); color:var(--brand); }
html.dark .ps-badge-done { background:rgba(34,197,94,0.15); color:#4ADE80; border-color:rgba(34,197,94,0.3); }
html.dark .ps-badge-draft { background:rgba(234,179,8,0.15); color:#FACC15; border-color:rgba(234,179,8,0.3); }
html.dark .ps-badge-active { background:rgba(59,130,246,0.15); color:#60A5FA; border-color:rgba(59,130,246,0.3); }
html.dark .ps-badge-cancelled { background:rgba(239,68,68,0.15); color:#F87171; border-color:rgba(239,68,68,0.3); }
/* === Buttons === */
.btn {
display:inline-flex; align-items:center; gap:7px; padding:9px 18px;
border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card);
backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
font-size:13px; font-weight:500; font-family:inherit; cursor:pointer;
transition:all 0.2s ease; color:var(--text);
}
.btn:hover { background:var(--bg-card-hover); border-color:var(--gray-300); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.btn-primary {
background:var(--brand); color:white; border-color:var(--brand);
box-shadow:0 2px 8px rgba(7,161,226,0.25);
}
.btn-primary:hover { background:var(--brand-light); border-color:var(--brand-light); box-shadow:0 4px 14px rgba(7,161,226,0.35); }
.btn-danger { color:var(--red); }
.btn-danger:hover { background:var(--red-bg); border-color:var(--red); }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:8px; }
.btn-icon { padding:7px; width:34px; height:34px; justify-content:center; }
.btn-icon svg { width:16px; height:16px; }
/* === Form elements === */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.form-hint { font-size:12px; color:var(--text-muted); margin-top:4px; }
.form-input, .form-select {
width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
font-size:14px; font-family:inherit; background:var(--bg-input); color:var(--text);
outline:none; transition:border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-input:focus, .form-select:focus {
border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring);
}
.form-input::placeholder { color:var(--text-muted); }
[contenteditable]:empty:before { content:attr(data-placeholder); color:var(--text-muted); font-style:italic; }
[contenteditable]:focus { border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-ring); }
.form-row { display:flex; gap:10px; align-items:center; }
.form-row .form-input { flex:1; }
/* === Autocomplete === */
.ac-wrap { position:relative; }
.ac-dropdown {
display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
max-height:260px; overflow-y:auto; background:var(--bg-modal);
backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
border:1px solid var(--border-glass); border-radius:var(--radius);
box-shadow:var(--shadow-lg); z-index:200;
animation:modalIn 0.15s ease-out;
}
.ac-dropdown.open { display:block; }
.ac-item {
padding:11px 16px; cursor:pointer; font-size:14px;
border-bottom:1px solid var(--border-light); transition:all 0.15s;
}
.ac-item:last-child { border-bottom:none; }
.ac-item:hover, .ac-item.active { background:var(--brand-bg); }
.ac-item .nr { font-weight:700; color:var(--brand); }
.ac-item .name { color:var(--text-secondary); margin-left:8px; }
/* === Selected object pill === */
.selected-pill {
display:none; align-items:center; gap:12px; padding:12px 16px;
background:linear-gradient(160deg, rgba(7,161,226,0.1) 0%, rgba(7,161,226,0.04) 100%);
border:1px solid rgba(7,161,226,0.18);
border-radius:12px; font-size:14px;
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.selected-pill.visible { display:flex; }
.selected-pill .pill-nr { font-weight:700; color:var(--brand); }
.selected-pill .pill-name { color:var(--text); flex:1; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selected-pill .pill-clear {
background:none; border:none; cursor:pointer; color:var(--text-muted);
font-size:18px; line-height:1; padding:2px 6px; border-radius:6px; transition:all 0.15s;
}
.selected-pill .pill-clear:hover { color:var(--red); background:var(--red-bg); }
/* === Preview stats === */
.preview-row { display:none; gap:16px; padding:14px 0; justify-content:center; }
.preview-row.visible { display:flex; }
.pstat {
text-align:center; padding:12px 20px; border-radius:14px;
background:linear-gradient(160deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 100%);
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.2);
box-shadow:0 2px 8px rgba(0,0,0,0.04);
flex:1;
}
html.dark .pstat {
background:linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border-color:rgba(255,255,255,0.06);
}
.pstat .pval { font-size:26px; font-weight:700; color:var(--brand); letter-spacing:-0.02em; }
.pstat .plbl { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px; font-weight:600; }
/* === Toggle === */
.toggle-row { display:flex; gap:20px; }
.toggle-item { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); }
.toggle-switch { position:relative; width:44px; height:26px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-switch .slider {
position:absolute; inset:0; background:var(--gray-200); border-radius:13px;
cursor:pointer; transition:background 0.25s ease;
}
.toggle-switch .slider::before {
content:''; position:absolute; width:22px; height:22px; left:2px; top:2px;
background:white; border-radius:50%; transition:transform 0.25s ease;
box-shadow:0 1px 4px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .slider { background:var(--brand); }
.toggle-switch input:checked + .slider::before { transform:translateX(18px); }
/* === Progress === */
.progress-area { display:none; margin-top:12px; }
.progress-area.visible { display:block; }
.progress-track {
height:8px; border-radius:6px; overflow:hidden; margin-bottom:6px; position:relative;
background:rgba(0,0,0,0.06);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
}
html.dark .progress-track { background:rgba(255,255,255,0.08); box-shadow:inset 0 1px 3px rgba(0,0,0,0.3); }
.progress-fill {
height:100%; width:0%; background:linear-gradient(90deg, var(--brand-dark), var(--brand-light));
border-radius:6px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
position:relative; overflow:hidden;
}
.progress-fill::after {
content:''; position:absolute; top:0; left:0; right:0; height:50%;
background:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 100%);
border-radius:inherit;
}
.progress-label { font-size:13px; color:var(--text-secondary); }
/* === Result === */
.result-box {
display:none; text-align:center; padding:20px; margin-top:14px; border-radius:14px;
background:linear-gradient(160deg, rgba(48,209,88,0.1) 0%, rgba(48,209,88,0.04) 100%);
border:1px solid rgba(48,209,88,0.2);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.result-box.visible { display:block; }
.result-box h4 { color:var(--green); margin-bottom:6px; font-weight:700; }
.result-box p { font-size:13px; color:var(--text-secondary); margin-bottom:12px; }
.result-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.error-box {
display:none; text-align:center; padding:16px; margin-top:14px; border-radius:14px;
background:linear-gradient(160deg, rgba(255,69,58,0.08) 0%, rgba(255,69,58,0.03) 100%);
border:1px solid rgba(255,69,58,0.2); color:var(--red); font-size:13px;
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.error-box.visible { display:block; }
#sonstigeDropZone.drag-over { border-color:var(--brand);background:var(--brand-bg); }
#sonstigeDropZone.drag-over svg { stroke:var(--brand); }
.sonstige-file {
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;font-size:13px;transition:all .2s;
background:linear-gradient(160deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 100%);
border:1px solid var(--border);
}
html.dark .sonstige-file { background:linear-gradient(160deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.008) 100%); }
.sonstige-file:hover { transform:translateX(2px); }
.sonstige-file .sf-icon { flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(220,38,38,0.08);display:flex;align-items:center;justify-content:center; }
.sonstige-file .sf-info { flex:1;min-width:0; }
.sonstige-file .sf-name { font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sonstige-file .sf-meta { font-size:11px;color:var(--text-secondary); }
.sonstige-file .sf-del { flex-shrink:0;width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.sonstige-file .sf-del:hover { background:rgba(220,38,38,0.1);color:var(--red); }
/* === Generate button === */
.btn-generate {
width:100%; padding:14px; border:none; border-radius:12px;
background:linear-gradient(135deg, var(--brand), var(--brand-light)); color:white;
font-size:15px; font-weight:600; font-family:inherit; cursor:pointer;
transition:all 0.3s cubic-bezier(0.2, 0, 0, 1);
box-shadow:0 4px 14px rgba(7,161,226,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
position:relative; overflow:hidden;
}
.btn-generate::after {
content:''; position:absolute; top:0; left:0; right:0; height:50%;
background:linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
pointer-events:none;
}
.btn-generate:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(7,161,226,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-generate:active { transform:translateY(0); }
.btn-generate:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
.bp-btn-row { display:flex; flex-direction:column; gap:8px; }
.bp-btn-secondary { display:flex; gap:8px; }
@media(min-width:500px) {
.bp-btn-row { flex-direction:row; }
.bp-btn-row .btn-generate { flex:1; }
}
.spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin 0.6s linear infinite; vertical-align:middle; margin-left:6px; }
@keyframes spin { to { transform:rotate(360deg); } }
/* === BP-Konfiguration === */
.bpc-section { border:1px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
.bpc-header { display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; font-size:13px; font-weight:600; background:var(--bg-card); transition:background 0.15s; }
.bpc-header:hover { background:var(--bg-hover); }
.bpc-header.open .bpc-chev { transform:rotate(90deg); }
.bpc-body { padding:12px 14px; border-top:1px solid var(--border); }
.bpc-info { font-size:11px; color:var(--text-secondary); padding:8px 10px; border-radius:6px; background:var(--bg-hover); border:1px solid var(--border); margin-bottom:10px; line-height:1.5; }
.bpc-info code { background:var(--bg-code,rgba(0,0,0,0.15)); padding:1px 4px; border-radius:3px; font-size:11px; }
.bpc-badge { font-size:10px; padding:2px 8px; border-radius:10px; background:var(--brand); color:#fff; margin-left:auto; }
.bpc-badge.bpc-readonly { background:var(--text-tertiary); }
.bpc-table { width:100%; border-collapse:collapse; font-size:12px; }
.bpc-table th { text-align:left; padding:6px 8px; font-size:11px; color:var(--text-secondary); border-bottom:1px solid var(--border); font-weight:600; white-space:nowrap; }
.bpc-table td { padding:5px 8px; border-bottom:1px solid var(--border-light,rgba(255,255,255,0.04)); }
.bpc-table td.num, .bpc-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.bpc-table tbody tr:hover { background:var(--bg-hover); }
.bpc-table select { font-size:11px; padding:2px 4px; border-radius:4px; border:1px solid var(--border); background:var(--bg-input); color:var(--text); }
/* === BP-Konfiguration Full Page === */
.bpc-topbar {
display:flex; align-items:center; gap:12px; padding:12px 20px;
background:var(--bg-card); border-bottom:1px solid var(--border);
position:sticky; top:0; z-index:10;
}
.bpc-mode-toggle { display:flex; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--bg-main); }
.bpc-mode-btn { display:flex; align-items:center; gap:5px; padding:6px 14px; font-size:12px; font-weight:600; border:none; background:transparent; color:var(--text-secondary); cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.bpc-mode-btn:hover { color:var(--text); background:var(--bg-hover); }
.bpc-mode-btn.active { background:var(--brand); color:#fff; }
.bpc-mode-btn.active svg { stroke:#fff; }
.bpc-obj-display { display:flex; flex-direction:column; gap:2px; min-width:0; }
.bpc-topbar-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.bpc-select {
font-size:13px; padding:6px 10px; border-radius:var(--radius-sm,6px);
border:1px solid var(--border); background:var(--bg-input,var(--bg-main));
color:var(--text); cursor:pointer; font-weight:600;
}
.bpc-tabs {
display:flex; gap:4px; padding:12px 20px 0; background:var(--bg-card);
border-bottom:1px solid var(--border); overflow-x:auto;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.bpc-tabs::-webkit-scrollbar { display:none; }
.bpc-tab {
padding:8px 16px; font-size:13px; font-weight:500; border:none; cursor:pointer;
background:transparent; color:var(--text-secondary); border-radius:8px 8px 0 0;
transition:all 0.2s ease; white-space:nowrap; position:relative;
}
.bpc-tab:hover { color:var(--text); background:var(--bg-hover); }
.bpc-tab.active {
color:var(--brand); font-weight:600;
background:var(--bg-main);
box-shadow:inset 0 -2px 0 var(--brand);
}
.bpc-panel { display:none; padding:20px; overflow-y:auto; flex:1; }
.bpc-panel.active { display:block; }
.bpc-panel-inner { max-width:1100px; margin:0 auto; }
.bpc-table-wrap {
border:1px solid var(--border); border-radius:8px; overflow:hidden;
background:var(--bg-card);
}
.bpc-table-wrap .bpc-table th { background:var(--bg-hover); }
#pageBpconfig.active {
display:flex !important; flex-direction:column; overflow:hidden;
}
/* Kanban Board */
.bpc-kanban {
display:grid; grid-template-columns:repeat(5, 1fr); gap:16px;
padding:0 20px 20px; flex:1; overflow-y:auto;
}
.bpc-kanban-col {
background:var(--bg-card); border:1px solid var(--border);
border-radius:12px; display:flex; flex-direction:column;
min-height:200px; overflow:hidden;
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.bpc-kanban-col-header {
padding:12px 14px; font-size:13px; font-weight:700;
border-bottom:1px solid var(--border);
display:flex; align-items:center; gap:8px;
color:var(--text); letter-spacing:0.01em;
}
.bpc-kanban-col-header .bpc-col-count {
font-size:10px; font-weight:600; padding:2px 7px;
border-radius:10px; background:var(--brand); color:#fff;
margin-left:auto;
}
.bpc-kanban-col-body {
padding:8px; flex:1; display:flex; flex-direction:column; gap:6px;
overflow-y:auto; min-height:60px;
}
.bpc-kanban-col-body.drag-over {
background:rgba(0,122,255,0.06);
border:2px dashed var(--brand);
border-radius:0 0 12px 12px;
margin:-1px;
}
.bpc-kanban-card {
padding:10px 12px; border-radius:8px;
background:var(--bg-main); border:1px solid var(--border);
cursor:grab; transition:all 0.15s ease;
display:flex; flex-direction:column; gap:4px;
user-select:none; -webkit-user-select:none;
}
.bpc-kanban-card:hover {
border-color:var(--brand); box-shadow:0 2px 8px rgba(0,122,255,0.12);
transform:translateY(-1px);
}
.bpc-kanban-card.dragging { opacity:0.4; transform:scale(0.95); }
.bpc-kanban-card.has-override {
border-left:3px solid var(--brand);
}
.bpc-kanban-card-nr {
font-size:12px; font-weight:700; color:var(--text);
font-variant-numeric:tabular-nums;
}
.bpc-kanban-card-name {
font-size:11px; color:var(--text-secondary);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bpc-kanban-card-saldo {
font-size:11px; font-weight:600; color:var(--text-secondary);
font-variant-numeric:tabular-nums; margin-top:2px;
}
/* Hidden zone */
.bpc-hidden-zone {
margin:0 20px 20px; padding:12px 16px; border-radius:10px;
border:2px dashed var(--border); min-height:60px;
background:var(--bg-hover); transition:all 0.2s;
}
.bpc-hidden-zone.drag-over {
border-color:var(--red); background:rgba(255,69,58,0.06);
}
.bpc-hidden-zone-header {
font-size:12px; font-weight:600; color:var(--text-secondary);
margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.bpc-hidden-cards {
display:flex; flex-wrap:wrap; gap:6px;
}
.bpc-hidden-cards .bpc-kanban-card {
flex:0 0 auto; max-width:180px; opacity:0.6;
}
/* Add-Button in Kanban-Spalten */
.bpc-add-btn {
width:22px; height:22px; border-radius:6px; border:1px solid var(--border);
background:var(--bg-main); color:var(--text-secondary); cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:all 0.15s; padding:0; margin-left:4px; flex-shrink:0;
}
.bpc-add-btn:hover {
background:var(--brand); color:#fff; border-color:var(--brand);
}
/* Konten-Picker Dropdown */
.bpc-add-picker {
position:fixed; z-index:1000;
background:var(--bg-card); border:1px solid var(--border);
border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,0.18);
display:flex; flex-direction:column; max-height:420px;
width:360px;
}
.bpc-add-picker-header {
display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-bottom:1px solid var(--border);
font-size:12px; color:var(--text);
}
.bpc-add-picker-close {
background:none; border:none; font-size:18px; color:var(--text-secondary);
cursor:pointer; padding:0 4px; line-height:1;
}
.bpc-add-picker-close:hover { color:var(--red); }
.bpc-add-picker-search {
margin:8px 10px 4px; padding:6px 10px; border-radius:6px;
border:1px solid var(--border); background:var(--bg-main);
font-size:12px; color:var(--text); outline:none;
}
.bpc-add-picker-search:focus { border-color:var(--brand); }
.bpc-add-picker-actions {
display:flex; align-items:center; gap:6px; padding:6px 10px;
border-bottom:1px solid var(--border);
}
.bpc-add-picker-list {
flex:1; overflow-y:auto; padding:4px 0;
}
.bpc-add-picker-item {
display:flex; align-items:center; gap:8px; padding:5px 12px;
cursor:pointer; font-size:12px; transition:background 0.1s;
}
.bpc-add-picker-item:hover { background:var(--bg-hover); }
.bpc-picker-nr {
font-weight:700; font-variant-numeric:tabular-nums; min-width:48px;
color:var(--text);
}
.bpc-picker-name {
flex:1; color:var(--text-secondary); overflow:hidden;
text-overflow:ellipsis; white-space:nowrap;
}
.bpc-picker-from {
font-size:10px; color:var(--text-tertiary); white-space:nowrap;
}
.bpc-add-picker-footer {
padding:8px 10px; border-top:1px solid var(--border);
display:flex; justify-content:flex-end;
}
/* Kontoauszuege toggle */
.bpc-ka-toggle {
position:relative; width:44px; height:24px; cursor:pointer;
display:inline-block;
}
.bpc-ka-toggle input { opacity:0; width:0; height:0; }
.bpc-ka-toggle .bpc-ka-slider {
position:absolute; inset:0; border-radius:12px;
background:var(--border); transition:all 0.2s;
}
.bpc-ka-toggle .bpc-ka-slider::before {
content:''; position:absolute; width:18px; height:18px;
border-radius:50%; background:white; top:3px; left:3px;
transition:transform 0.2s;
}
.bpc-ka-toggle input:checked + .bpc-ka-slider {
background:var(--green);
}
.bpc-ka-toggle input:checked + .bpc-ka-slider::before {
transform:translateX(20px);
}
/* Ranges */
.bpc-ranges-grid {
display:grid; grid-template-columns:1fr; gap:12px; max-width:600px;
}
.bpc-range-row {
display:flex; align-items:center; gap:12px; padding:14px 16px;
background:var(--bg-card); border:1px solid var(--border);
border-radius:10px; transition:border-color 0.2s;
}
.bpc-range-row:hover { border-color:var(--brand); }
.bpc-range-label {
font-size:13px; font-weight:600; color:var(--text); min-width:200px;
}
.bpc-range-input {
width:80px; padding:6px 10px; font-size:13px; font-weight:600;
border:1px solid var(--border); border-radius:6px;
background:var(--bg-input,var(--bg-main)); color:var(--text);
text-align:center; font-variant-numeric:tabular-nums;
}
.bpc-range-input:focus {
outline:none; border-color:var(--brand);
box-shadow:0 0 0 3px rgba(0,122,255,0.15);
}
.bpc-range-sep { font-size:12px; color:var(--text-secondary); font-weight:500; }
@media (max-width:1200px) {
.bpc-kanban { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:768px) {
.bpc-kanban { grid-template-columns:repeat(2, 1fr); gap:10px; padding:0 12px 12px; }
.bpc-topbar { flex-wrap:wrap; padding:10px 12px; }
.bpc-tabs { padding:8px 12px 0; }
.bpc-range-label { min-width:140px; font-size:12px; }
.bpc-range-input { width:65px; }
}
@media (max-width:480px) {
.bpc-kanban { grid-template-columns:1fr; }
}
/* ═══ Legacy compat: Shares (alte Klassen) ═══ */
.shares-toolbar { display:flex; gap:10px; margin-bottom:16px; align-items:center; flex-wrap:wrap; }
.shares-toolbar .form-input { max-width:280px; }
.shares-toolbar .form-select { max-width:180px; }
.share-item {
border:1px solid var(--border-glass); border-radius:var(--radius); padding:16px 18px;
background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
transition:all 0.2s ease; cursor:pointer;
}
.share-item:hover { border-color:var(--gray-300); box-shadow:var(--shadow); transform:translateY(-1px); }
.share-item.selected { border-color:var(--brand); background:var(--brand-bg); }
.share-header { display:flex; align-items:center; gap:10px; }
.share-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.share-dot.active { background:var(--green); }
.share-dot.expired { background:var(--red); }
.share-dot.notup { background:var(--gray-300); }
.share-details { flex:1; }
.share-name { font-size:14px; font-weight:600; }
.share-meta { display:flex; gap:8px; margin-top:3px; font-size:12px; color:var(--text-secondary); flex-wrap:wrap; align-items:center; }
.status-pill {
display:inline-block; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:600;
}
.status-pill.active { background:var(--green-bg); color:var(--green); }
.status-pill.expired { background:var(--red-bg); color:var(--red); }
.status-pill.notup { background:var(--gray-100); color:var(--gray-500); }
.share-link-row {
display:flex; align-items:center; gap:8px; margin-top:8px; padding:10px 12px;
background:var(--bg-card-hover); border-radius:var(--radius-sm); font-size:12px;
}
.share-link-row a { color:var(--brand); text-decoration:none; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-link-row a:hover { text-decoration:underline; }
.pw-badge {
background:var(--bg-card-hover); padding:2px 8px; border-radius:4px; font-size:11px;
cursor:pointer; font-family:monospace; color:var(--text-secondary);
}
.pw-badge:hover { background:var(--gray-200); }
.share-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.bulk-bar {
display:none; align-items:center; gap:10px; padding:12px 18px;
background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
border:1px solid var(--border-glass); border-radius:var(--radius-sm); margin-bottom:14px; font-size:13px;
}
.bulk-bar.visible { display:flex; }
/* === Toast === */
.toast-container {
position:fixed; top:16px; right:16px; z-index:9999;
display:flex; flex-direction:column; gap:8px; pointer-events:none;
max-width:420px;
}
.toast-item {
pointer-events:auto;
display:flex; align-items:flex-start; gap:10px;
padding:12px 16px; border-radius:var(--radius);
background:var(--bg-modal); color:var(--text);
border:1px solid var(--border-glass);
backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
font-size:13px; font-weight:500; box-shadow:var(--shadow-lg);
opacity:0; transform:translateX(40px);
transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
cursor:pointer;
}
.toast-item.show { opacity:1; transform:translateX(0); }
.toast-item.hiding { opacity:0; transform:translateX(40px); }
.toast-item .toast-icon { font-size:16px; flex-shrink:0; line-height:1; }
.toast-item .toast-msg { flex:1; line-height:1.4; }
.toast-item.toast-success { border-left:3px solid #059669; }
.toast-item.toast-success .toast-icon { color:#059669; }
.toast-item.toast-error { border-left:3px solid #DC2626; }
.toast-item.toast-error .toast-icon { color:#DC2626; }
.toast-item.toast-warning { border-left:3px solid #F59E0B; }
.toast-item.toast-warning .toast-icon { color:#F59E0B; }
.toast-item.toast-info { border-left:3px solid #2563EB; }
.toast-item.toast-info .toast-icon { color:#2563EB; }
/* === FIBU Sub-Tabs === */
.fibu-subtab-bar {
display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:12px; padding:0 4px;
}
.fibu-subtab {
padding:8px 14px; font-size:12px; font-weight:500; border:none; background:none;
color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent;
transition:all 0.15s; white-space:nowrap;
}
.fibu-subtab:hover { color:var(--text); background:var(--bg-card-hover); }
.fibu-subtab.active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
/* === FIBU Buchen-Drawer === */
.fibu-drawer-overlay {
position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:800;
opacity:0; pointer-events:none; transition:opacity 0.25s;
display:flex; align-items:center; justify-content:center;
}
.fibu-drawer-overlay.open { opacity:1; pointer-events:auto; }
.fibu-drawer {
width:90vw; max-width:960px; max-height:90vh; z-index:801;
background:var(--bg-card); border:1px solid var(--border);
border-radius:var(--radius); box-shadow:var(--shadow-lg);
display:flex; flex-direction:column; overflow:hidden;
transform:scale(0.95); opacity:0; transition:all 0.2s ease;
}
.fibu-drawer-overlay.open .fibu-drawer { transform:scale(1); opacity:1; }
/* === FIBU TopBar === */
#fibuTopBar {
height:52px; background:var(--bg-card); border-bottom:1px solid var(--border);
display:flex; align-items:center; gap:12px; padding:0 16px;
position:sticky; top:0; z-index:100;
}
#fibuCtxObjekt:hover, #fibuCtxJahr:hover { border-color:var(--brand); }
/* === FIBU Layout === */
#fibuBodyWrap {
display:flex; flex:1; min-height:0; overflow:hidden;
}
/* === FIBU Sidebar === */
#fibuSidebar {
width:200px; flex-shrink:0; border-right:1px solid var(--border);
padding:8px; display:flex; flex-direction:column;
overflow-y:auto; background:var(--bg-card);
transition:width 0.2s ease;
}
#fibuSidebar.collapsed { width:52px; }
#fibuSidebar.collapsed .fnav-label,
#fibuSidebar.collapsed .fnav-badge,
#fibuSidebar.collapsed .fnav-sep { display:none; }
#fibuSidebar.collapsed .fnav-item { justify-content:center; padding:8px; }
.fnav-item {
display:flex; align-items:center; gap:10px; padding:8px 10px;
border-radius:var(--radius-sm); cursor:pointer; font-size:13px;
color:var(--text-muted); transition:all 0.15s; font-weight:500;
border:none; background:none; width:100%; text-align:left;
}
.fnav-item:hover { background:var(--bg-main); color:var(--text); }
.fnav-item.active { background:var(--brand); color:#fff; }
.fnav-item.active .fnav-icon svg { stroke:#fff; }
.fnav-icon { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.fnav-icon svg { width:18px; height:18px; }
.fnav-sep {
font-size:9px; text-transform:uppercase; letter-spacing:0.8px;
color:var(--text-muted); padding:12px 10px 4px; font-weight:600;
}
.fnav-badge {
background:var(--brand); color:#fff; border-radius:10px;
padding:1px 7px; font-size:11px; font-weight:700; margin-left:auto;
}
.fnav-badge.warn { background:var(--red); }
.fnav-label { white-space:nowrap; }
#fibuSidebarFooter { margin-top:auto; padding:8px; }
#fibuBtnBuchen {
width:100%; padding:10px; background:var(--brand); color:#fff;
border:none; border-radius:var(--radius-sm); font-weight:600;
font-size:13px; cursor:pointer;
}
#fibuBtnBuchen:hover { filter:brightness(1.1); }
/* === Lokale Objekt/WJ-Selects ausblenden (globaler Kontext steuert) === */
#fibuJlObjekt, #fibuSollObjekt, #fibuBvObjekt, #fibuSlObjekt, #fibuOpObjekt,
#fibuWpObjekt, #fibuAbrObjekt, #fibuJaObjekt, #fibuBwaObjekt, #fibuKstObjekt,
#fibuUstObjekt, #fibuOkObjekt, #fibuHgkObjekt, #fibuSyncObjekt, #fibuSessionObjekt,
#fibuLrObjekt, #fibuSlWjahr, #fibuOpWjahr, #fibuBwaWjahr, #fibuUstWjahr,
#fibuOkWjahr, #fibuJlJahr { display:none !important; }
/* === KPI Cards === */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.kpi-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.kpi-label { font-size:12px; color:var(--text-muted); margin-bottom:4px; }
.kpi-value { font-size:28px; font-weight:700; color:var(--text); }
.kpi-value.kpi-warn { color:var(--red); }
.kpi-sub { font-size:12px; color:var(--text-muted); margin-top:4px; }
/* === Skeleton === */
.skeleton {
background:linear-gradient(90deg, var(--bg-main) 25%, var(--bg-card) 50%, var(--bg-main) 75%);
background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:4px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* === Kontext-Hint === */
.kontext-hint { text-align:center; padding:80px 20px; color:var(--text-muted); }
.kontext-hint p { font-size:16px; margin-bottom:16px; }
/* === Command Palette === */
#fibuCmdBackdrop { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:199; }
#fibuCmdModal {
position:fixed; top:18%; left:50%; transform:translateX(-50%);
width:520px; background:var(--bg-card); border:1px solid var(--border);
border-radius:12px; box-shadow:0 25px 50px rgba(0,0,0,0.5); z-index:200;
}
#fibuCmdInput {
width:100%; background:transparent; border:none;
border-bottom:1px solid var(--border); padding:16px;
font-size:15px; color:var(--text); outline:none;
}
.cp-result {
padding:10px 14px; cursor:pointer; border-radius:var(--radius);
display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text);
}
.cp-result:hover, .cp-result.selected { background:var(--bg-main); }
/* === Dropzone === */
.dropzone {
border:2px dashed var(--border); border-radius:var(--radius);
padding:16px; text-align:center; color:var(--text-muted);
cursor:pointer; margin-top:8px; transition:all 0.2s; font-size:13px;
}
.dropzone:hover, .dropzone.dragover { border-color:var(--brand); background:rgba(59,130,246,0.05); color:var(--brand); }
/* === Workflow Dots === */
.wf-dot { width:10px; height:10px; border-radius:50%; background:var(--border); border:1px solid var(--text-muted); transition:all 0.3s; }
.wf-dot.done { background:var(--green); border-color:var(--green); }
.wf-dot.active { background:var(--brand); border-color:var(--brand); animation:pulse 2s infinite; }
.wf-dot.warn { background:var(--red); border-color:var(--red); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
/* Legacy single toast (Kompatibilität) */
.toast {
position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(100px);
background:var(--bg-modal); color:var(--text); padding:12px 24px; border-radius:var(--radius);
border:1px solid var(--border-glass);
backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
font-size:13px; font-weight:500; box-shadow:var(--shadow-lg);
opacity:0; transition:all 0.35s cubic-bezier(0.4,0,0.2,1); z-index:9999;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
/* === Overlay / Modal === */
.overlay {
position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:500;
display:none; align-items:center; justify-content:center;
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
html.dark .overlay { background:rgba(0,0,0,0.5); }
.overlay.open { display:flex; }
.modal {
background:var(--bg-modal);
backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
border:1px solid var(--border-glass);
border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
max-height:85vh; overflow-y:auto; width:480px;
animation:modalIn 0.25s ease-out;
}
@keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(10px); } }
.modal-header {
display:flex; align-items:center; justify-content:space-between;
padding:22px 28px; border-bottom:1px solid var(--border-light);
}
.modal-header h3 { font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.modal-close {
background:none; border:none; cursor:pointer; color:var(--text-muted);
font-size:20px; padding:6px; border-radius:8px; transition:all 0.15s;
}
.modal-close:hover { background:var(--bg-card-hover); color:var(--text); }
.modal-body { padding:22px 28px; }
/* Porto Detail: iOS-style grouped background (light mode only) */
.porto-detail-body { background:#F2F2F7; border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.porto-detail-body .porto-section { background:#fff; border:none; border-radius:12px; padding:16px; margin-bottom:14px; box-shadow:0 0 0 0.5px rgba(0,0,0,0.04); }
.porto-detail-body .porto-section-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.6px; color:#6B7280; margin-bottom:10px; }
.porto-detail-body .porto-header-card { background:#fff; border-radius:12px; padding:16px; margin-bottom:14px; box-shadow:0 0 0 0.5px rgba(0,0,0,0.04); }
.porto-detail-body .porto-sep { border-top:1px solid #E5E5EA; margin:6px 0; }
.porto-detail-body .porto-text-primary { color:#000; }
.porto-detail-body .porto-text-secondary { color:#6B7280; }
html.dark .porto-detail-body { background:transparent; }
html.dark .porto-detail-body .porto-section { background:transparent; border:1px solid var(--border-light); box-shadow:none; }
html.dark .porto-detail-body .porto-header-card { background:transparent; box-shadow:none; }
html.dark .porto-detail-body .porto-sep { border-color:var(--border-light); }
html.dark .porto-detail-body .porto-section-label { color:var(--text-muted); }
html.dark .porto-detail-body .porto-text-primary { color:var(--text); }
html.dark .porto-detail-body .porto-text-secondary { color:var(--text-secondary); }
/* === Adressen === */
.adr-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:white; flex-shrink:0; }
.adr-avatar-lg { width:52px; height:52px; font-size:18px; }
.adr-table tr.adr-active { outline:2px solid rgba(7,161,226,0.5); outline-offset:-2px; background:rgba(7,161,226,0.06) !important; }
.adr-table .adr-col-email, .adr-table .adr-col-phone, .adr-table .adr-col-obj { white-space:nowrap; }
@media(max-width:767px) { .adr-table .adr-col-email, .adr-table .adr-col-phone, .adr-table .adr-col-obj { display:none; } .adr-table th.adr-col-email, .adr-table th.adr-col-phone, .adr-table th.adr-col-obj { display:none; } }
/* Search glow on focus */
.adr-search-glow:focus { border-color:rgba(0,122,255,0.5); box-shadow:0 0 0 3px rgba(0,122,255,0.1),0 2px 8px rgba(0,0,0,0.2); }
.adr-badges { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.adr-badge { display:inline-block; padding:2px 8px; border-radius:99px; font-size:10px; font-weight:600; line-height:16px; white-space:nowrap; }
.adr-badge-eig { background:rgba(37,99,235,0.12); color:#2563EB; }
.adr-badge-mieter { background:rgba(139,92,246,0.12); color:#8B5CF6; }
.adr-badge-beirat { background:rgba(249,115,22,0.12); color:#F97316; }
.adr-badge-other { background:rgba(100,116,139,0.1); color:#64748b; }
html.dark .adr-badge-eig { background:rgba(37,99,235,0.2); color:#60a5fa; }
html.dark .adr-badge-mieter { background:rgba(139,92,246,0.2); color:#a78bfa; }
html.dark .adr-badge-beirat { background:rgba(249,115,22,0.2); color:#fb923c; }
.adr-obj-hint { font-size:10px; color:var(--text-muted); }
/* Beiräte Objektliste */
.beir-obj-item {
display:flex; align-items:center; gap:12px; padding:12px 18px; cursor:pointer;
border-bottom:1px solid var(--border-light); transition:background 0.15s;
}
.beir-obj-item:hover { background:rgba(7,161,226,0.04); }
.beir-obj-item:active { background:rgba(7,161,226,0.08); }
.beir-obj-item.beir-obj-active { background:rgba(7,161,226,0.06); border-left:3px solid var(--brand); padding-left:15px; }
.beir-obj-item:last-child { border-bottom:none; }
/* Beirat Person Cards */
.beir-person-card {
padding:14px 18px; border-bottom:1px solid var(--border-light);
animation:dashCardIn 0.3s cubic-bezier(0.16,1,0.3,1) both;
}
.beir-person-card:last-child { border-bottom:none; }
.beir-person-card.beir-partner { padding-left:48px; }
.beir-person-main { display:flex; align-items:flex-start; gap:12px; }
.beir-person-avatar {
width:40px; height:40px; border-radius:50%; color:white; font-size:14px; font-weight:700;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.beir-person-info { flex:1; min-width:0; }
.beir-person-role { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); margin-bottom:2px; }
.beir-person-name { font-size:15px; font-weight:600; color:var(--text); line-height:1.3; }
.beir-person-name a:hover { color:var(--brand); }
.beir-person-email { font-size:12px; color:var(--brand); text-decoration:none; display:block; margin-top:2px; }
.beir-person-email:hover { text-decoration:underline; }
.beir-rp-toggle {
display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
flex-shrink:0; padding:4px 8px;
}
.beir-rp-toggle input { width:18px; height:18px; accent-color:var(--brand); cursor:pointer; }
.beir-rp-label { font-size:9px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
@media(max-width:767px) {
.beir-person-card { padding:12px 14px; }
.beir-person-card.beir-partner { padding-left:36px; }
.beir-person-avatar { width:36px; height:36px; font-size:13px; }
.beir-person-name { font-size:14px; }
}
/* Mobile Kontakt-Karten */
.adr-card {
background:linear-gradient(160deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 100%);
backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
border:none; outline:1px solid rgba(255,255,255,0.3); outline-offset:-1px;
border-radius:16px; margin-bottom:10px; cursor:pointer;
box-shadow:0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.4);
transition:transform 0.15s, box-shadow 0.15s;
animation:dashCardIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
overflow:hidden;
}
html.dark .adr-card {
background:linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
outline-color:rgba(255,255,255,0.08);
box-shadow:0 1px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}
.adr-card:active { transform:scale(0.98); }
.adr-card-main { display:flex; align-items:center; gap:12px; padding:14px 16px; }
.adr-card-info { flex:1; min-width:0; }
.adr-card-name { font-size:15px; font-weight:600; color:var(--text); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adr-card-sub { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adr-card-addr { font-size:12px; color:var(--text-secondary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adr-card-footer { display:flex; align-items:center; justify-content:space-between; padding:8px 16px; border-top:1px solid var(--border-light); }
.adr-card-badges { display:flex; gap:4px; flex-wrap:wrap; }
.adr-card-actions { display:flex; gap:8px; margin-left:auto; }
.adr-card-action {
width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:rgba(7,161,226,0.08); color:var(--brand); text-decoration:none;
transition:background 0.15s;
}
.adr-card-action:active { background:rgba(7,161,226,0.2); }
/* Adr Detail Overlay */
.adr-detail-body { background:#F2F2F7; border-radius:0 0 var(--radius-lg) var(--radius-lg); padding:0; display:flex; flex-direction:column; }
.adr-detail-body .adr-section { background:#fff; border:none; border-radius:12px; padding:16px; margin-bottom:14px; box-shadow:0 0 0 0.5px rgba(0,0,0,0.04); }
.adr-detail-body .adr-section-label { font-size:13px; font-weight:600; color:#8E8E93; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.adr-detail-body .adr-section-label::after { content:''; flex:1; height:0.5px; background:#8E8E93; opacity:0.3; }
.adr-detail-body .adr-header-card { background:#fff; border-radius:12px; padding:20px; margin-bottom:14px; box-shadow:0 0 0 0.5px rgba(0,0,0,0.04); }
.adr-detail-body .adr-sep { border-top:0.5px solid rgba(0,0,0,0.06); margin:6px 0; }
html.dark .adr-detail-body { background:transparent; }
html.dark .adr-detail-body .adr-section { background:transparent; border:1px solid var(--border-light); box-shadow:none; }
html.dark .adr-detail-body .adr-header-card { background:transparent; box-shadow:none; }
html.dark .adr-detail-body .adr-sep { border-color:rgba(255,255,255,0.08); }
/* Action bar */
.adr-action-bar { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.adr-action-btn { display:inline-flex; align-items:center; gap:6px; padding:0 14px; height:32px; border-radius:8px; font-size:12px; font-weight:600; background:transparent; color:var(--brand); border:1px solid var(--brand); cursor:pointer; transition:all 0.15s; text-decoration:none; }
.adr-action-btn:hover { background:rgba(7,161,226,0.08); transform:translateY(-1px); }
.adr-action-btn:active { transform:scale(0.97); }
.adr-action-btn svg { width:16px; height:16px; }
.adr-action-btn-primary { background:#007AFF; color:#fff; border-color:#007AFF; }
.adr-action-btn-primary:hover { background:#0066DD; border-color:#0066DD; }
.adr-action-btn-copy { font-size:11px; padding:0 10px; height:28px; border-radius:6px; color:var(--text-muted); border-color:var(--border-light); }
.adr-action-btn-copy:hover { color:var(--brand); border-color:var(--brand); background:rgba(7,161,226,0.06); }
.adr-action-btn-copy svg { width:13px; height:13px; }
/* ── Contact Copy — Liquid Glass Popup ── */
.adr-copy-overlay {
position:fixed;inset:0;background:rgba(0,0,0,0.25);z-index:10000;
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
animation:adrCopyOverlayIn 0.3s ease-out;
}
.adr-copy-overlay.closing { animation:adrCopyOverlayOut 0.2s ease-in forwards; }
html.dark .adr-copy-overlay { background:rgba(0,0,0,0.45); }
@keyframes adrCopyOverlayIn { from{opacity:0} to{opacity:1} }
@keyframes adrCopyOverlayOut { from{opacity:1} to{opacity:0} }
.adr-copy-panel {
position:relative;
background:var(--bg-modal);
backdrop-filter:var(--glass-blur-heavy);-webkit-backdrop-filter:var(--glass-blur-heavy);
border:1px solid var(--border-glass);
border-radius:20px;
box-shadow:0 8px 40px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.3);
max-width:440px;width:92%;max-height:80vh;overflow-y:auto;overflow-x:hidden;
animation:adrCopyPanelIn 0.4s cubic-bezier(0.16,1,0.3,1);
transform-origin:center center;
}
.adr-copy-overlay.closing .adr-copy-panel {
animation:adrCopyPanelOut 0.2s ease-in forwards;
}
html.dark .adr-copy-panel {
box-shadow:0 8px 40px rgba(0,0,0,0.4),0 2px 8px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.06);
}
.adr-copy-panel::before {
content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.65) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.65) 70%,transparent);
pointer-events:none;border-radius:1px;z-index:1;
}
html.dark .adr-copy-panel::before {
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08) 30%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.08) 70%,transparent);
}
@keyframes adrCopyPanelIn {
from{opacity:0;transform:scale(0.88) translateY(20px)} to{opacity:1;transform:none}
}
@keyframes adrCopyPanelOut {
from{opacity:1;transform:none} to{opacity:0;transform:scale(0.95) translateY(8px)}
}
.adr-copy-panel::-webkit-scrollbar { width:6px; }
.adr-copy-panel::-webkit-scrollbar-thumb { background:rgba(148,163,184,0.2);border-radius:3px; }
.adr-copy-header {
padding:22px 24px 0;display:flex;align-items:center;justify-content:space-between;
}
.adr-copy-title {
font-size:17px;font-weight:700;letter-spacing:-0.02em;color:var(--text);
}
.adr-copy-close {
background:rgba(148,163,184,0.1);border:none;cursor:pointer;color:var(--text-muted);
width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:18px;transition:all 0.2s;line-height:1;
}
.adr-copy-close:hover { background:rgba(148,163,184,0.2);color:var(--text);transform:scale(1.1); }
.adr-copy-close:active { transform:scale(0.92); }
.adr-copy-preview {
margin:16px 24px;padding:14px 18px 14px 22px;
background:linear-gradient(135deg,rgba(7,161,226,0.04) 0%,rgba(139,92,246,0.03) 100%);
border:1px solid var(--border-light);border-radius:12px;
font-size:13px;line-height:1.7;color:var(--text-secondary);
position:relative;overflow:hidden;
}
html.dark .adr-copy-preview {
background:linear-gradient(135deg,rgba(7,161,226,0.07) 0%,rgba(139,92,246,0.05) 100%);
border-color:rgba(255,255,255,0.08);
}
.adr-copy-preview::before {
content:'';position:absolute;left:0;top:10%;bottom:10%;width:3px;
background:linear-gradient(180deg,var(--brand),rgba(139,92,246,0.6));border-radius:3px;
}
.adr-copy-section { padding:0 24px;margin-top:18px; }
.adr-copy-section-label {
display:flex;align-items:center;gap:7px;
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;
color:var(--text-muted);margin-bottom:10px;
}
.adr-copy-section-label svg { width:14px;height:14px;opacity:0.65; }
.adr-copy-section-hint {
font-weight:400;text-transform:none;letter-spacing:0;opacity:0.7;font-size:10px;
}
.adr-copy-item {
display:flex;align-items:center;gap:12px;
padding:10px 14px;margin-bottom:6px;
border-radius:12px;border:1.5px solid var(--border);
cursor:pointer;transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
position:relative;overflow:hidden;background:transparent;
}
.adr-copy-item:hover {
border-color:rgba(7,161,226,0.3);background:rgba(7,161,226,0.02);
}
.adr-copy-item.selected {
border-color:var(--brand);background:rgba(7,161,226,0.05);
box-shadow:0 0 0 3px rgba(7,161,226,0.08);
}
html.dark .adr-copy-item:hover { background:rgba(44,181,240,0.04); }
html.dark .adr-copy-item.selected {
background:rgba(44,181,240,0.08);box-shadow:0 0 0 3px rgba(44,181,240,0.1);
}
.adr-copy-item input[type="checkbox"] {
position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.adr-copy-check {
width:22px;height:22px;border-radius:7px;flex-shrink:0;
border:2px solid var(--border);
display:flex;align-items:center;justify-content:center;
transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);background:transparent;
}
.adr-copy-item.selected .adr-copy-check {
background:var(--brand);border-color:var(--brand);
}
.adr-copy-check svg {
width:13px;height:13px;stroke:#fff;stroke-width:2.5;fill:none;
opacity:0;transform:scale(0.4);
transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.adr-copy-item.selected .adr-copy-check svg { opacity:1;transform:scale(1); }
.adr-copy-item-text { min-width:0;flex:1; }
.adr-copy-item-primary { font-size:14px;color:var(--text);font-variant-numeric:tabular-nums; }
.adr-copy-item-secondary { font-size:11px;color:var(--text-muted);margin-top:2px; }
.adr-copy-item:active { transform:scale(0.98); }
.adr-copy-actions { display:flex;gap:10px;padding:20px 24px 24px; }
.adr-copy-btn {
flex:1;padding:12px;border-radius:12px;font-size:14px;font-weight:600;
font-family:inherit;cursor:pointer;transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.adr-copy-btn-cancel {
background:rgba(148,163,184,0.08);border:1px solid var(--border);color:var(--text);
}
.adr-copy-btn-cancel:hover { background:rgba(148,163,184,0.15);border-color:rgba(148,163,184,0.3); }
.adr-copy-btn-cancel:active { transform:scale(0.97); }
.adr-copy-btn-confirm {
background:linear-gradient(135deg,var(--brand) 0%,#0689c2 100%);
border:none;color:#fff;
box-shadow:0 2px 12px rgba(7,161,226,0.3),inset 0 1px 0 rgba(255,255,255,0.2);
}
.adr-copy-btn-confirm:hover {
transform:translateY(-1px);
box-shadow:0 4px 20px rgba(7,161,226,0.4),inset 0 1px 0 rgba(255,255,255,0.2);
}
.adr-copy-btn-confirm:active { transform:translateY(0) scale(0.97); }
.adr-action-btn-kopieren {
background:linear-gradient(135deg,rgba(7,161,226,0.08),rgba(7,161,226,0.02));
border-color:var(--brand);color:var(--brand);position:relative;overflow:hidden;
}
.adr-action-btn-kopieren::after {
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,transparent 40%,rgba(7,161,226,0.1) 100%);
opacity:0;transition:opacity 0.2s;
}
.adr-action-btn-kopieren:hover::after { opacity:1; }
/* Contact rows */
.adr-contact-row { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 4px; }
.adr-contact-row svg { width:16px; height:16px; flex-shrink:0; color:var(--text-muted); }
.adr-contact-icon { width:16px; height:16px; flex-shrink:0; }
.adr-std-badge { font-size:9px; font-weight:700; color:#34C759; background:rgba(52,199,89,0.12); padding:2px 7px; border-radius:99px; text-transform:uppercase; letter-spacing:0.3px; }
html.dark .adr-std-badge { background:rgba(52,199,89,0.2); color:#4ade80; }
/* Unit cards */
.adr-obj-group { margin-bottom:14px; }
.adr-obj-group:last-child { margin-bottom:0; }
.adr-obj-header { font-size:12px; font-weight:700; color:var(--text); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.adr-obj-header span { font-weight:400; color:var(--text-muted); font-size:11px; }
.adr-unit-card { display:flex; justify-content:space-between; align-items:center; padding:12px; background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px; margin-bottom:6px; cursor:pointer; transition:all 0.15s; }
.adr-unit-card:hover { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.adr-unit-card:last-child { margin-bottom:0; }
html.dark .adr-unit-card { background:rgba(255,255,255,0.03); }
/* Role chips (horizontal row under unit card) */
.adr-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.adr-role-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:99px; font-size:11px; font-weight:500; color:var(--text-secondary); background:var(--bg-card); border:1px solid var(--border-light); line-height:1.2; }
.adr-role-chip-eig { border-left:3px solid #2563EB; }
.adr-role-chip-mieter { border-left:3px solid #8B5CF6; }
.adr-role-chip-beirat { border-left:3px solid #F97316; }
.adr-role-chip-other { border-left:3px solid #94a3b8; }
.adr-role-chip .adr-chip-date { font-size:10px; color:var(--text-muted); margin-left:2px; }
html.dark .adr-role-chip { background:rgba(255,255,255,0.04); }
/* Bank card */
.adr-bank-card { display:flex; justify-content:space-between; align-items:center; padding:12px; background:var(--bg-card); border:1px solid var(--border-light); border-radius:10px; margin-bottom:8px; }
.adr-bank-card:last-child { margin-bottom:0; }
.adr-bank-card.adr-bank-inactive { opacity:0.5; }
html.dark .adr-bank-card { background:rgba(255,255,255,0.03); }
/* KPI footer bar */
.adr-kpi-bar { display:flex; align-items:center; justify-content:center; gap:0; padding:14px 16px; border-top:0.5px solid rgba(0,0,0,0.08); background:#fff; border-radius:0 0 var(--radius-lg) var(--radius-lg); flex-shrink:0; }
.adr-kpi-bar .adr-kpi-item { text-align:center; flex:1; }
.adr-kpi-bar .adr-kpi-val { font-size:20px; font-weight:700; color:var(--text); }
.adr-kpi-bar .adr-kpi-label { font-size:11px; color:var(--text-muted); margin-top:1px; }
.adr-kpi-bar .adr-kpi-divider { width:1px; height:32px; background:rgba(0,0,0,0.08); flex-shrink:0; }
html.dark .adr-kpi-bar { background:transparent; border-color:rgba(255,255,255,0.08); }
html.dark .adr-kpi-bar .adr-kpi-divider { background:rgba(255,255,255,0.08); }
/* Fade-in animation */
@keyframes adrFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.adr-fade { animation:adrFadeIn 0.25s ease-out both; }
.modal-footer { padding:18px 28px; border-top:1px solid var(--border-light); display:flex; gap:10px; justify-content:flex-end; }
/* === Settings === */
.fibu-nav-group { margin-bottom:12px; }
.fibu-nav-label { font-size:9px; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-muted); padding:0 8px 4px; font-weight:600; }
/* Objektkontenrahmen */
.ok-chip { height:32px;font-size:12px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:var(--text); }
.ok-row:hover { background:rgba(255,255,255,0.04); }
.ok-row:hover .ok-act-btn { opacity:1 !important; }
.ok-act-btn:hover { background:rgba(255,255,255,0.08); }
.ok-group-div:hover td > div { background:rgba(255,255,255,0.02); border-radius:6px; }
/* Debitorenkonto modal sections */
.deb-section .deb-chev svg { transform:rotate(180deg); }
.deb-section.deb-open .deb-chev svg { transform:rotate(0deg); }
.deb-section + .deb-body { display:none; }
.deb-section.deb-open + .deb-body { display:block; }
.fibu-tab { display:block; width:100%; text-align:left; padding:6px 10px; font-size:12px; border:none; background:none; color:var(--text-secondary); cursor:pointer; border-radius:6px; transition:all 0.15s; font-weight:500; }
.fibu-tab:hover { background:var(--bg-card-hover); color:var(--text); }
.fibu-tab.active { background:var(--brand); color:#fff; font-weight:600; }
.settings-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin:-22px -28px 22px; padding:0 28px; }
.settings-tab {
flex:1; padding:13px 0; text-align:center; font-size:14px; font-weight:500;
color:var(--text-secondary); background:none; border:none;
border-bottom:2px solid transparent; cursor:pointer; transition:all 0.2s;
}
.settings-tab:hover { color:var(--text); }
.settings-tab.active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.settings-card {
background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
border:1px solid var(--border-glass); border-radius:var(--radius); padding:20px 22px; margin-bottom:18px;
}
.settings-card-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.settings-card-title svg { color:var(--text-secondary); flex-shrink:0; }
.settings-section { margin-bottom:22px; }
.settings-section-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); margin-bottom:10px; padding-top:10px; border-top:1px solid var(--border-light); }
.settings-saved { display:none; text-align:center; color:var(--green); font-size:13px; font-weight:600; padding:8px; }
/* ── Settings Page — Tab-based Workspace ── */
#pageSettings.active { height:100%; display:flex; flex-direction:column; overflow:hidden; }
/* Layout: vertical stack (tabs on top, content below) */
.sett-layout { display:flex; flex-direction:column; height:100%; }
/* Top tab navigation — horizontal */
.sett-nav { display:flex; align-items:center; gap:0; border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; overflow-x:auto; overflow-y:hidden; padding:0 24px; scrollbar-width:none; -ms-overflow-style:none; }
.sett-nav::-webkit-scrollbar { display:none; }
.sett-nav-group { display:contents; }
.sett-nav-group-title { display:none; }
.sett-nav-item { display:flex; align-items:center; gap:6px; padding:12px 14px; font-size:13px; color:var(--text-secondary); background:none; border:none; cursor:pointer; text-align:left; white-space:nowrap; transition:color 0.15s; border-bottom:2px solid transparent; margin-bottom:-1px; font-family:inherit; border-left:none; }
.sett-nav-item:hover { color:var(--text); }
.sett-nav-item.active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.sett-nav-item svg { width:15px; height:15px; flex-shrink:0; opacity:0.5; }
.sett-nav-item.active svg { opacity:1; color:var(--brand); }
/* Content workspace — scrollable */
.sett-content { flex:1; overflow-y:auto; padding:0; position:relative; }
.sett-panel { display:none; }
.sett-panel.active { display:block; padding:32px 40px 100px; }
/* Sticky header with title + save */
.sett-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; padding:28px 40px 14px; margin:-32px -40px 24px; border-bottom:1px solid var(--border-light, var(--border)); }
.sett-header-left { flex:1; }
.sett-section-title { font-size:20px; font-weight:700; color:var(--text); margin:0 0 4px; }
.sett-section-desc { font-size:13px; color:var(--text-muted); margin:0; line-height:1.5; }
.sett-header .btn { flex-shrink:0; }
/* Section blocks */
.sett-block { margin-bottom:36px; }
.sett-block-title { font-size:14px; font-weight:600; color:var(--text); margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.sett-block-title svg { width:16px; height:16px; color:var(--text-muted); flex-shrink:0; }
.sett-block-desc { font-size:12px; color:var(--text-muted); margin:0 0 16px; }
.sett-block-line { height:1px; background:var(--border); margin:0 0 20px; }
.sett-block-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
.sett-block-fields.single-col { grid-template-columns:1fr; }
.sett-field { min-width:0; }
.sett-field.full { grid-column:1/-1; }
.sett-field label { display:block; font-size:13px; font-weight:500; color:var(--text); margin-bottom:5px; }
.sett-field .form-hint { font-size:11px; color:var(--text-muted); margin-top:4px; line-height:1.4; }
.sett-field .form-input, .sett-field .form-select { width:100%; }
/* Divider between major sections */
.sett-divider { height:1px; background:var(--border); margin:36px 0; }
/* Sub-navigation tabs (inside panels like Integrationen) */
.sett-sub-nav { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:28px; overflow-x:auto; }
.sett-sub-tab { padding:10px 18px; font-size:13px; color:var(--text-secondary); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; font-family:inherit; transition:color 0.15s; }
.sett-sub-tab:hover { color:var(--text); }
.sett-sub-tab.active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.sett-sub-panel { display:none; }
.sett-sub-panel.active { display:block; }
/* Footer */
.sett-footer { font-size:11px; color:var(--gray-400); text-align:center; padding:24px 0 4px; border-top:1px solid var(--gray-100); margin-top:40px; }
/* Legacy save bar — hidden */
.sett-save-bar { display:none; }
/* Tablet */
@media (max-width:1100px) {
.sett-nav { padding:0 16px; }
.sett-nav-item { padding:10px 12px; font-size:12px; }
.sett-nav-item svg { display:none; }
.sett-panel.active { padding:24px 24px 80px; }
.sett-header { padding:24px 24px 14px; margin:-24px -24px 24px; }
}
/* Mobile */
@media (max-width:768px) {
.sett-nav { padding:0 8px; }
.sett-nav-item { padding:10px 10px; font-size:12px; gap:4px; min-height:44px; }
.sett-nav-item svg { display:none; }
.sett-panel.active { padding:16px 16px 80px; }
.sett-header { padding:16px 16px 12px; margin:-16px -16px 20px; position:relative; }
.sett-header .btn { padding:8px 16px; font-size:13px; }
.sett-block-fields { grid-template-columns:1fr; }
.sett-sub-nav { margin-bottom:16px; }
.sett-sub-tab { padding:10px 12px; font-size:12px; min-height:44px; }
}
.api-key-display { background:var(--gray-900); color:#4ade80; font-family:monospace; font-size:13px; padding:14px 18px; border-radius:var(--radius-sm); word-break:break-all; margin:8px 0; position:relative; }
.api-key-display .copy-btn { position:absolute; right:8px; top:8px; background:rgba(255,255,255,0.15); color:#fff; border:none; border-radius:4px; padding:4px 10px; font-size:11px; cursor:pointer; }
.api-key-display .copy-btn:hover { background:rgba(255,255,255,0.25); }
.api-key-masked { font-family:monospace; font-size:13px; color:var(--text-secondary); background:var(--gray-100); padding:6px 12px; border-radius:8px; display:inline-block; }
/* === User Management (Table) === */
.usr-account-card {
background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
border:1px solid var(--border-glass); border-radius:var(--radius);
padding:20px 24px; margin-bottom:24px; box-shadow:var(--shadow-sm);
}
.usr-account-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.usr-avatar-lg {
width:48px; height:48px; border-radius:50%;
color:#fff; display:flex; align-items:center; justify-content:center;
font-size:14px; font-weight:600; flex-shrink:0;
}
.usr-account-name { font-weight:600; font-size:16px; color:var(--text); }
.usr-account-email { font-size:12px; color:var(--text-muted); margin-top:2px; }
.usr-account-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px) { .usr-account-fields { grid-template-columns:1fr; } }
.usr-field-label {
display:block; font-size:11px; font-weight:500; color:var(--text-muted);
text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px;
}
.usr-field-row { display:flex; gap:8px; }
.usr-totp-row {
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin-top:20px; padding-top:20px; border-top:1px solid var(--border-light);
}
.usr-badge-you {
font-size:10px; font-weight:600; padding:1px 6px; border-radius:99px;
background:var(--brand); color:#fff; margin-left:4px; vertical-align:middle;
}
/* ── User Table ── */
.usr-table-wrap {
background:var(--bg-card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
border:1px solid var(--border-glass); border-radius:var(--radius);
box-shadow:var(--shadow-sm); overflow:hidden;
}
.usr-table-toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:14px 20px; border-bottom:1px solid var(--border-light);
}
.usr-toolbar-title { font-weight:600; font-size:14px; }
.usr-toolbar-count {
display:inline-flex; align-items:center; justify-content:center;
width:20px; height:20px; background:var(--gray-100); border-radius:50%;
font-size:11px; font-weight:600; color:var(--text-muted); margin-left:6px;
}
.usr-table { width:100%; border-collapse:collapse; }
.usr-table thead th {
padding:8px 16px; text-align:left; font-size:11px; font-weight:600;
color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em;
background:var(--gray-50); border-bottom:1px solid var(--border-light);
white-space:nowrap;
}
.usr-table tbody tr {
border-bottom:1px solid var(--border-light);
transition:background 0.15s ease;
}
.usr-table tbody tr:last-child { border-bottom:none; }
.usr-table tbody tr:hover { background:rgba(7,161,226,0.04); }
.usr-table td {
padding:10px 16px; font-size:13px; vertical-align:middle;
}
/* User cell (avatar + name) */
.usr-cell { display:flex; align-items:center; gap:10px; }
.usr-avatar {
width:34px; height:34px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:700; flex-shrink:0; color:#fff;
}
.usr-name { font-weight:600; line-height:1.2; }
.usr-email { font-size:11px; color:var(--text-muted); margin-top:1px; }
/* Tag chips */
.usr-tag {
display:inline-flex; align-items:center;
padding:2px 8px; border-radius:99px;
font-size:11px; font-weight:500;
background:var(--gray-100); color:var(--text-secondary);
}
/* Role chips */
.usr-role {
padding:3px 10px; border-radius:99px;
font-size:11px; font-weight:500;
}
.usr-role-admin { background:rgba(7,161,226,0.1); color:var(--brand); }
.usr-role-user { background:var(--gray-100); color:var(--text-muted); }
.usr-role-gf { background:rgba(147,51,234,0.08); color:#7c3aed; }
/* Status dot */
.usr-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.usr-dot-active { background:var(--green); }
.usr-dot-inactive { background:var(--text-muted); }
/* Actions cell */
.usr-actions { display:flex; align-items:center; gap:2px; justify-content:flex-end; }
.usr-btn-icon {
width:30px; height:30px; padding:0; border:none; background:none;
display:inline-flex; align-items:center; justify-content:center;
border-radius:var(--radius-sm); color:var(--text-muted);
cursor:pointer; transition:background 0.15s, color 0.15s;
}
.usr-btn-icon:hover { background:var(--gray-100); color:var(--text); }
.usr-btn-icon.danger:hover { background:rgba(239,68,68,0.08); color:var(--red); }
/* ── User Modal ── */
.usr-modal-overlay {
display:none; position:fixed; inset:0;
background:rgba(0,0,0,0.35); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
z-index:9999; align-items:center; justify-content:center; padding:16px;
}
.usr-modal-overlay.open { display:flex; }
.usr-modal {
background:var(--bg-modal-solid, #fff); border:1px solid var(--border-glass);
border-radius:var(--radius); box-shadow:var(--shadow-lg);
width:100%; max-width:480px; padding:24px;
animation:usrModalIn 180ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes usrModalIn {
from { opacity:0; transform:translateY(12px); }
to { opacity:1; transform:translateY(0); }
}
.usr-modal-header {
display:flex; align-items:center; justify-content:space-between;
margin-bottom:20px;
}
.usr-modal-title { font-weight:600; font-size:16px; }
.usr-modal-fields { display:flex; flex-direction:column; gap:14px; }
.usr-modal-fields .form-input,
.usr-modal-fields .form-select {
width:100%; padding:8px 10px; border:1px solid var(--border);
border-radius:var(--radius-sm); background:var(--bg-input);
color:var(--text); font-size:13px; transition:border-color 0.15s, box-shadow 0.15s;
}
.usr-modal-fields .form-input:focus,
.usr-modal-fields .form-select:focus {
outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring);
}
.usr-modal-fields .form-input::placeholder { color:var(--text-muted); }
.usr-modal-footer {
display:flex; justify-content:flex-end; gap:10px;
margin-top:24px; padding-top:16px; border-top:1px solid var(--border-light);
}
.usr-modal-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* Confirm Dialog */
.usr-confirm-modal { max-width:380px; }
.usr-confirm-icon {
width:44px; height:44px; border-radius:50%;
background:rgba(239,68,68,0.08); color:var(--red);
display:flex; align-items:center; justify-content:center;
margin-bottom:14px;
}
.usr-confirm-title { font-weight:600; font-size:16px; margin-bottom:6px; }
.usr-confirm-body { font-size:13px; color:var(--text-secondary); }
@media (max-width:768px) {
.usr-table-wrap { overflow-x:auto; }
.usr-account-fields { grid-template-columns:1fr; }
.usr-modal-row2 { grid-template-columns:1fr; }
}
/* === Template Manager === */
.tpl-mgr-search { position:relative; margin-bottom:16px; }
.tpl-mgr-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-muted); pointer-events:none; }
.tpl-mgr-search .form-input { padding-left:36px; padding-right:32px; }
.tpl-mgr-search-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:24px; height:24px; border:none; background:var(--gray-200); color:var(--text-secondary); border-radius:50%; cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.tpl-mgr-search-clear:hover { background:var(--gray-300); color:var(--text); }
.tpl-mgr-stats { display:flex; gap:12px; align-items:center; font-size:12px; color:var(--text-muted); margin-bottom:20px; }
.tpl-mgr-stats-custom { color:var(--brand); font-weight:600; }
.tpl-mgr-group { margin-bottom:8px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.tpl-mgr-group-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; cursor:pointer; user-select:none; background:var(--gray-50); transition:background 0.15s; }
.tpl-mgr-group-header:hover { background:var(--gray-100); }
.tpl-mgr-group-left { display:flex; align-items:center; gap:10px; }
.tpl-mgr-group-chevron { width:14px; height:14px; color:var(--text-muted); transition:transform 0.2s; flex-shrink:0; }
.tpl-mgr-group-icon { width:28px; height:28px; border-radius:7px; background:var(--brand-bg, rgba(7,161,226,0.08)); color:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tpl-mgr-group-icon svg { width:15px; height:15px; }
.tpl-mgr-group-title { font-size:13px; font-weight:600; color:var(--text); }
.tpl-mgr-group-right { display:flex; align-items:center; gap:8px; }
.tpl-mgr-group-count { font-size:11px; font-weight:600; color:var(--text-muted); background:var(--gray-100); padding:2px 8px; border-radius:99px; min-width:20px; text-align:center; }
.tpl-mgr-group-body { padding:8px; background:var(--bg); }
/* === Template Accordion (inside groups) === */
.tpl-accordion { border:1px solid var(--border-light, var(--border)); border-radius:8px; overflow:hidden; margin-bottom:6px; }
.tpl-header { padding:14px 18px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; background:var(--gray-50); transition:background 0.15s; user-select:none; }
.tpl-header:hover { background:var(--gray-100); }
.tpl-header .tpl-title { font-size:14px; font-weight:600; color:var(--text); }
.tpl-header .tpl-desc { font-size:12px; color:var(--text-muted); margin-top:2px; }
.tpl-header .tpl-chevron { width:16px; height:16px; color:var(--text-muted); transition:transform 0.2s; flex-shrink:0; }
.tpl-accordion.open .tpl-chevron { transform:rotate(90deg); }
.tpl-body { display:none; padding:16px 18px; border-top:1px solid var(--border-light); background:var(--bg); }
.tpl-accordion.open .tpl-body { display:block; }
.tpl-placeholders { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.tpl-placeholder-btn { padding:3px 10px; border:1px solid var(--brand); border-radius:99px; background:var(--brand-bg); color:var(--brand); font-size:11px; font-weight:500; cursor:pointer; transition:background 0.15s; }
.tpl-placeholder-btn:hover { background:rgba(7,161,226,0.15); }
.tpl-editor { border:1px solid var(--border); border-radius:var(--radius-sm); min-height:150px; padding:12px 16px; font-family:inherit; font-size:13px; color:var(--text); background:var(--bg-input); outline:none; overflow-y:auto; max-height:300px; }
.tpl-editor:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.tpl-toolbar { display:flex; gap:2px; margin-bottom:6px; padding:4px; background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-sm); flex-wrap:wrap; }
.tpl-toolbar button { width:30px; height:28px; border:none; border-radius:4px; background:transparent; cursor:pointer; font-size:14px; font-weight:700; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.tpl-toolbar button:hover { background:var(--gray-200); color:var(--text); }
.tpl-toolbar .sep { width:1px; background:var(--border-light); margin:0 4px; }
.tpl-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:10px; }
.tpl-badge-custom { font-size:10px; font-weight:600; padding:2px 8px; border-radius:99px; background:var(--brand); color:white; margin-left:8px; }
/* === Facilioo list === */
.fac-list { max-height:300px; overflow-y:auto; border:1px solid var(--border-glass); border-radius:var(--radius); }
.fac-item {
padding:12px 14px; border-bottom:1px solid var(--border-light); cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:8px; transition:background 0.1s;
}
.fac-item:last-child { border-bottom:none; }
.fac-item:hover { background:var(--bg-card-hover); }
.fac-item.selected { background:var(--brand-bg); border-left:3px solid var(--brand); }
.fac-item .fi-title { font-size:14px; font-weight:500; flex:1; }
.fac-item .fi-status { font-size:11px; padding:3px 10px; border-radius:99px; font-weight:600; }
.fac-item .fi-status.open { background:var(--green-bg); color:var(--green); }
.fac-item .fi-status.closed { background:var(--gray-100); color:var(--gray-400); }
/* === Dashboard table === */
.data-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:auto; }
.data-table th {
text-align:left; padding:10px 10px; background:transparent;
border-bottom:1px solid var(--border); font-weight:600; font-size:11px;
color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em;
white-space:nowrap; position:sticky; top:0; position:relative; overflow:hidden;
}
.data-table th .col-resize {
position:absolute; right:0; top:0; bottom:0; width:5px; cursor:col-resize;
border-right:2px solid transparent; transition:border-color 0.15s;
}
.data-table th .col-resize:hover, .data-table th .col-resize.active { border-right-color:var(--brand); }
.data-table .filter-row th { padding:3px 4px; background:transparent; border-bottom:1px solid var(--border-light); }
.data-table .filter-row input {
width:100%; box-sizing:border-box; padding:4px 6px; font-size:11px;
border:1px solid var(--border); border-radius:6px; background:var(--bg-input);
color:var(--text); outline:none; transition:border-color 0.15s;
}
.data-table .filter-row input:focus { border-color:var(--brand); }
.data-table .filter-row input::placeholder { color:var(--text-muted); }
.data-table td { padding:8px 10px; border-bottom:1px solid var(--border-light); white-space:nowrap; transition:background 0.15s; }
.data-table .col-hide { display:none; }
.data-table.show-details .col-hide { display:table-cell; }
.data-table tr:hover td { background:var(--bg-card-hover); }
.data-table .cell-check { text-align:center; color:var(--green); }
.data-table .cell-date { white-space:nowrap; color:var(--text-secondary); }
.data-table .cell-nr { font-weight:600; color:var(--brand); }
.clr-tab { padding:10px 20px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
.clr-tab:hover { color:var(--text); }
.clr-tab.active { color:var(--brand); border-bottom-color:var(--brand); }
.clr-obj-row { border-bottom:1px solid var(--border-light); }
.clr-obj-header { display:flex; align-items:center; padding:10px 16px; cursor:pointer; gap:12px; transition:background .1s; }
.clr-obj-header:hover { background:var(--bg-body); }
.clr-obj-arrow { transition:transform .2s; font-size:10px; color:var(--gray-400); }
.clr-obj-arrow.open { transform:rotate(90deg); }
.clr-obj-detail { display:none; padding:0 16px 12px 44px; }
.hndl-link { color:var(--brand); text-decoration:none; cursor:pointer; white-space:nowrap; }
.hndl-link:hover { opacity:0.8; }
.wp-badge { display:inline-block; padding:1px 4px; font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap; border-radius:3px; }
.wp-badge:hover { opacity:0.7; background:var(--bg-hover); }
.hndl-item { padding:11px 14px; border-bottom:1px solid var(--border-light); cursor:pointer; transition:all 0.15s; }
.hndl-item:hover { background:var(--bg-card-hover); }
.hndl-item.active { background:var(--brand-bg); border-left:3px solid var(--brand); }
html.dark .hndl-item.active { background:rgba(7,161,226,0.12); }
.hndl-item .hndl-whg { font-weight:600; font-size:13px; color:var(--text); }
.hndl-item .hndl-name { font-size:12px; color:var(--text-secondary); margin-top:1px; }
.hndl-item .hndl-pkto { font-size:11px; color:var(--text-muted); }
.bj-select { padding:7px 30px 7px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--border); background:var(--bg-input); color:var(--text); appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; transition:border-color 0.2s, box-shadow 0.2s; }
.bj-select:hover { border-color:var(--brand); }
.bj-select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
/* === Empty state === */
.empty-state { text-align:center; padding:56px 28px; color:var(--text-muted); }
.empty-state svg { width:48px; height:48px; margin-bottom:14px; opacity:0.25; }
.empty-state h4 { font-size:16px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.empty-state p { font-size:13px; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.fade-in { animation:fadeIn 0.25s ease-out; }
@keyframes slideInRight { from { opacity:0; transform:translateX(100px); } to { opacity:1; transform:none; } }
/* ── Hamburger Menu Button (hidden on desktop) ── */
.hamburger-btn {
display:none; background:none; border:none; cursor:pointer; padding:8px;
color:var(--text); z-index:201; -webkit-tap-highlight-color:transparent;
}
.hamburger-btn svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:99; -webkit-tap-highlight-color:transparent; }
.sidebar-backdrop.open { display:block; }
/* ══════════════════════════════════════════════════════════════════
Beschlusssammlung — Search + Full-Width Timeline
══════════════════════════════════════════════════════════════════ */
#pageBeschluesse { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',var(--font); }
.bs-page { display:flex; flex-direction:column; height:calc(100vh - var(--header-h) - 48px); }
/* ── Shared ── */
.bs-search-box { position:relative; display:flex; align-items:center; }
.bs-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-muted); opacity:.55; }
.bs-search-input {
width:100%; height:36px; padding:0 12px 0 34px; font-size:14px;
border:none; border-radius:10px; background:rgba(120,120,128,0.08);
color:var(--text); outline:none; font-family:inherit; transition:all .2s ease; box-sizing:border-box;
}
html.dark .bs-search-input { background:rgba(120,120,128,0.2); }
.bs-search-input:focus { background:rgba(120,120,128,0.12); box-shadow:0 0 0 3px rgba(0,122,255,0.18); }
.bs-badge { display:inline-block; font-size:10px; font-weight:600; padding:3px 10px; border-radius:99px; white-space:nowrap; letter-spacing:.2px; }
.bs-stat-pill { font-size:12px; font-weight:500; color:var(--text-secondary); background:rgba(120,120,128,0.06); padding:5px 14px; border-radius:99px; }
html.dark .bs-stat-pill { background:rgba(120,120,128,0.15); }
.bs-empty-state { padding:64px 24px; text-align:center; color:var(--text-muted); }
.bs-empty-spinner { width:28px; height:28px; border:3px solid rgba(120,120,128,0.15); border-top-color:#007AFF; border-radius:50%; margin:0 auto; animation:bsSpin .8s linear infinite; }
@keyframes bsSpin { to { transform:rotate(360deg); } }
.bs-highlight { background:rgba(255,204,0,0.25); color:inherit; padding:1px 2px; border-radius:3px; }
/* ── Header: Suche oder Objekt-Anzeige ── */
.bs-header { flex-shrink:0; position:relative; z-index:10; margin-bottom:12px; }
/* State 1: Zentrierte Objekt-Suche */
.bs-header-search {
display:flex; justify-content:center; padding:24px 0 8px;
}
.bs-search-box--lg { min-width:320px; max-width:480px; width:100%; }
.bs-search-box--lg .bs-search-input { height:40px; font-size:15px; padding-left:36px; border-radius:12px; }
/* State 2: Objekt gewählt */
.bs-header-active { animation: bsHeaderIn .35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bsHeaderIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.bs-header-obj {
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-bottom:10px;
}
.bs-header-obj-info { display:flex; align-items:baseline; gap:10px; min-width:0; flex-wrap:wrap; }
.bs-header-obj-label { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; }
.bs-header-obj-name {
font-size:22px; font-weight:700; letter-spacing:-.3px; color:var(--text);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:500px;
}
.bs-header-obj-close {
background:rgba(120,120,128,0.08); border:none; cursor:pointer; color:var(--text-muted);
padding:6px; border-radius:8px; display:flex; transition:all .15s;
}
.bs-header-obj-close:hover { background:rgba(255,59,48,0.1); color:#FF3B30; }
html.dark .bs-header-obj-close { background:rgba(120,120,128,0.2); }
.bs-header-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Search clear button */
.bs-search-clear {
position:absolute; right:6px; top:50%; transform:translateY(-50%);
background:rgba(120,120,128,0.15); border:none; cursor:pointer; color:var(--text-muted);
width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
transition:all .12s;
}
.bs-search-clear:hover { background:rgba(255,59,48,0.15); color:#FF3B30; }
.bs-filter-search { position:relative; }
/* Autocomplete */
.bs-ac-wrap { position:relative; }
.bs-ac-wrap .bs-search-input { width:220px; height:32px; font-size:13px; border-radius:8px; }
.bs-ac-drop {
display:none; position:absolute; top:100%; right:0; width:380px; margin-top:4px;
background:var(--bg-card); border-radius:12px;
box-shadow:0 4px 24px rgba(0,0,0,0.12), 0 0 0 .5px rgba(0,0,0,0.06);
max-height:360px; overflow-y:auto; z-index:20; padding:6px;
}
html.dark .bs-ac-drop { background:rgba(30,30,35,0.95); box-shadow:0 4px 24px rgba(0,0,0,0.4), 0 0 0 .5px rgba(255,255,255,0.1); }
.bs-ac-drop.open { display:block; }
.bs-ac-item {
padding:10px 12px; border-radius:8px; cursor:pointer; display:flex; align-items:center;
justify-content:space-between; transition:background .12s ease;
}
.bs-ac-item:hover { background:rgba(0,122,255,0.06); }
html.dark .bs-ac-item:hover { background:rgba(10,132,255,0.1); }
.bs-ac-name { font-size:14px; font-weight:600; color:var(--text); }
.bs-ac-sub { font-size:11px; color:#8E8E93; margin-top:1px; }
.bs-ac-count { font-size:10px; font-weight:600; color:var(--text-muted); background:rgba(120,120,128,0.08); padding:2px 8px; border-radius:99px; flex-shrink:0; }
html.dark .bs-ac-count { background:rgba(120,120,128,0.2); }
/* Stat pills inline in topbar */
.bs-topbar-stats { display:none; align-items:center; gap:6px; }
.bs-topbar-stats.active { display:flex; }
.bs-topbar-stats .bs-stat-pill { font-size:11px; padding:3px 10px; }
/* Filter controls */
.bs-select {
height:32px; padding:0 28px 0 10px; font-size:12px; font-weight:500;
border:none; border-radius:8px; background:rgba(120,120,128,0.08); color:var(--text);
cursor:pointer; outline:none; font-family:inherit;
appearance:none; -webkit-appearance:none;
background-image:url('data:image/svg+xml,');
background-repeat:no-repeat; background-position:right 8px center; transition:all .2s ease;
}
html.dark .bs-select { background-color:rgba(120,120,128,0.2); }
.bs-filter-search { flex:0 0 auto; }
.bs-filter-search .bs-search-input { width:160px; height:32px; font-size:12px; padding-left:30px; }
.bs-toolbar-btn {
height:32px; padding:0 14px; font-size:12px; font-weight:500;
border:none; border-radius:8px; background:rgba(120,120,128,0.08);
color:var(--text-secondary); cursor:pointer; font-family:inherit; transition:all .2s ease;
}
html.dark .bs-toolbar-btn { background:rgba(120,120,128,0.2); }
.bs-toolbar-btn:hover { background:rgba(0,122,255,0.1); color:#007AFF; }
.bs-controls-hidden { display:none !important; }
/* ── Timeline scroll ── */
.bs-timeline-scroll { flex:1; overflow-y:auto; padding-right:4px; }
.bs-timeline-scroll::-webkit-scrollbar { width:5px; }
.bs-timeline-scroll::-webkit-scrollbar-track { background:transparent; }
.bs-timeline-scroll::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.1); border-radius:99px; }
html.dark .bs-timeline-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); }
/* ── Timeline wrapper with spine ── */
.bs-tl { position:relative; padding:4px 0 32px 56px; }
.bs-tl::before {
content:''; position:absolute; left:23px; top:0; bottom:0; width:2px;
background:rgba(0,0,0,0.06); border-radius:1px;
}
html.dark .bs-tl::before { background:rgba(255,255,255,0.08); }
/* Animate spine on load */
.bs-tl--anim::before { animation:bsSpineIn .6s ease-out both; transform-origin:top; }
@keyframes bsSpineIn { from { transform:scaleY(0); } to { transform:scaleY(1); } }
/* ── Sticky year divider ── */
.bs-year-div {
position:sticky; top:0; z-index:5; margin-left:-56px; padding:16px 0 8px;
background:var(--bg-body); display:flex; align-items:center; gap:0;
}
html.dark .bs-year-div { background:var(--bg-body); }
.bs-year-div::before, .bs-year-div::after {
content:''; flex:1; height:1px; background:var(--border-light);
}
.bs-year-div span {
padding:0 16px; font-size:12px; font-weight:700; color:var(--text-muted);
letter-spacing:.8px; text-transform:uppercase; white-space:nowrap;
}
/* ── Timeline node ── */
.bs-node { position:relative; margin-bottom:10px; }
/* Spine dot */
.bs-node-dot {
position:absolute; left:-41px; top:18px; width:14px; height:14px;
border-radius:50%; background:#007AFF; border:2.5px solid var(--bg-body);
z-index:2; box-shadow:0 0 0 2px rgba(0,122,255,0.15);
}
html.dark .bs-node-dot { background:#0A84FF; border-color:var(--bg-body); box-shadow:0 0 0 2px rgba(10,132,255,0.2); }
/* Status tint on the dot */
.bs-node-dot--green { background:#34C759; box-shadow:0 0 0 2px rgba(52,199,89,0.15); }
.bs-node-dot--orange { background:#FF9500; box-shadow:0 0 0 2px rgba(255,149,0,0.15); }
.bs-node-dot--red { background:#FF3B30; box-shadow:0 0 0 2px rgba(255,59,48,0.15); }
/* Scroll-reveal animation */
.bs-node { opacity:0; transform:translateY(16px); transition:opacity .4s ease, transform .4s ease; }
.bs-node.bs-visible { opacity:1; transform:translateY(0); }
/* ── Meeting card ── */
.bs-mc {
border-radius:12px; overflow:hidden;
background:var(--bg-card);
box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 0 0 .5px rgba(0,0,0,0.04);
transition:box-shadow .2s ease, transform .2s ease;
}
.bs-mc:hover { box-shadow:0 3px 12px rgba(0,0,0,0.08), 0 0 0 .5px rgba(0,0,0,0.04); }
html.dark .bs-mc { background:var(--bg-card); box-shadow:0 1px 3px rgba(0,0,0,0.2), 0 0 0 .5px rgba(255,255,255,0.06); }
html.dark .bs-mc:hover { box-shadow:0 3px 12px rgba(0,0,0,0.3), 0 0 0 .5px rgba(255,255,255,0.08); }
/* Card header */
.bs-mc-header {
padding:14px 16px; display:flex; align-items:center; gap:12px;
cursor:pointer; user-select:none; transition:background .15s ease;
}
.bs-mc-header:hover { background:rgba(0,122,255,0.02); }
.bs-mc-chev { flex-shrink:0; color:var(--text-muted); opacity:.4; transition:transform .3s cubic-bezier(.4,0,.2,1); }
.bs-mc-info { flex:1; min-width:0; }
.bs-mc-date { font-weight:700; font-size:17px; letter-spacing:-.3px; }
.bs-mc-ort { font-size:13px; color:#8E8E93; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bs-mc-meta { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.bs-mc-count {
font-size:10px; font-weight:700; color:#fff; background:#007AFF;
min-width:22px; height:22px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
}
html.dark .bs-mc-count { background:#0A84FF; }
/* Expanded body */
.bs-mc-body { overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.bs-mc-divider { height:1px; background:var(--border-light); margin:0 16px; }
.bs-mc-items { padding:8px 12px 12px 12px; }
/* ── Resolution rows ── */
.bs-res { border-radius:8px; margin-bottom:1px; }
.bs-res-row { padding:8px 10px; display:flex; align-items:flex-start; gap:10px; border-radius:8px; transition:background .15s ease; }
.bs-res-row--click { cursor:pointer; }
.bs-res-row--click:hover { background:rgba(0,122,255,0.04); }
.bs-edit-btn { flex-shrink:0; background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px; border-radius:6px; opacity:0; transition:opacity .15s, background .15s; margin-top:1px; }
.bs-res-row:hover .bs-edit-btn { opacity:1; }
.bs-edit-btn:hover { background:rgba(0,122,255,0.1); color:var(--brand); }
.bs-res-chev { flex-shrink:0; margin-top:4px; color:#8E8E93; transition:transform .25s cubic-bezier(.4,0,.2,1); }
.bs-res-top { flex-shrink:0; font-size:10px; font-weight:700; color:var(--text-muted); background:rgba(120,120,128,0.08); padding:2px 8px; border-radius:6px; margin-top:2px; }
html.dark .bs-res-top { background:rgba(120,120,128,0.2); }
.bs-res-title { flex:1; min-width:0; font-size:13px; line-height:1.5; color:var(--text); }
.bs-res-expand { overflow:hidden; transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.bs-res-text-wrap { padding:2px 10px 10px 30px; }
.bs-res-text { background:rgba(120,120,128,0.04); border-radius:10px; padding:12px 16px; font-size:12.5px; line-height:1.65; color:var(--text-secondary); }
html.dark .bs-res-text { background:rgba(120,120,128,0.1); }
/* Vote bar */
.bs-vote-bar { display:flex; height:4px; border-radius:2px; overflow:hidden; margin-top:8px; gap:1px; }
.bs-vote-bar-seg { min-width:2px; }
.bs-votes { margin-top:8px; padding-top:8px; border-top:1px solid var(--border-light); display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--text-muted); }
/* "Show more" link */
.bs-more-btn {
display:block; padding:6px 10px; font-size:12px; font-weight:500; color:#007AFF;
background:none; border:none; cursor:pointer; font-family:inherit; text-align:left;
border-radius:6px; transition:background .12s ease; margin-top:2px;
}
.bs-more-btn:hover { background:rgba(0,122,255,0.06); }
.bs-spell-btn { display:inline-flex; align-items:center; gap:4px; background:none; border:1px solid var(--border); cursor:pointer; color:var(--text-muted); font-size:11px; font-weight:500; padding:3px 8px; border-radius:6px; transition:all .15s; font-family:inherit; }
.bs-spell-btn:hover { background:rgba(0,122,255,0.08); color:var(--brand); border-color:var(--brand); }
.bs-spell-btn.loading { opacity:0.6; pointer-events:none; }
/* ── Apple Magic Spellcheck Animation ── */
@property --spell-angle { syntax: ''; initial-value: 0deg; inherits: false; }
@property --spell-progress { syntax: ''; initial-value: 0; inherits: false; }
.bs-spell-scan {
position:relative; overflow:hidden;
}
.bs-spell-scan::before {
content:''; position:absolute; inset:-2px; border-radius:inherit; z-index:10; pointer-events:none;
background: conic-gradient(from var(--spell-angle),
transparent 0%,
rgba(0,122,255,0.08) 10%,
rgba(88,86,214,0.15) 20%,
rgba(0,122,255,0.08) 30%,
transparent 40%
);
animation: spellScanRotate 2s linear infinite;
opacity:0; transition: opacity 0.4s ease;
}
.bs-spell-scan.active::before { opacity:1; }
.bs-spell-scan::after {
content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:11; pointer-events:none;
background: linear-gradient(90deg,
transparent 0%,
rgba(0,122,255,0) 10%,
rgba(88,86,214,0.6) 30%,
rgba(175,82,222,0.8) 50%,
rgba(88,86,214,0.6) 70%,
rgba(0,122,255,0) 90%,
transparent 100%
);
transform: translateY(calc(var(--spell-progress) * 100%));
filter: blur(1px);
box-shadow: 0 0 12px rgba(88,86,214,0.4), 0 0 30px rgba(175,82,222,0.2);
opacity:0; transition: opacity 0.3s ease;
}
.bs-spell-scan.active::after { opacity:1; animation: spellScanLine 2.5s ease-in-out infinite; }
@keyframes spellScanRotate {
from { --spell-angle: 0deg; }
to { --spell-angle: 360deg; }
}
@keyframes spellScanLine {
0% { top: -2px; }
50% { top: calc(100% - 2px); }
100% { top: -2px; }
}
/* Shimmer-Glow auf dem Prüfen-Button während loading */
.bs-spell-btn.loading {
background: linear-gradient(135deg, rgba(88,86,214,0.08), rgba(175,82,222,0.12), rgba(0,122,255,0.08));
background-size: 300% 300%;
animation: spellBtnShimmer 1.5s ease infinite;
border-color: rgba(88,86,214,0.3);
color: #5856D6;
}
@keyframes spellBtnShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Ergebnis-Einblendung: Fehler-Markierungen faden ein */
.bs-spell-error { animation: spellErrorIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes spellErrorIn {
from { background: rgba(88,86,214,0.3); transform: scale(1.1); }
to { background: rgba(255,59,48,0.12); transform: scale(1); }
}
.bs-spell-accepted { animation: spellAcceptIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes spellAcceptIn {
from { background: rgba(255,255,255,0.4); transform: scale(1.08); }
to { background: rgba(52,199,89,0.12); transform: scale(1); }
}
/* Toolbar Einblendung */
.bs-spell-toolbar { animation: spellToolbarIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes spellToolbarIn {
from { opacity:0; transform: translateY(-8px) scale(0.97); }
to { opacity:1; transform: translateY(0) scale(1); }
}
.bs-spell-error { background:rgba(255,59,48,0.12); text-decoration:underline wavy #FF3B30; text-decoration-skip-ink:none; cursor:pointer; padding:0 1px; border-radius:2px; position:relative; }
html.dark .bs-spell-error { background:rgba(255,59,48,0.2); }
.bs-spell-accepted { background:rgba(52,199,89,0.12); text-decoration:underline wavy #34C759; text-decoration-skip-ink:none; cursor:pointer; padding:0 1px; border-radius:2px; }
html.dark .bs-spell-accepted { background:rgba(52,199,89,0.2); }
.bs-spell-popup { position:fixed; z-index:9999; background:var(--bg-modal); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--border-glass); border-radius:10px; box-shadow:var(--shadow-lg); padding:6px 10px; display:flex; gap:6px; align-items:center; white-space:nowrap; font-size:12px; animation:spellPopupIn .2s cubic-bezier(.34,1.56,.64,1) both; }
.bs-spell-popup::after { content:''; position:absolute; left:50%; transform:translateX(-50%); border:5px solid transparent; }
.bs-spell-popup.above::after { top:100%; border-top-color:var(--border-glass); }
.bs-spell-popup.below::after { bottom:100%; border-bottom-color:var(--border-glass); }
@keyframes spellPopupIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
.bs-spell-popup-btn { background:none; border:1px solid var(--border); cursor:pointer; border-radius:5px; padding:2px 8px; font-size:11px; font-family:inherit; transition:all .12s; flex-shrink:0; }
.bs-spell-popup-btn:hover { background:var(--bg-card-hover); }
.bs-spell-popup-btn.accept { color:#34C759; border-color:#34C759; }
.bs-spell-popup-btn.accept:hover { background:rgba(52,199,89,0.1); }
.bs-spell-popup-btn.dismiss { color:#FF3B30; border-color:#FF3B30; }
.bs-spell-popup-btn.dismiss:hover { background:rgba(255,59,48,0.1); }
.bs-spell-popup input[type="text"] { border:1px solid var(--border); border-radius:5px; padding:2px 6px; font-size:12px; font-family:inherit; min-width:120px; background:var(--bg-card); color:var(--text); outline:none; }
.bs-spell-popup input[type="text"]:focus { border-color:var(--brand); }
.bs-spell-toolbar { display:flex; align-items:center; gap:8px; padding:6px 10px; margin:4px 0 8px 30px; background:rgba(0,122,255,0.04); border-radius:8px; font-size:12px; color:var(--text-secondary); }
.bs-spell-toolbar button { font-size:11px; padding:3px 10px; border-radius:6px; border:1px solid var(--border); background:var(--bg-card); color:var(--text); cursor:pointer; font-family:inherit; transition:all .12s; }
.bs-spell-toolbar button:hover { background:var(--bg-card-hover); }
.bs-spell-toolbar button.primary { background:var(--brand); color:#fff; border:none; }
.bs-spell-toolbar button.primary:hover { opacity:0.9; }
/* ── Tablet (768px - 1024px) ── */
@media (max-width:1024px) {
:root { --sidebar-w:220px; }
.main-content { padding:20px; }
.stats-grid { grid-template-columns:repeat(2, 1fr); gap:14px; }
.dash-row-3 { grid-template-columns:repeat(3, 1fr); }
.dash-row-2 { grid-template-columns:repeat(2, 1fr); }
.dash-card { padding:18px 16px; border-radius:16px; }
.dash-stat-value { font-size:18px; }
.dash-stat-label { font-size:10px; }
.stat-card .value { font-size:28px; }
.modal { width:90vw; max-width:480px; }
}
/* ── Mobile filter toggle (hidden on desktop) ── */
.mobile-filter-toggle { display:none; }
/* Clickable archive filter cells */
.archiv-filterable {
cursor:pointer; border-radius:3px; padding:0 3px; transition:background 0.15s,color 0.15s;
}
.archiv-filterable:hover {
background:var(--brand); color:#fff; text-decoration:none;
}
/* Compact archive card cell: hidden on desktop, shown on mobile/tablet */
.archiv-mobile-card { display:none; }
/* ── Mobile (< 768px) ── */
@media (max-width:767px) {
:root { --sidebar-w:280px; --header-h:52px; }
.hamburger-btn { display:flex; align-items:center; }
.sidebar-toggle { display:none !important; }
.sidebar {
transform:translateX(-100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
z-index:200; box-shadow:none; width:var(--sidebar-w);
}
.sidebar.mobile-open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,0.2); }
.main { margin-left:0; }
.main-header { padding:0 12px; }
.main-header h2 { font-size:15px; }
.main-content { padding:14px; }
.dash-greeting-text { font-size:22px; }
.stats-grid { grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:18px; }
.stat-card { padding:16px; border-radius:16px; }
.stat-card .stat-icon { width:34px; height:34px; border-radius:10px; margin-bottom:10px; }
.stat-card .stat-icon svg { width:17px; height:17px; }
.stat-card .value { font-size:26px; }
.stat-card .label { font-size:10px; }
.stat-card .sub { font-size:11px; }
.dash-grid-2, .dash-grid-3, .dash-grid-4 { grid-template-columns:1fr; }
.dash-row-3 { grid-template-columns:1fr; }
.dash-row-2 { grid-template-columns:repeat(2, 1fr); }
.dash-section-title { margin-top:24px; font-size:13px; }
.dash-card { border-radius:16px; padding:16px 14px; }
.dash-stat-value { font-size:18px; }
.dash-stat-label { font-size:10px; }
.dash-stat-row { gap:4px; }
.card { border-radius:12px; }
.card-header { padding:14px 16px; font-size:14px; }
.card-body { padding:14px 16px; overflow-x:hidden; }
.modal { width:95vw !important; max-width:none; margin:10px; max-height:90vh; border-radius:14px; }
.overlay { padding:10px; align-items:flex-end; }
.btn { padding:8px 14px; font-size:12px; min-height:40px; -webkit-tap-highlight-color:transparent; }
.nav-item { padding:12px 16px; font-size:13px; min-height:44px; display:flex; align-items:center; }
.profile-bar { padding:10px 14px; }
.brand { padding:14px 16px; }
.brand-text { font-size:16px; }
.toggle-switch { width:44px; height:26px; }
select, input[type="text"], input[type="password"], input[type="email"], textarea { font-size:16px !important; }
/* ── Mobile Filter Toggle ── */
.mobile-filter-toggle { display:block; margin-bottom:8px; }
/* ── Dashboard Tables → Card Layout ── */
.data-table { border:0 !important; width:100% !important; table-layout:fixed !important; }
.data-table thead { display:none !important; }
.data-table tbody { display:block !important; }
.data-table tbody tr {
display:block !important; background:var(--bg-card); border:1px solid var(--border);
border-radius:14px; margin-bottom:10px; padding:14px 16px;
box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.data-table tbody tr:hover td { background:transparent !important; }
.data-table td {
display:flex !important; justify-content:space-between; align-items:flex-start;
padding:6px 0 !important; border-bottom:1px solid var(--border-light) !important;
white-space:normal !important; word-break:break-word;
font-size:13px; min-height:28px; width:100% !important;
}
.data-table td:last-child { border-bottom:none !important; }
.data-table td::before {
content:attr(data-label); font-weight:600; font-size:10px;
color:var(--text-muted); margin-right:12px; flex-shrink:0; min-width:90px;
text-transform:uppercase; letter-spacing:0.04em; line-height:1.8;
}
.data-table td > * { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
/* Hide col-hide cells */
.data-table td .col-hide, .data-table .col-hide { display:none !important; }
/* Zellen mit — oder leere dezenter */
.data-table td[data-label]:has(> span:only-child) { min-height:24px; }
/* First cell (Nr.) as card header */
.data-table td.cell-nr {
font-size:16px !important; font-weight:700 !important;
border-bottom:2px solid var(--border) !important;
padding-bottom:10px !important; margin-bottom:4px;
color:var(--brand) !important;
}
.data-table td.cell-nr::before { display:none; }
/* Filter row */
.data-table .filter-row { display:none !important; }
.data-table.show-filters .filter-row { display:block !important; }
.data-table.show-filters .filter-row th {
display:block; padding:4px 0;
}
.data-table.show-filters .filter-row input {
width:100%; padding:10px 14px; font-size:15px !important;
border-radius:10px; box-sizing:border-box;
}
/* Column resize handles: hide */
.data-table th .col-resize { display:none !important; }
/* Action buttons: full touch targets */
.data-table td a, .data-table td button {
min-height:36px; display:inline-flex; align-items:center;
-webkit-tap-highlight-color:transparent;
}
/* WP badges: bigger touch targets */
.data-table .wp-badge { padding:4px 8px !important; font-size:13px !important; margin:2px; }
/* ── Master-Detail Mobile (Beiräte, Beschlüsse, Rechnungseingang) ── */
.md-back-btn {
display:none; align-items:center; gap:6px; padding:10px 14px; margin-bottom:8px;
font-size:13px; font-weight:600; color:var(--blue); background:none; border:none; cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.md-back-btn.show { display:flex; }
.md-back-btn svg { width:18px; height:18px; }
.md-mobile-hidden { display:none !important; }
/* Beiräte */
#pageBeiraete > div { flex-direction:column !important; gap:0 !important; }
#pageBeiraete > div > .dash-card { flex:none !important; min-width:0 !important; width:100%; border-radius:14px; }
#beiraeteRightPanel { flex:none !important; width:100%; }
#beiraeteRightPanel .dash-card { border-radius:14px; }
#beiraeteRightPanel.md-mobile-active { display:block !important; }
/* Beschlüsse */
/* Beschlusssammlung — iPhone-optimiert: kein Spine, Card-basiert */
.bs-page { height:auto; min-height:calc(100vh - var(--header-h) - 48px); }
.bs-header-search { padding:12px 0 4px; }
.bs-search-box--lg { min-width:0; max-width:100%; }
/* Header: Objekt-Name + Close kompakt */
.bs-header-obj { flex-wrap:wrap; gap:8px; }
.bs-header-obj-info { gap:4px; flex:1; min-width:0; }
.bs-header-obj-label { font-size:10px; }
.bs-header-obj-name { font-size:17px; max-width:100%; white-space:normal; line-height:1.25; }
/* Stats unter dem Namen */
.bs-topbar-stats { flex-wrap:wrap; gap:4px; width:100%; }
.bs-topbar-stats .bs-stat-pill { font-size:10px; padding:2px 8px; }
/* Controls: volle Breite, wrappen */
.bs-header-controls { flex-wrap:wrap; gap:6px; }
.bs-header-controls > * { flex-shrink:1; min-width:0; }
.bs-select { flex:0 1 auto; min-width:0; max-width:45%; }
.bs-filter-search { flex:1 1 50%; min-width:100px; }
.bs-filter-search .bs-search-input { width:100%; font-size:13px; }
.bs-toolbar-btn { font-size:11px; padding:6px 12px; flex:0 0 auto; white-space:nowrap; }
/* Autocomplete: volle Breite, nicht nach rechts versetzt */
.bs-ac-wrap { width:100%; }
.bs-ac-wrap .bs-search-input { width:100%; }
.bs-ac-drop { width:100% !important; right:auto; left:0; max-height:50vh; }
.bs-ac-name { font-size:13px; }
.bs-ac-sub { font-size:10px; }
/* Timeline: Spine komplett entfernen auf iPhone */
.bs-tl { padding-left:0; }
.bs-tl::before { display:none; }
.bs-node-dot { display:none; }
.bs-node { margin-bottom:8px; }
/* Year-Divider: ohne Spine-Offset */
.bs-year-div { margin-left:0; padding:12px 0 6px; }
.bs-year-div span { font-size:11px; padding:0 12px; }
/* Meeting Cards: volle Breite, abgerundeter */
.bs-mc { border-radius:14px; }
.bs-mc-header { padding:12px 14px; gap:10px; }
.bs-mc-date { font-size:15px; }
.bs-mc-ort { font-size:12px; }
.bs-mc-meta { gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.bs-mc-meta .bs-badge { font-size:9px; padding:2px 7px; }
.bs-mc-count { width:20px; height:20px; font-size:9px; min-width:20px; }
/* Resolution Rows: Touch-optimiert */
.bs-res-row { padding:10px 8px; gap:6px; flex-wrap:wrap; }
.bs-res-top { font-size:9px; padding:2px 6px; }
.bs-res-title { font-size:13px; line-height:1.45; flex-basis:calc(100% - 80px); }
.bs-res-chev { margin-top:2px; }
/* Edit-Button auf Mobile immer sichtbar (kein hover) */
.bs-edit-btn { opacity:0.5; }
/* Expanded Beschlusstext: mehr Platz */
.bs-res-text-wrap { padding:4px 4px 10px 4px; }
.bs-res-text { padding:10px 12px; font-size:12px; line-height:1.6; }
.bs-votes { gap:6px; font-size:10px; flex-wrap:wrap; }
/* Spellcheck: auf Mobile komplett ausblenden (Desktop-only Feature) */
.bs-spell-btn { display:none !important; }
.bs-spell-toolbar { display:none !important; }
.bs-spell-popup { display:none !important; }
/* Items padding */
.bs-mc-items { padding:6px 6px 10px 6px; }
/* Rechnungseingang */
#pageRechnungseingang > div { flex-direction:column !important; gap:0 !important; height:auto !important; }
#pageRechnungseingang > div > .card:first-child { flex:none !important; min-width:0 !important; width:100%; height:auto !important; max-height:calc(100vh - var(--header-h) - 60px); }
#reDetailPanel { flex:none !important; width:100%; height:auto !important; }
#reDetailPanel.md-mobile-active { display:block !important; }
#reDetailPanel > div { flex-direction:column !important; height:auto !important; }
#reDetailPanel > div > .card { flex:none !important; min-width:0 !important; width:100%; height:auto !important; min-height:300px; }
#reAdditionalFields [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns:1fr !important; }
#reAdditionalFields [style*="grid-column:span 3"] { grid-column:span 1 !important; }
/* ── Archive Page Mobile ── */
#pageArchiv > div { height:auto !important; min-height:calc(100vh - var(--header-h) - 48px); padding-bottom:env(safe-area-inset-bottom); }
#pageArchiv > div > .card:first-child .card-body { flex-wrap:wrap; gap:8px; padding:8px 12px; }
#archivObjCombo { width:100% !important; }
#archivObjCombo input { width:100% !important; }
#archivMultiToggle { display:none; }
#pageArchiv > div > div:last-child { flex-direction:column; }
#archivPreviewPanel { display:none !important; }
/* Archive filter bar: stack vertically */
#pageArchiv .card-body > div { width:100%; min-width:0 !important; }
#archivExportSelBtn, #archivExportAllBtn { font-size:11px; padding:6px 10px; }
/* Archive table → compact card layout on mobile */
#archivTable { border:0; }
#archivTable thead { display:none; }
#archivTable tbody { display:flex; flex-direction:column; gap:6px; }
#archivTable tbody tr {
display:flex !important; align-items:center; gap:0;
background:var(--bg-card); border:1px solid var(--border);
border-radius:10px; padding:0; min-height:56px; max-height:70px;
box-shadow:0 1px 3px rgba(0,0,0,0.05); cursor:pointer; overflow:hidden;
}
#archivTable tbody tr:hover { background:transparent !important; }
/* Hide all regular cells on mobile */
#archivTable td { display:none !important; }
/* Show only the compact mobile cell */
#archivTable td.archiv-mobile-card {
display:flex !important; flex:1; min-width:0; align-items:center;
padding:8px 12px !important; gap:10px; max-width:none !important;
}
#archivTable td.archiv-mobile-card .archiv-card-text {
flex:1; min-width:0; line-height:1.3;
}
#archivTable td.archiv-mobile-card .archiv-card-title {
font-size:13px; font-weight:600; color:var(--text);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#archivTable td.archiv-mobile-card .archiv-card-meta {
font-size:11px; color:var(--text-secondary);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
margin-top:1px;
}
#archivTable td.archiv-mobile-card .archiv-card-file {
flex-shrink:0; width:40px; height:40px; display:flex; align-items:center;
justify-content:center; border-radius:8px; background:var(--bg-hover);
font-size:18px; text-decoration:none;
}
#archivTable td.archiv-mobile-card .archiv-card-file:active {
background:var(--border); transform:scale(0.95);
}
/* Archive mobile filter toggle */
.archiv-mobile-filter-toggle { display:none; }
.archiv-mobile-filter-toggle.show { display:block; margin-bottom:8px; }
#archivColFilterRow { display:none; }
}
/* ── iPad: two-column archive grid ── */
@media (min-width:768px) and (max-width:1024px) {
#archivTable tbody { display:grid !important; grid-template-columns:1fr 1fr; gap:6px; }
#archivTable thead { display:none; }
#archivTable tbody tr {
display:flex !important; align-items:center;
background:var(--bg-card); border:1px solid var(--border);
border-radius:10px; padding:0; min-height:56px; max-height:70px;
box-shadow:0 1px 3px rgba(0,0,0,0.05); cursor:pointer; overflow:hidden;
}
#archivTable td { display:none !important; }
#archivTable td.archiv-mobile-card {
display:flex !important; flex:1; min-width:0; align-items:center;
padding:8px 12px !important; gap:10px; max-width:none !important;
}
#archivTable td.archiv-mobile-card .archiv-card-title {
font-size:13px; font-weight:600; color:var(--text);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#archivTable td.archiv-mobile-card .archiv-card-meta {
font-size:11px; color:var(--text-secondary);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
margin-top:1px;
}
#archivTable td.archiv-mobile-card .archiv-card-text { flex:1; min-width:0; line-height:1.3; }
#archivTable td.archiv-mobile-card .archiv-card-file {
flex-shrink:0; width:40px; height:40px; display:flex; align-items:center;
justify-content:center; border-radius:8px; background:var(--bg-hover);
font-size:18px; text-decoration:none;
}
#archivPreviewPanel { display:none !important; }
#pageArchiv > div { padding-bottom:env(safe-area-inset-bottom); }
}
/* ── Small Phone (< 400px) ── */
@media (max-width:399px) {
.stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
.stat-card { padding:12px; border-radius:14px; }
.stat-card .value { font-size:20px; }
.stat-card .stat-icon { width:28px; height:28px; margin-bottom:6px; border-radius:8px; }
.stat-card .stat-icon svg { width:14px; height:14px; }
.stat-card .sub { font-size:10px; }
.dash-greeting-text { font-size:18px; }
.dash-stat-value { font-size:18px; }
.dash-card { padding:14px 12px; }
.main-header h2 { font-size:13px; }
.brand-text { font-size:14px; }
.brand-sub { display:none; }
.data-table td { font-size:12px; }
.data-table td::before { min-width:70px; font-size:10px; }
}
/* ============================================================
VG-SEV REDESIGN — Clean, readable, theme-aware
Uses existing CSS variables so light/dark mode works automatically.
============================================================ */
#pageSevvg {
background: var(--bg-body);
padding: 0;
}
.svg-topbar {
background: var(--bg-card);
border-bottom: 1px solid var(--border);
padding: 14px 24px;
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.svg-topbar-title {
font-size: 20px; font-weight: 800; color: var(--text);
letter-spacing: -0.02em;
}
.svg-topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.svg-btn {
padding: 8px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
border: none; cursor: pointer; transition: all 0.15s;
display: inline-flex; align-items: center; gap: 6px;
font-family: inherit;
}
.svg-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.svg-btn-primary { background: var(--brand); color: #FFFFFF; }
.svg-btn-primary:hover { background: var(--brand-dark); }
.svg-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.svg-btn-outline {
background: var(--bg-card); color: var(--text);
border: 1px solid var(--border);
}
.svg-btn-outline:hover { background: var(--bg-card-hover); }
.svg-btn-sm { padding: 6px 12px; font-size: 13px; }
.svg-content { padding: 20px 24px; max-width: 1280px; margin: 0 auto; }
/* Summary Dashboard */
.svg-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
margin-bottom: 24px;
}
.svg-stat-card {
background: var(--bg-card); border-radius: 12px;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
padding: 20px 22px;
transition: box-shadow 0.15s, border-color 0.15s;
}
.svg-stat-card:hover { box-shadow: var(--shadow); border-color: var(--border); }
.svg-stat-label {
font-size: 12px; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
.svg-stat-value {
font-size: 26px; font-weight: 800; color: var(--text);
margin-top: 6px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.svg-stat-value.svg-positive { color: var(--green); }
.svg-stat-value.svg-negative { color: var(--red); }
.svg-stat-value.svg-blue { color: var(--blue); }
.svg-stat-sub {
font-size: 13px; color: var(--text-muted); margin-top: 4px;
}
/* Search + Filter */
.svg-toolbar {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
margin-bottom: 20px;
}
.svg-search {
flex: 1; min-width: 240px; padding: 10px 14px 10px 40px;
border: 1px solid var(--border); border-radius: 10px;
font-size: 15px; color: var(--text); background: var(--bg-input);
transition: border-color 0.2s, box-shadow 0.2s;
font-family: inherit;
}
.svg-search:focus {
outline: none; border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-ring);
}
.svg-search::placeholder { color: var(--text-muted); }
.svg-search-wrap {
position: relative; flex: 1; min-width: 240px;
}
.svg-search-wrap svg {
position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
}
.svg-select {
padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
font-size: 14px; color: var(--text); background: var(--bg-input);
cursor: pointer; font-family: inherit;
}
.svg-select:focus { outline: none; border-color: var(--brand); }
.svg-result-count { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; font-weight: 500; }
/* VG-SEV Table */
.svg-table-wrap {
border-radius: 12px;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
background: var(--bg-card);
}
.svg-table {
width: 100%; border-collapse: collapse; font-size: 14px;
min-width: 900px;
}
.svg-table thead th {
position: sticky; top: -28px; z-index: 2;
background: var(--gray-50); padding: 12px 14px;
font-size: 11px; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.05em;
border-bottom: 1px solid var(--border); text-align: right;
white-space: nowrap;
}
.svg-th-sort { cursor: pointer; user-select: none; }
.svg-th-sort:hover { color: var(--text); }
.svg-th-active { color: var(--brand) !important; border-bottom-color: var(--brand) !important; }
.svg-table thead th:nth-child(1),
.svg-table thead th:nth-child(2) { text-align: left; }
.svg-table tbody tr { transition: background 0.1s; }
.svg-table tbody tr:hover { background: var(--bg-card-hover); }
.svg-table tbody tr.svg-row-even { background: var(--gray-50); }
.svg-table tbody tr.svg-row-even:hover { background: var(--bg-card-hover); }
.svg-table td {
padding: 10px 14px; border-bottom: 1px solid var(--border-light);
vertical-align: middle; text-align: right; white-space: nowrap;
font-size: 14px; line-height: 1.5;
}
.svg-table td:nth-child(1),
.svg-table td:nth-child(2) { text-align: left; }
.svg-table .svg-sub-row td {
padding: 2px 14px 10px; border-bottom: 1px solid var(--border);
font-size: 13px; font-weight: 500; color: var(--text-muted);
}
.svg-table .svg-sub-row:hover { background: transparent; }
.svg-table .svg-row-even + .svg-sub-row { background: var(--gray-50); }
.svg-table .svg-row-even + .svg-sub-row:hover { background: var(--gray-50); }
/* Row status indicators */
.svg-row-status {
width: 5px; padding: 0 !important; position: relative;
}
.svg-row-status-green { background: var(--green) !important; }
.svg-row-status-red { background: var(--red) !important; }
.svg-row-status-orange { background: #ff9500 !important; }
.svg-row-status-gray { background: var(--border) !important; }
/* Payment dots */
.svg-dots { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.svg-dot {
width: 12px; height: 12px; border-radius: 50%; display: inline-block;
cursor: default; position: relative; flex-shrink: 0;
border: 2px solid transparent;
}
.svg-dot-green { background: var(--green); }
.svg-dot-blue { background: var(--blue); cursor: pointer; }
.svg-dot-orange { background: var(--red); }
.svg-dot-badge {
font-size: 12px; font-weight: 600; color: var(--text-muted);
margin-left: 2px;
}
.svg-dot-add {
width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
align-items: center; justify-content: center;
border: 1.5px dashed var(--border); color: var(--text-muted);
font-size: 13px; cursor: pointer; background: none;
margin-left: 4px; padding: 0; line-height: 1; flex-shrink: 0;
transition: border-color 0.15s, color 0.15s;
}
.svg-dot-add:hover { border-color: var(--brand); color: var(--brand); }
/* Tooltip for dots */
.svg-dot-tip {
display: none; position: absolute; bottom: calc(100% + 6px); left: 50%;
transform: translateX(-50%); background: var(--bg-modal);
border: 1px solid var(--border); border-radius: 8px;
padding: 6px 10px; font-size: 12px; color: var(--text);
white-space: nowrap; z-index: 20; box-shadow: var(--shadow);
pointer-events: none;
}
.svg-dot:hover .svg-dot-tip { display: block; pointer-events: auto; }
.svg-dot-blue:hover .svg-dot-tip { pointer-events: auto; }
/* Action column */
.svg-action-sepa {
padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 700;
border: none; cursor: pointer; background: var(--brand); color: #fff;
white-space: nowrap; transition: background 0.15s; min-width: 52px;
}
.svg-action-sepa:hover { background: var(--brand-dark); }
.svg-action-sepa-orange { background: #ff9500; }
.svg-action-sepa-orange:hover { background: #e08600; }
/* Detail row (aufklappbar) */
.svg-detail-row { display: none; }
.svg-detail-row.svg-open { display: table-row; }
.svg-detail-row > td { padding: 0 !important; border-bottom: 2px solid var(--border); }
.svg-detail-wrap {
display: flex; gap: 0; padding: 20px 24px 24px;
background: var(--bg-card); border-top: 1px dashed var(--border-light);
}
.svg-detail-left, .svg-detail-right { flex: 1; min-width: 0; }
.svg-detail-left { padding-right: 28px; border-right: 1px solid var(--border-light); }
.svg-detail-right { padding-left: 28px; }
.svg-detail-heading {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 12px;
padding-bottom: 8px; border-bottom: 1px solid var(--border-light);
}
.svg-detail-calc { font-size: 14px; line-height: 1.6; }
.svg-detail-calc strong { font-weight: 700; }
.svg-detail-meta { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.svg-detail-ztable { width: 100%; font-size: 13px; border-collapse: collapse; }
.svg-detail-ztable td { padding: 4px 8px 4px 0; vertical-align: middle; text-align: left; white-space: nowrap; }
.svg-detail-ztable td:first-child { width: 80px; font-variant-numeric: tabular-nums; }
.svg-detail-ztable tr:not(:last-child) td { border-bottom: 1px solid var(--border-light); }
.svg-detail-ztable .svg-ztype { font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.svg-detail-ztable .svg-ztype-iban { background: var(--green-bg); color: var(--green); }
.svg-detail-ztable .svg-ztype-vwz { background: var(--blue-bg, rgba(59,130,246,0.1)); color: var(--blue); }
.svg-detail-ztable .svg-ztype-manuell { background: var(--orange-bg); color: var(--orange); }
.svg-detail-ztable .svg-ztype-sammler { background: rgba(139,92,246,0.12); color: #7c3aed; }
.svg-detail-ztable .svg-ztype-gutschrift { background: rgba(239,68,68,0.1); color: var(--red); }
.svg-detail-del {
background: none; border: none; color: var(--red); cursor: pointer;
font-size: 14px; padding: 2px 6px; border-radius: 4px; opacity: 0.7;
}
.svg-detail-del:hover { opacity: 1; background: rgba(255,0,0,0.08); }
.svg-detail-sum { font-weight: 700; border-top: 2px solid var(--border) !important; padding-top: 8px !important; }
.svg-detail-add {
margin-top: 12px; padding: 6px 14px; border-radius: 6px; font-size: 12px;
font-weight: 600; border: 1.5px dashed var(--border); color: var(--text-muted);
background: none; cursor: pointer; transition: all 0.15s;
}
.svg-detail-add:hover { border-color: var(--brand); color: var(--brand); }
.svg-chevron {
display: inline-block; transition: transform 0.2s; font-size: 10px;
color: var(--text-muted); margin-right: 4px; width: 12px; text-align: center;
}
.svg-open-parent .svg-chevron { transform: rotate(90deg); }
.svg-table tbody tr.svg-detail-row:hover { background: var(--bg-card); }
.svg-table tbody tr.svg-row-even + .svg-sub-row + .svg-detail-row { background: var(--gray-50); }
.svg-table tbody tr.svg-detail-row.svg-row-even-detail { background: var(--gray-50); }
/* Month pills */
.svg-detail-months { margin-top: 10px; }
.svg-month-year { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-bottom: 4px; }
.svg-month-year-label {
font-size: 11px; font-weight: 700; color: var(--text-muted);
width: 36px; flex-shrink: 0;
}
.svg-month-pill {
display: inline-block; font-size: 11px; font-weight: 600;
padding: 2px 7px; border-radius: 4px; text-align: center;
}
.svg-month-paid { background: var(--green-bg); color: var(--green); }
.svg-month-open { background: var(--red-bg); color: var(--red); }
/* Sortable column headers in detail zahlungen table */
.svg-zthead {
cursor: pointer; user-select: none; font-size: 11px; font-weight: 700;
color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em;
padding: 4px 8px 6px 0 !important; border-bottom: 2px solid var(--border-light) !important;
white-space: nowrap; text-align: left;
}
.svg-zthead:hover { color: var(--text); }
.svg-zthead-active { color: var(--brand); border-bottom-color: var(--brand) !important; }
.svg-sort-arrow { font-size: 9px; margin-left: 2px; }
.svg-vwz-cell {
max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 12px; color: var(--text-muted);
}
.svg-action-ok { color: var(--green); font-size: 16px; font-weight: 700; }
.svg-action-warn { color: #ff9500; font-size: 16px; font-weight: 700; }
/* Action badges */
.svg-action-badge {
display: inline-flex; align-items: center; justify-content: center;
padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; min-width: 44px;
}
.svg-action-badge-ok { background: var(--green-bg); color: var(--green); }
.svg-action-badge-warn { background: var(--orange-bg); color: var(--orange); }
.svg-action-badge-muted { background: transparent; color: var(--text-muted); font-size: 11px; }
.svg-action-badge-red { background: var(--red-bg); color: var(--red); font-size: 11px; }
.svg-action-badge-orange { background: var(--orange); color: #fff; }
/* Selbstzahler */
.svg-row-sz { opacity: 0.5; }
.svg-detail-sz {
margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-light);
}
.svg-sz-label {
display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px;
}
.svg-sz-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); }
.svg-sz-text { font-weight: 600; }
.svg-sz-hint { font-size: 11px; color: var(--text-muted); }
.svg-row-novat { opacity: 0.45; }
/* Tracking sections (Mahnung + SEPA) */
.svg-track-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light); }
.svg-track-entry { font-size: 12px; color: var(--text-secondary, var(--text-muted)); margin-bottom: 4px; line-height: 1.5; }
.svg-track-entry-active { font-weight: 600; color: var(--text); }
.svg-track-sepa-entry {
font-size: 12px; margin-bottom: 6px; display: flex; align-items: flex-start; gap: 8px;
padding: 6px 8px; border-radius: 6px; background: var(--gray-50); border: 1px solid var(--border-light);
}
.svg-track-sepa-entry:hover { border-color: var(--border); }
.svg-track-del {
background: none; border: none; color: var(--red); cursor: pointer;
font-size: 14px; padding: 0 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s;
}
.svg-track-sepa-entry:hover .svg-track-del { opacity: 0.7; }
.svg-track-del:hover { opacity: 1 !important; }
.svg-track-message {
margin-top: 6px; padding: 8px 12px; background: var(--bg-input);
border: 1px solid var(--border-light); border-radius: 6px;
color: var(--text-secondary, var(--text-muted)); font-size: 12px; line-height: 1.5;
}
/* Modal classes */
.svg-modal-overlay {
display: none; position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0.5); align-items: flex-start; justify-content: center; overflow: auto;
}
.svg-modal {
width: 100%; margin: 60px auto; background: var(--bg-modal-solid);
border-radius: var(--radius); box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.3));
}
.svg-modal-sm { max-width: 420px; }
.svg-modal-md { max-width: 650px; }
.svg-modal-lg { max-width: 900px; }
.svg-modal-header {
padding: 16px 20px; border-bottom: 1px solid var(--border);
display: flex; justify-content: space-between; align-items: center;
}
.svg-modal-body { padding: 16px 20px; }
.svg-modal-footer {
margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
display: flex; justify-content: flex-end; gap: 8px;
}
/* Responsive */
@media (max-width: 768px) {
.svg-stats { grid-template-columns: repeat(2, 1fr); }
.svg-content { padding: 16px; }
.svg-topbar { padding: 12px 16px; }
.svg-stat-value { font-size: 22px; }
}
@media (max-width: 480px) {
.svg-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
.svg-stat-card { padding: 14px 16px; }
.svg-stat-value { font-size: 20px; }
}
/* ============================================================
ETV — Eigentümerversammlung Design System
============================================================ */
#pageEtv, #pageEtvuebersicht { font-family: Arial, sans-serif; }
#pageEtv table, #pageEtv .btn, #pageEtv input, #pageEtv select, #pageEtv textarea { font-family: inherit; }
.etv-phase { animation: etvFadeIn 0.3s ease-out; }
@keyframes etvFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
/* Phase Header */
.etv-phase-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.etv-phase-header h3 { margin:0; }
.etv-phase-header .spacer { flex:1; }
/* Status Badge */
.etv-badge { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:600; }
.etv-badge.draft { background:rgba(107,114,128,0.12); color:#6b7280; }
.etv-badge.checkin { background:rgba(59,130,246,0.12); color:#3b82f6; }
.etv-badge.running { background:rgba(249,115,22,0.12); color:#f59e0b; }
.etv-badge.closed { background:rgba(34,197,94,0.12); color:#22c55e; }
/* Check-in Tile */
.etv-tile { padding:14px; border:2px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); backdrop-filter:var(--glass-blur); cursor:pointer; transition:all 0.2s ease; user-select:none; min-height:80px; }
.etv-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.etv-top-text p { margin:4px 0; }
.etv-top-text ul, .etv-top-text ol { margin:4px 0; padding-left:20px; }
.etv-top-text li { margin:2px 0; }
.etv-tile:active { transform:scale(0.98); }
.etv-tile.selected { border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(7,161,226,0.25); transform:translateY(-2px); }
@keyframes etvSlideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
.etv-tile.present { border-color:var(--green); background:rgba(34,197,94,0.08); }
.etv-tile.represented { border-color:#3b82f6; background:rgba(59,130,246,0.08); }
.etv-tile.left { border-color:#f59e0b; background:rgba(245,158,11,0.08); }
.etv-tile .tile-name { font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.etv-tile .tile-unit { font-size:11px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.etv-tile .tile-mea { font-size:11px; color:var(--text-muted); }
.etv-tile .tile-proxy { font-size:10px; color:#3b82f6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.etv-tile .tile-status { font-size:10px; margin-top:4px; font-weight:600; }
.etv-tile .tile-status.present { color:var(--green); }
.etv-tile .tile-status.represented { color:#3b82f6; }
.etv-tile .tile-status.left { color:#f59e0b; }
.etv-tile .tile-status.absent { color:var(--text-muted); }
/* Vote Counter */
.etv-vote-counter { text-align:center; }
.etv-vote-counter .count { font-size:28px; font-weight:700; min-width:48px; display:inline-block; font-variant-numeric:tabular-nums; }
.etv-vote-counter .label { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.etv-vote-counter.yes .count { color:var(--green); }
.etv-vote-counter.no .count { color:var(--red); }
/* Vote Buttons */
.etv-vote-btn { min-height:32px; min-width:40px; font-size:11px; transition:all 0.15s; }
.etv-vote-btn.selected-yes { background:var(--green) !important; color:#fff !important; border-color:var(--green) !important; }
.etv-vote-btn.selected-no { background:var(--red) !important; color:#fff !important; border-color:var(--red) !important; }
.etv-vote-btn.selected-abstain { background:#6b7280 !important; color:#fff !important; border-color:#6b7280 !important; }
.etv-quick-yes { background:rgba(34,197,94,0.1); color:var(--green); }
.etv-quick-yes:hover { background:rgba(34,197,94,0.2); }
.etv-quick-no { background:rgba(239,68,68,0.1); color:var(--red); }
.etv-quick-no:hover { background:rgba(239,68,68,0.2); }
/* Result Banner */
.etv-result { padding:16px; border-radius:var(--radius-sm); text-align:center; font-weight:600; font-size:15px; animation:etvFadeIn 0.3s ease-out; margin-top:12px; }
.etv-result.passed { background:rgba(34,197,94,0.12); color:var(--green); border:1px solid var(--green); }
.etv-result.failed { background:rgba(239,68,68,0.12); color:var(--red); border:1px solid var(--red); }
.etv-result.discussion { background:rgba(59,130,246,0.08); color:#3b82f6; border:1px solid #3b82f6; }
.etv-result.skipped { background:rgba(107,114,128,0.08); color:var(--text-muted); border:1px solid var(--border); }
/* TOP Chips */
.etv-chip { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:11px; font-weight:600; cursor:pointer; transition:all 0.15s; }
.etv-chip:hover { transform:scale(1.15); }
.etv-chip.done { background:var(--green); color:#fff; }
.etv-chip.active { background:var(--brand); color:#fff; box-shadow:0 0 0 3px rgba(7,161,226,0.25); }
.etv-chip.pending { background:var(--bg-input); color:var(--text-muted); }
.etv-chip.skipped { background:var(--orange); color:#fff; }
/* Quorum Bar */
.etv-quorum-bar { position:sticky; bottom:0; left:0; right:0; background:var(--bg-card); backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy); border-top:1px solid var(--border); padding:12px 20px; padding-bottom:max(12px, env(safe-area-inset-bottom)); display:flex; align-items:center; gap:16px; justify-content:space-between; z-index:10; border-radius:0 0 var(--radius) var(--radius); }
/* Owner Row */
.etv-owner-row { padding:8px 10px; border-bottom:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center; font-size:13px; border-radius:6px; transition:background 0.15s; margin-bottom:2px; }
.etv-owner-row:hover { background:var(--bg-card-hover); }
.etv-owner-row.has-proxy { background:rgba(59,130,246,0.06); border-left:3px solid #3b82f6; padding-left:10px; }
.etv-owner-row .owner-proxy { font-size:11px; color:#3b82f6; font-weight:600; }
.etv-owner-row .owner-instruction { font-size:10px; color:var(--text-muted); font-style:italic; margin-top:1px; }
.etv-owner-row .owner-detail { font-size:11px; color:var(--text-muted); }
/* Agenda Item */
.etv-agenda-item { padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; transition:all 0.15s; }
.etv-agenda-item:hover { box-shadow:var(--shadow-sm); }
.etv-agenda-item.sonstiges { border-style:dashed; }
.etv-agenda-item .agenda-header { display:flex; justify-content:space-between; align-items:center; }
.etv-agenda-item .agenda-title { font-size:13px; font-weight:600; }
.etv-agenda-item .agenda-text { font-size:12px; color:var(--text-muted); margin:4px 0 0; white-space:pre-wrap; }
/* Modal */
.etv-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:200; display:none; align-items:center; justify-content:center; }
.etv-modal-overlay.visible { display:flex; }
.etv-modal { background:var(--bg-modal); border:1px solid var(--border-glass); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); max-height:85vh; max-height:85dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; animation:modalIn 0.25s ease-out; }
.etv-modal-sm { max-width:400px; width:90%; }
.etv-modal-md { max-width:500px; width:90%; }
.etv-modal-header { padding:20px 24px; border-bottom:1px solid var(--border-light); }
.etv-modal-header h4 { margin:0; font-size:16px; font-weight:700; }
.etv-modal-body { padding:20px 24px; }
.etv-modal-footer { padding:16px 24px; border-top:1px solid var(--border-light); display:flex; gap:8px; justify-content:flex-end; }
/* Individual Vote Row */
.etv-indiv-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-bottom:1px solid var(--border-light); font-size:12px; transition:background 0.15s; }
.etv-indiv-row:hover { background:var(--bg-card-hover); }
.etv-indiv-row .indiv-name { flex:1; min-width:0; }
.etv-indiv-row .indiv-buttons { display:flex; gap:3px; flex-shrink:0; }
/* Utility */
.etv-form-section { padding:16px; background:var(--bg-input); border-radius:var(--radius-sm); margin-bottom:16px; }
.etv-checkin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; padding-bottom:80px; }
.etv-meta { display:flex; gap:16px; font-size:12px; color:var(--text-muted); margin-bottom:16px; flex-wrap:wrap; }
.etv-meta-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; font-size:12px; }
.etv-loading { pointer-events:none; opacity:0.6; }
/* ETV List Cards */
.etv-list-card { padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; cursor:pointer; transition:all 0.2s ease; background:var(--bg-card); backdrop-filter:var(--glass-blur); }
.etv-list-card:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:var(--brand); }
.etv-list-card:active { transform:scale(0.99); }
.etv-list-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.etv-list-card-name { font-weight:600; font-size:14px; }
.etv-list-card-detail { font-size:12px; color:var(--text-muted); margin-top:2px; }
.etv-list-card-actions { display:flex; gap:6px; margin-top:8px; justify-content:flex-end; }
.etv-list-card-actions .btn { font-size:11px; }
/* Prep Phase Grid (2 columns → 1 on mobile) */
.etv-prep-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:768px) { .etv-prep-grid { grid-template-columns:1fr; } }
.etv-vote-btn { min-height:44px; }
.etv-chip { min-width:28px; min-height:28px; width:28px; height:28px; }
/* iPad Touch Targets */
@media (max-width:1024px) {
#pageEtv .btn-sm { min-height:44px; }
.etv-checkin-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.etv-tile { padding:10px; min-height:64px; }
.etv-tile .tile-name { font-size:14px; }
.etv-tile .tile-status { font-size:11px; }
/* Check-in Phase: kompakt auf iPad */
#etvCheckinTitle { font-size:14px !important; }
/* Running Phase: Buttons wrappen */
#etvTopActions { flex-wrap:wrap; }
#etvTopActions .btn { font-size:12px; min-width:0; }
/* Schnellerfassung responsive */
#etvVoteQuick > div:nth-child(2) { gap:12px !important; }
/* Einzelstimmen Header */
#etvVoteIndividual > div:first-child { flex-wrap:wrap; }
#etvVoteIndividual > div:first-child input[type="text"] { width:100% !important; order:10; }
/* Vote Result Banner: kein Overflow */
.etv-result { word-break:break-word; overflow-wrap:break-word; }
}
/* Mobile */
@media (max-width:768px) {
.etv-meta-grid { grid-template-columns:1fr 1fr; }
.etv-checkin-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.etv-phase-header { flex-wrap:wrap; }
/* Schnellerfassung: vertikal auf Handy */
#etvVoteQuick > div:nth-child(2) { flex-direction:column; gap:16px !important; }
}
/* Mobile Quorum Bar */
@media (max-width:768px) {
.etv-quorum-bar { flex-direction:column; gap:8px; padding:10px 16px; }
.etv-quorum-bar > div { width:100%; justify-content:center; }
.etv-quorum-bar .btn { width:100%; }
.etv-list-card-actions { flex-wrap:wrap; }
.card-header { flex-wrap:wrap; gap:8px; }
.card-header h3 { font-size:14px; }
}
/* Extra-Small Phones */
@media (max-width:400px) {
.etv-checkin-grid { grid-template-columns:1fr 1fr; gap:8px; }
.etv-vote-counter .count { font-size:22px; }
.etv-meta-grid { grid-template-columns:1fr; }
.etv-tile { padding:10px; min-height:60px; }
.etv-tile .tile-name { font-size:12px; }
}
/* ═══ ETV Signatur-Banner (iPad/Tablet) ═══ */
.etv-sign-banner {
display:flex; align-items:center; gap:16px;
padding:18px 20px; margin-bottom:16px;
border-radius:var(--radius);
background:linear-gradient(135deg, #07a1e2, #0284c7);
color:#fff; cursor:pointer;
transition:all 0.2s ease;
box-shadow:0 4px 16px rgba(7,161,226,0.3);
-webkit-tap-highlight-color:transparent;
user-select:none;
}
.etv-sign-banner:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(7,161,226,0.4); }
.etv-sign-banner:active { transform:scale(0.98); }
.etv-sign-banner-icon {
width:56px; height:56px; border-radius:14px;
background:rgba(255,255,255,0.2);
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.etv-sign-banner-title { font-weight:700; font-size:17px; letter-spacing:-0.02em; }
.etv-sign-banner-sub { font-size:13px; opacity:.8; margin-top:2px; }
/* ═══ ETV Signature — Liquid Glass UI ═══ */
/* Fullscreen container */
.etv-sig-screen {
position:fixed; inset:0; z-index:900;
background:var(--bg-body);
display:flex; flex-direction:column;
animation:etvSlideUp 0.35s cubic-bezier(0.2, 0, 0, 1);
/* iOS safe areas */
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
padding-left:env(safe-area-inset-left);
padding-right:env(safe-area-inset-right);
/* iOS viewport fix */
height:100dvh; height:-webkit-fill-available;
overscroll-behavior:none; overflow:hidden;
}
@keyframes etvSlideUp {
from { transform:translateY(20px); opacity:0; }
to { transform:translateY(0); opacity:1; }
}
.etv-sig-header {
display:flex; align-items:center; gap:12px;
padding:14px 20px;
background:var(--bg-card);
backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
border-bottom:1px solid var(--border-glass);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
}
html.dark .etv-sig-header { box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); }
.etv-sig-footer {
padding:12px 20px;
background:var(--bg-card);
backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
border-top:1px solid var(--border-glass);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
display:flex; align-items:center; justify-content:space-between;
font-size:13px;
}
html.dark .etv-sig-footer { box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); }
.etv-sig-search {
width:100%; font-size:18px; height:52px;
border-radius:var(--radius);
padding:0 16px 0 48px;
background:var(--bg-card);
backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
border:1.5px solid var(--border);
box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.3);
outline:none; color:var(--text); font-family:var(--font);
transition:all 0.25s ease;
-webkit-tap-highlight-color:transparent;
}
.etv-sig-search:focus {
border-color:var(--brand);
box-shadow:var(--shadow-md), 0 0 0 3px var(--brand-ring);
}
.etv-sig-search::placeholder { color:var(--text-muted); }
html.dark .etv-sig-search { box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04); }
/* Owner Card */
.etv-sig-card {
display:flex; align-items:center; gap:14px;
padding:16px 18px; margin-bottom:8px;
border-radius:var(--radius);
background:var(--bg-card);
backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
border:2px solid var(--border);
box-shadow:var(--shadow-sm);
cursor:pointer;
transition:all 0.2s cubic-bezier(0.2, 0, 0, 1);
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none; user-select:none;
min-height:68px;
}
.etv-sig-card:active { transform:scale(0.97); background:var(--bg-card-hover); }
.etv-sig-card.signed {
border-color:rgba(34,197,94,0.2);
background:linear-gradient(135deg, var(--bg-card), rgba(34,197,94,0.03));
opacity:0.75;
}
.etv-sig-card.signed:active { opacity:1; }
.etv-sig-dot {
width:44px; height:44px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
flex-shrink:0; transition:all 0.3s ease;
-webkit-user-select:none; user-select:none;
}
.etv-sig-dot.signed { background:rgba(34,197,94,0.12); }
.etv-sig-dot.present { background:rgba(7,161,226,0.1); border:2px solid rgba(7,161,226,0.25); }
.etv-sig-dot.absent { background:var(--bg-input); }
/* Canvas Modal */
.etv-sig-modal {
position:fixed; inset:0; z-index:1100;
background:var(--bg-body);
display:none; flex-direction:column;
animation:etvFadeScale 0.3s cubic-bezier(0.2, 0, 0, 1);
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}
.etv-sig-modal.visible { display:flex; }
@keyframes etvFadeScale {
from { opacity:0; transform:scale(0.97); }
to { opacity:1; transform:scale(1); }
}
.etv-sig-canvas-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:16px 20px; }
.etv-sig-canvas-inner { width:100%; max-width:900px; height:100%; display:flex; flex-direction:column; }
.etv-sig-canvas-border {
flex:1; border:2px solid var(--border);
border-radius:var(--radius); background:#fff;
touch-action:none; position:relative; min-height:200px;
box-shadow:var(--shadow), inset 0 2px 4px rgba(0,0,0,0.02);
transition:border-color 0.2s;
}
.etv-sig-canvas-border.drawing { border-color:var(--brand); }
.etv-sig-save-btn {
font-size:17px; min-height:52px;
padding:0 36px; border-radius:var(--radius);
font-weight:700; letter-spacing:-0.01em;
transition:all 0.2s ease;
-webkit-tap-highlight-color:transparent;
}
.etv-sig-save-btn:active { transform:scale(0.96); }
.etv-sig-save-btn:disabled { opacity:0.6; pointer-events:none; }
/* Connection Banner */
.etv-conn-banner {
display:none;
background:linear-gradient(135deg, #dc2626, #b91c1c);
color:#fff; padding:10px 16px;
text-align:center; font-weight:700; font-size:14px;
animation:etvPulse 2s ease-in-out infinite;
}
.etv-conn-banner.visible { display:block; }
/* Stagger animation */
.etv-sig-card { animation:etvCardIn 0.3s ease-out both; }
@media (prefers-reduced-motion:no-preference) {
.etv-sig-animated > .etv-sig-card:nth-child(1) { animation-delay:0ms; }
.etv-sig-animated > .etv-sig-card:nth-child(2) { animation-delay:30ms; }
.etv-sig-animated > .etv-sig-card:nth-child(3) { animation-delay:40ms; }
.etv-sig-animated > .etv-sig-card:nth-child(4) { animation-delay:50ms; }
.etv-sig-animated > .etv-sig-card:nth-child(5) { animation-delay:60ms; }
.etv-sig-animated > .etv-sig-card:nth-child(n+6) { animation-delay:70ms; }
}
@keyframes etvCardIn {
from { opacity:0; transform:translateY(8px); }
to { opacity:1; transform:translateY(0); }
}
/* iPad Landscape: 2-column list */
@media (min-width:769px) and (orientation:landscape) {
#etvSigList { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; align-content:start; }
}
/* Canvas im Landscape: compact header/footer */
@media (orientation:landscape) {
.etv-sig-modal .etv-sig-header { padding:10px 20px; }
.etv-sig-modal .etv-sig-footer { padding:10px 20px; }
.etv-sig-canvas-wrap { padding:8px 20px; }
.etv-sig-save-btn { min-height:44px; font-size:15px; }
}
/* Portrait small */
@media (max-width:768px) {
.etv-sig-card { padding:12px 14px; }
.etv-sig-search { height:48px; font-size:17px; }
}
/* ── Login Screen ── */
.login-screen {
display:none; position:fixed; inset:0; z-index:9999;
align-items:center; justify-content:center;
background:var(--bg-body);
overflow:hidden;
}
/* Ambient background orbs */
.login-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.login-orb {
position:absolute; border-radius:50%; filter:blur(80px); opacity:0.15;
animation:loginOrbFloat 20s ease-in-out infinite;
}
html.dark .login-orb { opacity:0.08; }
.login-orb-1 { width:500px; height:500px; background:var(--brand); top:-15%; right:-10%; animation-delay:0s; }
.login-orb-2 { width:400px; height:400px; background:#9333ea; bottom:-10%; left:-8%; animation-delay:-7s; }
.login-orb-3 { width:300px; height:300px; background:#ec4899; top:40%; left:50%; animation-delay:-13s; }
@keyframes loginOrbFloat {
0%,100% { transform:translate(0,0) scale(1); }
33% { transform:translate(30px,-20px) scale(1.05); }
66% { transform:translate(-20px,15px) scale(0.95); }
}
/* Card */
.login-card {
position:relative; width:420px; max-width:calc(100vw - 40px);
background:linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 100%);
backdrop-filter:blur(40px) saturate(1.8);
-webkit-backdrop-filter:blur(40px) saturate(1.8);
border:none; outline:1px solid rgba(255,255,255,0.35);
outline-offset:-1px;
border-radius:24px;
box-shadow:0 8px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
padding:48px 40px 40px;
animation:loginCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.dark .login-card {
background:linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
outline-color:rgba(255,255,255,0.1);
box-shadow:0 8px 40px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.07);
}
.login-card::before {
content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55) 30%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.55) 70%, transparent);
pointer-events:none;
}
html.dark .login-card::before {
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.12) 70%, transparent);
}
@keyframes loginCardIn { from { opacity:0; transform:scale(0.92) translateY(20px); } }
/* Logo */
.login-logo { text-align:center; margin-bottom:32px; animation:loginLogoIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s both; }
@keyframes loginLogoIn { from { opacity:0; transform:translateY(-10px); } }
.login-logo-img { width:220px; margin-bottom:8px; }
html.dark .login-logo-img { filter:brightness(0) invert(1) hue-rotate(180deg) saturate(1.2) hue-rotate(180deg); }
.login-pro-badge {
display:inline-block; font-size:11px; font-weight:700; color:white;
background:linear-gradient(135deg, var(--brand), #0689c2);
padding:3px 14px; border-radius:8px; letter-spacing:2px;
margin-top:10px; box-shadow:0 2px 8px rgba(7,161,226,0.25);
}
/* Form */
.login-field { margin-bottom:18px; animation:loginFieldIn 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.login-field:nth-child(1) { animation-delay:0.25s; }
.login-field:nth-child(2) { animation-delay:0.35s; }
.login-field:nth-child(3) { animation-delay:0.45s; }
@keyframes loginFieldIn { from { opacity:0; transform:translateY(12px); } }
.login-label {
font-size:12px; font-weight:600; color:var(--text-secondary);
letter-spacing:0.3px; margin-bottom:6px; display:block;
}
.login-input {
width:100%; padding:12px 16px; border:1px solid var(--border);
border-radius:14px; font-size:14px; font-family:inherit;
background:var(--bg-input); color:var(--text);
transition:border-color 0.2s, box-shadow 0.2s; outline:none;
}
.login-input:focus { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-ring); }
.login-input::placeholder { color:var(--text-muted); }
.login-btn {
width:100%; padding:13px; border:none; border-radius:14px; cursor:pointer;
font-size:15px; font-weight:600; font-family:inherit; color:white;
background:linear-gradient(135deg, var(--brand), #0689c2);
box-shadow:0 4px 16px rgba(7,161,226,0.25);
transition:all 0.25s; margin-top:6px;
animation:loginFieldIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.5s both;
}
.login-btn:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(7,161,226,0.35); }
.login-btn:active { transform:translateY(0); }
/* Footer text */
.login-footer {
text-align:center; margin-top:24px; font-size:11px; color:var(--text-muted);
animation:loginFieldIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.6s both;
}
/* Mobile */
@media (max-width:480px) {
.login-card { padding:36px 28px 32px; border-radius:20px; }
.login-logo-text { font-size:24px; }
.login-logo-skyline { width:180px; }
.login-orb-1 { width:300px; height:300px; }
.login-orb-2 { width:250px; height:250px; }
.login-orb-3 { width:200px; height:200px; }
}
/* iPad */
@media (min-width:481px) and (max-width:1024px) {
.login-card { width:400px; }
}
/* ── ETV: HTML-Content in TOP-Anzeige ── */
.etv-top-content { line-height: 1.5; }
.etv-top-content p { margin: 0 0 4px; }
.etv-top-content ul, .etv-top-content ol { margin: 4px 0; padding-left: 20px; }
.etv-top-content table { border-collapse: collapse; margin: 4px 0; font-size: 12px; }
.etv-top-content table td, .etv-top-content table th { border: 1px solid var(--border); padding: 2px 6px; }
.etv-top-content h1, .etv-top-content h2, .etv-top-content h3 { font-size: 13px; margin: 4px 0 2px; }
/* ── TinyMCE Dark-Mode Fixes ── */
.dark .tox .tox-toolbar__primary { background: var(--bg-input) !important; }
.dark .tox .tox-edit-area__iframe { background: var(--bg-input) !important; }
.dark .tox .tox-statusbar { background: var(--bg-input) !important; border-color: var(--border) !important; }
.dark .tox.tox-tinymce { border-color: var(--border) !important; }
/* ── Search Clear Button ── */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 16px;
height: 16px;
cursor: pointer;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
opacity: 0.6;
transition: opacity 0.15s;
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
.dark input[type="search"]::-webkit-search-cancel-button {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}