/* === BASIS STYLES === */
:root {
    /* Dark Mode (Basis) */
    --bg-color: #111114;
    --card-bg: #1c1c21;
    --surface-2: #232329;
    --surface-3: #2d2d35;
    --text-main: #e2e2e8;
    --text-muted: #9898a2;
    --text-hint: #55555e;
    --accent: #e8192c;
    --accent-dark: #b30f1e;
    --accent-glow: rgba(232, 25, 44, 0.16);
    --border: #2d2d35;
    --border-strong: #42424e;
    --today-bg: rgba(232, 25, 44, 0.11);
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.45);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.55);
    --shadow-lg: 0 10px 32px rgba(0,0,0,0.7);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --input-bg: #2a2a2a;
    /* Light Mode Basis-Variablen (werden per JS überschrieben wenn Admin-Farben gespeichert) */
    --lm-bg-color:      #f0f0f6;
    --lm-card-bg:       #ffffff;
    --lm-surface-2:     #f4f4f8;
    --lm-surface-3:     #e8e8f0;
    --lm-text-main:     #18181e;
    --lm-text-muted:    #5c5c70;
    --lm-text-hint:     #9090a4;
    --lm-border:        #d0d0dc;
    --lm-border-strong: #b4b4c4;
    --lm-input-bg:      #ffffff;
    /* Semantische Farben — Phasen, Terminarten, Badges (Dark & Light gleich) */
    --color-aufbau:     #f39c12;
    --color-service:    #3498db;
    --color-abbau:      #e74c3c;
    --color-pl:         #e91e63;
    --color-transport:  #f39c12;
    --color-kuerzel-bg: #3a3a45;
    --color-kuerzel-text: #ddddee;
    --color-lager:      #9b59b6;
    --color-intern:     #f39c12;
    --color-urlaub:     #2ecc71;
    --color-krank:      #d35400;
    --color-schule:     #f1c40f;
    --color-ausgleich:  #1abc9c;
    --color-mobil:      #2980b9;
    --color-status-fest:         #2ecc71;
    --color-status-angefragt:    #f39c12;
    --color-status-krank:        #c0392b;
    --color-status-nicht-angefragt: #e74c3c;
}

/* ── LIGHT MODE: überschreibt alle Farb-Variablen mit den --lm-* Werten ── */
body.light-mode {
    --bg-color:     var(--lm-bg-color);
    --card-bg:      var(--lm-card-bg);
    --surface-2:    var(--lm-surface-2);
    --surface-3:    var(--lm-surface-3);
    --text-main:    var(--lm-text-main);
    --text-muted:   var(--lm-text-muted);
    --text-hint:    var(--lm-text-hint);
    --border:       var(--lm-border);
    --border-strong:var(--lm-border-strong);
    --input-bg:     var(--lm-input-bg);
    --today-bg: rgba(232, 25, 44, 0.06);
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.07);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
    --shadow-lg: 0 10px 32px rgba(0,0,0,0.13);
    color-scheme: light;
}
/* Eingabefelder im Light-Mode */
body.light-mode select,
body.light-mode input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
body.light-mode textarea { background-color: var(--lm-input-bg) !important; color: var(--text-main) !important; border-color: var(--border) !important; }
/* Monat-Nav */
body.light-mode .month-nav,
body.light-mode .month-nav span { background-color: var(--lm-card-bg); color: var(--text-main); }
/* Stats-Karten */
body.light-mode .stats-card { background: var(--lm-card-bg); }
/* Kalender */
body.light-mode .calendar-header { background-color: var(--lm-surface-3); }
body.light-mode .calendar-cell { background-color: var(--lm-card-bg); }
body.light-mode .desktop-day-header { background: var(--lm-card-bg); }
/* Sidebar */
body.light-mode .admin-sidebar { background: var(--lm-surface-2); border-right-color: var(--border); }
body.light-mode .admin-sidebar-logo { border-bottom-color: var(--border); }
body.light-mode .admin-nav-item { color: var(--text-main); }
body.light-mode .admin-nav-item:hover { background: rgba(0,0,0,0.05); color: var(--text-main); }
body.light-mode .admin-nav-item.active { background: var(--accent-glow); color: var(--accent); border-left-color: var(--accent); }
body.light-mode .admin-nav-item .ic { opacity: 0.6; }
body.light-mode .admin-nav-item.active .ic,
body.light-mode .admin-nav-item:hover .ic { opacity: 1; }
body.light-mode .admin-nav-group-label { color: var(--text-muted); }
body.light-mode .admin-nav-item.nav-danger { color: #c0392b; }
body.light-mode .settings-nav { background: var(--lm-surface-2); border-right-color: var(--border); }
body.light-mode .settings-nav-item { color: var(--text-main); }
body.light-mode .settings-nav-item:hover { background: rgba(0,0,0,0.05); color: var(--text-main); }
body.light-mode .settings-nav-item.active { background: var(--accent-glow); color: var(--accent); border-left-color: var(--accent); }
/* Mobile Nav */
body.light-mode .mobile-nav-bar { background: var(--lm-card-bg); border-top-color: var(--border); }
body.light-mode .nav-btn { color: var(--text-main); }
body.light-mode .mobile-month-strip { background: var(--lm-surface-2); }
/* Admin Mobile Bar */
body.light-mode .admin-mobile-bar { background: var(--lm-card-bg); border-bottom-color: var(--border); }
/* Modals */
body.light-mode .modal-content { background: var(--card-bg) !important; }
body.light-mode .modal-head { background: var(--card-bg); border-bottom-color: var(--border); }
body.light-mode .modal-body { background: var(--card-bg); }
body.light-mode .modal-foot { background: var(--card-bg); border-top-color: var(--border); }
/* Tabellen */
body.light-mode .data-table th { background: var(--lm-surface-3); color: var(--text-main); }
body.light-mode .data-table tr:hover td { background: rgba(0,0,0,0.03); }
/* Hardcoded dunkle Hintergründe überschreiben */
body.light-mode [style*="background:#1a1a1a"],
body.light-mode [style*="background: #1a1a1a"] { background: var(--surface-2) !important; color: var(--text-main) !important; }
body.light-mode [style*="background:#2a2a2a"],
body.light-mode [style*="background: #2a2a2a"] { background: var(--surface-3) !important; color: var(--text-main) !important; }
body.light-mode [style*="background:#111"] { background: var(--bg-color) !important; }
body.light-mode [style*="background:#0d0d0d"] { background: var(--bg-color) !important; }
body.light-mode [style*="color:#eee"],
body.light-mode [style*="color: #eee"],
body.light-mode [style*="color:#fff"],
body.light-mode [style*="color: #fff"] { color: var(--text-main) !important; }
/* Sections */
body.light-mode .admin-section { background: var(--bg-color); }
/* Floating Nav */
body.light-mode .floating-nav { background: var(--lm-card-bg); border-color: var(--border); box-shadow: var(--shadow-md); }
body.light-mode .floating-nav button { color: var(--text-main); }
body.light-mode .floating-nav button:hover { background: var(--surface-2); }
/* Ganztags-Chips bleiben farbig */
body.light-mode .bg-krank { background-color: #d35400 !important; color: #fff !important; }
body.light-mode .bg-mobil { background-color: #2471a3 !important; color: #fff !important; }
/* Schaltflächen ohne eigene bg-Farbe */
body.light-mode .action-btn:not([style*="background"]) { background: var(--surface-3); color: var(--text-main); }
/* Code */
body.light-mode code { background: var(--surface-3); color: var(--text-main); }
/* Unsaved Dialog */
body.light-mode .unsaved-dialog-box { background: var(--card-bg); }
/* Day-Tabs */
body.light-mode .day-tabs { border-bottom-color: var(--border); }
body.light-mode .day-tab { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
body.light-mode .day-tab.active { background: var(--card-bg); color: var(--text-main); }
/* Notification Panel */
body.light-mode #notificationsPanel { background: var(--lm-card-bg); border-color: var(--border); }

/* ══════════════════════════════════════════════════════════════════ */
/* PRIDE THEME — Dark-Mode Basis + statische Regenbogen-Farbverläufe */
/* ══════════════════════════════════════════════════════════════════ */

body.pride-mode {
    --bg-color:      #0e0e18;
    --card-bg:       #171726;
    --surface-2:     #1e1e30;
    --surface-3:     #262638;
    --text-main:     #eaeaf8;
    --text-muted:    #8888b8;
    --text-hint:     #505070;
    --border:        #2e2e48;
    --border-strong: #46466a;
    --input-bg:      #222238;
    --accent:        #bf60ff;
    --accent-dark:   #8b20e0;
    --accent-glow:   rgba(191, 96, 255, 0.22);
    --today-bg:      rgba(191, 96, 255, 0.12);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.55);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.65);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.8);
}

/* ── Überschriften mit statischem Regenbogen-Verlauf ── */
body.pride-mode h1 {
    background: linear-gradient(90deg, #FF0018 0%, #FF9800 20%, #FFEE00 40%, #00C840 55%, #0096FF 75%, #9400FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.pride-mode h2 {
    background: linear-gradient(90deg, #FF0018 0%, #FF9800 20%, #FFEE00 40%, #00C840 60%, #0096FF 80%, #9400FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Wochentag-Header im Kalender ── */
body.pride-mode .day-name {
    background: linear-gradient(90deg, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Regenbogen-Border für .controls ── */
body.pride-mode .controls {
    border: 2px solid transparent !important;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(90deg, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF) border-box !important;
}

/* ── Kalender-Wrapper ── */
body.pride-mode .calendar-wrapper {
    border: 2px solid transparent !important;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(90deg, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF) border-box !important;
}

/* ── Heute-Zelle ── */
body.pride-mode .calendar-cell.today {
    border: 2px solid transparent !important;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(135deg, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF) border-box !important;
    box-shadow: 0 0 16px rgba(148, 0, 255, 0.3), inset 0 0 12px rgba(148, 0, 255, 0.07) !important;
}

/* ── Stats-Karten ── */
body.pride-mode .stats-card {
    border: 2px solid transparent !important;
    background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
                linear-gradient(135deg, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF) border-box !important;
}

/* ── Aktive Navigationspunkte ── */
body.pride-mode .admin-nav-item.active {
    background: linear-gradient(90deg, rgba(255,0,24,0.13), rgba(148,0,255,0.13)) !important;
    color: var(--text-main) !important;
    border-left: 3px solid transparent !important;
    border-image: linear-gradient(to bottom, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF) 1 !important;
}
body.pride-mode .settings-nav-item.active {
    background: linear-gradient(90deg, rgba(255,0,24,0.13), rgba(148,0,255,0.13)) !important;
    border-left: 3px solid transparent !important;
    border-image: linear-gradient(to bottom, #FF0018, #9400FF) 1 !important;
}

/* ── Admin-Sidebar linker Rahmen ── */
body.pride-mode .admin-sidebar {
    border-right: 2px solid transparent;
    background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
                linear-gradient(to bottom, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF) border-box;
}
body.pride-mode .admin-sidebar-logo {
    position: relative;
}
body.pride-mode .admin-sidebar-logo::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF);
}

/* ── Mobile Nav Bar ── */
body.pride-mode .mobile-nav-bar {
    border-top: 2px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(90deg, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF) border-box;
}

/* ── Modal-Kopfzeile ── */
body.pride-mode .modal-head {
    border-bottom: 2px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(90deg, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF) border-box;
}

/* ── Month-Nav ── */
body.pride-mode .month-nav {
    border: 2px solid transparent;
    background: linear-gradient(#2a2a2a, #2a2a2a) padding-box,
                linear-gradient(90deg, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF) border-box;
}
body.pride-mode .month-nav button { color: #bf60ff; }
body.pride-mode .month-nav span {
    background: linear-gradient(90deg, #FF0018, #FF9800, #FFEE00, #00C840, #0096FF, #9400FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Theme-Toggle-Button selbst bekommt Regenbogen-Hintergrund ── */
body.pride-mode #colorModeToggleAdmin,
body.pride-mode #colorModeToggleMain {
    background: linear-gradient(90deg,
        rgba(255,0,24,0.12), rgba(255,152,0,0.12), rgba(255,238,0,0.12),
        rgba(0,200,80,0.12), rgba(0,150,255,0.12), rgba(148,0,255,0.12)
    ) !important;
    border-radius: 8px;
}

/* ── Eingabefelder & Selects ── */
body.pride-mode select,
body.pride-mode input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
body.pride-mode textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

/* ── Desktop Day-Header ── */
body.pride-mode .desktop-day-header {
    border-bottom: 1px solid rgba(148,0,255,0.2);
}

/* ── Calendar-Header Hintergrund ── */
body.pride-mode .calendar-header {
    background: linear-gradient(90deg,
        rgba(255,0,24,0.15) 0%, rgba(255,152,0,0.15) 16.6%,
        rgba(255,238,0,0.15) 33.3%, rgba(0,200,80,0.15) 50%,
        rgba(0,150,255,0.15) 66.6%, rgba(148,0,255,0.15) 83.3%
    ) !important;
}

/* ── Floating Nav ── */
body.pride-mode .floating-nav {
    border: 2px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(90deg, #FF0018, #9400FF) border-box;
}

html { overflow-x: hidden; }
body { background-color: var(--bg-color); color: var(--text-main); font-family: 'Segoe UI', sans-serif; margin: 0; padding: 20px; padding-bottom: 120px; overflow-x: hidden; max-width: 100vw; }
.header-container { text-align: center; margin-bottom: 25px; }
.app-logo { max-height: 80px; width: auto; margin-bottom: 10px; border-radius: 4px; }
h1 { color: var(--accent); margin: 0; font-size: 2em; }

.controls { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; background-color: var(--card-bg); padding: 15px; border-radius: 12px; border: 1px dashed var(--accent); }
select, button.refresh-btn, input { background-color: #2a2a2a; color: var(--text-main); border: 1px solid var(--border); padding: 10px 15px; border-radius: 8px; font-size: 16px; outline: none; cursor: pointer; }
button.refresh-btn { font-weight: bold; transition: background 0.2s; }
button.refresh-btn:hover { background-color: rgba(255, 0, 0, 0.2); border-color: var(--accent); }

.month-nav { display: flex; align-items: center; gap: 10px; background-color: #2a2a2a; border: 1px solid var(--border); border-radius: 8px; padding: 5px 15px; }
.month-nav button { background: none; border: none; color: var(--accent); font-size: 1.4em; cursor: pointer; padding: 5px 10px; }
.month-nav span { font-weight: bold; font-size: 1.2em; min-width: 130px; text-align: center; }

#sollIstDisplay { width: 100%; max-width: 600px; margin: 0 auto 30px auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; font-size: 1.05em; display: none; }
#sollIstDisplay.multi { max-width: 100%; }
.stats-card { background: #2a2a2a; padding: 15px; border-radius: 8px; font-weight: bold; border: 1px solid var(--border); flex: 1 1 260px; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.dash-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #444; padding-bottom: 5px; gap: 8px; }
.val-pos { color: #2ecc71; } .val-neg { color: #e74c3c; }

/* === TAGESINFO === */
.tagesinfo-chip { background: rgba(52,152,219,0.15); border: 1px solid rgba(52,152,219,0.5); border-radius: 4px; padding: 3px 7px; font-size: 0.82em; color: #7fc8f8; cursor: pointer; display: block; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.tagesinfo-chip:hover { background: rgba(52,152,219,0.3); }
.tagesinfo-add-btn { background: none; border: 1px dashed rgba(52,152,219,0.4); border-radius: 4px; padding: 3px 7px; font-size: 0.8em; color: rgba(52,152,219,0.6); cursor: pointer; display: block; width: 100%; text-align: left; margin-top: 3px; }
.tagesinfo-add-btn:hover { border-color: rgba(52,152,219,0.8); color: #7fc8f8; background: rgba(52,152,219,0.1); }
.tagesinfo-section { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(52,152,219,0.2); }

/* === KALENDER === */
/* overflow: visible damit sticky innerhalb (Wochentag-Header) am .admin-main andocken kann
   statt vom Wrapper gefangen zu werden. Border-radius auf Header/Grid übertragen. */
.calendar-wrapper { max-width: none; margin: 0; background-color: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); overflow: visible; display: none; }
.calendar-header { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background-color: #2a2a2a; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; border-radius: 12px 12px 0 0; }
.desktop-day-header { position: sticky; top: 49px; z-index: 5; background: var(--card-bg); padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 6px; }
.day-name { padding: 15px 5px; text-align: center; font-weight: bold; color: var(--accent); border-right: 1px solid var(--border); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); }
.calendar-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 5px; transition: background-color 0.2s; }
.calendar-cell.empty { background-color: #181818; }
.calendar-cell.today { background-color: rgba(255, 71, 87, 0.08); border: 2px solid var(--accent); box-shadow: inset 0 0 15px rgba(255, 71, 87, 0.15); }
/* Graue Hervorhebung für Feiertage */
.calendar-cell.holiday {
    background-color: rgba(255, 255, 255, 0.07) !important;
}
/* Platzhalter für die Virtuellen Schienen */
.event-spacer {
    opacity: 0;
    pointer-events: none;
    margin-bottom: 5px;
    transition: min-height 0.1s ease;
}
/* Animation für den blinkenden Button */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); border-color: #e74c3c; }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); border-color: #ff0000; }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); border-color: #e74c3c; }
}

@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7); border-color: #f39c12; }
    70% { box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); border-color: #e67e22; }
    100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); border-color: #f39c12; }
}

.blink-admin { animation: pulse-red 2s infinite; background: rgba(231, 76, 60, 0.2) !important; }
.blink-user { animation: pulse-orange 2s infinite; background: rgba(243, 156, 18, 0.2) !important; }

/* Box für den Gegenvorschlag im Nutzer-Modal */
.vorschlag-box {
    background: rgba(243, 156, 18, 0.15);
    border: 2px solid #f39c12;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
}
/* ========================================= */
/* NEU: TABELLEN ANSICHT (EXCEL-STYLE 1:1)   */
/* ========================================= */
.dispo-table-container {
    width: 100%;
    max-width: 100%; /* Verhindert, dass der Container über den Bildschirmrand hinauswächst */
    overflow-x: auto; /* WICHTIG: Erzwingt den horizontalen Scrollbalken! */
    margin-top: 0px;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    background: #222;
}
.excel-table {
    width: 100%;
    border-collapse: collapse;
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 0.85em;
    text-align: left;
    min-width: 1800px; /* Macht die Tabelle absichtlich breit, damit nichts gequetscht wird */
}
.excel-table th { background: #ffff00; color: #000; padding: 6px; border: 1px solid #777; position: sticky; top: 0; z-index: 10; font-weight: bold; }
.excel-table td {
border: 1px solid #777;
padding: 4px; /* Etwas weniger Padding für die Eingabefelder */
vertical-align: top;
white-space: nowrap;
overflow: hidden; /* Schneidet Überstände sauber ab */
}
/* Container für die Buttons unter den Eingabefeldern */
.edit-button-container {
display: flex;
gap: 4px;
margin-top: 4px;
}

.edit-button-container button {
flex: 1; /* Alle Buttons werden gleich breit */
padding: 4px 2px;
font-size: 0.75em;
cursor: pointer;
border: none;
border-radius: 3px;
color: #fff;
}
/* 1:1 Excel-Farben aus deinem Screenshot */
.row-saturday td { background-color: #ffb6c1; } /* Rosa */
.row-sunday td { background-color: #ffdab9; }   /* Orange */
.row-holiday td { background-color: #a9a9a9; }  /* Grau */
.row-weekday td { background-color: #ffffff; }  /* Weiß */
.row-weekday-alt td { background-color: #e0ffff; } /* Alternierend Light Cyan (für leere Montage/Dienstage) */

.excel-table .job-cell:hover { background-color: rgba(0,0,0,0.1); cursor: pointer; }
/* Excel Inline-Eingabe (Quick Add) */
.quick-add-cell { color: #888; font-style: italic; cursor: text; border: 1px dashed #bbb !important; transition: all 0.2s; }
.quick-add-cell:hover { background-color: #fffde7 !important; color: #333; }
.excel-inline-input {
width: 100%;
box-sizing: border-box;
border: 2px solid #2ecc71;
padding: 4px;
font-size: 0.9em;
outline: none;
box-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
font-family: Arial, sans-serif;
background: #fff;
color: #000;
display: block; /* Zwingt das Feld, die ganze Breite zu nutzen */
margin: 0;      /* Verhindert das "Verrutschen" durch Außenabstände */
border-radius: 4px;
}

textarea.excel-inline-input {
resize: vertical;
min-height: 40px; /* Etwas kleiner für die Einzeiler-Optik */
white-space: pre-wrap;
overflow-y: hidden; /* Verhindert unnötige Scrollbalken beim Tippen */
}
.slot-lager, .slot-abs, .slot-job {
    transition: min-height 0.1s ease;
}
.holiday-label {
    font-size: 0.75em;
    color: #aaa;
    font-style: italic;
    margin-left: 8px;
    display: inline-block;
}
/* Markierung für Tage mit erfasster Arbeitszeit */
.calendar-cell.time-tracked { background-color: rgba(46, 204, 113, 0.12); }

/* Klickbare Elemente für Smart-Klick */
.clickable { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.clickable:hover { transform: scale(1.02); box-shadow: 0 6px 12px rgba(0,0,0,0.5); }
.calendar-cell.today .date-number { color: var(--accent); font-size: 1.3em; }
.date-number { font-weight: bold; font-size: 1.1em; margin-bottom: 5px; color: var(--text-muted); text-align: right; }
.date-clickable { cursor: pointer; }
.date-number.date-clickable:hover { color: var(--accent); transform: scale(1.15); display: inline-block; transition: color 0.15s, transform 0.15s; }
.mobile-day-header.date-clickable:hover { opacity: 0.75; transition: opacity 0.15s; }

/* === STATUS BLÖCKE (Urlaub, Lager, etc.) ===
   Alle Abwesenheits-/Lager-Balken (NICHT Jobkarten) bewusst kompakt:
   kleinere Schrift, weniger Padding, schmalere Border. */
.absence-bar { padding: 2px 6px; font-size: 0.72em; font-weight: 600; line-height: 1.25; border-radius: 6px; margin-bottom: 3px; border-left: 2px solid rgba(255,255,255,0.3); position: relative; }
.absence-bar .drag-badge { font-size: 0.85em; padding: 1px 5px; }
/* Punkt 16: Pulsierender gelber Punkt für offene Freelancer-Rückmeldungen
   – unten rechts in der Jobkarte (knapp neben der bewertung-bar) */
.pulse-yellow-dot {
    position: absolute;
    bottom: 6px; right: 10px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #f1c40f;
    box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7);
    animation: pulseYellow 1.6s infinite;
    cursor: pointer;
    z-index: 5;
}
/* Auf Mobile sitzt die bewertung-bar unten – Punkt nach oben rechts ausweichen lassen */
@media (max-width: 1023px) {
    .pulse-yellow-dot { bottom: auto; top: 6px; right: 6px; }
}
@keyframes pulseYellow {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(241,196,15,0.7); }
    70%  { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(241,196,15,0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(241,196,15,0); }
}
/* Lager-Balken zusätzlich noch leicht reduzierte Opazität (Größe kommt schon von .absence-bar) */
.absence-bar.bg-lager.slot-lager { opacity: 0.82; }
.bg-lager { background-color: var(--color-lager); color: #fff; border-left-color: color-mix(in srgb, var(--color-lager) 80%, #000); }
.bg-intern { background-color: var(--color-intern); color: #fff; border-left-color: color-mix(in srgb, var(--color-intern) 80%, #000); }
.bg-urlaub { background-color: var(--color-urlaub); color: #000; border-left-color: color-mix(in srgb, var(--color-urlaub) 80%, #000); }
.bg-krank { background-color: var(--color-krank); color: #fff; border-left-color: color-mix(in srgb, var(--color-krank) 80%, #000); }
.bg-schule { background-color: var(--color-schule); color: #000; border-left-color: color-mix(in srgb, var(--color-schule) 80%, #000); }
.bg-ausgleich { background-color: var(--color-ausgleich); color: #000; border-left-color: color-mix(in srgb, var(--color-ausgleich) 80%, #000); }
.bg-mobil { background-color: var(--color-mobil); color: #fff; border-left-color: color-mix(in srgb, var(--color-mobil) 80%, #000); }

/* === DRAG-AND-DROP DROP-ZONES === */
.drop-zone-abs {
    height: 5px;
    border-radius: 3px;
    margin-bottom: 3px;
    opacity: 0.45;
    cursor: default;
    transition: height 0.12s, opacity 0.12s;
    overflow: hidden;
}
.drop-zone-abs.drag-over {
    height: 18px;
    opacity: 0.95;
    outline: 1px dashed rgba(255,255,255,0.6);
}
.drop-zone-abs::after {
    content: attr(data-label);
    display: block;
    text-align: center;
    font-size: 0.72em;
    font-weight: bold;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.1s;
}
.drop-zone-abs.drag-over::after {
    opacity: 1;
}
.cal-phase-line.drop-zone-skill {
    border: 1px dashed transparent;
    transition: border-color 0.15s, background 0.15s;
    border-radius: 3px;
    padding: 1px 2px;
}
.cal-phase-line.drop-zone-skill.drag-over {
    border-color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.1);
}

/* === ECHTE JOBS (Dark Mode Cards) === */
.event-card { background-color: #2a2a2a; border-radius: 6px; padding: 10px; padding-right: 18px; border-left: 3px solid #333; margin-bottom: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); position: relative;}
.compact-mode .event-card { padding-right: 18px !important; }

/* === SCHLIMM-O-METER BAR === */
.bewertung-bar {
    position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
    background: rgba(255,255,255,0.06); border-radius: 0 6px 6px 0;
}
.bewertung-bar-fill {
    position: absolute; bottom: 0; left: 0; right: 0; height: 0%;
    background: linear-gradient(to top, #2ecc71 0%, #f39c12 50%, #e74c3c 100%);
    transition: height 0.6s cubic-bezier(0.4,0,0.2,1);
}
/* Kompakt-Modus: Balken schmaler, wächst weiterhin mit der Karte mit */
.compact-mode .event-card .bewertung-bar {
    width: 3px;
}
@media (max-width: 1023px) {
    .event-card { padding-right: 10px !important; padding-bottom: 10px !important; }
    .bewertung-bar {
        right: 0; left: 0; top: auto; bottom: 0; width: auto; height: 6px;
        border-radius: 0 0 6px 6px;
    }
    .bewertung-bar-fill {
        bottom: 0; top: 0; left: 0; right: auto; width: 0%; height: 100%;
        background: linear-gradient(to right, #2ecc71 0%, #f39c12 50%, #e74c3c 100%);
        transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
    }
}
/* Schlimm-o-Meter Slider */
#bewertungSlider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
    border-radius: 3px; background: #444; outline: none; cursor: pointer; }
#bewertungSlider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px;
    border-radius: 50%; background: #e91e63; cursor: pointer; box-shadow: 0 0 4px rgba(233,30,99,0.5); }
#bewertungSlider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
    background: #e91e63; cursor: pointer; border: none; }
.event-card .event-title { font-weight: bold; font-size: 0.95em; margin-bottom: 6px; color: #fff; line-height: 1.3; }
.event-card .event-time { font-size: 0.8em; color: #ccc; margin-bottom: 4px; }
.event-card .edit-btn { position: absolute; top: 5px; right: 5px; cursor: pointer; opacity: 0.5; }
.event-card .edit-btn:hover { opacity: 1; }
/* Akzent-Verläufe für Jobkarten (Reihenfolge = Priorität, da gleiche Spezifität).
   !important nötig, da .event-card (weiter unten) border-left/background mit !important setzt. */
.event-card.ev-stat-ok        { border-left: 4px solid #3b82f6 !important; background: linear-gradient(160deg, color-mix(in srgb, #3b82f6 16%, var(--card-bg)) 0%, var(--card-bg) 100%) !important; }
.event-card.ev-stat-option    { border-left: 4px solid #f39c12 !important; background: linear-gradient(160deg, color-mix(in srgb, #f39c12 18%, var(--card-bg)) 0%, var(--card-bg) 100%) !important; }
.event-card.ev-stat-cancelled { border-left: 4px solid #7f8c8d !important; background: linear-gradient(160deg, color-mix(in srgb, #7f8c8d 16%, var(--card-bg)) 0%, var(--card-bg) 100%) !important; }
/* Anmietung: pink – überschreibt den Status-Akzent */
.event-card.anmietung-card {
    border-left: 4px solid #ec4899 !important;
    background: linear-gradient(160deg, color-mix(in srgb, #ec4899 22%, var(--card-bg)) 0%, var(--card-bg) 100%) !important;
}
/* Pulsierend (Personal unvollständig): roter Verlauf – höchste Priorität */
.event-card.card-incomplete { border-left: 4px solid #e74c3c !important; background: linear-gradient(160deg, color-mix(in srgb, #e74c3c 20%, var(--card-bg)) 0%, var(--card-bg) 100%) !important; }
.tl-job-bar.tl-anmietung-bar { background: linear-gradient(135deg, #ec4899, #a83270) !important; }

/* === KOMPAKT MODUS === */
.compact-mode .event-card {
    padding: 5px 8px !important;
    margin-bottom: 3px !important;
    overflow: visible;
    transition: box-shadow 0.25s ease !important;
}
.compact-mode .event-card .event-title {
    font-size: 0.78em !important;
    margin-bottom: 2px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}
.event-card .compact-roles { display: none; }
.compact-mode .event-card .compact-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 2px;
}
.compact-role-badge {
    font-size: 0.66em;
    padding: 1px 4px;
    border-radius: 3px;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}
/* Details im Normalmode immer sichtbar */
.card-details {}
/* Details im Kompaktmodus: eingeklappt, animiert expandierbar */
.compact-mode .event-card .card-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1),
                opacity 0.25s ease,
                padding-top 0.25s ease;
    padding-top: 0 !important;
}
.compact-mode .event-card:hover .card-details,
.compact-mode .event-card.expanded .card-details {
    max-height: 700px;
    opacity: 1;
    padding-top: 6px !important;
}
/* Karte beim Expand leicht hervorheben */
.compact-mode .event-card:hover,
.compact-mode .event-card.expanded {
    overflow: visible;
    z-index: 10;
    position: relative;
    box-shadow: 0 8px 28px rgba(0,0,0,0.7) !important;
}
/* Kompakt-Toggle-Button aktiv-Zustand */
#btnCompactMode.compact-active, #mobileBtnCompactMode.compact-active {
    background: #8e44ad !important;
}

/* Mehrtägige Verbinder & Resize Handle */
.absence-bar.is-mid { border-radius: 0; border-left: none; margin-left: -9px; margin-right: -9px; padding-left: 13px; z-index: 1; }
.absence-bar.is-start-multi { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -9px; z-index: 2; }
.absence-bar.is-end-multi { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -9px; padding-left: 13px; z-index: 2; border-left: none; }

.resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 12px; background: rgba(255,255,255,0.2); cursor: e-resize; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.resize-handle:hover { background: rgba(255,255,255,0.5); }

/* Drag & Drop Elemente */
.drag-badge { display: inline-block; cursor: grab; background: rgba(0,0,0,0.2); padding: 2px 6px; border-radius: 4px; margin: 2px; }
.drag-badge:active { cursor: grabbing; }
.drag-badge.locked { cursor: default; }
.remove-btn { cursor: pointer; color: #ffaaaa; margin-left: 4px; }

.assigned-zone { min-height: 30px; margin-top: 6px; display: block; border-radius: 4px; padding: 4px; background: rgba(0,0,0,0.2); border: 1px dashed transparent;}
.assigned-zone.drag-over { background: rgba(255, 255, 255, 0.1); border-color: #2ecc71; }

/* === MODALS & UI === */
.modal-overlay {
    display: none; /* Standardmäßig aus */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 2000;
    align-items: flex-start;
    justify-content: center;
    backdrop-filter: blur(4px);
    padding-top: 50px;
    overflow-y: auto;
}

/* WICHTIG: Der Wrapper muss die Sidebar und das Modal nebeneinander halten */
.modal-wrapper {
    display: flex;
    flex-direction: row; /* Nebeneinander */
    align-items: flex-start;
    gap: 20px;
    max-width: 95%;
    margin: 0 auto;
}
.modal-content { background: var(--card-bg); padding: 25px; border-radius: 12px; width: 90%; max-width: 750px; border: 1px solid var(--accent); position: relative; max-height: 90vh; overflow-y: auto; }
.modal-content label { display: block; margin-top: 10px; font-size: 0.9em; color: var(--text-muted); }
.modal-content input, .modal-content select { width: 100%; box-sizing: border-box; margin-top: 5px; background: #2a2a2a; border: 1px solid var(--border); color: var(--text-main); padding: 8px; border-radius: 6px; }
.modal-btn { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 16px; margin-top: 20px; }
.close-btn { position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; color: var(--text-muted); }
/* === UNGESPEICHERTE ÄNDERUNGEN DIALOG === */
.unsaved-dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 9999; align-items: center; justify-content: center; }
.unsaved-dialog-box { background: var(--card-bg); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: 28px 28px 22px; max-width: 380px; width: 90%; text-align: center; box-shadow: var(--shadow-lg); }
.unsaved-dialog-box h3 { margin: 0 0 8px; color: var(--accent); font-size: 1.15em; }
.unsaved-dialog-box p { margin: 0 0 22px; color: var(--text-muted); font-size: 0.9em; line-height: 1.5; }
.unsaved-dialog-actions { display: flex; flex-direction: column; gap: 8px; }
.unsaved-dialog-actions button { padding: 10px; border: none; border-radius: var(--radius-sm); font-size: 0.95em; font-weight: 600; cursor: pointer; transition: opacity var(--transition); }
.unsaved-dialog-actions button:hover { opacity: 0.85; }
.unsaved-btn-save    { background: var(--accent); color: #fff; }
.unsaved-btn-discard { background: var(--surface-3); color: var(--text-main); border: 1px solid var(--border-strong) !important; }
.unsaved-btn-cancel  { background: transparent !important; color: var(--text-muted) !important; font-size: 0.85em !important; font-weight: 400 !important; }
/* === GLOCKEN-ANIMATION === */
@keyframes bell-ring {
    0%, 55%, 100% { transform: rotate(0deg) scale(1); }
    5%  { transform: rotate(-22deg) scale(1.2); }
    15% { transform: rotate(20deg)  scale(1.2); }
    25% { transform: rotate(-16deg) scale(1.15); }
    35% { transform: rotate(14deg)  scale(1.15); }
    45% { transform: rotate(-8deg)  scale(1.1); }
}
.bell-ringing { display: inline-block; transform-origin: top center; animation: bell-ring 2.4s ease-in-out infinite; }
/* Erlaubt das Nebeneinander von Freelancer-Liste und Modal */
.modal-wrapper {
display: flex;
align-items: flex-start;
gap: 20px;
max-width: 95%;
}

/* Freelancer-Sidebar: jetzt als internes rechtes Panel im eventModal.
   Standard fest sichtbar – die Liste füllt sich sobald ein Skill aktiv ist. */
#externSelectorSidebar {
    width: 280px;
    min-width: 240px;
    background: #181818;
    border-left: 1px solid #f1c40f;
    padding: 14px;
    overflow-y: auto;
    display: block;
    flex-shrink: 0;
}

.extern-item-card {
background: #2a2a2a;
padding: 8px;
margin-bottom: 8px;
border-radius: 6px;
cursor: pointer;
font-size: 0.85em;
border: 1px solid transparent;
}

.extern-item-card:hover {
border-color: #f1c40f;
background: #333;
}
/* Ort Autocomplete */
.ort-autocomplete-wrapper { position: relative; }
.ort-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #2a2a2a; border: 1px solid #3498db; border-radius: 0 0 6px 6px; max-height: 220px; overflow-y: auto; z-index: 9999; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.ort-dropdown.open { display: block; }
.ort-dropdown-group { padding: 5px 10px; font-size: 0.72em; color: #3498db; background: #1a1a2a; border-top: 1px solid #333; letter-spacing: 0.05em; text-transform: uppercase; }
.ort-dropdown-item { padding: 7px 14px; cursor: pointer; font-size: 0.88em; color: #ddd; }
.ort-dropdown-item:hover { background: #3a3a4a; color: #fff; }
/* Tages-Tabs (Für Jobs) */
.day-tabs { display: flex; gap: 5px; margin-top: 15px; overflow-x: auto; padding-bottom: 5px; border-bottom: 1px solid #444; }
.day-tab { padding: 8px 12px; background: #2a2a2a; border-radius: 6px 6px 0 0; cursor: pointer; font-weight: bold; color: #888; white-space: nowrap; }
.day-tab.active { background: #3498db; color: #fff; }
.tb-tab { padding: 6px 12px; background: #2a2a2a; border: 1px solid #444; border-radius: 14px; cursor: pointer; font-size: 0.85em; color: #aaa; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.tb-tab.active { background: #4a4a58; border-color: #6b6b7a; color: #fff; }
.tb-tab.add { background: transparent; border-style: dashed; color: #888; }
.tb-tab:hover { filter: brightness(1.2); }

@keyframes card-pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); border-color: rgba(231,76,60,0.25); }
    50%       { box-shadow: 0 0 14px 2px rgba(231,76,60,0.55); border-color: rgba(231,76,60,0.95); }
}
.event-card.card-incomplete { position: relative; }
.event-card.card-incomplete::after,
.phase-group.phase-incomplete::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(231,76,60,0.4);
    border-radius: 8px;
    pointer-events: none;
    animation: card-pulse-red 1.6s ease-in-out infinite;
    z-index: 5;
}
.phase-group.phase-incomplete { position: relative; }

/* Phasen-Bereich */
.phase-group { border: 1px solid #444; padding: 10px; border-radius: 6px; margin-top: 10px; background: #1f1f1f; }
.phase-title { color: #fff; font-weight: bold; font-size: 0.9em; margin-bottom: 8px; border-bottom: 1px solid #444; padding-bottom: 4px;}
.task-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; background: #2a2a2a; padding: 8px; border-radius: 4px;}

.skill-badge-select { display: inline-block; padding: 4px 8px; background: #333; border-radius: 15px; cursor: pointer; font-size: 0.8em; margin: 2px; border: 1px solid transparent; }
.skill-badge-select.selected { background: var(--accent); color: white; border-color: #fff; }
.skill-badge-select.busy { background: #222; color: #666; text-decoration: line-through; cursor: not-allowed; border-color: #222; }
.skill-badge-select.busy:hover { background: #222; }

.data-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.9em; }
.data-table th, .data-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.action-btn { background: #3498db; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; margin-right: 5px; }
.action-btn.del { background: #e74c3c; }

#mainApp, #adminApp { display: none; }
.row-2 { display: flex; gap: 15px; } .col { flex: 1; }
       /* === NEUE KONTROLLLEISTE (HEADER) === */
.controls-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    gap: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.controls-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.controls-wrapper .action-btn, 
.controls-wrapper .modern-input, 
.month-nav {
    height: 40px; 
    box-sizing: border-box;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
}

.month-nav {
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    border: 1px solid var(--border);
    padding: 0;
    overflow: hidden;
}

.month-nav h3 {
    margin: 0;
    min-width: 140px;
    text-align: center;
    font-size: 1.05em;
    line-height: 40px;
}

.month-nav .action-btn { border-radius: 0; background: transparent; padding: 0 15px; }
.month-nav .action-btn:hover { background: rgba(255,255,255,0.1); }

/* --- Dropdown Menüs --- */
.dropdown { position: relative; display: inline-block; height: 40px; }
.dropbtn { min-width: 150px; justify-content: space-between; font-size: 14px; }

/* === KONTROLLLEISTE (HEADER) DROPDOWN STYLES === */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%; /* FIX: Schließt jetzt zu 100% bündig ab, keine Lücke mehr! */
    background-color: var(--card-bg);
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
    z-index: 2500;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    text-align: left;
}
.dropdown-content a {
    color: var(--text-main);
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s;
}
.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.dropdown:hover .dropdown-content { display: block; }
/* === MOBIL-OPTIMIERUNG (Responsive Design) === */
/* Standardmäßig das exakte mobile Datum auf großen Bildschirmen verstecken */
.mobile-day-header { display: none; }

/* Mittlere Bildschirme: Kontrollleiste kompakt in einer Zeile lassen,
   bei Bedarf umbrechen (statt alles untereinander zu stapeln) */
@media (max-width: 1440px) {
    .controls-wrapper {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        padding: 8px 10px;
        gap: 8px;
        row-gap: 8px;
    }
    .controls-group {
        justify-content: flex-start;
    }
}

/* Erst auf echten Mobile-/Hochkant-Geräten den Kalender als Liste rendern */
@media (max-width: 820px) {
    .calendar-header {
        display: none !important; /* Wochentage (Mo, Di...) oben ausblenden */
    }
    .calendar-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
        background: transparent !important;
    }
    .calendar-cell {
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
        background: var(--card-bg) !important;
        padding: 15px !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }
    .calendar-cell.empty {
        display: none !important; /* Leere Fülltage am Monatsanfang ausblenden */
    }
    .event-spacer {
        display: none !important;
    }
    .slot-lager, .slot-abs, .slot-job {
        min-height: auto !important;
        margin-bottom: 8px;
    }
    .desktop-day-header { display: none !important; }
    .mobile-day-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        font-size: 1.1em;
        font-weight: bold;
        color: var(--accent);
        border-bottom: 1px solid #444;
        padding-bottom: 8px;
        margin-bottom: 15px;
    }
}
/* === FLOATING NAVIGATION BUTTONS === */
.floating-nav {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3000; /* Extra hoch, damit sie über dem Kalender schweben */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.floating-nav.show {
    opacity: 1;
    visibility: visible;
}

.fab {
    background: #444;
    color: #fff;
    border: 1px solid #555;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    transition: background 0.2s, transform 0.2s;
}

.fab:hover {
    background: #e74c3c;
    transform: scale(1.05);
}

@media (max-width: 1023px) {
    .floating-nav { bottom: 80px; right: 15px; }
    .fab { padding: 8px 12px; font-size: 13px; }
}

/* =============================================
   PHASEN-GRID: Aufbau | Service | Abbau
   ============================================= */
.phasen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.phasen-grid .phase-group { margin-top: 0; }

/* =============================================
   MODAL: STICKY HEAD / SCROLLABLE BODY / FOOT
   ============================================= */
.modal-sheet {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
    max-height: min(88vh, 800px);
}
.modal-head {
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    background: var(--card-bg);
    border-radius: 12px 12px 0 0;
}
.modal-head h2 {
    margin: 0;
    font-size: 1.1em;
    padding-right: 35px;
}
.modal-head .close-btn {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 22px;
}
.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 20px;
    overscroll-behavior: contain;
}
.modal-body label { display: block; margin-top: 8px; font-size: 0.9em; color: var(--text-muted); }
.modal-body input, .modal-body select, .modal-body textarea {
    width: 100%; box-sizing: border-box; margin-top: 4px;
    background: #2a2a2a; border: 1px solid var(--border);
    color: var(--text-main); padding: 8px; border-radius: 6px;
}
.modal-body .row-2 { display: flex; gap: 12px; }
.modal-body .col { flex: 1; }
.modal-foot {
    padding: 10px 20px 14px;
    border-top: 1px solid var(--border);
    background: var(--card-bg);
    flex-shrink: 0;
    border-radius: 0 0 12px 12px;
}
.modal-foot .modal-btn { margin-top: 0; }
.modal-foot .row-2 { display: flex; gap: 10px; margin-top: 0; }
.modal-foot .row-2 .col { flex: 1; }

/* =============================================
   MOBILE: BOTTOM SHEET + BOTTOM NAV
   ============================================= */
.mobile-nav-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    z-index: 4000;
    height: 62px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.5);
}
/* Untere Mobile-Navileiste gehört zum Einsatzplan (Kalender-Buttons) –
   im Admin-Portal ausblenden, da dort nicht relevant. */
body.view-admin .mobile-nav-bar { display: none !important; }
.mobile-nav-bar .nav-items {
    display: flex;
    height: 100%;
    align-items: stretch;
}
.mobile-nav-bar .nav-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.6em;
    gap: 2px;
    transition: color 0.15s, background 0.15s;
    padding: 4px 2px 6px;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
}
.mobile-nav-bar .nav-btn .nav-icon { font-size: 1.8em; line-height: 1; }
.mobile-nav-bar .nav-btn:active,
.mobile-nav-bar .nav-btn.active { color: var(--accent); background: rgba(255,0,0,0.08); }
.mobile-month-strip {
    display: none;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg);
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.mobile-month-strip button {
    background: none; border: none; color: var(--accent);
    font-size: 1.5em; cursor: pointer; padding: 4px 10px;
}
.mobile-month-strip span {
    font-weight: bold; font-size: 1em; color: var(--text-main);
}
@media (max-width: 1023px) {
    body { padding: 8px 8px 0; overflow-x: hidden; }
    .controls-wrapper { display: none !important; }
    .header-container h1 { font-size: 1.2em; }
    .header-container .app-logo { max-height: 50px; }
    .mobile-nav-bar { display: block; }
    .mobile-month-strip { display: flex; }

    /* Kein horizontales Scrollen */
    .calendar-wrapper, .dispo-table-container, .controls { max-width: 100vw; overflow-x: hidden; }
    .excel-table { min-width: unset; width: 100%; }
    .excel-table th, .excel-table td { white-space: normal; word-break: break-word; font-size: 0.75em; padding: 3px; }

    /* Bottom sheet für alle Modals */
    .modal-overlay {
        align-items: flex-end !important;
        padding: env(safe-area-inset-top, 44px) 0 62px 0 !important; /* Platz für iPhone Statusleiste oben + Bottom-Nav */
    }
    .modal-content,
    .modal-sheet {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: calc(100dvh - 62px - env(safe-area-inset-top, 44px)) !important;
        margin: 0 !important;
    }
    .modal-head { border-radius: 20px 20px 0 0 !important; }
    .modal-wrapper {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .modal-wrapper .modal-content { border-radius: 20px 20px 0 0 !important; }
    /* Kompaktere Abstände in Modals auf Mobile */
    .modal-content { padding: 16px !important; }
    .modal-content label { margin-top: 7px; }
    /* Kalender-Zellen kompakter */
    .calendar-cell { padding: 10px !important; }
    .event-card { padding: 7px 9px; }
    /* Phasen untereinander statt nebeneinander auf Mobile */
    .phasen-grid { grid-template-columns: 1fr !important; }
    /* Blink-Animationen auch für Mobile-Buttons */
    .blink-admin, .blink-user { animation-play-state: running !important; }
    /* Floating Nav auf Mobile verstecken – Funktion ist in Bottom-Bar */
    .floating-nav { display: none !important; }
    /* Kalender endet oberhalb der Bottom-Bar */
    #mainApp { padding-bottom: 72px; }
    .calendar-wrapper { margin-bottom: 0; }
    /* Statistik-Box mobile-freundlich */
    #sollIstDisplay {
        max-width: 100% !important;
        font-size: 0.78em !important;
        gap: 8px !important;
    }
    .stats-card {
        padding: 10px !important;
        gap: 5px !important;
        min-width: 100% !important;
    }
    .dash-row { flex-wrap: wrap; padding-bottom: 4px; }
    .dash-row span:first-child { color: var(--text-muted); font-size: 0.95em; }
    .dash-row span:last-child { font-size: 0.95em; margin-left: auto; }
    /* Freelancer-Sidebar innerhalb modal auf Mobile ausblenden (zu eng) */
    #externSelectorSidebar { display: none !important; }

    /* ============================================================
       EVENT MODAL: Inline-Style-Overrides für Bottom-Sheet-Verhalten
       ============================================================ */
    #eventModal.modal-overlay {
        align-items: flex-end !important;
        padding: env(safe-area-inset-top, 44px) 0 62px 0 !important;
    }
    #eventModal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: calc(100dvh - 62px - env(safe-area-inset-top, 44px)) !important;
    }
    /* Formular + Sidebar vertikal stapeln */
    .ev-inner-flex { flex-direction: column !important; }

    /* 5-spaltige Zeile (Typ/Status/PL/Start/Ende) → 2+2+1 auf Mobile */
    .modal-body .ev-5col-row .col {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
    }

    /* DayContent: 3 Spalten (Ort/Info/Transport) → 1-spaltig */
    #dayContent .row-2 .col { flex: 1 1 100% !important; }

    /* DayCopyBar: wrappen statt abschneiden */
    #dayCopyBar { flex-wrap: wrap !important; flex-shrink: 1 !important; }

    /* ============================================================
       GLOBALE MODAL MOBILE OPTIMIERUNGEN
       ============================================================ */
    /* Modal-Header: kompakter */
    .modal-head { padding: 12px 16px 10px !important; }
    .modal-head h2, .modal-head h3 { font-size: 1em !important; }

    /* Modal-Body: schmalere Seitenabstände */
    .modal-body { padding: 12px 14px !important; }

    /* row-2 in modal-body: 2-spaltig mit Wrap statt nebeneinander erzwingen */
    .modal-body .row-2 { flex-wrap: wrap !important; gap: 8px !important; }
    .modal-body .row-2 .col {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
    }

    /* Modal-Footer: Buttons als 2×2-Raster */
    .modal-foot { padding: 8px 14px 12px !important; }
    .modal-foot .row-2 { flex-wrap: wrap !important; gap: 6px !important; }
    .modal-foot .row-2 .col {
        flex: 1 1 calc(50% - 3px) !important;
        min-width: 0 !important;
    }
    .modal-btn {
        margin-top: 0 !important;
        font-size: 0.88em !important;
        padding: 10px 6px !important;
    }

    /* Touch-Targets: Mindestgröße 44px für alle interaktiven Elemente */
    .modal-body input,
    .modal-body select { min-height: 44px !important; }
    .action-btn { min-height: 40px !important; padding: 8px 10px !important; }

    /* DayTabs: horizontal scrollbar wenn viele Tage */
    .day-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
    }

    /* ============================================================
       NOTIFICATION PANEL: Vollbreite auf Mobile
       ============================================================ */
    #notificationPanel {
        width: 100% !important;
        max-width: 100% !important;
        border-left: none !important;
        height: 100dvh !important;
    }
}

/* =============================================
   MATERIAL DESIGN ENHANCEMENTS
   ============================================= */

/* Globale Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Body & Basis */
body { background-color: var(--bg-color); }

/* Verbesserter Event-Card (Elevation + Hover-Lift) */
.event-card {
    background: linear-gradient(160deg, var(--surface-2) 0%, var(--card-bg) 100%) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
    border-left: 3px solid rgba(255,255,255,0.07) !important;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition) !important;
}
.event-card.clickable:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-left-color: var(--accent) !important;
}
.event-card .event-title { color: #f0f0f4 !important; }

/* Action Buttons – Material-like */
.action-btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    transition: filter var(--transition), transform var(--transition), box-shadow var(--transition) !important;
    box-shadow: var(--shadow-sm) !important;
}
.action-btn:hover { filter: brightness(1.18) !important; transform: translateY(-1px) !important; box-shadow: var(--shadow-md) !important; }
.action-btn:active { transform: scale(0.97) !important; box-shadow: none !important; }

/* Modal-Hauptbutton */
.modal-btn {
    border-radius: var(--radius-sm) !important;
    letter-spacing: 0.4px !important;
    font-weight: 700 !important;
    transition: filter var(--transition), transform var(--transition), box-shadow var(--transition) !important;
    box-shadow: 0 4px 14px var(--accent-glow) !important;
}
.modal-btn:hover { filter: brightness(1.12) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(232,25,44,0.45) !important; }
.modal-btn:active { transform: scale(0.98) !important; }

/* Refresh-Button */
button.refresh-btn {
    border-radius: var(--radius-sm) !important;
    transition: background var(--transition), transform var(--transition) !important;
}
button.refresh-btn:hover { transform: translateY(-1px) !important; }

/* Absence Bars */
.absence-bar {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Kalender-Zellen: leichte Hover-Reaktion */
.calendar-cell { transition: background var(--transition) !important; }
.calendar-cell:hover:not(.empty) { background: rgba(255,255,255,0.018) !important; }

/* Modal Elevation */
.modal-content, .modal-sheet {
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.04) !important;
}

/* Phase Group */
.phase-group {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}
.phase-title { font-size: 0.95em !important; font-weight: 700 !important; letter-spacing: 0.3px !important; }

/* Task Row */
.task-row {
    background: var(--surface-3) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
}

/* Skill Badges */
.skill-badge-select {
    border-radius: 20px !important;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
    font-size: 0.82em !important;
}
.skill-badge-select:not(.busy):not(.selected):hover { transform: scale(1.05) !important; filter: brightness(1.2) !important; }
.skill-badge-select.selected {
    background: var(--accent) !important;
    box-shadow: 0 2px 8px var(--accent-glow) !important;
}

/* Input Focus Glow */
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus,
.modal-content input:focus,
.modal-content select:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* Day-Tabs */
.day-tab { transition: background var(--transition), color var(--transition) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; }
.tb-tab { transition: background var(--transition), border-color var(--transition) !important; }

/* Modal Head / Foot */
.modal-head { background: var(--surface-2) !important; border-bottom-color: var(--border) !important; }
.modal-foot { background: var(--surface-2) !important; border-top-color: var(--border) !important; }
.modal-body { background: var(--card-bg); }

/* Controls Wrapper */
.controls-wrapper { background: var(--surface-2) !important; border-color: var(--border) !important; }

/* =============================================
   KALENDER: TEILBEREICHE-DARSTELLUNG
   ============================================= */
.cal-tb-row {
    background: rgba(155, 89, 182, 0.1);
    border: 1px solid rgba(155, 89, 182, 0.28);
    border-radius: var(--radius-sm);
    padding: 5px 7px;
    margin-top: 5px;
    font-size: 0.78em;
    transition: background var(--transition);
}
.cal-tb-row:hover { background: rgba(155, 89, 182, 0.17); }
.cal-tb-name {
    display: block;
    color: #c39bd3;
    font-weight: 700;
    font-size: 0.88em;
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}
.cal-phase-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
}
.cal-phase-tag {
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.cal-badge {
    display: inline-block;
    background: var(--color-kuerzel-bg);
    color: var(--color-kuerzel-text);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.85em;
    border: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
}
.cal-req-hint {
    color: var(--text-hint);
    font-style: italic;
    font-size: 0.82em;
}

/* ============================================================
   ADMIN PORTAL – Sidebar-Layout
   ============================================================ */
#adminApp { min-height: 100vh; min-height: 100dvh; }
.admin-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}
.admin-sidebar {
    width: 210px;
    flex-shrink: 0;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.admin-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.admin-sidebar-logo img { height: 34px; object-fit: contain; }
.admin-sidebar-logo span {
    font-weight: 700;
    font-size: 0.9em;
    color: var(--accent);
    line-height: 1.2;
}
.admin-nav-group {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.admin-nav-group-label {
    font-size: 0.67em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    padding: 8px 16px 3px;
    margin: 0;
    opacity: 0.7;
}
/* Nur die einklappbaren Gruppen-Labels (Haupt-Sidebar) sind klickbar */
.admin-nav-group-label[data-grp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.admin-nav-group-label[data-grp]:hover { opacity: 1; color: var(--text-main); }
.nav-grp-chevron { font-size: 1.1em; line-height: 1; opacity: 0.7; transition: transform 0.18s ease; }
.admin-nav-group.nav-collapsed .nav-grp-chevron { transform: rotate(-90deg); }
.admin-nav-group.nav-collapsed .admin-nav-item { display: none !important; }
.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: var(--text-muted);
    font-size: 0.875em;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.admin-nav-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-main);
}
.admin-nav-item.active {
    color: var(--accent);
    background: rgba(232,25,44,0.07);
    border-left-color: var(--accent);
    font-weight: 600;
}
.admin-nav-item.nav-danger { color: #c0392b; }
.admin-nav-item.nav-danger:hover { background: rgba(192,57,43,0.08); color: #e74c3c; border-left-color: transparent; }
.admin-nav-item .ic { opacity: 0.7; flex-shrink: 0; }
.admin-nav-item.active .ic,
.admin-nav-item:hover .ic { opacity: 1; }
.admin-nav-spacer { flex: 1; min-height: 16px; }
.admin-main {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
}
.admin-main-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 24px 28px 80px;
}
.admin-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.admin-main-header h2 { margin: 0; font-size: 1.15em; }

/* === APP-MODE (kein Body-Padding, kein Body-Scroll) === */
body.app-mode {
    padding: 0 !important;
    overflow: hidden;
    height: 100vh;
    height: 100dvh; /* dynamische Viewport-Höhe (mobil: berücksichtigt Adressleiste) */
}
body.app-mode .mobile-month-strip { display: none !important; }

/* App-Shell-Layout – .admin-main ist der interne Scroll-Container.
   Gilt für BEIDE Ansichten: Einsatzplan (#mainApp) UND Admin-Portal (#adminApp).
   Wichtig: 100dvh statt 100vh, sonst ist auf Mobilgeräten der untere Bereich
   (hinter der Browser-Adressleiste) nicht erreichbar. */
#mainApp,
#adminApp {
    height: 100vh;
    height: 100dvh;
}
#mainApp .admin-layout,
#adminApp .admin-layout {
    height: 100vh;
    height: 100dvh;
}
#mainApp .admin-main,
#adminApp .admin-main {
    overflow-y: auto !important;
    height: 100vh;
    height: 100dvh;
    -webkit-overflow-scrolling: touch; /* sanftes Scrollen auf iOS */
}
/* Kalender-Kontrolleiste: sticky oben im Scroll-Container, über allem */
/* Überschreibt die alte mobile-Regel `.controls-wrapper { display:none }` */
#msec-kalender .controls-wrapper {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 200;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border-left: none !important;
    border-right: none !important;
}
#msec-kalender .calendar-pad { padding: 16px; }
/* Kalender-Wochentag-Header: sticky direkt UNTER der controls-wrapper.
   Höhe der controls-wrapper wird per ResizeObserver in --controls-h gesetzt
   (siehe Script unten), damit der Offset auch bei umgebrochener Toolbar passt. */
#msec-kalender .calendar-header {
    position: sticky;
    top: var(--controls-h, 64px);
    z-index: 190;
}
/* Timeline-Header (Datumszeile) ebenfalls sticky bei vertikalem Scroll im .tl-scroll */
.tl-scroll {
    max-height: calc(100vh - var(--controls-h, 64px) - 32px) !important;
    overflow: auto !important;
}
/* Statistik-Bereich */
#msec-statistik #sollIstDisplay {
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
}
/* Mobile: Sidebar endet genau an der Bottom-Nav (62px hoch) */
@media (max-width: 1023px) {
    #mainSidebar {
        height: calc(100vh - 62px) !important;
    }

    /* ── Controls-Bar: eine einzige Zeile ── */
    #msec-kalender .controls-wrapper {
        flex-direction: row !important;     /* @1440px setzt column – override! */
        align-items: center !important;     /* @1440px setzt stretch – override! */
        flex-wrap: nowrap !important;
        padding: 6px 8px !important;
        gap: 6px !important;
        justify-content: flex-start !important;
        overflow: hidden;
    }
    /* Mitarbeiter-Filter: nimmt verfügbaren Platz */
    #msec-kalender .controls-wrapper #userFilter {
        flex: 1 1 auto !important;
        width: auto !important;             /* @1440px modern-input: width:100% */
        min-width: 60px !important;
        max-width: none !important;
        font-size: 0.78em !important;
        padding: 0 6px !important;
        height: 36px !important;
    }
    /* Bearbeitungs-Button: nur Icon */
    #msec-kalender .controls-wrapper #btnEditToggle {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #msec-kalender .controls-wrapper #btnEditToggle .ic {
        font-size: 1.1rem !important;
        flex-shrink: 0 !important;
    }
    /* Neuer-Termin-Button: nur Icon (Sichtbarkeit via JS) */
    #msec-kalender .controls-wrapper #btnNewEvent {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #msec-kalender .controls-wrapper #btnNewEvent .ic {
        font-size: 1.1rem !important;
    }
    /* Monats-Navigation: kompakt, kein 100%-width mehr */
    #msec-kalender .controls-wrapper .month-nav {
        flex: 0 0 auto !important;
        width: auto !important;             /* @1440px setzt width:100% – override! */
        height: 36px !important;
        font-size: 0.78em !important;
        padding: 0 !important;
    }
    /* Monats-Anzeige-Span: schmaler als die 130px default */
    #msec-kalender .controls-wrapper .month-nav span,
    #msec-kalender .controls-wrapper .month-nav #currentMonthDisplay {
        min-width: 72px !important;
        font-size: 0.9em !important;
        text-align: center !important;
    }
    /* Monats-Buttons: enger */
    #msec-kalender .controls-wrapper .month-nav button {
        padding: 0 6px !important;
        font-size: 1em !important;
    }
    /* Glocke: nur Icon */
    #msec-kalender .controls-wrapper #btnNotifications {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
    }
    /* calendar-header top anpassen (controls-bar jetzt ~48px statt 64px) */
    #msec-kalender .calendar-header {
        top: 48px !important;
    }
}

/* Admin Sections (Tab-Inhalte in der main area) */
.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.admin-section-head h2 {
    margin: 0;
    font-size: 1.15em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-section-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.admin-section-toolbar input,
.admin-section-toolbar select {
    padding: 7px 10px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-main);
    font-size: 0.88em;
}
.admin-section-toolbar input { flex: 1; min-width: 180px; }

/* Mobile: Sidebar als Drawer */
.admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1100;
}
.admin-sidebar-backdrop.open { display: block; }

.admin-mobile-bar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.admin-mobile-bar-title {
    font-weight: 700;
    font-size: 0.95em;
    color: var(--accent);
}
.admin-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
}
.admin-hamburger:hover { background: rgba(255,255,255,0.06); }
.admin-hamburger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--text-main);
    transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 1023px) {
    .admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 1101;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
        box-shadow: 4px 0 24px rgba(0,0,0,0.6);
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-mobile-bar { display: flex; }
    .admin-main-inner { padding: 14px 12px 80px; }
}

/* ============================================================
   SETTINGS MODAL – Sidebar-Navigation
   ============================================================ */
.settings-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    max-height: calc(100vh - 115px);
}
.settings-nav {
    width: 148px;
    flex-shrink: 0;
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: var(--text-muted);
    font-size: 0.85em;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.settings-nav-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-main);
}
.settings-nav-item.active {
    color: var(--accent);
    background: rgba(232,25,44,0.07);
    border-left-color: var(--accent);
    font-weight: 600;
}
.settings-nav-item .ic { opacity: 0.75; }
.settings-nav-item.active .ic { opacity: 1; }
.settings-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.settings-tab {
    display: none;
    padding: 18px 20px;
}
.settings-tab.active { display: block; }
.settings-tab-title {
    margin: 0 0 16px 0;
    font-size: 1em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.settings-hint {
    font-size: 0.78em;
    color: var(--text-muted);
    margin: 3px 0 10px 0;
    line-height: 1.55;
}
.settings-group {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.hidden { display: none !important; }
.settings-group-title {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 12px 0;
}
.settings-textarea {
    width: 100%;
    height: 150px;
    background: #1a1a24;
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: monospace;
    font-size: 0.82em;
    line-height: 1.65;
    resize: vertical;
    box-sizing: border-box;
    margin-top: 4px;
}
.settings-textarea:focus { outline: none; border-color: var(--accent); }

/* Design-Tab: Sub-Navigation */
.design-subnav {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.design-subnav-btn {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.design-subnav-btn:hover { background: var(--surface-3); color: var(--text-main); }
.design-subnav-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.design-subtab { display: none; }
.design-subtab.active { display: block; }

/* Mobile: Sidebar wird zur horizontalen Leiste */
@media (max-width: 600px) {
    .settings-layout { flex-direction: column; }
    .settings-nav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 0;
        gap: 0;
    }
    .settings-nav-item {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 10px 12px 8px;
        font-size: 0.78em;
        flex-direction: column;
        gap: 3px;
        min-width: max-content;
    }
    .settings-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--accent);
    }
}

/* ============================================================
   SVG-ICON SYSTEM – ersetzt alle Emojis durch saubere Liniensymbole
   ============================================================ */
.ic {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
    flex-shrink: 0;
    pointer-events: none;
}

/* === TAGESANSICHT === */
.day-view-wrapper {
    padding: 16px 20px;
    display: flex; flex-direction: column; gap: 16px;
    color: var(--text-main);
}
.day-view-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 16px; box-shadow: var(--shadow-sm);
}
.day-view-block {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.day-view-block h3 {
    margin: 0 0 10px 0; font-size: 1.0em; color: var(--accent); letter-spacing: 0.3px;
}
.day-view-jobs {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.day-view-jobs .event-card {
    border-left: 4px solid var(--accent);
}
body.light-mode .day-view-block { background: var(--lm-card-bg); }
body.light-mode .day-view-head { background: var(--lm-surface-2); }

/* === ZEITSTRAHL (TIMELINE) === */
.tl-controls {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; margin: 0 0 8px 0;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow-sm);
}
.tl-controls label { color: var(--text-muted); font-size: 0.85em; display: flex; align-items: center; gap: 6px; }
.tl-controls input[type="date"] {
    background: var(--surface-3); color: var(--text-main);
    border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 0.9em;
}
body.light-mode .tl-controls { background: var(--lm-surface-2); }
body.light-mode .tl-controls input[type="date"] { background: var(--lm-card-bg); }

/* Full-Width-Modus: Wrapper-Begrenzung entfernen + bündig links */
.calendar-wrapper.tl-mode { max-width: none !important; margin: 0 !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; }
.calendar-pad:has(.calendar-wrapper.tl-mode) { padding-left: 0 !important; padding-right: 0 !important; }

.tl-scroll {
    overflow-x: auto; overflow-y: visible;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    max-width: 100%;
}
body.light-mode .tl-scroll { background: var(--lm-card-bg); }

.tl-grid {
    display: grid;
    position: relative;
}
.tl-cell {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    position: relative;
}
.tl-bg { background: transparent; pointer-events: none; }
.tl-bg.tl-weekend { background: rgba(255,255,255,0.025); }
.tl-bg.tl-holiday { background: rgba(180,180,180,0.10); }
.tl-bg.tl-today   { background: rgba(255, 71, 87, 0.10); }
body.light-mode .tl-bg.tl-weekend { background: rgba(0,0,0,0.025); }

.tl-head-cell {
    position: sticky; top: 0; z-index: 6;
    background: var(--surface-2);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4px 2px;
    font-size: 0.78em; color: var(--text-muted);
}
.tl-head-cell.tl-today { background: rgba(255,71,87,0.18); color: var(--accent); font-weight: bold; }
.tl-head-cell.tl-holiday { color: #c97a00; }
.tl-head-wd { font-size: 0.95em; font-weight: bold; }
.tl-head-date { font-size: 0.85em; }
body.light-mode .tl-head-cell { background: var(--lm-surface-3); color: var(--text-main); }

.tl-row-label {
    position: sticky; left: 0; z-index: 5;
    background: var(--surface-2);
    color: var(--text-main);
    padding: 6px 10px;
    font-weight: 600; font-size: 0.85em;
    display: flex; align-items: center;
    border-right: 2px solid var(--border);
}
.tl-row-label.tl-head-cell { z-index: 7; }
.tl-section-label { background: var(--surface-3); }
body.light-mode .tl-row-label { background: var(--lm-surface-2); }
body.light-mode .tl-section-label { background: var(--lm-surface-3); }

.tl-status-cell {
    padding: 3px 4px;
    display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-start;
    cursor: pointer;
    min-height: 38px;
}
/* Abwesenheits-Zeilen (Urlaub/Schule/Krank/Ausgleich/Mobil): kompakter als Lager. */
.tl-status-cell.tl-status-cell--abs {
    padding: 1px 4px;
    min-height: 20px;
    gap: 2px;
}
.tl-row-label.tl-row-label--abs {
    padding: 2px 10px;
    font-size: 0.82em;
}
.tl-status-cell.tl-status-cell--abs .tl-badge {
    padding: 1px 5px;
    font-size: 0.78em;
    line-height: 1.2;
}
.tl-badge {
    display: inline-block;
    background: rgba(0,0,0,0.25);
    color: inherit;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.82em;
    font-weight: bold;
    line-height: 1.3;
    white-space: nowrap;
}
body.light-mode .tl-badge { background: rgba(255,255,255,0.55); color: #222; }
.tl-head-cell { font-size: 0.85em; }
.tl-head-wd { font-size: 1em; }
.tl-head-date { font-size: 0.92em; }
.tl-row-label { font-size: 0.92em; }
.tl-head-click { cursor: pointer; transition: background var(--transition); }
.tl-head-click:hover { background: var(--surface-3); }
body.light-mode .tl-head-click:hover { background: var(--lm-surface-2); }
.tl-head-holiday {
    font-size: 0.72em;
    color: #c97a00;
    font-style: italic;
    margin-top: 2px;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0 4px;
}
body.light-mode .tl-head-holiday { color: #b35400; }
.tl-info-cell {
    padding: 3px 4px;
    display: flex; flex-direction: column; gap: 2px;
    min-height: 30px;
    font-size: 0.82em;
}
.tl-info-cell .tagesinfo-chip,
.tl-info-cell .tagesinfo-add-btn {
    font-size: 0.95em;
    padding: 2px 5px;
}
.tl-day-detail-body, .tl-day-detail-body * { word-break: break-word; overflow-wrap: anywhere; }
.tl-day-detail-body .event-card { min-width: 0; }

.tl-job-wrap {
    display: flex; flex-direction: column;
    padding: 2px 0;
    z-index: 2;
    min-width: 0;
}
.tl-job-bar {
    position: relative;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    color: #fff;
    border-radius: 6px;
    padding: 6px 10px;
    padding-right: 22px;
    font-size: 0.92em; font-weight: bold;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: filter var(--transition), transform var(--transition);
    margin: 2px 3px;
}
.tl-pulse-dot { top: 50%; right: 8px; bottom: auto; transform: translateY(-50%); width: 9px; height: 9px; }
@media (max-width: 1023px) {
    .tl-pulse-dot { top: 50%; bottom: auto; transform: translateY(-50%); }
}
.tl-job-bar:hover { filter: brightness(1.15); transform: translateY(-1px); }
.tl-job-bar.tl-job-option { background: linear-gradient(135deg, #f39c12, #b9750a); font-style: italic; }
.tl-job-bar.tl-job-cancelled { background: linear-gradient(135deg, #7f8c8d, #4a5658); text-decoration: line-through; opacity: 0.65; }
/* Direkt auf dem Balken animieren – overflow:hidden auf .tl-job-bar
   würde ein ::after-Pseudo-Element wegclippen. box-shadow + outline
   werden außerhalb gerendert und sind sichtbar. */
.tl-job-bar.tl-job-bar-incomplete {
    outline: 2px solid rgba(231,76,60,0.55);
    outline-offset: 1px;
    animation: tl-bar-pulse-red 1.6s ease-in-out infinite;
}
@keyframes tl-bar-pulse-red {
    0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(231,76,60,0); outline-color: rgba(231,76,60,0.35); }
    50%      { box-shadow: var(--shadow-sm), 0 0 14px 3px rgba(231,76,60,0.6); outline-color: rgba(231,76,60,0.95); }
}
.tl-job-title { display: inline-block; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.tl-job-detail {
    display: none;
    margin: 4px 3px 6px 3px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    box-shadow: var(--shadow-md);
}
.tl-job-wrap.expanded .tl-job-detail { display: block; }
.tl-job-wrap.expanded .tl-job-bar { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tl-job-detail-grid {
    display: grid;
    gap: 4px;
}
.tl-day-detail-cell {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0;
    min-width: 0;
    overflow: hidden;
}
.tl-day-detail-body { font-size: 0.95em; }
.tl-day-detail-body .event-card {
    margin: 0 !important;
    border-left-width: 3px;
    padding: 6px 8px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.tl-day-detail-body .cal-tb-row { font-size: 0.92em; line-height: 1.35; }
.tl-day-detail-body .cal-badge, .tl-day-detail-body .drag-badge { font-size: 0.85em; padding: 1px 5px; }
.tl-day-detail-body .cal-phase-tag { font-size: 0.82em; }
.tl-day-detail-body .event-time { word-break: break-word; }
body.light-mode .tl-job-detail { background: var(--lm-surface-3); }
body.light-mode .tl-day-detail-cell { background: var(--lm-card-bg); }

/* Aktive Ansicht-Markierung in Sidebar */
.admin-nav-item.view-active { background: var(--accent-glow); color: var(--accent); }
body.light-mode .admin-nav-item.view-active { background: var(--accent-glow); color: var(--accent); }

/* Klickbarer Tag in Grid (für Tagesansicht-Öffnen) */
.date-number.day-clickable { cursor: pointer; transition: color var(--transition); }
.date-number.day-clickable:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 768px) {
    .day-view-jobs { grid-template-columns: 1fr; }
    .day-view-head { padding: 10px 12px; }
    .day-view-head h2 { font-size: 1.05em; }
    .tl-row-label { padding: 4px 6px; font-size: 0.78em; }
}

/* ============================================================
   MITTAGESSEN-MODUL
   ============================================================ */

/* Tab-Leiste ─────────────────────────────────────────────── */
.mt-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--card-bg);
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 49;
}
.mt-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) { .mt-tabs { top: 46px; } }

.mt-tab {
    flex: 0 0 auto;
    padding: 13px 18px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.88em;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
    scroll-snap-align: start;
    min-height: 48px;
}
.mt-tab.active  { color: var(--accent); border-bottom-color: var(--accent); }
.mt-tab:hover   { color: var(--text-main); }

/* Tab-Inhalte ────────────────────────────────────────────── */
.mt-tab-pane         { display: none; padding: 16px 16px 80px; }
.mt-tab-pane.active  { display: block; }

/* Karten-Grid ────────────────────────────────────────────── */
.mt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 560px)  { .mt-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 860px)  { .mt-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .mt-grid { grid-template-columns: repeat(5, 1fr); } }

/* Einzelne Karte */
.mt-karte {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.mt-karte:hover     { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mt-karte--leer     { opacity: .55; }

.mt-karte-bild {
    position: relative;
    aspect-ratio: 1;
    background: var(--surface-2);
    overflow: hidden;
}
.mt-karte-bild img  { width:100%; height:100%; object-fit:cover; display:block; }
.mt-bild-ph         { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

.mt-badge {
    position: absolute;
    bottom: 6px; right: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .72em;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.mt-badge--ok   { background: rgba(0,0,0,.6); color: #fff; }
.mt-badge--leer { background: rgba(192,57,43,.85); color: #fff; }

.mt-karte-body   { padding: 10px; }
.mt-karte-name   { font-size: .88em; font-weight: 600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom: 2px; }
.mt-karte-preis  { color: var(--accent); font-size: .82em; font-weight: 700; margin-bottom: 8px; }
.mt-karte-btn {
    width: 100%;
    padding: 9px 6px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .83em;
    font-weight: 600;
    min-height: 38px;
    transition: background var(--transition);
}
.mt-karte-btn:hover      { background: var(--accent-dark); }
.mt-karte-btn--dis       { background: var(--surface-3); color: var(--text-muted); cursor: not-allowed; }
.mt-karte-eigene         { font-size: .72em; color: var(--accent); text-align:center; margin-top: 5px; }
.mt-karte-preis-wrap     { display:flex; align-items:baseline; gap:6px; margin-bottom:8px; }
.mt-karte-preis-rabatt   { color:#27ae60; font-size:1em; font-weight:700; }
.mt-karte-preis-durch    { color:var(--text-muted); font-size:.78em; text-decoration:line-through; }
.mt-badge--rabatt        { background:rgba(39,174,96,.85); color:#fff; top:6px; left:6px; right:auto; bottom:auto; }

/* Chips (eigene Bestellungen) ───────────────────────────── */
.mt-chips-bar   { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:14px; }
.mt-chips-label { font-size:.82em; color:var(--text-muted); margin-right:2px; }
.mt-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 4px 4px 12px;
    font-size: .83em;
}
.mt-chip-x {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    padding: 0 6px;
    border-radius: 50%;
    transition: color var(--transition);
}
.mt-chip-x:hover { color: #e74c3c; }

/* Kochen-View ───────────────────────────────────────────── */
.mt-kochen-total  { font-size:1.05em; font-weight:600; margin-bottom:14px; color:var(--text-main); }
.mt-kochen-liste  { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.mt-kochen-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.mt-kochen-top  { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.mt-kochen-anz  {
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    padding: 2px 9px;
    font-size: .88em;
    font-weight: 700;
    flex-shrink: 0;
}
.mt-kochen-name     { font-size:1em; font-weight:600; }
.mt-kochen-personen { font-size:.8em; color:var(--text-muted); }

.mt-ofen-bar { padding-top: 4px; }
.mt-btn-ofen {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    min-height: 56px;
    box-shadow: 0 4px 14px rgba(231,76,60,.4);
    transition: transform var(--transition), box-shadow var(--transition);
    letter-spacing: .4px;
}
.mt-btn-ofen:hover  { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(231,76,60,.5); }
.mt-btn-ofen:active { transform: translateY(0); }

/* Kosten-View ───────────────────────────────────────────── */
.mt-monat-bar       { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.mt-kosten-tabelle  { display:flex; flex-direction:column; gap:4px; }
.mt-kosten-zeile {
    display:flex; justify-content:space-between; align-items:center;
    background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:12px 14px;
}
.mt-kosten-essen    { font-size:.92em; }
.mt-kosten-meta     { display:flex; align-items:center; gap:12px; }
.mt-kosten-anz      { font-size:.82em; color:var(--text-muted); }
.mt-kosten-sum      { font-weight:600; }
.mt-kosten-zeile.mt-kosten-bezahlt { border-color:rgba(39,174,96,.55); background:rgba(39,174,96,.08); }
.mt-paid-badge { font-size:.7em; font-weight:600; color:#27ae60; margin-left:6px; }
.mt-paid-btn {
    font-size:.74em; font-weight:600; padding:4px 10px; border-radius:14px; cursor:pointer;
    border:1px solid var(--border); background:var(--surface-3); color:var(--text-muted);
}
.mt-paid-btn:hover { border-color:var(--accent); color:var(--text-main); }
.mt-paid-btn.on { background:rgba(39,174,96,.85); border-color:transparent; color:#fff; }
/* Bestell-Sperren */
.mt-vw-sperren { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; }
.mt-sperre-liste { display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.mt-sperre-chip {
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    background:rgba(231,76,60,.10); border:1px solid rgba(231,76,60,.40);
    border-radius:var(--radius-sm); padding:7px 12px; font-size:.86em;
}
.mt-kosten-gesamt {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px; margin-top:6px;
    background:var(--surface-3); border-radius:var(--radius);
    font-weight:700;
}
.mt-kosten-gesamt-sum { font-size:1.1em; color:var(--accent); }

/* Statistik ─────────────────────────────────────────────── */
.mt-stat-bar  { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.mt-pills     { display:flex; gap:6px; }
.mt-pill {
    padding:7px 14px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface-2);
    color:var(--text-muted);
    cursor:pointer;
    font-size:.83em;
    transition:var(--transition);
    min-height:36px;
}
.mt-pill.active  { background:var(--accent); color:#fff; border-color:var(--accent); }

.mt-beliebtheit { display:flex; flex-direction:column; gap:12px; }
.mt-bel-zeile   { display:flex; align-items:center; gap:10px; }
.mt-bel-rank    { font-size:.78em; color:var(--text-muted); width:28px; flex-shrink:0; text-align:right; }
.mt-bel-wrap    { flex:1; min-width:0; }
.mt-bel-name    { font-size:.85em; margin-bottom:4px; }
.mt-bel-bar-bg  { background:var(--surface-3); border-radius:4px; height:8px; overflow:hidden; }
.mt-bel-fill    { height:100%; background:var(--accent); border-radius:4px; transition:width .6s ease; }
.mt-bel-cnt     { font-size:.85em; font-weight:600; width:32px; text-align:right; flex-shrink:0; }

/* Verwaltung ────────────────────────────────────────────── */
.mt-vw-header { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.mt-vw-btn-new, .mt-vw-btn-pin {
    flex:1;
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 14px;
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-size:.88em;
    font-weight:600;
    min-height:44px;
    transition:var(--transition);
}
.mt-vw-btn-new { background:var(--accent); color:#fff; }
.mt-vw-btn-new:hover { background:var(--accent-dark); }
.mt-vw-btn-pin { background:var(--surface-3); color:var(--text-main); border:1px solid var(--border); }
.mt-vw-btn-pin:hover { background:var(--border); }

.mt-vw-liste { display:flex; flex-direction:column; gap:8px; }
.mt-vw-item {
    display:flex; align-items:center; gap:12px;
    background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
    padding:10px 12px;
    transition:opacity var(--transition);
}
.mt-vw-item--off { opacity:.45; }

.mt-vw-img { flex-shrink:0; }
.mt-vw-img img    { width:54px; height:54px; object-fit:cover; border-radius:8px; display:block; }
.mt-vw-img-ph {
    width:54px; height:54px; background:var(--surface-3);
    border-radius:8px; display:flex; align-items:center; justify-content:center;
}
.mt-vw-info  { flex:1; min-width:0; }
.mt-vw-name  { font-size:.92em; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-vw-detail { font-size:.78em; color:var(--text-muted); margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mt-vw-rabatt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    flex-wrap: wrap;
    font-size: .78em;
}
.mt-vw-rabatt-label  { color:#27ae60; font-weight:600; white-space:nowrap; }
.mt-vw-rabatt-del {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .9em;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    transition: color var(--transition);
}
.mt-vw-rabatt-del:hover { color: #e74c3c; }
.mt-vw-rabatt-row--leer { opacity: .55; }
.mt-vw-rabatt-add {
    background: none;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: .78em;
    padding: 3px 8px;
    border-radius: 6px;
    transition: var(--transition);
}
.mt-vw-rabatt-add:hover { border-color: var(--accent); color: var(--accent); }
.mt-vw-menge-ctrl  { display:flex; align-items:center; gap:4px; }
.mt-vw-menge-btn {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}
.mt-vw-menge-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.mt-vw-menge-val   { min-width: 22px; text-align: center; font-weight: 700; color: var(--text-main); font-size: 1em; }
.mt-vw-menge-label { color: var(--text-muted); }
.mt-vw-acts  { display:flex; gap:6px; flex-shrink:0; }
.mt-vw-act {
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); background:var(--surface-3);
    border-radius:var(--radius-sm); cursor:pointer;
    color:var(--text-muted); transition:var(--transition);
}
.mt-vw-act:hover       { color:var(--text-main); background:var(--border); }
.mt-vw-act--del        { color:#e74c3c; }
.mt-vw-act--del:hover  { background:rgba(231,76,60,.12); }
.mt-vw-act--ok         { color:#27ae60; }
.mt-vw-act--ok:hover   { background:rgba(39,174,96,.12); }

/* Hilfselemente ─────────────────────────────────────────── */
.mt-empty   { text-align:center; padding:40px 20px; color:var(--text-muted); font-size:.9em; }
.mt-loading { text-align:center; padding:24px; color:var(--text-muted); font-size:.88em; }

/* Toast ─────────────────────────────────────────────────── */
.mt-toast {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--surface-3);
    color: var(--text-main);
    padding: 10px 22px;
    border-radius: 22px;
    font-size: .9em;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    z-index: 9999;
    white-space: nowrap;
}
.mt-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mt-toast--ok   { background: #27ae60; color: #fff; }
.mt-toast--err  { background: #c0392b; color: #fff; }

/* Ofen-Banner ───────────────────────────────────────────────── */
.mt-ofen-banner {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    color: #fff;
    padding: 13px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: .95em;
    text-align: center;
    box-shadow: 0 3px 12px rgba(230,126,34,.4);
    line-height: 1.4;
}

/* Verwaltung-Einstellungen ──────────────────────────────────── */
.mt-vw-einstellungen {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.mt-vw-settings-title {
    font-size: .8em;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}
.mt-vw-settings-row {
    margin-bottom: 14px;
}
.mt-vw-settings-row:last-child { margin-bottom: 0; }
.mt-vw-settings-row > label {
    display: block;
    font-size: .82em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.mt-vw-settings-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.mt-vw-settings-input-row .modern-input { flex: 1; }
.mt-vw-settings-hint {
    font-size: .75em;
    color: var(--text-muted);
    margin: 5px 0 0;
}
.mt-btn-sm {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 9px 14px;
    font-size: .83em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    min-height: 40px;
    transition: background var(--transition);
}
.mt-btn-sm:hover { background: var(--accent-dark); }

/* Manuelle Einträge ─────────────────────────────────────────── */
.mt-vw-manuell {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.mt-vw-manuell-form { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.mt-vw-manuell-row  { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.mt-vw-manuell-row .modern-input { flex:1; min-width:80px; }

.mt-manuell-liste { display:flex; flex-direction:column; gap:6px; }
.mt-manuell-leer  { font-size:.82em; color:var(--text-muted); padding:6px 0; }
.mt-manuell-gruppe { }
.mt-manuell-ma {
    font-size:.78em; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.04em;
    padding:4px 0 3px;
    border-top:1px solid var(--border);
    margin-top:6px;
}
.mt-manuell-ma:first-child { border-top:none; margin-top:0; }
.mt-manuell-zeile {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:var(--surface-2); border-radius:7px;
    padding:7px 10px; font-size:.85em;
    margin-top:4px;
}
.mt-manuell-info  { flex:1; line-height:1.4; }
.mt-manuell-notiz {
    display:inline-block; margin-left:6px;
    color:var(--text-muted); font-size:.88em; font-style:italic;
}
.mt-manuell-del {
    background:none; border:none; color:var(--text-muted);
    cursor:pointer; font-size:.9em; padding:4px 6px; border-radius:5px;
    flex-shrink:0; transition:color var(--transition);
}
.mt-manuell-del:hover { color:#e74c3c; }

/* Kosten-Zeile Variante manuell */
.mt-kosten-zeile--manuell { opacity:.85; }
.mt-kosten-notiz { font-size:.8em; color:var(--text-muted); font-style:italic; margin-left:4px; }
.mt-kosten-man-badge {
    font-size:.72em; background:var(--surface-3); padding:1px 4px;
    border-radius:4px; margin-left:2px; cursor:default;
}

/* Light-Mode-Anpassungen */
body.light-mode .mt-karte  { background: var(--lm-card-bg); }
body.light-mode .mt-tabs   { background: var(--lm-card-bg); }
body.light-mode .mt-kosten-zeile { background: var(--lm-card-bg); }
body.light-mode .mt-kochen-item  { background: var(--lm-card-bg); }
body.light-mode .mt-vw-item      { background: var(--lm-card-bg); }
body.light-mode .mt-vw-einstellungen { background: var(--lm-card-bg); }

/* ============================================================
   Skills-Checkbox-Grid in der Mitarbeiter-Verwaltung
   Vorher: hardcoded #333 / #2a2a2a Inline-Styles -> im Light Mode unleserlich,
           auf Mobile zu klein (Text-/Checkbox-Skalierung kaputt).
   ============================================================ */
.skill-cb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding: 10px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.skill-cb-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.92em;
    line-height: 1.2;
    background: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border);
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.skill-cb-label:hover { border-color: var(--border-strong); }
.skill-cb-label:has(.skill-cb:checked) {
    background: var(--accent, #6c5ce7);
    color: #fff;
    border-color: var(--accent, #6c5ce7);
}
.skill-cb-label .skill-cb {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent, #6c5ce7);
}

/* Light-Mode-Overrides */
body.light-mode .skill-cb-grid  { background: var(--lm-surface-2); border-color: var(--lm-border); }
body.light-mode .skill-cb-label { background: var(--lm-card-bg); color: var(--lm-text-main); border-color: var(--lm-border); }
body.light-mode .skill-cb-label:hover { border-color: var(--lm-border-strong); }
body.light-mode .skill-cb-label:has(.skill-cb:checked) { color: #fff; }

/* Mobile: groesserer Touch-Bereich, lesbare Schrift, Skill-Label darf umbrechen */
@media (max-width: 640px) {
    .skill-cb-grid  { gap: 8px; padding: 8px; }
    .skill-cb-label {
        font-size: 0.95em;
        padding: 8px 12px;
        min-height: 38px;          /* iOS-empfohlene Touch-Target-Hoehe */
        flex: 0 1 auto;
        white-space: normal;       /* Lange Skill-Namen duerfen umbrechen */
        word-break: break-word;
    }
    .skill-cb-label .skill-cb { width: 18px; height: 18px; }
}

/* ════════════════════════════════════════════════════════════════
   TO-DOS & ROUTINEN (Prefix .td-) – orientiert an .mt-*
   ════════════════════════════════════════════════════════════════ */

/* Tabs */
.td-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--card-bg);
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 49;
}
.td-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) { .td-tabs { top: 46px; } }
.td-tab {
    flex: 0 0 auto;
    padding: 13px 18px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.88em;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
    min-height: 48px;
}
.td-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.td-tab:hover  { color: var(--text-main); }

.td-tab-pane        { display: none; padding: 16px 16px 80px; }
.td-tab-pane.active { display: block; }

/* Toolbar */
.td-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.td-btn-new {
    display:flex; align-items:center; gap:6px;
    padding:10px 16px;
    background:var(--accent); color:#fff;
    border:none; border-radius:var(--radius-sm);
    cursor:pointer; font-size:.88em; font-weight:600;
    min-height:44px; transition:var(--transition);
}
.td-btn-new:hover { background:var(--accent-dark); }
.td-toggle { display:flex; align-items:center; gap:6px; font-size:.83em; color:var(--text-muted); cursor:pointer; }
.td-toggle input { accent-color:var(--accent); cursor:pointer; }
.td-suche { width:auto; flex:1; min-width:140px; max-width:280px; }

/* Listen */
.td-liste   { display:flex; flex-direction:column; gap:8px; }
.td-empty   { text-align:center; padding:40px 20px; color:var(--text-muted); font-size:.9em; }
.td-loading { text-align:center; padding:24px; color:var(--text-muted); font-size:.88em; }

/* To-Do-Karte */
.td-karte {
    display:flex; align-items:flex-start; gap:10px;
    background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
    padding:12px 14px;
    box-shadow:var(--shadow-sm);
    transition:opacity var(--transition);
}
.td-karte--erledigt { opacity:.55; }
.td-karte--erledigt .td-titel { text-decoration:line-through; }
.td-karte-check { flex-shrink:0; padding-top:2px; }
.td-karte-check input { width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.td-karte-body { flex:1; min-width:0; }
.td-karte-top  { display:flex; align-items:center; gap:6px; }
.td-titel      { font-size:.95em; font-weight:600; }
.td-wdh        { font-size:.85em; }
.td-beschr     { font-size:.82em; color:var(--text-muted); margin-top:4px; white-space:pre-wrap; }
.td-meta       { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.td-meta-item  { display:inline-flex; align-items:center; gap:4px; font-size:.78em; color:var(--text-muted); }
.td-meta-item .ic { width:14px; height:14px; }
.td-karte-acts { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.td-act {
    background:none; border:1px solid var(--border); border-radius:6px;
    color:var(--text-muted); cursor:pointer; padding:5px;
    display:flex; align-items:center; justify-content:center;
    transition:var(--transition);
}
.td-act:hover { color:var(--text-main); background:var(--surface-3); }
.td-act .ic { width:16px; height:16px; }
.td-act--del:hover { color:#e74c3c; border-color:#e74c3c; }

/* Prioritäts-Badges */
.td-badge {
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 8px; border-radius:10px;
    font-size:.72em; font-weight:600;
}
.td-badge--hoch    { background:rgba(231,76,60,.18);  color:#e74c3c; }
.td-badge--mittel  { background:rgba(241,196,15,.18); color:#d4a503; }
.td-badge--niedrig { background:rgba(39,174,96,.18);  color:#27ae60; }

.td-faellig      { font-size:.78em; color:var(--text-muted); }
.td-faellig--rot { color:#e74c3c; font-weight:600; }
.td-warnung {
    margin-top:6px; padding:6px 10px;
    background:rgba(231,76,60,.14); color:#e74c3c;
    border-radius:var(--radius-sm); font-size:.8em; font-weight:600;
}

/* Zuweisungs-Badges im To-Do-Formular */
.td-zuw-hint { font-size:.78em; color:var(--text-muted); font-weight:400; }
.td-assign-badges {
    display:flex; flex-wrap:wrap; gap:6px;
    margin:4px 0 8px; padding:8px;
    background:var(--surface-3); border:1px solid var(--border);
    border-radius:var(--radius-sm); max-height:150px; overflow-y:auto;
}
.td-assign-badge {
    cursor:pointer; user-select:none;
    background:var(--card-bg); border:1px solid var(--border);
    color:var(--text-muted); border-radius:14px;
    padding:4px 12px; font-size:.82em; font-weight:600;
    transition:var(--transition);
}
.td-assign-badge:hover { border-color:var(--accent); color:var(--text-main); }
.td-assign-badge--on {
    background:var(--accent); border-color:var(--accent); color:#fff;
}
.td-zuw-alle { color:var(--accent); font-weight:600; }

/* ============================================================
   DISPO-ÜBERSICHT (Prefix .dp-)
   ============================================================ */
.dp-tabs {
    display:flex; gap:2px; border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:30; background:var(--bg-color);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.dp-tabs::-webkit-scrollbar { display:none; }
@media (max-width:1023px) { .dp-tabs { top:46px; } }
.dp-tab {
    flex:0 0 auto; background:none; border:none; border-bottom:2px solid transparent;
    color:var(--text-muted); padding:12px 16px; font-size:.9em; font-weight:600;
    cursor:pointer; white-space:nowrap;
}
.dp-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.dp-tab:hover  { color:var(--text-main); }
.dp-tab-pane        { display:none; padding:14px 16px 90px; }
.dp-tab-pane.active { display:block; }

.dp-rangebar {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:10px 16px; border-bottom:1px solid var(--border);
    position:sticky; top:45px; z-index:25; background:var(--bg-color);
}
@media (max-width:1023px) { .dp-rangebar { top:91px; } }
.dp-modes { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.dp-mode  { background:none; border:none; color:var(--text-muted); padding:6px 12px; font-size:.82em; font-weight:600; cursor:pointer; }
.dp-mode.active { background:var(--accent); color:#fff; }
.dp-nav { display:flex; align-items:center; gap:8px; }
.dp-navbtn { background:var(--surface-3); border:1px solid var(--border); color:var(--text-main); border-radius:6px; width:30px; height:30px; cursor:pointer; }
.dp-navbtn:hover { border-color:var(--accent); }
.dp-range-label { font-weight:700; min-width:150px; text-align:center; }
.dp-today { margin-left:auto; background:var(--accent); color:#fff; border:none; border-radius:6px; padding:6px 12px; font-size:.82em; font-weight:600; cursor:pointer; }

.dp-empty { color:var(--text-muted); text-align:center; padding:30px 10px; }

/* Heatmap */
.dp-legende { display:flex; flex-wrap:wrap; gap:14px; font-size:.78em; color:var(--text-muted); margin-bottom:10px; }
.dp-legende span { display:inline-flex; align-items:center; gap:5px; }
.dp-lg { display:inline-block; width:14px; height:14px; border-radius:3px; border:1px solid var(--border); }
.dp-lg-abs { background:var(--surface-3); color:var(--text-muted); font-size:.7em; font-weight:700; text-align:center; line-height:14px; }
.dp-heat-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:8px; }
.dp-heat { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; }
.dp-heat th, .dp-heat td { border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.dp-heat thead th { position:sticky; top:0; z-index:2; background:var(--surface-2); padding:5px 6px; font-size:.72em; font-weight:600; text-align:center; }
.dp-th-dat { font-weight:400; color:var(--text-muted); font-size:.92em; }
.dp-th-name {
    position:sticky; left:0; z-index:3; background:var(--surface-2);
    text-align:left; padding:5px 10px; font-size:.8em; white-space:nowrap; min-width:96px;
}
.dp-heat tbody .dp-th-name { z-index:1; }
.dp-rowsum { color:var(--text-muted); font-weight:400; font-size:.85em; margin-left:4px; }
.dp-cell { width:46px; height:38px; text-align:center; vertical-align:middle; padding:2px; position:relative; }
.dp-cell-h { display:block; font-size:.74em; font-weight:600; }
.dp-cell-n { font-size:.62em; color:var(--text-muted); }
.dp-cell.dp-we { background-image:linear-gradient(rgba(127,127,127,.06),rgba(127,127,127,.06)); }
.dp-th-day.dp-we { color:var(--text-muted); }
.dp-th-day.dp-heute, .dp-cell.dp-heute { outline:2px solid var(--accent); outline-offset:-2px; }
.dp-cell-over { box-shadow:inset 0 0 0 2px #e74c3c; }
.dp-heat th.dp-mstart, .dp-heat td.dp-mstart { border-left:2px solid var(--accent); }
.dp-lager-mark { display:block; margin:0 auto 1px; width:14px; height:14px; opacity:0.25; cursor:pointer; color:var(--text-muted); }
.dp-lager-mark .ic { width:14px; height:14px; }
.dp-lager-mark:hover { opacity:0.9; color:#ec4899; }
.dp-lager-mark.on { opacity:1; color:#ec4899; }
.dp-lager-mark.uncov { opacity:1; color:#e74c3c; }
.dp-k-lager { border-left-color:#ec4899 !important; }
/* Lagerverkehr-Hinweis in Kalender/Tag/Zeitstrahl */
.lager-chip { display:block; background:rgba(236,72,153,.18); border:1px solid rgba(236,72,153,.5); color:#ec4899; border-radius:6px; padding:2px 7px; font-size:0.72em; font-weight:600; margin:2px 0 4px; line-height:1.3; }
.lager-chip .ic { width:12px; height:12px; vertical-align:-2px; }
.tl-lager-mark { display:inline-flex; align-items:center; background:rgba(236,72,153,.9); color:#fff; border-radius:8px; padding:1px 6px; font-size:0.72em; font-weight:700; margin-right:4px; white-space:nowrap; }
.dp-abs { background:var(--surface-3); color:var(--text-muted); font-weight:700; font-size:.78em; }
.dp-clk { cursor:pointer; }
.dp-heat td.dp-clk:hover { box-shadow:inset 0 0 0 2px var(--accent); }
.dp-th-day.dp-clk:hover { color:var(--accent); }

/* Konflikte */
.dp-arbzg-toggle { display:flex; align-items:center; gap:8px; font-size:.83em; color:var(--text-muted); margin-bottom:14px; cursor:pointer; }
.dp-arbzg-toggle input { accent-color:var(--accent); width:16px; height:16px; cursor:pointer; }
.dp-konf-liste { display:flex; flex-direction:column; gap:8px; }
.dp-konf { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border); border-left-width:4px; border-radius:8px; background:var(--card-bg); }
.dp-konf-ic { font-size:1.1em; flex-shrink:0; }
.dp-konf-typ { font-size:.72em; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); margin-bottom:2px; }
.dp-konf-text { font-size:.9em; }
.dp-k-overlap { border-left-color:#e74c3c; }
.dp-k-ruhe    { border-left-color:#2563eb; }
.dp-k-tag     { border-left-color:#e67e22; }
.dp-k-woche   { border-left-color:#9b59b6; }

/* Bedarf */
.dp-bedarf-tag { margin-bottom:16px; }
.dp-bedarf-datum { font-weight:700; color:var(--accent); margin-bottom:6px; font-size:.9em; }
.dp-bedarf-job { border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:6px; background:var(--card-bg); }
.dp-bedarf-jobtop { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dp-bedarf-titel { font-weight:600; }
.dp-bedarf-zeit { font-size:.8em; color:var(--text-muted); }
.dp-bedarf-quote { font-size:.8em; color:var(--text-muted); margin-left:auto; }
.dp-offen { color:#e74c3c; }
.dp-bedarf-skills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.dp-skill-chip { font-size:.78em; background:var(--surface-3); border:1px solid var(--border); border-radius:12px; padding:3px 10px; }

.td-komm-btn {
    display:inline-flex; align-items:center; gap:4px;
    background:var(--surface-3); border:1px solid var(--border); border-radius:12px;
    color:var(--text-muted); cursor:pointer; padding:3px 9px; font-size:.78em;
    transition:var(--transition);
}
.td-komm-btn:hover { color:var(--accent); }
.td-komm-btn .ic { width:13px; height:13px; }

/* Chips */
.td-chip {
    display:inline-flex; align-items:center;
    background:var(--surface-3); border:1px solid var(--border);
    border-radius:20px; padding:2px 10px; font-size:.76em; color:var(--text-main);
}

/* Routinen-Liste */
.td-routine {
    display:flex; align-items:center; gap:12px;
    background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
    padding:14px 16px; cursor:pointer;
    transition:transform var(--transition), box-shadow var(--transition);
}
.td-routine:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.td-routine-body  { flex:1; min-width:0; }
.td-routine-titel { font-size:.95em; font-weight:600; margin-bottom:5px; }
.td-routine-meta  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.td-routine-schritte { font-size:.78em; color:var(--text-muted); }
.td-routine-pfeil { width:18px; height:18px; opacity:.4; flex-shrink:0; }
.td-routine-beschr { font-size:.85em; color:var(--text-muted); margin:0 0 14px; }

/* Routine-Schritt-Ansicht */
.td-schritt-liste { display:flex; flex-direction:column; gap:14px; }
.td-schritt { display:flex; gap:12px; }
.td-schritt-num {
    flex-shrink:0; width:28px; height:28px;
    background:var(--accent); color:#fff; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.85em; font-weight:700;
}
.td-schritt-inhalt { flex:1; min-width:0; }
.td-schritt-text   { font-size:.9em; line-height:1.4; white-space:pre-wrap; }
.td-schritt-bild   { width:100%; max-height:240px; object-fit:cover; border-radius:8px; margin-top:8px; display:block; }

/* Routine-Editor */
.td-r-schritt {
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:10px 12px; margin-bottom:8px;
}
.td-r-schritt-kopf { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.td-r-schritt-num  { font-size:.82em; font-weight:700; color:var(--accent); }
.td-r-schritt-btns { display:flex; gap:4px; }
.td-r-mini {
    background:var(--surface-3); border:1px solid var(--border); border-radius:5px;
    color:var(--text-muted); cursor:pointer; width:26px; height:26px; font-size:.8em;
    transition:var(--transition);
}
.td-r-mini:hover:not(:disabled) { color:var(--text-main); }
.td-r-mini:disabled { opacity:.35; cursor:default; }
.td-r-mini--del:hover:not(:disabled) { color:#e74c3c; border-color:#e74c3c; }
.td-r-schritt-text { width:100%; box-sizing:border-box; margin:0 0 6px; }
.td-r-schritt-prev { width:100%; max-height:160px; object-fit:cover; border-radius:6px; margin-bottom:6px; display:block; }

/* Kommentare */
.td-komm-verlauf {
    max-height:300px; overflow-y:auto;
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:10px; margin:6px 0 10px;
    display:flex; flex-direction:column; gap:8px;
}
.td-komm { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; }
.td-komm-kopf { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:.8em; }
.td-komm-zeit { color:var(--text-muted); font-size:.92em; }
.td-komm-text { font-size:.88em; margin-top:3px; white-space:pre-wrap; }
.td-komm-eingabe { display:flex; gap:8px; }
.td-komm-eingabe input { flex:1; }

/* gemeinsamer kleiner Button */
.td-btn-sm {
    padding:8px 14px;
    background:var(--accent); color:#fff;
    border:none; border-radius:var(--radius-sm);
    cursor:pointer; font-size:.83em; font-weight:600;
    white-space:nowrap; transition:var(--transition);
}
.td-btn-sm:hover { background:var(--accent-dark); }

/* Formular-Felder */
.td-f-wdh-feld { margin-top:4px; }

/* Benachrichtigungs-Box (Nachrichten-Seite) */
.td-notif-box {
    background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden;
}
.td-notif-kopf {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:10px 14px; background:var(--surface-3);
    font-size:.88em; font-weight:600;
}
.td-notif-liste { display:flex; flex-direction:column; }
.td-notif {
    display:flex; gap:10px; align-items:flex-start;
    padding:10px 14px; border-top:1px solid var(--border);
    cursor:pointer; transition:background var(--transition);
}
.td-notif:hover { background:var(--surface-2); }
.td-notif--neu  { background:rgba(232,25,44,.06); }
.td-notif--neu .td-notif-titel { font-weight:700; }
.td-notif-ic    { width:18px; height:18px; flex-shrink:0; color:var(--accent); margin-top:2px; }
.td-notif-body  { flex:1; min-width:0; }
.td-notif-titel { font-size:.86em; }
.td-notif-text  { font-size:.8em; color:var(--text-muted); margin-top:2px; }
.td-notif-zeit  { font-size:.72em; color:var(--text-muted); margin-top:3px; }

/* Toast */
.td-toast {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--surface-3);
    color: var(--text-main);
    padding: 10px 22px;
    border-radius: 22px;
    font-size: .9em;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    z-index: 9999;
    white-space: nowrap;
}
.td-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.td-toast--ok   { background: #27ae60; color: #fff; }
.td-toast--err  { background: #c0392b; color: #fff; }

/* === MEIN PLAN (.mp-*) – persönliche Einsatzübersicht, mobil-first === */
#mp-inhalt { padding: 14px 16px 90px; }

.mp-counter {
    color: var(--text-muted); font-size: .85em; font-weight: 600;
    margin-bottom: 14px; text-align: center;
}
.mp-empty { color: var(--text-muted); text-align: center; padding: 40px 10px; }

.mp-gruppe { margin-bottom: 18px; }
.mp-datum {
    position: sticky; top: 0; z-index: 5;
    background: var(--bg-color); color: var(--accent);
    font-weight: 700; font-size: .95em; padding: 6px 2px;
    border-bottom: 1px solid var(--border); margin-bottom: 10px;
}

.mp-karte {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.mp-karte-abs { border-left: 3px solid var(--accent); }

.mp-karte-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 8px;
}
.mp-titel { font-weight: 700; font-size: 1em; color: var(--text-main); }
.mp-zeit  { color: var(--text-muted); font-size: .85em; white-space: nowrap; flex: 0 0 auto; }

.mp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mp-badge {
    display: inline-block; font-size: .72em; font-weight: 700;
    padding: 3px 8px; border-radius: 999px; line-height: 1.3;
    border: 1px solid var(--border); color: var(--text-main);
}
.mp-badge-phase     { background: rgba(46,204,113,.20); border-color: rgba(46,204,113,.45); }
.mp-badge-transport { background: rgba(37,99,235,.20);  border-color: rgba(37,99,235,.45); }
.mp-badge-pl        { background: rgba(155,89,182,.22); border-color: rgba(155,89,182,.5); }
.mp-badge-plan      { background: var(--surface-3); }
.mp-badge-abs       { background: rgba(230,126,34,.22); border-color: rgba(230,126,34,.5); }
.mp-badge-lager     { background: rgba(236,72,153,.22); border-color: rgba(236,72,153,.55); }

.mp-ort {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent); font-size: .85em; text-decoration: none;
    margin-bottom: 6px;
}
.mp-ort:hover { text-decoration: underline; }
.mp-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; }

.mp-meta { color: var(--text-muted); font-size: .78em; margin-bottom: 8px; }

/* Detaillierter Zeitplan (zeiten-Einträge des Tages) */
.mp-plan {
    border-left: 2px solid var(--border); padding-left: 10px; margin: 2px 0 10px;
    display: flex; flex-direction: column; gap: 3px;
}
.mp-plan-z { font-size: .85em; color: var(--text-main); line-height: 1.35; }
.mp-plan-t { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }

.mp-open {
    background: none; border: 1px solid var(--border); color: var(--accent);
    border-radius: 8px; padding: 5px 12px; font-size: .8em; font-weight: 600;
    cursor: pointer;
}
.mp-open:hover { border-color: var(--accent); background: rgba(255,255,255,.04); }

/* === POSTAUSGANG === */
.pg-empty   { color: var(--text-muted); text-align: center; padding: 30px 10px; }
.pg-counter { color: var(--text-muted); font-size: .8em; margin-bottom: 10px; }
.pg-karte {
    background: var(--card-bg); border: 1px solid var(--border);
    border-left: 3px solid #27ae60; border-radius: var(--radius);
    padding: 10px 12px; margin-bottom: 8px;
}
.pg-karte-err { border-left-color: #e74c3c; }
.pg-top      { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.pg-ts       { color: var(--text-muted); font-size: .8em; margin-right: 4px; }
.pg-badge    { font-size: .7em; font-weight: 600; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.pg-badge-ok   { background: rgba(39,174,96,.85); color: #fff; }
.pg-badge-err  { background: rgba(231,76,60,.85); color: #fff; }
.pg-badge-func { background: var(--surface-3); color: var(--text-main); }
.pg-badge-job  { background: rgba(37,99,235,.85); color: #fff; }
.pg-betreff  { font-weight: 600; font-size: .92em; color: var(--text-main); }
.pg-meta     { color: var(--text-muted); font-size: .82em; margin-top: 2px; }
.pg-fehler   { color: #e74c3c; font-size: .82em; margin-top: 4px; }
.pg-toggle   {
    background: none; border: none; color: var(--accent); cursor: pointer;
    font-size: .8em; padding: 4px 0 0; font-weight: 600;
}
.pg-body     { margin-top: 6px; }
.pg-body pre {
    white-space: pre-wrap; word-break: break-word; margin: 0;
    background: var(--surface-2); border-radius: var(--radius-sm);
    padding: 8px 10px; font-size: .82em; color: var(--text-main);
    font-family: inherit; max-height: 320px; overflow: auto;
}