*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', Arial, sans-serif; background: #f4f6f9; color: #333; min-height: 100vh; }

  /* ── SCREENS ── */
  .screen { display: none; }
  .screen.active { display: block; }

  /* ── LOGIN ── */
  #loginScreen {
    min-height: 100vh;
    background: linear-gradient(160deg, #1565C0 0%, #1976D2 50%, #43A047 100%);
    display: none; align-items: center; justify-content: center;
  }
  #loginScreen.active { display: flex; }
  .login-box {
    background: white; border-radius: 20px; padding: 40px 36px;
    width: 400px; max-width: 95vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    display: flex; flex-direction: column; gap: 18px;
    overflow: hidden;
  }
  .login-logo {
    font-size: 32px; font-weight: 900; color: #1565C0;
    letter-spacing: -1px; display: flex; align-items: center; justify-content: center;
    gap: 4px;
  }
  .login-logo-dot { width: 8px; height: 8px; background: #43A047; border-radius: 50%; margin-bottom: 14px; }
  .login-slogan { text-align: center; font-size: 13px; color: #90A4AE; margin-top: -10px; }
  .login-title { font-size: 16px; font-weight: 700; color: #1A2840; text-align: center; }
  .login-field { display: flex; flex-direction: column; gap: 5px; }
  .login-label { font-size: 12px; font-weight: 700; color: #546E7A; }
  .login-input {
    border: 1.5px solid #E3EAF3; border-radius: 10px; padding: 11px 14px;
    font-size: 14px; font-family: inherit; background: #F4F7FB; color: #1A2840;
    outline: none; transition: border-color 0.15s;
    width: 100%; box-sizing: border-box;
  }
  .login-input:focus { border-color: #1976D2; background: white; }
  .login-btn {
    height: 48px; border-radius: 12px; border: none;
    background: linear-gradient(135deg, #1565C0, #1976D2);
    color: white; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: opacity 0.15s;
  }
  .login-btn:hover { opacity: 0.9; }
  .login-btn.green { background: linear-gradient(135deg, #2E7D32, #43A047); }
  .login-divider { display: flex; align-items: center; gap: 10px; }
  .login-divider hr { flex: 1; border: none; border-top: 1px solid #E3EAF3; }
  .login-divider span { font-size: 12px; color: #B0BEC5; }
  .login-error { background: #FEE2E2; color: #C0392B; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; display: none; }
  .login-switch { text-align: center; font-size: 13px; color: #90A4AE; }
  .login-switch a { color: #1976D2; cursor: pointer; font-weight: 700; text-decoration: none; }

  /* ── HEADER ── */
  .header {
    background: linear-gradient(135deg, #1565C0 0%, #1976D2 60%, #2196F3 100%);
    padding: 12px 24px; display: flex; align-items: center; gap: 14px;
    box-shadow: 0 2px 12px rgba(21,101,192,0.25);
  }
  .header-logo { font-size: 22px; font-weight: 800; color: white; letter-spacing: -0.5px; display: flex; align-items: center; }
  .logo-dot { width: 6px; height: 6px; background: #43A047; border-radius: 50%; margin-left: 2px; margin-bottom: 10px; }
  .header-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.25); }
  .nav-btn {
    background: rgba(255,255,255,0.18); border: none; border-radius: 8px;
    padding: 6px 14px; color: white; font-size: 13px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.15s; white-space: nowrap;
  }
  .nav-btn:hover { background: rgba(255,255,255,0.28); }
  .nav-btn.green { background: #43A047; }
  .nav-btn.green:hover { background: #388E3C; }
  .nav-btn.red { background: rgba(229,57,53,0.8); }
  .header-center { flex: 1; text-align: center; }
  .header-kw { font-size: 16px; font-weight: 800; color: white; }
  .header-date { font-size: 11px; color: rgba(255,255,255,0.75); }
  .header-spacer { flex: 1; }
  .sync-badge {
    background: #E8F5E9; color: #2E7D32; border: 1px solid #C8E6C9;
    border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 700; white-space: nowrap;
  }
  .sync-badge.saving { background: #FFF8E1; color: #F57F17; border-color: #FFE082; }
  .sync-badge.error { background: #FEE2E2; color: #C0392B; border-color: #FFCDD2; }

  /* ── OFFENE AUFGABEN (todoPanel) — sticky nur innerhalb der Kolonnen ──
     Fund 13.08.2026: soll beim Scrollen durch mehrere Kolonnen sichtbar
     bleiben, aber NICHT dauerhaft am Bildschirmrand kleben — deshalb sticky
     mit #planMitTodoWrap (umschließt nur todoPanel+planContent, siehe
     index.html) als Bezugsrahmen: sobald die letzte Kolonne durchgescrollt
     ist, wandert das Panel mit dem Footer normal weiter aus dem Bild. */
  #todoPanel { position: sticky; top: 0; z-index: 60; }

  /* ── TOOLBAR ── */
  .toolbar {
    display: flex; align-items: center; gap: 10px; padding: 10px 24px;
    background: white; border-bottom: 1px solid #dce3ec; flex-wrap: wrap;
  }
  .toolbar-btn {
    padding: 8px 16px; border-radius: 6px; border: none;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all 0.15s; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  }
  .tb-green { background: #43A047; color: white; }
  .tb-green:hover { background: #388E3C; }
  .tb-blue { background: #1565C0; color: white; }
  .tb-blue:hover { background: #1251A3; }
  .filter-select {
    padding: 7px 12px; border: 1.5px solid #ced4da; border-radius: 6px;
    font-size: 13px; font-weight: 600; background: white; color: #374151;
  }
  .toolbar-sep { width: 1px; height: 28px; background: #dee2e6; flex-shrink: 0; }
  .weekend-toggle { display: flex; gap: 6px; margin-left: auto; }
  .wknd-btn {
    padding: 7px 14px; border-radius: 6px; border: 1.5px solid #ced4da;
    background: white; font-size: 13px; font-weight: 700; cursor: pointer; color: #6c757d; transition: all 0.15s;
  }
  .wknd-btn.active { background: #E3F2FD; border-color: #1976D2; color: #1565C0; }

  /* ── KW ÜBERSICHT ── */
  #kwScreen { padding-bottom: 40px; }
  .kw-hero {
    background: linear-gradient(125deg, #1f3d5b 0%, #1976D2 55%, #2196F3 100%);
    color: white; padding: 20px 24px; margin-bottom: 16px;
  }
  .kw-hero-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
  .kw-hero-sub { font-size: 14px; opacity: 0.85; }
  .kw-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    padding: 0 24px 16px;
  }
  .kw-stat {
    background: white; border: 1px solid #d8e1eb; border-radius: 10px; padding: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  }
  .kw-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #677483; margin-bottom: 4px; }
  .kw-stat-value { font-size: 24px; font-weight: 800; color: #1e2b39; }
  .kw-toolbar { display: flex; gap: 10px; padding: 0 24px 12px; align-items: center; }
  .kw-jahr-btn {
    padding: 8px 16px; border-radius: 6px; border: none;
    font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s;
  }
  .kw-jahr-btn.active { background: #1565C0; color: white; }
  .kw-jahr-btn.inactive { background: #E3EAF3; color: #546E7A; }
  .kw-jahr-btn.inactive:hover { background: #D0DAE8; }
  .kw-legend { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
  .kw-legend-chip {
    display: flex; align-items: center; gap: 5px;
    border: 1px solid #d8e0e8; background: white; border-radius: 20px;
    padding: 4px 10px; font-size: 12px; color: #415366; font-weight: 600;
  }
  .legend-dot { width: 8px; height: 8px; border-radius: 50%; }
  .kw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 24px; }
  .kw-card {
    background: white; border: 1.5px solid #E3EAF3; border-radius: 10px;
    padding: 14px 16px; cursor: pointer; transition: all 0.15s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  }
  .kw-card:hover { border-color: #90A4AE; transform: translateX(2px); }
  .kw-card.aktuelle { background: #5cb85c; border-color: #4cae4c; box-shadow: 0 4px 12px rgba(92,184,92,0.3); }
  .kw-card.naechste { background: #E3F2FD; border-color: #1976D2; }
  .kw-card.vergangen { background: #f1f3f5; border-color: #d6dbe1; }
  .kw-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
  .kw-card-title { font-size: 15px; font-weight: 800; color: #1f2e3d; }
  .kw-card.aktuelle .kw-card-title { color: white; }
  .kw-card.naechste .kw-card-title { color: #1565C0; }
  .kw-card.vergangen .kw-card-title { color: #7d8791; }
  .kw-card-range { font-size: 12px; color: #4f5f6f; font-weight: 600; }
  .kw-card.aktuelle .kw-card-range { color: rgba(255,255,255,0.85); }
  .kw-badge {
    font-size: 10px; font-weight: 800; border-radius: 20px; padding: 3px 8px;
    background: white; color: #2f7d32; border: 1px solid #c5e6c5; white-space: nowrap;
  }
  .kw-badge.blau { color: #1565C0; border-color: #BBDEFB; }

  /* ── WOCHENPLANUNG TABLE ── */
  #planScreen { padding-bottom: 40px; }
  .table-wrap { padding: 16px 24px 40px; overflow-x: auto; }
  .plan-table {
    width: 100%; border-collapse: collapse; background: white;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06); min-width: 700px;
    table-layout: fixed;
  }
  .plan-table col { width: auto; }
  .plan-table thead th {
    background: linear-gradient(180deg, #43A047 0%, #388E3C 100%);
    color: white; font-size: 14px; font-weight: 700;
    padding: 12px 14px; text-align: center;
    border-right: 1px solid rgba(255,255,255,0.15);
  }
  .plan-table thead th:last-child { border-right: none; }
  .th-day { font-size: 16px; font-weight: 800; }
  .th-date { font-size: 11px; opacity: 0.85; margin-top: 2px; }
  .th-today { background: linear-gradient(180deg, #E65100 0%, #BF360C 100%) !important; }
  .th-feiertag { background: linear-gradient(180deg, #C62828 0%, #8E0000 100%) !important; }
  .th-feiertag-label { font-size: 10px; opacity: 0.9; margin-top: 2px; font-weight: 700; }

  /* ── SYNC-STATUS-BADGE ("Gespeichert HH:MM:SS / Name") ──
     Bug-Fix (18.08.2026): Badge stand bisher als Inline-Style direkt im HTML,
     position:fixed mit z-index:9999 — dadurch schwebte es über WIRKLICH allem,
     auch über Modals (z-index:1000) und über normalen Tabelleninhalten, die
     zufällig beim Scrollen unter diese Bildschirmecke gerieten (z.B. das
     Kolonne-Löschen-X in der Wochenplanung, der Speichern-Button im
     "Mitarbeiter anlegen"-Modal). Da das Badge eine reine Anzeige ohne eigenen
     Klick-Handler ist, macht pointer-events:none es "klick-durchlässig" —
     darunterliegende Buttons bleiben immer bedienbar, auch wenn sich das
     Badge optisch mal mit ihnen überschneidet. z-index zusätzlich unter das
     Modal-Niveau (1000) gesenkt, damit es bei offenen Modals dahinter
     verschwindet statt davor zu schweben. */
  .y-speicher-status {
    position: fixed; bottom: 14px; right: 14px; z-index: 900;
    background: rgba(30,43,57,0.92); color: rgba(255,255,255,0.9);
    font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 20px;
    white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: none;
  }

  /* ── TOASTS ── */
  #toastContainer {
    position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px; max-width: 360px;
  }
  .wedo-toast {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid; border-radius: 10px; padding: 12px 14px;
    font-size: 13px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .wedo-toast-sichtbar { opacity: 1; transform: translateY(0); }

  /* ── BESTÄTIGEN-DIALOG (Ersatz für confirm()) ── */
  #bestaetigenModal .modal-box { max-width: 380px; }
  .bestaetigen-titel { font-size: 16px; font-weight: 800; color: #1e2b39; margin-bottom: 8px; }
  .bestaetigen-text { font-size: 14px; color: #546E7A; line-height: 1.5; margin-bottom: 18px; }
  .modal-btn-danger {
    background: #C0392B; color: white; border: none; border-radius: 8px;
    padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
  }
  .plan-table tbody td {
    padding: 10px; border-right: 1px solid #eef2f5;
    border-bottom: 1px solid #eef2f5; vertical-align: top; min-width: 160px;
    /* KEINE transition auf height: equalizeRowHeights() (planung.js) setzt die
       Zellhöhe bei jedem Rendern der Wochenplanung neu (Start, Walter-Live-
       Update, Kolonne anlegen/löschen, usw.). Mit einer CSS-Transition würde
       der Browser diese Höhenänderung jedes Mal sichtbar über 0,1s animieren
       — genau das sichtbare "Springen/Flackern" der Wochenplanung. */
  }
  .plan-table tbody tr { height: 1px; } /* Allows td height:100% to work */
  .cell-inner { min-height: 80px; }
  .plan-table tbody td:last-child { border-right: none; }
  .plan-table tbody td.weekend-col { background: #FAFBFC; }
  .plan-table tbody td.feiertag-col { background: #FDECEA; }
  .plan-table tbody td.today-col { background: #FFF8F0; }
  .cell-inner { display: flex; flex-direction: column; gap: 5px; min-height: 80px; }
  .cell-top-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .bauleiter-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #E3EAF3; border-radius: 5px; padding: 2px 8px;
    font-size: 11px; font-weight: 800; color: #34495E; min-height: 22px;
    /* Bug-Fix (18.08.2026): <select> als Flex-Kind schrumpft standardmäßig NICHT
       unter seine Inhaltsbreite (min-width:auto ist der Browser-Default für
       Formularelemente) — bei langen Konto-/Bauleiternamen (z.B. "Entwicklung
       Account") sprengte das Dropdown den schmalen .cell-top-row auf dem Handy
       und drückte das Löschen-X (.del-btn) aus dem sichtbaren Bereich. min-width:0
       erlaubt das Schrumpfen, text-overflow zeigt "..." statt abzuschneiden. */
    flex: 1 1 auto; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bauleiter-tag.empty { background: #F1F3F5; color: #B0BEC5; font-style: italic; font-weight: 500; }
  .del-btn { background: none; border: none; color: #ccc; font-size: 15px; cursor: pointer; padding: 1px 3px; transition: color 0.12s; flex-shrink: 0; }
  .del-btn:hover { color: #c0392b; }
  .field-lbl { font-size: 10px; font-weight: 800; color: #90A4AE; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 1px; }
  .ma-wrap { position: relative; }
  .ma-field, .auf-field {
    width: 100%; border: 1px solid #dde3eb; border-radius: 5px;
    padding: 5px 7px; font-size: 12px; font-family: inherit;
    resize: none; background: white; color: #1e2b39;
    line-height: 1.4; min-height: 32px; overflow-y: hidden;
    transition: border-color 0.15s, background 0.15s;
  }
  .ma-field:focus, .auf-field:focus { border-color: #1976D2; outline: none; background: #EAF1FB; }
  .auf-field { min-height: 44px; }
  .sug-box {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    background: white; border: 1px solid #c5d5e8; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12); z-index: 300;
    padding: 5px; display: flex; flex-wrap: wrap; gap: 4px;
  }
  .sug-box.hidden { display: none; }
  .sug-chip {
    background: #EEF4FB; border: 1px solid #C7D3DF; border-radius: 20px;
    padding: 2px 9px; font-size: 11px; font-weight: 600; color: #24405E; cursor: pointer;
  }
  .sug-chip:hover { background: #D5E6F7; }
  /* Fund 13.08.2026: Markierung für Pfeiltasten-Navigation in der Namens-Vorschlagsliste */
  .sug-chip-aktiv { background: #1565C0; border-color: #1565C0; color: white; }
  .add-kol-row td { padding: 10px 24px; border-bottom: 1px solid #eef2f5; }
  .add-kol-btn {
    width: 100%; background: #F0FBF4; border: 1.5px dashed #A5D6A7;
    border-radius: 8px; padding: 10px; font-size: 13px; font-weight: 700;
    color: #2E7D32; cursor: pointer; text-align: center; transition: all 0.15s;
  }
  .add-kol-btn:hover { background: #E8F5E9; }
  .free-row td { padding: 8px 10px; border-right: 1px solid #eef2f5; border-top: 1px dashed #dee2e6; vertical-align: top; }
  .free-row td:last-child { border-right: none; }
  .free-title { font-size: 10px; font-weight: 800; color: #90A4AE; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
  .free-names { display: flex; flex-wrap: wrap; gap: 4px; }
  .free-chip { background: #F1F3F5; border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 600; color: #4A5568; }

  /* ── LOADING ── */
  .loading { text-align: center; padding: 60px 20px; color: #90A4AE; font-size: 15px; }
  .spinner {
    width: 36px; height: 36px; border: 3px solid #E3EAF3;
    border-top-color: #1976D2; border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto 16px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── FOOTER ── */
  .footer { text-align: center; padding: 14px; font-size: 12px; color: #90A4AE; border-top: 1px solid #E3EAF3; background: white; margin-top: 10px; }


  /* ── ABWESENHEIT ROWS ── */
  .abw-field {
    width: 100%; border: 1px solid #dde3eb; border-radius: 5px;
    padding: 5px 7px; font-size: 12px; font-family: inherit;
    resize: none; background: white; color: #1e2b39;
    line-height: 1.4; min-height: 32px; overflow-y: hidden;
    transition: border-color 0.15s;
  }
  .urlaub-td .abw-field:focus { border-color: #F57F17; outline: none; background: #FFFBF0; }
  .krank-td .abw-field:focus { border-color: #E53935; outline: none; background: #FFF5F5; }
  .doppelt-verplant { background: #FFF3CD !important; border: 2px solid #FF6B35 !important; }
  .doppelt-badge {
    background: #FF6B35; color: white; font-size: 10px; font-weight: 800;
    border-radius: 4px; padding: 1px 5px; margin-left: 4px;
  }
  .abw-row td { border-bottom: 1px solid #eef2f5; border-right: 1px solid #eef2f5; padding: 8px 10px; vertical-align: top; }
  .abw-row td:last-child { border-right: none; }
  .abw-td { min-width: 160px; }
  .abw-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
  .urlaub-td { background: #FFF9EC !important; }
  .urlaub-td .abw-label { color: #F57F17; }
  .krank-td { background: #FEF2F2 !important; }
  .krank-td .abw-label { color: #C0392B; }
  .abw-names { display: flex; flex-wrap: wrap; gap: 4px; min-height: 24px; }
  .abw-chip { border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
  .abw-chip.u { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
  .abw-chip.k { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
  .abw-empty { color: #D1D5DB; font-size: 12px; }

  /* ── URLAUB KALENDER in Stammdaten ── */
  .urlaub-ma-block { background: white; border-radius: 10px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; border: 1px solid #E3EAF3; }
  .urlaub-ma-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; background: #F4F7FB; transition: background 0.12s; }
  .urlaub-ma-header:hover { background: #E8F0F8; }
  .urlaub-ma-name { font-size: 14px; font-weight: 700; color: #1e2b39; }
  .urlaub-ma-summary { font-size: 12px; color: #90A4AE; display: flex; gap: 10px; }
  .urlaub-ma-summary span { display: flex; align-items: center; gap: 3px; }
  .urlaub-ma-body { display: none; padding: 12px 16px; }
  .urlaub-ma-body.open { display: block; }
  .urlaub-monat-block { margin-bottom: 12px; }
  .urlaub-monat-header { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #90A4AE; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  .urlaub-monat-header:hover { color: #546E7A; }
  .urlaub-monat-body { display: none; }
  .urlaub-monat-body.open { display: flex; flex-wrap: wrap; gap: 4px; }
  .urlaub-tag {
    width: 36px; height: 36px; border-radius: 6px; border: 1.5px solid #E3EAF3;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; cursor: pointer; background: white;
    color: #546E7A; transition: all 0.12s; position: relative;
  }
  .urlaub-tag:hover { border-color: #1976D2; background: #EAF1FB; }
  .urlaub-tag.u { background: #FEF3C7; border-color: #F59E0B; color: #92400E; }
  .urlaub-tag.k { background: #FEE2E2; border-color: #EF4444; color: #991B1B; }
  .urlaub-tag.we { background: #F8F9FA; color: #CED4DA; cursor: default; border-color: #F0F0F0; }
  .urlaub-tag.vergangen { opacity: 0.4; }
  .typ-picker { position: absolute; top: 100%; left: 0; z-index: 400; background: white; border: 1px solid #E3EAF3; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); padding: 6px; display: flex; gap: 5px; white-space: nowrap; }
  .typ-btn { padding: 5px 12px; border-radius: 5px; border: none; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
  .typ-btn.u { background: #FEF3C7; color: #92400E; }
  .typ-btn.k { background: #FEE2E2; color: #991B1B; }
  .typ-btn.del { background: #F1F3F5; color: #6c757d; }

  /* ── STAMMDATEN ── */
  .sd-tab {
    padding: 12px 20px; border: none; background: none; cursor: pointer;
    font-size: 14px; font-weight: 700; color: #6c757d;
    border-bottom: 3px solid transparent; transition: all 0.15s; font-family: inherit;
  }
  .sd-tab.active { color: #1565C0; border-bottom-color: #1565C0; }
  .sd-tab:hover { color: #1565C0; }
  /* Bug-Fix (18.08.2026): .ma-table (Kundenakte, Personal, vermutlich auch
     Fuhrpark) hatte anders als die Wochenplanung (.table-wrap) GAR KEINEN
     scrollbaren Wrapper — die Tabelle wurde einfach vom Viewport abgeschnitten,
     ohne Möglichkeit, per Wisch-Geste an die restlichen Spalten zu kommen.
     min-width erzwingt, dass die Spalten nicht bis zur Unlesbarkeit
     zusammengequetscht werden, sondern echtes horizontales Scrollen greift —
     dafür brauchen die Eltern-Container (#kundenakteContent, #maList, #fzList
     u.ä.) overflow-x:auto, siehe weiter unten in der 640px-Media-Query bzw.
     direkt hier für alle Bildschirmgrößen. */
  #kundenakteContent, #maList, #fzList, #adminList { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ma-table { min-width: 640px; }
  .ma-table {
    width: 100%; border-collapse: collapse; background: white;
    border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  }
  .ma-table th {
    background: #F4F7FB; padding: 11px 14px; text-align: left;
    font-size: 12px; font-weight: 800; color: #546E7A; text-transform: uppercase;
    letter-spacing: 0.4px; border-bottom: 1.5px solid #E3EAF3;
  }
  .ma-table td {
    padding: 11px 14px; border-bottom: 1px solid #f0f4f8;
    font-size: 13px; color: #1e2b39; vertical-align: middle;
  }
  .ma-table tr:last-child td { border-bottom: none; }
  .ma-table tr:hover td { background: #F8FAFC; }
  .aktiv-badge {
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 700;
  }
  .aktiv-badge.ja { background: #E8F5E9; color: #2E7D32; }
  .aktiv-badge.nein { background: #FEE2E2; color: #C0392B; }
  .rolle-badge {
    display: inline-flex; border-radius: 20px; padding: 2px 9px;
    font-size: 11px; font-weight: 700; background: #E3F2FD; color: #1565C0;
  }
  .rolle-badge.admin { background: #F3E5F5; color: #7B1FA2; }
  .rolle-badge.assistent { background: #E8F5E9; color: #2E7D32; }
  .edit-btn {
    padding: 4px 10px; border-radius: 5px; border: 1px solid #dde3eb;
    background: white; font-size: 12px; font-weight: 600; cursor: pointer;
    color: #546E7A; transition: all 0.12s;
  }
  .edit-btn:hover { background: #E3F2FD; border-color: #1976D2; color: #1565C0; }
  .modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center; }
  .modal-bg.open { display:flex; }
  .modal-box { background:white; border-radius:14px; padding:28px; width:460px; max-width:95vw; box-shadow:0 10px 40px rgba(0,0,0,0.2); display:flex; flex-direction:column; gap:16px; }
  /* Breitere Variante für umfangreichere Formulare (z.B. Personal-Modal) —
     verhindert, dass viele Felder gezwungenermaßen alle untereinanderstehen
     müssen; Basis-.modal-box bleibt für alle anderen (Login, Bestätigen,
     Fahrzeug, Kunde, ...) unverändert bei 460px. */
  .modal-box-breit { width: 820px; }
  .modal-header { display:flex; align-items:center; justify-content:space-between; }
  .modal-title { font-size:18px; font-weight:800; color:#1e2b39; }
  .modal-close { background:#f1f3f5; border:none; border-radius:8px; width:32px; height:32px; font-size:18px; cursor:pointer; color:#555; display:flex; align-items:center; justify-content:center; }
  .modal-close:hover { background:#e2e6ea; }
  .modal-btn { padding:10px 24px; border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; }
  .modal-btn-ok { background:#43A047; color:white; }
  .modal-btn-ok:hover { background:#388E3C; }
  .modal-btn-cancel { background:#e2e6ea; color:#495057; }

  @media print {
    .header .nav-btn, .toolbar, .del-btn, .add-kol-row, .footer, .sug-box, .export-dropdown { display: none !important; }
    body { background: white; }
    .table-wrap { padding: 0; }
    .plan-table { box-shadow: none; }
  }

  /* ══ EXPORT DROPDOWN (PDF / Word) ═══════════════════════════ */
  .export-dropdown { position: relative; }
  .export-menu {
    display: none; position: absolute; top: 100%; right: 0; margin-top: 6px;
    background: white; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    overflow: hidden; min-width: 190px; z-index: 50;
  }
  .export-menu.open { display: block; }
  .export-menu button {
    display: block; width: 100%; text-align: left; padding: 11px 16px;
    border: none; background: white; cursor: pointer; font-size: 13px; font-weight: 600;
    color: #1e2b39; border-bottom: 1px solid #f0f2f5;
  }
  .export-menu button:last-child { border-bottom: none; }
  .export-menu button:hover { background: #f4f7fb; }

  /* ══ DRUCKKOPF (PDF-Druckansicht) ═══════════════════════════ */
  .print-kopf {
    display: none; /* nur im eigenen Druckfenster sichtbar, siehe exportPlanPDF() */
  }
  .print-kopf-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid #1565C0; }
  .print-kopf-bild { max-height: 70px; max-width: 180px; object-fit: contain; }
  .print-kopf-mitte { flex: 1; text-align: center; padding: 0 16px; }
  .print-kopf-titel { font-size: 18px; font-weight: 800; color: #1e2b39; }
  .print-kopf-sub { font-size: 13px; color: #546E7A; margin-top: 2px; }
  .print-kopf-platzhalter { width: 180px; height: 70px; }

  /* ══ DASHBOARD ══════════════════════════════════════════════ */
  #dashboardScreen { background: linear-gradient(160deg, #1565C0 0%, #1976D2 40%, #43A047 100%); min-height: 100vh; }
  .dash-header {
    background: linear-gradient(135deg, #1565C0, #00838F);
    padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  }
  .dash-logo { color: white; font-size: 22px; font-weight: 900; display: flex; align-items: center; gap: 4px; }
  .dash-logo-dot { width: 8px; height: 8px; background: #43A047; border-radius: 50%; }
  .dash-subtitle { color: rgba(255,255,255,0.8); font-size: 14px; margin-left: 12px; }
  .dash-user { color: white; font-size: 13px; font-weight: 600; background: rgba(255,255,255,0.15); padding: 6px 14px; border-radius: 20px; display: flex; align-items: center; gap: 8px; }

  .dash-body { display: grid; grid-template-columns: 260px 1fr 300px; gap: 20px; padding: 24px; max-width: 1400px; margin: 0 auto; }

  /* Aktions-Menü */
  .dash-menu { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  .dash-menu-title { font-size: 12px; font-weight: 800; color: #90A4AE; margin-bottom: 14px; letter-spacing: 1px; text-transform: uppercase; }
  .dash-menu-btn {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 13px 16px; border-radius: 10px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 700; color: white; margin-bottom: 8px;
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .dash-menu-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
  .btn-personal { background: linear-gradient(135deg, #1565C0, #1976D2); }
  .btn-fuhrpark { background: linear-gradient(135deg, #00838F, #00ACC1); }
  .btn-admin    { background: linear-gradient(135deg, #E65100, #F57C00); }
  .btn-planung  { background: linear-gradient(135deg, #1565C0, #00838F); }
  .dash-kw-btns { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
  .dash-kw-btn {
    padding: 10px 16px; border-radius: 10px; border: none; cursor: pointer;
    font-size: 13px; font-weight: 700;
    color: white; transition: transform 0.1s;
  }
  .dash-kw-btn-aktiv { background: linear-gradient(135deg, #FFB300, #FFA000); }
  .dash-kw-btn-folge { background: linear-gradient(135deg, #78909C, #546E7A); }
  .dash-kw-btn:hover { transform: translateY(-1px); }

  /* Rechte Seite */
  .dash-right { display: flex; flex-direction: column; gap: 16px; }

  /* Stats */
  .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .stat-tile { background: white; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); border-top: 3px solid #1565C0; }
  .stat-tile:nth-child(2) { border-top-color: #00838F; }
  .stat-tile:nth-child(3) { border-top-color: #FFB300; }
  .stat-tile-header { font-size: 10px; font-weight: 800; color: #90A4AE; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
  .stat-tile-num { font-size: 28px; font-weight: 900; color: #1e2b39; }
  .stat-tile-label { font-size: 11px; color: #90A4AE; margin-top: 2px; }
  .stat-tile-sub { font-size: 12px; color: #546E7A; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
  .stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .dot-green { background: #43A047; }
  .dot-orange { background: #F57C00; }
  .dot-blue { background: #1565C0; }

  /* Notizen */
  .dash-notizen {
    background: white; border-radius: 16px; padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid #FFB300;
    flex: 1; overflow: hidden;
  }
  .dash-notizen-title { font-size: 15px; font-weight: 800; color: #1e2b39; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
  .dash-notizen-body { display: grid; grid-template-columns: 1fr 200px; gap: 16px; }
  /* Bug-Fix (18.08.2026): Meine Notizen / Team-Notizen standen bisher als
     Inline-Style (grid-template-columns:1fr 1fr) direkt im HTML — Inline-Styles
     schlagen jede Klassen-Media-Query, dadurch blieben die beiden Spalten auf
     dem Handy nebeneinander und viel zu schmal. Eigene Klasse dafür, damit die
     640px-Regel weiter unten greifen kann. */
  .dash-notizen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .notizen-list { background: #F8FAFB; border-radius: 10px; padding: 14px; min-height: 140px; border: 1px solid #E3EAF3; }
  .notizen-item { font-size: 13px; color: #546E7A; padding: 8px 0; border-bottom: 1px solid #f0f2f5; cursor: pointer; }
  .notizen-item:last-child { border-bottom: none; }
  .notizen-item:hover { color: #1565C0; }
  .notizen-add { margin-top: 10px; width: 100%; padding: 8px; border: 1.5px dashed #FFB300; border-radius: 8px; background: transparent; font-size: 12px; color: #F57C00; cursor: pointer; font-weight: 700; }
  .notizen-add:hover { background: #FFF8E1; }
  .todos-panel { background: #F8FAFB; border-radius: 10px; padding: 14px; border: 1px solid #E3EAF3; }
  .todos-title { font-size: 11px; font-weight: 800; color: #90A4AE; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
  .todo-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #546E7A; padding: 7px 0; border-bottom: 1px solid #f0f2f5; }
  .todo-row:last-child { border-bottom: none; }
  .todo-count { font-size: 16px; font-weight: 800; color: #1565C0; }
  .todo-count.warning { color: #E65100; }

  /* Bottom Buttons */
  .dash-bottom { display: flex; justify-content: center; gap: 12px; padding: 0 24px 28px; }
  .dash-bottom-btn {
    padding: 13px 32px; border-radius: 12px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 700; color: white;
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .dash-bottom-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
  .btn-plan { background: linear-gradient(135deg, #1565C0, #00838F); }
  .btn-berichte { background: linear-gradient(135deg, #FFB300, #F57C00); }
  .btn-einstellungen { background: linear-gradient(135deg, #78909C, #546E7A); }

  .dash-logout { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 12px; cursor: pointer; margin-left: 8px; padding: 4px 8px; border-radius: 6px; }
  .dash-logout:hover { color: white; background: rgba(255,255,255,0.1); }

  /* ══ PLAN AUSWAHL SCREEN ══════════════════════════════════ */
  #planAuswahlScreen, #berichteScreen { background: linear-gradient(160deg, #1565C0 0%, #1976D2 40%, #43A047 100%); min-height: 100vh; }
  .plan-auswahl-body { max-width: 900px; margin: 0 auto; padding: 32px 24px; }
  .plan-auswahl-title { color: white; font-size: 26px; font-weight: 900; margin-bottom: 6px; }
  .plan-auswahl-sub { color: rgba(255,255,255,0.8); font-size: 14px; margin-bottom: 32px; }
  .plan-auswahl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .plan-karte {
    background: white; border-radius: 16px; padding: 28px 24px;
    cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: flex; flex-direction: column; gap: 10px;
    border: 2px solid transparent;
  }
  .plan-karte:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.18); border-color: rgba(255,255,255,0.5); }
  .plan-karte.coming-soon { opacity: 0.55; cursor: not-allowed; }
  .plan-karte.coming-soon:hover { transform: none; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
  .plan-karte-icon { font-size: 40px; }
  .plan-karte-title { font-size: 20px; font-weight: 900; color: #1e2b39; }
  .plan-karte-desc { font-size: 13px; color: #546E7A; line-height: 1.5; }
  .plan-karte-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 800; margin-top: 4px; width: fit-content;
  }
  .badge-aktiv { background: #E8F5E9; color: #2E7D32; }
  .badge-bald { background: #FFF8E1; color: #F57F17; }
  .plan-karte-woche { border-top: 4px solid #1565C0; }
  .plan-karte-pflege { border-top: 4px solid #43A047; }
  .plan-karte-winter { border-top: 4px solid #00838F; }
  .plan-karte-jahres { border-top: 4px solid #FFB300; }

  /* ══ PFLEGEPLANUNG SCREEN ══════════════════════════════════ */
  #pflegeScreen { padding-bottom: 60px; }

  /* Kunde Trennbalken */
  .pflege-kunde-block { margin: 0 24px 0px; }
  .pflege-kunde-header {
    background: linear-gradient(135deg, #E65100, #F57C00);
    color: white; padding: 10px 16px; border-radius: 8px 8px 0 0;
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 20px;
  }
  .pflege-kunde-name { font-size: 15px; font-weight: 900; }
  .pflege-kunde-meta { font-size: 12px; opacity: 0.85; display: flex; gap: 16px; }
  .pflege-kunde-actions { display: flex; gap: 8px; }
  .pflege-kunde-btn {
    background: rgba(255,255,255,0.2); border: none; border-radius: 6px;
    color: white; font-size: 11px; font-weight: 700; padding: 4px 10px;
    cursor: pointer; transition: background 0.15s;
  }
  .pflege-kunde-btn:hover { background: rgba(255,255,255,0.35); }

  /* Pflegetabelle */
  .pflege-table-wrap { overflow-x: auto; margin: 0 24px; }
  .pflege-table {
    width: 100%; border-collapse: collapse; background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); min-width: 1100px;
    border-radius: 0 0 8px 8px; overflow: hidden;
  }
  .pflege-table thead th {
    background: #37474F; color: white; font-size: 11px; font-weight: 700;
    padding: 8px 10px; text-align: center; white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.1);
  }
  .pflege-table thead th:last-child { border-right: none; }
  .pflege-table thead th.ag-header { background: #455A64; }
  .pflege-table tbody td {
    padding: 7px 9px; border-right: 1px solid #eef2f5;
    border-bottom: 1px solid #eef2f5; font-size: 12px; color: #334155;
    vertical-align: middle;
  }
  .pflege-table tbody tr:hover td { background: #F8FAFB; }
  .pflege-table tbody td:last-child { border-right: none; }

  /* AG Zellen */
  .ag-cell {
    text-align: center; min-width: 68px; padding: 4px 6px !important;
    position: relative;
  }
  .ag-input {
    width: 100%; border: 1.5px solid #E3EAF3; border-radius: 6px;
    padding: 4px 5px; font-size: 11px; font-weight: 700; text-align: center;
    font-family: inherit; background: white; cursor: pointer;
    transition: all 0.15s; color: #334155;
  }
  .ag-input:focus { outline: none; border-color: #1976D2; }
  .ag-input.ag-leer { background: white; color: #B0BEC5; }
  .ag-input.ag-geplant { background: #FFF9C4; border-color: #F9A825; color: #E65100; font-weight: 800; }
  .ag-input.ag-erledigt { background: #E8F5E9; border-color: #43A047; color: #2E7D32; font-weight: 800; }
  .ag-input.ag-zukunft { background: #F5F5F5; border-color: #CFD8DC; color: #607D8B; }
  .ag-input.ag-inaktiv { background: #ECEFF1; border-color: #ECEFF1; color: #B0BEC5; cursor: not-allowed; }
  .ag-zaehler {
    text-align: center; font-size: 11px; font-weight: 800;
    color: #1565C0; background: #E3F2FD; border-radius: 6px;
    padding: 4px 8px; white-space: nowrap;
  }

  /* Pflege Toolbar */
  .pflege-toolbar {
    display: flex; align-items: center; gap: 10px; padding: 12px 24px;
    background: white; border-bottom: 1px solid #dce3ec; flex-wrap: wrap;
  }

  /* Kunde Modal */
  .kunde-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; display: none;
  }
  .kunde-modal-overlay.active { display: flex; }
  .kunde-modal {
    background: white; border-radius: 16px; padding: 28px;
    width: 560px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  }
  .kunde-modal-title { font-size: 18px; font-weight: 900; color: #1e2b39; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
  .kunde-modal-section { font-size: 11px; font-weight: 800; color: #90A4AE; text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 8px; }
  .kunde-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
  .kunde-modal-field { display: flex; flex-direction: column; gap: 4px; }
  .kunde-modal-label { font-size: 11px; font-weight: 700; color: #546E7A; }
  .kunde-modal-input {
    border: 1.5px solid #E3EAF3; border-radius: 8px; padding: 9px 12px;
    font-size: 13px; font-family: inherit; color: #1e2b39; background: #F8FAFB;
  }
  .kunde-modal-input:focus { outline: none; border-color: #1976D2; background: white; }

  /* Leistung Zeilen im Modal */
  .leistung-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .leistung-zeile {
    background: #F8FAFB;
    border-radius: 8px; padding: 8px 10px; border: 1px solid #E3EAF3;
  }
  .leistung-zeile input, .leistung-zeile select {
    border: 1px solid #E3EAF3; border-radius: 6px; padding: 6px 8px;
    font-size: 12px; font-family: inherit; background: white; color: #1e2b39;
    width: 100%; box-sizing: border-box;
  }
  .leistung-zeile input:focus, .leistung-zeile select:focus { outline: none; border-color: #1976D2; }
  .leistung-del-btn { background: none; border: none; color: #BDBDBD; cursor: pointer; font-size: 16px; padding: 2px 4px; }
  .leistung-del-btn:hover { color: #c0392b; }
  .add-leistung-btn {
    background: #F0FBF4; border: 1.5px dashed #A5D6A7; border-radius: 8px;
    padding: 8px; font-size: 12px; font-weight: 700; color: #2E7D32;
    cursor: pointer; width: 100%; text-align: center;
  }
  .add-leistung-btn:hover { background: #E8F5E9; }

  .pflege-empty {
    text-align: center; padding: 60px 20px; color: #90A4AE;
    font-size: 15px;
  }
  .pflege-empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ── WALTER ── */
.walter-spalte, #walterOverlay {
  background: white; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex; flex-direction: column; overflow: hidden;
}
.walter-spalte { height: calc(100vh - 220px); min-height: 420px; }
.walter-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #F0F2F5;
  font-size: 14px; font-weight: 800; color: #1e2b39; background: #F8F9FA;
}
.walter-verlauf { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.walter-msg { max-width: 88%; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.walter-msg-walter { background: #E3F2FD; color: #1e2b39; align-self: flex-start; border-bottom-left-radius: 3px; }
.walter-msg-nutzer { background: #1565C0; color: white; align-self: flex-end; border-bottom-right-radius: 3px; }
.walter-bestaetigen-bar { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid #F0F2F5; justify-content: flex-end; }
.walter-eingabe-zeile { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid #F0F2F5; }
.walter-eingabe-zeile input {
  flex: 1; border: 1.5px solid #E3EAF3; border-radius: 8px; padding: 9px 12px;
  font-size: 13px; font-family: inherit; background: #F4F7FB; color: #1A2840;
}
.walter-eingabe-zeile button {
  width: 38px; height: 38px; border-radius: 8px; border: none; background: #1565C0;
  color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.walter-eingabe-zeile button:hover { background: #0D47A1; }

#walterFloatBtn {
  position: fixed; bottom: 20px; left: 20px; z-index: 9998;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #1565C0, #0D47A1); color: white;
  box-shadow: 0 4px 14px rgba(21,101,192,0.4); cursor: pointer;
  align-items: center; justify-content: center;
}
#walterFloatBtn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(21,101,192,0.5); }

#walterOverlay {
  position: fixed; bottom: 84px; left: 20px; z-index: 9998;
  width: 340px; height: 460px;
  transform: scale(0.9) translateY(10px); opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#walterOverlay.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .dash-body { grid-template-columns: 1fr; }
  .walter-spalte { height: 380px; }
}

/* ══ MOBILE (Handy-Breite) ═══════════════════════════════════
   Fund vom 03.08.2026 (Handy-Screenshots): auf schmalen Bildschirmen fehlte
   "immer die Hälfte des Bildschirms". Ursache: .header (fast alle Screens
   außer Dashboard/Login) und .dash-header (Dashboard) sind flex-Zeilen OHNE
   flex-wrap mit mehreren fix breiten Elementen (Logo, Zurück-Button,
   Sync-Badge, Export-Dropdown, Benutzer-Badge, Abmelden) — auf einem
   ca. 375-430px breiten Handy-Bildschirm passt das nicht nebeneinander,
   die Seite wird dadurch insgesamt breiter als der Bildschirm und der
   rechte Teil ist nur per (nicht offensichtlichem) horizontalen Scrollen
   erreichbar. Das hat auch fest positionierte Elemente wie den
   Ladebildschirm mit betroffen. Fix: Header-Zeilen umbruchfähig machen
   (flex-wrap: wrap) statt sie zu quetschen, zusätzlich die verbleibenden
   Mehrspalten-Grids (Stats, Notizen, KW-Übersicht) auf eine Spalte stapeln.
   overflow-x:hidden ganz unten ist nur ein zusätzliches Sicherheitsnetz,
   NICHT der eigentliche Fix — sollte durch die Wrap-Regeln oben idealerweise
   nie greifen müssen. */
@media (max-width: 640px) {
  .header {
    flex-wrap: wrap;
    padding: 10px 14px;
    row-gap: 8px;
  }
  .header-center { flex: 1 1 100%; order: 3; text-align: center; }
  .header-spacer { display: none; } /* reiner Abstandshalter, auf schmalen Screens nicht nötig */

  .dash-header {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px 16px;
  }
  .dash-subtitle { display: none; } /* Platz sparen, Titel allein reicht auf dem Handy */
  .dash-user { font-size: 12px; padding: 5px 10px; flex-wrap: wrap; }

  .dash-body { padding: 14px; gap: 14px; }
  .dash-stats { grid-template-columns: 1fr; }
  .dash-notizen-body { grid-template-columns: 1fr; }
  .dash-notizen-grid { grid-template-columns: 1fr; }
  .y-speicher-status { font-size: 10px; padding: 4px 9px; bottom: 10px; right: 10px; }
  .kw-stats { grid-template-columns: 1fr; }
  .dash-bottom { flex-wrap: wrap; padding: 0 14px 20px; }
  .dash-bottom-btn { flex: 1 1 100%; }

  .toolbar { padding: 10px 14px; }

  /* Sicherheitsnetz, siehe Kommentar oben — greift im Normalfall nicht mehr,
     da die eigentlichen Ursachen (fehlendes flex-wrap) oben behoben sind. */
  html, body { overflow-x: hidden; }

  /* Fund vom 13.08.2026: #wbBuch (Wissensbank) und #nbBuch (Notizbuch) sind
     feste 2-Spalten-Grids (grid-template-columns: 1fr 2fr / 1fr 1.3fr) OHNE
     jede Media Query — auf schmalen Bildschirmen liefen beide zwangsläufig
     über den Rand. Fix: unter 640px auf eine Spalte stapeln, die trennende
     Randlinie zwischen den "Buchseiten" wird zu einer horizontalen Linie. */
  #wbBuch, #nbBuch { grid-template-columns: 1fr; }
  .wb-seite-links { border-right: none; border-bottom: 1px solid #ecdfc4; }
  #nbBuch .nb-seite.links { border-right: none; border-bottom: 1px solid #ecdfc4; }

  /* Fund 27.08.2026: .plan-auswahl-grid (Pläne- und Berichte-Übersicht) war
     wie #wbBuch/#nbBuch damals ein festes 2-Spalten-Grid ohne Media Query —
     rechte Karten (z.B. Pflegeplanung, Jahrespflege, Benutzerhandbuch,
     Wissensbank) wurden auf dem Handy vom Viewport abgeschnitten. Fix: unter
     640px auf eine Spalte stapeln, analog zum bisherigen Grid-Fix. */
  .plan-auswahl-grid { grid-template-columns: 1fr; }

  /* Fund 27.08.2026: der Handbuch-Screen (00_handbuch.js/index.html) nutzte
     eine per inline-style gesetzte, feste Zweispalten-Flexbox (260px-Sidebar
     + Inhalt) ganz ohne Media Query — auf dem Handy blieben beide Spalten
     nebeneinander gequetscht, der Inhalt rechts wurde fast komplett
     abgeschnitten. Fix: unter 640px auf Spalten-Stapel umschalten, Sidebar
     wird zu einer normalen, vollbreiten Kapitelliste oberhalb des Inhalts. */
  .handbuch-layout { flex-direction: column; padding: 14px; gap: 14px; }
  .handbuch-sidebar { width: 100%; }
}

/* ══ WISSENSBANK SCREEN ══════════════════════════════════════ */
.wissensbank-body { max-width: 1000px; margin: 0 auto; padding: 24px; }
.wissensbank-lade-hinweis { text-align: center; color: #90A4AE; font-size: 14px; padding: 48px 0; }
.wissensbank-lade-hinweis.wissensbank-fehler { color: #C0392B; }

/* Tabellenkopf: neue Kategorie anlegen + Kategorie/Wissen suchen */
.wb-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.wb-toolbar-titel { font-size: 20px; font-weight: 900; color: #1e2b39; margin-right: auto; }
.wb-such-wrap { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.wb-such-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #90A4AE; display: flex; }
.wb-such-input {
  width: 100%; border: 1.5px solid #E3EAF3; border-radius: 10px; padding: 9px 14px 9px 34px;
  font-size: 13px; font-family: inherit; background: #F4F7FB; color: #1A2840; outline: none; transition: border-color 0.15s;
}
.wb-such-input:focus { border-color: #1976D2; background: white; }
.wb-neue-kategorie-btn {
  background: #43A047; color: white; border: none; border-radius: 8px; padding: 10px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.wb-neue-kategorie-btn:hover { background: #388E3C; }

.wb-kategorien-liste { display: flex; flex-direction: column; gap: 16px; }

.wb-kategorie-karte {
  background: white; border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-top: 4px solid #1565C0;
}
.wb-kategorie-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.wb-kategorie-titel { font-size: 16px; font-weight: 800; color: #1e2b39; }
.wb-kategorie-beschreibung { font-size: 12.5px; color: #78909C; margin-top: 2px; }

.wb-unterpunkte { display: flex; flex-direction: column; gap: 10px; }
.wb-unterpunkt { background: #F7F9FB; border: 1px solid #EEF2F6; border-radius: 10px; padding: 12px 14px; }
.wb-unterpunkt-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.wb-unterpunkt-titel { font-size: 13.5px; font-weight: 700; color: #1e2b39; }
.wb-unterpunkt p { font-size: 12.5px; color: #455A64; line-height: 1.5; margin-bottom: 2px; }
.wb-unterpunkt p b { color: #1e2b39; }
.wb-leer { font-size: 12.5px; color: #B0BEC5; font-style: italic; }
.wb-meta { font-size: 11px; color: #B0BEC5; margin-top: 6px; }

.wb-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; }
.wb-badge-allgemein { background: #E3F2FD; color: #1565C0; }
.wb-badge-kunde { background: #FFF3E0; color: #E65100; }
.wb-badge-firma { background: #E8F5E9; color: #2E7D32; }

/* ── TIMELINE / GESCHICHTE ── */
.timeline-body { max-width: 780px; margin: 0 auto; padding: 32px 20px 60px; }
.timeline-intro { text-align: center; margin-bottom: 40px; }
.timeline-intro h1 { font-size: 24px; color: #1e2b39; margin-bottom: 10px; }
.timeline-intro p { color: #607D8B; font-size: 14px; line-height: 1.6; max-width: 560px; margin: 0 auto; }


.timeline-line { position: relative; padding-left: 36px; }
.timeline-line::before {
  content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, #90CAF9, #1565C0);
}
.timeline-eintrag { position: relative; margin-bottom: 36px; }
.timeline-punkt {
  position: absolute; left: -36px; top: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #1565C0; color: white; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px white;
}
.timeline-karte {
  background: white; border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.timeline-karte-heute { border: 2px solid #1565C0; }
.timeline-jahr { font-size: 11px; font-weight: 800; color: #1565C0; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; }
.timeline-titel { font-size: 17px; font-weight: 800; color: #1e2b39; margin-bottom: 12px; }
.timeline-karte img { width: 100%; border-radius: 8px; border: 1px solid #E3EAF3; margin-bottom: 12px; display: block; }
.timeline-karte p { font-size: 13.5px; color: #546E7A; line-height: 1.6; margin: 0; }
.timeline-karte code { background: #F4F7FB; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.plan-karte-timeline .plan-karte-icon { color: #1565C0; }

/* ── TO-DO PANEL (Wochenplanung) ── */
.todo-chip {
  background: white; border: 1px solid #FFE082; border-radius: 8px; padding: 6px 10px;
  font-size: 12.5px; color: #5D4037; display: flex; align-items: center; gap: 6px;
}
.todo-chip-quelle {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  color: #F57C00; background: #FFF3E0; border-radius: 4px; padding: 1px 5px;
}
.todo-chip-manuell { background: #F3F0FF; border-color: #D1C4E9; color: #4527A0; }
.todo-chip-manuell button {
  background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 0 0 2px;
}
.todo-chip-manuell button:hover { opacity: 1; }
/* Fund 13.08.2026: sichtbare Nummer je Chip, damit man weiß, welche Zahl man
   für die "a"+Nummer-Kurzeingabe im Aufgabe-Feld tippen muss. */
.todo-chip-nr {
  font-size: 10px; font-weight: 800; color: white; background: #BCA477;
  border-radius: 50%; width: 16px; height: 16px; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.todo-chip-manuell .todo-chip-nr { background: #7E57C2; }
.todo-chip-eingabe { flex: 1; min-width: 180px; }
.todo-chip-eingabe input {
  width: 100%; border: 1px dashed #D7CCC8; border-radius: 8px; padding: 6px 10px;
  font-size: 12.5px; font-family: inherit; background: white; color: #5D4037;
}

/* ── OBJEKTE JE LEISTUNG (Zeitrechnung) ── */
.zt-anleitung {
  background: #E3F2FD; border: 1px solid #BBDEFB; border-radius: 10px;
  padding: 12px 16px; font-size: 13px; color: #0D47A1; margin-bottom: 18px;
}
.zt-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: white; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.zt-toolbar label { font-size: 13px; color: #546E7A; display: flex; align-items: center; gap: 8px; }
.zt-toolbar select { padding: 7px 10px; border: 1px solid #dde3e8; border-radius: 8px; font-size: 13px; min-width: 200px; }
.zt-toolbar input[type="number"] { width: 70px; padding: 6px 8px; border: 1px solid #dde3e8; border-radius: 6px; font-size: 13px; text-align: center; }
.zt-ergebnis-hinweis { font-size: 12.5px; color: #90A4AE; margin-left: auto; }

.zt-kunde-block { margin-bottom: 28px; }
.zt-kunde-kopf { font-size: 13px; color: #F57C00; font-weight: 700; margin-bottom: 10px; }
.zt-objekt-kopf { background: #F4F7FB; color: #607D8B; font-size: 11px; text-transform: uppercase; width: 180px; }
.zt-leistung-kopf { background: #F4F7FB; cursor: pointer; user-select: none; vertical-align: top; min-width: 110px; }
.zt-leistung-kopf:hover { background: #E3F2FD; }
.zt-lk-name { font-weight: 700; color: #1e2b39; font-size: 12.5px; }
.zt-lk-anzahl { font-size: 10px; color: #607D8B; font-weight: 400; margin-top: 2px; }
.zt-lk-stift { font-size: 10px; color: #90A4AE; }
.zt-leer-hinweis { text-align: center; color: #90A4AE; padding: 30px; background: white; border-radius: 12px; font-size: 13px; }

.zt-suchbegriff-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 8px; background: #F4F7FB; margin-bottom: 6px; font-size: 13px;
}
.zt-suchbegriff-zeile button { background: none; border: none; color: #c0392b; cursor: pointer; font-size: 15px; padding: 0 4px; }