/*
 * =====================================================================
 * GLATTT DESIGN SYSTEM — Zentrales Stylesheet (18.708 Zeilen)
 * =====================================================================
 *
 * Konsolidiertes CSS für das gesamte GLATTT Hub.
 * Alle Styles, Variablen und Komponenten in einer Datei.
 *
 * ─────────────────────────────────────────────────────────────────────
 * INHALTSVERZEICHNIS
 * ─────────────────────────────────────────────────────────────────────
 *
 *  1. DESIGN TOKENS & VARIABLEN ............................. L  118
 *     :root (Farben, Fonts, Schatten, Glasmorphism)
 *     .dark (Dark-Mode-Overrides)
 *
 *  2. GLOBALE STYLES ........................................ L  580
 *     Scrollbar, Typografie, Focus-States,
 *     Status-Indikatoren, Animationen
 *
 *  3. BUTTON SYSTEM ......................................... L  665
 *     Primary, Secondary, Danger, Ghost, Icon,
 *     Text, Sizes, Groups
 *
 *  4. CARDS ................................................. L 1054
 *     Base, Collapsible, Compact, Interactive,
 *     Gradient Header, Glass, Status Variants
 *
 *  5. BADGES & PILLS ........................................ L 1315
 *     Subtle, Icon, Pulse, Pill, Size Variants
 *
 *  6. FORMS ................................................. L 1797
 *     Inputs, Textarea, Select, Dropdown, Checkbox, Radio,
 *     Toggle, Segmented Control, File Upload, Color Picker,
 *     Range Slider, Form Actions, Sections, Search
 *
 *  7. TABLES ................................................ L 3338
 *     Container, Head, Body, Sizes, Cell Types, Row States,
 *     Footer, Utilities, Responsive
 *
 *  8. PAGINATION ............................................ L 3645
 *
 *  9. MODALS ................................................ L 3681
 *     Backdrop, Container, Sizes, Header (mit Actions),
 *     Variants, Body, Sections, Footer, States,
 *     Confirmation, Responsive, Alpine x-cloak
 *
 * 10. ALERTS & NOTIFICATIONS ................................ L 4204
 *     Toast (Varianten), Inline Alerts
 *
 * 11. STATS & DATA CARDS .................................... L 4790
 *     Base, Featured, Mini KPI, Comparison Badges,
 *     Charts/Histogramme
 *
 * 12. MISC KOMPONENTEN ...................................... L 5483
 *     Loading Spinners ............................ L 5487
 *     Skeleton Loaders ............................ L 5588
 *     Progress Bars ............................... L 5670
 *     Countdown Bar ............................... L 5786
 *     Tooltips .................................... L 5865
 *     Empty States ................................ L 5905
 *     Avatars ..................................... L 5946
 *     Tabs ........................................ L 6088
 *     Tabs Sidebar ................................ L 6151
 *
 * 13. KALENDER .............................................. L 6289
 *     Calendar Grid, Holidays, Utilization, Weekly Summary,
 *     View Toggle, Day Content Variants
 *
 * 14. DATENVISUALISIERUNG ................................... L 7324
 *     Heatmap Table, Inline Sparkline
 *
 * 15. ICON SYSTEM ........................................... L 7608
 *     Chart/Graph, Action, Navigation, Status Icons
 *
 * 16. MOBILE ................................................ L 8063
 *     Topbar Mobile, Bottom Navigation
 *
 * 17. LIVEWIRE NAVIGATION ................................... L 8342
 *     Progress Bar, Loading States
 *
 * 18. APPOINTMENT CARDS ..................................... L 8420
 *     Terminübersicht, Day Schedule
 *
 * 19. START/DASHBOARD PAGE .................................. L 9221
 *     Greeting, Card Grid, News, Quicklinks,
 *     Mitteilungen, KPI Config, Charts, Loading
 *
 * 20. PROFILE PAGE .......................................... L10203
 *
 * 21. INSTITUTE ............................................. L10323
 *     Overview, Detail, NiSV, Laser Tab, Staff Grid,
 *     Image Section, Map
 *
 * 22. FEATURE-MODULES ....................................... L10884
 *     Treatment Settings .......................... L10884
 *     KPI Dashboard ............................... L11808
 *     NiSV Timeline ............................... L12195
 *     User Detail ................................. L12527
 *     Contract Prices ............................. L12603
 *     Form Fill ................................... L12876
 *     Form Editor ................................. L13475
 *     Signature Pad ............................... L13967
 *     Body Zone Selector .......................... L14023
 *
 * 23. APPOINTMENT SESSION & VIEW ............................ L14339
 *     Appointment Session ......................... L14339
 *     Appointment View ............................ L14574
 *     Storage Modal ............................... L14958
 *     Maintenance History Modal ................... L15032
 *     Add Component Modal ......................... L15097
 *     Component Info Modal ........................ L15309
 *
 * 24. NAVIGATION (aus nav.css) .............................. L15545
 *     Layout Spacing .............................. L15549
 *     iOS PWA Safe Area ........................... L15569
 *     Sidebar - Main Navigation ................... L15582
 *     Sidebar Header & Branding ................... L16025
 *     Sidebar Navigation Sections ................. L16151
 *     Menu Items .................................. L16172
 *     Submenu ..................................... L16295
 *     Compact Mode ................................ L16372
 *     Mobile Optimizations ........................ L16416
 *     Topbar (Mobile Only) ........................ L16476
 *     Sidebar Glass Morphism ...................... L16580
 *     Sidebar Controls ............................ L16600
 *     Sidebar Panel Swap .......................... L16779
 *     Notification Detail View .................... L17146
 *     Sidebar Inner Structure ..................... L17317
 *     New Sidebar Header .......................... L17412
 *     Sidebar Action Buttons ...................... L17604
 *     Branch Selection Panel ...................... L17682
 *     Bottom Controls ............................. L17918
 *     View Transitions ............................ L18052
 *     Fullscreen Appointment Modal ................ L18199
 *
 * 25. HUB/DASHBOARD (aus hub.css) ........................... L18329
 *     Layout, Navigation, Background
 *
 * ─────────────────────────────────────────────────────────────────────
 */

/* ============================================
   BRAND FONTS
   ============================================ */
@font-face {
    font-family: 'Dosis';
    src: url('../fonts/Dosis-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 800;
    font-display: swap;
}

:root {
    /* ===== FONT FAMILIES ===== */
    --font-primary: 'Dosis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Dosis', sans-serif;
    --font-body: 'Dosis', sans-serif;
    --font-mono: 'Courier New', Consolas, Monaco, monospace;
    
    /* ===== PRIMARY COLORS (Teal Blue - Triadisch) ===== */
    --color-primary: #3b9b9f;
    --color-primary-dark: #2d7a7d;
    --color-primary-light: #5dbec2;
    --gradient-primary: linear-gradient(135deg, #3b9b9f 0%, #5dbec2 100%);
    
    /* ===== SECONDARY COLORS (Warm Coral - Analogisch) ===== */
    --color-secondary: #e67e5c;
    --color-secondary-dark: #d4633e;
    --color-secondary-light: #f09a7a;
    --gradient-secondary: linear-gradient(135deg, #e67e5c 0%, #f09a7a 100%);
    
    /* ===== GLATTT BRAND COLORS ===== */
    --glattt-gold: #d2aa39;
    --glattt-gold-light: #e0c266;
    --glattt-gold-dark: #b88f1f;
    --gradient-glattt-gold: linear-gradient(135deg, #d2aa39 0%, #e0c266 100%);
    
    --glattt-turquoise: #5dbea3;
    --glattt-turquoise-light: #7dd4bb;
    --glattt-turquoise-dark: #3d9a81;
    --gradient-glattt-turquoise: linear-gradient(135deg, #5dbea3 0%, #7dd4bb 100%);
    
    --glattt-gray: #8a8a8a;
    --glattt-gray-light: #a8a8a8;
    --glattt-gray-dark: #6c6c6c;
    --gradient-glattt-gray: linear-gradient(135deg, #8a8a8a 0%, #a8a8a8 100%);
    
    /* ===== BACKGROUNDS ===== */
    --bg-primary: #ffffff;
    --bg-primary-transparent: rgba(255, 255, 255, 0.92);
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-hover: #f3f4f6;
    --bg-active: #e5e7eb;
    
    /* ===== TEXT COLORS ===== */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-inverse: #ffffff;
    
    /* ===== BORDERS ===== */
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;
    --border-tertiary: #9ca3af;
    
    /* ===== STATUS COLORS ===== */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-success-dark: #059669;
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-warning-dark: #d97706;
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    
    --color-danger: #ef4444;
    --color-danger-light: #fee2e2;
    --color-danger-dark: #dc2626;
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    --color-info-dark: #2563eb;
    --gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

    --color-neutral: #d6dde7;
    --color-neutral-light: #ebeff5;
    --color-neutral-dark: #c5cbd6;
    --gradient-neutral: linear-gradient(135deg, #d6dde7 0%, #c5cbd6 100%);
    
    /* RGB Values for rgba() usage */
    --color-primary-rgb: 59, 155, 159;
    --color-secondary-rgb: 230, 126, 92;
    --color-success-rgb: 16, 185, 129;
    --color-warning-rgb: 245, 158, 11;
    --color-danger-rgb: 239, 68, 68;
    --color-info-rgb: 59, 130, 246;
    
    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Shadow Colors - Für farbige Schatten */
    --shadow-primary-sm: 0 4px 6px -1px rgba(59, 155, 159, 0.3), 0 2px 4px -1px rgba(59, 155, 159, 0.2);
    --shadow-primary-md: 0 10px 15px -3px rgba(59, 155, 159, 0.4), 0 4px 6px -2px rgba(59, 155, 159, 0.3);
    --shadow-primary-lg: 0 2px 4px -1px rgba(59, 155, 159, 0.3);
    --shadow-secondary-md: 0 6px 12px -2px rgba(230, 126, 92, 0.3);
    --shadow-danger-sm: 0 4px 6px -1px rgba(239, 68, 68, 0.3), 0 2px 4px -1px rgba(239, 68, 68, 0.2);
    --shadow-danger-md: 0 10px 15px -3px rgba(239, 68, 68, 0.4), 0 4px 6px -2px rgba(239, 68, 68, 0.3);
    --shadow-danger-lg: 0 2px 4px -1px rgba(239, 68, 68, 0.3);
    
    /* ===== GLASS MORPHISM ===== */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-hover: rgba(255, 255, 255, 0.25);
    --glass-active: rgba(255, 255, 255, 0.3);
    --glass-active-border: rgba(255, 255, 255, 0.5);
    
    /* Glass Morphism für Cards (Light Mode) */
    --card-glass-bg: rgba(255, 255, 255, 0.7);
    --card-glass-border: rgba(255, 255, 255, 0.3);
    --card-glass-hover-bg: rgba(255, 255, 255, 0.85);
    
    /* Nested Card - Dunklere Variante für Cards in Cards */
    --card-nested-bg: rgba(248, 250, 252, 0.8); /* Leicht grauer */
    --card-nested-border: rgba(226, 232, 240, 0.5);
    --card-nested-hover-bg: rgba(241, 245, 249, 0.9);
    
    /* Status Cards - Success (Light Mode) */
    --card-success-bg: rgba(236, 253, 245, 0.8); /* Green 50 mit Transparenz */
    --card-success-border: rgba(167, 243, 208, 0.6); /* Green 300 */
    --card-success-hover-bg: rgba(209, 250, 229, 0.9); /* Green 100 */
    
    /* Status Cards - Warning (Light Mode) */
    --card-warning-bg: rgba(254, 252, 232, 0.8); /* Yellow 50 mit Transparenz */
    --card-warning-border: rgba(253, 224, 71, 0.6); /* Yellow 300 */
    --card-warning-hover-bg: rgba(254, 249, 195, 0.9); /* Yellow 100 */
    
    /* Status Cards - Danger (Light Mode) */
    --card-danger-bg: rgba(254, 242, 242, 0.8); /* Red 50 mit Transparenz */
    --card-danger-border: rgba(252, 165, 165, 0.6); /* Red 300 */
    --card-danger-hover-bg: rgba(254, 226, 226, 0.9); /* Red 100 */
    
    /* ===== LOADING SKELETON ===== */
    --skeleton-light: #f0f0f0;
    --skeleton-dark: #e0e0e0;
    
    /* ===== FOCUS RINGS ===== */
    --focus-ring-color: var(--glattt-gold);
    --focus-ring-light: rgba(210, 170, 57, 0.1);
    
    /* ===== WHITE ===== */
    --color-white: #ffffff;
    
    /* ===== OVERLAY ===== */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    
    /* ===== EXTRA STATUS COLORS ===== */
    --color-orange: #f97316;
    --color-orange-light: #fed7aa;
    --color-orange-dark: #9a3412;
    
    --color-purple: #7c3aed;
    --color-purple-light: #ede9fe;
    --color-purple-dark: #6d28d9;
    
    /* ===== DASHBOARD BACKGROUND GRADIENTS ===== */
    --dashboard-gradient-1-start: rgba(188, 238, 226, 0.24);
    --dashboard-gradient-1-end: rgba(188, 238, 226, 0);
    --dashboard-gradient-2-start: rgba(210, 170, 57, 0.14);
    --dashboard-gradient-2-end: rgba(210, 170, 57, 0);
    --dashboard-bg-start: #f8fafc;
    --dashboard-bg-mid: #f1f5f9;
    --dashboard-bg-end: #f8fafc;
    --dashboard-text-color: #1f2937;
    
    /* Dashboard Blob Gradients */
    --dashboard-blob-1-start: rgba(210, 170, 57, 0.45);
    --dashboard-blob-1-end: rgba(210, 170, 57, 0);
    --dashboard-blob-2-start: rgba(188, 238, 226, 0.5);
    --dashboard-blob-2-end: rgba(188, 238, 226, 0);
    
    /* ===== SIDEBAR GRADIENTS ===== */
    --sidebar-bg-start: rgba(51, 65, 85, 0.95);
    --sidebar-bg-mid: rgba(51, 65, 85, 0.97);
    --sidebar-bg-end: rgba(51, 65, 85, 0.98);
    --sidebar-shadow: rgba(0, 0, 0, 0.1);
    --sidebar-border: rgba(71, 85, 105, 0.4);
    --sidebar-panel-bg: rgba(30, 41, 59, 0.8);
    --sidebar-panel-border: rgba(71, 85, 105, 0.5);
    --sidebar-panel-shadow: rgba(0, 0, 0, 0.6);
    --sidebar-logo-start: rgba(210, 170, 57, 0.1);
    --sidebar-logo-end: rgba(20, 184, 166, 0.08);
    
    /* ===== MENU PILLS ===== */
    --menu-pill-hover-bg: var(--bg-hover);
    --menu-pill-hover-shadow: rgba(255, 255, 255, 0.05);
    --menu-pill-active-start: rgba(20, 184, 166, 0.15);
    --menu-pill-active-end: rgba(210, 170, 57, 0.12);
    --menu-icon-bubble-bg: var(--bg-tertiary);
    --menu-icon-bubble-border: var(--border-primary);
    --menu-icon-active-bg: rgba(20, 184, 166, 0.15);
    --menu-icon-active-border: rgba(20, 184, 166, 0.3);
    
    /* ===== TOPBAR ===== */
    --topbar-bg: var(--bg-primary);
    --topbar-border: var(--border-primary);
    
    /* ===== DASHBOARD CARDS ===== */
    --card-bg: var(--bg-secondary);
    --card-border: var(--border-primary);
    --card-shadow: var(--shadow-md);
    
    /* ===== MAINTENANCE STALE COLORS ===== */
    --maintenance-stale-border: rgba(245, 158, 11, 0.35);
    --maintenance-stale-bg: rgba(245, 158, 11, 0.12);
    --maintenance-stale-pill-bg: rgba(245, 158, 11, 0.15);
    --maintenance-stale-pill-text: #b45309;
    
    /* ===== BUTTON HOVER DARK ===== */
    --btn-hover-dark: #a67c1f;
    
    /* ===== INSTITUTE LOCATION GRADIENTS ===== */
    --gradient-bielefeld: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-bremen: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-hannover: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-osnabrueck: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-braunschweig: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-glattt: linear-gradient(135deg, #d2aa39 0%, #5dbea3 100%);
    
    /* ===== ALTERNATIVE PRIMARY GRADIENTS ===== */
    --gradient-primary-teal: linear-gradient(135deg, #3b9b9f 0%, #5dbec2 100%);
    --gradient-primary-coral: linear-gradient(135deg, #e67e5c 0%, #f09a7a 100%);
    --gradient-primary-purple: linear-gradient(135deg, #7c5ba2 0%, #9a7bb8 100%);
    
    /* ===== STATS CARD GRADIENTS ===== */
    --gradient-stats-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-stats-cyan: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-stats-teal: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --gradient-stats-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    
    /* ===== COMPONENT GRADIENTS ===== */
    --gradient-component-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* ===== INSTITUTE DETAIL GRADIENTS ===== */
    --gradient-institute-header: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    --gradient-institute-placeholder: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
    --gradient-institute-placeholder-border: rgba(99, 102, 241, 0.2);
    
    /* ===== BADGE GRADIENTS ===== */
    --badge-success-gradient: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    --badge-warning-gradient: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --badge-orange-gradient: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    --badge-danger-gradient: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    --badge-neutral-gradient: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    
    /* ===== OVERLAY GRADIENTS ===== */
    --overlay-gradient-dark: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.6) 100%);
    --text-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.3);
    --pattern-overlay: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.4) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.3) 0%, transparent 50%);
    
    /* ===== TRANSPARENT COLORS ===== */
    --color-transparent: transparent;
    
    /* ===== LOGIN PAGE SPECIFIC ===== */
    --login-bg-gradient: linear-gradient(135deg, #fef9e7 0%, #e8f8f5 50%, #ebf5fb 100%);
    --login-logo-gradient: linear-gradient(135deg, #6ee7b7 0%, #d2aa39 100%);
}

/* ===== DARK MODE ===== */
.dark {
    /* Backgrounds */
    --bg-primary: #111827;
    --bg-primary-transparent: rgba(17, 24, 39, 0.92);
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-hover: #374151;
    --bg-active: #4b5563;
    
    /* Text */
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-inverse: #111827;
    
    /* Borders */
    --border-primary: #374151;
    --border-secondary: #4b5563;
    --border-tertiary: #6b7280;
    
    /* Glass Morphism */
    --glass-bg: rgba(17, 24, 39, 0.8);
    --glass-border: rgba(75, 85, 99, 0.5);
    --glass-hover: rgba(31, 41, 55, 0.9);
    --glass-active: rgba(55, 65, 81, 0.95);
    --glass-active-border: rgba(107, 114, 128, 0.8);
    
    /* Glass Morphism für Cards (Dark Mode) */
    --card-glass-bg: rgba(17, 24, 39, 0.6);
    --card-glass-border: rgba(75, 85, 99, 0.4);
    --card-glass-hover-bg: rgba(31, 41, 55, 0.75);
    
    /* Nested Card - Hellere Variante für Cards in Cards (Dark Mode) */
    --card-nested-bg: rgba(31, 41, 55, 0.7); /* Etwas heller als Standard */
    --card-nested-border: rgba(55, 65, 81, 0.6);
    --card-nested-hover-bg: rgba(55, 65, 81, 0.85);
    
    /* Status Cards - Success (Dark Mode) */
    --card-success-bg: rgba(6, 78, 59, 0.6); /* Green 900 mit höherer Opazität */
    --card-success-border: rgba(52, 211, 153, 0.6); /* Green 400 */
    --card-success-hover-bg: rgba(6, 95, 70, 0.8); /* Green 800 */
    
    /* Status Cards - Warning (Dark Mode) */
    --card-warning-bg: rgba(120, 53, 15, 0.6); /* Yellow 900 mit höherer Opazität */
    --card-warning-border: rgba(251, 191, 36, 0.6); /* Yellow 400 */
    --card-warning-hover-bg: rgba(146, 64, 14, 0.8); /* Yellow 800 */
    
    /* Status Cards - Danger (Dark Mode) */
    --card-danger-bg: rgba(127, 29, 29, 0.6); /* Red 900 mit höherer Opazität */
    --card-danger-border: rgba(248, 113, 113, 0.6); /* Red 400 */
    --card-danger-hover-bg: rgba(153, 27, 27, 0.8); /* Red 800 */
    
    /* Skeleton */
    --skeleton-light: #1f2937;
    --skeleton-dark: #374151;
    
    /* ===== OVERLAY (Dark Mode) ===== */
    --overlay-bg: rgba(0, 0, 0, 0.7);
    
    /* ===== EXTRA STATUS COLORS (Dark Mode) ===== */
    --color-orange: #fb923c;
    --color-orange-light: rgba(249, 115, 22, 0.2);
    --color-orange-dark: #fb923c;
    
    --color-purple: #a78bfa;
    --color-purple-light: rgba(124, 58, 237, 0.2);
    --color-purple-dark: #c4b5fd;
    
    /* ===== DASHBOARD BACKGROUND GRADIENTS (Dark Mode) ===== */
    --dashboard-gradient-1-start: rgba(110, 231, 183, 0.08);
    --dashboard-gradient-1-end: rgba(110, 231, 183, 0);
    --dashboard-gradient-2-start: rgba(230, 195, 102, 0.08);
    --dashboard-gradient-2-end: rgba(230, 195, 102, 0);
    --dashboard-bg-start: #1e293b;
    --dashboard-bg-mid: #0f172a;
    --dashboard-bg-end: #1e293b;
    --dashboard-text-color: #f1f5f9;
    
    /* Dashboard Blob Gradients (Dark Mode) */
    --dashboard-blob-1-start: rgba(230, 195, 102, 0.25);
    --dashboard-blob-1-end: rgba(230, 195, 102, 0);
    --dashboard-blob-2-start: rgba(110, 231, 183, 0.2);
    --dashboard-blob-2-end: rgba(110, 231, 183, 0);
    
    /* ===== SIDEBAR GRADIENTS (Dark Mode) ===== */
    --sidebar-bg-start: rgba(51, 65, 85, 0.95);
    --sidebar-bg-mid: rgba(51, 65, 85, 0.97);
    --sidebar-bg-end: rgba(51, 65, 85, 0.98);
    --sidebar-shadow: rgba(0, 0, 0, 0.6);
    --sidebar-border: rgba(71, 85, 105, 0.4);
    --sidebar-panel-bg: rgba(30, 41, 59, 0.8);
    --sidebar-panel-border: rgba(71, 85, 105, 0.5);
    --sidebar-panel-shadow: rgba(0, 0, 0, 0.6);
    --sidebar-logo-start: rgba(230, 195, 102, 0.3);
    --sidebar-logo-end: rgba(110, 231, 183, 0.2);
    
    /* ===== MENU PILLS (Dark Mode) ===== */
    --menu-pill-hover-bg: rgba(51, 65, 85, 0.6);
    --menu-pill-hover-shadow: rgba(255, 255, 255, 0.05);
    --menu-pill-active-start: rgba(110, 231, 183, 0.25);
    --menu-pill-active-end: rgba(230, 195, 102, 0.2);
    --menu-pill-active-shadow: rgba(230, 195, 102, 0.3);
    --menu-icon-bubble-bg: rgba(30, 41, 59, 0.8);
    --menu-icon-bubble-border: rgba(71, 85, 105, 0.6);
    --menu-icon-active-bg: rgba(230, 195, 102, 0.2);
    --menu-icon-active-border: rgba(230, 195, 102, 0.4);
    
    /* ===== TOPBAR (Dark Mode) ===== */
    --topbar-bg: rgba(51, 65, 85, 0.95);
    --topbar-border: rgba(71, 85, 105, 0.4);
    
    /* ===== DASHBOARD CARDS (Dark Mode) ===== */
    --card-bg: rgba(51, 65, 85, 0.6);
    --card-border: rgba(71, 85, 105, 0.5);
    --card-hover-bg: rgba(51, 65, 85, 0.75);
    --card-hover-border: rgba(71, 85, 105, 0.7);
    --card-hover-shadow: rgba(0, 0, 0, 0.3);
    
    /* ===== STATE BACKGROUNDS (Dark Mode) ===== */
    --error-bg: rgba(127, 29, 29, 0.3);
    --success-bg: rgba(6, 78, 59, 0.3);
    --warning-bg: rgba(120, 53, 15, 0.3);
    
    /* ===== MAINTENANCE STALE COLORS (Dark Mode) ===== */
    --maintenance-stale-border: rgba(251, 191, 36, 0.4);
    --maintenance-stale-bg: rgba(251, 191, 36, 0.15);
    --maintenance-stale-pill-bg: rgba(251, 191, 36, 0.2);
    --maintenance-stale-pill-text: #facc15;
    
    /* ===== WHITE (Dark Mode) ===== */
    --color-white: #ffffff;
    
    /* ===== INSTITUTE LOCATION GRADIENTS (Same in Dark Mode) ===== */
    --gradient-bielefeld: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-bremen: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-hannover: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-osnabrueck: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-braunschweig: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    
    /* ===== COMPONENT GRADIENTS (Same in Dark Mode) ===== */
    --gradient-component-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* ===== BADGE GRADIENTS (Dark Mode) ===== */
    --badge-success-gradient: linear-gradient(135deg, rgba(6, 95, 70, 0.3) 0%, rgba(6, 95, 70, 0.4) 100%);
    --badge-warning-gradient: linear-gradient(135deg, rgba(146, 64, 14, 0.3) 0%, rgba(146, 64, 14, 0.4) 100%);
    --badge-orange-gradient: linear-gradient(135deg, rgba(249, 115, 22, 0.3) 0%, rgba(249, 115, 22, 0.4) 100%);
    --badge-danger-gradient: linear-gradient(135deg, rgba(153, 27, 27, 0.3) 0%, rgba(153, 27, 27, 0.4) 100%);
    --badge-neutral-gradient: linear-gradient(135deg, rgba(75, 85, 99, 0.3) 0%, rgba(75, 85, 99, 0.4) 100%);
    
    /* ===== OVERLAY GRADIENTS (Same in Dark Mode) ===== */
    --overlay-gradient-dark: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.6) 100%);
    --text-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.3);
    --pattern-overlay: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.4) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.3) 0%, transparent 50%);
    
    /* ===== LOGIN PAGE SPECIFIC (Dark Mode) ===== */
    --login-bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    --login-logo-gradient: linear-gradient(135deg, #6ee7b7 0%, #d2aa39 100%);
}

/*
 * ===================================================
 * DESIGN DECISIONS DOKUMENTATION
 * ===================================================
 * 
 * PRIMARY COLOR (Teal Blue #3b9b9f):
 * - Triadische Farbharmonie zum GLATTT Gold
 * - Harmoniert perfekt mit Turquoise
 * - Vermittelt: Professionalität, Vertrauen, Ruhe
 * - Use Case: Hauptaktionen, Links, wichtige UI-Elemente
 * 
 * SECONDARY COLOR (Warm Coral #e67e5c):
 * - Analogisch zum GLATTT Gold
 * - Warmer Akzent für Betonung
 * - Vermittelt: Freundlichkeit, Energie, Modernität
 * - Use Case: Sekundäre Aktionen, Highlights, Call-to-Actions
 * 
 * BRAND COLORS:
 * - Gold: Premium-Charakter, Qualität
 * - Turquoise: Modern, frisch, innovativ
 * - Gray: Neutral, professionell
 * 
 * STATUS COLORS:
 * - Übernommen aus bewährtem System
 * - Success (Grün): Positive Aktionen, Erfolg
 * - Warning (Orange): Achtung, bald fällig
 * - Danger (Rot): Fehler, kritische Zustände
 * - Info (Blau): Informationen, Hinweise
 */

/*
 * ===================================================
 * GLOBAL STYLES (aus theme.css migriert)
 * ===================================================
 */

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-tertiary);
}

.dark ::-webkit-scrollbar-track {
    background-color: var(--bg-primary);
}

.dark ::-webkit-scrollbar-thumb {
    background-color: var(--border-secondary);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-tertiary);
}

/* === GLOBAL TYPOGRAPHY === */
body, 
.font-sans,
* {
    font-family: var(--font-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary);
}


/* === FORM FOCUS STATES === */
select:focus, 
input:focus, 
button:focus {
    border-color: var(--glattt-gold) !important;
    box-shadow: 0 0 0 3px var(--focus-ring-light) !important;
}

.dark select:focus,
.dark input:focus,
.dark button:focus {
    box-shadow: 0 0 0 3px var(--focus-ring-light) !important;
}


/* === STATUS INDICATORS === */
.status-indicator {
    animation: pulse 2s infinite;
}

.status-connected {
    background-color: var(--glattt-turquoise-dark);
}

.status-error {
    background-color: var(--color-danger);
}

.status-warning {
    background-color: var(--glattt-gold);
}


/*
 * ===================================================
 * BUTTON SYSTEM - GLATTT Design
 * ===================================================
 */

/* PRIMARY BUTTON - Call-to-Action mit Gradient */
.btn-glattt-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: var(--gradient-primary);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-primary-sm);
    overflow: hidden;
}

.btn-glattt-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-glattt-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-md);
}

.btn-glattt-primary:hover::before {
    left: 100%;
}

.btn-glattt-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-primary-lg);
}

.btn-glattt-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* SECONDARY BUTTON - Weniger auffällig */
.btn-glattt-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    background: white;
    border: 1.5px solid var(--color-primary);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.btn-glattt-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--gradient-primary);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-glattt-secondary:hover::before {
    width: 100%;
}

.btn-glattt-secondary:hover {
    color: white !important;
    border-color: var(--color-primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-secondary-md);
}

.btn-glattt-secondary > *,
.btn-glattt-secondary svg,
.btn-glattt-secondary span {
    position: relative;
    z-index: 1;
}

.btn-glattt-secondary:active {
    transform: translateY(0);
}

.btn-glattt-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.dark .btn-glattt-secondary {
    background: transparent;
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

/* TERTIARY BUTTON - Sehr dezent, minimalistisch */
.btn-glattt-tertiary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-secondary);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-glattt-tertiary:hover {
    color: var(--color-primary);
    background: var(--bg-hover);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.btn-glattt-tertiary:active {
    transform: translateY(0);
    background: var(--bg-active);
}

.btn-glattt-tertiary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.dark .btn-glattt-tertiary {
    color: var(--text-secondary);
    border-color: var(--border-secondary);
}

.dark .btn-glattt-tertiary:hover {
    color: var(--color-primary-light);
    background: var(--bg-hover);
    border-color: var(--color-primary-light);
}

/* BUTTON SIZES */
.btn-glattt-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
    border-radius: 0.375rem;
}

.btn-glattt-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
    gap: 0.625rem;
    border-radius: 0.625rem;
}

/* LOADING BUTTON - Mit Spinner */
.btn-glattt-primary.loading,
.btn-glattt-secondary.loading,
.btn-glattt-tertiary.loading {
    pointer-events: none;
    position: relative;
}

.btn-glattt-primary.loading::after,
.btn-glattt-secondary.loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn-glattt-tertiary.loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(59, 155, 159, 0.3);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.dark .btn-glattt-secondary.loading::after {
    border-color: rgba(93, 190, 194, 0.3);
    border-top-color: var(--color-primary-light);
}

.dark .btn-glattt-tertiary.loading::after {
    border-color: rgba(93, 190, 194, 0.3);
    border-top-color: var(--color-primary-light);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-out-right {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

.animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out;
}

/* DANGER BUTTON - Für kritische Aktionen */
.btn-glattt-danger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-danger-sm);
}

.btn-glattt-danger:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-danger-md);
}

.btn-glattt-danger:active {
    transform: translateY(0);
    box-shadow: var(--shadow-danger-lg);
}

.btn-glattt-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ICON BUTTON - Runde Icon-Only Buttons */
.btn-glattt-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 2.5rem; /* 40px - Medium */
    height: 2.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-glattt-icon:hover {
    color: var(--color-primary);
    background: var(--bg-hover);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-glattt-icon:active {
    transform: translateY(0);
    background: var(--bg-active);
}

.btn-glattt-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Icon Button Größen-Varianten */
.btn-glattt-icon-sm {
    width: 2rem; /* 32px */
    height: 2rem;
    font-size: 0.875rem;
}

.btn-glattt-icon-lg {
    width: 3rem; /* 48px */
    height: 3rem;
    font-size: 1.25rem;
}

/* Icon Button mit Primary Color */
.btn-glattt-icon-primary {
    color: white;
    background: var(--gradient-primary);
    border: none;
}

.btn-glattt-icon-primary:hover {
    color: white;
    background: var(--gradient-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-sm);
}

/* Loading State für Icon Button */
.btn-glattt-icon.loading {
    pointer-events: none;
}

.btn-glattt-icon.loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(59, 155, 159, 0.3);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn-glattt-icon-primary.loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

.dark .btn-glattt-icon.loading::after {
    border-color: rgba(93, 190, 194, 0.3);
    border-top-color: var(--color-primary-light);
}

.dark .btn-glattt-icon {
    background: var(--bg-primary);
    border-color: var(--border-secondary);
}

.dark .btn-glattt-icon:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary-light);
}

/* ========================================
   CARDS
   ======================================== */

/* GLATTT Card - Standard Card mit Glass-Morphism */
.card-glattt {
    position: relative;
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    
    /* Glass-Morphism Effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.card-glattt:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
    background: var(--card-glass-hover-bg);
}

/* Card Header */
.card-glattt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    /* Border entfernt - wird nur angezeigt wenn Content folgt */
}

/* Border nur wenn Body oder Footer folgt */
.card-glattt-header:has(+ .card-glattt-body),
.card-glattt-header:has(+ .card-glattt-footer) {
    border-bottom: 1px solid var(--border-secondary);
}

/* Bei Collapsible Cards: Border nur im expanded state */
.card-glattt-collapsible.expanded .card-glattt-header {
    border-bottom: 1px solid var(--border-secondary);
    margin-bottom: 0;
}

/* Collapsible ohne Expansion: keine Border */
.card-glattt-collapsible:not(.expanded) .card-glattt-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.card-glattt-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.card-glattt-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0 0;
}

/* Card Body */
.card-glattt-body {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Card Footer */
.card-glattt-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-secondary);
}

/* Card Variants */

/* Collapsible Card - Aufklappbare Card */
.card-glattt-collapsible {
    overflow: hidden;
}

.card-glattt-collapsible .card-glattt-header {
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.card-glattt-collapsible .card-glattt-header:hover {
    color: var(--color-primary);
}

.card-glattt-collapsible-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--bg-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-glattt-collapsible-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-secondary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-glattt-collapsible.expanded .card-glattt-collapsible-toggle {
    background: var(--color-primary);
}

.card-glattt-collapsible.expanded .card-glattt-collapsible-toggle svg {
    color: white;
    transform: rotate(180deg);
}

.card-glattt-collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.card-glattt-collapsible-content > * {
    min-height: 0;
}

.card-glattt-collapsible.expanded .card-glattt-collapsible-content {
    grid-template-rows: 1fr;
}

.card-glattt-collapsible-preview {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Interactive Card (clickable) */
.card-glattt-interactive {
    cursor: pointer;
}

.card-glattt-interactive:active {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Compact Card (weniger Padding) */
.card-glattt-compact {
    padding: 1rem;
}

.card-glattt-compact-small {
    padding: 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.card-glattt-compact .card-glattt-header {
    margin-bottom: 0.75rem;
}

.card-glattt-compact .card-glattt-footer {
    margin-top: 1rem;
}

/* Nested Card - Für Cards innerhalb von Cards */
.card-glattt-nested {
    background: var(--card-nested-bg);
    border-color: var(--card-nested-border);
}

.card-glattt-nested:hover {
    background: var(--card-nested-hover-bg);
}

/* Status Cards - Success */
.card-glattt-success {
    background: var(--card-success-bg);
    border-color: var(--card-success-border);
}

.card-glattt-success:hover {
    background: var(--card-success-hover-bg);
    border-color: var(--color-success);
}

/* Status Cards - Warning */
.card-glattt-warning {
    background: var(--card-warning-bg);
    border-color: var(--card-warning-border);
}

.card-glattt-warning:hover {
    background: var(--card-warning-hover-bg);
    border-color: var(--color-warning);
}

/* Status Cards - Danger */
.card-glattt-danger {
    background: var(--card-danger-bg);
    border-color: var(--card-danger-border);
}

.card-glattt-danger:hover {
    background: var(--card-danger-hover-bg);
    border-color: var(--color-danger);
}

/* No Hover - Deaktiviert Hover-Effekte für alle Card-Varianten */
.card-glattt-no-hover:hover,
.card-glattt-no-hover.card-glattt-interactive:hover,
.card-glattt-no-hover.card-glattt-success:hover,
.card-glattt-no-hover.card-glattt-warning:hover,
.card-glattt-no-hover.card-glattt-danger:hover,
.card-glattt-no-hover.card-glattt-nested:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    background: var(--card-glass-bg);
    border-color: var(--card-glass-border);
}

/* Spezifische Overrides für Status Cards ohne Hover */
.card-glattt-success.card-glattt-no-hover:hover {
    background: var(--card-success-bg);
    border-color: var(--card-success-border);
}

.card-glattt-warning.card-glattt-no-hover:hover {
    background: var(--card-warning-bg);
    border-color: var(--card-warning-border);
}

.card-glattt-danger.card-glattt-no-hover:hover {
    background: var(--card-danger-bg);
    border-color: var(--card-danger-border);
}

.card-glattt-nested.card-glattt-no-hover:hover {
    background: var(--card-nested-bg);
    border-color: var(--card-nested-border);
}

/* Cursor bei no-hover Cards */
.card-glattt-interactive.card-glattt-no-hover {
    cursor: default;
}
/* ========================================
   BADGES & PILLS
   ======================================== */

/* 
 * BADGE SYSTEM - GLATTT Design
 * 
 * Zwei Varianten:
 * 1. Subtle Badge - Dezent, minimalistisch mit Glass-Morphism
 * 2. Icon Badge - Auffälliger mit Icon/Emoji-Support
 * 
 * Beide unterstützen alle Farbvarianten modular
 */

/* ===== SUBTLE BADGES ===== */

.badge-glattt {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    
    /* Glass-Morphism Base */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
}

/* Badge Hover Effect (optional) */
.badge-glattt-hover:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Badge Dot - Kleiner Status-Indikator */
.badge-glattt-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Subtle Badge - Primary */
.badge-glattt-primary {
    background: var(--bg-secondary);
    color: var(--color-primary-dark);
    border: 1px solid var(--color-primary);
}

.badge-glattt-primary .badge-glattt-dot {
    background: var(--gradient-primary);
}

.dark .badge-glattt-primary {
    background: var(--bg-tertiary);
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

/* Subtle Badge - Secondary */
.badge-glattt-secondary {
    background: var(--bg-secondary);
    color: var(--color-secondary-dark);
    border: 1px solid var(--color-secondary);
}

.badge-glattt-secondary .badge-glattt-dot {
    background: var(--gradient-secondary);
}

.dark .badge-glattt-secondary {
    background: var(--bg-tertiary);
    color: var(--color-secondary-light);
    border-color: var(--color-secondary-light);
}

/* Subtle Badge - Success */
.badge-glattt-success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border: 1px solid var(--color-success);
}

.badge-glattt-success .badge-glattt-dot {
    background: var(--gradient-success);
}

.dark .badge-glattt-success {
    background: var(--color-success-dark);
    color: var(--color-success-light);
    border-color: var(--color-success);
}

/* Subtle Badge - Warning */
.badge-glattt-warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
    border: 1px solid var(--color-warning);
}

.badge-glattt-warning .badge-glattt-dot {
    background: var(--gradient-warning);
}

.dark .badge-glattt-warning {
    background: var(--color-warning-dark);
    color: var(--color-warning-light);
    border-color: var(--color-warning);
}

/* Subtle Badge - Danger */
.badge-glattt-danger {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
    border: 1px solid var(--color-danger);
}

.badge-glattt-danger .badge-glattt-dot {
    background: var(--gradient-danger);
}

.dark .badge-glattt-danger {
    background: var(--color-danger-dark);
    color: var(--color-danger-light);
    border-color: var(--color-danger);
}

/* Subtle Badge - Info */
.badge-glattt-info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
    border: 1px solid var(--color-info);
}

.badge-glattt-info .badge-glattt-dot {
    background: var(--gradient-info);
}

.dark .badge-glattt-info {
    background: var(--color-info-dark);
    color: var(--color-info-light);
    border-color: var(--color-info);
}

/* Subtle Badge - Gold */
.badge-glattt-gold {
    background: var(--bg-secondary);
    color: var(--glattt-gold-dark);
    border: 1px solid var(--glattt-gold);
}

.badge-glattt-gold .badge-glattt-dot {
    background: var(--gradient-glattt-gold);
}

.dark .badge-glattt-gold {
    background: var(--bg-tertiary);
    color: var(--glattt-gold-light);
    border-color: var(--glattt-gold-light);
}

/* Subtle Badge - Turquoise */
.badge-glattt-turquoise {
    background: var(--bg-secondary);
    color: var(--glattt-turquoise-dark);
    border: 1px solid var(--glattt-turquoise);
}

.badge-glattt-turquoise .badge-glattt-dot {
    background: var(--gradient-glattt-turquoise);
}

.dark .badge-glattt-turquoise {
    background: var(--bg-tertiary);
    color: var(--glattt-turquoise-light);
    border-color: var(--glattt-turquoise-light);
}

/* Subtle Badge - Neutral/Gray */
.badge-glattt-neutral {
    background: var(--color-neutral-light);
    color: var(--text-primary);
    border: 1px solid var(--color-neutral);
}

.badge-glattt-neutral .badge-glattt-dot {
    background: var(--gradient-neutral);
}

.dark .badge-glattt-neutral {
    background: var(--bg-tertiary);
    color: var(--glattt-gray-light);
    border-color: var(--glattt-gray);
}

/* ===== ICON BADGES - Auffälliger mit Icons ===== */

.badge-glattt-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.625rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    
    /* Glass-Morphism mit stärkerem Effekt */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
    border: 1px solid transparent;
}

/* Icon Container */
.badge-glattt-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.badge-glattt-icon-container svg {
    width: 1rem;
    height: 1rem;
}

.dark .badge-glattt-icon-container {
    background: rgba(0, 0, 0, 0.2);
}

/* Icon Badge Hover Effect */
.badge-glattt-icon-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

.badge-glattt-icon-hover:hover .badge-glattt-icon-container {
    transform: scale(1.1) rotate(5deg);
}

/* Icon Badge - Primary */
.badge-glattt-icon-primary {
    background: var(--bg-secondary);
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

.badge-glattt-icon-primary .badge-glattt-icon-container {
    background: var(--gradient-primary);
    color: white;
}

.dark .badge-glattt-icon-primary {
    background: var(--bg-tertiary);
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

/* Icon Badge - Secondary */
.badge-glattt-icon-secondary {
    background: var(--bg-secondary);
    color: var(--color-secondary-dark);
    border-color: var(--color-secondary);
}

.badge-glattt-icon-secondary .badge-glattt-icon-container {
    background: var(--gradient-secondary);
    color: white;
}

.dark .badge-glattt-icon-secondary {
    background: var(--bg-tertiary);
    color: var(--color-secondary-light);
    border-color: var(--color-secondary-light);
}

/* Icon Badge - Success */
.badge-glattt-icon-success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border-color: var(--color-success);
}

.badge-glattt-icon-success .badge-glattt-icon-container {
    background: var(--gradient-success);
    color: white;
}

.dark .badge-glattt-icon-success {
    background: var(--color-success-dark);
    color: var(--color-success-light);
    border-color: var(--color-success);
}

/* Icon Badge - Warning */
.badge-glattt-icon-warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
    border-color: var(--color-warning);
}

.badge-glattt-icon-warning .badge-glattt-icon-container {
    background: var(--gradient-warning);
    color: white;
}

.dark .badge-glattt-icon-warning {
    background: var(--color-warning-dark);
    color: var(--color-warning-light);
    border-color: var(--color-warning);
}

/* Icon Badge - Danger */
.badge-glattt-icon-danger {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
    border-color: var(--color-danger);
}

.badge-glattt-icon-danger .badge-glattt-icon-container {
    background: var(--gradient-danger);
    color: white;
}

.dark .badge-glattt-icon-danger {
    background: var(--color-danger-dark);
    color: var(--color-danger-light);
    border-color: var(--color-danger);
}

/* Icon Badge - Info */
.badge-glattt-icon-info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
    border-color: var(--color-info);
}

.badge-glattt-icon-info .badge-glattt-icon-container {
    background: var(--gradient-info);
    color: white;
}

.dark .badge-glattt-icon-info {
    background: var(--color-info-dark);
    color: var(--color-info-light);
    border-color: var(--color-info);
}

/* Icon Badge - Gold */
.badge-glattt-icon-gold {
    background: var(--bg-secondary);
    color: var(--glattt-gold-dark);
    border-color: var(--glattt-gold);
}

.badge-glattt-icon-gold .badge-glattt-icon-container {
    background: var(--gradient-glattt-gold);
    color: white;
}

.dark .badge-glattt-icon-gold {
    background: var(--bg-tertiary);
    color: var(--glattt-gold-light);
    border-color: var(--glattt-gold-light);
}

/* Icon Badge - Turquoise */
.badge-glattt-icon-turquoise {
    background: var(--bg-secondary);
    color: var(--glattt-turquoise-dark);
    border-color: var(--glattt-turquoise);
}

.badge-glattt-icon-turquoise .badge-glattt-icon-container {
    background: var(--gradient-glattt-turquoise);
    color: white;
}

.dark .badge-glattt-icon-turquoise {
    background: var(--bg-tertiary);
    color: var(--glattt-turquoise-light);
    border-color: var(--glattt-turquoise-light);
}

/* Icon Badge - Neutral */
.badge-glattt-icon-neutral {
    background: var(--color-neutral-light);
    color: var(--text-primary);
    border-color: var(--color-neutral);
}

.badge-glattt-icon-neutral .badge-glattt-icon-container {
    background: var(--gradient-neutral);
    color: var(--text-primary);
}

.dark .badge-glattt-icon-neutral {
    background: var(--bg-tertiary);
    color: var(--glattt-gray-light);
    border-color: var(--glattt-gray);
}

/* ===== PILLS - Rounded Badges ===== */

/* ===== SIZE VARIANTS ===== */

/* Small Badge */
.badge-glattt-sm,
.badge-glattt-icon-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.25rem;
}

.badge-glattt-icon-sm .badge-glattt-icon-container {
    width: 1.125rem;
    height: 1.125rem;
}

.badge-glattt-icon-sm .badge-glattt-icon-container svg {
    width: 0.75rem;
    height: 0.75rem;
}

.badge-glattt-sm .badge-glattt-dot {
    width: 0.375rem;
    height: 0.375rem;
}

/* Large Badge */
.badge-glattt-lg,
.badge-glattt-icon-lg {
    padding: 0.625rem 1rem;
    font-size: 1rem;
    gap: 0.625rem;
}

.badge-glattt-icon-lg .badge-glattt-icon-container {
    width: 1.75rem;
    height: 1.75rem;
}

.badge-glattt-icon-lg .badge-glattt-icon-container svg {
    width: 1.125rem;
    height: 1.125rem;
}

.badge-glattt-lg .badge-glattt-dot {
    width: 0.625rem;
    height: 0.625rem;
}

/* ===== PULSING ANIMATION - Für Live-Status ===== */

@keyframes badge-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.95);
    }
}

.badge-glattt-pulse .badge-glattt-dot,
.badge-glattt-icon-pulse .badge-glattt-icon-container {
    animation: badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ========================================
   FORMS - GLATTT Design System
   ======================================== */

/* 
 * FORM SYSTEM - GLATTT Design
 * 
 * Komplettes Form-System mit allen Feldtypen:
 * - Text Inputs, Textarea, Select
 * - Checkboxes, Radio Buttons, Toggle Switches
 * - File Upload, Range Slider
 * - Input Groups, Floating Labels
 * - Validation States, Disabled States
 * 
 * Alle Elemente nutzen:
 * - Glass-Morphism Effekt
 * - CSS-Variablen für Farben
 * - Smooth Transitions
 * - Focus States mit Ring
 * - Dark Mode Ready
 */

/* ===== FORM CONTAINER ===== */

.form-glattt {
    width: 100%;
}

.form-glattt-row {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-glattt-row-2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.form-glattt-row-3-cols {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .form-glattt-row-2-cols,
    .form-glattt-row-3-cols {
        grid-template-columns: 1fr;
    }
}

/* ===== FORM GROUP (Label + Input Container) ===== */

.form-glattt-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.form-glattt-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.form-glattt-value {
    font-weight: 500;
    color: var(--text-primary);
}

.form-glattt-label-required::after {
    content: '*';
    color: var(--color-danger);
    margin-left: 0.25rem;
}

.form-glattt-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}

.form-glattt-hint-inline {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 0.25rem;
}

.form-glattt-error {
    font-size: 0.75rem;
    color: var(--color-danger);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-glattt-error svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.form-glattt-success {
    font-size: 0.75rem;
    color: var(--color-success, #10b981);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ===== TEXT INPUTS ===== */

.input-glattt,
.textarea-glattt,
.select-glattt {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    font-family: var(--font-primary) !important;
    color: var(--text-primary) !important;
    background: var(--bg-primary) !important;
    border: 1.5px solid var(--border-secondary) !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Glass-Morphism */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.input-glattt::placeholder,
.textarea-glattt::placeholder {
    color: var(--text-tertiary) !important;
}

/* Focus State */
.input-glattt:focus,
.textarea-glattt:focus,
.select-glattt:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--focus-ring-light) !important;
    background-color: var(--bg-primary) !important;
}

/* Select Focus - preserve background image */
.select-glattt:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25rem 1.25rem !important;
}

.dark .select-glattt:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d1d5db'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
}

/* Hover State */
.input-glattt:hover:not(:disabled):not(:focus),
.textarea-glattt:hover:not(:disabled):not(:focus),
.select-glattt:hover:not(:disabled):not(:focus) {
    border-color: var(--border-tertiary) !important;
}

/* Disabled State */
.input-glattt:disabled,
.textarea-glattt:disabled,
.select-glattt:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: var(--bg-secondary) !important;
}

/* Locked Section - prevents interaction, visual dimming */
.form-glattt-locked {
    position: relative;
    pointer-events: none;
    opacity: 0.55;
    filter: grayscale(20%);
    transition: opacity 0.3s ease, filter 0.3s ease;
    user-select: none;
}

.form-glattt-locked .input-glattt,
.form-glattt-locked .textarea-glattt,
.form-glattt-locked .select-glattt,
.form-glattt-locked .dropdown-glattt-trigger {
    cursor: not-allowed !important;
    background: var(--bg-secondary) !important;
}

.form-glattt-locked .checkbox-glattt input,
.form-glattt-locked .radio-glattt input,
.form-glattt-locked .toggle-glattt input {
    cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════════
   STATUS SWITCHER BUTTONS
   Three-button toggle for Widerruf status (Offen / In Verhandlung / Abgeschlossen)
   ═══════════════════════════════════════════════════════════════ */
.status-switcher-glattt {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.status-switcher-glattt-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1.5px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.status-switcher-glattt-btn:hover {
    border-color: var(--text-tertiary);
    color: var(--text-secondary);
}

.status-switcher-glattt-btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Active: Offen (warning) */
.status-switcher-glattt-btn.is-active-offen {
    background: var(--color-warning-light);
    border-color: var(--color-warning);
    color: var(--color-warning-dark);
    font-weight: 600;
    cursor: default;
}

.dark .status-switcher-glattt-btn.is-active-offen {
    background: rgba(var(--color-warning-rgb), 0.15);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

/* Active: In Verhandlung (primary/teal) */
.status-switcher-glattt-btn.is-active-verhandlung {
    background: var(--bg-secondary);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    font-weight: 600;
    cursor: default;
}

.dark .status-switcher-glattt-btn.is-active-verhandlung {
    background: rgba(var(--color-primary-rgb), 0.15);
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

/* Active: Abgeschlossen (success) */
.status-switcher-glattt-btn.is-active-abgeschlossen {
    background: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success-dark);
    font-weight: 600;
    cursor: default;
}

.dark .status-switcher-glattt-btn.is-active-abgeschlossen {
    background: rgba(var(--color-success-rgb), 0.15);
    border-color: var(--color-success);
    color: var(--color-success);
}

/* Number Input - Hide native spinner buttons */
/* They don't adapt to dark mode and look inconsistent */
.input-glattt[type="number"]::-webkit-inner-spin-button,
.input-glattt[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-glattt[type="number"],
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
}

/* Textarea Specific */
.textarea-glattt {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Select Specific */
.select-glattt {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25rem 1.25rem !important;
    padding-right: 2.5rem !important;
}

/* Remove native dropdown arrow */
.select-glattt::-ms-expand {
    display: none !important;
}

.dark .select-glattt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d1d5db'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
}

/* ===== INPUT SIZES ===== */

.input-glattt-sm,
.select-glattt-sm {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
}

.input-glattt-lg,
.select-glattt-lg {
    padding: 1rem 1.25rem !important;
    font-size: 1.125rem !important;
}

/* ===== VALIDATION STATES ===== */

/* Success State */
.input-glattt-success,
.textarea-glattt-success,
.select-glattt-success {
    border-color: var(--color-success) !important;
}

.input-glattt-success:focus,
.textarea-glattt-success:focus,
.select-glattt-success:focus {
    border-color: var(--color-success) !important;
    box-shadow: 0 0 0 3px var(--color-success-light) !important;
}

/* Error State */
.input-glattt-error,
.textarea-glattt-error,
.select-glattt-error {
    border-color: var(--color-danger) !important;
}

.input-glattt-error:focus,
.textarea-glattt-error:focus,
.select-glattt-error:focus {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px var(--color-danger-light) !important;
}

/* Warning State */
.input-glattt-warning,
.textarea-glattt-warning,
.select-glattt-warning {
    border-color: var(--color-warning) !important;
}

.input-glattt-warning:focus,
.textarea-glattt-warning:focus,
.select-glattt-warning:focus {
    border-color: var(--color-warning) !important;
    box-shadow: 0 0 0 3px var(--color-warning-light) !important;
}

/* ===== CUSTOM DROPDOWN (dropdown-glattt) ===== */
/* 
 * Usage: <div class="dropdown-glattt" x-data="dropdown({ ... })">
 *   Works with floating labels via input-glattt-floating-wrapper.
 *   Replaces native <select> with a modern, themed dropdown.
 */

.dropdown-glattt {
    position: relative;
    width: 100%;
}

/* Ensure any parent card/section with an open dropdown rises above siblings */
.card-glattt:has(.dropdown-glattt-panel[data-open="true"]),
.modal-glattt-section:has(.dropdown-glattt-panel[data-open="true"]) {
    position: relative;
    z-index: 10;
}

.dropdown-glattt-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: var(--font-primary);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1.5px solid var(--border-secondary);
    border-radius: 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: left;
    min-height: 3.125rem; /* match input-glattt height */
}

.dropdown-glattt-trigger:hover {
    border-color: var(--border-tertiary);
}

.dropdown-glattt-trigger[data-open="true"] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--focus-ring-light);
}

.dropdown-glattt-trigger-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-glattt-trigger-text[data-placeholder="true"] {
    color: var(--text-tertiary);
}

.dropdown-glattt-arrow {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
}

.dropdown-glattt-trigger[data-open="true"] .dropdown-glattt-arrow {
    transform: rotate(180deg);
    color: var(--color-primary);
}

/* Dropdown Panel */
.dropdown-glattt-panel {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    margin-top: 0.375rem;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-secondary);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.dropdown-glattt-panel[data-open="true"] {
    max-height: 16rem;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    overflow-y: auto;
}

/* Panel scrollbar */
.dropdown-glattt-panel::-webkit-scrollbar {
    width: 6px;
}

.dropdown-glattt-panel::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-glattt-panel::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 3px;
}

.dropdown-glattt-panel::-webkit-scrollbar-thumb:hover {
    background: var(--border-tertiary);
}

/* Dropdown Options */
.dropdown-glattt-option {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    font-family: var(--font-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
    gap: 0.625rem;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dropdown-glattt-option:hover {
    background: var(--bg-secondary);
}

.dropdown-glattt-option[data-selected="true"] {
    background: var(--bg-primary-soft, rgba(59, 155, 159, 0.08));
    color: var(--color-primary);
    font-weight: 500;
}

.dropdown-glattt-option[data-selected="true"]:hover {
    background: var(--bg-primary-soft, rgba(59, 155, 159, 0.12));
}

/* Check icon for selected option */
.dropdown-glattt-check {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity 0.15s;
}

.dropdown-glattt-option[data-selected="true"] .dropdown-glattt-check {
    opacity: 1;
}

/* Divider between options */
.dropdown-glattt-option + .dropdown-glattt-option {
    border-top: 1px solid var(--border-primary);
}

/* Disabled option */
.dropdown-glattt-option[data-disabled="true"] {
    color: var(--text-tertiary);
    cursor: not-allowed;
    opacity: 0.5;
}

.dropdown-glattt-option[data-disabled="true"]:hover {
    background: none;
}

/* Floating label integration */
.input-glattt-floating-wrapper .dropdown-glattt {
    width: 100%;
}

.input-glattt-floating-wrapper .dropdown-glattt-trigger {
    padding: 0.75rem 1rem;
}

/* When dropdown has a value, float the label up */
.input-glattt-floating-wrapper .dropdown-glattt[data-has-value="true"] ~ .input-glattt-floating-label,
.input-glattt-floating-wrapper .dropdown-glattt[data-open="true"] ~ .input-glattt-floating-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
    z-index: 2;
}

/* Dark mode adjustments */
.dark .dropdown-glattt-panel {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
    border-color: var(--border-secondary);
}

.dark .dropdown-glattt-option:hover {
    background: var(--bg-secondary);
}

.dark .dropdown-glattt-option[data-selected="true"] {
    background: rgba(59, 155, 159, 0.12);
}

/* Size variants */
.dropdown-glattt-sm .dropdown-glattt-trigger {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    min-height: 2.375rem;
}

.dropdown-glattt-sm .dropdown-glattt-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.dropdown-glattt-lg .dropdown-glattt-trigger {
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    min-height: 3.625rem;
}

.dropdown-glattt-lg .dropdown-glattt-option {
    padding: 0.75rem 1.25rem;
    font-size: 1.0625rem;
}

/* ===== INPUT WITH ICON ===== */

.input-glattt-with-icon-wrapper {
    position: relative;
    width: 100%;
}

.input-glattt-with-icon {
    padding-left: 2.75rem !important;
}

.input-glattt-icon-left {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-tertiary);
    pointer-events: none;
    z-index: 10;
}

.input-glattt-with-icon:focus ~ .input-glattt-icon-left {
    color: var(--color-primary);
}

.input-glattt-with-icon-right {
    padding-right: 2.75rem !important;
}

.input-glattt-icon-right {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-tertiary);
    pointer-events: none;
    z-index: 10;
}

/* ===== INPUT GROUP (Button + Input) ===== */

.input-glattt-group {
    display: flex;
    width: 100%;
}

.input-glattt-group .input-glattt {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.input-glattt-group-append {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-secondary);
    border-left: none;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    white-space: nowrap;
}

.input-glattt-group:has(.input-glattt:focus) .input-glattt-group-append {
    border-color: var(--color-primary);
}

/* ===== FLOATING LABEL ===== */

.input-glattt-floating-wrapper {
    position: relative;
    width: 100%;
}

.input-glattt-floating {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

.input-glattt-floating-label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--text-tertiary);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-primary);
    padding: 0 0.25rem;
}

.input-glattt-floating:focus ~ .input-glattt-floating-label,
.input-glattt-floating:not(:placeholder-shown) ~ .input-glattt-floating-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
    z-index: 2;
}

/* Autofill-Erkennung — Browser füllt Passwort/E-Mail automatisch aus */
.input-glattt-floating:-webkit-autofill ~ .input-glattt-floating-label,
.input-glattt-floating:autofill ~ .input-glattt-floating-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
    z-index: 2;
}

/* Floating Label für Select - Label ist immer oben */
select.input-glattt-floating ~ .input-glattt-floating-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
    z-index: 2;
}

/* ===== CHECKBOX ===== */

.checkbox-glattt-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-glattt {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.checkbox-glattt input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.checkbox-glattt-box {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-secondary);
    border-radius: 0.375rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Glass-Morphism */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.checkbox-glattt-box svg {
    width: 0.875rem;
    height: 0.875rem;
    color: white;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover */
.checkbox-glattt:hover .checkbox-glattt-box {
    border-color: var(--border-tertiary);
}

/* Checked State */
.checkbox-glattt input[type="checkbox"]:checked ~ .checkbox-glattt-box {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
}

.checkbox-glattt input[type="checkbox"]:checked ~ .checkbox-glattt-box svg {
    opacity: 1;
    transform: scale(1);
}

/* Focus State */
.checkbox-glattt input[type="checkbox"]:focus ~ .checkbox-glattt-box {
    box-shadow: 0 0 0 3px var(--focus-ring-light);
}

/* Disabled State */
.checkbox-glattt input[type="checkbox"]:disabled ~ .checkbox-glattt-box {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-glattt-label {
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* Phorest Course Row */
.phorest-course-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0;
    border-radius: 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.phorest-course-row:hover {
    background: var(--bg-secondary);
}

.phorest-course-row.is-selected {
    background: var(--bg-secondary);
}

.phorest-course-row.is-archived {
    opacity: 0.5;
    cursor: default;
}

.phorest-course-row.is-archived:hover {
    background: transparent;
}

.phorest-course-row-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.phorest-course-row-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* ===== RADIO BUTTON ===== */

.radio-glattt-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.radio-glattt {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.radio-glattt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.radio-glattt-circle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-secondary);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Glass-Morphism */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.radio-glattt-circle::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    background: white;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover */
.radio-glattt:hover .radio-glattt-circle {
    border-color: var(--border-tertiary);
}

/* Checked State */
.radio-glattt input[type="radio"]:checked ~ .radio-glattt-circle {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
}

.radio-glattt input[type="radio"]:checked ~ .radio-glattt-circle::after {
    opacity: 1;
    transform: scale(1);
}

/* Focus State */
.radio-glattt input[type="radio"]:focus ~ .radio-glattt-circle {
    box-shadow: 0 0 0 3px var(--focus-ring-light);
}

/* Disabled State */
.radio-glattt input[type="radio"]:disabled ~ .radio-glattt-circle {
    opacity: 0.5;
    cursor: not-allowed;
}

.radio-glattt-label {
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* Radio Group */
.radio-glattt-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-glattt-group-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* ===== TOGGLE SWITCH ===== */

.toggle-glattt-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-glattt {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.toggle-glattt input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.toggle-glattt-track {
    position: absolute;
    inset: 0;
    background: var(--bg-tertiary);
    border: 1.5px solid var(--border-secondary);
    border-radius: 9999px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-glattt-thumb {
    position: absolute;
    top: 50%;
    left: 0.25rem;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background: white;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checked State */
.toggle-glattt input[type="checkbox"]:checked ~ .toggle-glattt-track {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
}

.toggle-glattt input[type="checkbox"]:checked ~ .toggle-glattt-thumb {
    left: calc(100% - 1.25rem);
}

/* Focus State */
.toggle-glattt input[type="checkbox"]:focus ~ .toggle-glattt-track {
    box-shadow: 0 0 0 3px var(--focus-ring-light);
}

/* Disabled State */
.toggle-glattt input[type="checkbox"]:disabled ~ .toggle-glattt-track {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-glattt-label {
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* ===== SEGMENTED CONTROL (iOS-Style Toggle Buttons) ===== */

.segmented-control-glattt {
    display: inline-flex;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-secondary);
    border-radius: 0.5rem;
    padding: 0.25rem;
    gap: 0.25rem;
    
    /* Glass-Morphism */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.segmented-control-glattt-option {
    position: relative;
}

.segmented-control-glattt-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.segmented-control-glattt-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border-radius: 0.375rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    cursor: pointer;
}

.segmented-control-glattt-label svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Hover State */
.segmented-control-glattt-option:hover .segmented-control-glattt-label {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* Checked State */
.segmented-control-glattt-option input[type="radio"]:checked ~ .segmented-control-glattt-label {
    color: var(--color-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* Focus State */
.segmented-control-glattt-option input[type="radio"]:focus ~ .segmented-control-glattt-label {
    box-shadow: 0 0 0 3px var(--focus-ring-light);
}

/* Disabled State */
.segmented-control-glattt-option input[type="radio"]:disabled ~ .segmented-control-glattt-label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Size Variants */
.segmented-control-glattt-sm .segmented-control-glattt-label {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.segmented-control-glattt-sm .segmented-control-glattt-label svg {
    width: 0.875rem;
    height: 0.875rem;
}

.segmented-control-glattt-lg .segmented-control-glattt-label {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
}

.segmented-control-glattt-lg .segmented-control-glattt-label svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Full Width Variant */
.segmented-control-glattt-full {
    display: flex;
    width: 100%;
}

.segmented-control-glattt-full .segmented-control-glattt-option {
    flex: 1;
}

.segmented-control-glattt-full .segmented-control-glattt-label {
    width: 100%;
}

/* ===== FILE UPLOAD ===== */

.file-upload-glattt {
    position: relative;
    width: 100%;
}

.file-upload-glattt input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.file-upload-glattt-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    background: var(--bg-primary);
    border: 2px dashed var(--border-secondary);
    border-radius: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    
    /* Glass-Morphism */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.file-upload-glattt-icon {
    width: 3rem;
    height: 3rem;
    color: var(--text-tertiary);
    transition: all 0.3s ease;
}

.file-upload-glattt-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.file-upload-glattt-text-highlight {
    color: var(--color-primary);
    font-weight: 600;
}

.file-upload-glattt-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Hover State */
.file-upload-glattt:hover .file-upload-glattt-area {
    border-color: var(--color-primary);
    background: var(--bg-secondary);
}

.file-upload-glattt:hover .file-upload-glattt-icon {
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Drag Active State */
.file-upload-glattt-area.drag-active {
    border-color: var(--color-primary);
    border-style: solid;
    background: var(--color-primary);
    background: linear-gradient(135deg, 
        rgba(59, 155, 159, 0.1) 0%, 
        rgba(93, 190, 194, 0.05) 100%);
}

/* File List Item */
.file-upload-glattt-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}

.file-upload-glattt-file-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.file-upload-glattt-file-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 0.375rem;
    color: var(--color-primary);
}

.file-upload-glattt-file-details {
    flex: 1;
    min-width: 0;
}

.file-upload-glattt-file-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-upload-glattt-file-size {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.file-upload-glattt-file-remove {
    padding: 0.375rem;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.file-upload-glattt-file-remove:hover {
    color: var(--color-danger);
    background: var(--color-danger-light);
}

/* ===== INSTITUTE COLOR PICKER ===== */

.institute-color-picker-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.institute-color-preview {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid var(--border-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.institute-color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.institute-color-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.institute-color-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.institute-color-swatch.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary);
}

.institute-color-check {
    width: 1rem;
    height: 1rem;
    color: #ffffff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.institute-color-custom {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.institute-color-custom-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.institute-color-input-native {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    background: none;
    -webkit-appearance: none;
}

.institute-color-input-native::-webkit-color-swatch-wrapper {
    padding: 0;
}

.institute-color-input-native::-webkit-color-swatch {
    border: 2px solid var(--border-primary);
    border-radius: 50%;
}

.institute-color-hex-input {
    width: 7rem;
    padding: 0.375rem 0.5rem;
    font-family: monospace;
    font-size: 0.875rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    text-transform: lowercase;
}

.institute-color-hex-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.institute-color-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.institute-color-save-feedback {
    font-size: 0.875rem;
    color: var(--color-success);
    font-weight: 500;
}

/* ===== RANGE SLIDER ===== */
/* ===== FORM ACTIONS (Footer mit Buttons) ===== */

.form-glattt-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;
    margin-top: 2rem;
    border-top: 1px solid var(--border-primary);
}

.form-glattt-actions-left {
    justify-content: flex-start;
}

.form-glattt-actions-center {
    justify-content: center;
}

.form-glattt-actions-between {
    justify-content: space-between;
}

/* ===== FORM SECTIONS ===== */

.form-glattt-section {
    padding: 1.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    
    /* Glass-Morphism */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.form-glattt-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-primary);
}

.form-glattt-section-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* ===== SEARCH INPUT (Special Variant) ===== */

.search-glattt-wrapper {
    position: relative;
    width: 100%;
}

.search-glattt {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-secondary);
    border-radius: 9999px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Glass-Morphism */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.search-glattt-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-tertiary);
    pointer-events: none;
}

.search-glattt:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--focus-ring-light);
    background: var(--bg-primary);
}

.search-glattt:focus ~ .search-glattt-icon {
    color: var(--color-primary);
}

/* Clear Button */
.search-glattt-clear {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.search-glattt-clear:hover {
    color: var(--color-danger);
    background: var(--color-danger-light);
}


/* ============================================
   TABLES - GLATTT Style
   ============================================ */

/* ===== TABLE CONTAINER ===== */

.table-glattt-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    
    /* Glass-Morphism */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ===== BASE TABLE ===== */

.table-glattt {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

/* ===== TABLE HEAD ===== */

.table-glattt thead {
    background: linear-gradient(
        135deg,
        var(--bg-secondary) 0%,
        var(--bg-primary) 100%
    );
    border-bottom: 2px solid var(--border-secondary);
}

.table-glattt th {
    padding: 1rem 1.25rem !important;
    text-align: left !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: none !important;
    white-space: nowrap;
    
    /* First child styling */
    &:first-child {
        border-top-left-radius: 0.75rem;
    }
    
    &:last-child {
        border-top-right-radius: 0.75rem;
    }
}

/* Sortable Headers */
.table-glattt th.table-glattt-sortable {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.table-glattt th.table-glattt-sortable:hover {
    color: var(--color-primary) !important;
    background: var(--bg-secondary);
}

.table-glattt-sort-icon {
    display: inline-block;
    margin-left: 0.5rem;
    width: 1rem;
    height: 1rem;
    color: var(--text-tertiary);
    transition: color 0.2s ease;
}

.table-glattt th.table-glattt-sortable:hover .table-glattt-sort-icon {
    color: var(--color-primary);
}

/* ===== TABLE BODY ===== */

.table-glattt tbody {
    background: transparent;
}

.table-glattt tbody tr {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid var(--border-primary);
}

.table-glattt tbody tr:last-child {
    border-bottom: none;
}

.table-glattt tbody tr:hover {
    background: linear-gradient(
        135deg,
        var(--bg-secondary) 0%,
        var(--bg-primary) 100%
    );
    transform: scale(1.005);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.table-glattt td {
    padding: 1rem 1.25rem !important;
    font-size: 0.9375rem !important;
    color: var(--text-primary) !important;
    vertical-align: middle !important;
    border-top: none !important;
}

/* ===== TABLE VARIANTS - Size ===== */

.table-glattt-sm th {
    padding: 0.625rem 0.875rem !important;
    font-size: 0.6875rem !important;
}

.table-glattt-sm td {
    padding: 0.75rem 0.875rem !important;
    font-size: 0.875rem !important;
}

.table-glattt-lg th {
    padding: 1.25rem 1.5rem !important;
    font-size: 0.8125rem !important;
}

.table-glattt-lg td {
    padding: 1.5rem 1.5rem !important;
    font-size: 1rem !important;
}

/* ===== TABLE CELL TYPES ===== */

/* Emphasized Cell (e.g., Primary Column) */
.table-glattt td.table-glattt-cell-primary {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

/* Secondary/Muted Cell */
.table-glattt td.table-glattt-cell-secondary {
    color: var(--text-secondary) !important;
}

/* Monospace Cell (e.g., IDs, References) */
.table-glattt td.table-glattt-cell-mono {
    font-family: 'Courier New', monospace !important;
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
}

/* Numeric Cell (right-aligned) */
.table-glattt td.table-glattt-cell-numeric {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 500 !important;
}

/* Numeric Header (right-aligned, for columns with numbers) */
.table-glattt th.table-glattt-th-numeric {
    text-align: right !important;
}

.table-glattt th.table-glattt-th-numeric svg {
    display: inline !important;
    vertical-align: middle !important;
}

/* Action Cell (right-aligned, contains buttons) */
.table-glattt td.table-glattt-cell-actions {
    text-align: right !important;
    white-space: nowrap;
}

.table-glattt-cell-actions-group {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

/* ===== TABLE ROW STATES ===== */

/* Selected Row */
.table-glattt tbody tr.table-glattt-row-selected {
    background: linear-gradient(
        135deg,
        var(--color-primary-light) 0%,
        var(--color-primary-lighter) 100%
    );
}

.table-glattt tbody tr.table-glattt-row-selected:hover {
    background: linear-gradient(
        135deg,
        var(--color-primary-light) 0%,
        var(--color-primary-lighter) 100%
    );
}

/* Disabled/Inactive Row */
.table-glattt tbody tr.table-glattt-row-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.table-glattt tbody tr.table-glattt-row-disabled td {
    color: var(--text-tertiary) !important;
}

/* ===== TABLE FOOTER (Optional) ===== */

.table-glattt tfoot {
    background: var(--bg-secondary);
    border-top: 2px solid var(--border-secondary);
}

.table-glattt tfoot td {
    padding: 0.875rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
}

/* ===== TABLE UTILITIES ===== */

/* Empty State */
.table-glattt-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-tertiary);
}

.table-glattt-empty-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    color: var(--text-tertiary);
    opacity: 0.5;
}

.table-glattt-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.table-glattt-empty-description {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

/* Loading Overlay */
.table-glattt-loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.table-glattt-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    opacity: 0.5;
    border-radius: 0.75rem;
}

/* Striped Rows (Optional) */
.table-glattt-striped tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.table-glattt-striped tbody tr:nth-child(even):hover {
    background: linear-gradient(
        135deg,
        var(--bg-secondary) 0%,
        var(--bg-primary) 100%
    );
}

/* Compact Table (No Borders) */
.table-glattt-borderless tbody tr {
    border-bottom: none !important;
}

/* ===== RESPONSIVE TABLE ===== */

@media (max-width: 768px) {
    .table-glattt th,
    .table-glattt td {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.875rem !important;
    }
    
    .table-glattt th {
        font-size: 0.6875rem !important;
    }
    
    .table-glattt-cell-actions-group {
        flex-direction: column;
        gap: 0.25rem;
    }
}


/* ============================================
   PAGINATION - GLATTT Style
   ============================================ */

.pagination-glattt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    background: var(--card-glass-bg);
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pagination-glattt-info {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.pagination-glattt-actions {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .pagination-glattt {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}


/* ============================================
   MODALS - GLATTT Style
   ============================================ */

/* ===== MODAL BACKDROP (Overlay) ===== */

.modal-glattt-backdrop {
    position: fixed;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modalBackdropFadeIn 0.2s ease-out;
}

@keyframes modalBackdropFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== MODAL CONTAINER ===== */

.modal-glattt {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* Glass-Morphism */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    /* Prevent layout shift */
    position: relative;
}

/* ===== MODAL SIZE VARIANTS ===== */

.modal-glattt-sm {
    max-width: 28rem; /* 448px */
}

.modal-glattt-md {
    max-width: 42rem; /* 672px */
}

.modal-glattt-lg {
    max-width: 56rem; /* 896px */
}

.modal-glattt-xl {
    max-width: 72rem; /* 1152px */
}

.modal-glattt-full {
    max-width: 95vw;
    max-height: 95vh;
}

/* ===== MODAL HEADER ===== */

.modal-glattt-header {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 100%
    );
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
    
    /* Glass effect overlay */
    position: relative;
}

.modal-glattt-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    pointer-events: none;
}

.modal-glattt-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.modal-glattt-header-text {
    flex: 1;
    min-width: 0;
}

.modal-glattt-header-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    color: white;
    flex-shrink: 0;
    margin-right: 1rem;
}

.modal-glattt-header-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.3;
}

.modal-glattt-header-subtitle {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.375rem;
    line-height: 1.4;
}

.modal-glattt-header-close {
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-glattt-header-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.modal-glattt-header-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* ===== MODAL HEADER ACTIONS ===== */

.modal-glattt-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.75rem;
}

.modal-glattt-header-action-btn {
    padding: 0.5rem;
    color: var(--text-inverse);
    background: var(--glass-hover);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-glattt-header-action-btn:hover {
    background: var(--glass-active);
}

.modal-glattt-header-action-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* ===== MODAL HEADER VARIANTS ===== */

.modal-glattt-header-primary {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 100%
    );
}

.modal-glattt-header-secondary {
    background: linear-gradient(
        135deg,
        var(--color-secondary) 0%,
        var(--color-secondary-dark) 100%
    );
}

.modal-glattt-header-success {
    background: linear-gradient(
        135deg,
        var(--color-success) 0%,
        var(--color-success-dark) 100%
    );
}

.modal-glattt-header-warning {
    background: linear-gradient(
        135deg,
        var(--color-warning) 0%,
        var(--color-warning-dark) 100%
    );
}

.modal-glattt-header-danger {
    background: linear-gradient(
        135deg,
        var(--color-danger) 0%,
        var(--color-danger-dark) 100%
    );
}

.modal-glattt-header-info {
    background: linear-gradient(
        135deg,
        var(--color-info) 0%,
        var(--color-info-dark) 100%
    );
}

/* ===== MODAL BODY ===== */

.modal-glattt-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    background: var(--bg-secondary);
    
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border-secondary) transparent;
}

.modal-glattt-body::-webkit-scrollbar {
    width: 8px;
}

.modal-glattt-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-glattt-body::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 4px;
}

.modal-glattt-body::-webkit-scrollbar-thumb:hover {
    background: var(--border-primary);
}

/* ===== MODAL SECTIONS (Content Groups) ===== */

.modal-glattt-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    
    /* Subtle glass effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-glattt-section:last-child {
    margin-bottom: 0;
}

.modal-glattt-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-glattt-section-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.modal-glattt-section-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* ===== MODAL FOOTER ===== */

.modal-glattt-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
    
    /* Subtle shadow */
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.modal-glattt-footer-left {
    justify-content: flex-start;
}

.modal-glattt-footer-between {
    justify-content: space-between;
}

.modal-glattt-footer-center {
    justify-content: center;
}

/* Footer Button Group */
.modal-glattt-footer-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ===== MODAL STATES ===== */

/* Empty State */
.modal-glattt-empty {
    padding: 3rem 1.5rem;
    text-align: center;
}

.modal-glattt-empty-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: var(--text-tertiary);
    opacity: 0.5;
}

.modal-glattt-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.modal-glattt-empty-description {
    font-size: 0.9375rem;
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* Loading State */
.modal-glattt-loading {
    padding: 3rem 1.5rem;
    text-align: center;
}

.modal-glattt-loading-spinner {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border: 3px solid var(--border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.modal-glattt-loading-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* ===== MODAL DIVIDER ===== */

.modal-glattt-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 1.5rem 0;
}

/* ===== CONFIRMATION MODAL (Special Variant) ===== */

.modal-glattt-confirm {
    text-align: center;
}

.modal-glattt-confirm-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    padding: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-glattt-confirm-icon-danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.modal-glattt-confirm-icon-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.modal-glattt-confirm-icon-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.modal-glattt-confirm-icon-info {
    background: var(--color-info-light);
    color: var(--color-info);
}

.modal-glattt-confirm-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.modal-glattt-confirm-description {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .modal-glattt-backdrop {
        padding: 0.5rem;
    }
    
    .modal-glattt {
        max-height: 95vh;
        border-radius: 0.75rem;
    }
    
    .modal-glattt-header {
        padding: 1.25rem;
    }
    
    .modal-glattt-header-title {
        font-size: 1.125rem;
    }
    
    .modal-glattt-header-subtitle {
        font-size: 0.875rem;
    }
    
    .modal-glattt-body {
        padding: 1rem;
    }
    
    .modal-glattt-section {
        padding: 1rem;
    }
    
    .modal-glattt-footer {
        padding: 1rem;
        flex-direction: column;
    }
    
    .modal-glattt-footer-group {
        width: 100%;
        flex-direction: column;
    }
    
    .modal-glattt-footer .btn-glattt-primary,
    .modal-glattt-footer .btn-glattt-secondary,
    .modal-glattt-footer .btn-glattt-tertiary {
        width: 100%;
        justify-content: center;
    }
}

/* ===== ALPINE.JS x-cloak ===== */

[x-cloak] {
    display: none !important;
}


/* ============================================
   ALERTS & NOTIFICATIONS - GLATTT Style
   ============================================ */

/* ===== TOAST NOTIFICATIONS ===== */

.toast-glattt-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 28rem;
    pointer-events: none;
}

.toast-glattt {
    pointer-events: auto;
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 22rem;
    
    /* Verstärkter Glass-Morphism Effekt */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Subtle inner glow */
    box-shadow: var(--shadow-xl),
                0 0 40px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6),
                inset 0 -1px 0 rgba(255, 255, 255, 0.3);
    
    /* Animation - auffälliger mit Bounce */
    animation: toastSlideInBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

@keyframes toastSlideInBounce {
    0% {
        opacity: 0;
        transform: translateX(120%) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateX(-8px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
}
.toast-glattt-exit {
    animation: toastSlideOutFast 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toastSlideOutFast {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(120%) scale(0.9);
    }
}

/* Toast Icon - Glass-Style wie Cards */
.toast-glattt-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    
    /* Enhanced Glass background */
    background: var(--glass-active);
    border: 1px solid var(--glass-active-border);
    box-shadow: var(--shadow-sm),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    
    /* Glass effect */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* Colored overlay on icon */
.toast-glattt-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    opacity: 0.1;
    pointer-events: none;
}

.toast-glattt-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Toast Content */
.toast-glattt-content {
    flex: 1;
    min-width: 0;
}

.toast-glattt-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
    line-height: 1.3;
}

.toast-glattt-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Toast Close Button */
.toast-glattt-close {
    padding: 0.375rem;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.toast-glattt-close:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
    transform: scale(1.1);
}

.toast-glattt-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Toast Variants - Colored Icon & Border */
.toast-glattt-success {
    border-left: 4px solid var(--color-success);
}

.toast-glattt-success .toast-glattt-icon {
    color: var(--color-success);
    border-color: var(--color-success);
}

.toast-glattt-success .toast-glattt-icon::before {
    background: var(--color-success);
}

.toast-glattt-error {
    border-left: 4px solid var(--color-danger);
}

.toast-glattt-error .toast-glattt-icon {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.toast-glattt-error .toast-glattt-icon::before {
    background: var(--color-danger);
}

.toast-glattt-warning {
    border-left: 4px solid var(--color-warning);
}

.toast-glattt-warning .toast-glattt-icon {
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.toast-glattt-warning .toast-glattt-icon::before {
    background: var(--color-warning);
}

.toast-glattt-info {
    border-left: 4px solid var(--color-info);
}

.toast-glattt-info .toast-glattt-icon {
    color: var(--color-info);
    border-color: var(--color-info);
}

.toast-glattt-info .toast-glattt-icon::before {
    background: var(--color-info);
}

/* ===== TOAST VARIANTEN MIT VOLLSTÄNDIGER EINFÄRBUNG ===== */

/* Success Toast - Grüner Hintergrund */
.toast-glattt-success-filled {
    background: var(--card-success-bg) !important;
    border-color: var(--card-success-border) !important;
    border-left: 4px solid var(--color-success) !important;
    
    /* Angepasste Shadows für Success */
    box-shadow: var(--shadow-xl),
                0 0 40px rgba(16, 185, 129, 0.15),
                inset 0 1px 0 rgba(167, 243, 208, 0.8),
                inset 0 -1px 0 rgba(167, 243, 208, 0.4) !important;
}

.toast-glattt-success-filled .toast-glattt-icon {
    color: var(--color-success);
    background: var(--card-success-hover-bg);
    border-color: var(--card-success-border);
}

.toast-glattt-success-filled .toast-glattt-icon::before {
    background: var(--color-success);
    opacity: 0.1;
}

/* Error/Danger Toast - Roter Hintergrund */
.toast-glattt-error-filled {
    background: var(--card-danger-bg) !important;
    border-color: var(--card-danger-border) !important;
    border-left: 4px solid var(--color-danger) !important;
    
    /* Angepasste Shadows für Error */
    box-shadow: var(--shadow-xl),
                0 0 40px rgba(239, 68, 68, 0.15),
                inset 0 1px 0 rgba(252, 165, 165, 0.8),
                inset 0 -1px 0 rgba(252, 165, 165, 0.4) !important;
}

.toast-glattt-error-filled .toast-glattt-icon {
    color: var(--color-danger);
    background: var(--card-danger-hover-bg);
    border-color: var(--card-danger-border);
}

.toast-glattt-error-filled .toast-glattt-icon::before {
    background: var(--color-danger);
    opacity: 0.1;
}

/* Toast with Progress Bar (Auto-dismiss) */
.toast-glattt-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border-primary);
    border-radius: 0 0 0.75rem 0.75rem;
    overflow: hidden;
}

.toast-glattt-progress-bar {
    height: 100%;
    background: currentColor;
    animation: toastProgress 5s linear forwards;
}

@keyframes toastProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}


/* ===== INLINE ALERTS (for Forms & Sections) ===== */

.alert-glattt {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: var(--bg-primary);
    
    /* Subtle glass effect */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Alert Icon */
.alert-glattt-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* Alert Content */
.alert-glattt-content {
    flex: 1;
    min-width: 0;
}

.alert-glattt-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
    line-height: 1.3;
}

.alert-glattt-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Alert with Link/Action */
.alert-glattt-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.alert-glattt-link svg {
    width: 1rem;
    height: 1rem;
}

/* Alert Variants */
.alert-glattt-success {
    background: linear-gradient(
        135deg,
        var(--color-success-light) 0%,
        var(--bg-primary) 100%
    );
    border-color: var(--color-success);
}

.alert-glattt-success .alert-glattt-icon,
.alert-glattt-success .alert-glattt-title {
    color: var(--color-success-dark);
}

.alert-glattt-success .alert-glattt-link {
    color: var(--color-success-dark);
}

.alert-glattt-success .alert-glattt-link:hover {
    color: var(--color-success);
}

.alert-glattt-error {
    background: linear-gradient(
        135deg,
        var(--color-danger-light) 0%,
        var(--bg-primary) 100%
    );
    border-color: var(--color-danger);
}

.alert-glattt-error .alert-glattt-icon,
.alert-glattt-error .alert-glattt-title {
    color: var(--color-danger-dark);
}

.alert-glattt-error .alert-glattt-link {
    color: var(--color-danger-dark);
}

.alert-glattt-error .alert-glattt-link:hover {
    color: var(--color-danger);
}

.alert-glattt-warning {
    background: linear-gradient(
        135deg,
        var(--color-warning-light) 0%,
        var(--bg-primary) 100%
    );
    border-color: var(--color-warning);
}

.alert-glattt-warning .alert-glattt-icon,
.alert-glattt-warning .alert-glattt-title {
    color: var(--color-warning-dark);
}

.alert-glattt-warning .alert-glattt-link {
    color: var(--color-warning-dark);
}

.alert-glattt-warning .alert-glattt-link:hover {
    color: var(--color-warning);
}

.alert-glattt-info {
    background: linear-gradient(
        135deg,
        var(--color-info-light) 0%,
        var(--bg-primary) 100%
    );
    border-color: var(--color-info);
}

.alert-glattt-info .alert-glattt-icon,
.alert-glattt-info .alert-glattt-title {
    color: var(--color-info-dark);
}

.alert-glattt-info .alert-glattt-link {
    color: var(--color-info-dark);
}

.alert-glattt-info .alert-glattt-link:hover {
    color: var(--color-info);
}

/* ===== DARK MODE ANPASSUNGEN FÜR INLINE ALERTS ===== */

/* Success Alert - Dark Mode */
.dark .alert-glattt-success {
    background: var(--card-success-bg);
    border-color: var(--card-success-border);
}

.dark .alert-glattt-success .alert-glattt-icon,
.dark .alert-glattt-success .alert-glattt-title {
    color: var(--color-success-light); /* Hellere Farbe für bessere Lesbarkeit */
}

.dark .alert-glattt-success .alert-glattt-message {
    color: rgba(209, 250, 229, 0.9); /* Green 100 für Message Text */
}

.dark .alert-glattt-success .alert-glattt-link {
    color: var(--color-success-light);
}

.dark .alert-glattt-success .alert-glattt-link:hover {
    color: var(--color-success);
}

/* Error Alert - Dark Mode */
.dark .alert-glattt-error {
    background: var(--card-danger-bg);
    border-color: var(--card-danger-border);
}

.dark .alert-glattt-error .alert-glattt-icon,
.dark .alert-glattt-error .alert-glattt-title {
    color: var(--color-danger-light); /* Hellere Farbe für bessere Lesbarkeit */
}

.dark .alert-glattt-error .alert-glattt-message {
    color: rgba(254, 226, 226, 0.9); /* Red 100 für Message Text */
}

.dark .alert-glattt-error .alert-glattt-link {
    color: var(--color-danger-light);
}

.dark .alert-glattt-error .alert-glattt-link:hover {
    color: var(--color-danger);
}

/* Warning Alert - Dark Mode */
.dark .alert-glattt-warning {
    background: linear-gradient(
        135deg,
        rgba(113, 63, 18, 0.6) 0%,
        var(--bg-primary) 100%
    ); /* Amber 900 mit Transparenz */
    border-color: rgba(251, 191, 36, 0.6); /* Amber 400 */
}

.dark .alert-glattt-warning .alert-glattt-icon,
.dark .alert-glattt-warning .alert-glattt-title {
    color: var(--color-warning-light);
}

.dark .alert-glattt-warning .alert-glattt-message {
    color: rgba(254, 243, 199, 0.9); /* Amber 100 für Message Text */
}

.dark .alert-glattt-warning .alert-glattt-link {
    color: var(--color-warning-light);
}

.dark .alert-glattt-warning .alert-glattt-link:hover {
    color: var(--color-warning);
}

/* Info Alert - Dark Mode */
.dark .alert-glattt-info {
    background: linear-gradient(
        135deg,
        rgba(30, 58, 138, 0.6) 0%,
        var(--bg-primary) 100%
    ); /* Blue 900 mit Transparenz */
    border-color: rgba(96, 165, 250, 0.6); /* Blue 400 */
}

.dark .alert-glattt-info .alert-glattt-icon,
.dark .alert-glattt-info .alert-glattt-title {
    color: var(--color-info-light);
}

.dark .alert-glattt-info .alert-glattt-message {
    color: rgba(219, 234, 254, 0.9); /* Blue 100 für Message Text */
}

.dark .alert-glattt-info .alert-glattt-link {
    color: var(--color-info-light);
}

.dark .alert-glattt-info .alert-glattt-link:hover {
    color: var(--color-info);
}

/* Alert Dismissible */
.alert-glattt-dismissible {
    position: relative;
    padding-right: 3rem;
}

.alert-glattt-dismiss {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.alert-glattt-dismiss:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.alert-glattt-dismiss svg {
    width: 1rem;
    height: 1rem;
}


/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .toast-glattt-container {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
    
    .toast-glattt {
        min-width: auto;
    }
    
}


/* ============================================
   STATS & DATA CARDS - GLATTT Style
   ============================================ */

/* ===== BASE STATS CARD ===== */

.stats-card-glattt {
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 1rem;
    padding: 1.5rem;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-card-glattt:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Stats Card Header */
.stats-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.stats-card-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.stats-card-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-secondary);
}

/* Stats Card Value */
.stats-card-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* Stats Card Footer */
.stats-card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.stats-card-trend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.stats-card-trend svg {
    width: 1rem;
    height: 1rem;
}

.stats-card-trend-up {
    color: var(--color-success);
    background: var(--color-success-light);
}

.stats-card-trend-down {
    color: var(--color-danger);
    background: var(--color-danger-light);
}

.stats-card-description {
    color: var(--text-tertiary);
}

/* ===== STATS CARD FEATURED (Auffällig mit Gradient) ===== */

.stats-card-featured {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.stats-card-featured-header {
    padding: 1rem 5rem 1rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    border-radius: 1rem 1rem 0 0;
    position: relative;
}

.stats-card-featured-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
}

.stats-card-featured-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.stats-card-featured-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stats-card-featured-content {
    padding: 1.5rem;
}

.stats-card-featured-icon {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.stats-card-featured-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

/* Featured Gradient Variants */
.stats-card-featured-primary {
    background: var(--card-glass-bg);
}

.stats-card-featured-primary .stats-card-featured-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.stats-card-featured-secondary {
    background: var(--card-glass-bg);
}

.stats-card-featured-secondary .stats-card-featured-header {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
}

.stats-card-featured-success {
    background: var(--card-glass-bg);
}

.stats-card-featured-success .stats-card-featured-header {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
}

.stats-card-featured-danger {
    background: var(--card-glass-bg);
}

.stats-card-featured-danger .stats-card-featured-header {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 640px) {
    .stats-card-value {
        font-size: 1.875rem;
    }
    
    .stats-card-featured-value {
        font-size: 2rem;
    }
}

/* ===== MINI KPI CARDS (Kompakte KPI-Karten für Übersichten) ===== */

.kpi-mini-glattt {
    border-radius: 1rem;
    padding: 1rem 0.75rem;
    text-align: center;
    background: var(--gradient-primary);
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.kpi-mini-glattt:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-mini-glattt-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.kpi-mini-glattt-label {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.375rem;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inactive/Empty State */
.kpi-mini-glattt-inactive {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

.kpi-mini-glattt-inactive:hover {
    transform: none;
    box-shadow: none;
}

/* Color Variants */
.kpi-mini-glattt-secondary {
    background: var(--gradient-secondary);
}

.kpi-mini-glattt-neutral {
    background: linear-gradient(135deg, #4b6584 0%, #3d5066 100%);
}

.kpi-mini-glattt-tertiary {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.kpi-mini-glattt-success {
    background: var(--gradient-success);
}

.kpi-mini-glattt-warning {
    background: var(--gradient-warning);
}

.kpi-mini-glattt-danger {
    background: var(--gradient-danger);
}

/* Grid Container for Mini KPIs */
.kpi-mini-glattt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
}

/* ===== HISTORIC COMPARISON BADGES (Vergleichs-Badges) ===== */

.historic-comparison-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.375rem;
    margin-left: 0.5rem;
    min-width: 2rem;
}

.historic-comparison-badge-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.0625rem 0.25rem;
    border-radius: 0.25rem;
    min-width: 1.5rem;
}

.historic-comparison-positive {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
}

.historic-comparison-negative {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger);
}

.historic-comparison-neutral {
    background: rgba(156, 163, 175, 0.15);
    color: var(--text-tertiary);
}

/* Dark mode adjustments */
[data-theme="dark"] .historic-comparison-positive {
    background: rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .historic-comparison-negative {
    background: rgba(239, 68, 68, 0.25);
}

/* ===== KPI COMPARISON BADGES (für Reports-Übersicht) ===== */

.kpi-comparison-badge {
    background: rgba(156, 163, 175, 0.15);
    color: var(--text-secondary);
}

.kpi-comparison-badge.positive {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
}

.kpi-comparison-badge.negative {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger);
}

[data-theme="dark"] .kpi-comparison-badge.positive {
    background: rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .kpi-comparison-badge.negative {
    background: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .historic-comparison-neutral {
    background: rgba(156, 163, 175, 0.25);
}

/* ===== CHART & HISTOGRAM (Charts und Diagramme) ===== */

.chart-glattt-container {
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 1rem;
    padding: 1.5rem;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.chart-glattt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.chart-glattt-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-glattt-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Histogram Container */
.histogram-glattt {
    position: relative;
    width: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.histogram-glattt-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 0.25rem;
    padding: 1rem 0;
    border-bottom: 2px solid var(--border-primary);
    min-height: 250px;
}

/* Histogram Bar Group (für mehrere Bars nebeneinander) */
.histogram-glattt-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex: 1;
    max-width: 60px;
    justify-content: center;
}

/* Histogram Bar */
.histogram-glattt-bar {
    flex: 1;
    max-width: 12px;
    min-width: 4px;
    background: var(--gradient-primary);
    border-radius: 4px 4px 0 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
}

.histogram-glattt-bar:hover {
    opacity: 0.85;
    transform: scaleY(1.02);
    transform-origin: bottom;
}

/* Bar Tooltip */
.histogram-glattt-bar::after {
    content: attr(data-value);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    box-shadow: var(--shadow-md);
    margin-bottom: 4px;
}

.histogram-glattt-bar:hover::after {
    opacity: 1;
}

/* Bar Color Variants */
.histogram-glattt-bar-primary { background: var(--gradient-primary); }
.histogram-glattt-bar-secondary { background: var(--gradient-secondary); }
.histogram-glattt-bar-success { background: var(--gradient-success); }
.histogram-glattt-bar-warning { background: var(--gradient-warning); }
.histogram-glattt-bar-danger { background: var(--gradient-danger); }
.histogram-glattt-bar-info { background: var(--gradient-info); }
.histogram-glattt-bar-glattt-gold { background: var(--gradient-glattt-gold); }
.histogram-glattt-bar-glattt-turquoise { background: var(--gradient-glattt-turquoise); }

/* Histogram X-Axis Labels */
.histogram-glattt-x-axis {
    display: flex;
    justify-content: space-around;
    padding-top: 0.75rem;
}

.histogram-glattt-x-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-align: center;
    flex: 1;
    max-width: 60px;
}

/* Histogram Y-Axis */
.histogram-glattt-y-axis {
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 0.5rem;
    border-right: 1px solid var(--border-primary);
}

.histogram-glattt-y-label {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-align: right;
}

/* Histogram with Y-Axis */
.histogram-glattt-with-y-axis {
    padding-left: 3rem;
}

/* Area Chart Overlay */
.histogram-glattt-area-overlay {
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    bottom: 2.5rem;
    pointer-events: none;
}

.histogram-glattt-area-path {
    fill-opacity: 0.15;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.histogram-glattt-area-path:hover {
    fill-opacity: 0.25;
}

/* Area Path Color Variants */
.histogram-glattt-area-primary { fill: var(--color-primary); stroke: var(--color-primary); }
.histogram-glattt-area-secondary { fill: var(--color-secondary); stroke: var(--color-secondary); }
.histogram-glattt-area-success { fill: var(--color-success); stroke: var(--color-success); }
.histogram-glattt-area-warning { fill: var(--color-warning); stroke: var(--color-warning); }
.histogram-glattt-area-danger { fill: var(--color-danger); stroke: var(--color-danger); }
.histogram-glattt-area-info { fill: var(--color-info); stroke: var(--color-info); }
.histogram-glattt-area-glattt-gold { fill: var(--glattt-gold); stroke: var(--glattt-gold); }
.histogram-glattt-area-glattt-turquoise { fill: var(--glattt-turquoise); stroke: var(--glattt-turquoise); }

/* Chart Legend */
.chart-glattt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.chart-glattt-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    user-select: none;
}

.chart-glattt-legend-item:hover {
    background: var(--bg-hover);
}

.chart-glattt-legend-item.inactive {
    opacity: 0.4;
}

.chart-glattt-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.chart-glattt-legend-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Chart Filter Controls */
.chart-glattt-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-glattt-date-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-glattt-date-range input[type="date"] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.chart-glattt-date-range input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Checkbox Toggle for Legend */
.chart-glattt-checkbox {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.chart-glattt-checkbox input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.chart-glattt-checkbox-mark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-secondary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: var(--bg-primary);
}

.chart-glattt-checkbox input:checked + .chart-glattt-checkbox-mark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.chart-glattt-checkbox-mark svg {
    width: 12px;
    height: 12px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chart-glattt-checkbox input:checked + .chart-glattt-checkbox-mark svg {
    opacity: 1;
}

/* Empty State */
.chart-glattt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    color: var(--text-tertiary);
    text-align: center;
}

.chart-glattt-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.chart-glattt-empty-text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ============================================
   MISCELLANEOUS COMPONENTS - GLATTT Style
   ============================================ */

/* ===== LOADING SPINNERS ===== */

/* Standard Rotating Spinner */
.spinner-glattt {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-glattt-xs {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.spinner-glattt-sm {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
}

.spinner-glattt-lg {
    width: 3.5rem;
    height: 3.5rem;
    border-width: 4px;
}

/* Spinner Color Variants */
.spinner-glattt-primary {
    border-top-color: var(--color-primary);
}

.spinner-glattt-secondary {
    border-top-color: var(--color-secondary);
}

.spinner-glattt-success {
    border-top-color: var(--color-success);
}

.spinner-glattt-danger {
    border-top-color: var(--color-danger);
}

/* Dots Spinner */
.spinner-dots-glattt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spinner-dots-glattt span {
    width: 0.75rem;
    height: 0.75rem;
    background: var(--color-primary);
    border-radius: 50%;
    animation: bounceDot 1.4s infinite ease-in-out both;
}

.spinner-dots-glattt span:nth-child(1) {
    animation-delay: -0.32s;
}

.spinner-dots-glattt span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounceDot {
    0%, 80%, 100% {
        transform: scale(0.7);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Pulse Spinner */
.spinner-pulse-glattt {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* ===== SKELETON LOADERS ===== */

.skeleton-glattt {
    background: linear-gradient(
        90deg,
        var(--skeleton-light) 25%,
        var(--skeleton-dark) 50%,
        var(--skeleton-light) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton Line */
.skeleton-line {
    height: 1rem;
    margin-bottom: 0.75rem;
}

.skeleton-line-sm {
    height: 0.75rem;
}

.skeleton-line-lg {
    height: 1.25rem;
}

/* Skeleton Text Block */
.skeleton-text {
    width: 100%;
}

.skeleton-text-short {
    width: 60%;
}

.skeleton-text-medium {
    width: 80%;
}

/* Skeleton Card */
.skeleton-card-glattt {
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 1rem;
    padding: 1.5rem;
}

.skeleton-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.skeleton-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-avatar-sm {
    width: 2rem;
    height: 2rem;
}

.skeleton-avatar-lg {
    width: 4rem;
    height: 4rem;
}

/* ===== PROGRESS BARS ===== */

.progress-glattt {
    width: 100%;
    height: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar-glattt {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 9999px;
    transition: width 0.3s ease;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Animated Progress */
.progress-bar-glattt.animated {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Progress with Glow */
.progress-bar-glattt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressGlow 2s infinite;
}

@keyframes progressGlow {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Progress Color Variants */
.progress-bar-primary {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.progress-bar-secondary {
    background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
}

.progress-bar-success {
    background: linear-gradient(90deg, var(--color-success) 0%, var(--color-success-dark) 100%);
}

.progress-bar-warning {
    background: linear-gradient(90deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
}

.progress-bar-danger {
    background: linear-gradient(90deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
}

/* Progress with Label */
.progress-labeled {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 3rem;
    text-align: right;
}

/* Circular Progress */
.progress-circle-glattt {
    width: 6rem;
    height: 6rem;
    position: relative;
}

.progress-circle-glattt svg {
    transform: rotate(-90deg);
}

.progress-circle-bg {
    fill: none;
    stroke: var(--bg-secondary);
    stroke-width: 8;
}

.progress-circle-bar {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.progress-circle-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== COUNTDOWN BAR ===== */

.countdown-bar-glattt {
    width: 100%;
    height: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.countdown-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 9999px;
    transition: width 1s linear;
}

.countdown-bar-container {
    position: relative;
}

.countdown-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Auto-Logout Countdown Bar */
.countdown-bar-logout {
    width: 100%;
    height: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 9999px;
    border: 1px solid var(--border-secondary);
    overflow: hidden;
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Warning State - Container wird transparent */
.countdown-bar-logout.warning {
    background: transparent;
    border-color: var(--color-danger);
}

.countdown-bar-logout-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 9999px;
    transition: width 0.1s linear, background 0.3s ease;
}

/* Warning State - letzten 30 Sekunden */
.countdown-bar-logout-fill.warning {
    background: linear-gradient(90deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
    animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 var(--color-danger);
    }
    50% {
        opacity: 0.85;
        box-shadow: 0 0 8px 2px var(--color-danger);
    }
}

/* Countdown Label mit Warning State */
.countdown-bar-label.warning {
    color: var(--color-danger);
    font-weight: 600;
}

/* ===== TOOLTIPS ===== */

/* Generischer Info-Tooltip (data-tooltip Attribut) */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    right: -0.5rem;
    min-width: 200px;
    max-width: 280px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    animation: tooltipFadeIn 0.15s ease;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== DIVIDERS ===== */

.divider-glattt {
    width: 100%;
    height: 1px;
    background: var(--border-primary);
    margin: 1.5rem 0;
}

.divider-with-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.divider-with-text::before,
.divider-with-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-primary);
}

.divider-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Gradient Divider */
.divider-gradient {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    margin: 1.5rem 0;
}

/* ===== EMPTY STATES ===== */

.empty-state-glattt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    color: var(--text-tertiary);
}

.empty-state-icon svg {
    width: 100%;
    height: 100%;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    max-width: 28rem;
}

/* ===== AVATARS ===== */

.avatar-glattt {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    position: relative;
}

.avatar-glattt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Avatar Sizes */
.avatar-xs {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
}

.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}

.avatar-md {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
}

.avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.125rem;
}

.avatar-xl {
    width: 5rem;
    height: 5rem;
    font-size: 1.5rem;
}

/* Avatar with Status Badge */
.avatar-with-status {
    position: relative;
}

.avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
}

.avatar-status-online {
    background: var(--color-success);
}

.avatar-status-offline {
    background: var(--text-tertiary);
}

.avatar-status-busy {
    background: var(--color-danger);
}

.avatar-status-away {
    background: var(--color-warning);
}

/* Avatar Group */
.avatar-group {
    display: flex;
    align-items: center;
}

.avatar-group .avatar-glattt {
    margin-left: -0.5rem;
    border: 3px solid var(--bg-primary);
    transition: transform 0.2s ease;
}

.avatar-group .avatar-glattt:first-child {
    margin-left: 0;
}

.avatar-group .avatar-glattt:hover {
    transform: translateY(-2px);
    z-index: 10;
}

/* Avatar Group Counter */
.avatar-group-count {
    margin-left: -0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 3px solid var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}


@media (max-width: 640px) {
    .empty-state-glattt {
        padding: 2rem 1rem;
    }
    
    .empty-state-icon {
        width: 3rem;
        height: 3rem;
    }
    
    .progress-circle-glattt {
        width: 4rem;
        height: 4rem;
    }
    
    .progress-circle-text {
        font-size: 1rem;
    }
}
/* ===== TABS ===== */

.empty-state-glattt-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    opacity: 0.5;
}

/* ===== TABS ===== */

.tabs-glattt {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.tabs-glattt::-webkit-scrollbar {
    display: none;
}

.tab-glattt {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-glattt:hover {
    margin: 0.5rem 0;
    border-radius: 1rem;
    color: var(--text-primary);
    background: var(--bg-hover);
}

.tab-glattt.active {
    margin: 0.5rem 0;
    border-radius: 1rem;
    color: var(--color-white);
    background: var(--gradient-primary);
    border-radius: 1rem;
    font-weight: bold;
}

.tab-glattt:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.tab-glattt:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== TABS SIDEBAR LAYOUT ===== */
/* Desktop: Sidebar links + Content rechts
   Mobile: Horizontale Tabs oben (wie bisher) */

.tabs-glattt-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Sidebar Container - Mobile: horizontale Tabs */
.tabs-glattt-sidebar {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 1rem;
    padding: 0.25rem 0.75rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tabs-glattt-sidebar::-webkit-scrollbar {
    display: none;
}

/* Sidebar Tab Items */
.tab-glattt-sidebar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: left;
    width: auto;
}

.tab-glattt-sidebar:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.tab-glattt-sidebar.active {
    color: var(--color-white);
    background: var(--gradient-primary);
    font-weight: 600;
    box-shadow: var(--shadow-primary-sm);
}

.tab-glattt-sidebar:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.tab-glattt-sidebar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sidebar Tab Content Area */
.tabs-glattt-content {
    flex: 1;
    min-width: 0;
}

/* No-hover variant for tab content */
.tabs-glattt-content-no-hover .calendar-glattt-day:hover {
    transform: none;
    box-shadow: none;
    background: var(--bg-secondary);
}

.tabs-glattt-content-no-hover .calendar-glattt-day-today:hover {
    background: var(--gradient-primary);
}

.tabs-glattt-content-no-hover .calendar-glattt-day-weekend:hover {
    background: var(--bg-tertiary);
}

.tabs-glattt-content-no-hover .calendar-glattt-day-closed:hover {
    background: repeating-linear-gradient(
        45deg,
        var(--bg-tertiary),
        var(--bg-tertiary) 10px,
        var(--bg-secondary) 10px,
        var(--bg-secondary) 20px
    );
}

.tabs-glattt-content-no-hover .kpi-mini-glattt:hover {
    transform: none;
    box-shadow: none;
}

.tabs-glattt-content-no-hover .card-glattt:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--card-glass-border);
    background: var(--card-glass-bg);
}

/* Desktop Layout (≥ 1280px): Sidebar links */
@media (min-width: 1280px) {
    .tabs-glattt-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .tabs-glattt-sidebar {
        flex-direction: column;
        flex-shrink: 0;
        width: 220px;
        overflow-x: visible;
        padding: 0.5rem;
        position: sticky;
        top: 4rem;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }

    .tab-glattt-sidebar {
        width: 100%;
    }
}

/* ===== CALENDAR GRID - Statistik Kalender ===== */
.calendar-glattt-with-kw {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.calendar-glattt-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr) 170px;
    gap: 0.5rem;
}

.calendar-glattt-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr) 170px;
    gap: 0.5rem;
}

.calendar-glattt {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.calendar-glattt-header {
    display: contents;
}

.calendar-glattt-weekday {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0;
}

.calendar-glattt-day {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.375rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    cursor: default;
    position: relative;
}

.calendar-glattt-day:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Kein Hover-Effekt im Branch-View - nur Balken sind hoverbar */
.calendar-glattt-day.calendar-day-branch-view:hover {
    background: var(--bg-secondary);
    transform: none;
    box-shadow: none;
    cursor: default;
}

.calendar-glattt-day-number {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary);
}

/* Container für die zentrierten Elemente (Anzahl + Label) */
.calendar-glattt-day-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.calendar-glattt-day-count {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.calendar-glattt-day-label {
    font-size: 0.5625rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.125rem;
}

/* Today highlight */
.calendar-glattt-day-today {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-primary);
}

.calendar-glattt-day-today .calendar-glattt-day-number,
.calendar-glattt-day-today .calendar-glattt-day-count,
.calendar-glattt-day-today .calendar-glattt-day-label {
    color: white;
}

/* Weekend styling */
.calendar-glattt-day-weekend {
    background: var(--bg-tertiary);
}

.calendar-glattt-day-weekend .calendar-glattt-day-number {
    color: var(--text-tertiary);
}

/* Has appointments - subtle highlight */
.calendar-glattt-day-has-appointments {
    border: 2px solid var(--color-primary);
}

.calendar-glattt-day-has-appointments .calendar-glattt-day-count {
    color: var(--color-primary);
}

/* No appointments */
.calendar-glattt-day-empty .calendar-glattt-day-count {
    color: var(--text-tertiary);
    opacity: 0.5;
}

/* Sunday - Closed */
.calendar-glattt-day-closed {
    background: repeating-linear-gradient(
        45deg,
        var(--bg-tertiary),
        var(--bg-tertiary) 10px,
        var(--bg-secondary) 10px,
        var(--bg-secondary) 20px
    );
    opacity: 0.6;
    cursor: not-allowed !important;
}

.calendar-glattt-day-closed:hover {
    transform: none;
    box-shadow: none;
    background: repeating-linear-gradient(
        45deg,
        var(--bg-tertiary),
        var(--bg-tertiary) 10px,
        var(--bg-secondary) 10px,
        var(--bg-secondary) 20px
    );
}

.calendar-glattt-day-closed .calendar-glattt-day-count {
    display: none;
}

.calendar-glattt-day-closed .calendar-glattt-day-label {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    opacity: 0.8;
}

/* ===== HOLIDAY STYLES ===== */

/* Regionaler Feiertag: Gold-Akzent am oberen Rand */
.calendar-glattt-day-partial-holiday {
    border-top: 3px solid var(--glattt-gold, #c8a852);
    position: relative;
}

/* Feiertag-Badge (regionaler Feiertag) */
.calendar-holiday-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.0625rem;
    padding: 0.125rem 0.25rem;
    background: color-mix(in srgb, var(--glattt-gold, #c8a852) 12%, transparent);
    border-radius: 0.25rem;
    margin-bottom: 0.125rem;
    line-height: 1.1;
}

.calendar-holiday-badge-name {
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--glattt-gold, #c8a852);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.calendar-holiday-badge-branches {
    font-size: 0.5rem;
    color: var(--text-tertiary);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Branch-Bar gestreift bei regionalem Feiertag */
.calendar-branch-bar-track-holiday {
    background: repeating-linear-gradient(
        45deg,
        var(--bg-tertiary),
        var(--bg-tertiary) 4px,
        var(--bg-secondary) 4px,
        var(--bg-secondary) 8px
    ) !important;
    opacity: 0.5;
}

.calendar-branch-bar-track-holiday .calendar-branch-bar-fill {
    opacity: 0.4;
}

/* Clickable days */
.calendar-glattt-day-clickable {
    cursor: pointer;
}

.calendar-glattt-day-clickable:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Today hover - keep gradient visible */
.calendar-glattt-day-today.calendar-glattt-day-clickable:hover {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-primary), var(--shadow-lg);
}

/* Empty placeholder cells */
.calendar-glattt-day-placeholder {
    background: transparent;
    pointer-events: none;
}

/* ===== CALENDAR UTILIZATION DISPLAY ===== */
.calendar-glattt-day-utilization {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 0.25rem;
}

.calendar-utilization-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
    width: 100%;
}

.calendar-utilization-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.375rem;
    line-height: 1;
}

/* Utilization levels */
.calendar-utilization-badge.utilization-excellent {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.calendar-utilization-badge.utilization-good {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.calendar-utilization-badge.utilization-medium {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.calendar-utilization-badge.utilization-low {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

/* Today text colors for utilization */
.calendar-glattt-day-today .calendar-utilization-badge {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Available slots text */
.calendar-available-slots {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.calendar-glattt-day-today .calendar-available-slots {
    color: rgba(255, 255, 255, 0.9);
}

/* Calendar Day Loading State */
.calendar-glattt-day-loading {
    opacity: 0.7;
    cursor: wait;
}

.calendar-glattt-day-loading .calendar-glattt-day-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* Calendar Load More Button */
.calendar-glattt-day-load-more {
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Navigation cards spanning multiple columns - no square aspect ratio */
.calendar-glattt-nav-card {
    aspect-ratio: auto;
    min-height: 80px;
}

.calendar-glattt-nav-card:hover {
    transform: none;
    box-shadow: none;
}

.calendar-glattt-day-load-more:hover {
    background: var(--bg-secondary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.calendar-glattt-day-load-more.calendar-glattt-day-loading {
    cursor: wait;
    transform: none;
}

.calendar-load-more-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.calendar-glattt-day-load-more:hover .calendar-load-more-content {
    color: var(--color-primary);
}

.calendar-load-more-content svg {
    color: var(--color-primary);
}

.calendar-load-more-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

/* ===== CALENDAR WEEKLY SUMMARY ROW ===== */
.calendar-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr) minmax(90px, 120px);
    gap: 0.5rem;
}

.calendar-week-summary-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    background: var(--bg-tertiary);
    border-radius: 0.75rem;
    text-align: center;
}

.calendar-week-summary-kw {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-week-summary-detail {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.calendar-week-summary-detail strong {
    font-weight: 700;
    color: var(--text-primary);
}

/* === KW-Zusammenfassung (integriert in Wochen-Zeilen) === */
.calendar-kw-header-label {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0;
}

.calendar-kw-card {
    grid-column: 8;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    padding: 0.625rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    border: 1px solid var(--border-primary);
    min-height: 0;
}

.calendar-kw-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-primary);
}

.calendar-kw-number {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.calendar-kw-total {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
}

.calendar-kw-branches {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.calendar-kw-branch-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
}

.calendar-kw-branch-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.calendar-kw-branch-name {
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-kw-branch-count {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ========================================
   Calendar View Toggle
   ======================================== */
.calendar-view-toggle {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: 0.5rem;
    padding: 0.25rem;
    gap: 0.25rem;
}

.calendar-view-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.calendar-view-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.calendar-view-toggle-btn.active {
    color: white;
    background: var(--gradient-primary);
    box-shadow: var(--shadow-sm);
}

.calendar-view-toggle-btn svg {
    flex-shrink: 0;
}

/* ========================================
   Calendar Branch Legend
/* ========================================
   Calendar Day Content Variants
   ======================================== */
.calendar-glattt-day-content-utilization,
.calendar-glattt-day-content-branch {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

/* Branch View specific styles */
.calendar-glattt-day-branch-view {
    padding: 0.5rem;
}

.calendar-branch-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: var(--text-tertiary);
}

.calendar-branch-closed {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    text-align: center;
}

.calendar-branch-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
    flex: 1;
    padding: 0.5rem 0.5rem 0;
    width: 100%;
}

.calendar-branch-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 0.25rem;
}

.calendar-branch-bar-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.calendar-branch-bar-track {
    width: 15px;
    height: 75px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    overflow: visible;
    position: relative;
    cursor: pointer;
}

.calendar-branch-bar-track:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.375rem 0.625rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

.calendar-branch-bar-fill {
    width: 100%;
    min-height: 4px;
    border-radius: 4px;
    transition: height 0.3s ease;
}

.calendar-branch-total {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border-color);
}

.calendar-branch-total-count {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.calendar-branch-total-label {
    font-size: 0.625rem;
    color: var(--text-tertiary);
}

/* Today styling for branch view */
.calendar-glattt-day-today .calendar-branch-bars {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
}

.calendar-glattt-day-today .calendar-branch-bar-count {
    color: rgba(255, 255, 255, 0.9);
}

.calendar-glattt-day-today .calendar-branch-total {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.calendar-glattt-day-today .calendar-branch-total-count,
.calendar-glattt-day-today .calendar-branch-total-label {
    color: white;
}

.calendar-glattt-day-today .calendar-branch-closed {
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive: Schmaler Desktop / großes Tablet (≤ 1350px) */
@media (max-width: 1350px) {
    .calendar-kw-card,
    .calendar-kw-header-label {
        display: none;
    }
    
    .calendar-glattt-header-row,
    .calendar-glattt-week-row {
        grid-template-columns: repeat(7, 1fr);
    }
    
    .calendar-glattt-with-kw {
        gap: 0.375rem;
    }
    
    .calendar-glattt {
        gap: 0.375rem;
    }
    
    .calendar-glattt-day {
        min-height: 80px;
        padding: 0.375rem 0.25rem;
    }
    
    .calendar-glattt-day-count {
        font-size: 1.375rem;
    }
    
    /* "TERMINE"-Label ausblenden */
    .calendar-glattt-day-label {
        display: none;
    }
    
    /* "Auslastung" Text ausblenden, nur Prozent zeigen */
    .calendar-utilization-text {
        display: none;
    }
    
    /* Auslastungs-Badge kompakter */
    .calendar-utilization-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
    
    /* Freie Slots kleiner */
    .calendar-available-slots {
        font-size: 0.5625rem;
    }
    
    .calendar-glattt-day-number {
        font-size: 0.6875rem;
    }
    
    /* Branch-Ansicht: Bars etwas kompakter */
    .calendar-branch-bar-track {
        height: 40px;
        width: 8px;
    }
    
    .calendar-branch-bar-label {
        display: none;
    }
    
    .calendar-branch-bars {
        gap: 2px;
        padding: 0.25rem 0 0;
    }
    
    .calendar-branch-bar-item {
        flex: 0 0 auto;
        gap: 0.125rem;
    }
    
    .calendar-branch-total-count {
        font-size: 0.8125rem;
    }
    
    .calendar-branch-total-label {
        font-size: 0.5625rem;
    }
    
    
    /* Wochensummen-Zeile */
    .calendar-week-summary-detail {
        font-size: 0.625rem;
    }
}

/* Responsive: Tablet (≤ 768px) */
@media (max-width: 768px) {
    .calendar-glattt,
    .calendar-glattt-with-kw {
        gap: 0.25rem;
    }
    
    .calendar-glattt-header-row,
    .calendar-glattt-week-row {
        gap: 0.25rem;
    }
    
    .calendar-glattt-day {
        min-height: 60px;
        aspect-ratio: auto;
        border-radius: 0.5rem;
        padding: 0.375rem 0.25rem;
    }
    
    .calendar-glattt-day-number {
        font-size: 0.6875rem;
    }
    
    .calendar-glattt-day-count {
        font-size: 1.25rem;
    }
    
    .calendar-glattt-day-label {
        display: none;
    }
    
    /* Freie Slots ausblenden */
    .calendar-available-slots {
        display: none;
    }
    
    /* Auslastungs-Badge kompakter */
    .calendar-utilization-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
    
    /* "Auslastung" Text ausblenden, nur Prozent zeigen */
    .calendar-utilization-text {
        display: none;
    }
    
    /* Branch-Ansicht: Unterhalb 768px komplett ausblenden */
    .calendar-view-toggle {
        display: none;
    }
    
    
    .calendar-glattt-day-content-branch {
        display: none;
    }
    
    /* Auslastung immer sichtbar */
    .calendar-glattt-day-content-utilization {
        display: flex !important;
    }
    
    .calendar-load-more-text {
        font-size: 0.625rem;
    }
    
    /* Wochensummen-Zeile */
    .calendar-week-row {
        gap: 0.25rem;
    }
    
    .calendar-week-summary-col {
        padding: 0.375rem 0.125rem;
    }
    
    .calendar-week-summary-detail {
        font-size: 0.5625rem;
    }
}

/* Responsive: Smartphone quer (≤ 640px) */
@media (max-width: 640px) {
    .calendar-glattt,
    .calendar-glattt-with-kw {
        gap: 2px;
    }
    
    .calendar-glattt-header-row,
    .calendar-glattt-week-row {
        gap: 2px;
    }
    
    .calendar-glattt-weekday {
        font-size: 0.625rem;
        padding: 0.25rem 0;
    }
    
    .calendar-glattt-day {
        min-height: 48px;
        border-radius: 0.375rem;
        padding: 0.25rem 0.125rem;
    }
    
    .calendar-glattt-day-number {
        font-size: 0.5625rem;
    }
    
    /* Monat ausblenden, nur Tagesnummer zeigen */
    .calendar-day-month {
        display: none;
    }
    
    .calendar-glattt-day-count {
        font-size: 1rem;
    }
    
    /* Auslastungs-Badge komplett ausblenden */
    .calendar-utilization-badge {
        display: none;
    }
    
    .calendar-glattt-day-utilization {
        display: none;
    }
    
    /* Feiertag-Badge ausblenden auf kleinen Screens */
    .calendar-holiday-badge {
        display: none;
    }
    
    .calendar-glattt-day-partial-holiday {
        border-top-width: 2px;
    }
    
    /* Kalender-Header kompakter */
    .calendar-view-toggle {
        display: none;
    }
    
    .calendar-view-toggle-btn {
        justify-content: center;
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
    }
    
    .calendar-load-more-content svg {
        width: 1rem;
        height: 1rem;
    }
    
    .calendar-load-more-text {
        font-size: 0.5625rem;
    }
    
    /* Wochensummen noch kompakter */
    .calendar-week-row {
        gap: 2px;
    }
    
    .calendar-week-summary-col {
        padding: 0.25rem 0;
    }
    
    .calendar-week-summary-kw {
        font-size: 0.5625rem;
    }
    
    .calendar-week-summary-detail {
        font-size: 0.5rem;
    }
    
    /* Kalender Card-Header auf Mobile umbrechen */
    .card-glattt-header:has(.calendar-view-toggle) {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Responsive: Smartphone hoch (≤ 480px) */
@media (max-width: 480px) {
    .calendar-glattt,
    .calendar-glattt-with-kw {
        gap: 1px;
    }
    
    .calendar-glattt-header-row,
    .calendar-glattt-week-row {
        gap: 1px;
    }
    
    /* Wochentags-Header: Nur 1-2 Buchstaben via data-short */
    .calendar-glattt-weekday {
        font-size: 0;
        padding: 0.125rem 0;
    }
    
    .calendar-glattt-weekday::after {
        content: attr(data-short);
        font-size: 0.5rem;
        font-weight: 700;
        letter-spacing: 0;
    }
    
    .calendar-glattt-day {
        min-height: 40px;
        border-radius: 0.25rem;
        padding: 0.125rem;
    }
    
    .calendar-glattt-day-number {
        font-size: 0.5rem;
    }
    
    .calendar-glattt-day-count {
        font-size: 0.875rem;
    }
    
    /* Has-appointments Border schmaler */
    .calendar-glattt-day-has-appointments {
        border-width: 1px;
    }
    
    /* Today Box-Shadow entfernen */
    .calendar-glattt-day-today {
        box-shadow: none;
    }
    
    /* Load-more Button */
    .calendar-glattt-day-load-more {
        border-width: 1px;
    }
    
    .calendar-load-more-content {
        gap: 0.25rem;
    }
    
    /* Sunday stripe pattern kleiner */
    .calendar-glattt-day-closed {
        background: repeating-linear-gradient(
            45deg,
            var(--bg-tertiary),
            var(--bg-tertiary) 5px,
            var(--bg-secondary) 5px,
            var(--bg-secondary) 10px
        );
    }
    
    .calendar-glattt-day-closed:hover {
        background: repeating-linear-gradient(
            45deg,
            var(--bg-tertiary),
            var(--bg-tertiary) 5px,
            var(--bg-secondary) 5px,
            var(--bg-secondary) 10px
        );
    }
    
    .calendar-glattt-day-closed .calendar-glattt-day-label {
        font-size: 0.5rem;
    }
}

/* ===== HEATMAP TABLE (Farbcodierte Tabellen) ===== */

.table-glattt-heatmap {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-glattt-heatmap th,
.table-glattt-heatmap td {
    padding: 0.75rem 1rem;
    text-align: center !important;
    border-bottom: 1px solid var(--border-primary);
}

.table-glattt-heatmap th {
    background: var(--bg-tertiary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-glattt-heatmap th:first-child,
.table-glattt-heatmap td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--bg-secondary);
}

.table-glattt-heatmap th:first-child {
    z-index: 15;
    background: var(--bg-tertiary);
}

.table-glattt-heatmap tbody tr:hover {
    background: var(--bg-hover);
}

/* Heatmap Cell mit farblicher Intensität */
.heatmap-cell {
    position: relative;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    min-width: 80px;
}

.heatmap-cell-value {
    position: relative;
    z-index: 2;
    display: block;
}

.heatmap-cell-sub {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-tertiary);
    display: block;
    margin-top: 2px;
}

/* Heatmap Intensitäts-Stufen (basierend auf Percentilen) */
.heatmap-intensity-0 { background: transparent; color: var(--text-tertiary); }
.heatmap-intensity-1 { background: rgba(var(--color-primary-rgb), 0.1); color: var(--text-primary); }
.heatmap-intensity-2 { background: rgba(var(--color-primary-rgb), 0.2); color: var(--text-primary); }
.heatmap-intensity-3 { background: rgba(var(--color-primary-rgb), 0.35); color: var(--text-primary); }
.heatmap-intensity-4 { background: rgba(var(--color-primary-rgb), 0.5); color: white; }
.heatmap-intensity-5 { background: rgba(var(--color-primary-rgb), 0.7); color: white; }
.heatmap-intensity-max { background: var(--gradient-primary); color: white; }

/* Heatmap Varianten für verschiedene Metriken */
.heatmap-success-1 { background: rgba(var(--color-success-rgb), 0.15); }
.heatmap-success-2 { background: rgba(var(--color-success-rgb), 0.3); }
.heatmap-success-3 { background: rgba(var(--color-success-rgb), 0.5); color: white; }
.heatmap-success-4 { background: rgba(var(--color-success-rgb), 0.7); color: white; }

.heatmap-warning-1 { background: rgba(var(--color-warning-rgb), 0.15); }
.heatmap-warning-2 { background: rgba(var(--color-warning-rgb), 0.3); }
.heatmap-warning-3 { background: rgba(var(--color-warning-rgb), 0.5); color: var(--text-primary); }
.heatmap-warning-4 { background: rgba(var(--color-warning-rgb), 0.7); color: var(--text-primary); }

.heatmap-danger-1 { background: rgba(var(--color-danger-rgb), 0.15); }
.heatmap-danger-2 { background: rgba(var(--color-danger-rgb), 0.3); }
.heatmap-danger-3 { background: rgba(var(--color-danger-rgb), 0.5); color: white; }
.heatmap-danger-4 { background: rgba(var(--color-danger-rgb), 0.7); color: white; }

/* No-Show Heatmap Stufen (Rot-Gradient für schlechte Werte) */
.heatmap-noshow-0 { background: rgba(var(--color-success-rgb), 0.15); color: var(--text-primary); }
.heatmap-noshow-1 { background: rgba(var(--color-warning-rgb), 0.2); color: var(--text-primary); }
.heatmap-noshow-2 { background: rgba(var(--color-warning-rgb), 0.4); color: var(--text-primary); }
.heatmap-noshow-3 { background: rgba(var(--color-danger-rgb), 0.3); color: var(--text-primary); }
.heatmap-noshow-4 { background: rgba(var(--color-danger-rgb), 0.5); color: white; }
.heatmap-noshow-5 { background: rgba(var(--color-danger-rgb), 0.7); color: white; }
.heatmap-noshow-max { background: var(--color-danger); color: white; }

/* Expandable Row (für Wochen-Aufklappung) */
.table-glattt-heatmap .expandable-row {
    cursor: pointer;
    transition: background 0.2s ease;
}

.table-glattt-heatmap .expandable-row:hover {
    background: var(--bg-hover);
}

.table-glattt-heatmap .expandable-row td:first-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.expandable-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--bg-tertiary);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.expandable-icon svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.expandable-row.expanded .expandable-icon {
    background: var(--color-primary);
}

.expandable-row.expanded .expandable-icon svg {
    color: white;
    transform: rotate(90deg);
}

/* Expanded Weeks Rows */
.week-row {
    background: var(--bg-tertiary);
}

.week-row td:first-child {
    padding-left: 2.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.week-row .heatmap-cell {
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Projection/Forecast Cell */
.heatmap-cell-projection {
    position: relative;
}

.heatmap-cell-projection::after {
    content: '↗';
    font-size: 0.625rem;
    margin-left: 4px;
    opacity: 0.7;
}

.projection-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.625rem;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Current Month Highlight */
.current-month-row {
    background: rgba(var(--color-primary-rgb), 0.05);
    border-left: 3px solid var(--color-primary);
}

.current-month-row td:first-child {
    font-weight: 700;
    color: var(--color-primary);
}

/* Summary Row (Totals) */
.summary-row {
    background: var(--bg-tertiary);
    font-weight: 700;
}

.summary-row td {
    border-top: 2px solid var(--border-secondary);
}

/* Scrollable Heatmap Container */
.heatmap-scroll-container {
    overflow-x: auto;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
}

.heatmap-scroll-container::-webkit-scrollbar {
    height: 8px;
}

.heatmap-scroll-container::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.heatmap-scroll-container::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 4px;
}

.heatmap-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--border-primary);
}

/* ===== INLINE SPARKLINE (Mini-Charts in Tabellen) ===== */

.sparkline-glattt {
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
    height: 24px;
    vertical-align: middle;
}

.sparkline-glattt-bar {
    width: 3px;
    background: var(--color-primary);
    border-radius: 1px;
    transition: all 0.2s ease;
}

.sparkline-glattt-bar:hover {
    opacity: 0.7;
}

/* Trend Indicators */
.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
}

.trend-indicator-up {
    color: var(--color-success);
    background: rgba(var(--color-success-rgb), 0.15);
}

.trend-indicator-down {
    color: var(--color-danger);
    background: rgba(var(--color-danger-rgb), 0.15);
}

.trend-indicator-neutral {
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
}

.trend-indicator svg {
    width: 12px;
    height: 12px;
}

/* ===================================================
   GLATTT ICON SYSTEM
   Zentrale SVG-Icons als CSS-Klassen für einheitliches Design
   =================================================== */

/* Base Icon Styles */
.icon-glattt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Icon Sizes */
.icon-glattt-xs { width: 0.875rem; height: 0.875rem; }
.icon-glattt-sm { width: 1rem; height: 1rem; }
.icon-glattt-md { width: 1.25rem; height: 1.25rem; }
.icon-glattt-lg { width: 1.5rem; height: 1.5rem; }
.icon-glattt-xl { width: 2rem; height: 2rem; }

/* ===== CHART/GRAPH ICONS ===== */

/* Bar Chart Icon (3 Balken) - für "Gesamt" Ansicht */
.icon-chart-bar {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Storefront/Shop Icon - für "Standorte" Ansicht */
.icon-storefront {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.378 3h13.243a1.5 1.5 0 011.06.44l1.19 1.189a3 3 0 01-.621 4.72m-13.5 8.65h3.75a.75.75 0 00.75-.75V13.5a.75.75 0 00-.75-.75H6.75a.75.75 0 00-.75.75v3.75c0 .415.336.75.75.75z'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Line Chart Icon - für Trend-Analyse */
.icon-chart-line {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ===== ACTION ICONS ===== */

/* Filter/Funnel Icon (Trichter) */
.icon-filter {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Download Icon */
.icon-download {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Settings/Adjustments Icon */
.icon-settings {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Refresh/Reset Icon */
.icon-refresh {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ===== NAVIGATION/UI ICONS ===== */

/* Arrow Back Icon */
.icon-arrow-back {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Chevron Right Icon */
.icon-chevron-right {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Close/X Icon */
.icon-close {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Calendar Icon */
.icon-calendar {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ===== STATUS ICONS ===== */

/* No-Show/Ban Icon */
.icon-no-show {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Check/Success Icon */
.icon-check {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Image/Photo Icon */
.icon-image {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Code Icon */
.icon-code {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Chat Bubble Icon (Beratungen/Gespräche) */
.icon-chat-bubble {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Users/Group Icon (Kunden) */
.icon-users {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Ticket/Voucher Icon (Gutscheine) */
.icon-ticket {
    --icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z'/%3E%3C/svg%3E");
    background: currentColor;
    -webkit-mask: var(--icon-svg) no-repeat center;
    mask: var(--icon-svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/*
 * ===================================================
 * TEXT UTILITY CLASSES
 * ===================================================
 * Utility-Klassen für konsistente Textfarben
 * basierend auf CSS-Variablen
 */

.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-tertiary {
    color: var(--text-tertiary) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.text-success {
    color: var(--color-success) !important;
}

/*
 * ===================================================
 * LAYOUT UTILITY CLASSES
 * ===================================================
 * Wiederverwendbare Layout-Klassen für konsistente Strukturen
 */

/* Spacing Utilities */
.mb-glattt-sm { margin-bottom: 0.75rem; }
.mb-glattt-md { margin-bottom: 1.5rem; }
.mb-glattt-lg { margin-bottom: 2rem; }
.mt-glattt-sm { margin-top: 0.75rem; }
.mt-glattt-md { margin-top: 1.5rem; }
.mt-glattt-lg { margin-top: 2rem; }
.gap-glattt-sm { gap: 0.5rem; }
.gap-glattt-md { gap: 1rem; }
.gap-glattt-lg { gap: 1.5rem; }

/* Page Header - Titel + Actions */
.page-header-glattt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header-glattt-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-shrink: 0;
}

.page-header-glattt-actions button,
.page-header-glattt-actions .btn-glattt-secondary,
.page-header-glattt-actions .btn-glattt-primary {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Card List - Vertikale Kartenliste */
.card-list-glattt {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Card Row - Horizontale Elemente im Header */
.card-row-glattt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.card-row-glattt-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Card Info Block */
.card-info-glattt {
    flex: 1;
    min-width: 0;
    padding-right: 2rem;
}

.card-info-glattt-title {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-info-glattt-subtitle {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0;
}

/* Meta Grid - Für Detail-Informationen */
.meta-grid-glattt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    font-size: 0.875rem;
}

.meta-grid-glattt-item {
    min-width: 0;
}

.meta-grid-glattt-label {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.125rem;
}

.meta-grid-glattt-value {
    color: var(--text-primary);
}

.meta-grid-glattt-2col {
    grid-template-columns: repeat(2, 1fr);
}

.meta-grid-glattt-3col {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
    .meta-grid-glattt-2col,
    .meta-grid-glattt-3col {
        grid-template-columns: 1fr;
    }
}

/* Detail Line - Icon + Text Zeile (z.B. Kontaktdaten) */
.detail-line-glattt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.detail-line-glattt + .detail-line-glattt {
    margin-top: 0.25rem;
}

.detail-line-glattt-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* Tags/Pills Container */
.tags-glattt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Empty State */
.empty-state-glattt {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state-glattt-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    color: var(--text-tertiary);
    opacity: 0.5;
}

.empty-state-glattt-text {
    color: var(--text-secondary);
    margin: 0;
}

.empty-state-glattt-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.75rem 0 0.25rem;
}

/* Card Body Inner - Spacing für aufgeklappte Inhalte */
.card-glattt-body-inner {
    padding-top: 0.75rem;
}

.card-glattt-body-inner .tags-glattt {
    margin-bottom: 0.75rem;
}

.card-glattt-body-inner .meta-grid-glattt {
    margin-bottom: 0.75rem;
}

/* Responsive */
@media (max-width: 640px) {
    .page-header-glattt {
        flex-direction: column;
        align-items: stretch;
    }
    
    .card-row-glattt {
        flex-wrap: wrap;
    }
    
    .meta-grid-glattt {
        grid-template-columns: 1fr 1fr;
    }
}


/*
 * ===================================================
 * MOBILE NAVIGATION SYSTEM
 * ===================================================
 * Mobile-optimierte Navigation mit:
 * - Vereinfachter Topbar (nur Titel + Burger-Menü)
 * - Bottom Navigation Bar (App-Style)
 */

/* ===== TOPBAR MOBILE STYLES ===== */

/* Mobile User Avatar - standardmäßig versteckt */
.topbar-mobile-avatar {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.topbar-mobile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar-mobile-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 768px) {
    /* Verstecke alle Topbar-Elemente außer Titel/Kicker auf Mobile */
    .topbar-glattt .topbar-mobile-hide {
        display: none !important;
    }
    
    /* User Avatar in Topbar anzeigen */
    .topbar-mobile-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Notifications Dropdown auf Mobile zentrieren */
    .topbar-notifications-dropdown {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        top: auto !important;
        margin-top: 0.5rem;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .topbar-notifications-dropdown .card-glattt {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Kein Hover-Effekt auf Mobile */
    .topbar-notifications-dropdown .card-glattt:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
}

/* ===== MOBILE BOTTOM NAVIGATION (Floating Glass Design) ===== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 12px;
    padding-bottom: env(safe-area-inset-bottom, 8px);
}

.mobile-bottom-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 68px;
    max-width: 440px;
    margin: 0 auto 10px;
    padding: 8px 12px;
    gap: 0;
    
    /* Glass Morphism Effect */
    background: var(--card-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-glass-border);
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Dark Mode Support */
[data-theme="dark"] .mobile-bottom-nav-inner,
.dark .mobile-bottom-nav-inner {
    background: var(--card-glass-bg);
    border-color: var(--card-glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: block;
    }
    
    /* Platz für Bottom Nav schaffen */
    body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0));
    }
    
    /* Sidebar Overlay über Bottom Nav */
    .sidebar-overlay {
        bottom: 0;
    }
}

/* Einzelner Nav-Item */
.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--text-tertiary);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    min-width: 60px;
    border-radius: 999px;
}

.mobile-bottom-nav-item:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

[data-theme="dark"] .mobile-bottom-nav-item:hover,
.dark .mobile-bottom-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-bottom-nav-item:active {
    transform: scale(0.95);
}

/* Active state with pill background */
.mobile-bottom-nav-item.active {
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.12);
}

[data-theme="dark"] .mobile-bottom-nav-item.active,
.dark .mobile-bottom-nav-item.active {
    background: rgba(var(--color-primary-rgb), 0.2);
}

/* Icon Container */
.mobile-bottom-nav-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-bottom-nav-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
    transition: all 0.2s ease;
}

/* Active state: slightly larger and bolder icon */
.mobile-bottom-nav-item.active .mobile-bottom-nav-icon {
    transform: scale(1.05);
}

.mobile-bottom-nav-item.active .mobile-bottom-nav-icon svg {
    stroke-width: 2;
}

/* Label */
.mobile-bottom-nav-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: all 0.2s ease;
}

.mobile-bottom-nav-item.active .mobile-bottom-nav-label {
    font-weight: 600;
}

/* Extra nav items - hidden by default */
.mobile-bottom-nav-extra {
    display: none;
    flex-shrink: 0;
}

/* Expanded state - show all items and make scrollable */
.mobile-bottom-nav-inner.expanded {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.mobile-bottom-nav-inner.expanded::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.mobile-bottom-nav-inner.expanded .mobile-bottom-nav-extra {
    display: flex;
}

/* Prevent items from shrinking when scrolling */
.mobile-bottom-nav-inner.expanded .mobile-bottom-nav-item {
    flex-shrink: 0;
}

/* Toggle button styles */
.mobile-bottom-nav-toggle {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-bottom-nav-toggle .mobile-bottom-nav-icon svg {
    transform-origin: center;
}

.mobile-bottom-nav-toggle .mobile-bottom-nav-icon svg.rotate-45 {
    transform: rotate(45deg);
}

.site-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.site-second-line {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin: 0;
}

/* ===================================================
 * LIVEWIRE NAVIGATION - Progress Bar & Loading States
 * =================================================== */

/* Navigation Progress Bar - Top of page */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--gradient-primary);
    z-index: 99999;
    transition: width 0.3s ease;
    opacity: 0;
}

body.navigating::before {
    width: 30%;
    opacity: 1;
    animation: navigate-progress 2s ease-out forwards;
}

@keyframes navigate-progress {
    0% { width: 0; }
    20% { width: 30%; }
    50% { width: 60%; }
    80% { width: 85%; }
    100% { width: 95%; }
}

/* Content fade during navigation */
body.navigating .dashboard-main-content {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

/* Quick restore when navigation completes */
body:not(.navigating) .dashboard-main-content {
    opacity: 1;
    transition: opacity 0.1s ease;
}

/* Skeleton Loading Pulse */
.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Navigation Loading Overlay (optional - more prominent) */
.nav-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.navigating .nav-loading-overlay {
    opacity: 1;
    pointer-events: auto;
}

.dark .nav-loading-overlay {
    background: rgba(17, 24, 39, 0.3);
}

/* ===================================================
 * APPOINTMENT CARDS - Terminübersicht
 * =================================================== */

.apt-card {
    position: relative;
    background: var(--card-glass-bg);
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.apt-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary);
    transition: background 0.2s ease;
}

.apt-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-secondary);
}

/* Status-Farben am linken Rand */
.apt-card--booked::before { background: var(--color-primary); }
.apt-card--confirmed::before { background: var(--color-success); }
.apt-card--active::before { background: var(--glattt-turquoise); }
.apt-card--completed::before { background: var(--text-tertiary); }
.apt-card--cancelled::before { background: var(--color-danger); }
.apt-card--noshow::before { background: var(--color-danger); }

/* Main Row - Grid Layout */
.apt-card__main {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem 0.875rem 1.25rem;
}

/* Time */
.apt-card__time {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.1);
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
}

.apt-card__time-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Client Info */
.apt-card__client {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.25rem;
}

.apt-card__client-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.apt-card__client-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apt-card__client-name--unknown {
    color: var(--text-tertiary);
    font-style: italic;
}

.apt-card__client-id {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Consultation Badge */
.apt-card__consultation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--glattt-gold) 0%, var(--glattt-gold-light) 100%);
    color: white;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.apt-card__consultation-badge svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.apt-card__client-contact {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.apt-card__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.apt-card__contact-link:hover {
    color: var(--color-primary-dark);
}

.apt-card__contact-link svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

/* Meta Info (Staff, Branch) */
.apt-card__meta {
    display: flex;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.apt-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.apt-card__meta-item svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Status Badge */
.apt-card__status {
    display: flex;
    align-items: center;
}

.apt-card__badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.apt-card__badge--booked {
    background: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary-dark);
}

.apt-card__badge--confirmed {
    background: rgba(var(--color-success-rgb), 0.15);
    color: var(--color-success-dark);
}

.apt-card__badge--active {
    background: var(--glattt-turquoise-light);
    color: var(--glattt-turquoise-dark);
}

.apt-card__badge--completed {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.apt-card__badge--cancelled {
    background: rgba(var(--color-danger-rgb), 0.15);
    color: var(--color-danger-dark);
}

.apt-card__badge--noshow {
    background: rgba(var(--color-danger-rgb), 0.15);
    color: var(--color-danger-dark);
}

/* Actions */
.apt-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.apt-card__btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.apt-card__btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.apt-card__btn--primary {
    background: var(--color-primary);
    color: white;
}

.apt-card__btn--primary:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-primary-sm);
}

.apt-card__expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--bg-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.apt-card__expand svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.apt-card__expand:hover {
    background: var(--bg-tertiary);
}

.apt-card.expanded .apt-card__expand {
    background: var(--color-primary);
}

.apt-card.expanded .apt-card__expand svg {
    color: white;
    transform: rotate(180deg);
}

/* Details (collapsible) - now contains services */
.apt-card__details {
    display: none;
}

.apt-card.expanded .apt-card__details {
    display: block;
}

/* Services (inside details) */
.apt-card__services-full {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem 1.25rem;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.apt-card__services-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    padding-top: 0.25rem;
}

.apt-card__services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.apt-card__service {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(var(--color-secondary-rgb), 0.12);
    color: var(--color-secondary-dark);
    border: 1px solid rgba(var(--color-secondary-rgb), 0.2);
}

.apt-card__service--none {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    border-color: var(--border-primary);
    font-style: italic;
}

/* Skeleton Loading */
.apt-card__skeleton {
    display: inline-block;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: apt-skeleton-shimmer 1.5s infinite;
    border-radius: 0.25rem;
}

.apt-card__skeleton--name {
    width: 140px;
    height: 1.125rem;
}

.apt-card__skeleton--text {
    width: 80px;
    height: 0.875rem;
}

@keyframes apt-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .apt-card__main {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.5rem 1rem;
    }
    
    .apt-card__time { grid-column: 1; grid-row: 1; }
    .apt-card__client { grid-column: 2; grid-row: 1; }
    .apt-card__actions { grid-column: 3; grid-row: 1 / 3; align-self: center; }
    .apt-card__meta { grid-column: 1 / 3; grid-row: 2; }
    .apt-card__status { grid-column: 2; grid-row: 1; justify-self: end; margin-right: 0.5rem; }
}

@media (max-width: 640px) {
    .apt-card__main {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 0.5rem;
        padding: 0.75rem 0.75rem 0.75rem 1rem;
    }
    
    .apt-card__time { grid-column: 1; grid-row: 1; justify-self: start; }
    .apt-card__status { grid-column: 2; grid-row: 1; }
    .apt-card__client { grid-column: 1 / 3; grid-row: 2; }
    .apt-card__meta { grid-column: 1 / 3; grid-row: 3; flex-wrap: wrap; gap: 0.5rem; }
    .apt-card__actions { grid-column: 1 / 3; grid-row: 4; justify-content: stretch; margin-top: 0.25rem; }
    
    .apt-card__btn--primary { flex: 1; justify-content: center; }
    .apt-card__services-full { padding: 0.75rem 0.75rem 1rem 1rem; flex-direction: column; gap: 0.5rem; }
    .apt-card__btn-text { display: none; }
    .apt-card__btn--primary::after { content: 'Öffnen'; }
    .apt-card__contact-link { max-width: 150px; }
}

/* Dark Mode */
.dark .apt-card {
    background: rgba(31, 41, 55, 0.7);
    border-color: var(--border-primary);
}

.dark .apt-card:hover {
    border-color: var(--color-primary);
}

.dark .apt-card__time {
    background: rgba(var(--color-primary-rgb), 0.2);
}

.dark .apt-card__services-full {
    background: rgba(17, 24, 39, 0.5);
}

/* ===== DAY SCHEDULE - Tageskalender mit Mitarbeiter-Spalten ===== */
.day-schedule {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Header mit Mitarbeiter-Namen */
.day-schedule__header {
    display: flex;
    border-bottom: 2px solid var(--border-primary);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.day-schedule__time-header {
    min-width: 60px;
    width: 60px;
    padding: 0.75rem 0.5rem;
    border-right: 1px solid var(--border-primary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.day-schedule__staff-header {
    flex: 1;
    min-width: 150px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-right: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.day-schedule__staff-header:last-child {
    border-right: none;
}

.day-schedule__staff-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.day-schedule__staff-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Body mit Zeitachse und Spalten */
.day-schedule__body {
    display: flex;
    overflow-x: auto;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.day-schedule__time-column {
    min-width: 60px;
    width: 60px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.day-schedule__time-slot {
    height: 60px; /* 1 Stunde = 60px */
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: flex-start;
    padding-top: 0.25rem;
}

.day-schedule__time-slot--half {
    height: 30px;
    border-bottom: 1px dashed var(--border-primary);
}

/* Grid für Termine */
.day-schedule__grid {
    display: flex;
    flex: 1;
}

.day-schedule__staff-column {
    flex: 1;
    min-width: 150px;
    position: relative;
    border-right: 1px solid var(--border-primary);
}

.day-schedule__staff-column:last-child {
    border-right: none;
}

/* Zeitraster-Linien */
.day-schedule__hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-primary);
    pointer-events: none;
}

.day-schedule__half-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-primary);
    opacity: 0.4;
    pointer-events: none;
}

/* Termin-Block */
.day-schedule__event {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 3px solid;
    background: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.day-schedule__event:hover {
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

/* Status-Farben für Events */
.day-schedule__event--confirmed {
    border-left-color: var(--color-success);
    background: var(--color-success-light);
}

.day-schedule__event--pending {
    border-left-color: var(--color-warning);
    background: var(--color-warning-light);
}

.day-schedule__event--checked_in {
    border-left-color: var(--color-primary);
    background: var(--color-info-light);
}

.day-schedule__event--completed {
    border-left-color: var(--glattt-gray);
    background: var(--color-neutral-light);
}

.day-schedule__event--cancelled,
.day-schedule__event--no_show {
    border-left-color: var(--color-danger);
    background: var(--color-danger-light);
    opacity: 0.7;
}

.day-schedule__event--consultation {
    border-left-color: var(--glattt-gold);
    background: linear-gradient(135deg, rgba(210, 170, 57, 0.15), rgba(224, 194, 102, 0.15));
}

.day-schedule__event-time {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.day-schedule__event-client {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-schedule__event-service {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.6875rem;
}

.day-schedule__event-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.day-schedule__event-badge svg {
    width: 0.875rem;
    height: 0.875rem;
    fill: var(--glattt-gold);
}

/* "Jetzt" Linie */
.day-schedule__now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-danger);
    z-index: 10;
    pointer-events: none;
}

.day-schedule__now-line::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-danger);
}

/* Leerer Zustand */
.day-schedule__empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.day-schedule__empty-icon {
    width: 3rem;
    height: 3rem;
    color: var(--text-tertiary);
    margin-bottom: 0.75rem;
}

/* View Toggle */
.view-toggle {
    display: flex;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 0.25rem;
    gap: 0.25rem;
}

.view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 0.375rem;
}

.view-toggle__btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.view-toggle__btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.view-toggle__btn svg {
    width: 1rem;
    height: 1rem;
}

/* Dark Mode */
.dark .day-schedule {
    background: rgba(31, 41, 55, 0.7);
    border-color: var(--border-primary);
}

.dark .day-schedule__header {
    background: rgba(17, 24, 39, 0.8);
}

.dark .day-schedule__time-column {
    background: rgba(17, 24, 39, 0.8);
}

.dark .day-schedule__event {
    background: rgba(31, 41, 55, 0.9);
}

.dark .day-schedule__event--confirmed {
    background: rgba(16, 185, 129, 0.2);
}

.dark .day-schedule__event--pending {
    background: rgba(245, 158, 11, 0.2);
}

.dark .day-schedule__event--checked_in {
    background: rgba(59, 130, 246, 0.2);
}

.dark .day-schedule__event--completed {
    background: rgba(107, 114, 128, 0.2);
}

.dark .day-schedule__event--cancelled,
.dark .day-schedule__event--no_show {
    background: rgba(239, 68, 68, 0.2);
}

.dark .day-schedule__event--consultation {
    background: rgba(210, 170, 57, 0.2);
}

.dark .view-toggle {
    background: rgba(17, 24, 39, 0.8);
}

.dark .view-toggle__btn.active {
    background: rgba(31, 41, 55, 0.9);
}

/* Responsive */
@media (max-width: 768px) {
    .day-schedule__staff-header {
        min-width: 120px;
    }
    
    .day-schedule__staff-column {
        min-width: 120px;
    }
    
    .day-schedule__event {
        font-size: 0.6875rem;
        padding: 0.125rem 0.375rem;
    }
}

/* ===== DASHBOARD GREETING ===== */
.dashboard-greeting {
    padding: 0 0 3rem 0;
}

.dashboard-greeting-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.start-greeting-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.dashboard-greeting-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.dashboard-greeting-date {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .dashboard-greeting {
        padding: 2rem 0;
    }
    .dashboard-greeting-title {
        font-size: 2rem;
    }
    .dashboard-greeting-date {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .dashboard-greeting-title {
        font-size: 1.75rem;
    }
}

/* ===== START PAGE – CARD GRID ===== */

.start-page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.start-page-grid .start-card-full {
    grid-column: 1 / -1;
}

.start-page-grid .start-card-half {
    grid-column: span 1;
}

@media (max-width: 768px) {
    .start-page-grid {
        grid-template-columns: 1fr;
    }
    .start-page-grid .start-card-half {
        grid-column: 1 / -1;
    }
}

/* ===== START PAGE – CARD BASE ===== */

.start-card {
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 1rem;
    padding: 1.5rem;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    min-height: 12rem;
}

.start-card:hover {
    box-shadow: var(--shadow-md);
}

/* ===== START PAGE – CARD HEADER ===== */

.start-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-secondary);
}

.start-card-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.start-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--color-primary-rgb), 0.12);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
}

.start-card-icon svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-primary);
}

.start-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.start-card-body {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ===== START PAGE – EDIT MODE ===== */

.start-page-edit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--color-primary-rgb), 0.08);
    border: 1px dashed rgba(var(--color-primary-rgb), 0.3);
    border-radius: 0.75rem;
}

.start-page-edit-bar-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
}

.start-page-edit-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.start-card.edit-mode {
    cursor: grab;
    border-style: dashed;
    animation: start-card-wobble 0.4s ease-in-out infinite alternate;
}

.start-card.edit-mode:nth-child(even) {
    animation-delay: 0.1s;
    animation-direction: alternate-reverse;
}

.start-card.edit-mode:nth-child(3n) {
    animation-duration: 0.35s;
}

.start-card.edit-mode:active {
    cursor: grabbing;
    animation: none;
}

.start-card.edit-mode.dragging {
    animation: none;
}

@keyframes start-card-wobble {
    0%   { transform: rotate(-0.5deg); }
    100% { transform: rotate(0.5deg); }
}

.start-card.dragging {
    opacity: 0.4;
    transform: scale(0.97);
}

.start-card.drag-over {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15);
}

/* Card Controls (visible in edit mode) */
.start-card-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.start-card.edit-mode .start-card-controls {
    opacity: 1;
}

.start-card-control-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-secondary);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.start-card-control-btn svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--text-tertiary);
}

.start-card-control-btn:hover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.1);
}

.start-card-control-btn:hover svg {
    color: var(--color-primary);
}

.start-card-control-btn-danger:hover {
    border-color: var(--color-danger);
    background: rgba(var(--color-danger-rgb), 0.1);
}

.start-card-control-btn-danger:hover svg {
    color: var(--color-danger);
}

/* Width Toggle Indicator */
.start-card-width-indicator {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    position: absolute;
    bottom: 0.5rem;
    right: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.start-card.edit-mode .start-card-width-indicator {
    opacity: 0.7;
}

/* ===== START PAGE – ADD CARD BUTTON ===== */

.start-card-add {
    background: transparent;
    border: 2px dashed var(--border-secondary);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 12rem;
    color: var(--text-tertiary);
}

.start-card-add:hover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
    color: var(--color-primary);
}

.start-card-add svg {
    width: 2rem;
    height: 2rem;
}

.start-card-add span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ===== START PAGE – ADD CARD MODAL (Item Styles) ===== */

.start-add-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.start-add-modal-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-secondary);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    width: 100%;
    text-align: left;
}

.start-add-modal-item:hover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
}

.start-add-modal-item-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--color-primary-rgb), 0.12);
}

.start-add-modal-item-icon svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-primary);
}

.start-add-modal-item-text {
    flex: 1;
}

.start-add-modal-item-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    display: block;
}

.start-add-modal-item-desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    display: block;
    margin-top: 0.125rem;
}

/* ===== START PAGE – NEWS CARD (Featured Layout) ===== */

/* Hero card – 1st news item */
.start-news-featured {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    min-height: 220px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-secondary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.start-news-featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.start-news-featured-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
    display: flex;
    align-items: flex-end;
}

.start-news-featured-content {
    padding: 1.5rem;
    width: 100%;
}

.start-news-featured-date {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
}

.start-news-featured-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.375rem 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.start-news-featured-desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Secondary news items (2nd + 3rd) */
.start-news-secondary-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.75rem;
}

.start-news-secondary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.start-news-secondary:hover {
    background: var(--bg-secondary);
}

.start-news-secondary-img {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.start-news-secondary-content {
    flex: 1;
    min-width: 0;
}

.start-news-secondary-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.125rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.start-news-secondary-meta {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}

.start-news-footer {
    margin-top: 0.75rem;
    text-align: right;
}

/* News modal content (shared with news-archiv) */
.news-modal-content-html {
    color: var(--text-primary);
    line-height: 1.75;
}

.news-modal-content-html p {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.news-modal-content-html strong {
    font-weight: 600;
    color: var(--color-primary);
}

.news-modal-content-html ul,
.news-modal-content-html ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.news-modal-content-html li {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.news-modal-content-html h1,
.news-modal-content-html h2,
.news-modal-content-html h3 {
    font-weight: 600;
    margin: 1.5rem 0 1rem 0;
    color: var(--text-primary);
}

.news-modal-content-html h1 { font-size: 1.875rem; }
.news-modal-content-html h2 { font-size: 1.5rem; }
.news-modal-content-html h3 { font-size: 1.25rem; }

.news-modal-content-html a {
    color: var(--color-primary);
    text-decoration: underline;
}

.news-modal-content-html a:hover {
    color: var(--color-primary-dark);
}

.news-modal-content-html blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* ===== START PAGE – QUICKLINKS CARD ===== */

.start-quicklinks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.start-quicklink-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.start-quicklink-item:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
}

.start-quicklink-item svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.start-quicklinks-edit-hint {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-top: 0.5rem;
    text-align: center;
    padding: 0.5rem;
    border: 1px dashed var(--border-secondary);
    border-radius: 0.5rem;
}

/* ===== START PAGE – MITTEILUNGEN CARD ===== */

.start-mitteilungen-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.start-mitteilung-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    transition: background 0.2s ease;
    cursor: pointer;
}

.start-mitteilung-item:hover {
    background: var(--bg-secondary);
}

.start-mitteilung-unread {
    font-weight: 600;
}

.start-mitteilung-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.start-mitteilung-icon svg {
    width: 1rem;
    height: 1rem;
}

.start-mitteilung-icon-info {
    background: rgba(var(--color-info-rgb), 0.12);
    color: var(--color-info);
}

.start-mitteilung-icon-warning {
    background: rgba(var(--color-warning-rgb), 0.12);
    color: var(--color-warning);
}

.start-mitteilung-icon-success {
    background: rgba(var(--color-success-rgb), 0.12);
    color: var(--color-success);
}

.start-mitteilung-icon-error {
    background: rgba(var(--color-danger-rgb), 0.12);
    color: var(--color-danger);
}

.start-mitteilung-content {
    flex: 1;
    min-width: 0;
}

.start-mitteilung-title {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.start-mitteilung-time {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
}

.start-mitteilungen-footer {
    margin-top: 0.75rem;
    text-align: center;
}

/* ===== START PAGE – KPI CONFIG MODAL ===== */

.start-kpi-config-categories {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 24rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.start-kpi-config-category-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
}

.start-kpi-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.375rem;
}

.start-kpi-config-item-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.start-kpi-config-counter {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ===== START PAGE – CHARTS CARD ===== */

.start-chart-container {
    position: relative;
    width: 100%;
    min-height: 16rem;
}

.start-chart-container canvas {
    width: 100% !important;
    height: 16rem !important;
}

.start-card-subtitle {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.25;
}

/* ===== START PAGE – CHART CONFIG MODAL ===== */

.start-chart-config-categories {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.start-chart-config-category-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
}

.start-chart-config-grid {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.start-chart-config-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-secondary);
    border-radius: 0.625rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.start-chart-config-item:hover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.03);
}

.start-chart-config-item-active {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
}

.start-chart-config-item-radio {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
    transition: all 0.2s ease;
}

.start-chart-config-item-active .start-chart-config-item-radio {
    border-color: var(--color-primary);
}

.start-chart-config-item-radio-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: transparent;
    transition: all 0.2s ease;
}

.start-chart-config-item-active .start-chart-config-item-radio-dot {
    background: var(--color-primary);
}

.start-chart-config-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.start-chart-config-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.start-chart-config-badge {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
    line-height: 1.4;
}

.start-chart-config-item-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.start-chart-config-item-desc {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.start-chart-tab {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid var(--border-secondary);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.start-chart-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.start-chart-tab-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ===== START PAGE – LOADING ===== */

.start-card-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-tertiary);
    gap: 0.75rem;
}

.start-card-loading-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-secondary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ===== START PAGE – EMPTY STATE ===== */

.start-card-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-tertiary);
    text-align: center;
    gap: 0.5rem;
}

.start-card-empty svg {
    width: 2rem;
    height: 2rem;
    opacity: 0.5;
}

.start-card-empty span {
    font-size: 0.875rem;
}

/* ===== START PAGE – QUICKLINK CONFIG MODAL ===== */

.start-quicklink-config {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.start-quicklink-config-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-secondary);
    border-radius: 0.625rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.start-quicklink-config-item:hover {
    border-color: var(--color-primary);
}

.start-quicklink-config-item-active {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
}

.start-quicklink-config-check {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    border: 2px solid var(--border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.start-quicklink-config-item-active .start-quicklink-config-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.start-quicklink-config-check svg {
    width: 0.75rem;
    height: 0.75rem;
    color: #fff;
    opacity: 0;
}

.start-quicklink-config-item-active .start-quicklink-config-check svg {
    opacity: 1;
}

.start-quicklink-config-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ===== PROFILE PAGE ===== */

.profile-section {
    margin-bottom: 1.5rem;
}

.profile-row-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .profile-row-2col {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 1.5rem;
    }
    .profile-row-2col .profile-section {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }
    .profile-row-2col .profile-section > .card-glattt {
        flex: 1;
    }
}

/* Avatar Fallback (Gradient mit Initialen) */
.avatar-glattt-fallback {
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 700;
}

/* Device Icon (z.B. Browser-Sessions) */
.device-icon-glattt {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(59, 155, 159, 0.12) 0%, rgba(93, 190, 194, 0.18) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.device-icon-glattt svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
}

.dark .device-icon-glattt {
    background: linear-gradient(135deg, rgba(59, 155, 159, 0.2) 0%, rgba(93, 190, 194, 0.15) 100%);
}

.dark .device-icon-glattt svg {
    color: var(--color-primary-light);
}

/* PIN Input */
.input-glattt-pin {
    text-align: center;
    font-size: 1.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.5rem;
}

/* 2FA Code Input */
.input-glattt-code {
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.3rem;
    max-width: 200px;
}

/* Recovery Code Item */
.recovery-code-item {
    padding: 0.375rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 0.5rem;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
}

.dark .recovery-code-item {
    background: var(--bg-secondary);
}

/* QR Code Container */
.qr-code-container {
    display: flex;
    justify-content: center;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--bg-primary);
    border-radius: 0.75rem;
    border: 1px solid var(--border-primary);
}

.dark .qr-code-container {
    background: var(--bg-secondary);
    border-color: var(--border-secondary);
}

/* Profile Page Header Info */
.profile-header-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.profile-header-email {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ================================================================
   INSTITUTE — Overview, Detail, Staff, Laser-Tab, NiSV
   ================================================================ */

/* ===== INSTITUTE OVERVIEW CARDS ===== */

.institute-overview-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 280px;
    display: block;
}

.institute-overview-card:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-xl);
}

.institute-card-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.institute-card-gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--overlay-gradient-dark);
}

.institute-card-gradient-bielefeld {
    background: var(--gradient-bielefeld);
}

.institute-card-gradient-bremen {
    background: var(--gradient-bremen);
}

.institute-card-gradient-hannover {
    background: var(--gradient-hannover);
}

.institute-card-gradient-osnabrueck {
    background: var(--gradient-osnabrueck);
}

.institute-card-gradient-braunschweig {
    background: var(--gradient-braunschweig);
}

.institute-card-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    z-index: 3;
    background-image: var(--pattern-overlay);
}

.institute-card-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    z-index: 10;
}

.institute-card-icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.institute-card-custom-icon {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.institute-card-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 500;
}

.institute-overview-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-white) !important;
    margin-bottom: 0.5rem;
    text-shadow: var(--text-shadow-dark);
    line-height: 1.2;
}

.institute-card-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-white) !important;
    font-size: 0.875rem;
    font-weight: 500;
}

.institute-card-link svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s ease;
    color: var(--color-white) !important;
}

.institute-overview-card:hover .institute-card-link svg {
    transform: translateX(0.25rem);
}

/* ===== INSTITUTE DETAIL ===== */

.institute-detail-header {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    background: var(--gradient-institute-header);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
}

.breadcrumb-glattt {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: all 0.2s;
    text-decoration: none;
}

.breadcrumb-glattt:hover {
    background: var(--bg-tertiary);
    color: var(--color-primary);
}

.institute-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .institute-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.institute-info-grid-full {
    grid-column: 1 / -1;
}

/* ===== NiSV STATUS BADGES ===== */

.nisv-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.nisv-badge-label {
    color: var(--text-tertiary);
}

.nisv-badge-status {
    font-weight: 700;
}

.nisv-badge-green {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

.nisv-badge-yellow {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.nisv-badge-orange {
    background-color: var(--color-orange-light);
    color: var(--color-orange-dark);
}

.nisv-badge-red {
    background-color: var(--color-danger-light);
    color: var(--color-danger-dark);
}

/* ===== INSTITUTE LASER TAB ===== */

.institute-laser-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .institute-laser-grid {
        grid-template-columns: 1fr;
    }
}

.institute-laser-card {
    background: var(--bg-primary);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    display: block;
    text-decoration: none;
    max-width: 100%;
    width: 100%;
}

.institute-laser-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--border-primary);
}

.laser-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.laser-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.laser-card-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.laser-card-section {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-primary);
}

.laser-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-primary);
}

.laser-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--color-info-light);
    color: var(--color-primary-dark);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.maintenance-stale-text {
    color: var(--color-warning) !important;
    font-weight: 600;
}

.maintenance-overdue-text {
    color: var(--color-danger) !important;
    font-weight: 600;
}

.maintenance-stale-icon {
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Laser Badge System */
.laser-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.laser-badge-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    gap: 0.25rem;
}

.laser-badge-compact {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
}

.badge-icon {
    font-size: 1.125rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.laser-badge-sm .badge-icon,
.laser-badge-compact .badge-icon {
    font-size: 1rem;
}

.laser-badge-success {
    background: var(--badge-success-gradient);
    color: var(--color-success-dark);
    border-color: var(--color-success);
}

.laser-badge-warning {
    background: var(--badge-warning-gradient);
    color: var(--color-warning-dark);
    border-color: var(--color-warning);
}

.laser-badge-danger,
.laser-badge-overdue {
    background: var(--badge-danger-gradient);
    color: var(--color-danger-dark);
    border-color: var(--color-danger);
}

.laser-badge-neutral {
    background: var(--badge-neutral-gradient);
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

/* Laser Components */
.laser-components {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-primary);
}

.laser-components-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.875rem;
}

.component-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.component-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.component-status-dot.status-1 { background-color: var(--color-success); }
.component-status-dot.status-2 { background-color: var(--color-info); }
.component-status-dot.status-3 { background-color: var(--color-warning); }
.component-status-dot.status-4 { background-color: var(--color-orange); }
.component-status-dot.status-5 { background-color: var(--color-danger); }

/* ===== INSTITUTE STAFF GRID ===== */

.institute-staff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 1024px) {
    .institute-staff-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .institute-staff-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== INSTITUTE GRID (Overview Page) ===== */

.institute-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .institute-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .institute-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== INSTITUTE COMPONENT GRID ===== */

.institute-component-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

/* ===== INSTITUTE LINK (staff arrow, laser arrow) ===== */

.institute-link-arrow {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-tertiary);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.card-glattt-interactive:hover .institute-link-arrow,
.institute-laser-card:hover .institute-link-arrow {
    color: var(--color-primary);
    transform: translateX(0.25rem);
}

/* ===== INSTITUTE STATS ICON ===== */

.institute-stats-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.institute-stats-icon-primary {
    background: var(--color-primary-light);
}

.institute-stats-icon-success {
    background: var(--color-success-light);
}

.institute-stats-icon-secondary {
    background: var(--color-secondary-light);
}

/* ===== INSTITUTE IMAGE SECTION ===== */
.institute-image-container {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.institute-image-preview {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.institute-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.institute-image-container:hover .institute-image-overlay {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.institute-image-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* ===== INSTITUTE MAP ===== */
.institute-map-container {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 400px;
}

/* ==========================================================================
   TREATMENT SETTINGS (Termin-Behandlung)
   Aus treatment-settings.css migriert
   ========================================================================== */

/* Body zone selector treatment variant */
.treatment-body-selector {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    align-items: center;
}

.body-zone-selector-treatment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 1rem 0;
    width: 100%;
    max-width: 1200px;
}

.body-zone-selector-treatment .body-zone-graphic {
    position: relative;
    width: 100%;
    max-width: 650px;
    aspect-ratio: 1;
    user-select: none;
}

@media (min-height: 800px) {
    .body-zone-selector-treatment .body-zone-graphic {
        max-width: 550px;
    }
}

@media (min-height: 900px) {
    .body-zone-selector-treatment .body-zone-graphic {
        max-width: 600px;
    }
}

@media (min-height: 1000px) {
    .body-zone-selector-treatment .body-zone-graphic {
        max-width: 700px;
    }
}

.body-zone-selector-treatment .body-zone-graphic-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 10;
}

.body-zone-selector-treatment .body-zone-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    z-index: 5;
}

.body-zone-selector-treatment .body-zone-layer.active {
    opacity: 1;
}

.body-zone-selector-treatment .body-zone-layer.configured {
    opacity: 0.4;
}

.body-zone-selector-treatment .body-zone-layer.previously-treated {
    opacity: 0.25;
}

.body-zone-selector-treatment .body-zone-click-areas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    cursor: pointer;
}

.body-zone-selector-treatment .body-zone-area {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0.3;
    cursor: pointer;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.body-zone-selector-treatment .body-zone-area:hover {
    fill: rgba(59, 155, 159, 0.3);
    stroke: rgba(59, 155, 159, 0.6);
}

.body-zone-selector-treatment .body-zone-area.configured {
    fill: rgba(34, 197, 94, 0.15);
}

.body-zone-selector-treatment .body-zone-area.configured:hover {
    fill: rgba(34, 197, 94, 0.35);
    stroke: rgba(34, 197, 94, 0.6);
}

.body-zone-selector-treatment .body-zone-area.previously-treated {
    fill: rgba(59, 155, 159, 0.1);
}

.body-zone-selector-treatment .body-zone-area.previously-treated:hover {
    fill: rgba(59, 155, 159, 0.35);
    stroke: rgba(59, 155, 159, 0.6);
}

.dark .body-zone-selector-treatment .body-zone-graphic {
    background: #efefef;
    border-radius: 1rem;
    padding: 1rem;
}

/* Zone buttons list */
.body-zone-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 1rem;
    border: 1px solid var(--border-primary);
}

.body-zone-button-category {
    display: flex;
    flex-direction: column;
}

.body-zone-button-category-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
    white-space: nowrap;
}

.body-zone-button-grid {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.body-zone-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.body-zone-button:hover,
.body-zone-button.highlighted {
    border-color: var(--color-primary);
    background: rgba(59, 155, 159, 0.1);
    color: var(--color-primary);
}

.body-zone-button.configured {
    border-color: var(--color-success);
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
}

.body-zone-button.configured:hover,
.body-zone-button.configured.highlighted {
    background: rgba(34, 197, 94, 0.2);
}

.body-zone-button.previously-treated {
    border-color: var(--color-primary);
    background: rgba(59, 155, 159, 0.08);
}

.body-zone-button.previously-treated:hover,
.body-zone-button.previously-treated.highlighted {
    background: rgba(59, 155, 159, 0.15);
}

.body-zone-button-history {
    display: flex;
    align-items: center;
    color: var(--color-primary);
}

.body-zone-button-history svg {
    width: 0.875rem;
    height: 0.875rem;
}

.body-zone-button-count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.body-zone-button.previously-treated .body-zone-button-count {
    color: var(--color-primary);
    background: rgba(59, 155, 159, 0.15);
}

.body-zone-button-icon {
    display: flex;
    align-items: center;
}

.body-zone-button-icon svg {
    width: 0.875rem;
    height: 0.875rem;
}

.body-zone-button-custom {
    position: relative;
}

.body-zone-button-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.body-zone-button-delete {
    display: flex;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
}

.body-zone-button-delete:hover {
    opacity: 1;
    color: var(--color-danger);
}

.body-zone-button-delete svg {
    width: 0.75rem;
    height: 0.75rem;
}

.body-zone-add-custom {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.body-zone-custom-input {
    flex: 1;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-family: inherit;
}

.body-zone-custom-input::placeholder {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
}

.body-zone-custom-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.body-zone-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.body-zone-add-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: rgba(59, 155, 159, 0.1);
    color: var(--color-primary);
}

.body-zone-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.body-zone-add-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

.body-zone-custom-category {
    grid-column: 1 / -1;
}

.body-zone-custom-category .body-zone-button-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.body-zone-custom-category .body-zone-add-custom {
    min-width: 180px;
    max-width: 220px;
}

@media (max-width: 1100px) {
    .body-zone-buttons {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .body-zone-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .body-zone-buttons {
        grid-template-columns: 1fr;
    }
}

/* Configured zones summary */
.configured-zones-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 1px solid var(--border-primary);
}

.configured-zones-summary:empty {
    display: none;
}

.configured-zone-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.configured-zone-chip:hover {
    background: var(--color-success);
    color: white;
}

.configured-zone-chip svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-success);
}

.configured-zone-chip:hover svg {
    color: white;
}

.configured-zone-chip .chip-values {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.configured-zone-chip:hover .chip-values {
    color: rgba(255, 255, 255, 0.8);
}

/* Treatment Form Modal */
.treatment-form-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.treatment-form-container {
    background: var(--bg-primary);
    border-radius: 1.25rem;
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.treatment-form-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 10;
}

.treatment-form-header h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.treatment-form-close {
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.treatment-form-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.treatment-form-close svg {
    width: 1.75rem;
    height: 1.75rem;
}

.treatment-form-body {
    padding: 1.25rem;
}

/* Treatment table extensions */
.treatment-table-wrapper {
    margin-bottom: 0;
    border: none;
    border-radius: 0.5rem;
}

.treatment-table-wrapper .table-glattt th {
    text-align: center !important;
    padding: 0.75rem 0.5rem !important;
}

.treatment-table-wrapper .table-glattt td {
    padding: 0.5rem 0.375rem !important;
    text-align: center !important;
}

.treatment-notes-text {
    display: block;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    text-align: left;
}

.treatment-table-textarea {
    width: 100%;
    min-width: 140px;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    resize: vertical;
    min-height: 40px;
}

.treatment-table-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-primary);
}

/* Treatment photo buttons */
.treatment-photo-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.treatment-photo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 36px;
    min-height: 36px;
}

.treatment-photo-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(59, 155, 159, 0.1);
}

.treatment-photo-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.treatment-photo-btn-small {
    min-width: 28px;
    min-height: 28px;
    padding: 0.25rem;
    position: relative;
}

.treatment-photo-btn-small svg {
    width: 0.875rem;
    height: 0.875rem;
}

.photo-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 0.625rem;
    background: var(--color-primary);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.treatment-photo-btn-small .photo-count-badge {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    min-width: 1rem;
    height: 1rem;
    font-size: 0.625rem;
}

/* Photo Gallery Modal */
.photo-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    padding: 1rem;
}

.photo-gallery-container {
    background: var(--bg-primary);
    border-radius: 1rem;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.photo-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-primary);
}

.photo-gallery-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.photo-gallery-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.photo-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.photo-gallery-item:hover {
    transform: scale(1.02);
}

.photo-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-gallery-item-delete {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.375rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.photo-gallery-item:hover .photo-gallery-item-delete {
    opacity: 1;
}

.photo-gallery-item-delete:hover {
    background: var(--color-danger);
}

.photo-gallery-item-delete svg {
    width: 1rem;
    height: 1rem;
}

.photo-gallery-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.photo-gallery-empty svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.photo-upload-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--text-secondary);
}

/* Treatment rows */
.treatment-row-history {
    background: var(--bg-secondary) !important;
}

.treatment-row-history:hover {
    transform: none !important;
    box-shadow: none !important;
}

.treatment-row-history td {
    color: var(--text-secondary) !important;
    font-size: 0.8125rem !important;
}

.treatment-highlight {
    display: inline-block;
    font-weight: 700;
    color: var(--color-primary) !important;
    background: rgba(59, 155, 159, 0.15);
    border-radius: 0.375rem;
    padding: 0.25rem 0.625rem;
    min-width: 2.5rem;
    text-align: center;
}

.treatment-row-current {
    background: var(--bg-primary) !important;
    border-top: 2px solid var(--color-primary) !important;
}

.treatment-row-current:hover {
    transform: none !important;
    box-shadow: none !important;
}

.treatment-row-current td {
    padding: 0.625rem 0.375rem !important;
}

.current-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: white;
    font-weight: 700;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
}

/* Treatment table inputs */
.treatment-table-input {
    width: 100%;
    padding: 0.5rem 0.375rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    text-align: center;
    font-family: inherit;
    min-height: 44px;
}

.treatment-table-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-primary);
}

.treatment-table-input-small {
    width: 50px;
    padding: 0.375rem 0.25rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    text-align: center;
    font-family: inherit;
    min-height: 40px;
}

.treatment-table-input-small:focus {
    outline: none;
    border-color: var(--color-primary);
}

.treatment-input-highlight {
    background: rgba(59, 155, 159, 0.1);
    border-color: var(--color-primary);
}

.treatment-table-jules {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: center;
}

.treatment-table-jules span {
    color: var(--text-tertiary);
}

.treatment-table-select {
    width: 100%;
    padding: 0.5rem 0.25rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    min-height: 44px;
    cursor: pointer;
}

.treatment-table-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.treatment-table-btns {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.treatment-table-btn {
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 40px;
    min-width: 32px;
}

.treatment-table-btn:hover {
    border-color: var(--color-primary);
}

.treatment-table-btn.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Treatment form footer */
.treatment-form-footer {
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-primary);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    position: sticky;
    bottom: 0;
    background: var(--bg-primary);
}

.treatment-form-footer button {
    min-height: 52px;
    padding: 0.875rem 2rem;
    font-size: 1.0625rem;
    border-radius: 0.625rem;
}

/* Save indicator */
.save-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.save-indicator.saving {
    color: var(--glattt-gold);
}

.save-indicator.saved {
    color: var(--color-success);
}

.save-indicator.error {
    color: var(--color-danger);
}

.save-indicator svg {
    width: 1rem;
    height: 1rem;
}

/* ==========================================================================
   KPI DASHBOARD (Dashboard KPI-Karten)
   Aus kpi-dashboard.css migriert
   ========================================================================== */

.kpi-dashboard {
    position: relative;
}

.kpi-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1024px) {
    .kpi-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .kpi-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.kpi-card {
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 1rem;
    padding: 1.25rem;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.kpi-dashboard:not(.edit-mode) .kpi-card {
    cursor: default;
    user-select: auto;
    -webkit-user-drag: none;
}

.kpi-dashboard.edit-mode .kpi-card[draggable="true"] {
    cursor: grab;
}

.kpi-dashboard.edit-mode .kpi-card[draggable="true"]:active {
    cursor: grabbing;
}

.kpi-card.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: var(--shadow-lg);
}

.kpi-card.drag-over {
    border: 2px dashed var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
}

.kpi-card-drag-handle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: grab;
}

.kpi-dashboard.edit-mode .kpi-card:hover .kpi-card-drag-handle {
    opacity: 1;
}

.kpi-card-drag-handle:hover {
    color: var(--text-secondary);
}

.kpi-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.kpi-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.kpi-card-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-secondary);
}

.kpi-card-icon-primary { background: rgba(var(--color-primary-rgb), 0.15); border-color: rgba(var(--color-primary-rgb), 0.25); }
.kpi-card-icon-primary svg { color: var(--color-primary); }
.kpi-card-icon-secondary { background: rgba(var(--color-secondary-rgb), 0.15); border-color: rgba(var(--color-secondary-rgb), 0.25); }
.kpi-card-icon-secondary svg { color: var(--color-secondary); }
.kpi-card-icon-success { background: rgba(var(--color-success-rgb), 0.15); border-color: rgba(var(--color-success-rgb), 0.25); }
.kpi-card-icon-success svg { color: var(--color-success); }
.kpi-card-icon-warning { background: rgba(var(--color-warning-rgb), 0.15); border-color: rgba(var(--color-warning-rgb), 0.25); }
.kpi-card-icon-warning svg { color: var(--color-warning); }
.kpi-card-icon-danger { background: rgba(var(--color-danger-rgb), 0.15); border-color: rgba(var(--color-danger-rgb), 0.25); }
.kpi-card-icon-danger svg { color: var(--color-danger); }
.kpi-card-icon-info { background: rgba(var(--color-info-rgb), 0.15); border-color: rgba(var(--color-info-rgb), 0.25); }
.kpi-card-icon-info svg { color: var(--color-info); }
.kpi-card-icon-gold { background: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.25); }
.kpi-card-icon-gold svg { color: #f59e0b; }
.kpi-card-icon-neutral { background: rgba(107, 114, 128, 0.15); border-color: rgba(107, 114, 128, 0.25); }
.kpi-card-icon-neutral svg { color: var(--text-tertiary); }

.kpi-card-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
    flex: 1;
    padding-right: 1.5rem;
}

.kpi-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.75rem;
}

.kpi-card-value-sm { font-size: 1.5rem; }
.kpi-card-value-lg { font-size: 2.5rem; }

.kpi-card-value-unit {
    font-size: 0.5em;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-left: 0.25rem;
}

.kpi-card-subtitle {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
}

.kpi-card-comparisons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: auto;
}

.kpi-comparison {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    white-space: nowrap;
}

.kpi-comparison-value { font-weight: 600; }
.kpi-comparison-label { color: var(--text-tertiary); font-weight: 400; }
.kpi-comparison-up { background: rgba(var(--color-success-rgb), 0.1); color: var(--color-success); }
.kpi-comparison-down { background: rgba(var(--color-danger-rgb), 0.1); color: var(--color-danger); }
.kpi-comparison-neutral { background: var(--bg-tertiary); color: var(--text-tertiary); }
.kpi-comparison svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

.kpi-card-sparkline {
    height: 2rem;
    margin-top: 0.75rem;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.kpi-card-sparkline-bar {
    flex: 1;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.kpi-card:hover .kpi-card-sparkline-bar { opacity: 1; }

/* KPI Card Variants */
.kpi-card-featured {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: none;
    color: white;
}

.kpi-card-featured .kpi-card-label,
.kpi-card-featured .kpi-card-value { color: white; }
.kpi-card-featured .kpi-card-icon { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }
.kpi-card-featured .kpi-card-icon svg { color: white; }
.kpi-card-featured .kpi-comparison { background: rgba(255, 255, 255, 0.2); color: white; }
.kpi-card-featured .kpi-comparison-label { color: rgba(255, 255, 255, 0.8); }
.kpi-card-featured .kpi-card-drag-handle { color: rgba(255, 255, 255, 0.6); }
.kpi-card-featured:hover .kpi-card-drag-handle { color: white; }

.kpi-card-compact { padding: 1rem; }
.kpi-card-compact .kpi-card-value { font-size: 1.5rem; margin-bottom: 0.5rem; }
.kpi-card-compact .kpi-card-icon { width: 2rem; height: 2rem; }
.kpi-card-compact .kpi-card-icon svg { width: 1rem; height: 1rem; }

/* KPI Hidden Section */
.kpi-dashboard-hidden { margin-top: 1.5rem; padding-top: 0; }

.kpi-dashboard-hidden-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kpi-dashboard-hidden-toggle::before,
.kpi-dashboard-hidden-toggle::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-primary);
}

.kpi-dashboard-hidden-toggle:hover { color: var(--text-secondary); }
.kpi-dashboard-hidden-toggle:hover::before,
.kpi-dashboard-hidden-toggle:hover::after { background: var(--border-secondary); }
.kpi-dashboard-hidden-toggle svg { width: 1rem; height: 1rem; transition: transform 0.3s ease; flex-shrink: 0; }
.kpi-dashboard-hidden-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.kpi-dashboard-hidden-content { margin-top: 1rem; }

.kpi-dashboard-hidden-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

/* KPI Empty Slot */
.kpi-card-empty {
    background: transparent;
    border: 2px dashed var(--border-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    cursor: pointer;
    opacity: 0.6;
}

.kpi-card-empty:hover {
    opacity: 1;
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.03);
    transform: none;
    box-shadow: none;
}

.kpi-card-empty svg { width: 1.5rem; height: 1.5rem; color: var(--text-tertiary); margin-bottom: 0.5rem; }
.kpi-card-empty span { font-size: 0.8125rem; color: var(--text-tertiary); }

/* KPI Edit Mode */
.kpi-dashboard.edit-mode .kpi-card { animation: kpi-wiggle 0.3s ease-in-out infinite alternate; }
.kpi-dashboard.edit-mode .kpi-card:nth-child(2n) { animation-delay: 0.15s; }
.kpi-dashboard.edit-mode .kpi-card-drag-handle { opacity: 1; }

@keyframes kpi-wiggle {
    0% { transform: rotate(-0.5deg); }
    100% { transform: rotate(0.5deg); }
}

.kpi-card-remove {
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-danger);
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease;
    z-index: 10;
}

.kpi-card-remove:hover { transform: scale(1.1); }
.kpi-card-remove svg { width: 0.875rem; height: 0.875rem; }
.kpi-dashboard.edit-mode .kpi-card-remove { display: flex; }

/* KPI Dashboard Header */
.kpi-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.kpi-dashboard-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.kpi-dashboard-actions { display: flex; align-items: center; gap: 0.5rem; }

.kpi-dashboard-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kpi-dashboard-edit-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.kpi-dashboard-edit-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.kpi-dashboard-edit-btn svg { width: 1rem; height: 1rem; }

/* KPI Loading State */
.kpi-card-loading { pointer-events: none; }

.kpi-card-loading .kpi-card-value,
.kpi-card-loading .kpi-card-label,
.kpi-card-loading .kpi-comparison {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: kpi-shimmer 1.5s infinite;
    border-radius: 0.25rem;
    color: transparent;
}

@keyframes kpi-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.dark .kpi-comparison-up { background: rgba(var(--color-success-rgb), 0.2); }
.dark .kpi-comparison-down { background: rgba(var(--color-danger-rgb), 0.2); }
.dark .kpi-card-featured { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }

/* ==========================================================================
   NiSV TIMELINE (Horizontale NiSV-Schritte)
   Aus nisv-timeline.css migriert
   ========================================================================== */

/* NiSV Status Badge (Termin-Seite) */
.status-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    min-width: 220px;
    box-shadow: var(--shadow-md);
}

.status-badge .text-sm { width: 100%; }
.status-badge .badge-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }
.status-badge .badge-details { font-size: 0.75rem; line-height: 1.3; }
.status-badge .badge-details > div > div { display: inline-block; margin-right: 0.75rem; white-space: nowrap; }

.status-badge.status-red { background-color: var(--color-danger-light); border-color: var(--color-danger); }
.status-badge.status-orange { background-color: var(--color-orange-light); border-color: var(--color-orange); }
.status-badge.status-yellow { background-color: var(--color-warning-light); border-color: var(--color-warning); }
.status-badge.status-green { background-color: var(--color-success-light); border-color: var(--color-success); }

.status-badge .badge-title.status-red { color: var(--color-danger-dark); }
.status-badge .badge-title.status-orange { color: var(--color-orange-dark); }
.status-badge .badge-title.status-yellow { color: var(--color-warning-dark); }
.status-badge .badge-title.status-green { color: var(--color-success-dark); }
.status-badge .badge-details.status-red { color: var(--color-danger-dark); }
.status-badge .badge-details.status-orange { color: var(--color-orange-dark); }
.status-badge .badge-details.status-yellow { color: var(--color-warning-dark); }
.status-badge .badge-details.status-green { color: var(--color-success-dark); }

/* Status Badge Variants (User-Detail) */
.status-badge.expired {
    background: var(--badge-danger-gradient);
    color: var(--text-inverse);
}

.status-badge.expiring-soon {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    color: var(--color-warning-dark);
}

.status-badge.certified {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: var(--text-inverse);
}

/* Timeline Header */
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
}

.timeline-header .cursor-pointer { user-select: none; }
.timeline-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.timeline-header p { color: var(--text-secondary); font-size: 0.875rem; }

.timeline-content { margin-top: 1.5rem; padding-top: 1.5rem; }

/* Horizontal Timeline Steps */
.timeline-steps-horizontal {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin-bottom: 3rem;
    padding: 0 1rem;
}

.timeline-steps-horizontal::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 5%;
    right: 5%;
    height: 3px;
    background: var(--border-secondary);
    z-index: 0;
}

.timeline-step-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    flex: 1;
    max-width: 140px;
}

.timeline-step-button:hover .timeline-marker { transform: scale(1.1); }

.timeline-marker {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: var(--shadow-md);
}

.timeline-step-button.pending .timeline-marker {
    background: var(--bg-tertiary);
    border: 3px solid var(--border-secondary);
    color: var(--text-secondary);
}

.timeline-step-button.in-progress .timeline-marker,
.timeline-step-button.active .timeline-marker {
    background: var(--gradient-component-header);
    border: 3px solid var(--color-info-dark);
    color: var(--text-inverse);
    box-shadow: 0 0 0 6px var(--color-info-light);
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.timeline-step-button.completed .timeline-marker {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    border: 3px solid var(--color-success-dark);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
}

.timeline-step-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.2;
    max-width: 120px;
}

.timeline-step-button.active .timeline-step-label,
.timeline-step-button.in-progress .timeline-step-label { color: var(--color-info-dark); font-weight: 700; }
.timeline-step-button.completed .timeline-step-label { color: var(--color-success-dark); font-weight: 700; }

/* Timeline Detail Panel */
.timeline-detail-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: var(--shadow-md);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-info-light);
}

.panel-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }

/* Timeline Form Fields */
.timeline-field-group { margin-bottom: 1.5rem; position: relative; }
.timeline-field-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }

/* Save Feedback */
.save-feedback {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
    z-index: 10;
}

.save-feedback.with-label { top: 1.125rem; }

.save-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-primary);
    border-top-color: var(--color-info-dark);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.save-checkmark {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-success-light);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-success-dark);
    animation: fadeIn 0.2s ease-in;
}

.save-checkmark svg { width: 1rem; height: 1rem; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-50%) scale(0.8); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* Timeline Input Fields */
.timeline-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-secondary);
    border-radius: 0.5rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.2s;
}

.timeline-input:focus {
    outline: none;
    border-color: var(--color-info-dark);
    box-shadow: 0 0 0 3px var(--color-info-light);
}

.timeline-input:disabled {
    opacity: 1 !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    cursor: not-allowed;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.timeline-input[type="date"]:disabled,
.timeline-input[type="datetime-local"]:disabled {
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

.timeline-input:disabled::-webkit-datetime-edit,
.timeline-input:disabled::-webkit-datetime-edit-fields-wrapper,
.timeline-input:disabled::-webkit-datetime-edit-text,
.timeline-input:disabled::-webkit-datetime-edit-month-field,
.timeline-input:disabled::-webkit-datetime-edit-day-field,
.timeline-input:disabled::-webkit-datetime-edit-year-field,
.timeline-input:disabled::-webkit-datetime-edit-hour-field,
.timeline-input:disabled::-webkit-datetime-edit-minute-field {
    opacity: 1 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* Timeline Buttons */
.timeline-edit-btn {
    padding: 0.5rem;
    color: var(--color-info-dark);
    transition: all 0.2s;
    border-radius: 0.5rem;
}

.timeline-edit-btn:hover { background: var(--color-info-light); color: var(--color-info-dark); }

.timeline-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-info-dark);
    color: var(--text-inverse);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

.timeline-upload-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.timeline-cancel-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

.timeline-cancel-btn:hover { background: var(--border-secondary); }

.timeline-document {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

@keyframes pulse-ring {
    0%, 100% { box-shadow: 0 0 0 6px var(--color-info-light); }
    50% { box-shadow: 0 0 0 12px transparent; }
}

@media (max-width: 768px) {
    .timeline-steps-horizontal {
        overflow-x: auto;
        padding-bottom: 1rem;
    }
    .timeline-marker { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
    .timeline-step-label { font-size: 0.6875rem; }
}

/* ==========================================================================
   USER DETAIL (Mitarbeiter-Detailseite)
   Aus user-detail.css migriert
   ========================================================================== */

.step-completion-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    box-shadow: 0 4px 6px -1px var(--color-success);
    opacity: 0.3;
    transition: all 0.2s;
}

.step-completion-btn:hover { transform: scale(1.05); }

/* User Header */
.user-header-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.user-profile-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-info-light);
    box-shadow: var(--shadow-md);
}

.user-header-info { flex: 1; }
.user-name { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }

.user-email {
    color: var(--text-secondary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Loading State */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--color-info-light);
    border-top-color: var(--color-info-dark);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text { color: var(--text-secondary); font-size: 0.875rem; }

@media (max-width: 768px) {
    .user-header-content {
        flex-direction: column;
        text-align: center;
    }
    .user-profile-photo { width: 64px; height: 64px; }
    .user-name { font-size: 1.5rem; }
}

/* ==========================================================================
   CONTRACT PRICES (Preislisten-Management)
   Aus contract-prices.css migriert
   ========================================================================== */

.price-list-card {
    transition: all 0.2s ease;
}

.price-list-card.price-list-current {
    border-left: 4px solid var(--color-success);
}

.price-list-status-indicator {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.price-list-status-indicator.status-active {
    background: var(--color-success-light, rgba(16, 185, 129, 0.15));
    color: var(--color-success);
}

.price-list-status-indicator.status-scheduled {
    background: var(--color-info-light, rgba(59, 130, 246, 0.15));
    color: var(--color-info);
}

.price-list-status-indicator.status-inactive {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

.price-list-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.price-list-badge.badge-current {
    background: var(--color-success-light, rgba(16, 185, 129, 0.15));
    color: var(--color-success);
}

.price-list-badge.badge-scheduled {
    background: var(--color-info-light, rgba(59, 130, 246, 0.15));
    color: var(--color-info);
}

.price-list-badge.badge-inactive {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

.branch-indicator {
    font-size: 0.85em;
    color: var(--text-secondary);
}

.branch-indicator.global {
    color: var(--text-tertiary);
    font-style: italic;
}

.branch-select-container {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-secondary);
}

.branch-checkbox-item {
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
}

.branch-checkbox-item:hover {
    border-color: var(--color-primary);
}

.branch-checkbox-item.selected {
    background: var(--color-primary-light, rgba(20, 184, 166, 0.1));
    border-color: var(--color-primary);
}

.price-list-expand-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.price-list-expand-btn:hover {
    background: var(--bg-hover);
}

.price-list-expand-btn.expanded {
    transform: rotate(180deg);
}

.price-list-expand-btn svg {
    transition: transform 0.2s ease;
}

.price-groups-table {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.price-groups-header {
    display: grid;
    grid-template-columns: 80px 1fr 120px 130px 130px;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.price-groups-row {
    display: grid;
    grid-template-columns: 80px 1fr 120px 130px 130px;
    gap: 1rem;
    padding: 0.875rem 1rem;
    align-items: center;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.price-groups-row:hover {
    background: var(--bg-hover);
}

.price-groups-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

.kpz-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    background: var(--gradient-primary);
    color: white;
    min-width: 50px;
}

.price-col-kpz { text-align: left; }
.price-col-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-col-months { text-align: center; }
.price-col-monthly { text-align: right; }
.price-col-total { text-align: right; }

.discounts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.discount-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 10px;
    min-width: 200px;
    flex: 1 1 calc(50% - 0.375rem);
    max-width: calc(50% - 0.375rem);
}

.discount-item.discount-inactive { opacity: 0.5; }
.discount-info { display: flex; flex-direction: column; gap: 0.125rem; }
.discount-name { font-weight: 600; font-size: 0.875rem; }
.discount-condition { font-size: 0.75rem; color: var(--text-tertiary); }
.discount-value { font-size: 1rem; font-weight: 700; color: var(--color-success); }

.price-group-editor,
.discount-editor {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.input-sm {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    height: auto !important;
}

.toggle-switch-sm {
    width: 36px !important;
    height: 20px !important;
}

.toggle-switch-sm .toggle-slider:before {
    width: 14px !important;
    height: 14px !important;
    left: 3px !important;
    bottom: 3px !important;
}

.toggle-switch-sm input:checked + .toggle-slider:before {
    transform: translateX(16px) !important;
}

.btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
}

.btn-sm svg {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 768px) {
    .price-groups-header,
    .price-groups-row {
        grid-template-columns: 60px 1fr 90px 100px;
    }

    .price-col-total { display: none; }

    .discount-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .price-group-editor .grid,
    .discount-editor .grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .price-group-editor .col-span-2,
    .discount-editor .col-span-2 {
        grid-column: span 3 !important;
    }

    .price-group-editor .col-span-3,
    .discount-editor .col-span-3 {
        grid-column: span 6 !important;
    }
}

/* ==========================================================================
   FORM FILL (Formular-Ausfüllen)
   Aus form-fill.css migriert
   ========================================================================== */

.form-fill-container {
    padding-bottom: 2rem;
}

.form-fill-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.form-fill-header-title {
    flex: 1;
    min-width: 0;
}

.form-fill-header-title h1 {
    color: var(--text-primary);
}

.form-fill-header-description {
    font-size: 0.875rem;
    margin-top: 0.125rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-fill-draft-indicator {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-top: 0.25rem;
}

.form-fill-save-timestamp {
    color: var(--color-success);
}

.form-fill-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.form-fill-header-actions-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-fill-header-actions-bottom {
    display: flex;
    justify-content: flex-end;
}

.form-fill-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.form-fill-btn-content {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.form-fill-branch-selector {
    min-width: 200px;
}

.form-fill-branch-selector .dropdown-glattt-trigger {
    gap: 0.5rem;
}

.form-fill-save-text {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

.form-fill-save-text[data-hidden="true"] {
    transform: rotateX(90deg);
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.form-fill-save-text[data-hidden="false"] {
    transform: rotateX(0deg);
    opacity: 1;
}

.form-fill-fields-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 1rem;
}

.form-fill-field {
    width: 100%;
}

.form-fill-field.half-width {
    width: calc(50% - 0.5rem);
}

@media (max-width: 640px) {
    .form-fill-field.half-width {
        width: 100%;
    }
}

.form-fill-heading {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.form-fill-heading-h1 { font-size: 1.75rem; }
.form-fill-heading-h2 { font-size: 1.375rem; }
.form-fill-heading-h3 { font-size: 1.125rem; }

.form-fill-paragraph {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.form-fill-paragraph p { margin: 0 0 1em 0; }
.form-fill-paragraph p:last-child { margin-bottom: 0; }
.form-fill-paragraph strong { font-weight: 600; color: var(--text-primary); }
.form-fill-paragraph u { text-decoration: underline; }

.form-fill-divider {
    border: none;
    border-top: 1px solid var(--border-secondary);
    margin: 0.5rem 0;
}

/* Share Field Permissions */
.share-field-permissions {
    margin-top: 1.25rem;
    border: 1px solid var(--border-secondary);
    border-radius: 0.5rem;
    overflow: hidden;
}

.share-field-permissions-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: background 0.15s ease;
}

.share-field-permissions-toggle:hover {
    background: var(--bg-tertiary);
}

.share-field-permissions-toggle-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.share-field-permissions-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-warning-dark);
    background: var(--color-warning-light);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.share-field-permissions-arrow {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.share-field-permissions-body {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-secondary);
}

.share-field-permissions-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.share-field-permissions-bulk {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.share-field-permissions-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 240px;
    overflow-y: auto;
}

.share-field-permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-secondary);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-primary);
    width: 100%;
    text-align: left;
}

.share-field-permission-item:hover {
    border-color: var(--border-tertiary);
    background: var(--bg-secondary);
}

.share-field-permission-item.is-locked {
    background: var(--color-warning-light);
    border-color: var(--color-warning);
}

.share-field-permission-item-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.share-field-permission-item-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-field-permission-item-type {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.share-field-permission-item-icon {
    flex-shrink: 0;
    color: var(--color-success);
    display: flex;
    align-items: center;
}

.share-field-permission-item.is-locked .share-field-permission-item-icon {
    color: var(--color-warning-dark);
}

/* Form Fill Success Modal */
.form-fill-success-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    pointer-events: none;
}

.form-fill-success-modal[x-cloak] {
    display: none !important;
}

.form-fill-success-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

/* Contract Price Field */
.contract-price-field {
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    padding: 1.25rem;
    background: var(--bg-secondary);
}

.contract-price-loading,
.contract-price-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-tertiary);
    background: var(--bg-primary);
    border-radius: 0.5rem;
    border: 1px dashed var(--border-secondary);
}

.contract-price-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-danger);
    background: rgba(var(--color-danger-rgb), 0.05);
    border-radius: 0.5rem;
    border: 1px dashed var(--color-danger-light);
}

.contract-price-fullbody-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    background: rgba(var(--color-accent-rgb, 236, 152, 42), 0.1);
    border-radius: 0.5rem;
    border: 1px solid var(--color-accent, #EC982A);
    font-size: 0.875rem;
}

.contract-price-content {
    background: var(--bg-primary);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-primary);
}

.contract-price-options { margin-top: 0.5rem; }

.contract-price-option {
    display: block;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.5rem;
}

.contract-price-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contract-price-option:last-child { margin-bottom: 0; }

.contract-price-option-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border: 2px solid var(--border-primary);
    border-radius: 0.625rem;
    background: var(--bg-primary);
    transition: all 0.15s ease;
    box-shadow: var(--shadow-sm);
}

.contract-price-option:hover .contract-price-option-content {
    border-color: var(--border-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
}

.contract-price-option.selected .contract-price-option-content {
    border-color: var(--border-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
    box-shadow: var(--shadow-primary-sm);
}

.contract-price-option-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contract-price-option-label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.contract-price-option-display {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.contract-price-option.selected .contract-price-option-label { color: var(--text-primary); }
.contract-price-option.selected .contract-price-option-display { color: var(--color-primary-dark); }

.contract-price-option-check {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    transition: all 0.15s ease;
}

.contract-price-option.selected .contract-price-option-check {
    background: var(--color-primary-dark);
}

.contract-price-discounts {
    border-top: 1px solid var(--border-primary);
    padding-top: 1rem;
    margin-top: 1rem;
}

.contract-price-summary {
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.contract-price-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.contract-price-summary-row.text-success {
    color: var(--color-success);
    font-weight: 500;
}

.contract-price-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0 0;
    margin-top: 0.5rem;
    border-top: 2px solid var(--border-secondary);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.contract-price-summary-total span:last-child { color: var(--color-primary-dark); }

.contract-price-summary-vat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0 0;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-style: italic;
}

.contract-price-total-only { margin-top: 0.5rem; }

/* Address Lookup */
.address-lookup-container { position: relative; }
.address-lookup-input-wrapper { position: relative; }

.address-lookup-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 0.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
}

.address-lookup-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.address-lookup-item:last-child { border-bottom: none; }

.address-lookup-item:hover,
.address-lookup-item:focus {
    background: var(--bg-secondary);
    outline: none;
}

.address-lookup-item-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--accent-color, var(--text-tertiary));
}

.address-lookup-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.address-lookup-item-main {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.address-lookup-item-detail {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.address-lookup-container .text-green-500 { color: var(--color-success, #22c55e); }
.address-lookup-container .text-green-600 { color: var(--color-success, #16a34a); }
.address-lookup-container .text-amber-500 { color: var(--color-warning, #f59e0b); }
.address-lookup-container .text-amber-600 { color: var(--color-warning, #d97706); }

.address-lookup-preview { position: relative; }

/* ==========================================================================
   FORM EDITOR (Visueller Formular-Editor)
   Aus form-editor.css migriert
   ========================================================================== */

.form-editor-container {
    min-height: calc(100vh - 200px);
}

body:has(.form-editor-container) .dashboard-shell {
    overflow: visible !important;
}

body:has(.form-editor-container) .dashboard-shell::before,
body:has(.form-editor-container) .dashboard-shell::after {
    display: none;
}

.form-editor-layout {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 1.5rem;
    align-items: start;
    position: relative;
}

.form-editor-sidebar,
.form-editor-settings {
    position: sticky;
    top: 5rem;
    align-self: start;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.form-editor-sidebar::-webkit-scrollbar,
.form-editor-settings::-webkit-scrollbar {
    display: none;
}

@media (max-width: 1280px) {
    .form-editor-layout {
        grid-template-columns: 260px 1fr;
    }

    .form-editor-settings {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 320px;
        z-index: 40;
        padding: 1rem;
        background: var(--bg-primary);
        border-left: 1px solid var(--border-primary);
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .form-editor-settings[style*="display: block"],
    .form-editor-settings:not([style*="display: none"]) {
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .form-editor-layout { grid-template-columns: 1fr; }
    .form-editor-sidebar { display: none; }
}

.form-editor-sidebar > .card-glattt,
.form-editor-settings > .card-glattt {
    max-height: 100%;
    overflow-y: auto;
}

.form-editor-category { margin-bottom: 1.5rem; }
.form-editor-category:last-child { margin-bottom: 0; }

.form-editor-category-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 0.75rem;
}

.form-editor-field-types {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-editor-field-type {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    cursor: grab;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.form-editor-field-type:hover {
    border-color: var(--color-primary);
    background: var(--bg-hover);
    transform: translateX(4px);
}

.form-editor-field-type:active { cursor: grabbing; }

.form-editor-field-type-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.form-editor-field-type-icon svg { width: 100%; height: 100%; }

.form-editor-canvas { min-height: 500px; }

.form-editor-drop-zone {
    min-height: 400px;
    transition: all 0.2s ease;
}

.form-editor-drop-zone.drag-over {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(59, 155, 159, 0.05) 0%, rgba(93, 190, 194, 0.02) 100%);
}

.form-editor-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 2rem;
}

.form-editor-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-editor-field {
    position: relative;
    width: 100%;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-editor-field:hover { border-color: var(--color-primary); }

.form-editor-field.selected {
    border-color: var(--color-primary);
    border-width: 2px;
    box-shadow: 0 0 0 4px rgba(0, 180, 170, 0.15);
    background: rgba(0, 180, 170, 0.03);
}

.form-editor-field.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary);
    border-radius: 0.75rem 0 0 0.75rem;
}

.form-editor-field.dragging { opacity: 0.5; transform: scale(0.98); }

.form-editor-field.half-width { width: calc(50% - 0.5rem); }

@media (max-width: 640px) {
    .form-editor-field.half-width { width: 100%; }
}

.form-editor-field-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-primary);
}

.form-editor-field-drag-handle {
    cursor: grab;
    color: var(--text-tertiary);
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.form-editor-field-drag-handle:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.form-editor-field-drag-handle:active { cursor: grabbing; }

.form-editor-field-type-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.form-editor-field-action {
    padding: 0.375rem;
    color: var(--text-tertiary);
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.form-editor-field-action:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.form-editor-field-action-danger:hover {
    color: var(--color-danger);
    background: var(--color-danger-light);
}

.form-editor-field-preview { pointer-events: none; }

.form-editor-field-drop-indicator {
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary);
    border-radius: 2px;
    animation: pulse 1s ease-in-out infinite;
}

.form-editor-field-drop-indicator-end {
    height: 4px;
    width: 100%;
    background: var(--color-primary);
    border-radius: 2px;
    margin-top: 0.5rem;
    animation: pulse 1s ease-in-out infinite;
}

/* Preview Styles */
.form-preview-heading { font-weight: 600; color: var(--text-primary); margin: 0; }
.form-preview-heading-h1 { font-size: 1.75rem; }
.form-preview-heading-h2 { font-size: 1.375rem; }
.form-preview-heading-h3 { font-size: 1.125rem; }

.form-preview-paragraph { color: var(--text-secondary); line-height: 1.6; margin: 0; }
.form-preview-paragraph p { margin: 0 0 1em 0; }
.form-preview-paragraph p:last-child { margin-bottom: 0; }
.form-preview-paragraph strong { font-weight: 600; }
.form-preview-paragraph u { text-decoration: underline; }

.form-preview-divider { border: none; border-top: 1px solid var(--border-secondary); margin: 0.5rem 0; }

/* Signature Preview */
.signature-preview { width: 100%; }

.signature-preview-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    background: var(--bg-primary);
    border: 2px dashed var(--border-secondary);
    border-radius: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

/* Body Zones Preview */
.body-zones-preview { width: 100%; }

.body-zones-preview-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    background: var(--bg-primary);
    border: 2px dashed var(--border-secondary);
    border-radius: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

/* Contract Price Preview */
.contract-price-preview { width: 100%; }

.contract-price-preview-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--accent-lighter) 100%);
    border: 2px dashed var(--accent-light);
    border-radius: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.contract-price-preview-content small { font-size: 0.75rem; margin-top: 0.25rem; }

/* Formatting Toolbar */
.form-editor-formatting-toolbar {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
}

.form-editor-format-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.form-editor-format-btn:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.form-editor-format-btn:active {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.form-editor-format-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--border-primary);
    margin: 0 0.25rem;
}

.form-editor-formatting-toolbar + .textarea-glattt {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
}

/* Placeholder Card */
.form-editor-placeholder-card { margin-top: 1rem; }

.form-editor-placeholder-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form-editor-placeholder-card-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-primary);
}

.form-editor-placeholder-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-editor-placeholder-card-desc {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

.form-editor-placeholder-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-editor-placeholder-category {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    background: var(--bg-secondary);
}

.form-editor-placeholder-category-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    gap: 0.5rem;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    border-radius: 0.5rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.form-editor-placeholder-category:hover .form-editor-placeholder-category-toggle {
    background: var(--bg-hover);
}

.form-editor-placeholder-category.is-open .form-editor-placeholder-category-toggle {
    background: var(--bg-tertiary);
}

.form-editor-placeholder-category-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-editor-placeholder-category-caret {
    width: 1rem;
    height: 1rem;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

.form-editor-placeholder-category-caret.open { transform: rotate(180deg); }

.form-editor-placeholder-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0 0.75rem 0.75rem;
}

.form-editor-placeholder-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.form-editor-placeholder-chip:hover {
    background: var(--color-primary-light);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.form-editor-placeholder-chip:active { transform: scale(0.95); }

/* ==========================================================================
   SIGNATURE PAD (Unterschrift-Canvas)
   Aus signature-pad.css migriert
   ========================================================================== */

.signature-pad-container { width: 100%; }

.signature-pad-canvas {
    width: 100%;
    height: 250px;
    background: var(--bg-primary);
    border: 2px solid var(--border-secondary);
    border-radius: 0.75rem;
    cursor: crosshair;
    touch-action: none;
    transition: all 0.2s ease;
}

.signature-pad-canvas:hover { border-color: var(--color-primary); }

.signature-pad-canvas:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--focus-ring-light);
}

.signature-pad-canvas-error { border-color: var(--color-danger) !important; }
.signature-pad-canvas-error:focus { box-shadow: 0 0 0 3px var(--color-danger-light) !important; }

.signature-pad-canvas.has-signature { border-color: var(--color-success); }

.signature-pad-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

@media (max-width: 640px) {
    .signature-pad-canvas { height: 220px; }
}

.dark .signature-pad-canvas {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

.dark .signature-pad-canvas:hover { border-color: var(--color-primary-light); }
.dark .signature-pad-canvas.has-signature { border-color: var(--color-success); }

.signature-svg-display svg {
    width: 100%;
    height: auto;
    max-height: 80px;
    color: inherit;
}

/* ==========================================================================
   BODY ZONE SELECTOR (Körperzonen-Auswahl Basis)
   Aus body-zone-selector.css migriert
   ========================================================================== */

.body-zone-selector {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.body-zone-graphic {
    position: relative;
    width: 600px;
    height: 600px;
    max-width: 100%;
    margin: 0 auto;
    user-select: none;
}

@media (max-width: 540px) {
    .body-zone-graphic {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }
}

.body-zone-graphic-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 10;
}

.body-zone-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    z-index: 5;
}

.body-zone-layer.active { opacity: 1; }

.body-zone-click-areas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    cursor: pointer;
}

.body-zone-area {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0.3;
    cursor: pointer;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.body-zone-area:hover {
    fill: rgba(59, 155, 159, 0.25);
    stroke: rgba(59, 155, 159, 0.5);
}

.body-zone-area.active { fill: rgba(59, 155, 159, 0.1); }

.body-zone-area.active:hover {
    fill: rgba(239, 68, 68, 0.2);
    stroke: rgba(239, 68, 68, 0.5);
}

.body-zone-area.disabled {
    cursor: not-allowed;
    fill: rgba(156, 163, 175, 0.1);
}

.body-zone-area.disabled:hover {
    fill: rgba(156, 163, 175, 0.15);
    stroke: rgba(156, 163, 175, 0.3);
}

/* Zone List */
.body-zone-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.body-zone-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-primary);
}

.body-zone-list-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.body-zone-list-count { font-size: 0.875rem; color: var(--text-secondary); }
.body-zone-list-actions { display: flex; gap: 0.5rem; }

.body-zone-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.body-zone-category { margin-bottom: 0; }

.body-zone-category-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.body-zone-category-items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.body-zone-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    border: 1px solid transparent;
}

.body-zone-item:hover { background: var(--bg-hover); }

.body-zone-item.selected {
    background: rgba(59, 155, 159, 0.1);
    border-color: rgba(59, 155, 159, 0.3);
}

.dark .body-zone-item.selected {
    background: rgba(59, 155, 159, 0.15);
    border-color: rgba(59, 155, 159, 0.4);
}

.body-zone-indicator {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    border: 2px solid var(--border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: var(--bg-primary);
}

.body-zone-item.selected .body-zone-indicator {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.body-zone-indicator svg {
    width: 0.75rem;
    height: 0.75rem;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.body-zone-item.selected .body-zone-indicator svg {
    opacity: 1;
    transform: scale(1);
}

.body-zone-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.body-zone-item.selected .body-zone-name {
    color: var(--color-primary);
    font-weight: 600;
}

.body-zone-item.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.body-zone-item.disabled:hover { background: transparent; }

.body-zone-item.disabled .body-zone-indicator {
    border-color: var(--border-tertiary);
    background: var(--bg-secondary);
}

.body-zone-item.disabled .body-zone-name { color: var(--text-tertiary); }

.body-zone-color-preview {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.body-zone-item.selected .body-zone-color-preview { opacity: 1; }

/* Kompakte Variante */
.body-zone-selector.compact .body-zone-graphic { max-width: 300px; }
.body-zone-selector.compact .body-zone-item { padding: 0.5rem 0.625rem; }
.body-zone-selector.compact .body-zone-name { font-size: 0.8125rem; }

/* Nur-Grafik Variante */
.body-zone-selector.graphic-only .body-zone-list { display: none; }
.body-zone-selector.graphic-only .body-zone-graphic { max-width: 500px; }

/* Ausgewählte Zonen Summary */
.body-zone-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 1px solid var(--border-primary);
}

.body-zone-summary-empty {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-style: italic;
}

.body-zone-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(59, 155, 159, 0.1);
    color: var(--color-primary);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.body-zone-tag-remove {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59, 155, 159, 0.2);
    cursor: pointer;
    transition: background 0.2s ease;
}

.body-zone-tag-remove:hover { background: rgba(59, 155, 159, 0.3); }
.body-zone-tag-remove svg { width: 0.625rem; height: 0.625rem; }

@keyframes zone-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.body-zone-layer.active {
    animation: zone-pulse 0.3s ease-out;
}

/* Dark Mode */
.dark .body-zone-graphic {
    background: #efefef;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: var(--shadow-md);
}

.dark .body-zone-category-item {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

.dark .body-zone-category-item:hover {
    border-color: var(--color-primary);
}

.dark .body-zone-category-item.selected {
    background: rgba(59, 155, 159, 0.15);
}

/* ========================================
   APPOINTMENT SESSION
   Termin durchführen - Session Grid & Cards
   ======================================== */

/* Session Grid - 2x2 Layout, Fullscreen */
.session-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
    height: 100%;
    width: 100%;
    padding: 0;
}

/* Session Cards - Large clickable areas */
.session-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

a.session-card {
    text-decoration: none;
}

.session-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-primary);
}

/* Large SVG Icon for cards */
.session-card-svg-icon {
    width: 8rem;
    height: 8rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    transition: color 0.2s ease;
}

.session-card:hover .session-card-svg-icon {
    color: var(--color-primary-light);
}

/* Large card title */
.session-card-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Danger card variant */
.session-card-danger {
    border-color: var(--color-danger);
}

.session-card-danger:hover {
    border-color: var(--color-danger);
    background: rgba(239, 68, 68, 0.1);
}

.session-card-svg-icon-danger {
    color: var(--color-danger);
}

.session-card-danger:hover .session-card-svg-icon-danger {
    color: var(--color-danger);
}

.session-card-title-danger {
    color: var(--color-danger);
}

/* Session Forms Grid */
.session-forms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
    height: 100%;
    width: 100%;
    padding: 0;
}

/* Subtitle under card title */
.session-card-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin: 0.5rem 0 0 0;
}

/* Success card variant (submitted forms) */
.session-card-success {
    border-color: var(--color-success);
}

.session-card-success:hover {
    border-color: var(--color-success);
    background: rgba(34, 197, 94, 0.08);
}

.session-card-svg-icon-success {
    color: var(--color-success);
}

.session-card-title-success {
    color: var(--color-success);
}

.session-card-subtitle-success {
    color: var(--color-success);
}

/* Checkmark badge on card */
.session-card-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-success);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Session Responsive */
@media (max-width: 768px) {
    .session-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .session-forms-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

/* Override container max-width for session */
.session-fullscreen {
    height: 100%;
}

.session-fullscreen .appointment-view-content {
    max-width: none;
    height: 100%;
}

/* Session Loading State */
.session-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.session-loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.session-loading p {
    font-size: 1rem;
    font-weight: 500;
}

/* Session Error State */
.session-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    text-align: center;
}

.session-error svg {
    width: 3rem;
    height: 3rem;
    color: var(--danger);
    margin-bottom: 1rem;
}

.session-error p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.session-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--accent-primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-primary, 'Dosis'), system-ui, sans-serif;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.session-retry-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* Session Content */
.session-content {
    min-height: 200px;
}

/* ========================================
   APPOINTMENT VIEW
   Fullscreen Terminansicht (iPad-optimiert)
   ======================================== */

/* Loading & Error States */
.appointment-view-loading,
.appointment-view-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    gap: 1rem;
    color: var(--text-primary);
}

.appointment-view-loading .loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.appointment-view-loading p {
    color: var(--text-secondary);
    margin: 0;
}

.appointment-view-error .error-icon {
    width: 4rem;
    height: 4rem;
    color: var(--danger);
}

.appointment-view-error .error-icon svg {
    width: 100%;
    height: 100%;
}

.appointment-view-error h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.appointment-view-error p {
    color: var(--text-secondary);
    margin: 0;
}

/* Fullscreen Layout - No Page Scroll (iPad optimized) */
.fullscreen-layout {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.fullscreen-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

.fullscreen-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.appointment-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    height: 100%;
}

.appointment-view-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    height: 100%;
    padding-top: 2rem;
}

/* Client header should not grow */
.appointment-view-content > .card-glattt:first-child {
    flex-shrink: 0;
}

.appointment-view-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    height: 100%;
}

.appointment-view-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
}

/* Left column: details + services should not scroll */
.appointment-view-column:first-child {
    overflow-y: auto;
}

.appointment-view-column-wide {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    align-self: start;
    max-height: 100%;
}

/* Notes card fills only needed space, scrolls if too tall */
.appointment-view-notes-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.appointment-view-notes-card .card-glattt-header {
    flex-shrink: 0;
}

.appointment-view-notes-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 0.5rem;
}

/* Actions bar at bottom */
.appointment-view-content > div:last-child {
    flex-shrink: 0;
}

/* Appointment View Responsive */
@media (max-width: 768px) {
    .appointment-view-grid {
        grid-template-columns: 1fr;
    }

    .fullscreen-layout {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: auto;
    }

    .fullscreen-content {
        overflow: visible;
    }

    .appointment-view-notes-card {
        max-height: 50vh;
    }
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg, 0.75rem);
    font-weight: 500;
    z-index: 9999;
    animation: toast-in 0.3s ease-out;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-lg);
}

.toast-success {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, var(--bg-card));
}

.toast-error {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
}

@keyframes toast-in {
    from {
        transform: translateY(1rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Birthday pulse animation */
@keyframes birthday-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.02);
    }
}

/* Form container should be scrollable */
.appointment-view-form-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2rem;
    padding-top: 2rem;
}

/* The form card inside should not restrict height */
.appointment-view-form-container > div,
.appointment-view-form-container > template + div,
.appointment-view-form-container .card-glattt {
    flex-shrink: 0;
}

/* Client Header Card - Start Appointment Button */
.client-header-card {
    padding: 0 !important;
    overflow: hidden;
}

.client-header-layout {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.client-header-main {
    flex: 1;
    padding: 1.25rem;
    min-width: 0;
}

.client-header-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

/* Start Appointment Button - Large Square */
.start-appointment-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 160px;
    width: 160px;
    background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.start-appointment-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.start-appointment-btn:hover::before {
    opacity: 1;
}

.start-appointment-btn:hover {
    min-width: 175px;
    width: 175px;
}

.start-appointment-btn:hover .start-appointment-btn-arrow {
    transform: translateX(4px);
}

.start-appointment-btn:active {
    transform: scale(0.98);
}

.start-appointment-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Warning variant: session was already ended */
.start-appointment-btn-warning {
    background: var(--gradient-warning) !important;
}
.start-appointment-btn-warning::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
}
.start-appointment-btn-warning .start-appointment-btn-text {
    font-size: 0.85rem;
}

.start-appointment-btn-text {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--font-heading, 'Dosis');
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.025em;
}

.start-appointment-btn-arrow {
    width: 2.5rem;
    height: 2.5rem;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Start Appointment Button Responsive */
@media (max-width: 640px) {
    .client-header-layout {
        flex-direction: column;
    }

    .start-appointment-btn {
        width: 100%;
        min-width: 100%;
        flex-direction: row;
        padding: 1rem 1.5rem;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .start-appointment-btn:hover {
        width: 100%;
        min-width: 100%;
    }

    .start-appointment-btn-text {
        text-align: left;
    }

    .start-appointment-btn-text br {
        display: none;
    }

    .start-appointment-btn-arrow {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* ====================================
   STORAGE MODAL SPECIFIC STYLES
   ==================================== */

.storage-modal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.storage-form-group {
    display: flex;
    flex-direction: column;
}

.storage-form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Segmented Control */
.storage-segmented-control {
    display: inline-flex;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--border-secondary);
    padding: 0.25rem;
    background: var(--bg-tertiary);
}

.storage-segmented-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
}

.storage-segmented-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.storage-segmented-btn:not(.active):hover {
    color: var(--text-primary);
}

/* Form Inputs */
.storage-form-input,
.storage-form-select {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--border-secondary);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s;
}

.storage-form-input:focus,
.storage-form-select:focus {
    outline: none;
    border-color: var(--color-info-dark);
    box-shadow: 0 0 0 3px var(--color-info-light);
}

/* ====================================
   MAINTENANCE HISTORY MODAL SPECIFIC
   ==================================== */

.maintenance-history-entry {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    transition: all 0.2s;
    padding: 0.875rem;
}

.maintenance-history-entry:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--border-secondary);
}

.maintenance-history-meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.625rem;
}

.maintenance-history-current-badge {
    background: var(--color-info-light);
    color: var(--color-info-dark);
    font-size: 0.6875rem;
    padding: 0.1875rem 0.5rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 9999px;
    display: inline-block;
}

.maintenance-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-top: 0.625rem;
}

.maintenance-history-field-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.1875rem;
}

.maintenance-history-field-value {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.3;
}

.maintenance-history-comment {
    background: var(--bg-secondary);
    border-left: 3px solid var(--color-info-light);
    padding: 0.5rem 0.625rem;
    border-radius: 0.25rem;
}

/* ====================================
   ADD COMPONENT MODAL SPECIFIC
   ==================================== */

.add-component-section {
    margin-bottom: 1rem;
    background: var(--bg-primary);
    padding: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-primary);
}

.add-component-section:last-child {
    margin-bottom: 0;
}

.add-component-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.add-component-section-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-info-dark);
    flex-shrink: 0;
}

.add-component-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.add-component-form-group {
    display: flex;
    flex-direction: column;
}

.add-component-form-group-full {
    grid-column: 1 / -1;
}

.add-component-form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.add-component-form-label-required::after {
    content: " *";
    color: var(--color-danger);
}

.add-component-form-input,
.add-component-form-select,
.add-component-form-textarea {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-secondary);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: all 0.15s ease;
}

.add-component-form-input:focus,
.add-component-form-select:focus,
.add-component-form-textarea:focus {
    outline: none;
    border-color: var(--color-info-dark);
    box-shadow: 0 0 0 3px var(--color-info-light);
}

.add-component-form-textarea {
    min-height: 80px;
    resize: vertical;
}

/* File Upload */
.add-component-file-upload {
    display: block;
    border: 2px dashed var(--border-secondary);
    border-radius: 0.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    background: var(--bg-secondary);
    outline: none;
    user-select: none;
}

.add-component-file-upload:hover {
    border-color: var(--color-info-dark);
    background-color: var(--color-info-light);
}

.add-component-file-upload-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    color: var(--text-tertiary);
    display: block;
}

.add-component-file-upload:hover .add-component-file-upload-icon {
    color: var(--color-info-dark);
}

.add-component-file-upload-text {
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
    font-weight: 500;
    line-height: 1.5;
}

.add-component-file-upload-text .highlight {
    color: var(--color-info-dark);
    font-weight: 600;
}

.add-component-file-upload-hint {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* File List */
.add-component-file-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.add-component-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--bg-primary);
    border-radius: 0.5rem;
    border: 1px solid var(--border-primary);
    transition: all 0.15s ease;
}

.add-component-file-item:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}

.add-component-file-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.add-component-file-icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-info-dark);
    flex-shrink: 0;
}

.add-component-file-details {
    flex: 1;
    min-width: 0;
}

.add-component-file-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-component-file-size {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

.add-component-file-remove {
    padding: 0.375rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.add-component-file-remove:hover {
    color: var(--color-danger);
    background-color: var(--color-danger-light);
}

/* ====================================
   COMPONENT INFO MODAL SPECIFIC
   ==================================== */

.component-info-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.component-info-section {
    margin-bottom: 1.5rem;
}

.component-info-section:last-child {
    margin-bottom: 0;
}

.component-info-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.component-info-section-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-info-dark);
}

.component-info-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.component-info-field {
    display: flex;
    flex-direction: column;
}

.component-info-field-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.component-info-field-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Document List */
.component-info-documents {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.component-info-document {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    transition: all 0.2s;
    text-decoration: none;
}

.component-info-document:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

.component-info-document-icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-info-dark);
    flex-shrink: 0;
}

.component-info-document-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.component-info-document-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Document Upload Area */
.component-info-upload-area {
    border: 2px dashed var(--border-secondary);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.component-info-upload-area:hover {
    border-color: var(--color-info-dark);
    background: var(--color-info-light);
}

.component-info-upload-icon {
    width: 2rem;
    height: 2rem;
    margin: 0 auto 0.5rem;
    color: var(--text-tertiary);
}

.component-info-upload-area:hover .component-info-upload-icon {
    color: var(--color-info-dark);
}

.component-info-upload-text {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.component-info-upload-text .highlight {
    color: var(--color-info-dark);
    font-weight: 500;
}

.component-info-upload-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* New Files List */
.component-info-new-files {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.component-info-new-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--color-info-light);
    border-radius: 0.5rem;
}

.component-info-new-file-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-info-dark);
    flex-shrink: 0;
}

.component-info-new-file-details {
    flex: 1;
    min-width: 0;
}

.component-info-new-file-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.component-info-new-file-size {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.component-info-new-file-remove {
    padding: 0.25rem;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0.25rem;
}

.component-info-new-file-remove:hover {
    color: var(--color-danger);
}

/* Components Responsive */
@media (max-width: 768px) {
    /* Component Info - Stack columns on mobile */
    .component-info-columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Add Component - Adjust grid */
    .add-component-form-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .add-component-section {
        padding: 1rem;
    }

    .add-component-file-upload {
        padding: 1.5rem 1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .component-info-columns {
        gap: 1.25rem;
    }

    .add-component-form-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}


/* ===================================================
 * NAVIGATION STYLES (aus nav.css migriert)
 * =================================================== */

/* ============================================
   LAYOUT SPACING VARIABLES
   Einheitliche Abstände für Sidebar & Content
   ============================================ */

:root {
    /* Gemeinsame Layout-Abstände - leicht anpassbar */
    --layout-spacing: 1rem;
    --layout-top-offset: max(2.5rem, env(safe-area-inset-top, 0px));
    --layout-bottom-offset: max(1.5rem, env(safe-area-inset-bottom, 0px));
    --layout-left-offset: env(safe-area-inset-left, 0px);
}

/* iPad: Reduzierter Top-Offset für PWA (35% weniger) */
@media (min-width: 768px) and (display-mode: standalone) {
    :root {
        --layout-top-offset: max(1.625rem, calc(env(safe-area-inset-top, 0px) * 0.65));
    }
}

/* ============================================
   iOS PWA SAFE AREA - Navigation Elements
   Für iPhone X+ mit Notch/Dynamic Island
   ============================================ */

@supports(padding: env(safe-area-inset-top)) {
    /* Topbar: Geht bis ganz oben, Inhalt hat padding */
    .topbar-glattt {
        top: 0;
        padding-top: env(safe-area-inset-top);
    }
}

/* ============================================
   SIDEBAR - Main Navigation
   ============================================ */

/* Sidebar Container - Floating Card Design with Glass */
#sidebar {
    width: 15rem; /* 240px - Default expanded */
    /* Verwendet gemeinsame Layout-Variablen für einheitliche Abstände */
    height: calc(100vh - var(--layout-top-offset) - var(--layout-bottom-offset) - var(--layout-spacing) * 3);
    position: fixed;
    top: calc(var(--layout-top-offset) + var(--layout-spacing));
    left: calc(var(--layout-spacing) + var(--layout-left-offset));
    z-index: 40;
    /* Glass Morphism - gleich wie Bottom Nav */
    background: var(--card-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-glass-border);
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s ease, border 0.4s ease;
    will-change: width;
}

/* Standort-Streifen: Farbiger linker Rand wie bei Terminkarten */
#sidebar.sidebar-branch-glow {
    border-left: 4px solid var(--sidebar-glow-color, var(--card-glass-border));
}

/* Dark Mode Sidebar */
[data-theme="dark"] #sidebar,
.dark #sidebar {
    background: var(--card-glass-bg);
    border-color: var(--card-glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] #sidebar.sidebar-branch-glow,
.dark #sidebar.sidebar-branch-glow {
    border-left: 4px solid var(--sidebar-glow-color, var(--card-glass-border));
}

/* Collapsed Sidebar - nur Icons */
#sidebar.sidebar-collapsed {
    width: 4.5rem; /* 72px - etwas schmaler für floating design */
}

/* Collapsed: Sidebar Controls ausblenden mit Animation */
#sidebar.sidebar-collapsed .sidebar-controls {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* Collapsed: Padding anpassen für perfekte Zentrierung */
#sidebar.sidebar-collapsed .sidebar-inner {
    padding-left: 0;
    padding-right: 0;
}

/* Collapsed: Text ausblenden mit Animation */
#sidebar.sidebar-collapsed .sidebar-brand-title,
#sidebar.sidebar-collapsed .sidebar-section-label,
#sidebar.sidebar-collapsed .sidebar-user-name,
#sidebar.sidebar-collapsed .countdown-bar-label span:first-child {
    opacity: 0;
    width: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transform: translateX(-10px);
}

#sidebar.sidebar-collapsed .menu-divider {
    opacity: 0;
    transform: scaleX(0);
}

/* Collapsed: Brand text smooth hide */
#sidebar.sidebar-collapsed .sidebar-brand-text {
    opacity: 0;
    width: 0;
    transform: translateX(-10px);
    overflow: hidden;
}

/* Collapsed: Alle Container mit Margin zurücksetzen */
#sidebar.sidebar-collapsed .sidebar-header > div,
#sidebar.sidebar-collapsed .sidebar-user-card > div:first-child {
    margin: 0 !important;
    padding: 0;
}

/* Collapsed: Elemente zentrieren */
#sidebar.sidebar-collapsed .menu-pill {
    justify-content: center;
    padding: 0.75rem 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0;
    gap: 0;
    border-left: none;
    position: relative;
    overflow: visible;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Collapsed: Menu Title als Tooltip rechts */
#sidebar.sidebar-collapsed .menu-title {
    display: block !important;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    margin-left: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-secondary);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 1000;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: auto !important;
    min-width: max-content;
    overflow: visible !important;
}

/* Dark mode Tooltip */
.dark #sidebar.sidebar-collapsed .menu-title {
    background: rgba(17, 24, 39, 0.95);
    border-color: rgba(71, 85, 105, 0.5);
}

/* Hover: Zeige Tooltip mit Slide-Animation */
#sidebar.sidebar-collapsed .menu-pill:hover .menu-title {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: all;
}

#sidebar.sidebar-collapsed .menu-pill:hover {
    border-bottom: none;
    border-left: 4px solid var(--color-primary);
    padding-left: calc(0.75rem - 2px); /* Kompensiere Border-Höhe */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#sidebar.sidebar-collapsed .sidebar-user-card > div:first-child {
    justify-content: center;
}

/* Collapsed: Icons einheitliche Größe und Zentrierung mit Animation */
#sidebar.sidebar-collapsed .menu-icon {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar.sidebar-collapsed .sidebar-logo {
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#sidebar.sidebar-collapsed .sidebar-user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Collapsed: Avatar anpassen */
#sidebar.sidebar-collapsed .sidebar-user-avatar img {
    width: 2.5rem;
    height: 2.5rem;
}

/* Collapsed: Active Border anpassen - unten statt links */
#sidebar.sidebar-collapsed .menu-pill.active {
    border-bottom: none;
    border-left: 4px solid var(--glattt-gold);
    padding-left: calc(0.75rem - 2px); /* Kompensiere Border-Höhe */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Collapsed: User Card - Avatar mit Hover Overlay */
#sidebar.sidebar-collapsed .sidebar-user-card {
    padding-top: 0.5rem;
    margin: 0 !important;
    display: flex;
    justify-content: center;
}

#sidebar.sidebar-collapsed .sidebar-user-card > div:first-child {
    flex-direction: column;
    gap: 0;
    position: relative;
    width: auto;
    justify-content: center;
    align-items: center;
}

/* Collapsed: Avatar Container mit Hover-Effekt */
#sidebar.sidebar-collapsed .sidebar-user-avatar {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
}

/* Collapsed: Logout Button als Overlay über Avatar */
#sidebar.sidebar-collapsed .sidebar-logout {
    position: relative;
    top: auto;
    left: auto;
    transform: scale(0.9);
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.95);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

#sidebar.sidebar-collapsed .sidebar-logout svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

/* Collapsed: Hide user link and position form for overlay */
#sidebar.sidebar-collapsed .sidebar-user-link {
    display: none;
}

#sidebar.sidebar-collapsed .sidebar-user-card form {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover: Zeige Logout Button über Avatar */
#sidebar.sidebar-collapsed .sidebar-user-card > div:first-child:hover .sidebar-logout {
    opacity: 1;
    pointer-events: all;
    transform: scale(1);
}

/* Hover: Avatar leicht abdunkeln */
#sidebar.sidebar-collapsed .sidebar-user-card > div:first-child:hover .sidebar-user-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Hover Animation für Logout Button */
#sidebar.sidebar-collapsed .sidebar-logout:hover {
    background: rgba(220, 38, 38, 1);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.6);
}

#sidebar.sidebar-collapsed .sidebar-brand-text {
    display: none;
}

.sidebar-brand-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Collapsed: Countdown Bar anpassen */
#sidebar.sidebar-collapsed .countdown-bar-container {
    margin-top: 0.5rem;
}

#sidebar.sidebar-collapsed .countdown-bar-label {
    justify-content: center;
    margin-bottom: 0.375rem;
}

#sidebar.sidebar-collapsed .auto-logout-time {
    font-size: 0.65rem;
}

#sidebar.sidebar-collapsed .countdown-bar-logout {
    height: 0.375rem;
}

/* Hide scrollbar but keep functionality */
#sidebar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

#sidebar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Mobile: Sidebar hidden by default */
@media (max-width: 1023px) {
    #sidebar {
        transform: translateX(calc(-100% - 2rem));
        top: 0.75rem;
        left: 0.75rem;
        height: calc(100vh - 1.5rem);
        border-radius: 1rem;
    }
    
    #sidebar.sidebar-open {
        transform: translateX(0);
    }
}

/* Desktop: Sidebar always visible */
@media (min-width: 1024px) {
    #sidebar {
        transform: translateX(0);
    }
}

/* Sidebar Overlay for Mobile */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 35;
    display: none;
}

@media (max-width: 1023px) {
    .sidebar-overlay:not(.hidden) {
        display: block;
    }
}

/* Sidebar Transition Helper */
.sidebar-transition {
    transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: width;
}

/* Base transitions for all sidebar elements during collapse */
.sidebar-transition .menu-pill {
    transition: padding 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                margin 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                justify-content 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: padding, margin;
}

.sidebar-transition .menu-title {
    transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                max-width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity, transform;
}

.sidebar-transition .menu-icon {
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                margin 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

.sidebar-transition .sidebar-action-buttons {
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                margin 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                padding 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    max-height: 100px;
    overflow: hidden;
    will-change: opacity, transform, max-height;
}

.sidebar-transition .sidebar-brand-text {
    transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                max-width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity, transform;
}

.sidebar-transition .sidebar-inner {
    transition: padding 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sidebar-transition .sidebar-controls {
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                margin 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                padding 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    max-height: 200px;
    will-change: opacity, max-height;
}

/* ============================================
   SIDEBAR HEADER & BRANDING (Kompakt)
   ============================================ */

.sidebar-header {
    padding: 0.5rem;
}

.sidebar-brand-panel {
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.sidebar-brand-panel:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--glattt-gold);
}

.sidebar-logo {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.375rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

/* Logo Image - Standard */
.sidebar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* Burger Icon - versteckt by default */
.sidebar-logo::before {
    content: '';
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d4af37'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hover: Zeige Burger Icon */
.sidebar-logo:hover img {
    opacity: 0;
}

.sidebar-logo:hover::before {
    opacity: 1;
}

.sidebar-logo:hover {
    transform: scale(1.05);
}

.sidebar-brand-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.3s ease, width 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.sidebar-brand-text:hover {
    color: var(--glattt-gold);
}

.sidebar-title-cycler {
    position: relative;
    height: 1.25rem;
    overflow: hidden;
}

.sidebar-brand-title {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
}

.sidebar-brand-title.title-exit {
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(4px);
}

.sidebar-brand-subtitle {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.125rem;
    line-height: 1;
}

/* ============================================
   SIDEBAR NAVIGATION SECTIONS (Minimalistisch)
   ============================================ */

.sidebar-section {
    margin-bottom: 1.25rem;
}

.sidebar-section-label {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

/* ============================================
   MENU ITEMS - Minimalistisch & Professionell
   ============================================ */

.menu-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                padding 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                margin 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                gap 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    cursor: pointer;
    position: relative;
    border-left: 2px solid transparent;
}

/* Hover State */
.menu-pill:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-left-color: var(--border-secondary);
}

/* Active State - Minimalistisch mit Akzent-Border */
.menu-pill.active {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-left-color: var(--glattt-gold);
    font-weight: 600;
}

/* Focus State für Accessibility */
.menu-pill:focus {
    outline: 2px solid var(--glattt-gold);
    outline-offset: -2px;
}

/* Menu Icon - SVG Icons statt Emojis */
.menu-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: color 0.2s ease,
                width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                margin 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.menu-pill:hover .menu-icon {
    color: var(--color-primary);
}

.menu-pill.active .menu-icon {
    color: var(--glattt-gold);
}

/* Menu Text */
.menu-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                max-width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Collapsed: Hide menu text */
#sidebar.sidebar-collapsed .menu-text {
    opacity: 0;
    max-width: 0;
    flex: 0;
}

.menu-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit;
    line-height: 1.2;
    display: block;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.menu-pill.active .menu-title {
    font-weight: 600;
}

/* Menu Caption - Optional Subtitle */
.menu-caption {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
    line-height: 1.1;
    display: block;
}

/* Menu Badge - Optional Count/Status */
.menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: white;
    background: var(--color-primary);
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.menu-pill.active .menu-badge {
    background: var(--glattt-gold);
}

/* ============================================
   SUBMENU - Multi-Level Navigation
   ============================================ */

/* Submenu Container */
.menu-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 1rem;
}

/* Expanded State */
.menu-pill.has-submenu.expanded + .menu-submenu {
    max-height: 500px;
}

/* Parent Item mit Submenu */
.menu-pill.has-submenu {
    position: relative;
}

/* Chevron für Submenu Toggle */
.menu-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.menu-pill.has-submenu:hover .menu-chevron {
    color: var(--color-primary);
}

.menu-pill.has-submenu.expanded .menu-chevron {
    transform: rotate(90deg);
    color: var(--glattt-gold);
}

/* Submenu Items */
.menu-submenu .menu-pill {
    padding-left: 0.5rem;
    font-size: 0.8125rem;
}

.menu-submenu .menu-icon {
    width: 1rem;
    height: 1rem;
}

.menu-submenu .menu-title {
    font-size: 0.8125rem;
}

/* Nested Submenu (Level 3) */
.menu-submenu .menu-submenu {
    margin-left: 0.75rem;
}

.menu-submenu .menu-submenu .menu-pill {
    padding-left: 0.375rem;
    font-size: 0.75rem;
}

/* ============================================
   MENU DIVIDER
   ============================================ */

.menu-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 0.5rem 1rem;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform-origin: center;
}

/* ============================================
   COMPACT MODE - Noch mehr Platz
   ============================================ */

.sidebar.compact .menu-pill {
    padding: 0.375rem 0.625rem;
}

.sidebar.compact .menu-title {
    font-size: 0.8125rem;
}

.sidebar.compact .menu-caption {
    display: none;
}

.sidebar.compact .menu-icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   MAIN CONTENT AREA ADJUSTMENT
   ============================================ */

.main-content-area {
    margin-left: 0;
    min-height: 100vh;
    width: 100%;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1024px) {
    .main-content-area {
        margin-left: calc(15rem + 2rem); /* Sidebar width + margins */
        /* Einheitliche Oberkante mit Sidebar */
        padding-top: calc(var(--layout-top-offset) + var(--layout-spacing));
    }
    
    /* Collapsed Sidebar: Content verbreitert sich */
    body:has(#sidebar.sidebar-collapsed) .main-content-area {
        margin-left: calc(5rem + 2rem); /* Collapsed sidebar width + margins */
    }
}
/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    .sidebar-inner {
        padding: 0.75rem 0.5rem;
    }
    
    .sidebar-header {
        padding: 0.75rem 0.5rem;
    }
    
    .sidebar-brand-panel {
        padding: 0.625rem;
    }
    
    .sidebar-logo {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .sidebar-brand-title {
        font-size: 0.875rem;
    }
    
    .sidebar-brand-subtitle {
        font-size: 0.625rem;
    }
    
    .menu-pill {
        padding: 0.5rem 0.625rem;
        margin: 0.125rem 0.375rem;
        gap: 0.5rem;
    }
    
    .menu-icon-bubble {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.875rem;
    }
    
    .menu-title {
        font-size: 0.75rem;
    }
    
    .menu-caption {
        font-size: 0.625rem;
    }
    
    .sidebar-user-avatar {
        width: 2rem;
        height: 2rem;
    }
    
    .sidebar-user-name {
        font-size: 0.8125rem;
    }
}

/* ============================================
   TOPBAR - GLATTT Design (Mobile Only)
   ============================================ */

/* Topbar Container - Fixed für permanente Sichtbarkeit */
.topbar-glattt {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--card-glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-secondary);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop: Topbar komplett ausblenden */
@media (min-width: 1024px) {
    .topbar-glattt.topbar-mobile-only {
        display: none !important;
    }
    
    .topbar-spacer {
        display: none !important;
    }
}

/* Scrolled State - Kompaktere Header-Bar */
.topbar-glattt.topbar-scrolled {
    box-shadow: 0 4px 6px -6px rgba(0, 0, 0, 0.25);
}

.topbar-glattt-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    gap: 1.5rem;
    max-width: 100%;
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled State - Weniger Padding */
.topbar-glattt.topbar-scrolled .topbar-glattt-inner {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* Spacer für fixed Topbar - schiebt Content nach unten */
.topbar-spacer {
    height: 5.5rem; /* Ungefähre Höhe der Topbar */
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Topbar Typography */
.topbar-glattt-kicker {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
    opacity: 1;
    max-height: 20px;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
}

/* Kicker beim Scrollen ausblenden */
.topbar-glattt.topbar-scrolled .topbar-glattt-kicker {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
}

.topbar-glattt-title {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
    transition: font-size 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Title beim Scrollen kleiner */
.topbar-glattt.topbar-scrolled .topbar-glattt-title {
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .topbar-glattt-title {
        font-size: 1.35rem;
    }
    
    .topbar-glattt-inner {
        padding: 1rem;
        gap: 1rem;
    }
}

/* ============================================
   SIDEBAR GLASS MORPHISM DESIGN
   ============================================ */

/* Enhanced Glass Sidebar */
#sidebar.sidebar-glass {
    background: var(--card-glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--card-glass-border);
    box-shadow: 4px 0 24px -8px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] #sidebar.sidebar-glass,
.dark #sidebar.sidebar-glass {
    background: rgba(17, 24, 39, 0.75);
    border-right-color: rgba(75, 85, 99, 0.3);
    box-shadow: 4px 0 32px -8px rgba(0, 0, 0, 0.4);
}

/* ============================================
   SIDEBAR CONTROLS (Branch, API, Theme, Notifications)
   ============================================ */

.sidebar-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-primary);
}

/* Branch Selector in Sidebar */
.sidebar-branch-selector {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-branch-selector:hover {
    background: var(--bg-active);
    border-color: var(--glattt-gold);
}

.sidebar-control-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.sidebar-control-icon svg {
    width: 100%;
    height: 100%;
}

.sidebar-control-select {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0;
    margin: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    min-width: 0;
}

.sidebar-control-select:focus {
    outline: none;
}

.sidebar-control-select option {
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.5rem;
}

.sidebar-control-chevron {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
    pointer-events: none;
}

/* Quick Actions Row */
.sidebar-quick-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* API Status in Sidebar */
.sidebar-api-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sidebar-api-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-warning);
    flex-shrink: 0;
}

.sidebar-api-status.connected .sidebar-api-dot {
    background: var(--color-success);
}

.sidebar-api-status.disconnected .sidebar-api-dot {
    background: var(--color-danger);
}

.sidebar-api-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action Buttons */
.sidebar-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-primary);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sidebar-action-btn:hover {
    background: var(--bg-active);
    color: var(--text-primary);
    border-color: var(--glattt-gold);
}

.sidebar-action-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform 0.3s ease;
}

.sidebar-action-btn:hover svg {
    transform: rotate(15deg);
}

/* Notification Button with Badge */
.sidebar-notification-btn {
    position: relative;
}

.sidebar-notification-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    background: var(--color-danger);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
}

/* ============================================
   SIDEBAR PANEL SWAP ANIMATION
   iOS-Style Panel Transition
   ============================================ */

.sidebar-panel-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0; /* Wichtig für Flexbox overflow */
}

.sidebar-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s ease;
    will-change: transform, opacity;
}

/* Navigation Panel - Default visible */
.sidebar-panel-nav {
    transform: translateX(0);
    opacity: 1;
    z-index: 1;
}

.sidebar-panel-nav.panel-exit {
    transform: translateX(-30%);
    opacity: 0;
    pointer-events: none;
}

/* Notifications Panel - Default hidden */
.sidebar-panel-notifications {
    transform: translateX(100%);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-panel-notifications.panel-enter,
.sidebar-panel-notifications.panel-enter-right {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Notification Button Active State */
.sidebar-notification-btn.active {
    background: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary);
}

/* Notifications Panel Header */
.notifications-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 1rem 0;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 0.5rem;
}

.notifications-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.notifications-back-btn:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
}

.notifications-back-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.notifications-panel-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.notifications-mark-all-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.notifications-mark-all-btn:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
}

/* Notifications Panel List */
.notifications-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Loading State */
.notifications-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

.notifications-loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Empty State */
.notifications-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.notifications-empty-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.notifications-empty-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--text-tertiary);
    opacity: 0.6;
}

.notifications-empty-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.notifications-empty-subtext {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin: 0;
}

/* Notification Item */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 0.5rem;
    margin: 0 0.25rem;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.notification-item:hover {
    background: var(--bg-hover);
}

.notification-item.notification-unread {
    background: rgba(var(--color-primary-rgb), 0.04);
}

.notification-item.notification-unread:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
}

/* Notification Icon */
.notification-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    background: var(--bg-tertiary);
}

.notification-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.notification-icon-info {
    background: rgba(var(--color-info-rgb), 0.1);
    color: var(--color-info);
}

.notification-icon-success {
    background: rgba(var(--color-success-rgb), 0.1);
    color: var(--color-success);
}

.notification-icon-warning {
    background: rgba(var(--color-warning-rgb), 0.1);
    color: var(--color-warning);
}

.notification-icon-error {
    background: rgba(var(--color-danger-rgb), 0.1);
    color: var(--color-danger);
}

/* Notification Content */
.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.notification-message {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0 0 0.375rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}

/* Unread Indicator */
.notification-indicator {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    background: var(--color-primary);
    border-radius: 50%;
}

/* Notifications Footer */
.notifications-panel-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-primary);
    margin-top: auto;
    flex-shrink: 0;
}

.notifications-panel-footer .notifications-mark-all-btn {
    padding: 0.625rem 0.875rem;
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.notifications-panel-footer .notifications-mark-all-btn:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
    border-color: var(--glattt-gold);
    color: var(--glattt-gold);
}

.notifications-view-all {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.notifications-view-all:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.notifications-view-all svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Dark Mode */
[data-theme="dark"] .notification-item.notification-unread,
.dark .notification-item.notification-unread {
    background: rgba(var(--color-primary-rgb), 0.08);
}

[data-theme="dark"] .notification-item.notification-unread:hover,
.dark .notification-item.notification-unread:hover {
    background: rgba(var(--color-primary-rgb), 0.12);
}

/* ============================================
   NOTIFICATION DETAIL VIEW
   ============================================ */

.notification-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    position: absolute;
    inset: 0;
    background: var(--bg-primary);
    z-index: 5;
}

/* Detail View Enter Animation (slide from right) */
.notification-detail-enter {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-detail-enter-start {
    opacity: 0;
    transform: translateX(100%);
}

.notification-detail-enter-end {
    opacity: 1;
    transform: translateX(0);
}

/* Detail View Leave Animation (slide to right) */
.notification-detail-leave {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-detail-leave-start {
    opacity: 1;
    transform: translateX(0);
}

.notification-detail-leave-end {
    opacity: 0;
    transform: translateX(100%);
}

/* List Enter Animation (slide from left) */
.notification-list-enter {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-list-enter-start {
    opacity: 0;
    transform: translateX(-30%);
}

.notification-list-enter-end {
    opacity: 1;
    transform: translateX(0);
}

/* List Leave Animation (slide to left) */
.notification-list-leave {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-list-leave-start {
    opacity: 1;
    transform: translateX(0);
}

.notification-list-leave-end {
    opacity: 0;
    transform: translateX(-30%);
}

.notification-detail-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notification-detail-back:hover {
    color: var(--glattt-gold);
}

.notification-detail-back svg {
    width: 1.25rem;
    height: 1.25rem;
}

.notification-detail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-detail-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.notification-detail-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.notification-detail-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.notification-detail-message {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

.notification-detail-time {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-top: auto;
    padding-top: 1rem;
}

.notification-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--glattt-gold);
    color: #fff;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: 1rem;
    width: fit-content;
}

.notification-detail-link:hover {
    background: var(--glattt-gold-dark, #b8942f);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.notification-detail-link svg {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   SIDEBAR INNER STRUCTURE
   ============================================ */

.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem 0.75rem;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0.75rem 0;
    
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.sidebar-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.sidebar-section {
    margin-bottom: 1rem;
}

.sidebar-user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-user-link {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-user-link:hover .sidebar-user-name {
    color: var(--glattt-gold);
}

.sidebar-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease, 
                opacity 0.25s ease, 
                transform 0.25s ease,
                width 0.3s ease;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: var(--text-tertiary);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-logout:hover {
    color: var(--color-danger);
    background: var(--color-danger-light);
    border-color: var(--color-danger);
    transform: translateX(2px);
}

.sidebar-logout svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   NEW SIDEBAR HEADER WITH BRANCH SELECTOR
   ============================================ */

.sidebar-brand-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* Collapsed: center logo only */
#sidebar.sidebar-collapsed .sidebar-brand-container {
    justify-content: center;
}

/* Clickable Logo Button */
.sidebar-logo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.sidebar-logo-btn:hover {
    background: transparent;
    border-color: transparent;
}

.sidebar-logo-btn.active {
    background: transparent;
    border-color: transparent;
}

.sidebar-logo-btn img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

/* Logo images visible by default */
.sidebar-logo-img {
    transition: 
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1) rotate(0deg);
    filter: blur(0px);
}

/* Hamburger icon hidden by default */
.sidebar-logo-burger {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--glattt-gold);
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
    filter: blur(4px);
    transition: 
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* On hover: hide logo, show burger with modern transition */
.sidebar-logo-btn:hover .sidebar-logo-img {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
    filter: blur(4px);
}

.sidebar-logo-btn:hover .sidebar-logo-burger {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0px);
}

/* Disable hover animation when panels are open */
.sidebar-logo-btn.panel-active {
    cursor: default;
}

.sidebar-logo-btn.panel-active:hover .sidebar-logo-img {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0px);
}

.sidebar-logo-btn.panel-active:hover .sidebar-logo-burger {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
    filter: blur(4px);
}

/* Logo switching animation (when changing branches) */
@keyframes logoSwitch {
    0% {
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
    50% {
        transform: scale(0.6) rotate(180deg);
        filter: blur(3px);
    }
    100% {
        transform: scale(1) rotate(360deg);
        filter: blur(0px);
    }
}

.sidebar-logo-btn.logo-switching .sidebar-logo-img {
    animation: logoSwitch 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Brand text - visible by default, hidden when collapsed */
.sidebar-brand-text {
    display: flex;
}

#sidebar.sidebar-collapsed .sidebar-brand-text {
    display: none;
}

/* Header Bell Button */
.sidebar-header-btn {
    display: flex; /* Visible by default */
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

/* Push notification button to the right */
.sidebar-notification-btn {
    margin-left: auto;
}

/* Hide header buttons when collapsed */
#sidebar.sidebar-collapsed .sidebar-header-btn {
    display: none;
}

.sidebar-header-btn:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
    border-color: var(--glattt-gold);
}

.sidebar-header-btn.active {
    background: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary);
    border-color: var(--glattt-gold);
}

.sidebar-header-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Collapse Button Styling */
.sidebar-collapse-btn {
    margin-left: 0.25rem;
}

.sidebar-collapse-btn:hover {
    background: rgba(var(--color-danger-rgb, 220, 38, 38), 0.1);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Hide collapse button when sidebar is collapsed */
#sidebar.sidebar-collapsed .sidebar-collapse-btn {
    display: none;
}

/* ============================================
   SIDEBAR ACTION BUTTONS (Institute + Mitteilungen)
   ============================================ */

.sidebar-action-buttons {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
}

.sidebar-action-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.sidebar-action-pill:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
    border-color: var(--glattt-gold);
    color: var(--text-primary);
}

.sidebar-action-pill.active {
    background: rgba(var(--color-primary-rgb), 0.15);
    border-color: var(--glattt-gold);
}

.sidebar-action-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.sidebar-action-text {
    white-space: nowrap;
}

.sidebar-action-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    background: var(--color-danger);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
}

/* Collapsed state: Hide action buttons with animation */
#sidebar.sidebar-collapsed .sidebar-action-buttons {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    max-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* ============================================
   BRANCH SELECTION PANEL
   ============================================ */

.sidebar-panel-branches {
    transform: translateX(-100%);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

.sidebar-panel-branches.panel-enter-left {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Panel exit animations */
.sidebar-panel-nav.panel-exit-left {
    transform: translateX(-30%);
    opacity: 0;
    pointer-events: none;
}

.sidebar-panel-nav.panel-exit-right {
    transform: translateX(30%);
    opacity: 0;
    pointer-events: none;
}

.sidebar-panel-notifications.panel-enter-right {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Branch Panel Header */
.branch-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 1rem 0;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.branch-panel-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.branch-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.branch-panel-close:hover {
    background: rgba(var(--color-danger-rgb, 220, 38, 38), 0.1);
    color: var(--color-danger);
}

.branch-panel-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Branch Cards Container - Full Height */
.branch-cards-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    overflow-y: auto;
}

/* Branch Card */
.branch-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 90px;
    flex: 1;
    border-radius: 0.875rem;
    background-color: var(--card-glass-bg);
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 2px transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.branch-card-all {
    background: linear-gradient(135deg, 
        rgba(var(--color-primary-rgb), 0.15) 0%, 
        rgba(var(--color-primary-rgb), 0.05) 100%);
}

.branch-card-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
    transition: all 0.3s ease;
}

.branch-card-all .branch-card-overlay {
    background: transparent;
}

.branch-card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px rgba(var(--color-primary-rgb), 0.3), 0 8px 24px rgba(0, 0, 0, 0.15);
}

.branch-card:hover .branch-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

.branch-card.active {
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.25);
}

.branch-card.active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 3px solid var(--glattt-gold);
    z-index: 3;
    pointer-events: none;
}

.branch-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem;
}

.branch-card-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.branch-card-icon img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}

.branch-card-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.branch-card-all .branch-card-name {
    color: var(--text-primary);
    text-shadow: none;
}

.branch-card-address {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.branch-card-all .branch-card-address {
    color: var(--text-tertiary);
    text-shadow: none;
}

.branch-card-check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--glattt-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.branch-card-check svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Make branch panel full height */
.sidebar-panel-branches {
    display: flex;
    flex-direction: column;
}

/* ============================================
   BOTTOM CONTROLS (API Status + Theme Toggle)
   ============================================ */

.sidebar-bottom-controls {
    padding: 0.75rem 0;
    margin-top: auto;
}

.sidebar-status-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
}

.sidebar-api-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: 0.625rem;
    transition: opacity 0.3s ease, max-width 0.3s ease;
}

/* Collapsed: Hide API status */
#sidebar.sidebar-collapsed .sidebar-api-status {
    display: none;
}

#sidebar.sidebar-collapsed .sidebar-status-row {
    justify-content: center;
    padding: 0;
    gap: 0;
}

/* Theme Toggle Button */
.sidebar-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.sidebar-theme-toggle:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
    border-color: var(--glattt-gold);
    color: var(--glattt-gold);
}

.sidebar-theme-toggle .theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover: Icon moves up slightly */
.sidebar-theme-toggle:hover .theme-icon {
    transform: translateY(-2px);
}

.sidebar-theme-toggle .theme-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Theme switch animation */
@keyframes themeIconOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(20px);
        opacity: 0;
    }
}

@keyframes themeIconIn {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.sidebar-theme-toggle .theme-icon.icon-exit {
    animation: themeIconOut 0.2s ease-out forwards !important;
    transition: none !important;
}

.sidebar-theme-toggle .theme-icon.icon-enter {
    animation: themeIconIn 0.25s ease-out forwards !important;
    transition: none !important;
}

.sidebar-api-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-warning);
}

.sidebar-api-status.connected .sidebar-api-dot {
    background: var(--color-success);
}

.sidebar-api-status.error .sidebar-api-dot {
    background: var(--color-danger);
}

.sidebar-api-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ============================================
   VIEW TRANSITIONS - Page Navigation Animations
   Modern slide animations for page changes
   ============================================ */

/* Enable View Transitions */
@view-transition {
    navigation: auto;
}

/* Root/Body should stay completely stable - no transition */
html {
    view-transition-name: none;
}

body {
    view-transition-name: body-stable;
}

::view-transition-old(body-stable),
::view-transition-new(body-stable) {
    animation: none;
    mix-blend-mode: normal;
    isolation: isolate;
}

/* Dashboard backgrounds should NOT transition (stay stable) */
::view-transition-old(dashboard-bg),
::view-transition-new(dashboard-bg),
::view-transition-old(dashboard-img),
::view-transition-new(dashboard-img) {
    animation: none;
    mix-blend-mode: normal;
}

/* Sidebar should NOT transition - hide old immediately, show new immediately */
#sidebar {
    view-transition-name: sidebar;
}

::view-transition-old(sidebar) {
    animation: none;
    display: none !important;
    opacity: 0 !important;
}

::view-transition-new(sidebar) {
    animation: none;
}

/* Bottom nav should stay stable */
.bottom-nav-glattt {
    view-transition-name: bottom-nav;
}

::view-transition-old(bottom-nav) {
    animation: none;
    display: none !important;
    opacity: 0 !important;
}

::view-transition-new(bottom-nav) {
    animation: none;
}

/* Assign view-transition-name to content area */
.main-content-area {
    view-transition-name: main-content;
}

/* Main content transition - modern app-like feel */
::view-transition-old(main-content) {
    animation: content-exit 0.25s cubic-bezier(0.32, 0, 0.67, 0) forwards;
    z-index: 1;
}

::view-transition-new(main-content) {
    animation: content-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    z-index: 2;
}

/* Modern exit animation - scales down slightly while sliding */
@keyframes content-exit {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateX(-30px) scale(0.98);
        opacity: 0;
        filter: blur(2px);
    }
}

/* Modern enter animation - springs in from right */
@keyframes content-enter {
    0% {
        transform: translateX(40px) scale(0.98);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* Fallback animations for browsers without View Transitions API */
.page-exit {
    animation: content-exit 0.2s ease-out forwards;
}

.page-enter {
    animation: content-enter 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(main-content),
    ::view-transition-new(main-content) {
        animation: fade-only 0.15s ease;
    }
    
    .page-exit,
    .page-enter {
        animation: fade-only 0.15s ease;
    }
}

@keyframes fade-only {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* View Transition Root - transparent to prevent white flash */
::view-transition {
    background: transparent;
}

/* Ensure the root transition group doesn't cause flicker */
::view-transition-group(root) {
    animation-duration: 0s;
}

/* ============================================
   FULLSCREEN APPOINTMENT MODAL
   Instant-open modal for appointment details
   ============================================ */

.appointment-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    /* Animation */
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.appointment-fullscreen-modal.modal-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.appointment-fullscreen-modal.modal-closing {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.appointment-modal-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-primary);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    /* Safe Area für iOS */
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
}

.appointment-modal-header-left,
.appointment-modal-header-right {
    min-width: 3rem;
    display: flex;
    align-items: center;
}

.appointment-modal-header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.appointment-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    font-family: var(--font-heading, 'Dosis');
}

.appointment-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.appointment-modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.appointment-modal-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

.appointment-modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.appointment-modal-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--text-secondary);
}

.appointment-modal-loading .loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.appointment-modal-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: var(--bg-secondary);
}

/* Dark mode */
[data-theme="dark"] .appointment-fullscreen-modal,
.dark .appointment-fullscreen-modal {
    background: var(--bg-secondary);
}


/* ===================================================
 * HUB/DASHBOARD STYLES (aus hub.css migriert)
 * =================================================== */


/* HTML/Body erbt die Safe-Area für Status-Bar */
html {
    /* Hintergrundfarbe füllt die Status-Bar-Fläche */
    background-color: var(--bg-primary, #1a1a2e);
}

/* Safe-Area für iOS PWA - NUR seitlich und unten am Body */
/* Oben wird von der Topbar/Sidebar selbst gehandhabt (via nav.css) */
body {
    padding-top: 0; /* Topbar geht bis ganz oben, hat selbst padding */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    min-height: 100vh;
}

/* Für fixed/sticky Header: Gehen bis ganz oben, Inhalt hat padding */
@supports(padding: env(safe-area-inset-top)) {
    /* Topbar/Header: bis ganz oben (top:0), aber Inhalt mit padding */
    .topbar-glattt,
    .hub-header {
        top: 0; /* Nahtlos mit Status-Bar */
        padding-top: env(safe-area-inset-top); /* Inhalt unter Notch/Dynamic Island */
    }
}

/* ============================================
   LAYOUT STRUCTURE
   Hauptlogik in nav.css - siehe dort für:
   - Sidebar positioning (--layout-top-offset)
   - main-content-area margin/padding
   ============================================ */

/* Dashboard Cards - Modern Design */
/* Stats Grid Responsive */
   NAVIGATION & SIDEBAR STYLES
   ============================================ */

/* Branch Status List */
.branch-item {
    transition: background-color 0.15s ease-in-out;
}

.branch-item:hover {
    background-color: var(--bg-secondary);
}

/* ============================================
   NAVIGATION ACTIVE STATES
   ============================================ */

/* Navigation Active States */
.nav-item.active, .nav-item[href*="dashboard"].bg-blue-50 {
    background-color: var(--glattt-turquoise-light) !important;
    color: var(--glattt-gray) !important;
    border-right: 3px solid var(--glattt-gold);
}

.nav-item:hover {
    background-color: var(--glattt-turquoise-light);
    color: var(--glattt-gray);
}

/* Welcome Banner - Modern Gradient Design */

/* Responsive Design Improvements */
@media (max-width: 1023px) {
    .main-content-area {
        margin-left: 0 !important;
    }
    
    #sidebar {
        display: none !important;
    }
    
    #sidebar.sidebar-open {
        transform: translateX(0);
    }
}

/* ============================================
   DASHBOARD BACKGROUND & LAYOUT
   ============================================ */
.dashboard-background {
    background: radial-gradient(140% 140% at 0% 0%, var(--dashboard-gradient-1-start) 0%, var(--dashboard-gradient-1-end) 55%),
                radial-gradient(160% 160% at 100% 0%, var(--dashboard-gradient-2-start) 0%, var(--dashboard-gradient-2-end) 60%),
                linear-gradient(180deg, var(--dashboard-bg-start) 0%, var(--dashboard-bg-mid) 45%, var(--dashboard-bg-end) 100%);
    min-height: 100vh;
    color: var(--dashboard-text-color);
    /* Hintergrund fixiert - bewegt sich nicht beim Scrollen */
    position: fixed;
    inset: 0;
    z-index: -1;
    background-attachment: fixed;
    /* View Transitions: Verhindert Flackern beim Seitenwechsel */
    view-transition-name: dashboard-bg;
}

/* Standort-Hintergrundbild mit elegantem Schleier-Effekt */
.dashboard-background-image {
    position: fixed;
    inset: 0;
    z-index: -1;
    /* Standardmäßig unsichtbar */
    opacity: 0;
    /* Bild-Styling */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Blur für weicheren Look */
    filter: blur(8px);
    /* Etwas größer um Blur-Ränder zu verbergen */
    transform: scale(1.05);
    /* Sanfte Animation beim Ein-/Ausblenden */
    transition: opacity 0.5s ease-in-out;
    /* View Transitions: Verhindert Flackern beim Seitenwechsel */
    view-transition-name: dashboard-img;
}

/* Aktiver Zustand - wenn Bild gesetzt */
.dashboard-background-image.active {
    opacity: 1;
}

/* Weißer Schleier über dem Bild */
.dashboard-background-image::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Light Mode: Weißer Schleier */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.85) 100%
    );
    z-index: 1;
}

/* Gradient-Akzente über dem Schleier */
.dashboard-background-image::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Subtile Gradient-Akzente in der GLATTT-Farbe */
    background: 
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(59, 155, 159, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(93, 190, 163, 0.12) 0%, transparent 50%);
    z-index: 2;
}

/* Dark Mode: Dunklerer Schleier */
[data-theme="dark"] .dashboard-background-image::before,
.dark .dashboard-background-image::before {
    background: linear-gradient(
        135deg,
        rgba(26, 26, 46, 0.88) 0%,
        rgba(26, 26, 46, 0.82) 50%,
        rgba(26, 26, 46, 0.88) 100%
    );
}

[data-theme="dark"] .dashboard-background-image::after,
.dark .dashboard-background-image::after {
    background: 
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(59, 155, 159, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(93, 190, 163, 0.06) 0%, transparent 50%);
}

/* Shell für den Content - kein eigener Hintergrund mehr */
.dashboard-shell {
    position: relative;
    min-height: 100vh;
}

/* Dekorative Blobs - auch fixiert für Parallax-Effekt */
.dashboard-shell::before,
.dashboard-shell::after {
    content: '';
    position: fixed; /* Fixed statt absolute */
    width: 420px;
    height: 420px;
    border-radius: 9999px;
    filter: blur(120px);
    opacity: 0.45;
    pointer-events: none;
    z-index: -1; /* Hinter Content aber über Hintergrund */
}

.dashboard-shell::before {
    top: -160px;
    right: -160px;
    background: radial-gradient(circle, var(--dashboard-blob-1-start) 0%, var(--dashboard-blob-1-end) 65%);
}

.dashboard-shell::after {
    bottom: -220px;
    left: -120px;
    background: radial-gradient(circle, var(--dashboard-blob-2-start) 0%, var(--dashboard-blob-2-end) 70%);
}

.dashboard-main-wrapper {
    /* Mobile: eigene Abstände oben/unten */
    margin-top: clamp(1.5rem, 3vw, 3rem);
    margin-bottom: clamp(1.5rem, 3vw, 3rem);
}

/* Desktop: padding-top kommt vom main-content-area, also nur wenig extra margin */
@media (min-width: 1024px) {
    .dashboard-main-wrapper {
        margin-top: 0;
        margin-bottom: clamp(1.5rem, 3vw, 3rem);
    }
}

@media (max-width: 1024px) {
    .dashboard-main-wrapper {
        padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 6vw, 4.5rem);
    }
}

@media (max-width: 640px) {
    .dashboard-main-wrapper {
        padding: 2rem 1.25rem;
    }
}

.dashboard-main-content {
    position: relative;
    z-index: 1;
    /* Horizontal padding for smaller screens */
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
}

.dashboard-section-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 5vw, 4.5rem);
}

.dashboard-section-block {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 4vw, 1rem);
}

.dashboard-surface {
    background: var(--glass-bg);
    border-radius: 28px;
    border: 1px solid var(--border-secondary);
    box-shadow: 0 24px 45px -32px var(--sidebar-panel-shadow);
    backdrop-filter: blur(18px);
    padding: 2.25rem;
}


.api-log-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.api-log-empty {
    padding: 1.25rem 1.5rem;
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-size: 0.9rem;
    text-align: center;
}

.api-log-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1.1rem 1.4rem;
    border-radius: 24px;
    background: linear-gradient(145deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-secondary);
    box-shadow: inset 0 1px 1px var(--glass-bg);
}

.api-log-item-pending {
    border-style: dashed;
    opacity: 0.85;
}

.api-log-item-error {
    border-color: var(--color-danger-light);
    background: linear-gradient(145deg, var(--bg-primary) 0%, var(--color-danger-light) 100%);
}

.api-log-main {
    flex: 1 1 320px;
    min-width: 240px;
}

.api-log-endpoint {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

.api-log-endpoint span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-right: 0.6rem;
    background: var(--border-secondary);
    color: var(--text-secondary);
}

.api-log-summary {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.api-log-meta {
    display: grid;
    gap: 0.6rem;
    grid-auto-flow: column;
    align-items: center;
    justify-content: flex-start;
    margin-left: auto;
}

@media (max-width: 768px) {
    .api-log-meta {
        grid-auto-flow: row;
        justify-items: flex-start;
        margin-left: 0;
    }
}

.api-log-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--border-secondary);
    color: var(--text-secondary);
}

.api-log-pill-duration {
    background: var(--dashboard-gradient-2-start);
    color: var(--glattt-gold-dark);
}

.api-log-pill-status {
    background: var(--menu-pill-active-start);
    color: var(--color-success-dark);
}

.api-log-item-error .api-log-pill-status {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.api-log-pill-time {
    background: var(--border-primary);
}

/* =====================================================
   27. ENVIRONMENT BADGE (Floating Card)
   ===================================================== */

.env-badge {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 99999;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    user-select: none;
    max-width: 260px;
}

.env-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Staging: gelb/orange */
.env-badge--staging {
    background: var(--color-warning, #f59e0b);
    color: #1a1a1a;
    border: 2px solid var(--color-warning-dark, #d97706);
}

/* Lokal: blau/tuerkis */
.env-badge--local {
    background: var(--glattt-turquoise, #5dbea3);
    color: #fff;
    border: 2px solid #4aaa90;
}

.env-badge-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.env-badge-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.env-badge-label {
    white-space: nowrap;
}

.env-badge-chevron {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    transform: rotate(180deg);
    opacity: 0.7;
}

.env-badge-chevron--open {
    transform: rotate(0deg);
}

.env-badge-details {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.env-badge-detail {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.75rem;
    font-weight: 400;
}

.env-badge-detail-label {
    opacity: 0.7;
    white-space: nowrap;
}

.env-badge-detail-value {
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}

/* Dark Mode */
.dark .env-badge--staging {
    background: #b45309;
    color: #fff;
    border-color: #92400e;
}

.dark .env-badge--local {
    background: #0f766e;
    color: #fff;
    border-color: #115e59;
}

.dark .env-badge-details {
    border-top-color: rgba(255, 255, 255, 0.2);
}