/* =============================================
   SL-UP - Modernes helles Design
   ============================================= */

:root {
    /* Primärfarben */
    --primary: #2563EB;
    --primary-light: #3B82F6;
    --primary-dark: #1D4ED8;
    --primary-50: #EFF6FF;
    --primary-100: #DBEAFE;

    /* Akzentfarben */
    --accent: #06B6D4;
    --accent-light: #22D3EE;

    /* Grautöne */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    /* #1664: AA-konformer Muted-Text (#6B7280 = 4.74:1 auf Weiß) — für sekundäre
       Labels statt --gray-400 (#9CA3AF, nur 2.58:1, verfehlt WCAG AA). */
    --text-muted: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Statusfarben */
    --success: #10B981;
    --success-light: #D1FAE5;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --info: #3B82F6;
    --info-light: #DBEAFE;

    /* Abwesenheitsfarben */
    --absence-vacation: #10B981;
    --absence-sick: #EF4444;
    --absence-homeoffice: #3B82F6;
    --absence-travel: #F59E0B;
    --absence-training: #8B5CF6;
    --absence-parental: #EC4899;

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 68px;
    --header-height: 64px;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --transition: all 0.2s ease;
}

/* ---- Reset & Basis ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    line-height: 1.6;
    /* #2936: siehe .main-content — Ueberlauf wird behoben, nicht gekappt. */
    padding-top: var(--notice-h, 0px);
}

a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary-dark); }

/* ---- Login-Seite ---- */
.login-page {
    min-height: 100vh;          /* Fallback */
    min-height: 100dvh;         /* iOS-Fix #938: dynamic viewport */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 2rem 1rem;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: loginBgPulse 8s ease-in-out infinite;
}

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

.login-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo .logo-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.login-logo .logo-icon i {
    font-size: 2rem;
    color: white;
}

.login-logo h1 {
    font-family: 'Young Serif', 'Young Serif Fallback', Georgia, serif; /* Wortmarke SL-UP */
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--gray-900);
    letter-spacing: -0.5px;
}

.login-logo p {
    color: var(--gray-500);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* ---- Formular Elemente ---- */
.form-floating {
    position: relative;
    margin-bottom: 1rem;
}

.form-floating .form-control {
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius-sm);
    padding: 1rem 1rem 0.5rem 2.75rem;
    font-size: 0.95rem;
    transition: var(--transition);
    background: var(--gray-50);
    height: auto;
}

.form-floating .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    background: white;
}

.form-floating .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    z-index: 5;
    pointer-events: none;
    transition: var(--transition);
    line-height: 1;
    font-size: 1rem;
}
/* Login-Seite: Icon immer auf feste 29px (Mitte des 58px-Inputs), unabhängig von Container-Höhe */
.login-page .form-floating .input-icon {
    top: 29px !important;
    transform: translateY(-50%) !important;
}

.form-floating .form-control:focus ~ .input-icon {
    color: var(--primary);
}

.btn-login {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    color: white;
    padding: 0.85rem 2rem;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
}

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

/* ---- Impersonation Banner ---- */
.impersonation-banner {
    position: fixed;
    top: var(--notice-h, 0);
    left: 0;
    right: 0;
    height: 42px;
    z-index: 2000;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: white;
    font-size: 0.82rem;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

.impersonation-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 1.25rem;
    max-width: 100%;
}

.impersonation-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.impersonation-info i {
    font-size: 1rem;
}

/* #2729: Der Ausstieg aus einer Impersonation braucht eine Trefferflaeche,
   die man nicht verfehlt. Zuvor ueberschrieb ein Inline-Style im Markup
   Padding, Hintergrund und Rahmen — uebrig blieb ein rahmenloser Text von
   rund zwoelf Pixeln Hoehe. Der erste Klick ging regelmaessig daneben, der
   zweite traf: genau das Verhalten, das als "reagiert nicht" gemeldet wurde.
   44 Pixel sind das Mindestmass aus WCAG 2.5.5 (Target Size). */
.impersonation-exit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.5rem 1rem;
    min-height: 44px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.impersonation-exit-btn:hover {
    background: rgba(255,255,255,0.35);
    color: white;
    text-decoration: none;
}

body.impersonating {
    padding-top: calc(42px + var(--notice-h, 0px));
}

body.impersonating .sidebar {
    top: calc(42px + var(--notice-h, 0px));
    height: calc(100vh - 42px - var(--notice-h, 0px));
}

/* ---- App Layout ---- */
.app-wrapper {
    display: flex;
    min-height: 100vh;          /* Fallback */
    min-height: 100dvh;         /* iOS-Fix #938 */
}

/* ---- Sidebar ---- */
.sidebar {
    width: var(--sidebar-width);
    background: white;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--notice-h, 0);
    left: 0;
    bottom: 0;
    z-index: 1000;
    transition: transform 0.3s ease;
}

.sidebar-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.sidebar-header img {
    flex-shrink: 0;
}

.sidebar-header > div {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.sidebar-header .logo-sm {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-header .logo-sm i {
    color: white;
    font-size: 1.2rem;
}

.sidebar-header > div > div {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--gray-900);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sidebar-header h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.3px;
}

.sidebar-header small {
    color: var(--gray-400);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: 1rem 0.75rem;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 1.5rem;
}

.nav-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gray-400);
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--border-radius-sm);
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
    margin-bottom: 2px;
}

.nav-link:hover {
    background: var(--primary-50);
    color: var(--primary);
}

.nav-link.active {
    background: var(--primary-50);
    color: var(--primary);
    font-weight: 600;
}

.nav-link i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.nav-link .badge {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 0.2em 0.55em;
    border-radius: 20px;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--gray-100);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.user-menu:hover {
    background: var(--gray-100);
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-info .name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-info .role {
    font-size: 0.75rem;
    color: var(--text-muted); /* #1664: AA-Kontrast */
}

/* Sidebar-Footer Dropdown: über Sidebar-Inhalt, unter Modals */
.sidebar-footer-dropdown {
    border-radius: var(--border-radius-sm);
    z-index: 1050;
}

/* ---- Main Content ---- */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;          /* Fallback */
    min-height: 100dvh;         /* iOS-Fix #938 */
    min-width: 0;               /* #942: verhindert Flex-Item-Aufblähung durch breite Inhalte */
    /* #2936: Kein overflow-x:hidden mehr. Es hat den Ueberlauf aus #942 nicht
       behoben, sondern nur gekappt — der Nutzer sah fehlenden Inhalt statt
       eines Scrollbalkens, und jede Overflow-Messung meldete faelschlich „ok".
       Die Ursache (Grid-Gutter breiter als das Container-Padding) ist jetzt
       im Mobile-Block am Dateiende behoben, Regressionsschutz:
       tests/tools/responsive-audit.js */
}

/* Fusszeilen-Link „SL-Urlaubsplaners" (#2939: war 109x15 px ohne Trefferflaeche) */
.app-footer-copy {
    font-size: .78rem;
    opacity: .65;
}
/* Versionsnummer: vorher Inline-Stil in layout_footer.php (Welle 7, Werte unverändert) */
.app-footer-copy.app-footer-version {
    font-size: .75rem;
    opacity: .6;
}
.app-footer-inline-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (max-width: 991px) {
    .app-footer-inline-link {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }
}

/* Quelle-Link in der Firmenhistorie (#2940: war inline mit 0,72 rem) */
.dash-source-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--primary);
    text-decoration: none;
}
@media (max-width: 991px) {
    .dash-source-link {
        min-height: 44px;
        padding: .35rem 0;
    }
}

/* ---- Footer (#943: bessere Touch-Targets) ---- */
.app-footer {
    text-align: center;
    padding: .75rem 1rem;
    font-size: .72rem;
    color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}
.app-footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem .25rem;
}
.app-footer-link,
.app-footer-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-decoration: none;
    padding: .5rem .65rem;     /* Mobile-Touch-Target: 44px+ */
    border-radius: 6px;
    min-height: 36px;
    transition: background-color .15s, color .15s;
}
.app-footer-link:hover,
.app-footer-lang:hover {
    color: #475569;
    background: rgba(0,0,0,.03);
}
.app-footer-lang-active {
    color: #475569;
    font-weight: 600;
    cursor: default;
}
.app-footer-lang-active:hover {
    background: transparent;
}
.app-footer-langs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .15rem;
    margin-top: .35rem;
}
@media (max-width: 480px) {
    .app-footer-link,
    .app-footer-lang {
        min-width: 44px;
        min-height: 44px;
        padding: .65rem;
        font-size: .8rem;
    }
    /* Punkte verbrauchen auf schmalen Displays eine eigene Flex-Breite und
       schieben den dritten Rechtslink unnoetig in eine neue Zeile. Der Gap
       trennt die Links dort bereits eindeutig. */
    .app-footer-sep {
        display: none;
    }
}

/* ---- Header ---- */
.app-header {
    height: var(--header-height);
    background: white;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: var(--notice-h, 0);
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--gray-600);
    cursor: pointer;
    padding: 0.25rem;
    /* #1663: WCAG 2.5.5 — Touch-Target mind. 44x44px (zentrale Mobile-Navigation) */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

/* ---- Sidebar Collapse Toggle (Desktop) ---- */
.sidebar-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    min-width: 40px;
    min-height: 40px;
    border-radius: var(--border-radius-sm);
    transition: background 0.15s, color 0.15s;
}
.sidebar-collapse-toggle:hover {
    background: var(--gray-100);
    color: var(--primary);
}
/* Sauberer Fokus-Stil statt des default schwarzen Browser-Outlines */
.sidebar-collapse-toggle:focus { outline: none; }
.sidebar-collapse-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.sidebar-collapse-toggle i { transition: transform 0.3s ease; }
/* Eingeklappt: Pfeil dreht sich (zeigt nach rechts = ausklappen) */
html.sidebar-collapsed .sidebar-collapse-toggle i { transform: rotate(180deg); }
/* Auf Mobile ist der Collapse-Button irrelevant (dort gilt das Overlay-Pattern) */
@media (max-width: 991px) {
    .sidebar-collapse-toggle { display: none; }
}

/* ---- Eingeklappte Sidebar (nur Desktop ≥992px) ---- */
@media (min-width: 992px) {
    html.sidebar-collapsed .sidebar {
        width: var(--sidebar-width-collapsed);
    }
    html.sidebar-collapsed .main-content {
        margin-left: var(--sidebar-width-collapsed);
    }
    /* Texte & Sektionstitel ausblenden, nur Icons zeigen */
    html.sidebar-collapsed .sidebar .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        position: relative;
    }
    html.sidebar-collapsed .sidebar .nav-link-text,
    html.sidebar-collapsed .sidebar .nav-section-title,
    html.sidebar-collapsed .sidebar-header > div,
    html.sidebar-collapsed .sidebar .nav-more-toggle-text,
    html.sidebar-collapsed .sidebar-footer .user-info,
    html.sidebar-collapsed .sidebar-footer .user-menu > i.bi-three-dots-vertical {
        display: none !important;
    }
    html.sidebar-collapsed .sidebar-footer .user-menu {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    /* Reiner Textinhalt von nav-links (kein span) ausblenden via font-size:0 */
    html.sidebar-collapsed .sidebar .nav-link {
        font-size: 0;            /* versteckt direkten Text */
        gap: 0;
    }
    html.sidebar-collapsed .sidebar .nav-link i {
        font-size: 1.15rem;      /* Icon wieder sichtbar */
        margin: 0;
    }
    /* Badge (z.B. offene Genehmigungen) als kleiner Punkt oben rechts am Icon */
    html.sidebar-collapsed .sidebar .nav-link .badge {
        position: absolute;
        top: 4px;
        right: 12px;
        width: 9px;
        min-width: 9px;
        height: 9px;
        padding: 0;
        font-size: 0 !important;
        border-radius: 50%;
        line-height: 0;
        background-color: var(--danger, #dc2626) !important;
        color: transparent !important;
        overflow: hidden;
    }
    html.sidebar-collapsed .sidebar-header {
        padding: 1rem 0.5rem;
    }
    html.sidebar-collapsed .sidebar-header img {
        max-width: 44px;
        height: auto;
    }
    /* "Mehr"-Toggle (#896) ergibt in der Icon-Leiste keinen Sinn → ausblenden,
       sekundäre Items immer als Icons zeigen. */
    html.sidebar-collapsed #navMoreToggle { display: none !important; }
    html.sidebar-collapsed #navMoreItems { display: block !important; }
    /* Eingeklappt = reine Icon-Leiste: nichts darf seitlich überstehen, sonst
       erscheint ein waagerechter Balken. Die App-Hinweis-Badges (Android/iOS)
       sind dort unlesbar breit und werden ausgeblendet. */
    html.sidebar-collapsed .sidebar .slup-ios-badge { display: none !important; }
    html.sidebar-collapsed .sidebar-nav {
        overflow-x: hidden;
        scrollbar-width: none;           /* Scrollen per Rad/Touch bleibt, kein Balken */
    }
    html.sidebar-collapsed .sidebar-nav::-webkit-scrollbar { display: none; }
    /* Ausgeklappt: Scrollbalken nur dünn und erst beim Darüberfahren sichtbar,
       statt eines dauerhaften grauen Balkens neben dem Menü. */
    .sidebar-nav {
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }
    .sidebar-nav:hover,
    .sidebar-nav:focus-within {
        scrollbar-color: var(--gray-300, #d1d5db) transparent;
    }
    .sidebar-nav::-webkit-scrollbar { width: 6px; }
    .sidebar-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
    .sidebar-nav:hover::-webkit-scrollbar-thumb,
    .sidebar-nav:focus-within::-webkit-scrollbar-thumb { background: var(--gray-300, #d1d5db); }
    html.sidebar-collapsed .sidebar-nav:hover { scrollbar-color: transparent transparent; }
    /* Abschnittstitel fehlen: statt 24 px Leerraum eine ruhige Trennlinie. */
    html.sidebar-collapsed .sidebar .nav-section { margin-bottom: .5rem; }
    html.sidebar-collapsed .sidebar .nav-section + .nav-section {
        border-top: 1px solid var(--gray-200, #e5e7eb);
        padding-top: .5rem;
    }
    /* Touch-Ziel: Icon-Zeile füllt die Leiste (68 px − 2 × 12 px = 44 px). */
    html.sidebar-collapsed .sidebar .nav-link {
        min-width: 44px;
        margin-inline: 0;
    }
    /* Tooltip im eingeklappten Zustand: natives title-Attribut (per JS gesetzt),
       da ein CSS-::after-Tooltip vom overflow:auto der .sidebar-nav abgeschnitten würde. */
}

.page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: var(--border-radius-sm);
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.sidebar-nav button.nav-link {
    min-height: 40px;
}

.btn-close,
#iosChipClose,
#androidChipClose,
.app-footer-lang.btn,
.btn.btn-link.btn-sm {
    min-width: 32px;
    min-height: 32px;
}

#iosChipClose,
#androidChipClose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-btn:hover {
    background: var(--primary-50);
    color: var(--primary);
}

.header-btn .notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid white;
}

/* ---- Dashboard Content ---- */
.dashboard-content {
    padding: 1.5rem;
}

/* Stat Cards */
.stat-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.stat-card.vacation::after { background: var(--absence-vacation); }
.stat-card.sick::after { background: var(--absence-sick); }
.stat-card.pending::after { background: var(--warning); }
.stat-card.team::after { background: var(--primary); }

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.stat-card.vacation .stat-icon { background: #D1FAE5; color: var(--absence-vacation); }
.stat-card.sick .stat-icon { background: #FEE2E2; color: var(--absence-sick); }
.stat-card.pending .stat-icon { background: #FEF3C7; color: var(--warning); }
.stat-card.team .stat-icon { background: #DBEAFE; color: var(--primary); }

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
}

.stat-card .stat-detail {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Content Cards */
.content-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.content-card .card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
}

.content-card .card-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-card .card-body {
    padding: 1.25rem 1.5rem;
}

/* Quick Actions */
.quick-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--border-radius-sm);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 0.5rem;
}

.quick-action:hover {
    background: var(--primary-50);
    border-color: var(--primary-100);
    transform: translateX(4px);
}

.quick-action .action-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.quick-action:nth-child(1) .action-icon { background: #D1FAE5; color: var(--success); }
.quick-action:nth-child(2) .action-icon { background: #FEE2E2; color: var(--danger); }
.quick-action:nth-child(3) .action-icon { background: #DBEAFE; color: var(--info); }
.quick-action:nth-child(4) .action-icon { background: #FEF3C7; color: var(--warning); }

.quick-action .action-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
}

/* Abwesenheitsliste */
.absence-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.absence-item:last-child { border-bottom: none; }

.absence-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.absence-details {
    flex: 1;
    min-width: 0;
}

.absence-details .name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-800);
}

.absence-details .type {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.absence-badge {
    padding: 0.2em 0.6em;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.absence-badge.vacation { background: #D1FAE5; color: #059669; }
.absence-badge.sick { background: #FEE2E2; color: #DC2626; }
.absence-badge.homeoffice { background: #DBEAFE; color: #2563EB; }
.absence-badge.travel { background: #FEF3C7; color: #D97706; }

/* Mini Kalender */
.mini-calendar {
    width: 100%;
}

.mini-calendar .cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.mini-calendar .cal-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800);
}

.mini-calendar .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.mini-calendar .cal-day-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    padding: 0.25rem;
}

.mini-calendar .cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
    color: var(--gray-700);
}

.mini-calendar .cal-day:hover { background: var(--gray-100); }
.mini-calendar .cal-day.today { background: var(--primary); color: white; font-weight: 700; }
.mini-calendar .cal-day.weekend { color: var(--gray-400); }
.mini-calendar .cal-day.holiday { color: var(--danger); font-weight: 600; }
.mini-calendar .cal-day.has-absence { position: relative; }
.mini-calendar .cal-day.has-absence::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--success);
}
.mini-calendar .cal-day.other-month { color: var(--gray-300); }

/* ---- Jahreskalender-Tabelle ---- */
.calendar-table {
    font-size: 0.72rem;
    border-collapse: collapse;
}

.calendar-table th,
.calendar-table td {
    text-align: center;
    vertical-align: middle;
    padding: 0;
    border: 1px solid var(--gray-200);
}

.cal-name-col {
    text-align: left !important;
    white-space: nowrap;
    padding: 0.25rem 0.5rem !important;
    font-weight: 500;
    font-size: 0.78rem;
    min-width: 140px;
    background: white;
}

.cal-day-col {
    width: 28px;
    min-width: 28px;
    padding: 0.2rem !important;
}

.cal-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.cal-dow {
    font-size: 0.6rem;
    color: var(--gray-400);
    font-weight: 500;
}

.cal-dom {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--gray-700);
}

.cal-weekend {
    background: var(--gray-100) !important;
}

.cal-weekend .cal-dom,
.cal-weekend .cal-dow {
    color: var(--gray-400);
}

.cal-holiday {
    background: #ffebee !important;
}

.cal-holiday .cal-dom {
    color: var(--danger);
}

.cal-today {
    background: var(--primary-100) !important;
}

.cal-today .cal-dom {
    color: var(--primary);
    font-weight: 800;
}

.cal-cell {
    width: 28px;
    height: 26px;
    padding: 0 !important;
    position: relative;
    cursor: default;
    transition: opacity 0.15s ease;
}

.cal-cell-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: white;
    font-weight: 700;
    font-size: 0.6rem;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.cal-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.55rem;
    flex-shrink: 0;
}

.cal-emp-name {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.dept-separator td {
    border-left: none !important;
    border-right: none !important;
}

/* ---- Status Badges ---- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.25em 0.65em;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-approved {
    background: var(--success-light);
    color: #059669;
}

.status-pending {
    background: var(--warning-light);
    color: #D97706;
}

.status-rejected {
    background: var(--danger-light);
    color: #DC2626;
}

.status-cancelled {
    background: var(--gray-100);
    color: var(--gray-500);
}

/* ---- Kalender Scroll-Indikation (Mobile) ---- */
.cal-scroll-wrapper {
    position: relative;
}
.cal-scroll-wrapper .table-responsive {
    position: relative;
}
.cal-scroll-hint {
    display: none;
}
@media (max-width: 768px) {
    .cal-scroll-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.06));
        pointer-events: none;
        z-index: 3;
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
        transition: opacity 0.3s;
    }
    .cal-scroll-wrapper.scrolled-end::after {
        opacity: 0;
    }
    .cal-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.35rem 0.75rem;
        font-size: 0.72rem;
        color: var(--gray-400);
        background: var(--gray-50);
        border-radius: 20px;
        margin: 0.35rem auto 0;
        width: fit-content;
    }
    .cal-scroll-hint i {
        font-size: 0.85rem;
    }
}

/* ---- Responsive Kalender ---- */
@media (max-width: 991px) {
    .cal-name-col {
        min-width: 100px !important;
    }
    .cal-emp-name {
        max-width: 70px;
    }
}

@media (max-width: 575px) {
    .cal-name-col {
        min-width: 80px !important;
        font-size: 0.72rem !important;
        padding: 0.2rem 0.35rem !important;
    }
    .cal-emp-name {
        max-width: 55px;
        font-size: 0.7rem;
    }
    .cal-avatar {
        width: 20px;
        height: 20px;
        font-size: 0.6rem;
        border-radius: 4px;
    }
    .cal-day-col {
        width: clamp(28px, 5vw, 36px);
        min-width: clamp(28px, 5vw, 36px);
    }
    .cal-cell {
        width: clamp(28px, 5vw, 36px);
        height: 22px;
    }
    .cal-cell-text {
        font-size: clamp(0.65rem, 2vw, 0.85rem);
    }
    .cal-dom {
        font-size: clamp(0.65rem, 2vw, 0.85rem);
    }
    .cal-dow {
        font-size: clamp(0.6rem, 1.8vw, 0.75rem);
    }
    .calendar-table {
        font-size: clamp(0.65rem, 2vw, 0.85rem);
    }
    /* Tooltip auf Mobile nicht anzeigen (Touch hat kein Hover) */
    #blackoutTooltip {
        display: none !important;
    }
    /* Toast zentriert auf Mobile */
    #blackoutToast {
        bottom: 4rem;
        max-width: calc(100% - 1rem);
        font-size: 0.8rem;
    }
}

/* ---- Mobile Responsive ---- */
@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 999;
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.active { display: block; }

    .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: flex;
    }

    .dashboard-content {
        padding: 1rem;
    }

    /* Impersonation Banner mobile */
    .impersonation-banner {
        height: auto;
        min-height: 42px;
    }
    .impersonation-banner-inner {
        flex-wrap: wrap;
        gap: 0.35rem;
        padding: 0.4rem 0.75rem;
    }
    .impersonation-info {
        font-size: 0.75rem;
    }
    .impersonation-exit-btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.85rem;
        min-height: 44px;
    }
    body.impersonating .sidebar {
        top: var(--notice-h, 0);
        height: calc(100vh - var(--notice-h, 0px));
    }
}

@media (max-width: 575px) {
    .stat-card {
        padding: 1rem;
    }

    .stat-card .stat-value {
        font-size: 1.4rem;
    }

    .stat-card .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .page-title {
        font-size: 1.05rem;
    }

    .login-card {
        padding: 2rem 1.5rem;
    }

    /* Touch-Targets: mindestens 44px */
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .btn-xs {
        min-height: 44px;      /* #2939: war 38 px */
        min-width: 44px;
    }

    /* Inline-Buttons in Tabellen (#2939: Apple HIG fordert 44x44 pt, nicht 40) */
    td .btn-sm, th .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 0.35rem 0.6rem;
    }

    /* Modals fast-fullscreen auf Mobile */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 1rem);
    }

    .modal-body {
        padding: 1rem;
    }

    /* Nav-Tabs horizontal scrollbar auf Mobile */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        padding-bottom: 2px;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-item { white-space: nowrap; flex-shrink: 0; }
    .nav-tabs .nav-link { padding: 0.5rem 0.85rem; font-size: 0.82rem; }

    /* Scroll-Hinweis für Tabs */
    .nav-tabs::after {
        content: '';
        display: block;
        min-width: 1px;
        flex-shrink: 0;
    }

    /* Kalender-Legende besser lesbar */
    .content-card .card-body .d-flex.flex-wrap.gap-3 {
        font-size: 0.82rem;
    }

    /* Content Cards: weniger Padding */
    .content-card .card-header {
        padding: 1rem;
    }
    .content-card .card-body {
        padding: 1rem;
    }

    /* Tabellen: kleinere Schrift + kompakter */
    .table {
        font-size: 0.8rem;
    }
    .table th, .table td {
        padding: 0.5rem 0.65rem;
    }

    /* Flex-Container mit vielen Items wrappen */
    .d-flex.gap-2:not(.flex-nowrap),
    .d-flex.gap-3:not(.flex-nowrap) {
        flex-wrap: wrap;
    }

    /* Badge-Reihen auf Mobile wrappen */
    .d-flex.flex-wrap.gap-2 .badge {
        font-size: 0.75rem;
    }

    /* Alert-Banner kompakter */
    .alert {
        padding: 0.85rem 1rem;
        font-size: 0.85rem;
    }
    .alert .flex-grow-1 div:first-child {
        font-size: 0.88rem;
    }

    /* Header: kompakter */
    .app-header {
        padding: 0 1rem;
        height: 56px;
    }

    /* Dashboard Content: weniger Padding */
    .dashboard-content {
        padding: 0.75rem;
    }

    /* Absence-Items: kompakter */
    .absence-item {
        padding: 0.65rem 0;
        gap: 0.5rem;
    }
    .absence-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    /* Quick-Actions: Touch-optimiert */
    .quick-action {
        padding: 0.75rem;
        min-height: 48px;
    }

    /* Form-Controls: größere Touch-Targets */
    .form-control, .form-select {
        min-height: 44px;
        font-size: 16px; /* verhindert iOS Zoom */
    }
    .form-control-sm, .form-select-sm {
        min-height: 44px;      /* #2939: war 40 px */
        font-size: 16px;
    }

    /* Dropdown-Items: Touch-tauglich */
    .dropdown-item {
        padding: 0.6rem 1rem;
    }
}

/* Extra-Small: unter 380px (iPhone SE, kleine Android) */
@media (max-width: 380px) {
    .stat-card .stat-value {
        font-size: 1.2rem;
    }
    .stat-card .stat-label {
        font-size: 0.75rem;
    }
    .stat-card .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    .page-title {
        font-size: 0.95rem;
    }
    .dashboard-content {
        padding: 0.5rem;
    }
    .row.g-3 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
}

/* ---- Dashboard Alert-Banner ---- */
.dash-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: none;
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    color: #fff;
    flex-wrap: wrap;
}
/* Feste Basis statt max-content: sonst bricht der Textblock unter das Icon um,
   statt dass der Button in die naechste Zeile rutscht. */
.dash-alert > .flex-grow-1 {
    flex: 1 1 160px;
    min-width: 0;
}
.dash-alert .dash-alert-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-alert .dash-alert-icon i {
    font-size: 1.4rem;
}
.dash-alert .dash-alert-title {
    font-weight: 700;
    font-size: 0.95rem;
}
.dash-alert .dash-alert-sub {
    font-size: 0.82rem;
    opacity: 0.8;
    margin-top: 0.15rem;
}
.dash-alert .dash-alert-btn {
    border-radius: 50px;
    white-space: nowrap;
    color: #fff;
    flex-shrink: 0;
}
/* Varianten */
.dash-alert-clockin {
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    box-shadow: 0 4px 15px rgba(8,145,178,0.25);
}
.dash-alert-clockin .dash-alert-icon { background: rgba(8,145,178,0.3); }
.dash-alert-clockin .dash-alert-icon i { color: #67e8f9; }
.dash-alert-clockin .dash-alert-btn { background: rgba(8,145,178,0.4); border: 1px solid rgba(8,145,178,0.5); }

.dash-alert-clocked {
    background: linear-gradient(135deg, #064e3b, #065f46);
}
.dash-alert-clocked .dash-alert-icon { background: rgba(16,185,129,0.25); }
.dash-alert-clocked .dash-alert-icon i { color: #6ee7b7; }
.dash-alert-clocked .dash-alert-btn { background: rgba(16,185,129,0.3); border: 1px solid rgba(16,185,129,0.4); }

.dash-alert-substitute {
    background: linear-gradient(135deg, #4c1d95, #6d28d9);
}
.dash-alert-substitute .dash-alert-icon { background: rgba(167,139,250,0.25); }
.dash-alert-substitute .dash-alert-icon i { color: #c4b5fd; }
.dash-alert-substitute .dash-alert-btn { background: rgba(167,139,250,0.3); border: 1px solid rgba(167,139,250,0.4); }

.dash-alert-expiry-warn {
    background: linear-gradient(135deg, #92400e, #b45309);
    box-shadow: 0 4px 15px rgba(180,83,9,0.25);
}
.dash-alert-expiry-warn .dash-alert-icon { background: rgba(251,191,36,0.25); }
.dash-alert-expiry-warn .dash-alert-icon i { color: #fde68a; }
.dash-alert-expiry-warn .dash-alert-btn { background: rgba(251,191,36,0.3); border: 1px solid rgba(251,191,36,0.4); }

.dash-alert-expiry-expired {
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
}
.dash-alert-expiry-expired .dash-alert-icon { background: rgba(248,113,113,0.25); }
.dash-alert-expiry-expired .dash-alert-icon i { color: #fca5a5; }

/* ---- Animationen ---- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn 0.4s ease-out; }
.fade-in-up { animation: fadeInUp 0.5s ease-out; }

.delay-1 { animation-delay: 0.1s; animation-fill-mode: both; }
.delay-2 { animation-delay: 0.2s; animation-fill-mode: both; }
.delay-3 { animation-delay: 0.3s; animation-fill-mode: both; }
.delay-4 { animation-delay: 0.4s; animation-fill-mode: both; }

/* ---- Urlaubsbalken ---- */
.vacation-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.vacation-bar .bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--success), var(--accent));
    transition: width 1s ease-out;
}

/* Zustaende des Urlaubsbalkens — dieselben Schwellen wie die Spalte
   "Urlaub verbraucht" in den Reports (70 % / 90 % / ueber 100 %).
   Ohne sie sah ein aufgebrauchter Anspruch genauso aus wie ein halb
   verbrauchter, nur laenger. */
.vacation-bar .bar-fill.is-warn {
    background: linear-gradient(90deg, var(--success), var(--warning));
}

.vacation-bar .bar-fill.is-critical {
    background: linear-gradient(90deg, var(--warning), var(--danger));
}

/* Ueberzogen: der Balken steht auf 100 %, die Schraffur macht sichtbar,
   dass hier mehr genommen wurde als zustand. */
.vacation-bar .bar-fill.is-over {
    background: repeating-linear-gradient(
        45deg,
        var(--danger) 0,
        var(--danger) 6px,
        #b91c1c 6px,
        #b91c1c 12px
    );
}

/* Wer Bewegung reduziert haben moechte, bekommt den Balken ohne Animation. */
@media (prefers-reduced-motion: reduce) {
    .vacation-bar .bar-fill {
        transition: none;
    }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ═══════════════════════════════════════════════
   ONBOARDING WIZARD
═══════════════════════════════════════════════ */
.onboarding-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    z-index: 1040;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(37,99,235,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.onboarding-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37,99,235,0.55);
}
.onboarding-fab.pulse {
    animation: onboardingPulse 2s ease-in-out infinite;
}
.onboarding-fab.fly-to-menu {
    animation: obFlyToMenu 0.55s cubic-bezier(0.68,-0.55,0.27,1.55) forwards;
}

@keyframes onboardingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.65); }
    60%       { box-shadow: 0 0 0 16px rgba(37,99,235,0); }
}
@keyframes obFlyToMenu {
    0%   { transform: scale(1) translate(0,0); opacity:1; }
    100% { transform: scale(0.12) translate(-820px,180px); opacity:0; }
}

/* Wizard Steps */
.ob-step { display: none; }
.ob-step.active { display: block; animation: fadeInUp 0.35s ease-out; }

/* Sidebar Tour-Link Einblend-Animation */
.ob-sidebar-tour { transition: opacity 0.3s; }
.ob-sidebar-appear { animation: fadeIn 0.4s ease-out; }

/* ========== Accessibility ========== */

/* Skip-Navigation */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary, #0d6efd);
    color: #fff;
    padding: .75rem 1.5rem;
    z-index: 10000;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top .2s;
}
.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 2px solid var(--primary-dark);
}

/* Focus-Styles */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

@media print {
    #sidebar,
    .sidebar,
    nav.sidebar,
    .sidebar-overlay,
    .mobile-bottom-nav,
    .mobile-topbar,
    .app-header,
    .header-right,
    .d-print-none {
        display: none !important;
        visibility: hidden !important;
    }

    .main-content,
    .content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================
   Skeleton Loading States
   ============================================= */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text-sm { height: 10px; margin-bottom: 6px; width: 60%; }
.skeleton-card { height: 80px; margin-bottom: 12px; border-radius: 8px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
}

.spinner-inline {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e0e0e0;
    border-top-color: var(--primary, #0d6efd);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}
.btn-loading .btn-text { visibility: hidden; }
.btn-loading .btn-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Help icon + iOS nav badge (extracted from layout_header.php) */
.help-icon{cursor:pointer;color:var(--gray-400);font-size:.85em;margin-left:.35rem;transition:color .15s;vertical-align:middle;}
.help-icon:hover{color:var(--primary);}
@keyframes _ios-shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
.slup-ios-nav-link{color:var(--gray-600)!important;}
.slup-ios-nav-link:hover{background:transparent!important;}
.slup-ios-nav-inner{display:flex;align-items:center;gap:.5rem;width:100%;}
.slup-ios-badge{
    margin-left:auto;font-size:.62rem;font-weight:700;letter-spacing:.02em;
    padding:.18rem .45rem;border-radius:999px;
    background:linear-gradient(105deg,#fff9d6 0%,#ffe566 25%,#ffd700 50%,#ffe566 75%,#fff9d6 100%);
    background-size:200% auto;
    animation:_ios-shimmer 2.8s linear infinite;
    color:#7a5500;border:1px solid rgba(212,175,55,.5);
    box-shadow:0 1px 4px rgba(212,175,55,.25);
    white-space:nowrap;flex-shrink:0;
}
.sidebar.collapsed .slup-ios-badge{display:none;}
.sidebar.collapsed .slup-ios-nav-inner{justify-content:center;}

/* Feature-Gate Block (includes/feature_gate.php) */
.feature-gate-card{background:var(--card-bg,#fff);border-radius:1.25rem;padding:2.5rem 2rem;text-align:center;box-shadow:0 4px 24px rgba(0,0,0,.08);}
.feature-gate-icon{width:72px;height:72px;background:#f1f5f9;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;}
.feature-gate-title{font-size:1.35rem;font-weight:800;margin-bottom:.5rem;}
.feature-gate-text{color:#64748b;font-size:.9rem;line-height:1.6;margin-bottom:1.5rem;}
.feature-gate-back{display:block;margin-top:.75rem;color:#94a3b8;font-size:.85rem;text-decoration:none;}

/* Session-Timeout-Warnung */
.slup-session-warning{display:none;position:fixed;inset:0;z-index:1100;background:rgba(15,23,42,.58);align-items:center;justify-content:center;padding:1rem;}
.slup-session-warning.is-visible{display:flex;}
.slup-session-warning-card{width:min(100%,30rem);max-width:30rem;background:var(--card-bg,#fff);color:var(--text-color,#0f172a);border-radius:1rem;padding:1.5rem;box-shadow:0 1rem 3rem rgba(15,23,42,.25);}
.slup-session-warning-card h2{font-size:1.25rem;margin:0 0 .65rem;font-weight:700;}
.slup-session-warning-card p{margin:.35rem 0;color:var(--gray-600,#475569);}
.slup-session-warning-card strong{color:var(--primary,#2563eb);}
.slup-session-warning-hint{margin-bottom:1.25rem!important;}
.slup-session-warning-actions{display:flex;gap:.75rem;flex-wrap:wrap;}

@media (max-width: 576px) {
    .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
    .modal-body { padding: .75rem; max-height: 70vh; overflow-y: auto; }
    .modal-header { padding: .75rem; }
    .modal-footer { padding: .5rem .75rem; }
}

/* ============================================================================
   Mobile-Optimierung Kundenportal — Milestone 98 (Issues #2935–#2946)
   ----------------------------------------------------------------------------
   Gilt unter 992 px (Telefone und kleine Tablets). Desktop bleibt unberuehrt.
   Dieser Block steht bewusst am Dateiende: er korrigiert Regeln, die weiter
   oben stehen, und gewinnt daher ueber die Kaskade statt ueber !important.
   ============================================================================ */
@media (max-width: 991px) {

    /* ---- #2936 Grid-Gutter nie breiter als das Container-Padding ----
       Bootstrap zieht die .row mit negativen Margins (Gutter/2) nach aussen.
       Ist das Padding von .dashboard-content kleiner, ragt jede Zeile heraus:
       bei 375 px waren es 383 px Zeilenbreite, also je 4 px links und rechts,
       die unter dem alten overflow-x:hidden lautlos verschwunden sind.
       Deshalb wird der Gutter hier an das jeweilige Padding gekoppelt. */
    .dashboard-content {
        padding: 1rem;                          /* 16 px */
    }
    .dashboard-content > .row,
    .dashboard-content > form > .row {
        --bs-gutter-x: 2rem;                    /* Haelfte = 16 px = Padding */
    }

    /* ---- #2939 Touch-Targets: alles Klickbare mindestens 44x44 px ----
       Apple HIG 44x44 pt, WCAG 2.5.8 mindestens 24x24 px. Betroffen waren
       u. a. der Sprachumschalter im Footer (32x32, auf jeder Seite),
       Icon-Buttons in Listen und die Links in der Fusszeile. */
    .btn,
    .header-btn,
    .action-btn,
    .app-footer-link,
    .app-footer-lang,
    .dropdown-item,
    .btn-close,
    #iosChipClose,
    #androidChipClose,
    #iosAppChip,
    #androidAppChip {
        min-height: 44px;
    }
    .header-btn,
    .action-btn,
    .btn-close,
    #iosChipClose,
    #androidChipClose,
    .app-footer-lang,
    .st-icon-button {
        min-width: 44px;
    }
    /* Die Regel „.btn-close, #iosChipClose, .app-footer-lang.btn, .btn.btn-link.btn-sm
       { min-height: 32px }" weiter oben ist spezifischer als die 480-px-Regel und
       hat deren 44 px ueberstimmt — hier mit gleicher Spezifitaet zurueckgeholt. */
    .app-footer-lang.btn,
    .btn.btn-link.btn-sm {
        min-width: 44px;
        min-height: 44px;
    }
    .btn-sm,
    .btn-group-sm > .btn {
        padding-block: .55rem;
    }
    /* Icon-Buttons ohne Text sind zwar 44 px hoch, aber nur 32–40 px breit */
    .btn,
    .nav-link,
    select,
    .form-select,
    .form-control,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
        min-height: 44px;
    }
    .btn {
        min-width: 44px;
    }
    /* ---- #2936 Kopfzeile: langer Seitentitel darf .header-right nicht
       aus dem Bild schieben (bei 320 px endete sie bei 352 px). ---- */
    .header-left {
        min-width: 0;
        flex: 1 1 auto;
    }
    .page-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .header-right {
        flex: 0 0 auto;
    }

    /* ---- #2936/#2943 Kartenkoepfe und Aktionsleisten duerfen umbrechen ----
       Ein langer Titel („Unternehmens-Organigramm") schob sonst das Badge oder
       den Button daneben aus dem Bild. */
    .content-card .card-header,
    .card .card-header {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .content-card .card-header > *,
    .card .card-header > *,
    .content-card .card-header h3 {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Nav-Eintraege und aufklappbare Kartenkoepfe lagen bei 43 px */
    .sidebar-nav button.nav-link,
    .sidebar-nav a.nav-link,
    .card-header[data-bs-toggle],
    .card-header[role="button"] {
        min-height: 44px;
    }
    /* Spezifischere Altregeln nachziehen (td .btn-sm hat 0,1,1) */
    td .btn, th .btn,
    td .btn-sm, th .btn-sm,
    .table .btn, .table .btn-sm {
        min-height: 44px;
        min-width: 44px;
    }
    /* Ausnahmen: Raster mit vielen Zellen wuerden durch 44 px unbrauchbar */
    .cal-grid .btn,
    .cal-table .btn,
    table.cal-table .btn,
    .mob-cal-day,
    .pagination .page-link {
        min-height: 0;
        min-width: 0;
    }
    /* Reine Icon-Hinweise, die als Button ausgezeichnet sind, brauchen eine
       Trefferflaeche — nicht nur ein 16x20-px-Glyph. */
    .help-icon,
    [role="button"].bi,
    i.bi[role="button"],
    .bi-question-circle-fill[data-bs-toggle],
    .bi-question-circle-fill[title] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: -12px -10px;      /* Trefferflaeche waechst, Optik bleibt */
        vertical-align: middle;
    }
    /* Destruktive Aktionen brauchen Abstand zu ihren Nachbarn */
    .action-btn.delete,
    .btn-outline-danger,
    .btn-danger {
        margin-left: .35rem;
    }

    /* ---- #2940 Schrift: nichts unter 12 px, Formularfelder 16 px ----
       Unter 16 px zoomt Safari auf iOS beim Fokus automatisch in die Seite
       hinein und wieder heraus — die Hauptursache fuer „alles verrutscht". */
    .main-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .main-content select,
    .main-content textarea,
    .main-content .form-control,
    .main-content .form-select,
    .main-content .form-control-sm,
    .main-content .form-select-sm {
        font-size: 16px;            /* Pflicht gegen den iOS-Auto-Zoom */
        min-height: 44px;
    }
    .nav-section-title {
        font-size: .75rem;          /* war 11,2 px, auf jeder Seite 5x */
    }
    .app-footer,
    .app-footer-copy {
        font-size: .78rem;
    }
    .main-content .badge,
    .sidebar .badge {
        font-size: .75rem;         /* schlaegt .badge.bg-primary (10,4 px) */
    }
    .slup-ios-badge,
    .rc-badge,
    .st-hour-label,
    .st-eyebrow,
    .mob-cal-emp-header,
    kbd,
    code {
        font-size: .75rem;
    }

    /* ---- #2942 Kacheln einer Zeile gleich hoch ---- */
    .report-card {
        height: 100%;
    }

    /* Leistungszeiten: Slot-Buttons waren 16 px hoch */
    .st-slot {
        min-height: 44px;
    }
}

@media (max-width: 575px) {
    /* ---- #2942 Report-Kacheln einspaltig ----
       Bei 159 px Spaltenbreite brechen „Abwesenheitsliste" und „Stunden-Saldo"
       an Silben und beruehren die Kartenkante. Einspaltig ist die Kachel
       horizontal aufgebaut und spart zusaetzlich Hoehe. */
    .report-card-grid > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .report-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: flex-start;
        gap: .85rem;
        text-align: left;
    }
    .report-card > i,
    .report-card .rc-icon {
        flex-shrink: 0;
        margin-bottom: 0;
        grid-row: 1 / span 2;
    }
    .report-card h5 {
        grid-column: 2;
        margin-bottom: .25rem;
    }
    .report-card p {
        grid-column: 2;
    }
    /* Ohne min-width:0 waechst der Textblock auf sein laengstes Wort */
    .report-card > div,
    .report-card > h5,
    .report-card > p {
        min-width: 0;
        overflow-wrap: break-word;
    }
    .report-card h5,
    .report-card h6 {
        hyphens: manual;
        overflow-wrap: break-word;
    }
}

@media (max-width: 575px) {
    /* #2936 Stufe 2: Padding 12 px, Gutter 24 px */
    .dashboard-content {
        padding: .75rem;
    }
    .dashboard-content > .row,
    .dashboard-content > form > .row {
        --bs-gutter-x: 1.5rem;
    }
}

@media (max-width: 380px) {
    /* #2936 Stufe 3: Padding 8 px, Gutter 16 px */
    .dashboard-content {
        padding: .5rem;
    }
    .dashboard-content > .row,
    .dashboard-content > form > .row {
        --bs-gutter-x: 1rem;
    }
}

/* ============================================================================
   #2935 Datentabellen als Karten auf Telefonen
   ----------------------------------------------------------------------------
   Aktiviert durch js/responsive-tables.js an <table data-mobile-cards> unter
   768 px. Jede Zeile wird zu einer Karte, jeder Wert traegt seine Beschriftung
   aus der Kopfzeile (data-label). Ohne JavaScript bleibt die Tabelle, wie sie
   war — die Darstellung ist eine Verbesserung, keine Voraussetzung.
   ============================================================================ */
@media (max-width: 767.98px) {
    table.is-card-view,
    table.is-card-view tbody,
    table.is-card-view tr,
    table.is-card-view td {
        display: block;
        width: auto;
    }
    table.is-card-view thead {
        /* display:block auf tr/td hebt die Tabellensemantik ohnehin auf; die
           Bedeutung jeder Zelle traegt jetzt ihr data-label. Ein nur optisch
           verstecktes thead wuerde dagegen weiter ueber den Rand ragen. */
        display: none;
    }
    table.is-card-view tr {
        background: var(--card-bg, #fff);
        border: 1px solid var(--gray-200);
        border-radius: var(--border-radius, 10px);
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
        margin-bottom: .75rem;
        padding: .35rem .85rem;
    }
    table.is-card-view tr:last-child {
        margin-bottom: 0;
    }
    table.is-card-view td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: .5rem 0;
        border: 0;
        border-bottom: 1px solid var(--gray-100);
        text-align: right;
        min-height: 44px;
        min-width: 0;
    }
    /* Namen und E-Mail-Adressen dürfen die Mitarbeiterkarte bei 320 px nicht
       auf ihre intrinsische Textbreite aufziehen. */
    .employees-table.is-card-view td:first-child > .d-flex,
    .employees-table.is-card-view td:first-child > .d-flex > div:last-child,
    .employees-table.is-card-view td:first-child .text-muted {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    table.is-card-view td:last-child {
        border-bottom: 0;
    }
    table.is-card-view td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-size: .8rem;
        font-weight: 600;
        color: var(--gray-500);
    }
    /* Zellen ohne Beschriftung (Aktionsspalte, Auswahlspalte) nehmen die
       volle Breite und richten ihren Inhalt linksbuendig aus. */
    table.is-card-view td:not([data-label]),
    table.is-card-view td[data-label=""] {
        justify-content: flex-start;
        text-align: left;
    }
    table.is-card-view td:not([data-label])::before,
    table.is-card-view td[data-label=""]::before {
        content: none;
    }
    /* Leere Zellen verschwenden auf einer Karte nur Platz — das gilt auch fuer
       Platzhalter wie „–", die js/responsive-tables.js markiert. */
    table.is-card-view td:empty,
    table.is-card-view td[data-empty="1"] {
        display: none;
    }
    /* Der Scroll-Container um die Tabelle wird nicht mehr gebraucht */
    .table-responsive:has(> table.is-card-view) {
        overflow-x: visible;
    }
    /* Aktionsbuttons in der Karte nebeneinander und gross genug */
    table.is-card-view td .btn,
    table.is-card-view td .action-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================================================
   #2937 Antragsformular: Auswahl der Abwesenheitsart
   ----------------------------------------------------------------------------
   Die Kacheln waren 34, 59 und 88 px hoch, weil das Schild-Icon
   („genehmigungspflichtig") bei knapper Spaltenbreite in eine eigene Zeile
   umbrach und lange Bezeichnungen den Text umbrachen. Das Schild sitzt jetzt
   absolut in der Ecke und nimmt am Textfluss nicht mehr teil.
   ============================================================================ */
.type-btn {
    position: relative;
    border-radius: var(--border-radius-sm);
    font-size: .85rem;
    min-height: 48px;
    text-align: left;
    padding-right: 1.9rem;        /* Platz fuer das Schild in der Ecke */
}
.type-btn-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.type-btn-name {
    min-width: 0;
    overflow-wrap: break-word;
}
.type-btn-approval {
    position: absolute;
    top: .4rem;
    right: .5rem;
    color: var(--warning);
    font-size: .8rem;
    line-height: 1;
}

/* Ausgewaehlter Typ in Markenfarbe statt im Grau von .btn-outline-secondary —
   grau liest sich in dieser Oberflaeche als „deaktiviert". */
.btn-check:checked + .type-btn,
.btn-check:checked + .btn.type-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
.btn-check:checked + .type-btn .type-btn-approval {
    color: #fff;
}
.btn-check:focus-visible + .type-btn {
    outline: 3px solid var(--primary-200, #bfdbfe);
    outline-offset: 2px;
}

/* Halbtags-Umschalter: ausgewaehltes Segment ebenfalls in Markenfarbe */
.btn-group .btn-check:checked + .btn.btn-outline-secondary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

@media (max-width: 575px) {
    /* Bei 159 px Spaltenbreite passt „Unbezahlter Urlaub" nicht umbruchfrei */
    .type-btn-grid > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Segmente gleich breit und einzeilig halten */
    .btn-group .btn.btn-sm {
        flex: 1 1 0;
        padding-inline: .35rem;
        white-space: nowrap;
    }
}

/* ============================================================================
   #2938 Seitennavigation auf Telefonen
   ----------------------------------------------------------------------------
   Gemessen waren 1210 px Inhalt in einem 600 px hohen Fenster: mehr als die
   Haelfte der Eintraege lag unter der Falz, ohne dass irgendetwas darauf
   hinwies. Zwei Massnahmen: die Liste wird kompakter, und an der Schnittkante
   zeigt ein Verlauf, dass es weitergeht (Klassen von js/mobile-nav.js).
   ============================================================================ */
@media (max-width: 991px) {
    .sidebar-nav {
        position: relative;
        padding-block: .5rem;
        /* Der Verlauf sitzt am Container, nicht an der Liste, damit er beim
           Scrollen stehen bleibt. */
        -webkit-mask-image: none;
        mask-image: none;
    }
    .sidebar-nav.has-more-below {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), rgba(0, 0, 0, .15) 100%);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), rgba(0, 0, 0, .15) 100%);
    }
    .sidebar-nav.has-more-above.has-more-below {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .15) 0, #000 20px, #000 calc(100% - 28px), rgba(0, 0, 0, .15) 100%);
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .15) 0, #000 20px, #000 calc(100% - 28px), rgba(0, 0, 0, .15) 100%);
    }
    .sidebar-nav.has-more-above:not(.has-more-below) {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .15) 0, #000 20px);
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .15) 0, #000 20px);
    }

    /* Kompakter: 18 Eintraege x 49 px plus 5 Abschnittsabstaende waren zu
       grosszuegig fuer ein Telefon. Die 44-px-Trefferflaeche bleibt. */
    .sidebar .nav-section {
        margin-bottom: .75rem;
    }
    .sidebar .nav-section-title {
        margin-bottom: .2rem;
    }
    .sidebar .nav-link {
        padding-block: .5rem;
        min-height: 44px;
    }
    /* Eine Abschnittsueberschrift darf nicht das letzte sichtbare Element
       sein — sie liest sich sonst als leerer Bereich. */
    .sidebar-nav {
        scroll-padding-bottom: 2.5rem;
    }
    .sidebar-nav > :last-child {
        padding-bottom: 1rem;
    }
}

/* ============================================================================
   #2941 Dashboard-Laenge auf Telefonen
   ----------------------------------------------------------------------------
   Das Dashboard war 3264 px hoch — vier Bildschirmlaengen, und das bei einem
   leeren Mandanten. Die Haelfte davon ging fuer leere Zustaende und fuer den
   Block „Heute in der Geschichte" (952 px) drauf.
   ============================================================================ */

/* Leerer Zustand: eine Zeile statt einer halben Bildschirmhoehe */
.dash-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.25rem 0;
    color: var(--gray-400);
}
.dash-empty i {
    font-size: 1.5rem;
    line-height: 1;
}

/* Karten, die auf Telefonen eingeklappt starten (js/mobile-ui.js,
   Opt-in ueber das Attribut data-mobile-collapse). */

@media (max-width: 991px) {
    .dash-empty {
        padding: .85rem 0;
    }
    .dash-empty i {
        font-size: 1.25rem;
    }
    /* Leere Zustaende in allen Karten kompakter */
    .content-card .card-body > .text-center.text-muted.py-3,
    .content-card .card-body > .text-center.text-muted.py-4 {
        padding-block: .85rem !important;
    }

    .content-card .card-header.is-collapsible {
        cursor: pointer;
        user-select: none;
    }
    .content-card .card-header.is-collapsible::after {
        content: '\f282';                  /* bi-chevron-down */
        font-family: 'bootstrap-icons';
        margin-left: auto;
        color: var(--gray-400);
        transition: transform .2s;
    }
    [data-mobile-collapse].is-collapsed .card-header.is-collapsible::after {
        transform: rotate(-90deg);
    }
    .content-card .card-header.is-collapsible:focus-visible {
        outline: 3px solid var(--primary-200, #bfdbfe);
        outline-offset: -3px;
    }

    /* Schnellaktionen: drei vollhohe Karten untereinander waren 414 px.
       Kompakte Zeilen sind schneller zu erfassen und sparen die Haelfte. */
    .quick-action {
        padding: .6rem .8rem;
        margin-bottom: .4rem;
        min-height: 44px;
    }
}

@media (max-width: 575px) {
    /* Vier Schnellaktionen bleiben sichtbar, brauchen aber nur zwei statt vier
       Zeilen. So bleibt der Kalender ohne zusätzlichen Scrollweg erreichbar. */
    .quick-action-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .quick-action {
        min-height: 58px;
        padding: .5rem;
    }
    .quick-action .action-icon {
        margin-bottom: .2rem;
    }
    .quick-action .action-text {
        font-size: .75rem;
        line-height: 1.2;
    }

    /* Dashboard-Karten behalten eine gut treffbare Kopfzeile, ohne den
       wiederkehrenden vertikalen Leerraum jeder Sektion zu vervielfachen. */
    .dashboard-content .content-card .card-header {
        padding-block: .9rem;
    }
}

/* #2941 Einrichtungs-Checkliste: Auf Telefonen brach der zweizeilige Titel um
   und der Schliessen-Knopf landete mitten im Textblock statt in der Ecke. */
#setupChecklistCard {
    position: relative;
}
@media (max-width: 991px) {
    #setupChecklistCard > .card-header {
        padding-right: 3rem;                 /* Platz fuer den Knopf in der Ecke */
    }
    #setupChecklistCard #hideChecklistBtn {
        position: absolute;
        top: .75rem;
        right: .75rem;
        margin: 0;
        z-index: 2;
    }
    #setupChecklistCard > .card-header h3 {
        flex: 1 1 100%;
    }
}

/* #2941 KPI-Kacheln: im 2x2-Raster waren die Karten unterschiedlich hoch,
   weil „Resturlaub" einen Fortschrittsbalken und eine Zusatzzeile traegt.
   Die farbigen Oberkanten sassen dadurch nicht auf einer Linie. */
.row > [class*="col-"] > .stat-card {
    height: 100%;
}

/* #2939/#2941 App-Store-Hinweis: der Schliessen-Knopf war ein grauer Kreis
   neben dem Chip und wirkte wie ein zweiter Knopf. Die Trefferflaeche bleibt
   44 px, optisch ist es wieder ein dezentes Kreuz. */
#iosChipClose,
#androidChipClose {
    background: transparent;
    border: 0;
    color: var(--gray-400);
    padding: 0;
}
#iosChipClose:hover,
#iosChipClose:focus-visible,
#androidChipClose:hover,
#androidChipClose:focus-visible {
    color: var(--gray-600);
    background: transparent;
}
#androidAppChip {
    color: inherit;
    text-decoration: none;
}

/* ============================================================================
   #2943 Aktionsleisten und Filter auf Telefonen
   ----------------------------------------------------------------------------
   Die Primaeraktion („Neuer Mitarbeiter") landete in der dritten Zeile und war
   optisch gleichrangig mit „Drucken"; die Filterleiste schob die eigentliche
   Liste 660 px nach unten.
   ============================================================================ */
.filterbar-toggle {
    display: none;
}

@media (max-width: 575px) {
    .page-actions {
        flex-wrap: wrap;
    }
    /* Primaeraktion zuerst und ueber die volle Breite */
    .page-actions > .btn-primary,
    .page-actions > a.btn-primary {
        order: -1;
        flex: 1 1 100%;
        justify-content: center;
    }
    /* Sekundaeraktionen teilen sich gleichmaessig eine Zeile */
    .page-actions > .btn:not(.btn-primary) {
        flex: 1 1 0;
        justify-content: center;
    }

    /* Filterleiste: einheitliche Feldbreite statt drei verschiedener */
    .list-filterbar > div {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .list-filterbar .btn {
        width: 100%;
    }

    .filterbar-toggle {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        min-height: 44px;
        width: calc(100% - 2rem);
        margin: 1rem;
        padding: 0 .9rem;
        border: 1px solid var(--gray-200);
        border-radius: var(--border-radius-sm);
        background: var(--gray-50);
        color: var(--gray-600);
        font-weight: 600;
        font-size: .9rem;
    }
    .filterbar-toggle.has-active {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-50);
    }
}

/* #2935: Der Zebrastreifen der Tabelle faerbte die ganze Karte grau und lief
   bis an ihre Kante — die Kartenoptik ging dabei verloren. */
@media (max-width: 767.98px) {
    table.is-card-view > tbody > tr,
    table.is-card-view > tbody > tr:hover,
    table.is-card-view > tbody > tr:nth-of-type(odd) > * {
        background: var(--card-bg, #fff);
        --bs-table-accent-bg: transparent;
        --bs-table-bg-type: transparent;
        box-shadow: none;
    }
    table.is-card-view > tbody > tr {
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    }
}

/* ============================================================================
   #2945 Einheitliche 403-Seite (includes/access_denied.php)
   ============================================================================ */
.access-denied-page {
    background: var(--gray-50);
}
.access-denied {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.access-denied-card {
    background: #fff;
    border-radius: var(--border-radius, 12px);
    box-shadow: 0 4px 24px rgba(15, 23, 42, .08);
    padding: 2.25rem 1.75rem;
    max-width: 30rem;
    width: 100%;
    text-align: center;
}
.access-denied-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1rem;
}
.access-denied-card h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: .75rem;
}
.access-denied-card p {
    color: var(--gray-600);
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.access-denied-back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.5rem;
}

/* Baustein "Kalender abonnieren" (includes/calendar_feed_subscribe.php) */
.cal-sub-qr { display: inline-block; padding: 8px; background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 8px; line-height: 0; }
.cal-sub-qr img, .cal-sub-qr canvas { width: 168px; height: 168px; }
.cal-sub input.form-control.cal-sub-url { background: #f8f9fa; } /* Welle 7: vorher Inline-Stil */
.cal-sub-steps { border: 1px solid var(--gray-200, #e5e7eb); border-radius: 8px; padding: .5rem .75rem; margin-bottom: .5rem; background: var(--card-bg, #fff); }
.cal-sub-steps > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.cal-sub-steps ol { margin: .25rem 0 .25rem; padding-left: 1.25rem; }
.cal-sub-steps li { margin-bottom: .3rem; }
.cal-sub-apple { min-height: 44px; }
@media (min-width: 768px) { .cal-sub-apple { width: auto !important; } }

/* Modul Profilfotos (#3536): runde Avatare, nur bei aktivem Modul gesetzt
   (includes/avatar.php). Ohne Modul bleibt die bisherige Darstellung. */
.slup-avatar-rund { border-radius: 50% !important; }
.slup-avatar-foto { padding: 0 !important; overflow: hidden; background: var(--gray-100, #f3f4f6) !important; }
.slup-avatar-foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ============================================================================
   Welle 7 (Dunkelmodus): ausgelagerte Inline-Stile – Werte unverändert,
   Gegenstücke für dunkel in css/sl-dunkel.css
   ============================================================================ */
/* Profil: Bundesland-Auswahl (app/profile.php) */
.profil-bundesland { background: #f0f7ff; border-left: 4px solid #2196f3; padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem !important; }
.profil-bundesland .form-label { color: #1565c0; margin-bottom: 0.5rem; }
.profil-bundesland .form-label .bi { margin-right: 0.4rem; }
#profileFederalState { border: 2px solid #2196f3; background: white; }
.profil-bundesland-hinweis { color: #666; font-weight: 500; }
.profil-bundesland-hinweis .bi { margin-right: 0.3rem; }
/* Einstellungen › Standort: nicht änderbares Land (app/general-settings.php) */
.form-control.feld-gesperrt { cursor: not-allowed; color: #6c757d; }
/* Neuer Antrag: Tagesvorschau (app/absence_new.php) */
#daysPreview { color: var(--primary); }
/* Team-Übersicht: Wochentag in „Abwesend diese Woche“ (modules/team_view/pages/team.php) */
strong.team-tag { font-size: 0.85rem; }
strong.team-tag-heute { color: var(--primary); }
/* Hinweis „Feature nicht aktiviert“ (includes/features.php upgradeHint()) */
.upgrade-hinweis { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: .875rem; padding: 1.25rem 1.5rem; text-align: center; margin: 1.5rem 0; }
.upgrade-hinweis-symbol { font-size: 1.5rem; margin-bottom: .5rem; }
.upgrade-hinweis-titel { font-weight: 700; font-size: 1rem; color: #374151; margin-bottom: .35rem; }
.upgrade-hinweis-text { color: #6b7280; font-size: .875rem; }
/* Neuer Antrag: Sperrzeit-Hinweis und Bestätigungsdialog (app/absence_new.php) */
.alert.antrag-sperre { border-radius: var(--border-radius-sm); border: none; }
.antrag-sperre-kopf { background: #f97316; padding: .6rem 1rem; display: flex; align-items: center; gap: .5rem; }
.antrag-sperre-kopf .bi { font-size: 1.1rem; color: #fff; }
.antrag-sperre-kopf strong { color: #fff; font-size: .95rem; }
.antrag-sperre-inhalt { padding: 1rem 1.1rem; background: #fff7ed; }
.antrag-sperre-titel { font-weight: 700; font-size: .95rem; color: #9a3412; margin-bottom: .35rem; }
.antrag-sperre-zeitraum { font-size: .85rem; color: #78350f; margin-bottom: .5rem; }
.antrag-sperre-notiz { background: #fef3c7; border-left: 3px solid #f59e0b; padding: .5rem .75rem; border-radius: .35rem; font-size: .85rem; color: #78350f; }
.antrag-sperre-hinweis { margin-top: .75rem; font-size: .82rem; color: #92400e; }
.antrag-bestaetigung-box { background: #f8fafc; border-radius: 8px; padding: 1rem; border-left: 4px solid #2563eb; }
.antrag-bestaetigung-label { color: #64748b; font-size: 0.8rem; }
.antrag-bestaetigung-wert { color: #1f2937; }
.antrag-bestaetigung-tage { color: #2563eb; font-size: 1.1rem; }
p.antrag-bestaetigung-hinweis { color: #64748b; font-size: 0.85rem; margin: 0; }
#confirmModal .modal-footer { padding: 1rem 1.75rem; border-top: 1px solid #e5e7eb; }
/* Meine Anträge (app/my_absences.php): Urlaubsverfall-Hinweis und Zusatzzeilen.
   !important ersetzt den Vorrang des früheren Inline-Stils (Kartenansicht setzt td-Abstände/-Flächen). */
.alert.urlaubsverfall-hinweis { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--border-radius); padding: 0.75rem 1rem; font-size: 0.85rem; }
.alert.urlaubsverfall-hinweis.ist-verfallen { background: #fef2f2; border-color: #fecaca; }
.urlaubsverfall-hinweis > .bi { margin-top: 0.1rem; }
.urlaubsverfall-hinweis a { color: #b45309; font-weight: 600; }
td.abwesenheit-zusatz { padding: 0.3rem 1rem !important; background: #f8fafc !important; font-size: 0.8rem !important; }
td.abwesenheit-zusatz.abwesenheit-zusatz-abgelehnt { background: #fff5f5 !important; }
/* Profil: Feed-Adresse, Passwortstärke, Wiederherstellungscodes (app/profile.php) */
#shiftFeedUrl { background: #f8f9fa; }
.pw-staerke { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.wiederherstellungscodes { background: #f8f9fa; border-radius: 0.5rem; padding: 0.75rem; }
.wiederherstellungscode { font-family: monospace; font-size: 1rem; padding: 0.25rem 0.5rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.3rem; display: inline-block; margin: 0.15rem; letter-spacing: 0.1em; }
/* Kalender-Abos: Datenschutz-Bestätigung (modules/calendar_subscription/pages/calendar-feeds.php) */
.form-check.feeds-bestaetigung { background: #fffbeb; border: 1px solid #fcd34d; border-radius: .5rem; }
/* DATEV-Karte im Export (modules/datev/views/export_karte.php) */
.datev-symbol { width: 56px; height: 56px; background: #eff6ff; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.datev-symbol .bi { font-size: 1.5rem; color: #2563eb; }
/* Kopf der Benachrichtigungen (includes/nav.php) und Fehlerbericht-Details (includes/layout_header.php) */
.benachrichtigungen-kopf { background: #f8f9fa; position: sticky; top: 0; z-index: 1; }
#bugConfirmDetails { background: #f8f9fa; padding: 1rem; border-radius: var(--border-radius-sm); margin-bottom: 1rem; }