/* ======================================================================
   PersonalPlaner 1.9.14 — Dark Mode Feinschliff
   Seitenspezifische Komponenten (Kalender, Jahresübersicht, Schichtplan,
   Arbeitsplan, Urlaub, Zeiterfassung, Berichte, Dashboard, Modals), die
   bisher mit hartcodierten hellen Farben im Dark Mode weiß blieben.
   Grundidee: halbtransparente Overlays statt fester Dunkelfarben, damit
   sich alles automatisch an die Kartenfarben aller drei Themes anpasst.
   ====================================================================== */

/* --- 1) Kalender: Monatsraster & Pro-Tabelle --------------------------- */
html.dark-mode body.app-body .calendar-table,
html.dark-mode body.app-body .calendar-pro-table {
    color: var(--pp-ink);
    background: transparent;
}
html.dark-mode body.app-body .calendar-table th,
html.dark-mode body.app-body .calendar-table td,
html.dark-mode body.app-body .calendar-pro-table th,
html.dark-mode body.app-body .calendar-pro-table td {
    color: var(--pp-ink) !important;
    border-color: var(--pp-line) !important;
    background: var(--pp-surface) !important;
}
html.dark-mode body.app-body .calendar-table thead th.employee-col,
html.dark-mode body.app-body .calendar-pro-table .employee-col {
    color: var(--pp-ink) !important;
    background: var(--pp-surface) !important;
}
html.dark-mode body.app-body .calendar-table .employee-col a { color: var(--pp-ink); }
html.dark-mode body.app-body .employee-col span,
html.dark-mode body.app-body .employee-col em,
html.dark-mode body.app-body .calendar-table th small { color: var(--pp-muted) !important; }
html.dark-mode body.app-body .calendar-pro-table .kw-row th {
    color: var(--pp-muted) !important;
    background: rgba(255, 255, 255, .04) !important;
}
html.dark-mode body.app-body .calendar-table td.weekend,
html.dark-mode body.app-body .calendar-table th.weekend,
html.dark-mode body.app-body .calendar-cell.weekend,
/* v2.2.2: Tage mit Eintrag ausnehmen - sonst überdeckt die breite
   Wochenendregel (Spezifität 0-2-1) die Eintragsfarben der Jahres-
   übersicht (.entry-vacation-cell, 0-1-0) und ein Urlaub am Sonnabend
   wurde grau statt blau dargestellt. */
html.dark-mode body.app-body .weekend:not([class*="entry-"]),
html.dark-mode body.app-body .calendar-pro-table th.weekend,
html.dark-mode body.app-body .calendar-pro-table td.weekend {
    background: rgba(255, 255, 255, .075) !important;
}
html.dark-mode body.app-body .calendar-pro-table th.school-holiday-header,
html.dark-mode body.app-body .calendar-pro-table td.school-holiday-cell {
    background: rgba(96, 165, 250, .17) !important;
}
html.dark-mode body.app-body .calendar-pro-table th.weekend.school-holiday-header,
html.dark-mode body.app-body .calendar-pro-table td.weekend.school-holiday-cell {
    background: rgba(96, 165, 250, .28) !important;
}
html.dark-mode body.app-body .calendar-pro-table th.holiday-header,
html.dark-mode body.app-body .calendar-pro-table td.holiday-cell {
    background: rgba(251, 146, 60, .20) !important;
}
html.dark-mode body.app-body .calendar-pro-table th.weekend.holiday-header,
html.dark-mode body.app-body .calendar-pro-table td.weekend.holiday-cell {
    background: rgba(251, 146, 60, .30) !important;
}
html.dark-mode body.app-body .calendar-table .today,
html.dark-mode body.app-body .today,
html.dark-mode body.app-body .calendar-pro-table th.today,
html.dark-mode body.app-body .calendar-pro-table td.today {
    background: rgba(59, 130, 246, .24) !important;
}
html.dark-mode body.app-body .calendar-table th.today {
    color: #ffd88a !important;
    background: rgba(245, 158, 11, .32) !important;
}
html.dark-mode body.app-body .calendar-table td.today.weekend {
    background: rgba(245, 158, 11, .22) !important;
}
html.dark-mode body.app-body .calendar-pro-table td.week-start,
html.dark-mode body.app-body .calendar-pro-table th.week-start { border-left-color: rgba(255, 255, 255, .22); }
html.dark-mode body.app-body .calendar-hint,
html.dark-mode body.app-body .calendar-headline p { color: var(--pp-muted); }

/* Eintragszellen (Frei/Krank/Schule/Urlaub/Dienstreise) */
html.dark-mode body.app-body .calendar-pro-table td.entry-vacation-cell { background: rgba(59, 130, 246, .26) !important; }
html.dark-mode body.app-body .calendar-pro-table td.entry-free-cell,
html.dark-mode body.app-body .entry-free-cell,
html.dark-mode body.app-body .single-day.entry-free-paint { background: rgba(250, 204, 21, .20) !important; }
html.dark-mode body.app-body .calendar-pro-table td.entry-sick-cell,
html.dark-mode body.app-body .entry-sick-cell,
html.dark-mode body.app-body .single-day.entry-sick-paint { background: rgba(248, 113, 113, .24) !important; }
html.dark-mode body.app-body .calendar-pro-table td.entry-training-cell,
html.dark-mode body.app-body .entry-training-cell,
html.dark-mode body.app-body .single-day.entry-training-paint { background: rgba(167, 139, 250, .26) !important; }
html.dark-mode body.app-body .calendar-pro-table td.entry-business-cell { background: rgba(34, 211, 238, .20) !important; }

/* Schraffuren: beantragt / eingestempelt / wartet auf Freigabe */
html.dark-mode body.app-body td.calendar-cell.pending-vacation,
html.dark-mode body.app-body .day-strip.pending-vacation,
html.dark-mode body.app-body .single-day.pending-vacation {
    background: repeating-linear-gradient(135deg,
        rgba(245, 158, 11, .30), rgba(245, 158, 11, .30) 7px,
        rgba(245, 158, 11, .10) 7px, rgba(245, 158, 11, .10) 14px) !important;
}
html.dark-mode body.app-body .pending-wish-free {
    background: repeating-linear-gradient(135deg,
        rgba(250, 204, 21, .28), rgba(250, 204, 21, .28) 7px,
        rgba(250, 204, 21, .10) 7px, rgba(250, 204, 21, .10) 14px) !important;
}
html.dark-mode body.app-body .pending-wish-free-badge,
html.dark-mode body.app-body .pending-wish-free-legend { color: #f2cf7d; }
html.dark-mode body.app-body .entry-wish-free { color: #f2d894; background: rgba(250, 204, 21, .24); }
html.dark-mode body.app-body .calendar-cell.entry-work-open-cell,
html.dark-mode body.app-body .day-strip.entry-work-open-cell,
html.dark-mode body.app-body .single-day.entry-work-open-cell {
    background: repeating-linear-gradient(135deg,
        rgba(250, 204, 21, .26), rgba(250, 204, 21, .26) 6px,
        rgba(250, 204, 21, .08) 6px, rgba(250, 204, 21, .08) 12px) !important;
}
html.dark-mode body.app-body .calendar-cell.entry-work-pending-cell,
html.dark-mode body.app-body .day-strip.entry-work-pending-cell,
html.dark-mode body.app-body .single-day.entry-work-pending-cell {
    background: repeating-linear-gradient(45deg,
        rgba(34, 197, 94, .28), rgba(34, 197, 94, .28) 6px,
        rgba(34, 197, 94, .10) 6px, rgba(34, 197, 94, .10) 12px) !important;
}

/* Legende & Pills */
html.dark-mode body.app-body .legend span:not(.legend-item),
html.dark-mode body.app-body .legend { color: var(--pp-muted); }
html.dark-mode body.app-body .holiday-pill { color: #f4c69a; background: rgba(251, 146, 60, .20); }
html.dark-mode body.app-body .school-pill { color: #bcd4f7; background: rgba(96, 165, 250, .20); }
html.dark-mode body.app-body .birthday-pill { color: #f0d894; background: rgba(250, 204, 21, .18); }
html.dark-mode body.app-body .legend-pill.planned-pill { color: #b7e4c3; border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .18); }
html.dark-mode body.app-body .legend-pill.work-open-pill { color: #eeda96; border-color: rgba(250, 204, 21, .5); background: rgba(250, 204, 21, .16); }
html.dark-mode body.app-body .legend-pill.work-pending-pill { color: #b7e4c3; border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .16); }
html.dark-mode body.app-body .legend-pill.pending-strip-pill,
html.dark-mode body.app-body .legend-pill.wish-strip-pill { color: #f2cf7d; border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .16); }
html.dark-mode body.app-body .staffing-ok { color: #b7e4c3; background: rgba(34, 197, 94, .20) !important; }
html.dark-mode body.app-body .staffing-warning { color: #eeda96; background: rgba(250, 204, 21, .18) !important; }
html.dark-mode body.app-body .staffing-danger { color: #f3b8b5; background: rgba(248, 113, 113, .22) !important; }
html.dark-mode body.app-body .birthday-note { color: #f0c882; }

/* --- 2) Jahresübersicht ------------------------------------------------ */
html.dark-mode body.app-body .single-month-card {
    border-color: var(--pp-line);
    background: var(--pp-surface);
}
html.dark-mode body.app-body .single-day.holiday-cell { background: rgba(251, 146, 60, .22); }
html.dark-mode body.app-body .single-weekday,
html.dark-mode body.app-body .year-month-title { color: var(--pp-muted); }
html.dark-mode body.app-body .day-strip { background: rgba(255, 255, 255, .08); }
html.dark-mode body.app-body .day-strip.school-holiday-cell { background: rgba(96, 165, 250, .22); }
html.dark-mode body.app-body .day-strip.holiday-cell { background: rgba(251, 146, 60, .28); }
html.dark-mode body.app-body .day-strip.weekend.school-holiday-cell { background: rgba(96, 165, 250, .36); }
html.dark-mode body.app-body .day-strip.weekend.holiday-cell { background: rgba(251, 146, 60, .40); }
html.dark-mode body.app-body .year-employee-row,
html.dark-mode body.app-body .year-employee-row .year-employee-info {
    color: var(--pp-ink) !important;
    background: var(--pp-surface) !important;
}
html.dark-mode body.app-body .year-employee-info span { color: var(--pp-ink) !important; }
html.dark-mode body.app-body .year-employee-info em { color: var(--pp-muted) !important; }
html.dark-mode body.app-body .year-table-header { color: var(--pp-ink); background: rgba(255, 255, 255, .05); }
html.dark-mode body.app-body .year-table-header .year-employee-title {
    color: var(--pp-ink) !important;
    background: #293437 !important;
    box-shadow: 8px 0 10px -8px rgba(0, 0, 0, .55);
}
html.dark-mode body.app-body .kennzahlen-leiste { border-color: var(--pp-line); background: rgba(255, 255, 255, .04); }
html.dark-mode body.app-body .kz-primary { background: rgba(255, 255, 255, .07); }
html.dark-mode body.app-body .kz-divider { background: var(--pp-line); }
html.dark-mode body.app-body .kz-item span { color: var(--pp-muted); }
html.dark-mode body.app-body .kz-item strong { color: var(--pp-ink); }
html.dark-mode body.app-body .empty-year-message { color: var(--pp-muted); background: rgba(255, 255, 255, .04); }
html.dark-mode body.app-body .paint-chip { color: var(--pp-ink); border-color: var(--pp-line); background: rgba(255, 255, 255, .06); }
html.dark-mode body.app-body .paint-hint { color: var(--pp-muted); }

/* --- 3) Schichtplan ---------------------------------------------------- */
html.dark-mode body.app-body .schichtplan-day {
    border-color: var(--pp-line);
    background: var(--pp-surface);
}
html.dark-mode body.app-body .schichtplan-day-header { color: #f4b8cf; background: rgba(236, 72, 153, .18); }
html.dark-mode body.app-body .schichtplan-weekend .schichtplan-day-header { color: var(--pp-muted); background: rgba(255, 255, 255, .08); }
html.dark-mode body.app-body .schichtplan-day-header span { color: inherit; }
html.dark-mode body.app-body .schichtplan-time-label { color: var(--pp-muted); background: rgba(255, 255, 255, .05); }
html.dark-mode body.app-body .schichtplan-add-form { border-color: var(--pp-line); background: rgba(255, 255, 255, .04); }
html.dark-mode body.app-body .schichtplan-table th { color: var(--pp-ink); background: rgba(255, 255, 255, .05); }

/* --- 4) Urlaub & Zeiterfassung ----------------------------------------- */
html.dark-mode body.app-body .clean-summary div { background: rgba(255, 255, 255, .06); }
html.dark-mode body.app-body .clean-summary span { color: var(--pp-muted); }
html.dark-mode body.app-body .clean-summary strong { color: var(--pp-ink); }
html.dark-mode body.app-body .clean-summary > div > small { color: var(--pp-muted); }
html.dark-mode body.app-body .vacation-request-card {
    border-color: var(--pp-line);
    background: var(--pp-surface);
}
html.dark-mode body.app-body .vacation-status.pending { color: #f2cf7d; background: rgba(245, 158, 11, .18); }
html.dark-mode body.app-body .vacation-status.approved { color: #b7e4c3; background: rgba(34, 197, 94, .18); }
html.dark-mode body.app-body .vacation-status.rejected { color: #f3b8b5; background: rgba(248, 113, 113, .20); }
html.dark-mode body.app-body .request-comment { color: var(--pp-muted); }
html.dark-mode body.app-body .admin-comment { color: var(--pp-muted); }
html.dark-mode body.app-body .inline-time-edit-row td { background: rgba(255, 255, 255, .04); }
html.dark-mode body.app-body .pause-not-deducted { color: #f2cf7d; background: rgba(245, 158, 11, .14); }
html.dark-mode body.app-body .pause-not-deducted-note { color: var(--pp-muted); }
html.dark-mode body.app-body .stamp-clock-card .form-success {
    color: #bce8ca !important;
    border-color: rgba(51, 101, 72, .8);
    background: #193626;
}
html.dark-mode body.app-body .stamp-clock-card .form-error {
    color: #f4b8b3 !important;
    border-color: rgba(148, 61, 57, .8);
    background: #3a201e;
}

/* --- 5) Berichte, Tabellenkarten & Formulare --------------------------- */
html.dark-mode body.app-body .table.table-cards tr {
    border-color: var(--pp-line);
    background: var(--pp-surface);
}
html.dark-mode body.app-body .table.table-cards td::before { color: var(--pp-muted); }
html.dark-mode body.app-body .table tr:hover td { background: rgba(255, 255, 255, .04); }
html.dark-mode body.app-body .filter-bar label { color: var(--pp-muted); }
html.dark-mode body.app-body .form-warning { color: #f0d09a; border-color: rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .12); }
html.dark-mode body.app-body .form-error { color: #f4b8b3; border-color: rgba(148, 61, 57, .8); background: #3a201e; }
html.dark-mode body.app-body .help-text,
html.dark-mode body.app-body .privacy-note { color: var(--pp-muted); }
html.dark-mode body.app-body .hint-box { color: #bcd4f7; border-color: rgba(96, 165, 250, .4); background: rgba(59, 130, 246, .12); }
html.dark-mode body.app-body .role-pill.admin { color: #f3b8b5; background: rgba(248, 113, 113, .20); }
html.dark-mode body.app-body .role-pill.employee { color: #b7e4c3; background: rgba(34, 197, 94, .18); }
html.dark-mode body.app-body .role-pill.manager { color: #bcd4f7; background: rgba(96, 165, 250, .20); }
html.dark-mode body.app-body .status-pill.ok { color: #b7e4c3; background: rgba(34, 197, 94, .18); }
html.dark-mode body.app-body .status-pill.locked { color: var(--pp-muted); background: rgba(255, 255, 255, .10); }
html.dark-mode body.app-body .status-free { color: #f2d894; border-color: rgba(250, 204, 21, .4); background: rgba(250, 204, 21, .16); }
html.dark-mode body.app-body .status-sick { color: #f3b8b5; border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .18); }
html.dark-mode body.app-body .status-training { color: #d3c8f7; border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .20); }

/* --- 6) Dashboard ------------------------------------------------------ */
html.dark-mode body.app-body .focus-metric small { color: var(--pp-muted); }
html.dark-mode body.app-body .focus-icon { background: rgba(255, 255, 255, .10); }
html.dark-mode body.app-body .focus-metric.focus-away { background: rgba(245, 158, 11, .14); }
html.dark-mode body.app-body .focus-metric.focus-request { background: rgba(167, 139, 250, .14); }
html.dark-mode body.app-body .quick-actions a {
    color: var(--pp-ink);
    border-color: var(--pp-line);
    background: rgba(255, 255, 255, .06);
}
html.dark-mode body.app-body .quick-actions a:hover { background: rgba(255, 255, 255, .11); }
html.dark-mode body.app-body .my-week-day { color: var(--pp-ink); background: rgba(255, 255, 255, .06); }
html.dark-mode body.app-body .my-week-day.today { border-color: rgba(96, 165, 250, .7); background: rgba(59, 130, 246, .18); }
html.dark-mode body.app-body .my-week-weekday,
html.dark-mode body.app-body .my-week-date { color: var(--pp-muted); }
html.dark-mode body.app-body .my-week-badge.empty { color: var(--pp-muted); background: rgba(255, 255, 255, .10); }
html.dark-mode body.app-body .birthday-card { background: var(--pp-surface); }
html.dark-mode body.app-body .birthday-today { background: rgba(250, 204, 21, .14); }
html.dark-mode body.app-body .birthday-upcoming { background: rgba(255, 255, 255, .05); }
html.dark-mode body.app-body .open-requests-split p { color: var(--pp-muted); }

/* --- 7) Modals --------------------------------------------------------- */
html.dark-mode body.app-body .modal {
    color: var(--pp-ink);
    background: var(--pp-surface);
    border: 1px solid var(--pp-line);
}
html.dark-mode body.app-body .modal-hint,
html.dark-mode body.app-body .modal-header p { color: var(--pp-muted); }
html.dark-mode body.app-body .modal-checkbox-label { color: var(--pp-ink); }
html.dark-mode body.app-body .mini-button { color: var(--pp-ink); border-color: var(--pp-line); background: rgba(255, 255, 255, .08); }

/* --- 8) Nachzügler: Scroll-Rahmen, Standardtabellen, Einstellungen ----- */
html.dark-mode body.app-body .calendar-scroll {
    color: var(--pp-ink);
    border-color: var(--pp-line);
    background: var(--pp-surface);
}
html.dark-mode body.app-body .pending-vacation-legend {
    color: #f2cf7d;
    background: repeating-linear-gradient(135deg,
        rgba(245, 158, 11, .26), rgba(245, 158, 11, .26) 7px,
        rgba(245, 158, 11, .08) 7px, rgba(245, 158, 11, .08) 14px);
}
html.dark-mode body.app-body .table {
    color: var(--pp-ink);
    background: var(--pp-surface);
}
html.dark-mode body.app-body .table th {
    color: var(--pp-ink);
    background: rgba(255, 255, 255, .06);
}
html.dark-mode body.app-body .table td {
    color: var(--pp-ink);
    border-color: var(--pp-line);
}
html.dark-mode body.app-body .table tr:hover { background: rgba(255, 255, 255, .04); }
html.dark-mode body.app-body .login-display-settings {
    border-color: var(--pp-line);
    background: rgba(255, 255, 255, .04);
}
html.dark-mode body.app-body .logo-preview {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .05);
}
html.dark-mode body.app-body .audit-retention-box,
html.dark-mode body.app-body .system-status-card {
    color: var(--pp-ink);
    border-color: var(--pp-line);
    background: rgba(255, 255, 255, .05);
}
html.dark-mode body.app-body .system-status-card em,
html.dark-mode body.app-body .system-status-card strong { color: var(--pp-ink); }
html.dark-mode body.app-body .system-status-card.ok { border-color: rgba(34, 197, 94, .4); }
html.dark-mode body.app-body .system-status-card.warning { border-color: rgba(245, 158, 11, .5); }
html.dark-mode body.app-body .fixed-off-warning { color: #f2cf7d; background: rgba(245, 158, 11, .14); }
html.dark-mode body.app-body .employee-edit-form input[readonly],
html.dark-mode body.app-body input[readonly] { color: var(--pp-muted) !important; background: rgba(255, 255, 255, .05) !important; }
html.dark-mode body.app-body .identity-badge { color: var(--pp-ink); background: rgba(255, 255, 255, .08); }
html.dark-mode body.app-body .mini-day { background: rgba(255, 255, 255, .06); }
html.dark-mode body.app-body .mini-day.weekend { background: rgba(255, 255, 255, .11); }
html.dark-mode body.app-body .mini-weekday { color: var(--pp-muted); }

/* --- 9) Schrift-Feinschliff: Legendenkacheln & Namen ------------------- */
html.dark-mode body.app-body .legend-item,
html.dark-mode body.app-body .legend .legend-item,
html.dark-mode body.app-body .pro-legend .legend-item {
    color: #ffffff;
}
html.dark-mode body.app-body .calendar-table .employee-col strong,
html.dark-mode body.app-body .calendar-pro-table .employee-col strong,
html.dark-mode body.app-body .employee-col strong,
html.dark-mode body.app-body .employee-col b {
    color: var(--pp-ink) !important;
}
html.dark-mode body.app-body .year-employee-title {
    color: var(--pp-ink);
}

/* --- 10) Letzte Kontrast-Korrekturen ----------------------------------- */
html.dark-mode body.app-body .legend-item.entry-free { color: #3a2b05; }
html.dark-mode body.app-body .logo-placeholder { color: var(--pp-muted); }

/* --- 11) Personalakte: Tab-Leiste & Detailbereiche --------------------- */
html.dark-mode body.app-body .tabs {
    color: var(--pp-ink);
    border-color: var(--pp-line);
    background: var(--pp-surface);
}

/* ======================================================================
   PersonalPlaner 1.9.15 — UI 14: Mobiles Dashboard im App-Look
   Orientiert am Mobile-Mockup: warme Arbeitsfläche, Begrüßungs-Hero,
   Stempeluhr als dominante Tannengrün-Karte mit einem klaren Haupt-
   button, Kennzahlen als kompakte Chips (Zahl oben, Label unten),
   Sektionsüberschriften als ruhige Uppercase-Labels, Listen statt
   Aufzählungspunkten. Nur für die schmale Ansicht (max-width: 700px),
   Desktop bleibt unverändert.
   ====================================================================== */
@media (max-width: 700px) {

    /* Wärmere Arbeitsfläche je Theme */
    body.app-body,
    body.app-body .main { background: #f7f4ec; }
    body.app-body.theme-blue,
    body.app-body.theme-blue .main { background: #f2f4f8; }
    body.app-body.theme-sand,
    body.app-body.theme-sand .main { background: #efeadf; }
    body.app-body .main { padding: 15px 16px 26px; }

    /* Begrüßungs-Hero */
    .mobile-welcome { padding: 8px 2px 0; }
    .mobile-welcome h2 { font-size: 24px; font-weight: 780; letter-spacing: -.03em; }
    .mobile-welcome p { margin-top: 4px; font-size: 13px; }
    .mobile-dashboard-search-host { margin-top: 13px; }
    .mobile-dashboard-search-host .dashboard-search { height: 44px; border-radius: 13px; box-shadow: 0 4px 14px rgba(28, 37, 34, .05); }

    /* Stempeluhr: eine dominante Karte */
    body.app-body .stamp-clock-card,
    body.app-body .stamp-dashboard-row .stamp-clock-card {
        margin-top: 15px;
        padding: 19px 18px 16px;
        border: 0;
        border-radius: 22px;
        box-shadow: 0 14px 30px rgba(23, 36, 28, .16);
    }
    body.app-body.theme-green .stamp-clock-card,
    body.app-body .stamp-clock-card {
        background:
            radial-gradient(circle at 86% 6%, rgba(141, 169, 50, .28), transparent 42%),
            linear-gradient(150deg, #27392f 0%, #1b2c24 55%, #15231c 100%);
    }
    body.app-body.theme-blue .stamp-clock-card {
        background:
            radial-gradient(circle at 86% 6%, rgba(52, 124, 242, .26), transparent 42%),
            linear-gradient(150deg, #14304f 0%, #0c2138 55%, #081827 100%);
    }
    body.app-body.theme-sand .stamp-clock-card {
        background:
            radial-gradient(circle at 86% 6%, rgba(193, 169, 120, .24), transparent 42%),
            linear-gradient(150deg, #565955 0%, #3d403c 55%, #30332f 100%);
    }
    body.app-body .stamp-clock-card h2 {
        margin: 0 0 10px;
        color: #ffffff;
        font-size: 13px;
        font-weight: 750;
        letter-spacing: .01em;
    }
    body.app-body .stamp-clock-card .stamp-status {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 6px;
        color: #cfd9d0;
        font-size: 13px;
    }
    body.app-body .stamp-clock-card .stamp-status::before {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #9db742;
        box-shadow: 0 0 0 4px rgba(141, 169, 50, .22);
    }
    body.app-body .stamp-clock-card .live-worktime,
    body.app-body .stamp-clock-card .finished-duration { color: #fff; }
    body.app-body .stamp-clock-card .live-worktime strong,
    body.app-body .stamp-clock-card .finished-duration strong {
        font-size: 44px;
        font-weight: 640;
        letter-spacing: -.045em;
        line-height: 1;
    }
    body.app-body .stamp-clock-card .live-worktime small,
    body.app-body .stamp-clock-card .finished-duration small { font-size: 13px; }

    /* Ein klarer Hauptbutton, ruhige Nebenaktionen */
    body.app-body .stamp-clock-card form { margin: 12px 0 4px; }
    body.app-body .stamp-clock-card .stamp-button {
        width: 100%;
        padding: 14px 16px;
        font-size: 15px;
        font-weight: 750;
        border-radius: 14px;
    }
    body.app-body .stamp-clock-card .stamp-finish-options {
        display: grid;
        grid-template-columns: 1fr 1.35fr;
        gap: 9px;
        margin: 12px 0 4px;
    }
    body.app-body .stamp-clock-card .stamp-finish-options form { margin: 0; }
    body.app-body .stamp-clock-card .stamp-choice {
        width: 100%;
        padding: 13px 10px;
        font-size: 14px;
        font-weight: 720;
        border-radius: 14px;
    }
    body.app-body .stamp-clock-card .stamp-break {
        color: #e9efe6;
        border: 1px solid rgba(255, 255, 255, .2);
        background: rgba(255, 255, 255, .08);
        box-shadow: none;
    }
    body.app-body .stamp-clock-card .stamp-break:hover { background: rgba(255, 255, 255, .13); }
    body.app-body .stamp-clock-card .small-link,
    body.app-body .stamp-clock-card .stamp-restart-button {
        color: #dfe7dc;
        border: 1px solid rgba(255, 255, 255, .16);
        background: rgba(255, 255, 255, .06);
        border-radius: 11px;
        padding: 8px 11px;
        font-size: 11px;
    }

    /* Kennzahlen-Chips: Zahl oben, Label unten */
    .dashboard-hero { margin-top: 14px; }
    .dashboard-status-grid { gap: 10px; }
    body.app-body .status-card {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 7px;
        min-height: 88px;
        padding: 14px 13px;
        border: 1px solid #ecebe3;
        border-top: 3px solid #d8dde6;
        border-radius: 16px;
        box-shadow: 0 6px 16px rgba(28, 37, 34, .05);
    }
    body.app-body .status-card span { margin: 0; font-size: 26px; font-weight: 780; letter-spacing: -.02em; }
    body.app-body .status-card strong { font-size: 10.5px; font-weight: 640; color: #6d7477; }

    /* Karten & Sektionslabels */
    body.app-body .dashboard-grid { gap: 13px; margin-top: 20px; }
    body.app-body .dashboard-grid > .card,
    body.app-body .main > .card.mt {
        border: 1px solid #ecebe3;
        border-radius: 18px;
        box-shadow: 0 6px 18px rgba(28, 37, 34, .05);
    }
    body.app-body .dashboard-grid > .card h2,
    body.app-body .my-week-card h2,
    body.app-body .pin-hint-card h2 {
        margin: 0 0 12px;
        color: #78806f;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }
    body.app-body .dashboard-grid > .card h3 { font-size: 13px; }

    /* Warnungen kompakt */
    body.app-body .dashboard-grid .warning-box {
        padding: 12px 13px;
        margin-bottom: 10px;
        border-radius: 14px;
    }
    body.app-body .dashboard-grid .warning-box strong { font-size: 14px; }
    body.app-body .dashboard-grid .warning-box span { display: block; margin-top: 2px; font-size: 12px; }
    body.app-body .dashboard-grid .warning-box p { margin: 5px 0 9px; font-size: 12px; }
    body.app-body .dashboard-grid .warning-box .small-link { padding: 7px 11px; font-size: 11px; }

    /* Abwesenheiten als ruhige Liste statt Aufzählung */
    body.app-body .dashboard-grid .compact-list { padding: 0; list-style: none; }
    body.app-body .dashboard-grid .compact-list li {
        margin: 0;
        padding: 9px 2px;
        font-size: 14px;
        border-bottom: 1px solid #efece3;
    }
    body.app-body .dashboard-grid .compact-list li:last-child { border-bottom: 0; }

    /* Offene Anträge etwas leichter */
    body.app-body .metric-big { font-size: 34px; }
    .open-requests-split { gap: 10px; }

    /* Dark Mode: warme Flächen bleiben dunkel, Chips folgen den Karten */
    html.dark-mode body.app-body .status-card { border-color: var(--pp-line); border-top-color: var(--pp-line); }
    html.dark-mode body.app-body .status-card strong { color: var(--pp-muted); }
    html.dark-mode body.app-body .dashboard-grid > .card,
    html.dark-mode body.app-body .main > .card.mt { border-color: var(--pp-line); }
    html.dark-mode body.app-body .dashboard-grid > .card h2,
    html.dark-mode body.app-body .my-week-card h2,
    html.dark-mode body.app-body .pin-hint-card h2 { color: var(--pp-muted); }
    html.dark-mode body.app-body .dashboard-grid .compact-list li { border-bottom-color: rgba(255, 255, 255, .08); }
}

@media (max-width: 700px) {
    /* Solide Grundfarbe als Fallback unter den Stempeluhr-Verläufen */
    body.app-body .stamp-clock-card,
    body.app-body .stamp-dashboard-row .stamp-clock-card { background-color: #1b2c24; }
    body.app-body.theme-blue .stamp-clock-card { background-color: #0c2138; }
    body.app-body.theme-sand .stamp-clock-card { background-color: #3d403c; }
}

/* --- 12) Feinschliff nach Praxistest ----------------------------------- */
/* Dark Mode: "Ist/Soll"-Zeile und Fließtext in Warnboxen klar lesbar */
html.dark-mode body.app-body .warning-box { color: #e9d9a8; }
html.dark-mode body.app-body .warning-box span,
html.dark-mode body.app-body .dashboard-grid .warning-box span { color: #f0dfae !important; }
html.dark-mode body.app-body .warning-danger { color: #f3c1bd; }
html.dark-mode body.app-body .warning-danger span,
html.dark-mode body.app-body .warning-danger strong,
html.dark-mode body.app-body .warning-danger p { color: #f6cac6 !important; }

/* Mobil: Inhalt schmaler führen statt volle Breite zu ziehen */
@media (max-width: 700px) {
    body.app-body .main { padding-inline: 19px; }
    body.app-body .main > section,
    body.app-body .main > .stamp-dashboard-row,
    body.app-body .main > .dashboard-grid,
    body.app-body .main > .dashboard-hero,
    body.app-body .main > .card {
        width: 100%;
        max-width: 540px;
        margin-inline: auto;
    }
    body.app-body .stamp-dashboard-row .stamp-clock-card {
        width: 100%;
        margin-inline: 0;
    }
}
@media (max-width: 390px) {
    body.app-body .main { padding-inline: 16px; }
}

/* ======================================================================
   PersonalPlaner 2.0.0 — Wechselwochen (UI der Arbeitstage-Auswahl)
   ====================================================================== */
.workdays-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 4px 0 10px;
}
.workdays-mode-switch label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}
.workdays-mode-switch input[type="radio"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--pp-olive, #88a62d);
}
.workdays-odd-label,
.workdays-even-label { display: block; margin: 2px 0 6px; font-weight: 700; }
[data-workdays-even] { margin-top: 10px; }

/* ======================================================================
   PersonalPlaner 2.1.0 — Anmeldeseite v4 (heller App-Look)
   Geteiltes Layout: links das Tannengrün-Panel mit Begrüßung, großer
   Uhr, Wetter und Funktionszeile (Verwandtschaft zur Stempeluhr-Karte),
   rechts die warme Creme-Fläche mit der Anmeldekarte. Mobil stapelt
   sich beides zu Hero + Karte. Alle Funktionen und Einstellungs-
   schalter der bisherigen Seite bleiben erhalten; die drei Themes
   färben nur Panel und Akzente um.
   ====================================================================== */
.login-body.login-v4 {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    color: #182126;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f4f1e8;
}
.login-v4 .login-stage {
    display: grid;
    grid-template-columns: minmax(360px, 44%) 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- Linkes Panel ------------------------------------------------------ */
.login-v4 .login-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 4vw, 44px);
    color: #eef3ec;
    background-color: #1b2c24;
    background:
        radial-gradient(circle at 84% 8%, rgba(141, 169, 50, .30), transparent 44%),
        linear-gradient(155deg, #27392f 0%, #1b2c24 55%, #14211b 100%);
}
.login-v4 .login-side-top { display: flex; align-items: center; gap: 14px; }
.login-v4 .login-brand-mark {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    padding: 7px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.login-v4 .login-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.login-v4 .login-hotel-name {
    margin: 0;
    color: #dbe4d8;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}
.login-v4 .login-side-center { display: grid; gap: 12px; justify-items: start; }
.login-v4 .login-greeting {
    margin: 0;
    color: #b7cf6a;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 750;
    letter-spacing: .01em;
}
.login-v4 .login-clock { display: grid; gap: 4px; }
.login-v4 .login-time {
    color: #ffffff;
    font-size: clamp(58px, 8vw, 96px);
    font-weight: 620;
    line-height: .95;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
}
.login-v4 .login-date {
    color: #c2cec1;
    font-size: clamp(13px, 1.4vw, 16px);
}
.login-v4 .login-weather {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    padding: 8px 14px;
    color: #e6ecdf;
    font-size: 14px;
    font-weight: 650;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
}
.login-v4 .login-weather-separator { width: 1px; height: 14px; background: rgba(255, 255, 255, .28); }
.login-v4 .login-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    color: #b9c6b4;
    font-size: 13px;
    font-weight: 650;
}
.login-v4 .login-features div { display: inline-flex; align-items: center; gap: 7px; }

/* --- Rechte Fläche mit Anmeldekarte ------------------------------------ */
.login-v4 .login-panel {
    display: grid;
    place-items: center;
    padding: clamp(22px, 4vw, 48px);
    background:
        radial-gradient(circle at 80% 0%, rgba(141, 169, 50, .10), transparent 34%),
        #f4f1e8;
}
.login-v4 .login-card {
    width: min(420px, 100%);
    padding: clamp(26px, 3vw, 36px);
    border: 1px solid #e9e5d8;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(31, 41, 34, .10);
}
.login-v4 .login-heading h1 {
    margin: 0 0 4px;
    color: #182126;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.login-v4 .login-subline { margin: 0 0 22px; color: #6d7477; font-size: 14px; }
.login-v4 .login-form label {
    display: block;
    margin-bottom: 8px;
    color: #182126;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .02em;
}
.login-v4 .login-input-wrap { position: relative; }
.login-v4 .login-input-wrap input {
    width: 100%;
    padding: 15px 52px 15px 16px;
    color: #182126;
    font-size: 17px;
    letter-spacing: .06em;
    border: 1.5px solid #d9d4c4;
    border-radius: 14px;
    background: #fbfaf5;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.login-v4 .login-input-wrap input::placeholder { color: #a8a894; letter-spacing: .02em; }
.login-v4 .login-input-wrap input:focus {
    outline: none;
    border-color: #88a62d;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(136, 166, 45, .16);
}
.login-v4 .login-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 17px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
    box-shadow: none;
}
.login-v4 .login-password-toggle:hover { background: rgba(136, 166, 45, .12); }
.login-v4 .login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 16px;
    padding: 15px 18px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 750;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(110deg, #6f8e20, #91ad31);
    box-shadow: 0 14px 30px rgba(83, 111, 25, .26);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.login-v4 .login-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.login-v4 .login-submit:active { transform: translateY(0); }
.login-v4 .login-error {
    margin: 16px 0 0;
    padding: 12px 14px;
    color: #8f2825;
    font-size: 13.5px;
    border: 1px solid #f2aaa5;
    border-radius: 12px;
    background: #ffe9e6;
}
.login-v4 .login-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 20px;
    font-size: 13px;
}
.login-v4 .login-contact a { color: #4d6d24; font-weight: 650; text-decoration: none; }
.login-v4 .login-contact a:hover { text-decoration: underline; }
.login-v4 .login-copyright {
    margin: 22px 0 0;
    color: #a0a597;
    font-size: 11.5px;
}
.login-v4 .login-copyright .version { color: inherit; }
.login-v4 .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Themes: Blau und Sand färben Panel + Akzente um ------------------- */
.login-v4.theme-blue .login-side {
    background-color: #0c2138;
    background:
        radial-gradient(circle at 84% 8%, rgba(52, 124, 242, .28), transparent 44%),
        linear-gradient(155deg, #14304f 0%, #0c2138 55%, #081827 100%);
}
.login-v4.theme-blue .login-greeting { color: #7fb0f5; }
.login-v4.theme-blue .login-panel { background: radial-gradient(circle at 80% 0%, rgba(52, 124, 242, .10), transparent 34%), #eef2f8; }
.login-v4.theme-blue .login-input-wrap input:focus { border-color: #2f73ed; box-shadow: 0 0 0 4px rgba(47, 115, 237, .16); }
.login-v4.theme-blue .login-password-toggle:hover { background: rgba(47, 115, 237, .12); }
.login-v4.theme-blue .login-submit { background: linear-gradient(110deg, #245fc5, #347cf2); box-shadow: 0 14px 30px rgba(29, 78, 172, .28); }
.login-v4.theme-blue .login-contact a { color: #2456b4; }
.login-v4.theme-blue { background: #eef2f8; }

.login-v4.theme-sand .login-side {
    background-color: #3d403c;
    background:
        radial-gradient(circle at 84% 8%, rgba(193, 169, 120, .26), transparent 44%),
        linear-gradient(155deg, #565955 0%, #3d403c 55%, #2f322e 100%);
}
.login-v4.theme-sand .login-greeting { color: #d5ba82; }
.login-v4.theme-sand .login-panel { background: radial-gradient(circle at 80% 0%, rgba(193, 169, 120, .12), transparent 34%), #efeadf; }
.login-v4.theme-sand .login-input-wrap input:focus { border-color: #a68c5e; box-shadow: 0 0 0 4px rgba(166, 140, 94, .18); }
.login-v4.theme-sand .login-password-toggle:hover { background: rgba(166, 140, 94, .14); }
.login-v4.theme-sand .login-submit { background: linear-gradient(110deg, #9c8255, #b8a071); box-shadow: 0 14px 30px rgba(90, 72, 43, .28); }
.login-v4.theme-sand .login-contact a { color: #7d6437; }
.login-v4.theme-sand { background: #efeadf; }

/* --- Mobil: Hero oben, Karte darunter ---------------------------------- */
@media (max-width: 860px) {
    .login-v4 .login-stage { grid-template-columns: 1fr; }
    .login-v4 .login-side {
        gap: 16px;
        padding: max(20px, env(safe-area-inset-top)) 22px 22px;
        border-radius: 0 0 26px 26px;
    }
    .login-v4 .login-side-center { gap: 8px; }
    .login-v4 .login-time { font-size: clamp(52px, 16vw, 72px); }
    .login-v4 .login-features { display: none; }
    .login-v4 .login-panel {
        align-items: start;
        padding: 20px 18px max(26px, env(safe-area-inset-bottom));
    }
    .login-v4 .login-card { border-radius: 20px; padding: 24px 20px; }
}

/* ======================================================================
   PersonalPlaner 2.1.1 — Mal-Aktionsleiste zuverlässig am unteren Rand
   Die Leiste "n× Urlaub · Verwerfen · Speichern" der Jahresübersicht
   dockt jetzt sauber an: auf dem Desktop als zentrierte Pille mit
   Safe-Area-Abstand, mobil als breite Leiste OBERHALB der unteren
   App-Navigation (66px bzw. 55px auf sehr kleinen Geräten) und mit
   env(safe-area-inset-bottom) fürs iPhone. Zusätzlich liegt sie mit
   z-index über der Navigation und bekommt eine Einblend-Animation,
   damit sie beim Markieren nicht "aufploppt", sondern hochgleitet.
   ====================================================================== */
.paint-save-bar {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    animation: paint-bar-in .22s ease;
}
@keyframes paint-bar-in {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 700px) {
    .paint-save-bar {
        left: 10px;
        right: 10px;
        bottom: calc(66px + env(safe-area-inset-bottom, 0px) + 10px);
        justify-content: space-between;
        padding: 11px 13px;
        border-radius: 16px;
        transform: none;
        z-index: 60; /* über der unteren App-Navigation (z-index 50) */
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .12), 0 12px 30px rgba(0, 0, 0, .30);
    }
    .paint-save-bar #paintSaveInfo { font-size: 13px; line-height: 1.25; }
    .paint-save-bar .mini-button,
    .paint-save-bar .button-compact { padding: 10px 14px; font-size: 13px; border-radius: 11px; }
    @keyframes paint-bar-in {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}
@media (max-width: 380px) {
    .paint-save-bar { bottom: calc(55px + env(safe-area-inset-bottom, 0px) + 10px); }
}

/* ======================================================================
   PersonalPlaner 2.2.0 — Eintrags-Dock der Jahresübersicht
   Progressive Einblendung: Ruhezustand zeigt nur den ✏️-Button unten
   rechts. Antippen öffnet die Dock-Leiste mit den Art-Chips (wischbar),
   beim ersten markierten Tag blendet die Leiste die inaktiven Chips aus
   und zeigt Zähler + Verwerfen + Speichern. ✕ schließt (mit Rückfrage
   bei offenen Markierungen). Gilt für Desktop UND Mobil; die Kopf-
   Legende ist nur noch Anzeige.
   ====================================================================== */
.paint-fab {
    position: fixed;
    right: 22px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    font-size: 21px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #6f8e20, #91ad31);
    box-shadow: 0 12px 28px rgba(83, 111, 25, .38);
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease;
}
.paint-fab:hover { transform: translateY(-2px) scale(1.04); }
.paint-fab:active { transform: scale(.97); }

.paint-dock {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(820px, calc(100vw - 40px));
    padding: 10px 12px;
    background: #101b15;
    border-radius: 17px;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .10), 0 16px 40px rgba(0, 0, 0, .38);
    transform: translateX(-50%) translateY(16px);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.paint-dock.open { transform: translateX(-50%) translateY(0); opacity: 1; }

.paint-dock-chips {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.paint-dock-chips::-webkit-scrollbar { display: none; }

/* Chips im dunklen Dock */
.paint-dock .paint-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    margin: 0;
    color: #dfe6dc;
    font-size: 13px;
    font-weight: 700;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .09);
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
}
.paint-dock .paint-chip:hover { background: rgba(255, 255, 255, .15); }
.paint-dock .paint-chip .legend-item { width: 13px; height: 13px; border-radius: 4px; }
.paint-dock .paint-chip.paint-chip-delete { color: #f3b8b5; background: rgba(248, 113, 113, .14); }
.paint-dock .paint-chip.paint-chip-delete:hover { background: rgba(248, 113, 113, .22); }

/* Zustand "Tage markiert": nur der aktive Chip bleibt sichtbar */
.paint-dock.has-selection .paint-dock-chips { flex: 0 0 auto; }
.paint-dock.has-selection .paint-chip:not(.paint-chip-active) { display: none !important; }

/* Aktionsteil: die frühere Fix-Leiste wird zum Dock-Innenleben */
.paint-dock .paint-save-bar {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    z-index: auto;
}
.paint-dock .paint-save-bar #paintSaveInfo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}
.paint-dock-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #cfd6cc;
    font-size: 14px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .10);
    cursor: pointer;
    box-shadow: none;
}
.paint-dock-close:hover { background: rgba(255, 255, 255, .18); }

@media (max-width: 700px) {
    .paint-fab { bottom: calc(66px + env(safe-area-inset-bottom, 0px) + 14px); }
    .paint-dock {
        left: 10px;
        right: 10px;
        width: auto;
        bottom: calc(66px + env(safe-area-inset-bottom, 0px) + 10px);
        transform: translateY(16px);
        flex-wrap: wrap;
    }
    .paint-dock.open { transform: translateY(0); }
    .paint-dock .paint-save-bar { flex-basis: 100%; justify-content: space-between; }
    .paint-dock .paint-save-bar .mini-button,
    .paint-dock .paint-save-bar .button-compact { padding: 10px 14px; font-size: 13px; border-radius: 11px; }
}
@media (max-width: 380px) {
    .paint-fab { bottom: calc(55px + env(safe-area-inset-bottom, 0px) + 14px); }
    .paint-dock { bottom: calc(55px + env(safe-area-inset-bottom, 0px) + 10px); }
}
@media print {
    .paint-fab, .paint-dock { display: none !important; }
}

/* hidden-Attribut muss gegen display:grid/flex gewinnen */
.paint-fab[hidden],
.paint-dock[hidden] { display: none !important; }

/* ======================================================================
   PersonalPlaner 2.2.1 — Stempeluhr-Karte eingerahmt statt raumgreifend
   Die dunkle Karte bekommt auf allen Breiten einen Deckel: Desktop max.
   500px in der Reihe (die Kennzahlen daneben erhalten den Platz),
   Tablet mittig mit fester Breite, mobil zentriert mit sichtbarem Rand
   gegenüber den übrigen Karten - so breitet sich die Karte nicht mehr
   über die ganze Seite aus.
   ====================================================================== */
.stamp-dashboard-row {
    grid-template-columns: minmax(380px, 500px) minmax(360px, 1fr);
}
@media (max-width: 900px) {
    body.app-body .stamp-dashboard-row .stamp-clock-card {
        max-width: 480px;
        margin-inline: auto;
    }
}
@media (max-width: 700px) {
    body.app-body .stamp-clock-card,
    body.app-body .stamp-dashboard-row .stamp-clock-card {
        width: auto;
        max-width: min(400px, calc(100% - 16px));
        margin-inline: auto;
    }
}

/* ======================================================================
   PersonalPlaner 2.2.2 — Jahresübersicht: Ferien, Wochenenden und
   Feiertage zuverlässig unterscheidbar (hell und dunkel)

   Zwei Fehler waren hier verwoben:
   1. `body.app-body .weekend` (Spezifität 0-2-1) schlug die Tageszellen
      `.single-day.school-holiday-cell` / `.holiday-cell` (0-2-0). Sobald
      ein Ferien- oder Feiertag auf ein Wochenende fiel, wurde er grau
      übermalt - der 26.12. (2. Weihnachtstag, Samstag, Weihnachtsferien)
      sah aus wie ein beliebiger Sonnabend.
   2. Im Dark Mode fehlten Regeln für `.single-day.school-holiday-cell`
      ganz, und `.weekend` lag mit rgba(255,255,255,.075) praktisch auf
      der Grundfarbe (.07) - Ferien und Wochenenden waren unsichtbar.

   Lösung: klare Prioritätskette mit ausreichender Spezifität (Ferien
   schlagen Wochenende, Kombinationen bekommen einen kräftigeren Ton)
   plus ein eigener visueller Kanal für Feiertage - ein kleiner Punkt
   oben links. Dadurch bleibt ein Feiertag auch dann erkennbar, wenn der
   Hintergrund bereits von Ferien oder einem Eintrag belegt ist.
   Eintragsfarben (Urlaub, Krank, ...) tragen !important und gewinnen
   weiterhin gegen alles hier; der Punkt bleibt darüber sichtbar.
   ====================================================================== */
body.app-body .single-day { position: relative; }

/* --- Hell: Prioritätskette ------------------------------------------- */
body.app-body .single-day.weekend { background: #d8dce3; }
body.app-body .single-day.school-holiday-cell { background: #dbeafe; }
body.app-body .single-day.school-holiday-cell.weekend { background: #b9d3f7; }
body.app-body .single-day.holiday-cell { background: #fde4c8; }
body.app-body .single-day.holiday-cell.weekend { background: #f7cfa4; }
/* Feiertag in den Ferien: Ferienblau bleibt Hintergrund, der Punkt
   markiert den Feiertag - so sind beide Informationen ablesbar. */
body.app-body .single-day.holiday-cell.school-holiday-cell { background: #dbeafe; }
body.app-body .single-day.holiday-cell.school-holiday-cell.weekend { background: #b9d3f7; }

/* --- Feiertags-Punkt (oben links; oben rechts sitzt das "?" für
       beantragten Urlaub, daher bewusst die andere Ecke) -------------- */
body.app-body .single-day.holiday-cell::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ea7c1e;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85);
    pointer-events: none;
}

/* --- Dunkel: gleiche Kette, dunkle Töne ------------------------------ */
html.dark-mode body.app-body .single-day { background: rgba(255, 255, 255, .07); }
/* Wichtig: Diese Regeln brauchen !important, um die generische
   Dark-Mode-Wochenendregel zu schlagen - deshalb müssen Tage mit einem
   Eintrag (entry-*-cell) oder einer Vorschau-Markierung (entry-*-paint)
   ausdrücklich ausgenommen werden, sonst würde Ferienblau den Urlaub
   überdecken. Der Feiertagspunkt bleibt in allen Fällen sichtbar. */
html.dark-mode body.app-body .single-day.weekend:not([class*="entry-"]) { background: rgba(255, 255, 255, .155) !important; }
html.dark-mode body.app-body .single-day.school-holiday-cell:not([class*="entry-"]) { background: rgba(96, 165, 250, .26) !important; }
html.dark-mode body.app-body .single-day.school-holiday-cell.weekend:not([class*="entry-"]) { background: rgba(96, 165, 250, .40) !important; }
html.dark-mode body.app-body .single-day.holiday-cell:not([class*="entry-"]) { background: rgba(251, 146, 60, .28) !important; }
html.dark-mode body.app-body .single-day.holiday-cell.weekend:not([class*="entry-"]) { background: rgba(251, 146, 60, .42) !important; }
html.dark-mode body.app-body .single-day.holiday-cell.school-holiday-cell:not([class*="entry-"]) { background: rgba(96, 165, 250, .26) !important; }
html.dark-mode body.app-body .single-day.holiday-cell.school-holiday-cell.weekend:not([class*="entry-"]) { background: rgba(96, 165, 250, .40) !important; }
html.dark-mode body.app-body .single-day.holiday-cell::before {
    background: #fb923c;
    box-shadow: 0 0 0 1.5px rgba(12, 20, 16, .75);
}

/* --- Druck: Punkt und Flächen mitdrucken ----------------------------- */
@media print {
    body.app-body .single-day.holiday-cell::before {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --- 2.2.3: Kleintext der Zeiterfassung im Dark Mode ------------------- */
/* .time-duration-cell small (Pausendauer, z. B. "28 Min.") trug die
   Light-Mode-Farbe #667085 und kam auf dunklem Grund nur auf 2,99:1.
   Fiel erst mit echten Zeiterfassungsdaten auf. */
html.dark-mode body.app-body .time-duration-cell small { color: var(--pp-muted); }

/* ======================================================================
   PersonalPlaner 2.3.0 — Mobiles Mehr-Menü, Einstellungs-Tabs, Suchfeld

   Drei zusammenhängende Befunde der mobilen Ansicht:
   1. Abmelden war mobil auf KEINER Seite erreichbar - der eine Logout
      sitzt in der Sidebar, der andere im .main-header, beide sind unter
      700px ausgeblendet. Jetzt im Mehr-Menü, rot abgesetzt.
   2. "Mehr" sprang direkt auf /einstellungen, obwohl "•••" ein Menü
      verspricht. Jetzt ein Sheet mit allen Bereichen, die in der
      Viererleiste keinen Platz haben (für Mitarbeiter waren Personalakte
      und Urlaub mobil bisher gar nicht erreichbar).
   3. Die Einstellungs-Tabs brachen auf 199px Höhe um. Jetzt eine Zeile,
      seitlich wischbar - gleiches Prinzip wie die Chips im Eintrags-Dock.
   ====================================================================== */

/* --- Mehr-Knopf in der unteren Leiste --------------------------------- */
.mobile-more-button {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
    font: inherit;
}
.mobile-more-button.active { color: var(--app-accent, #6f8e20); }

/* --- Sheet ------------------------------------------------------------ */
.mobile-more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(12, 20, 16, .45);
    opacity: 0;
    transition: opacity .2s ease;
}
.mobile-more-backdrop.open { opacity: 1; }
.mobile-more-backdrop[hidden],
.mobile-more-sheet[hidden] { display: none !important; }

.mobile-more-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    max-height: 88vh;
    overflow-y: auto;
    padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .32);
    transform: translateY(100%);
    transition: transform .22s ease;
}
.mobile-more-sheet.open { transform: translateY(0); }
.mobile-more-grip {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 2px;
    background: #dcdccf;
}
.mobile-more-links { display: grid; gap: 2px; }
.mobile-more-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 10px;
    color: #182126;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    border-radius: 12px;
    border-bottom: 1px solid #f2f1ea;
}
.mobile-more-links a:last-child { border-bottom: 0; }
.mobile-more-links a:active { background: #f5f4ec; }
.mobile-more-darkmode {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
    padding: 13px 10px;
    color: #182126;
    font-size: 15px;
    font-weight: 650;
    text-align: left;
    border: 1px solid #ecebe3;
    border-radius: 12px;
    background: #fbfaf5;
    box-shadow: none;
    cursor: pointer;
}
.mobile-more-darkmode small {
    margin-left: auto;
    padding: 3px 10px;
    color: #4d6d24;
    font-size: 11px;
    font-weight: 750;
    border-radius: 999px;
    background: #eef3e2;
}
.mobile-more-user {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 11px 10px 0;
    border-top: 1px solid #f2f1ea;
    font-size: 13px;
}
.mobile-more-user strong { display: block; color: #182126; font-size: 14px; }
.mobile-more-user small { color: #6b7280; font-size: 11.5px; }  /* 4,8:1 statt 3,3:1 */
.mobile-more-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
    padding: 14px;
    color: #b3261e;
    font-size: 15px;
    font-weight: 750;
    text-decoration: none;
    border-radius: 13px;
    background: #fdeceb;
}
.mobile-more-logout:active { background: #f9dbd9; }

/* --- Dark Mode -------------------------------------------------------- */
html.dark-mode body.app-body .mobile-more-sheet {
    color: var(--pp-ink);
    background: var(--pp-surface);
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .55);
}
html.dark-mode body.app-body .mobile-more-grip { background: rgba(255, 255, 255, .22); }
html.dark-mode body.app-body .mobile-more-links a { color: var(--pp-ink); border-bottom-color: rgba(255, 255, 255, .08); }
html.dark-mode body.app-body .mobile-more-links a:active { background: rgba(255, 255, 255, .07); }
html.dark-mode body.app-body .mobile-more-darkmode {
    color: var(--pp-ink);
    border-color: var(--pp-line);
    background: rgba(255, 255, 255, .05);
}
html.dark-mode body.app-body .mobile-more-darkmode small { color: #cfe3a8; background: rgba(141, 169, 50, .22); }
html.dark-mode body.app-body .mobile-more-user { border-top-color: rgba(255, 255, 255, .08); }
html.dark-mode body.app-body .mobile-more-user strong { color: var(--pp-ink); }
html.dark-mode body.app-body .mobile-more-user small { color: var(--pp-muted); }
html.dark-mode body.app-body .mobile-more-logout { color: #f3b8b5; background: rgba(248, 113, 113, .16); }

/* --- PWA-Installation ------------------------------------------------ */
.pwa-install-button {
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    border: 1px solid rgba(112, 142, 32, .28);
    background: #f0f5e6;
    color: #40551d;
    box-shadow: none;
}
.pwa-install-button:not([hidden]) { display: flex; }
.pwa-install-hint {
    margin: 8px 0 0;
    color: #5d6361;
    font-size: 12px;
    line-height: 1.45;
}
.mobile-more-install {
    margin-top: 8px;
    padding: 13px 10px;
    font-size: 15px;
    text-align: left;
    border-radius: 12px;
}
.mobile-more-install span { font-size: 17px; }
html.dark-mode body.app-body .mobile-more-install {
    color: #cfe3a8;
    border-color: rgba(141, 169, 50, .3);
    background: rgba(141, 169, 50, .14);
}
html.dark-mode body.app-body .pwa-install-hint { color: var(--pp-muted); }

@media (max-width: 700px) {
    .mobile-more-button {
        display: grid;
        place-items: center;
        gap: 2px;
    }

    /* Einstellungs-Tabs: eine Zeile statt 199px Umbruch */
    body.app-body .settings-tabs,
    body.app-body .settings-subtabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 7px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    body.app-body .settings-tabs::-webkit-scrollbar,
    body.app-body .settings-subtabs::-webkit-scrollbar { display: none; }
    body.app-body .settings-tabs a,
    body.app-body .settings-tabs button,
    body.app-body .settings-subtabs a,
    body.app-body .settings-subtabs button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* iOS zoomt beim Fokus, sobald ein Feld unter 16px liegt. Alle
       anderen Felder liegen bereits auf 16px, nur die Suche stand auf
       13px - deshalb sprang beim Antippen die Seite. */
    body.app-body .dashboard-search,
    body.app-body input[type="search"] { font-size: 16px; }
}

/* --- 2.3.1: Einstellungs-Formulare mobil untereinander ----------------- */
/* Die Mehrspalter der Einstellungen behielten mobil ihr Desktop-Raster:
   Im Hotel-Tab quetschten sich drei Felder auf 68/190/60 px, die
   Zeitzone-Auswahl zeigte nur noch "Eu", und Hinweistexte brachen Wort
   für Wort um. Unter 700 px stapeln die Formulare jetzt einspaltig.
   Die Wochentag-Auswahl und die Theme-Vorschau bleiben mehrspaltig -
   dort sind schmale Spalten gewollt. */
@media (max-width: 700px) {
    body.app-body .settings-grid-form,
    body.app-body .minimum-form {
        grid-template-columns: 1fr;
        gap: 13px;
    }
    /* Wichtig: Einzelne Kinder tragen grid-column: span 2 (z. B. die
       Logo-Vorschau). Bei nur einer definierten Spalte erzeugt das eine
       implizite zweite Spalte, in die dann alle übrigen Felder rutschen -
       genau daher kamen die 226/93-px-Paare. Deshalb spannen mobil alle
       direkten Kinder über die volle Breite. */
    body.app-body .settings-grid-form > *,
    body.app-body .minimum-form > * {
        grid-column: 1 / -1;
    }
    body.app-body .settings-grid-form input,
    body.app-body .settings-grid-form select,
    body.app-body .settings-grid-form textarea,
    body.app-body .minimum-form input,
    body.app-body .minimum-form select {
        width: 100%;
    }
    body.app-body .settings-grid-form button,
    body.app-body .minimum-form button { justify-self: start; }

    /* Checkboxen sind ebenfalls input-Elemente. Die allgemeine 100%-Regel
       darf sie nicht auf die Formularbreite aufblasen, sonst landet der
       Beschriftungstext außerhalb des Viewports. */
    body.app-body .settings-grid-form .settings-check {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        min-width: 0;
        white-space: normal;
        line-height: 1.35;
    }
    body.app-body .settings-grid-form .settings-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 1px 0 0;
    }

    /* Die untere Navigation behandelt Links und den Mehr-Knopf identisch.
       Das !important neutralisiert das globale grüne Standard-Buttondesign,
       das andernfalls den vierten Navigationsplatz vollständig füllt. */
    body.app-body .mobile-bottom-nav {
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding: 4px max(8px, env(safe-area-inset-right, 0px))
                 env(safe-area-inset-bottom, 0px)
                 max(8px, env(safe-area-inset-left, 0px));
    }
    body.app-body .mobile-bottom-nav > a,
    body.app-body .mobile-bottom-nav > .mobile-more-button {
        min-width: 0;
        min-height: 52px;
        padding: 3px 2px;
        color: #5d6361;
        font-size: 9px;
        font-weight: 600;
        line-height: 1.15;
        border: 0;
        border-radius: 10px;
        background: transparent !important;
        box-shadow: none !important;
        transform: none;
    }
    body.app-body .mobile-bottom-nav > .mobile-more-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        justify-self: stretch;
    }
    body.app-body .mobile-bottom-nav > .mobile-more-button > span:first-child {
        color: #3e4643;
        font-size: 18px;
        line-height: 1;
    }
    body.app-body .mobile-bottom-nav > .mobile-more-button.active,
    body.app-body .mobile-bottom-nav > .mobile-more-button.active > span:first-child {
        color: var(--pp-olive-dark);
        background: rgba(126, 157, 40, .1) !important;
    }
    html.dark-mode body.app-body .mobile-bottom-nav > .mobile-more-button {
        color: #aeb7b6;
        background: transparent !important;
    }
    html.dark-mode body.app-body .mobile-bottom-nav > .mobile-more-button > span:first-child {
        color: #d8dedd;
    }
    html.dark-mode body.app-body .mobile-bottom-nav > .mobile-more-button.active,
    html.dark-mode body.app-body .mobile-bottom-nav > .mobile-more-button.active > span:first-child {
        color: var(--pp-olive);
        background: rgba(141, 169, 50, .14) !important;
    }
}

/* Abschluss-Overrides für das 2.4.0-Layout; bewusst am Dateiende, weil
   ältere Versionsblöcke davor dieselben Grundkomponenten gestalten. */
@media (min-width: 701px) {
    body.app-body .sidebar {
        position: fixed;
        display: flex;
        flex-direction: column;
        height: 100svh;
        overflow: hidden;
    }
    body.app-body .sidebar nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    body.app-body .sidebar-footer { flex: 0 0 auto; margin-top: 12px; }
}

body.app-body .settings-tabs {
    border-color: var(--pp-line);
    background: var(--pp-surface);
}
body.app-body .settings-tabs a {
    color: var(--pp-ink);
    background: color-mix(in srgb, var(--pp-ink) 5%, var(--pp-surface));
}
body.app-body .settings-tabs a.active {
    color: #fff;
    background: var(--pp-olive-dark);
}

@media (max-width: 700px) {
    body.app-body .calendar-toolbar { display: none !important; }
    body.app-body .dashboard-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }
    body.app-body .status-card {
        display: flex;
        min-height: 82px;
        padding: 12px;
    }
    body.app-body .status-card:nth-child(n+4) { display: flex; }
    body.app-body .status-card strong { font-size: 12px; line-height: 1.25; }
    body.app-body .status-card span { font-size: 25px; }
}

/* Login: Hotelkennung besser lesbar. Die leichte Bildvergrößerung hilft
   insbesondere Logos mit großzügigem Weißraum in der hochgeladenen Datei. */
.login-v4 .login-brand-mark {
    width: 84px;
    height: 84px;
    padding: 5px;
    overflow: hidden;
    border-radius: 20px;
}
.login-v4 .login-logo {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    transform: scale(1.28);
}
.login-v4 .login-side-top { gap: 18px; }
.login-v4 .login-hotel-name {
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.18;
    letter-spacing: .01em;
}

@media (max-width: 860px) {
    .login-v4 .login-brand-mark {
        width: 76px;
        height: 76px;
        border-radius: 18px;
    }
    .login-v4 .login-side-top { gap: 16px; }
    .login-v4 .login-hotel-name { font-size: clamp(18px, 4.8vw, 22px); }
}

@media (max-width: 370px) {
    .login-v4 .login-brand-mark { width: 68px; height: 68px; }
    .login-v4 .login-hotel-name { font-size: 17px; }
}