html[lang="fa"] {
  --body: 'Vazirmatn', 'IBM Plex Sans', system-ui, sans-serif;
  --display: 'Vazirmatn', 'Archivo', 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'Vazirmatn', 'IBM Plex Mono', monospace;
}
html[lang="fa"] body,
html[lang="fa"] body button,
html[lang="fa"] body input,
html[lang="fa"] body select,
html[lang="fa"] body textarea {
  font-family: 'Vazirmatn', 'IBM Plex Sans', system-ui, sans-serif !important;
}

/* RTL-Vertraege der taeglichen Mitarbeiter-Wege. Physische Mess-/3D-Flaechen
   werden nicht gespiegelt; nur Bedienoberflaeche, Reihenfolge und Pfeile. */
[dir="rtl"] #screen-login { direction: rtl; text-align: start; }
[dir="rtl"] #screen-home { direction: rtl; text-align: start; }
[dir="rtl"] #screen-hours { direction: rtl; text-align: start; }
[dir="rtl"] #screen-photo { direction: rtl; text-align: start; }
[dir="rtl"] #screen-docs { direction: rtl; text-align: start; }
[dir="rtl"] #screen-report { direction: rtl; text-align: start; }
[dir="rtl"] #screen-chatlist,
[dir="rtl"] #screen-chatdetail { direction: rtl; text-align: start; }
[dir="rtl"] .pin-pad { direction: ltr; }
[dir="rtl"] .stepper { direction: ltr; }
[dir="rtl"] .hours-days-picker { direction: ltr; }
[dir="rtl"] .kal-app-nav { direction: ltr; }
[dir="rtl"] input[type="number"] { direction: ltr; }
[dir="rtl"] input[type="time"] { direction: ltr; }
[dir="rtl"] input[type="date"] { direction: ltr; }
[dir="rtl"] input[type="tel"] { direction: ltr; }
[dir="rtl"] input[inputmode="numeric"] { direction: ltr; }
[dir="rtl"] input[inputmode="decimal"] { direction: ltr; }
[dir="rtl"] #screen-docs [id$="-arrow"],
[dir="rtl"] #screen-home .chevron,
[dir="rtl"] #screen-home .dplan-woche-btn,
[dir="rtl"] .btn-back i,
[dir="rtl"] [data-lucide="arrow-left"],
[dir="rtl"] [data-lucide="arrow-right"] { transform: scaleX(-1); }

/* ============================================================
   SPREECOLOR APP (Mobile) — Premium-Redesign
   Stand: 2026-05-10 — Phase 3 (visuell, ohne Logik-Aenderung)
   Tokens und Optik abgestimmt auf V9-Web. Class-Names 1:1.
   ============================================================ */

/* ================ TOKENS — Dunkel ================ */
:root {
  /* Audi-Style 26.05.2026 (Silvio): blau-anthrazit statt neutral-schwarz —
     wirkt teurer/ruhiger als reines #000. Akzent-Orange (Marke) bleibt. */
  /* Audi-Prinzip: dunkler Grund + klar hellere, FLACHE Kacheln (Kontrast macht
     den Premium-Effekt, nicht Verlauf/Kante). */
  --bg:        #0D1116;
  --surface:   #171C24;
  --surface-1: #171C24;        /* Alias fuer alte Klassen (qd-sheet, stempel16-card) */
  --surface-2: #1F2530;
  --surface-3: #283039;        /* heller Verlaufs-Start oben auf den Kacheln */
  --surface-4: #323A46;

  --border:        #232A34;
  --border-strong: #303843;

  --text:      #ECEEF2;
  --text-dim:  #A6AAB4;
  --text-mute: #868B96;

  --accent:        #FF6B2C;
  --accent-2:      color-mix(in srgb, var(--accent), black 12%);   /* 04.10.2026: aus --accent abgeleitet (Silvio: „ein Orange“), wie V9 */
  --accent-soft:   color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-glow:   color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-ring:   color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-fg:     #0A0A0A;

  --positive:      #34D399;
  --positive-soft: rgba(52,211,153,0.12);
  --warning:       #FBBF24;
  --warning-flaeche: #F59E0B;   /* 04.10.2026: Warn-FLÄCHE (Hintergrund/Rand) — Schrift nimmt --warning; Bernstein in beiden Modi */
  --warning-soft:  rgba(251,191,36,0.12);
  --danger:        #F87171;
  --danger-soft:   rgba(248,113,113,0.12);
  --info:          #60A5FA;
  --info-soft:     rgba(96,165,250,0.12);

  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-md: 10px;
  --r-lg: 13px; --r-xl: 16px; --r-2xl: 22px; --r-pill: 9999px;

  --sh-1: 0 1px 3px rgba(0,0,0,0.30);
  --sh-2: 0 6px 20px rgba(0,0,0,0.34);
  --sh-3: 0 20px 50px rgba(0,0,0,0.50);

  --ring: 0 0 0 3px var(--accent-ring);

  --display: 'Archivo', 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, sans-serif;   /* 01.11.2026 Leitfaden: Archivo; Bricolage nur noch Ersatz für fehlende Zeichen (ș ț) */
  --body:    'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --t-fast: 120ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ================ TOKENS — Hell ================ */
html[data-theme="light"] {
  /* 10.11.2026 (Lieb, Silvio „Ja, so bauen“ nach „hell Modus sehr grell“): getöntes Hellgrau, Karten eine Stufe
     heller als der Grund (vorher #FFFFFF auf #F6F6F3, kaum Abstufung), Text 14,9 : 1 statt 19,7 : 1 — dieselben Werte
     wie im Büro. Wächter: tests/test_hell_modus_ruhig.py */
  --bg:        #EDEBE5;
  --surface:   #F7F6F2;
  --surface-1: #F7F6F2;
  --surface-2: #F0EEE9;
  --surface-3: #E6E3DC;
  --surface-4: #DAD6CE;

  --border:        #D9D5CC;
  --border-strong: #86827A;

  /* Hell-Modus Schrift-Kontrast 17.05.2026 (Silvio): WCAG-AAA fuer Body,
     AA-Large fuer Dim/Mute. Vorher zu hell auf weissem Grund. */
  --text:      #22211F;
  --text-dim:  #3D3B37;
  --text-mute: #57544E;

  --accent:      #BD3910;   /* 01.11.2026 Markenleitfaden: Handlung hell, weiße Schrift 5,6 : 1 (vorher helleres Orange, nur 4,0 : 1) */
  --accent-2:    color-mix(in srgb, var(--accent), black 12%);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-fg:   #FFFFFF;

  --positive:      #15803D;
  --positive-soft: rgba(21,128,61,0.10);
  --warning:       #92400E;   /* 04.10.2026: wie V9 (eine Warnfarbe in beiden Oberflächen) */
  --warning-soft:  color-mix(in srgb, var(--warning-flaeche) 16%, transparent);
  --danger:        #B91C1C;
  --danger-soft:   rgba(185,28,28,0.10);

  /* 20.06.2026 Hellmodus-Kontrast (WCAG AA): Blau im Light-Block ueberschreiben
     (Default #60A5FA war auf hellem Grund unleserlich). Exakt wie V9: #1240B6. */
  --info:          #1240B6;
  --info-soft:     rgba(18,64,182,0.12);

  --sh-1: 0 1px 2px rgba(20,20,30,0.06);
  --sh-2: 0 4px 14px rgba(20,20,30,0.10);
  --sh-3: 0 16px 44px rgba(20,20,30,0.14);
}
html[data-theme="light"] body { color-scheme: light; }
/* 20.06.2026 Hellmodus-Kontrast (WCAG AA):
   - Login-Schriftzug „Schaltwerk" ist weiß -> auf cremefarbenem Grund unsichtbar.
     Im Hellmodus eine dunkle Platte hinter das Logo legen (wie in V9). */
html[data-theme="light"] .login-logo {
  background: #0c0e13; border-radius: 16px; padding: 18px 16px;
}
/* - Grüner „Urlaubsübersicht als PDF"-Button: Inline-Hellgrün (#6ee7b7) hatte nur
     1,4:1. Im Hellmodus auf exakt V9-Grün #0F6B33 (5,5:1). Dunkelmodus unberührt. */
html[data-theme="light"] #ula-pdf-btn {
  background: rgba(15,107,51,0.12) !important;
  border-color: rgba(15,107,51,0.45) !important;
  color: #0F6B33 !important;
}
html[data-theme="light"] .device-pill { background: var(--surface); }
html[data-theme="light"] .avatar { color: #fff; }
html[data-theme="light"] .navbar { background: var(--surface); border-top: 1px solid var(--border); }
html[data-theme="light"] .nav-btn { color: var(--text-dim); }
html[data-theme="light"] .nav-btn.active { color: var(--accent); }
html[data-theme="light"] #profil-modal > div,
html[data-theme="light"] .modal-card,
html[data-theme="light"] #bday-modal .bday-card,
html[data-theme="light"] .tour-tooltip { background: var(--surface); color: var(--text); }
html[data-theme="light"] .prof-btn {
  background: var(--surface-2); color: var(--text);
  border-color: var(--border);
}
html[data-theme="light"] .prof-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* === Sicherheitsunterweisung Premium-Vortext (Silvio 31.05.2026) === */
.safety-hero {
  position: relative;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%,
                            color-mix(in srgb, var(--accent) 4%, transparent) 60%,
                            transparent 100%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: 20px;
  padding: 22px 22px 18px;
  margin-bottom: 20px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent) 18%, transparent) inset,
    0 10px 28px color-mix(in srgb, var(--accent) 14%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.safety-hero::before {
  content: "";
  position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent),
                              color-mix(in srgb, var(--accent) 55%, transparent));
  opacity: 0.85;
}
.safety-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 16px;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
}
.safety-hero-icon { font-size: 14px; line-height: 1; }
.safety-hero-hallo {
  font-size: 14px; color: var(--text-dim); margin-bottom: 4px;
  font-weight: 500;
}
.safety-hero-titel {
  font-size: 22px; font-weight: 800; line-height: 1.2;
  margin-bottom: 14px; color: var(--text);
  letter-spacing: -0.01em;
}
.safety-hero-satz {
  font-size: 14.5px; color: var(--text);
  line-height: 1.55; opacity: 0.9;
}
.safety-hero-desc {
  margin-top: 16px; padding: 14px 16px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, var(--border));
  border-radius: 12px;
  font-size: 13.5px; color: var(--text);
  line-height: 1.6; white-space: pre-line;
}
.safety-hero-gueltig {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--text-mute);
  font-weight: 500;
}
.safety-hero-gueltig span:first-child { font-size: 13px; opacity: 0.7; }
html[data-theme="light"] .safety-hero {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 30px color-mix(in srgb, var(--accent) 12%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .prof-btn-danger {
  background: var(--danger-soft); color: var(--danger);
  border-color: rgba(185,28,28,0.30);
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  /* !important: viele Felder tragen inline `color:#fff` (Dark-Default) — sonst
     bleibt die Schrift im Hellmodus weiß auf hell = unlesbar (u.a. die 6 Blanko-
     Dokumente, Stundenfelder, Neu-BV). */
  background: var(--surface) !important; color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--text-mute) !important; }

/* ================ RESET ================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html, body {
  background: var(--bg); color: var(--text);
  font-family: var(--body);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Touch-Callout fuer Text-Elemente wieder erlauben — sonst kann man nicht
   tippen / kopieren in Inputs und Textareas */
input, textarea, [contenteditable] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}
body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  font-size: 14px; line-height: 1.5;
}

/* ================ Phone-Container ================ */
.phone {
  width: 100%; max-width: 440px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  /* Audi-Style: dezenter vertikaler Tiefen-Verlauf (oben dunkler). */
  background: linear-gradient(180deg, #0C0F14 0%, var(--bg) 24%, var(--bg) 100%);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
html[data-theme="light"] .phone { background: var(--bg); }
@media (min-width: 700px) {
  .phone {
    max-width: 900px;
    transition: max-width 0.18s ease;
  }
  .navbar { max-width: 900px; }
}

/* ================ Lucide-Icons ================ */
[data-lucide], .lucide {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  stroke-width: 1.6;
  vertical-align: -3px;
}

/* ================ Header ================ */
.header {
  padding: 16px 20px 12px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  padding-top: calc(16px + env(safe-area-inset-top));
}
.header-title {
  font-family: var(--display); font-weight: 800;
  font-size: 27px; letter-spacing: -0.028em; line-height: 1.1;
}
/* Eyebrow-Style oberhalb des Titels (wenn vorhanden) — Premium-Konvention */
.header-eyebrow {
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--text-mute);
  margin-bottom: 2px;
}
.header-sub {
  font-size: 13px; color: var(--text-dim);
  margin-top: 3px; font-weight: 500;
  letter-spacing: 0.005em;
}
.header-right { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700;
  font-size: 13px; color: var(--accent-fg);
  box-shadow: var(--sh-1);
}
/* Spiegel-/Rollen-Modus wird am Avatar signalisiert (Silvio 15.07.2026):
   der fruehere Sticky-Banner ueberdeckte Vollbild-Overlays (Foto-Vollbild-X
   nicht erreichbar). Jetzt farbiger Ring + kleiner Eck-Punkt am Avatar; der
   Ausstieg sitzt im Profil-Menue. Lila = Spiegel, Orange = Alt-Rolle. */
#user-avatar.role-alt-active,
#user-avatar.spiegel-active { position: relative; cursor: pointer; }
#user-avatar.role-alt-active {
  box-shadow: 0 0 0 3px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}
#user-avatar.spiegel-active {
  box-shadow: 0 0 0 3px #6D28D9, 0 0 10px rgba(109,40,217,0.6);
}
/* Falls (theoretisch) beides zugleich aktiv ist: Spiegel innen, Alt-Rolle aussen. */
#user-avatar.spiegel-active.role-alt-active {
  box-shadow: 0 0 0 3px #6D28D9, 0 0 0 6px var(--accent), 0 0 10px rgba(109,40,217,0.6);
}
#user-avatar.role-alt-active::after,
#user-avatar.spiegel-active::after {
  content: "";
  position: absolute;
  inset-inline-end: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--surface, #0f172a);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#user-avatar.role-alt-active::after { background: var(--accent); }
#user-avatar.spiegel-active::after { background: #6D28D9; }
#user-avatar.spiegel-active.role-alt-active::after { background: #6D28D9; }
.device-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 13px;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
  letter-spacing: 0.02em;
}
.device-pill .dot { width: 6px; height: 6px; background: var(--positive); border-radius: 50%; }
.device-pill .dot.offline { background: var(--warning); }

/* ================ Screen ================ */
.screen {
  display: none; flex: 1; flex-direction: column; overflow-y: auto;
  /* WICHTIG (12.05.2026 Silvio): KEIN safe-area-inset-top hier — der .header
     setzt das selbst (Zeile 175). Doppeltes Padding ließ den Inhalt auf
     iPhones mit Notch ~80-100 px zu weit unten starten. */
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
.screen.active { display: flex; }
.screen-body { flex: 1; padding: 0 20px; }
/* Fallback fuer Screens ohne eigenen .header — die brauchen safe-area
   selbst, damit sie nicht in die Notch rutschen */
.screen:not(:has(.header)) { padding-top: env(safe-area-inset-top); }

/* ================ Bottom-Navbar ================ */
.navbar {
  position: fixed; bottom: 0; inset-inline-start: 0; inset-inline-end: 0;
  max-width: 440px; margin: 0 auto;
  background: rgba(12,14,19,0.86);
  -webkit-backdrop-filter: saturate(150%) blur(22px);
  backdrop-filter: saturate(150%) blur(22px);
  border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 34px rgba(0,0,0,0.42);
  display: flex; justify-content: space-around;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));   /* A4: seitlich 4 statt 8 px, Platz fuer 13-px-Beschriftungen */
  z-index: 50;
}
html[data-theme="light"] .navbar {
  background: rgba(255,255,255,0.92);
}
.nav-btn {
  background: none; border: none;
  color: var(--text-mute);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 1px 6px; cursor: pointer;
  flex: 1; min-width: 0;
  border-radius: 16px;
  font-family: var(--body); font-size: 13px; font-weight: 600;   /* A4: 13 px (A2-Regel), dafuer seitlich schmaler */
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.02em; }
/* A4: Abmelden nur noch im Profil — der Leisten-Knopf bleibt fuer AufmassScan (Start + Abmelden) */
.nav-btn.nav-nur-aufmass { display: none; }
body.produkt-aufmass .nav-btn.nav-nur-aufmass { display: flex; }
.nav-btn svg { width: 24px; height: 24px; flex-shrink: 0; }
/* Audi-Style: weiche Kapsel hinter dem aktiven Tab statt nur Farbwechsel */
.nav-btn.active { color: var(--accent); background: var(--accent-soft); }
.navbar.hidden { display: none; }
[hidden] { display: none !important; }

/* ================ Buttons ================ */
.btn {
  width: 100%;
  padding: 16px 20px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--r-xl);
  font-family: var(--display);
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.08s, background var(--t-fast), box-shadow var(--t-fast);
  box-shadow: var(--sh-1);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-secondary:hover { background: var(--surface-3); }
.btn-ghost {
  background: transparent; color: var(--text-dim);
  padding: 12px;
  box-shadow: none;
}

/* ================ Login ================ */
.login-wrap {
  padding: 0 32px;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100dvh;
  /* iOS-Notch-Schutz (Silvio 16.05.2026 - Audit #8): Login-Screen mind.
     24 px Abstand zur Statusbar; env() ist 0 auf alten Geraeten. */
  padding-top: max(24px, env(safe-area-inset-top));
}
/* Sicherheits-Unterweisungs-Screen (#screen-safety) hat keinen .header,
   rutscht sonst unter die Notch. Audit #8. */
#screen-safety .screen-body {
  padding-top: max(16px, env(safe-area-inset-top));
}
.brand {
  font-family: var(--display);
  font-size: 38px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 0.95;
  margin-bottom: 6px;
}
.brand span { color: var(--accent); }
.brand-tag {
  font-size: 12px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 600; margin-bottom: 48px;
}
.login-label {
  font-size: 13px; color: var(--text-dim);
  margin-bottom: 8px; font-weight: 500;
}
.login-error {
  color: var(--danger); font-size: 13px;
  text-align: center; margin: 12px 0; min-height: 18px;
}
.pin-display {
  display: flex; gap: 14px;
  justify-content: center;
  margin: 16px 0 28px;
}
.pin-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  transition: all var(--t-fast);
}
.pin-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.10);
}
.pin-pad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pin-key {
  height: 64px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-xl);
  cursor: pointer;
  font-family: var(--display);
  font-size: 24px; font-weight: 600;
  transition: background var(--t-fast), transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.pin-key:active { background: var(--surface-2); transform: scale(0.96); }
.pin-key.special {
  background: transparent; border-color: transparent;
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  font-family: var(--body);
}
.device-name-input {
  width: 100%; padding: 16px 18px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-family: var(--body); font-size: 16px;
  margin-bottom: 16px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.device-name-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--ring);
}

/* PIN-Dots 5-8: dünner Rand, optional */
.pin-dot-optional { border-style: dashed; opacity: 0.55; }
.pin-dot-optional.filled { border-style: solid; opacity: 1; }
.pin-pad + .btn:disabled,
#btn-pin-ok:disabled,
#btn-cp-ok:disabled { opacity: 0.35; cursor: not-allowed; }

/* ================ Login-Logo ================ */
.login-logo {
  margin-bottom: 32px;
  text-align: center;
}
.login-logo img {
  max-width: 280px;
  width: 80%;
  height: auto;
  display: inline-block;
}
/* 16.06.2026 Silvio: Die weiße Platte (Hintergrund/Padding/Schatten/Radius)
   gilt jetzt NUR noch für hochgeladene Mandanten-Logos (.tenant-login-logo) —
   dort sind dunkle Logos sonst unlesbar. Die Schaltwerk-Fallback-Lockup hat
   damit an der QUELLE keinen weißen Kasten mehr (vorher kam er aus dieser
   Basis-Regel und wurde nur per konkurrierender img-Regel überstimmt). */
.login-logo img.tenant-login-logo {
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.20);
  padding: 8px;
  background: #ffffff;
}
/* 15.06.2026 Silvio: Die Schaltwerk-Fallback-Lockup ist eine WEISSE Wortmarke
   (+ orange Symbol). Auf der weißen Platte oben war die Wortmarke unsichtbar.
   Nur die Fallback-Lockup transparent stellen → weiße Wortmarke steht direkt
   auf dem dunklen Login-Hintergrund. Das hochgeladene Mandanten-Logo
   (.tenant-login-logo) behält die weiße Platte (dunkle Logos bleiben lesbar).
   Gilt für Login- UND Change-PIN-Maske (beide nutzen .login-logo).
   16.06.2026: !important, weil der Fix zweimal nicht ankam — Ursache war NICHT
   die Spezifität, sondern dass style.css?v nicht mitgebumpt wurde (Boot-Cache-
   Nuke griff nie). !important ist hier reine Absicherung gegen jede Kaskade. */
.login-logo .tenant-login-fallback img {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* 16.06.2026 Silvio: war mit inline height:48px zu klein. Lockup ist ~3:1 —
     über die Breite skalieren (height:auto) macht die Wortmarke deutlich
     größer und gut lesbar. !important schlägt die Inline-Styles im HTML. */
  height: auto !important;
  width: 85% !important;
  max-width: 340px !important;
}

/* ================ Home — Action-Cards ================ */
.actions-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Audi-Style 26.05.2026 (Silvio): weiche Karten — sanfter Verlauf (oben minimal
   heller) + weicher Schatten fuer Tiefe statt harter 1px-Kante. */
.action-card {
  /* Audi: dezenter Sheen — oben minimal heller, weich nach unten zur Basis. */
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface) 100%);
  border: 1px solid transparent;
  border-radius: var(--r-2xl);
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: transform 0.10s, box-shadow var(--t-fast), background var(--t-fast);
  aspect-ratio: 1.05;
  position: relative; overflow: hidden;
  color: var(--text); text-align:start;
  font-family: inherit;
  min-height: 96px;
}
html[data-theme="light"] .action-card {
  background: var(--surface);
  border-color: var(--border);
}
/* 16.05.2026 Bugfix Silvio: hidden-Karten dürfen KEINEN Platz im Grid einnehmen
   (display:flex überschreibt sonst das [hidden]-Default → leere Lücken). */
.action-card[hidden] { display: none !important; }

/* iPhone-Style Edit-Modus für Karten-Anordnung (Silvio 16.05.2026)
   Audit-Fixes 16.05.2026 abend: touch-action:none gegen iOS-Scroll,
   transition:none damit der erste Drag-Frame nicht gummiartig wirkt. */
body.home-edit-mode .action-card[data-key] {
  animation: sc-card-wiggle 0.45s ease-in-out infinite alternate;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: none;
}
body.home-edit-mode .action-card[data-key].dragging {
  animation: none;
  opacity: 0.7; cursor: grabbing;
  z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: none;
}
body.home-edit-mode .action-card[data-key].drop-target {
  outline: 2px dashed var(--accent, #FF6B2C);
  outline-offset: 2px;
}
body.home-edit-mode .action-card[data-key]::after {
  content: '⋮⋮'; position: absolute; top: 6px; inset-inline-end: 8px;
  font-size: 11px; color: var(--text-mute); opacity: 0.6;
}
/* Wackel-Animation phasen-versetzt, damit nicht alle Karten synchron tanzen
   (iOS-Verhalten — natuerlicher wirkt). Audit-Polish 16.05.2026 abend. */
body.home-edit-mode .actions-grid[data-grid] .action-card[data-key]:nth-child(2n)   { animation-delay: 0.12s; }
body.home-edit-mode .actions-grid[data-grid] .action-card[data-key]:nth-child(3n)   { animation-delay: 0.24s; }
body.home-edit-mode .actions-grid[data-grid] .action-card[data-key]:nth-child(5n+1) { animation-delay: 0.36s; }
/* Badge bei Postfach-Karte in Edit-Mode ausblenden, damit ⋮⋮ nicht ueberlappt */
body.home-edit-mode .action-card[data-key] .badge-count { display: none; }
body.home-edit-mode #home-edit-toggle {
  background: var(--accent, #FF6B2C) !important; color: #fff !important;
  font-weight: 700;
}
/* 03.11.2026 (Silvio „Ja“): Kacheln ausblenden / wieder zeigen (home_kacheln.js).
   Ausgeblendet = weg von der Startseite; im Anordnen-Modus „Ausblenden“ je Kachel
   und darunter die Leiste „Ausgeblendet“ mit „wieder zeigen“. */
.action-card.home-user-hidden { display: none !important; }
.home-hide-btn { display: none; }
body.home-edit-mode .home-hide-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 4px; inset-inline-start: 4px;
  min-height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: 10px; background: var(--surface-2); color: var(--text);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.home-hidden-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.home-hidden-bar[hidden] { display: none; }
.home-show-zusatz { color: var(--text-mute); }
.home-hidden-titel { flex: 1 0 100%; font-size: 13px; font-weight: 600; color: var(--text-mute); }
.home-show-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
@keyframes sc-card-wiggle {
  0%   { transform: rotate(-0.6deg); }
  100% { transform: rotate(0.6deg); }
}
.home-section-mini { display: flex; align-items: center; }
.action-card:active { transform: scale(0.97); }
.action-card.primary {
  background: linear-gradient(155deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  color: var(--accent-fg);
  box-shadow: var(--sh-2);
}
.action-icon {
  width: 32px; height: 32px;
  background: transparent;            /* Audi: Icon sitzt direkt, ohne Kaestchen */
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: flex-start;
  margin-bottom: 8px;
  color: var(--accent);
}
.action-card.primary .action-icon {
  background: rgba(0,0,0,0.18);
  color: var(--accent-fg);
}
.action-icon svg { width: 28px; height: 28px; }
.action-icon .lucide,
.action-icon [data-lucide] { width: 28px; height: 28px; }
.action-label {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.1;
}
.action-sub {
  font-size: 13px; color: var(--text-dim);
  font-weight: 500;
}
.action-card.primary .action-sub { color: rgba(0,0,0,0.70); }
.home-section { margin-top: 28px; }
/* Block-Trenner zwischen den 5 Karten-Blöcken (Silvio 16.05.2026 Anordnung-Fix) */
.home-section-mini {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim); padding: 22px 4px 10px;
  display: flex; align-items: center; gap: 10px;
}
.home-section-mini:first-of-type { padding-top: 6px; }
.home-section-mini + .actions-grid { margin-top: 0; }
/* Premium-Hairline zwischen Text und (optionalem) Knopf rechts.
   `order: 2` rückt sie vor `order: 99` des Knopfs (Silvio 17.05.2026). */
.home-section-mini::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 85%);
  order: 2;
}
/* Knopf bleibt am rechten Rand der Section-Mini */
.home-section-mini > button { order: 99; flex: 0 0 auto; }
.section-title {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--text-dim); padding: 0 4px 12px;
  display: flex; align-items: center; gap: 8px;
}
.section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 60%);
}
.empty-hint { color: var(--text-mute); font-size: 13px; padding: 12px 4px; }

/* ================ Chat ================ */
.chat-thread {
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.chat-thread:active { background: var(--surface-2); }
.chat-thread-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.chat-thread-bv { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.chat-thread-when { font-size: 11px; color: var(--text-mute); font-family: var(--mono); }
.chat-thread-sub { font-size: 12px; color: var(--text-mute); margin-bottom: 4px; }
.chat-thread-last {
  font-size: 13px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-thread-last b { color: var(--text); font-weight: 600; }
.chat-thread-empty { font-size: 12px; color: var(--text-mute); font-style: italic; }
.chat-thread-badge {
  display: inline-block; min-width: 22px; height: 22px;
  padding: 0 7px; border-radius: 11px;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700;
  text-align: center; line-height: 22px;
  margin-inline-start: 8px;
}
.chat-thread.has-unread {
  background: var(--danger-soft);
  border-inline-start: 3px solid var(--danger);
}
.chat-thread.has-unread .chat-thread-bv { color: var(--text); }
.chat-thread.has-unread .chat-thread-last { color: var(--text); font-weight: 500; }

.chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.chat-msg {
  margin-bottom: 10px;
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.chat-msg.own {
  margin-inline-start: auto;
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
}
.chat-msg-meta {
  font-size: 11px; color: var(--text-mute);
  margin-bottom: 2px; font-family: var(--mono);
}
.chat-msg.own .chat-msg-meta { text-align:end; }
.chat-msg-text {
  font-size: 14px; color: var(--text);
  white-space: pre-wrap; word-wrap: break-word;
}
.chat-input-row {
  display: flex; gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-input {
  flex: 1; min-height: 40px; max-height: 120px;
  padding: 10px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text); font-size: 14px;
  font-family: inherit; resize: vertical;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.chat-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--ring);
}
.chat-send-btn {
  align-self: flex-end;
  padding: 10px 16px;
  background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: var(--r);
  font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.chat-send-btn:hover { background: var(--accent-2); }
.chat-send-btn:disabled { opacity: 0.50; }
.chat-mic-btn {
  align-self: flex-end; min-width: 44px; min-height: 44px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  font-size: 18px; cursor: pointer; padding: 0 12px;
  transition: background var(--t-fast);
}
.chat-mic-btn.recording {
  background: var(--danger); border-color: var(--danger); color: #fff;
  animation: micpulse 1s infinite;
}
.chat-mic-btn.dictate-btn {
  background: var(--info-soft);
  border-color: rgba(96,165,250,0.40);
  color: var(--info);
}
/* Aufnahme läuft: IMMER deutlich rot + pulsierend (auch die Diktier-Knöpfe,
   die im Ruhezustand hellblau sind) — sonst sieht man nicht, dass das Mikro an ist. */
.chat-mic-btn.dictate-btn.recording {
  background: var(--danger); border-color: var(--danger); color: #fff;
  animation: micpulse 1s infinite;
}
.dictate-floating-btn {
  position: absolute; top: 6px; inset-inline-end: 6px;
  width: 32px; height: 32px; padding: 0;
  background: var(--info-soft);
  border: 1px solid rgba(96,165,250,0.40);
  border-radius: var(--r); color: var(--info);
  font-size: 14px; line-height: 1; cursor: pointer; z-index: 2;
}
/* 03.11.2026 (Gesamtprüfung M4): Der Knopf sitzt in der Ecke des Textfelds und bleibt
   optisch 32 px, damit er keinen Text verdeckt. Die Tippfläche ist 44 × 44 px. */
.dictate-floating-btn::after {
  content: ""; position: absolute; inset: -6px;
}
.dictate-floating-btn.recording {
  background: var(--danger); border-color: var(--danger); color: #fff;
  animation: micpulse 1s infinite;
}
/* Formular-Mikros (Inline-Styles): Aufnahme klar rot + pulsierend — !important
   schlägt die per JS gesetzte Inline-Farbe, damit man das laufende Mikro sieht. */
.bf-mic-btn.recording, .bfg-cell-mic.recording {
  background: var(--danger) !important; color: #fff !important;
  border-color: var(--danger) !important; animation: micpulse 1s infinite;
}
@keyframes micpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
}
.chat-rec-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--danger-soft);
  border-top: 1px solid rgba(248,113,113,0.30);
}
.chat-rec-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--danger);
  animation: micpulse 1s infinite;
}
.chat-rec-time { font-family: var(--mono); font-size: 14px; color: var(--text); flex: 1; }
.chat-rec-x, .chat-rec-ok {
  padding: 8px 13px; border-radius: var(--r);
  border: 0; font-weight: 700; cursor: pointer;
  font-size: 13px;
}
.chat-rec-x { background: var(--surface-2); color: var(--danger); border: 1px solid rgba(248,113,113,0.40); }
.chat-rec-ok { background: var(--positive); color: var(--accent-fg); }
.chat-msg-audio audio { width: 100%; max-width: 240px; height: 36px; }
.chat-msg-undo {
  display: inline-block; margin-inline-start: 6px;
  padding: 1px 7px;
  font-size: 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--danger); cursor: pointer;
}

/* ================ Dienstplan-Knopf ================ */
.dplan-link-btn {
  width: 100%; padding: 13px 16px;
  margin-bottom: 6px;
  background: var(--info-soft);
  border: 1px solid rgba(96,165,250,0.30);
  color: var(--info);
  border-radius: var(--r-lg);
  font-family: var(--display);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--t-fast);
}
.dplan-link-btn:active { background: rgba(96,165,250,0.20); }
.dplan-hint {
  font-size: 13px; color: var(--text-mute);
  line-height: 1.45; text-align: center;
  padding: 0 8px; margin-bottom: 22px;
}

/* ================ Heute-BV-Karte ================ */
.today-bv-wrap { margin-bottom: 14px; }
.today-bv-card {
  background: linear-gradient(135deg, rgba(96,165,250,0.10), rgba(96,165,250,0.04));
  border: 1px solid rgba(96,165,250,0.30);
  border-radius: var(--r-xl);
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--sh-2);
}
.today-bv-card .tbc-head {
  font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 4px; font-weight: 600; font-family: var(--mono);
}
/* Silvio 26.05.2026: Oberer Karten-Bereich als eigene Klickflaeche → BV-Detail/LV */
.today-bv-card .tbc-open {
  display: block; margin: -4px -6px 2px; padding: 6px 6px 8px;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.today-bv-card .tbc-open:active { background: rgba(96,165,250,0.14); }
.today-bv-card .tbc-open .tbc-title {
  display: flex; align-items: center; gap: 8px;
}
.today-bv-card .tbc-open-chev {
  margin-inline-start: auto; font-size: 26px; line-height: 1;
  color: var(--info); font-weight: 400; opacity: 0.85;
}
.today-bv-card .tbc-open-hint {
  font-size: 12px; color: var(--info); margin-top: 4px; font-weight: 600;
}
.tbc-vorort {
  display: block; margin: -4px 0 10px;
  padding: 7px 11px; border-radius: var(--r);
  font-size: 12px; font-weight: 700;
}
.tbc-vorort.ok   { background: var(--positive-soft); color: var(--positive); border: 1px solid rgba(52,211,153,0.40); }
.tbc-vorort.warn { background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(251,191,36,0.40); }
.tbc-vorort.info { background: var(--info-soft); color: var(--info); border: 1px solid rgba(96,165,250,0.30); font-weight: 500; }
.vo-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; margin-bottom: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.vo-row:active { background: var(--surface-3); }
.vo-row.vo-here {
  background: var(--positive-soft);
  border-color: rgba(52,211,153,0.35);
}
.today-bv-card .tbc-title {
  font-size: 19px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.018em;
}
.today-bv-card .tbc-addr  { font-size: 14px; color: var(--text); margin-top: 4px; }
.today-bv-card .tbc-pl    { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.today-bv-card .tbc-koll  { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.today-bv-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.today-bv-actions a, .today-bv-actions button {
  flex: 1; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 12px;
  background: var(--surface-2); color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background var(--t-fast);
}
.today-bv-actions a:active, .today-bv-actions button:active { background: var(--surface-3); }
.today-bv-actions .tbc-call-btn { text-decoration: none; font-weight: 700; }
.today-bv-actions .tbc-call-btn svg { fill: currentColor !important; stroke: currentColor !important; }
.today-bv-actions .tbc-call-btn .tbc-call-label { font-size: 13px; letter-spacing: 0.02em; }
.today-bv-actions .tbc-call-btn.ok::after {
  content: ""; width: 8px; height: 8px;
  border-radius: 50%; background: currentColor;
  margin-inline-start: 4px;
  box-shadow: 0 0 0 2px currentColor;
  animation: tbcPulse 1.6s ease-in-out infinite;
}
.today-bv-actions .tbc-call-btn.no { opacity: 0.55; }
.today-bv-actions .tbc-call-btn.no svg { stroke: var(--text-mute); }
@keyframes tbcPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
.today-bv-empty {
  padding: 14px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  color: var(--text-mute); font-size: 13px; text-align: center;
}

/* ================ Skeleton ================ */
.skeleton-card, .skeleton-row {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.025) 0%,
    rgba(255,255,255,0.07)  50%,
    rgba(255,255,255,0.025) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}
.skeleton-card { height: 84px; margin-bottom: 8px; }
.skeleton-row  { height: 56px; margin-bottom: 6px; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================ Gestern-Wiederholen-Karte ================ */
.yesterday-wrap { margin-bottom: 12px; }
.yc-card {
  background: var(--info-soft);
  border: 1px solid rgba(96,165,250,0.30);
  border-radius: var(--r-lg);
  padding: 13px 14px;
}
.yc-head {
  font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; font-family: var(--mono);
}
.yc-title {
  font-size: 16px; font-weight: 700; margin-top: 2px;
  letter-spacing: -0.01em;
}
.yc-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.yc-actions { display: flex; gap: 8px; margin-top: 10px; }
.yc-actions button {
  flex: 1; min-height: 42px; padding: 9px 12px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.yc-actions button.yc-btn-light {
  background: transparent; color: var(--text-mute);
}
.yc-actions button:active { background: var(--surface-3); }

/* ================ Mehrtag-Auswahl ================ */
.hours-days-picker {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
.hd-btn {
  padding: 10px 4px; min-height: 56px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-size: 13px; font-weight: 700; cursor: pointer;
  line-height: 1.2;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.hd-btn small { font-size: 13px; font-weight: 500; color: var(--text-mute); }
.hd-btn.today { border-color: rgba(52,211,153,0.45); }
.hd-btn.sel {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.hd-btn.sel small { color: var(--accent); }

/* ================ Quick-Actions-Bar — Silvio 11.05.2026 v2 Premium ================ */
.quick-actions-bar {
  display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.qa-btn {
  flex: 1; min-height: 44px; min-width: 90px;
  padding: 10px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background var(--t-fast), border-color var(--t-fast), transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.qa-btn:hover { border-color: var(--border-strong); }
.qa-btn:active { background: var(--surface-2); transform: scale(0.97); }
.qa-btn.qa-krank {
  border-color: rgba(248,113,113,0.42);
  color: var(--danger);
  background: rgba(239,68,68,0.06);
}
.qa-btn.qa-krank:hover { background: rgba(239,68,68,0.10); }
.qa-btn.qa-spaet {
  border-color: rgba(251,191,36,0.42);
  color: var(--warning);
  background: rgba(251,191,36,0.06);
}
.qa-btn.qa-spaet:hover { background: rgba(251,191,36,0.10); }
/* 19.06.2026 Silvio: 🆘 Hilfe/SOS — auffällig rot, soll sofort ins Auge fallen. */
.qa-btn.qa-sos {
  background: #dc2626;
  border-color: #b91c1c;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.qa-btn.qa-sos:hover  { background: #b91c1c; }
.qa-btn.qa-sos:active { background: #991b1b; }

/* ================ Dienstplan auf Home ================ */
.dplan-wrap { margin-bottom: 22px; }
.dplan-card {
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--info);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast);
}
.dplan-card.today {
  border-inline-start-color: var(--positive);
  background: var(--positive-soft);
}
.dplan-card.tomorrow { border-inline-start-color: var(--info); }
.dplan-day {
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--text-dim); margin-bottom: 4px;
}
.dplan-bv { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.dplan-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.dplan-kollegen { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.dplan-kollegen-label { color: var(--text-mute); }
.dplan-empty {
  padding: 14px; text-align: center;
  font-size: 13px; color: var(--text-mute);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}

/* ================ Galerie / Back-Btn ================ */
.back-btn-row {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  color: var(--text-dim);
  font-size: 13px; padding: 6px 0 12px; cursor: pointer;
}
.back-btn-row svg { width: 16px; height: 16px; }
.gal-title {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  margin-bottom: 12px; letter-spacing: -0.018em;
}
.gal-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.gal-row:active { background: var(--surface-2); }
.gal-row-main { font-size: 14px; color: var(--text); font-weight: 600; }
.gal-row-sub  { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.gal-row-count {
  font-size: 13px; color: var(--text-dim);
  background: var(--surface-2);
  padding: 4px 11px; border-radius: var(--r-pill);
  font-family: var(--mono); font-weight: 600;
}
.gal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-top: 8px;
}
.gal-thumb {
  aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r);
  background: var(--surface-2); cursor: pointer;
  transition: transform var(--t-fast);
}
.gal-thumb:active { transform: scale(0.97); }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================ Lightbox (Vollbild + Pinch-Zoom, 15.05.2026) ================ */
/* ⚠ 30.08.2026 — z-index von 1000 auf 10011:
 * Silvio: „Kann nicht laden" beim Bild-Anhang einer Mail. Das Bild WURDE
 * geladen (nginx: 4.707.115 Bytes, 8,5 s, Status 200) und die Lightbox wurde
 * sichtbar geschaltet — nur lag sie auf Ebene 1000 UNTER der
 * Mail-Vollbildansicht (#app-mail-detail, z-index 9990, undurchsichtiger
 * Hintergrund). Zu sehen blieb die Mail.
 *
 * Vorher fiel es nicht auf, weil die Lightbox nur aus Galerie und Chat
 * geoeffnet wurde — beides KEINE Vollbild-Ueberlagerung. Erst der neue
 * Aufrufer aus dem Mail-Anhang hat es sichtbar gemacht.
 *
 * 10011 = eine Stufe ueber dem PDF-Betrachter (10010). Beide zeigen ein
 * Dokument im Vollbild und schliessen einander aus; wer zuletzt oeffnet,
 * gehoert nach vorn.
 *
 * BEWUSST NICHT hoeher: .toast (99999), #bday-modal (99999),
 * .chat-rec-overlay (99999) und #stempel-16-modal (99000) bleiben darueber.
 * Das sind Meldungen und Situationsfenster, keine Vollbild-Deckel — eine
 * Meldung muss auch dann ankommen, wenn gerade ein Bild offen ist. */
.lightbox {
  position: fixed; inset: 0; z-index: 10011;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  overflow: hidden;
}
.lightbox-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.lightbox img {
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  object-fit: contain;
  transform-origin: 50% 50%;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  backface-visibility: hidden;
}
.lightbox img.lb-live {
  transition: none;
}
.lightbox-close {
  position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline-end: 18px;
  background: rgba(0,0,0,0.55); border: none;
  color: #fff; font-size: 28px; line-height: 1;
  width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; z-index: 10;
  display: inline-flex; align-items: center; justify-content: center;
}
.lightbox-bottombar {
  position: absolute; inset-inline-start: 0; inset-inline-end: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 16px;
  z-index: 10;
  pointer-events: none;
}
.lightbox-bottombar > * { pointer-events: auto; }
.lightbox-caption {
  color: #fff; font-size: 13px;
  text-align: center; max-width: 90%;
  background: rgba(0,0,0,0.55);
  padding: 6px 12px; border-radius: 12px;
}
.lightbox-caption:empty { display: none; }
.lightbox-rotate {
  background: rgba(255,255,255,0.14); color: #fff;
  border: none; border-radius: var(--r-md);
  padding: 10px 18px; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
/* 02.08.2026: „Foto loeschen" klebte 10 px unter „Drehen". Fuer das Querformat
   ist die Gefahr unten ausdruecklich anerkannt (Leiste wird dort ausgeblendet:
   „Sonst trifft der Daumen beim Halten/Zoomen versehentlich auf Loeschen") — im
   Hochformat blieb sie bestehen. Jetzt 24 px Abstand und schmaler; die Warnfarbe
   bleibt, damit der Knopf auffindbar bleibt. */
.lightbox-delete {
  margin-top: 24px;
  background: var(--danger); color: #fff;
  border: none; border-radius: var(--r-md);
  padding: 9px 14px; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.lightbox-delete:active { filter: brightness(0.92); }

/* 02.06.2026 Silvio: Im Handy-Querformat soll das Foto voll dargestellt
   werden und alle Schrift/Action-Buttons ausgeblendet sein. Sonst trifft
   der Daumen beim Halten/Zoomen versehentlich auf „Loeschen". X bleibt
   ganz dezent in der Ecke (Foto schliessen muss moeglich sein).
   Trigger: orientation:landscape + max-height 500px = Handy quer,
   nicht Tablet. Gilt fuer Lightbox (Foto-Galerie) UND fuer den
   PDF-/Bild-Viewer der Bauakte (#pdf-preview-modal). */
@media (orientation: landscape) and (max-height: 500px) {
  /* --- Foto-Lightbox --- */
  .lightbox-bottombar { display: none !important; }
  .lightbox-close {
    width: 44px; height: 44px;   /* 03.11.2026 (M4): Tippfläche mindestens 44 px, vorher 32 */
    font-size: 20px;
    background: rgba(0,0,0,0.25);
    top: 6px; inset-inline-end: 6px;
    opacity: 0.5;
  }
  .lightbox-close:active { opacity: 1; background: rgba(0,0,0,0.6); }
  .lightbox img { max-height: 100vh; max-height: 100dvh; }

  /* --- Bauakte PDF-/Bild-Viewer (#pdf-preview-modal) --- */
  /* Header wird flach + transparent, Title weg, X dezent in die Ecke.
     Inline-styles im HTML mit !important uebergehen. */
  #pdf-preview-modal .modal-card > div:first-child {
    padding: max(4px, env(safe-area-inset-top)) 8px 4px 8px !important;
    background: transparent !important;
    border-bottom: none !important;
    position: absolute !important;
    top: 0; inset-inline-end: 0;
    z-index: 5;
    pointer-events: none;
  }
  #pdf-preview-title { display: none !important; }
  #pdf-close {
    pointer-events: auto;
    width: 44px !important; height: 44px !important;   /* 03.11.2026 (M4): vorher 32 */
    font-size: 20px !important;
    background: rgba(0,0,0,0.35) !important;
    color: #fff !important;
    opacity: 0.55;
  }
  #pdf-close:active { opacity: 1; background: rgba(0,0,0,0.7) !important; }
  #pdf-frame { height: 100vh !important; height: 100dvh !important; }
}

/* ================ Activity-Liste ================ */
.activity-line {
  font-size: 14px; color: var(--text);
  padding: 11px 13px; margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  line-height: 1.45;
}

/* ================ Forms ================ */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: 13px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; margin-bottom: 8px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-family: var(--body); font-size: 15px; font-weight: 500;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A8A8B0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-inline-end: 42px;
}
.form-textarea { min-height: 80px; resize: none; font-family: inherit; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--ring);
}

/* ================ Stepper ================ */
.stepper {
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stepper button {
  width: 50px; height: 52px;
  background: transparent; border: none;
  color: var(--text);
  font-size: 22px; font-weight: 700;
  cursor: pointer;
  font-family: var(--display);
  transition: background var(--t-fast);
}
.stepper button:active { background: var(--surface-2); }
.stepper-value {
  flex: 1; text-align: center;
  font-family: var(--mono);
  font-size: 18px; font-weight: 600;
}

/* ================ Page-Header ================ */
.page-header {
  padding: 4px 4px 24px;
  display: flex; align-items: center; gap: 12px;
}
.back-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.back-btn:active { background: var(--surface-2); border-color: var(--border-strong); }
.back-btn svg { width: 18px; height: 18px; }
.page-title {
  font-family: var(--display); font-size: 22px; font-weight: 700;
  letter-spacing: -0.022em;
}

/* ================ Chips ================ */
/* 02.08.2026: Tippflaeche auf 44 px gebracht. Vorher rund 30 px hoch bei 6 px
   Abstand — ausgerechnet auf dem Stunden-Bildschirm, den jeder Monteur taeglich
   mit Handschuhen bedient, und ein Fehltipp bucht die falsche Taetigkeit. Der
   Rest der App haelt 44-56 px ein (.hd-btn 56, .stepper button 52). */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 11px 16px; margin: 0 10px 10px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* ================ Tabs ================ */
.tabs {
  display: flex; justify-content: space-around;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 4px;
  border: 1px solid var(--border);
}
.tab {
  flex: 1; background: none; border: none;
  color: var(--text-dim);
  padding: 10px;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

/* ================ Action-Row ================ */
.actions-row { padding: 16px 20px 0; display: flex; gap: 10px; }
.actions-row .btn { flex: 1; }

/* ================ Toast ================ */
.toast {
  position: fixed;
  bottom: calc(100px + env(safe-area-inset-bottom));
  inset-inline-start: 50%; transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--positive);
  color: var(--text);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; pointer-events: none;
  box-shadow: var(--sh-3);
  transition: opacity 0.25s, transform 0.25s;
  z-index: 99999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }
.toast .check { color: var(--positive); display: inline-flex; align-items: center; }
.toast.error { border-inline-start-color: var(--danger); }
.toast.error .check { color: var(--danger); }
/* 05.09.2026: 'warn' war optisch identisch mit Erfolg (gruener Punkt) */
.toast.warn { border-inline-start-color: var(--warning-flaeche); }
.toast.warn .check { color: var(--warning); }
/* 06.09.2026 (Pruefung C5): Plausi-Listen kommen mit Zeilenumbruechen —
   vorher liefen alle Punkte in EINER Zeile zusammen. */
#toast-text { white-space: pre-line; }

/* ================ Foto-Preview ================ */
.photo-preview {
  width: 100%; aspect-ratio: 3/4;
  border-radius: var(--r-2xl);
  margin: 0 0 20px;
  position: relative; overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview-empty {
  color: var(--text-mute); font-size: 14px;
  text-align: center; padding: 20px;
}
.photo-input { display: none; }
.photo-btn {
  width: 100%; padding: 14px;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-xl);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit; font-size: 14px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.photo-btn:active { border-color: var(--accent); color: var(--accent); }

/* ================ Signatur ================ */
.sig-pad-wrap {
  background: #fff;
  border-radius: var(--r-lg);
  aspect-ratio: 16/9;
  position: relative;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.sig-pad { width: 100%; height: 100%; touch-action: none; }
.sig-clear {
  position: absolute; top: 8px; inset-inline-end: 8px;
  background: rgba(0,0,0,0.65);
  color: #fff; border: none;
  padding: 6px 13px; border-radius: var(--r);
  font-size: 12px; cursor: pointer;
  font-weight: 600;
}

/* ================ List-Item ================ */
.list-item {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 13px 15px;
  border-radius: var(--r-lg);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
  transition: border-color var(--t-fast);
}
.list-item:active { border-color: var(--border-strong); }
.list-item-text { flex: 1; font-size: 14px; font-weight: 600; }
.list-item-sub { color: var(--text-mute); font-size: 11px; font-weight: 500; margin-top: 2px; }

/* ================ Loading ================ */
.loading { text-align: center; color: var(--text-mute); padding: 40px 20px; font-size: 14px; }
.spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle; margin-inline-end: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================ Queue-Badge ================ */
.queue-badge {
  background: var(--warning); color: #0a0a0a;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 10px; font-weight: 800;
  margin-inline-start: 6px;
  display: inline-flex; align-items: center; gap: 4px;
}
.queue-badge:active { transform: scale(0.96); }

/* ================ Queue-Detail-Sheet ================ */
.qd-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 5000;
  display: flex; align-items: flex-end; justify-content: center;
}
.qd-sheet {
  width: 100%; max-width: 540px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: var(--sh-3);
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.qd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.qd-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.qd-x {
  background: transparent; border: none;
  color: var(--text-mute);
  font-size: 22px; cursor: pointer;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.qd-x:hover { color: var(--text); background: var(--surface-2); }
.qd-body { flex: 1; overflow-y: auto; padding: 8px 14px; }
.qd-empty { padding: 28px 12px; text-align: center; color: var(--text-mute); font-size: 13px; }
.qd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
}
.qd-row:last-child { border-bottom: none; }
.qd-row-main { flex: 1; min-width: 0; }
.qd-row-label {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qd-row-meta { font-size: 11px; color: var(--text-mute); margin-top: 2px; font-family: var(--mono); }
.qd-discard {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
  border-radius: var(--r); padding: 7px 11px;
  font-size: 14px; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.qd-discard:active { background: var(--danger); color: #fff; border-color: var(--danger); }
.qd-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
}
.qd-status { font-size: 12px; color: var(--text-mute); }
.qd-retry {
  background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: var(--r-md);
  padding: 11px 18px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast);
}
.qd-retry:active { transform: scale(0.97); }
.qd-retry:hover { background: var(--accent-2); }

/* ================ DOKUMENTE-TAB ================ */
.docs-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 12px 0;
  background: var(--bg);
}
.docs-header .btn-ghost {
  padding: 10px 14px; font-size: 13px;
  min-height: 44px; min-width: 76px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.docs-header .btn-ghost:active { background: var(--surface-3); }
.screen-h2 {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.018em;
  min-width: 0;
  overflow-wrap: break-word; word-break: normal;
  white-space: normal; overflow: visible;
  line-height: 1.25; margin: 0;
}
.today-bv-card, .gal-bv-card, .doc-bv-card {
  overflow: hidden; min-width: 0;
}
.today-bv-card .tbc-title,
.today-bv-card .tbc-addr,
.gal-bv-card .gal-row-main,
.gal-bv-card .gal-row-sub,
.doc-bv-card .name,
.doc-bv-card .street {
  overflow-wrap: break-word; word-break: normal;
}
.docs-section { display: flex; flex-direction: column; gap: 10px; }
.docs-bv-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 14px;
}
.docs-bv-info .bv-name { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.docs-bv-info .bv-street { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.doc-bv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.doc-bv-card:active { border-color: var(--accent); }
.doc-bv-card .row1 {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.doc-bv-card .name { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.005em; }
.doc-bv-card .count { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.doc-bv-card .street { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.docs-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: border-color var(--t-fast);
}
.doc-card:active { border-color: var(--border-strong); }
.doc-card .doc-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--accent);
}
.doc-card .doc-icon .lucide,
.doc-card .doc-icon [data-lucide] { width: 20px; height: 20px; }
.doc-card .doc-body { flex: 1; min-width: 0; }
.doc-card .doc-name {
  font-family: var(--body); font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-card .doc-meta { font-size: 11px; color: var(--text-mute); margin-top: 4px; }
.doc-card .doc-cat-pill {
  display: inline-block;
  background: var(--accent-soft); color: var(--accent);
  padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; margin-inline-end: 6px;
  font-weight: 700; letter-spacing: 0.04em;
}
.doc-card .doc-actions { display: flex; gap: 6px; flex-shrink: 0; }
.doc-card .doc-actions button {
  background: none; border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px; font-size: 12px;
  color: var(--text-dim); cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.doc-card .doc-actions button:active { color: var(--text); border-color: var(--border-strong); }
.doc-card .doc-actions .delete { color: var(--danger); border-color: rgba(248,113,113,0.30); }
.docs-info-banner {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 13px; margin-top: 12px;
}
.docs-info-banner.ok  { color: var(--positive); border-color: rgba(52,211,153,0.30); background: var(--positive-soft); }
.docs-info-banner.err { color: var(--danger);   border-color: rgba(248,113,113,0.30); background: var(--danger-soft); }
.docs-empty { text-align: center; color: var(--text-mute); padding: 24px 12px; font-size: 13px; }

/* ================ Modal ================ */
.modal {
  position: fixed; inset: 0;
  background: rgba(8,8,12,0.72);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.modal-card {
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 22px;
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
  box-shadow: var(--sh-3);
}
.modal-h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 18px; margin-bottom: 6px;
  letter-spacing: -0.018em;
}
.modal-card label { font-size: 12px; color: var(--text-dim); margin-top: 4px; font-weight: 600; }
.modal-card select, .modal-card input[type="text"], .modal-card input[type="file"] {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-family: var(--body); font-size: 14px;
}
.modal-card input:focus, .modal-card select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--ring);
}
.modal-actions { display: flex; gap: 10px; margin-top: 10px; }
.modal-actions button { flex: 1; }

/* ================ Badges ================ */
.badge-count {
  display: inline-block;
  background: var(--danger); color: #fff;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  font-family: var(--mono); font-size: 11px;
  margin-inline-start: 6px;
  min-width: 22px; text-align: center; font-weight: 800;
}
.badge-count.zero { background: var(--surface-2); color: var(--text-mute); }

/* ================ PL-Invoice-Liste ================ */
.pli-list { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.pli-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--t-fast);
}
.pli-card:active { border-color: var(--border-strong); }
.pli-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pli-supplier { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.pli-amount { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--accent); }
.pli-meta { font-size: 12px; color: var(--text-dim); font-family: var(--mono); }
.pli-bv { font-size: 13px; color: var(--text); margin-top: 4px; }
.pli-bv-label {
  color: var(--text-mute); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
}
.pli-actions { display: flex; gap: 8px; margin-top: 8px; }
.pli-actions .btn { flex: 1; padding: 14px; font-size: 14px; }
.pli-btn-approve {
  background: var(--positive); color: var(--accent-fg);
  border: none;
}
.pli-btn-reject {
  background: transparent; color: var(--danger);
  border: 1px solid rgba(248,113,113,0.40);
  box-shadow: none;
}
.pli-btn-open {
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--border);
  flex: 0; padding: 12px 18px;
  box-shadow: none;
}
.pli-empty { text-align: center; color: var(--text-mute); padding: 40px 20px; font-size: 14px; }

.screen-info {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px 14px; font-size: 13px; margin-bottom: 12px;
}
.screen-info.ok  { color: var(--positive); border-color: rgba(52,211,153,0.30); background: var(--positive-soft); }
.screen-info.err { color: var(--danger);   border-color: rgba(248,113,113,0.30); background: var(--danger-soft); }

/* ================ BV-Detail in App ================ */
/* BV-Detail (Bauakte-Sicht App) — Premium-Polish Silvio 11.05.2026 */
.bvd-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.bvd-row { display: flex; gap: 12px; font-size: 13.5px; line-height: 1.4; align-items: baseline; }
.bvd-lbl {
  color: var(--text-mute); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-family: var(--mono); min-width: 62px;
  font-weight: 700;
}

.bvd-counts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 18px;
}
.bvd-count-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px; text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.bvd-count-card:hover { border-color: var(--border-strong); }
.bvd-count-card:active {
  background: var(--surface-2);
  border-color: var(--accent);
  transform: scale(0.96);
}
.bvd-count-num {
  font-family: var(--display); font-size: 22px; font-weight: 800;
  color: var(--accent); letter-spacing: -0.025em; line-height: 1.1;
}
.bvd-count-lbl {
  font-size: 9.5px; color: var(--text-mute); margin-top: 4px;
  font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}

.bvd-h3 {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--text-dim);
  margin: 22px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.bvd-h3::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 60%);
}
.bvd-crew { display: flex; flex-wrap: wrap; gap: 6px; }
.bvd-crew-pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  transition: border-color var(--t-fast);
}
.bvd-crew-pill:hover { border-color: var(--border-strong); }
.bvd-crew-empty {
  color: var(--text-mute); font-size: 12px; padding: 6px 2px;
  font-style: italic;
}

.bvd-activity { display: flex; flex-direction: column; gap: 6px; }
.bvd-act-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color var(--t-fast);
}
.bvd-act-row:hover { border-color: var(--border-strong); }
.bvd-act-typ {
  font-family: var(--mono); font-size: 9px;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.bvd-act-typ.foto     { background: var(--accent-soft);  color: var(--accent); }
.bvd-act-typ.dokument { background: var(--positive-soft); color: var(--positive); }
.bvd-act-typ.rechnung { background: var(--warning-soft);  color: var(--warning); }
.bvd-act-text { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bvd-act-when { font-family: var(--mono); font-size: 10px; color: var(--text-mute); }

.arbzg-info {
  margin-top: 8px; padding: 10px 12px;
  border-radius: var(--r);
  font-size: 12px; line-height: 1.45;
  background: var(--warning-soft);
  border: 1px solid rgba(251,191,36,0.30);
  color: var(--warning);
}
.arbzg-info.danger { background: var(--danger-soft);   border-color: rgba(248,113,113,0.30); color: var(--danger); }
.arbzg-info.ok     { background: var(--positive-soft); border-color: rgba(52,211,153,0.30); color: var(--positive); }

.modal { display: flex; }

/* ================ Stunden-Summary ================ */
.hsum-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.hsum-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 8px; text-align: center;
}
.hsum-num {
  font-family: var(--display); font-size: 22px; font-weight: 800;
  color: var(--accent); letter-spacing: -0.022em;
}
.hsum-lbl {
  font-size: 10px; color: var(--text-mute);
  margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: var(--mono); font-weight: 600;
}
.hsum-entries { display: flex; flex-direction: column; gap: 4px; }
.hsum-entry {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 12px;
}
.hsum-entry-date { color: var(--text-mute); font-family: var(--mono); font-size: 11px; }
.hsum-entry-bv { font-weight: 600; }
.hsum-entry-h { color: var(--accent); font-weight: 700; font-family: var(--mono); }

/* ================ Profil-Buttons ================ */
.prof-btn {
  width: 100%; padding: 13px 14px; margin-bottom: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text); font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; text-align:start;
  display: flex; align-items: center; gap: 10px;
  transition: background var(--t-fast), transform 0.08s;
}
.prof-btn:active { background: var(--surface-3); transform: scale(0.985); }
.prof-btn-primary {
  background: linear-gradient(155deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--accent-fg);
  border-color: transparent;
  box-shadow: var(--sh-1);
}
.prof-btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(248,113,113,0.30);
}

/* ================ Tagesnotizen ================ */
.day-notes-wrap { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.dn-card {
  background: var(--info-soft);
  border: 1px solid rgba(96,165,250,0.30);
  border-radius: var(--r-lg);
  padding: 11px 14px;
}
.dn-card.dn-today {
  background: linear-gradient(135deg, rgba(96,165,250,0.16), rgba(96,165,250,0.06));
  border: 1.5px solid rgba(96,165,250,0.45);
}
.dn-card.dn-tomorrow { background: rgba(96,165,250,0.06); border-color: rgba(96,165,250,0.22); }
.dn-card.dn-week     { background: rgba(168,162,255,0.08); border-color: rgba(168,162,255,0.30); }
.dn-card.dn-personal-today {
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--warning-flaeche) 10%, transparent));
  border: 1.5px solid color-mix(in srgb, var(--warning-flaeche) 50%, transparent);
  animation: dn-personal-pulse 2.4s ease-out infinite;
}
.dn-card.dn-personal-tomorrow {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.dn-card.dn-personal-today .dn-head,
.dn-card.dn-personal-tomorrow .dn-head { color: var(--accent); }
@keyframes dn-personal-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
.dn-head {
  font-family: var(--display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--info); margin-bottom: 4px;
}
.dn-card.dn-week .dn-head { color: #c4b5fd; }
.dn-text { font-size: 14px; color: var(--text); white-space: pre-wrap; line-height: 1.45; }

/* ================ Inbox-Banner ================ */
.inbox-banner {
  background: linear-gradient(135deg, rgba(251,191,36,0.16), color-mix(in srgb, var(--accent) 14%, transparent));
  border: 1.5px solid rgba(251,191,36,0.45);
  border-radius: var(--r-xl);
  padding: 13px 14px; margin: 0 0 14px;
  animation: inbox-pulse 2.4s ease-out infinite;
}
@keyframes inbox-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0.40); }
  70%  { box-shadow: 0 0 0 12px rgba(251,191,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}
.inbox-banner-head {
  font-family: var(--display); font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--warning);
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.inbox-banner-total {
  background: var(--warning); color: var(--accent-fg);
  padding: 2px 10px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 13px; font-weight: 800;
  min-width: 24px; text-align: center;
}
.inbox-cards { display: flex; flex-direction: column; gap: 8px; }
.inbox-card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid rgba(251,191,36,0.30);
  border-radius: var(--r-md);
  padding: 12px 14px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: transform 0.10s, border-color var(--t-fast);
  font-family: inherit; text-align:start; width: 100%;
}
.inbox-card:active { transform: scale(0.98); }
.inbox-card.urgent { border-color: rgba(248,113,113,0.55); background: var(--danger-soft); }
.inbox-card.muted  { border-color: var(--border); opacity: 0.85; }
.inbox-card.info   { border-color: rgba(96,165,250,0.35); background: var(--info-soft); }
.inbox-card-text { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.005em; }
.inbox-card-num {
  font-family: var(--mono); font-size: 15px; font-weight: 800;
  background: var(--warning); color: var(--accent-fg);
  padding: 3px 12px; border-radius: var(--r-pill);
  min-width: 32px; text-align: center;
}
.inbox-card.urgent .inbox-card-num { background: var(--danger); color: #fff; }
.inbox-card.info   .inbox-card-num { background: var(--info); color: var(--accent-fg); }

/* ================ Meine Anfragen (myr-Karten) ================ */
.myr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 8px;
}
.myr-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.myr-status {
  font-family: var(--mono); font-size: 10px;
  padding: 3px 9px; border-radius: var(--r-pill);
  text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.04em;
}
.myr-status.offen        { background: var(--warning-soft);  color: var(--warning); }
.myr-status.bestellt     { background: var(--accent-soft);   color: var(--accent); }
.myr-status.erledigt     { background: var(--positive-soft); color: var(--positive); }
.myr-status.abgelehnt    { background: var(--danger-soft);   color: var(--danger); }
.myr-status.freigegeben  { background: var(--positive-soft); color: var(--positive); }
.myr-text { font-size: 13px; margin-top: 4px; }
.myr-meta { font-size: 11px; color: var(--text-mute); margin-top: 4px; font-family: var(--mono); }
.myr-note {
  font-size: 12px; color: var(--text);
  background: var(--surface-2);
  border-inline-start: 3px solid var(--accent);
  padding: 7px 11px; margin-top: 6px;
  border-radius: var(--r-xs);
}
.myr-rej {
  font-size: 12px; color: var(--danger);
  background: var(--danger-soft);
  border-inline-start: 3px solid var(--danger);
  padding: 7px 11px; margin-top: 6px;
  border-radius: var(--r-xs);
}

/* ================ Geburtstags-Modal ================ */
#bday-modal { position: fixed; inset: 0; z-index: 99999; }
.bday-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow: hidden;
  animation: bday-fade-in 0.40s ease-out;
}
@keyframes bday-fade-in { from { opacity: 0; } to { opacity: 1; } }
.bday-card {
  position: relative;
  background: linear-gradient(135deg, var(--surface) 0%, #2a1a0a 100%);
  border: 2px solid var(--warning);
  border-radius: 22px;
  padding: 26px 22px;
  max-width: 480px; width: 100%;
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 60px rgba(251,191,36,0.30), 0 0 0 1px rgba(251,191,36,0.20);
  text-align: center; z-index: 2;
  animation: bday-pop-in 0.50s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bday-pop-in {
  from { opacity: 0; transform: scale(0.7) translateY(40px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.bday-emoji {
  font-size: 64px; line-height: 1;
  margin-bottom: 12px;
  animation: bday-bounce 2s ease-in-out infinite;
}
@media (min-height: 640px) { .bday-emoji { font-size: 80px; margin-bottom: 16px; } }
@keyframes bday-bounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-8px) rotate(5deg); }
}
.bday-text {
  font-size: 15px; line-height: 1.55;
  color: var(--text); white-space: pre-line;
  margin-bottom: 20px; font-weight: 500;
}
@media (min-height: 640px) { .bday-text { font-size: 16px; line-height: 1.60; margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .bday-overlay, .bday-card, .bday-emoji, .bday-piece { animation: none !important; }
  .bday-confetti { display: none; }
}
.bday-close-btn {
  background: linear-gradient(135deg, var(--warning) 0%, var(--accent) 100%);
  color: var(--accent-fg); border: none;
  padding: 14px 32px; border-radius: var(--r-pill);
  font-size: 16px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(251,191,36,0.35);
  transition: transform var(--t-fast);
}
.bday-close-btn:active { transform: scale(0.96); }

.bday-confetti {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 1;
}
.bday-piece {
  position: absolute; top: -20px;
  display: block; border-radius: 2px;
  animation: bday-fall linear infinite;
}
@keyframes bday-fall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.80; }
}

/* ================ Stempeluhr-16-Uhr-Modal ================ */
#stempel-16-modal { position: fixed; inset: 0; z-index: 99000; }
.stempel16-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: bday-fade-in 0.25s ease-out;
}
.stempel16-card {
  background: var(--surface);
  border: 2px solid var(--warning);
  border-radius: var(--r-2xl);
  padding: 28px 24px;
  max-width: 360px; width: 100%;
  text-align: center;
  box-shadow: 0 16px 40px rgba(251,191,36,0.25);
}
.stempel16-btn-stop, .stempel16-btn-go {
  display: block; width: 100%; border: 0;
  border-radius: var(--r-pill);
  font-size: 16px; font-weight: 800;
  padding: 13px 24px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: inherit;
}
.stempel16-btn-stop {
  background: linear-gradient(135deg, var(--danger) 0%, var(--warning-flaeche) 100%);
  color: #fff;
}
.stempel16-btn-go {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.stempel16-btn-stop:active, .stempel16-btn-go:active { transform: scale(0.97); }

/* ================ Sicherheitsunterweisung ================ */
#safety-banner { margin-bottom: 14px; }
.safety-banner-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--danger-soft) 0%, var(--accent-soft) 100%);
  border: 1.5px solid rgba(248,113,113,0.50);
  border-radius: var(--r-xl);
  padding: 14px 16px;
  cursor: pointer;
  transition: transform 0.10s;
  width: 100%; text-align:start;
}
.safety-banner-card:active { transform: scale(0.98); }
.safety-banner-icon { font-size: 28px; line-height: 1; color: var(--danger); }
.safety-banner-icon .lucide,
.safety-banner-icon [data-lucide] { width: 28px; height: 28px; }
.safety-banner-text { flex: 1; }
.safety-banner-title { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--danger); line-height: 1.2; letter-spacing: -0.01em; }
.safety-banner-sub   { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.3; }
.safety-banner-arrow { font-size: 26px; color: var(--danger); line-height: 1; font-weight: 700; }

/* ================ Zeitkonto-Detailseite ================ */
.zk-hero {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--positive-soft) 100%);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px 18px;
  text-align: center; margin-bottom: 14px;
}
.zk-hero-saldo {
  font-family: var(--display); font-weight: 800; font-size: 44px;
  line-height: 1.05; letter-spacing: -0.03em;
}
.zk-hero-saldo.pos { color: var(--positive); }
.zk-hero-saldo.neg { color: var(--danger); }
.zk-hero-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.zk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.zk-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 14px;
}
.zk-stat-label {
  font-size: 11px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.zk-stat-num {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  margin-top: 4px; line-height: 1.1;
  letter-spacing: -0.022em;
}
.zk-stat-num.pos { color: var(--positive); }
.zk-stat-num.neg { color: var(--danger); }
.zk-week-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.zk-week-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.zk-week-row:last-child { border-bottom: 0; }
.zk-week-date { color: var(--text-dim); flex: 1; font-family: var(--mono); font-size: 12px; }
.zk-week-detail { color: var(--text-mute); font-size: 11px; margin-top: 2px; }
.zk-week-delta {
  font-weight: 800; font-family: var(--display);
  font-size: 15px; min-width: 70px; text-align:end;
  letter-spacing: -0.01em;
}
.zk-week-delta.pos { color: var(--positive); }
.zk-week-delta.neg { color: var(--danger); }

/* ================ Geburtstag-anderer-Banner ================ */
#birthday-others-banner { margin-bottom: 14px; }
.bday-others-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(251,191,36,0.16) 0%, var(--accent-soft) 100%);
  border: 1.5px solid rgba(251,191,36,0.45);
  border-radius: var(--r-xl);
  padding: 12px 14px;
  width: 100%; text-align:start;
}
.bday-others-icon { font-size: 26px; line-height: 1; color: var(--warning); }
.bday-others-icon .lucide,
.bday-others-icon [data-lucide] { width: 26px; height: 26px; }
.bday-others-text { flex: 1; }
.bday-others-title { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--warning); line-height: 1.25; letter-spacing: -0.005em; }
.bday-others-sub   { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.35; }

/* ================ Safety-Doc-Liste ================ */
.safety-doc {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--t-fast), transform 0.10s;
  font-size: 13px;
}
.safety-doc:active { transform: scale(0.98); }
.safety-doc[data-opened="1"] {
  border-color: rgba(52,211,153,0.45);
  background: var(--positive-soft);
}
.safety-doc-num {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 800;
  color: var(--text-dim); flex-shrink: 0;
}
.safety-doc[data-opened="1"] .safety-doc-num {
  background: var(--positive); color: var(--accent-fg);
}
.safety-doc-name { flex: 1; word-break: break-word; }
.safety-doc-status { font-size: 11px; flex-shrink: 0; }

/* ================ Tour-Overlay ================ */
#tour-overlay {
  position: fixed; inset: 0; z-index: 10000;
  pointer-events: none;
}
.tour-spot {
  position: absolute;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.72);
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  transition: all 0.25s ease;
  pointer-events: none;
}
.tour-spot.tour-spot-pulse {
  animation: tourPulse 1.6s ease-in-out infinite;
}
@keyframes tourPulse {
  0%, 100% { outline-color: var(--accent); }
  50%      { outline-color: var(--warning); }
}
.tour-tooltip {
  position: absolute;
  max-width: 360px; width: calc(100vw - 32px);
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: var(--r-xl);
  padding: 18px 20px 16px;
  color: var(--text);
  box-shadow: var(--sh-3);
  pointer-events: auto;
  font-size: 16px; line-height: 1.55;
  animation: tourFadeIn 0.22s ease-out;
}
@keyframes tourFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tour-tooltip-title {
  font-family: var(--display); font-weight: 700;
  font-size: 18px; margin-bottom: 8px;
  color: var(--accent); line-height: 1.25;
  letter-spacing: -0.018em;
}
.tour-tooltip-text {
  color: var(--text-dim);
  margin-bottom: 16px;
  white-space: pre-line; font-size: 16px;
}
.tour-tooltip-actions {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.tour-step-counter {
  font-size: 12px; color: var(--text-mute);
  margin-inline-end: auto;
  font-family: var(--mono);
}
.tour-btn {
  border: none;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--r-md);
  padding: 11px 18px;
  font-weight: 800; font-size: 16px;
  font-family: inherit;
  cursor: pointer; min-height: 46px;
  transition: background var(--t-fast);
}
.tour-btn:active { transform: scale(0.97); }
.tour-btn:hover { background: var(--accent-2); }
.tour-btn-ghost {
  background: transparent;
  color: var(--text-mute);
  border: 1px solid var(--border);
}
.tour-btn-back {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.tour-tooltip.tour-tooltip-center {
  top: 50% !important; inset-inline-start: 50% !important;
  transform: translate(-50%, -50%);
  max-width: 360px; text-align: center;
}
.tour-tooltip.tour-tooltip-center .tour-tooltip-actions { justify-content: center; }
.tour-tooltip.tour-tooltip-center .tour-step-counter { display: none; }

/* ================ Custom Scrollbars ================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

/* ============================================================
   Phase 4 — Mobile-App Detail-Polish (10.05.2026)
   ============================================================ */

/* === Action-Card-Grid — feiner Hover-Akzent === */
.action-card {
  position: relative;
}
.action-card:not(.primary)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%);
  pointer-events: none;
}
.action-card:not(.primary):active {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
/* Silvio 11.05.2026: dezenter Hover-Lift für Premium-Feel auf größeren
   Touch-Screens (Tablet); auf reinem Touch-Phone tut der hover nichts. */
@media (hover: hover) {
  .action-card:not(.primary):hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }
  .action-card.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
  }
}
.action-card .action-icon .lucide,
.action-card .action-icon [data-lucide] {
  width: 22px; height: 22px;
  color: var(--accent);
}
.action-card.primary .action-icon .lucide,
.action-card.primary .action-icon [data-lucide] {
  color: var(--accent-fg);
}

/* === Date-Input + Time-Input: helle Picker im Dark-Mode === */
.form-input[type="date"],
.form-input[type="time"],
input[type="date"],
input[type="time"] {
  color-scheme: light;
}
html[data-theme="light"] .form-input[type="date"],
html[data-theme="light"] .form-input[type="time"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"] {
  color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.92) brightness(1.05);
  cursor: pointer;
  opacity: 0.85;
}
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* === Stempel-Modus (Zeiterfassung) === */
#stempel-status {
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--accent) 8%)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  padding: 22px 18px !important;
  margin-bottom: 16px !important;
  text-align: center;
  box-shadow: var(--sh-1);
}
#stempel-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute) !important;
  font-family: var(--mono);
}
#stempel-clock {
  font-size: 46px !important;
  font-family: var(--mono) !important;
  font-weight: 800 !important;
  margin-top: 10px !important;
  letter-spacing: -0.02em;
  color: var(--text) !important;
  font-feature-settings: "tnum" on, "lnum" on;
}
/* Wenn am Laufen — Akzent-Glow + Pulse */
#stempel-status.running {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 80%, var(--accent) 20%)) !important;
}
#stempel-status.running #stempel-clock {
  color: var(--accent) !important;
  animation: stempel-pulse 2s ease-in-out infinite;
}
@keyframes stempel-pulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); }
}

/* Stempel Start/Stop-Buttons */
#btn-stempel-start {
  background: var(--positive) !important;
  color: var(--accent-fg) !important;
  border: 1px solid var(--positive);
  font-weight: 800 !important;
  font-size: 18px !important;
  padding: 17px 20px !important;
  box-shadow: var(--sh-2);
  letter-spacing: -0.005em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
#btn-stempel-start:active { filter: brightness(0.95); transform: scale(0.98); }

#btn-stempel-stop {
  background: var(--danger) !important;
  color: #fff !important;
  border: 1px solid var(--danger);
  font-weight: 800 !important;
  font-size: 18px !important;
  padding: 17px 20px !important;
  box-shadow: var(--sh-2);
  letter-spacing: -0.005em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
#btn-stempel-stop:active { filter: brightness(0.95); transform: scale(0.98); }

#stempel-result {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 14px;
  margin-top: 12px !important;
  font-family: var(--mono);
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  text-align: center;
}
#stempel-result:empty { display: none; }

/* === Quick-Action-Bar — bessere Touch-Targets === */
.qa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: -0.005em;
}
.qa-btn .lucide,
.qa-btn [data-lucide] { width: 16px; height: 16px; }

/* === Hours-Days-Picker (Mehrtage-Auswahl) === */
.hd-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* === Chips (Tätigkeits-Auswahl) === */
#hours-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* === Signature-Pad === */
.sig-pad-wrap {
  position: relative;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.sig-clear {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* === PDF-Vorschau-Modal === */
#pdf-preview-modal .modal-card {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
#pdf-preview-title {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.018em;
}
#pdf-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

/* === Page-Header Back-Btn premium === */
.back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.back-btn:active {
  background: var(--surface-3);
  border-color: var(--accent);
  transform: scale(0.96);
}
.back-btn svg {
  width: 18px;
  height: 18px;
  color: var(--text);
}

/* === Tabs (Stempeln / Schnell / Detail) === */
.tabs {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 4px;
  display: flex;
  gap: 2px;
}
.tab {
  flex: 1;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-dim) !important;
  padding: 11px !important;
  font-family: var(--display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--r-md) !important;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  letter-spacing: -0.005em;
}
.tab.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}

/* === Forms === */
.form-label {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  box-shadow: var(--ring);
}

/* === Inbox-Banner (Wartet auf dich) === */
.inbox-banner-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-banner-head .lucide,
.inbox-banner-head [data-lucide] {
  width: 18px; height: 18px;
}

/* === BV-Detail-Counts (Foto/Doc/Stunden/Material) === */
.bvd-counts {
  gap: 8px;
}
.bvd-count-card {
  transition: background var(--t-fast), transform var(--t-fast);
}
.bvd-count-card:active {
  background: var(--surface-2);
  transform: scale(0.97);
}
.bvd-count-num {
  font-feature-settings: "tnum" on, "lnum" on;
}

/* === Chat-Thread-Karten === */
.chat-thread {
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.chat-thread:active {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.chat-thread.has-unread::before {
  content: "";
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface);
}

/* === Heute-BV-Karte (TBC) === */
.today-bv-card {
  position: relative;
  overflow: hidden;
}
.today-bv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 0% 0%, rgba(96,165,250,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.today-bv-card .tbc-head {
  font-family: var(--mono);
}

/* === PIN-Login Premium === */
.pin-pad {
  margin-top: 4px;
}
.pin-key:active {
  transform: scale(0.94);
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* === Doc-Card / PLI-Card / List-Item Hover (Touch-Feedback) === */
.doc-bv-card:active,
.list-item:active,
.gal-row:active {
  transform: scale(0.98);
  transition: transform 0.08s;
}

/* === Toast === */
.toast {
  font-family: var(--display);
  letter-spacing: -0.005em;
}
.toast .check .lucide,
.toast .check [data-lucide] {
  width: 16px; height: 16px;
}

/* === Swipe-Back-Geste (iOS-Style) === */
/* Aktive Screens duerfen ihre transform-Property aendern (vom JS-Handler).
   Wir setzen will-change und transform-Property damit der Browser die GPU-
   Composition nutzt — buttery 60fps.
   touch-action: pan-y pinch-zoom blockiert Safari-eigene Edge-Swipe-Geste (A2 29.09.: +pinch-zoom,
   sonst kein Zwei-Finger-Zoom), unsere Swipe-Back-JS-Logik bleibt allein zustaendig.
   -webkit-touch-callout: none verhindert iOS-Text-Lupe und Kontext-Menue
   bei laengeren Touches. */
.phone {
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.screen.active {
  will-change: transform;
  touch-action: pan-y pinch-zoom;
  -webkit-touch-callout: none;
}
/* Inputs / Textareas / Text-Bereiche brauchen Selection — sonst kann
   man nicht tippen / kopieren. Whitelist gezielt. */
.screen.active input,
.screen.active textarea,
.screen.active select,
.screen.active .chat-messages,
.screen.active .chat-msg-text,
.screen.active .chat-thread-last,
.screen.active .pin-pad,
.screen.active .sig-pad,
.screen.active .activity-line,
.screen.active .myr-text,
.screen.active .dplan-bv,
.screen.active .docs-list,
.screen.active .doc-name,
.screen.active .pli-bv {
  touch-action: auto;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Bilder: kein Halten-zum-Speichern Menue auf Touch */
.phone img,
.screen.active img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Edge-Hint: Pfeil-Indikator am linken Rand, erscheint waehrend Wisch */
.sc-swipe-back-hint {
  position: fixed;
  inset-inline-start: 6px;
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  width: 32px;
  height: 60px;
  background: var(--accent);
  border-radius: 0 12px 12px 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 4px rgba(0,0,0,0.30);
  transition: opacity 0.22s ease;
}
/* Chevron-Pfeil innerhalb */
.sc-swipe-back-hint::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-inline-start: 2.5px solid var(--accent-fg);
  border-bottom: 2.5px solid var(--accent-fg);
  transform: rotate(45deg);
  margin-inline-end: -3px;
}

/* ============================================================
   Phase 4 — Chat-Messages Mobile Detail-Polish (10.05.2026)
   ============================================================ */

/* === Chat-Messages-Container mit subtilem Punkt-Raster === */
.chat-messages {
  background: var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0);
  background-size: 22px 22px;
  padding: 18px 16px !important;
  display: flex;
  flex-direction: column;
  gap: 4px !important;
}
html[data-theme="light"] .chat-messages {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.04) 1px, transparent 0);
}

/* Empty-State */
.chat-messages > .empty-hint,
.chat-messages > div[style*="text-align:center"] {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: 28px 18px !important;
  text-align: center;
  color: var(--text-mute) !important;
  font-size: 13px;
  font-style: italic;
  align-self: stretch;
}

/* === Chat-Bubble — Premium-Style === */
.chat-msg {
  position: relative;
  max-width: 78%;
  margin-bottom: 4px;
  padding: 9px 13px 7px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
  border-bottom-left-radius: var(--r-sm);
  animation: chat-msg-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Eigene Nachrichten — rechts mit Akzent-Soft */
.chat-msg.own {
  margin-inline-start: auto;
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: var(--r-sm);
}
html[data-theme="light"] .chat-msg.own {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Wenn dieselbe Person hintereinander schreibt, enger gestackt */
.chat-msg + .chat-msg:not(.own):not(.own + *) {
  border-top-left-radius: var(--r-sm);
}
.chat-msg.own + .chat-msg.own {
  border-top-right-radius: var(--r-sm);
}

/* === Meta-Zeile (Sender + Zeit + Receipt) === */
.chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 10px !important;
  font-family: var(--mono);
  color: var(--text-mute) !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.chat-msg.own .chat-msg-meta {
  justify-content: flex-end;
}

/* Sender-Name bei fremden Nachrichten */
.chat-msg-from {
  font-family: var(--display);
  font-weight: 800;
  font-size: 11px;
  color: var(--accent);
  text-transform: none;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-msg-from::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.chat-msg-when {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}

/* Read-Receipts (✓ / ✓✓) als Lucide-Icons */
.chat-msg-receipt {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 2px;
}
.chat-msg-receipt .lucide,
.chat-msg-receipt [data-lucide] {
  width: 13px;
  height: 13px;
}
.chat-msg-receipt.sent {
  color: var(--text-mute);
}
.chat-msg-receipt.read {
  color: var(--info);
}

/* === Body — Text === */
.chat-msg-text {
  font-size: 14px !important;
  color: var(--text) !important;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
}

/* === Audio-Nachricht-Card === */
.chat-msg-audio {
  margin-top: 4px;
}
.chat-msg-audio audio {
  width: 100%;
  max-width: 240px;
  height: 36px;
  display: block;
  border-radius: var(--r-pill);
}
.chat-msg-audio-label {
  font-family: var(--mono);
  font-size: 10px !important;
  color: var(--text-mute);
  margin-top: 5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-msg-audio-label .lucide,
.chat-msg-audio-label [data-lucide] {
  width: 11px;
  height: 11px;
  color: var(--accent);
}

/* === Rückgängig-Button — als Mini-Pill unter der Nachricht === */
.chat-msg-undo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  margin-inline-start: 0;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.30);
  border-radius: var(--r-pill);
  color: var(--danger);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--display);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.chat-msg-undo:active {
  background: var(--danger-soft);
  border-color: var(--danger);
}
.chat-msg-undo .lucide,
.chat-msg-undo [data-lucide] {
  width: 11px;
  height: 11px;
}

/* === Input-Bar === */
.chat-input-row {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 12px !important;
  display: flex;
  gap: 6px !important;
  align-items: flex-end;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.20);
}

/* Mic-Buttons (Diktieren + Sprache) */
.chat-mic-btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}
.chat-mic-btn .lucide,
.chat-mic-btn [data-lucide] {
  width: 18px;
  height: 18px;
}
.chat-mic-btn.dictate-btn {
  background: var(--info-soft);
  border-color: rgba(96,165,250,0.40);
  color: var(--info);
}
.chat-mic-btn.dictate-btn:active {
  background: rgba(96,165,250,0.22);
}
.chat-mic-btn.dictate-btn.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: micpulse 1s infinite;
}
.chat-mic-btn.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: micpulse 1s infinite;
}

/* Send-Button als runder Akzent-CTA */
.chat-send-btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: 1px solid var(--accent);
  flex-shrink: 0;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 0 !important;
  align-self: flex-end !important;
}
.chat-send-btn .lucide,
.chat-send-btn [data-lucide] {
  width: 18px;
  height: 18px;
}
.chat-send-btn:active {
  transform: scale(0.95);
  background: var(--accent-2) !important;
}
.chat-send-btn:disabled {
  opacity: 0.50;
  box-shadow: none;
}

/* Input-Textarea — minimum 44px hoch, Premium-Pill */
.chat-input {
  flex: 1 !important;
  min-height: 44px !important;
  max-height: 120px;
  padding: 11px 14px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  font-size: 14px !important;
  font-family: var(--body) !important;
  line-height: 1.4;
  resize: none !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.chat-input:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: var(--ring) !important;
  background: var(--surface) !important;
}

/* === Rec-Bar (während der Sprachaufnahme) === */
/* Silvio 17.05.2026: die Klasse hatte `display:flex !important` ohne
   Berücksichtigung des [hidden]-Attributs → Rec-Bar war dauerhaft sichtbar,
   obwohl die App im idle-Zustand `hidden` gesetzt hatte. Fix: getrennte
   Selektoren `.chat-rec-bar[hidden]` (display:none) und `:not([hidden])`. */
.chat-rec-bar[hidden] { display: none !important; }
.chat-rec-bar:not([hidden]) {
  background: var(--danger-soft) !important;
  border-top: 1px solid rgba(248,113,113,0.40) !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 -8px 24px rgba(248,113,113,0.20);
  /* z-index über dem FAB-Zurück-Knopf: FAB-Back hat z-index 7800 und
     überlappte die Abbrechen/Senden-Buttons → Touches gingen an den FAB,
     nicht an die Buttons. */
  position: relative !important;
  z-index: 8500 !important;
}
/* Wenn Recording laeuft, FAB-Back komplett raus — man will eh nicht
   weg-navigieren waehrend die Aufnahme laeuft. */
body:has(.chat-rec-bar:not([hidden])) .fab-back { display: none !important; }
body:has(.chat-rec-overlay:not([hidden])) .fab-back { display: none !important; }
/* 01.07.2026 Silvio: Während der Sprachnachricht-Aufnahme die Bottom-Navbar
   ausblenden — sie liegt in einem höheren Stacking-Context und verdeckte sonst
   die Verwerfen/Senden-Knöpfe des Recorder-Overlays (Aufnahme ließ sich nicht
   stoppen). Overlay-z-index zusätzlich angehoben. */
body:has(.chat-rec-overlay:not([hidden])) .navbar { display: none !important; }

/* === Vollbild-Recorder-Overlay (Silvio 17.05.2026 nacht) ===
   Statemachine: idle = nichts sichtbar, recording = Overlay sichtbar.
   Baustellen-tauglich: keine Wischgesten, große Hit-Areas (≥56 px),
   klare Trennung der zwei Aktionen (Verwerfen rot, Senden grün). */
.chat-rec-overlay[hidden] { display: none !important; }
.chat-rec-overlay:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
  display: flex !important;
  align-items: flex-end;
  animation: chatRecFadeIn 0.18s ease-out;
}
@keyframes chatRecFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.chat-rec-card {
  width: 100%;
  background: linear-gradient(180deg, var(--surface, #1c1c22), var(--surface, #15151a));
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 28px 22px max(28px, env(safe-area-inset-bottom));
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: chatRecSlideUp 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes chatRecSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.chat-rec-mic-circle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #f87171);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow:
    0 4px 14px rgba(239, 68, 68, 0.45),
    0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: chatRecMicPulse 1.4s ease-in-out infinite;
}
.chat-rec-mic-circle i,
.chat-rec-mic-circle svg { width: 42px; height: 42px; stroke-width: 2.4; }
@keyframes chatRecMicPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(239,68,68,0.45), 0 0 0 0 rgba(239,68,68,0.55); }
  50%      { box-shadow: 0 4px 14px rgba(239,68,68,0.45), 0 0 0 14px rgba(239,68,68,0); }
}
.chat-rec-time-big {
  font-family: var(--mono, monospace);
  font-size: 44px;
  font-weight: 700;
  color: var(--text, #fff);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.chat-rec-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute, rgba(255,255,255,0.55));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chat-rec-actions {
  display: flex;
  gap: 14px;
  width: 100%;
  margin-top: 6px;
}
.chat-rec-btn-cancel,
.chat-rec-btn-send {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.chat-rec-btn-cancel:active,
.chat-rec-btn-send:active { transform: scale(0.97); }
.chat-rec-btn-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #fff);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.chat-rec-btn-cancel i,
.chat-rec-btn-cancel svg { width: 22px; height: 22px; stroke-width: 2.4; color: #ef4444; }
.chat-rec-btn-send {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), white 22%));
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.chat-rec-btn-send i,
.chat-rec-btn-send svg { width: 22px; height: 22px; stroke-width: 2.4; }
.chat-rec-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
  animation: micpulse 0.9s infinite;
  box-shadow: 0 0 0 4px rgba(248,113,113,0.20);
}
.chat-rec-time {
  font-family: var(--mono) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--danger) !important;
  flex: 1;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" on, "lnum" on;
}
.chat-rec-x {
  background: var(--surface) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.chat-rec-x .lucide,
.chat-rec-x [data-lucide] { width: 13px; height: 13px; }
.chat-rec-ok {
  background: var(--positive) !important;
  color: var(--accent-fg) !important;
  border: 1px solid var(--positive) !important;
  border-radius: var(--r-pill) !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(52,211,153,0.30);
}
.chat-rec-ok .lucide,
.chat-rec-ok [data-lucide] { width: 13px; height: 13px; }
.chat-rec-ok:active {
  filter: brightness(0.95);
  transform: scale(0.98);
}

/* === Chat-Thread-Liste-Karten === */
.chat-thread {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px !important;
  margin-bottom: 6px !important;
  transition: background var(--t-fast), border-color var(--t-fast), transform 0.08s;
}
.chat-thread:active {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: scale(0.99);
}
.chat-thread.has-unread {
  background: var(--surface);
  border-color: rgba(248,113,113,0.40);
  border-inline-start: 3px solid var(--danger);
  padding-inline-start: 11px !important;
}
.chat-thread-bv {
  font-family: var(--display);
  letter-spacing: -0.005em;
}
.chat-thread-when {
  letter-spacing: 0.04em;
}
.chat-thread-badge {
  background: var(--danger);
  color: #fff;
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* Page-Title im Chat-Detail */
#screen-chatdetail .page-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.018em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Chat-Body Vollhoehe */
.chat-body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* =============================================================
   Schwebender Zurück-Pfeil (FAB) — Silvio 11.05.2026
   Ersatz für iOS-Swipe-Back, das auf der PWA nicht zuverlässig
   funktioniert. Unten-links, immer sichtbar wenn nicht auf Home.
   ============================================================= */
.fab-back {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  inset-inline-start: calc(env(safe-area-inset-left, 0px) + 14px);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  color: var(--text);
  z-index: 7800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.50),
    0 0 0 1px rgba(0,0,0,0.30);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.fab-back:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}
.fab-back:active {
  transform: scale(0.92);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.fab-back svg { display: block; pointer-events: none; }
.fab-back[hidden] { display: none !important; }
/* ft-Befund 28.08.2026 (dreimal belegt: Material-Melden, Stempeln/
   BV-Auswahl, Stunden-Detail): Auf Maus-Geraeten ist der fab-back sichtbar
   (Touch versteckt ihn weiter unten per Wisch-Navigations-Regel) und
   deckte am Seitenende die linke Ecke der "Abbrechen"-Knoepfe ab
   ("bbrechen"). Der Kreis ragt bis ~144px + safe-area ueber die
   Unterkante — die Screens bekommen auf diesen Geraeten entsprechend
   mehr Fussfreiheit als die 100px der Basis-Regel. */
@media (hover: hover), (pointer: fine) {
  .screen { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
}

/* Sprach-zu-Stunden Mic-FAB (Silvio 17.05.2026): Floating rechts unten Home */
.voice-hours-fab {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  inset-inline-end: calc(env(safe-area-inset-right, 0px) + 14px);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  z-index: 7800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 6px rgba(0,0,0,0.30);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.voice-hours-fab:hover { transform: scale(1.04); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 55%, transparent), 0 2px 6px rgba(0,0,0,0.30); }
.voice-hours-fab:active { transform: scale(0.92); }
.voice-hours-fab[hidden] { display: none !important; }
.voice-hours-fab.recording {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  animation: vh-fab-pulse 1.2s ease-in-out infinite;
}
/* 12.11.2026 (Lieb, KI-Figur Stufe 1): Funke sitzt auf dem Mikrofon-Knopf (ki_figur_handy.js). Kein oranger Grund –
   Orange nur an Lampe und Ring, solange sie zuhört; groß genug für Handschuh und Fingerknöchel. */
.voice-hours-fab.ki-figur {
  width: 72px; height: 72px; padding: 0;
  background: transparent; box-shadow: none; color: var(--text);
}
.voice-hours-fab.ki-figur:hover { box-shadow: none; }
.voice-hours-fab.ki-figur .ki-figur-bild { width: 68px; height: 68px; }
.voice-hours-fab.ki-figur.recording {
  background: transparent; animation: none;
}
@keyframes vh-fab-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55), 0 6px 18px rgba(239,68,68,0.45); }
  50%      { box-shadow: 0 0 0 14px rgba(239,68,68,0.00), 0 6px 18px rgba(239,68,68,0.45); }
}

/* Lightbox-Counter (Pfeile entfernt 15.05.2026 — Swipe reicht). */
.lightbox-counter {
  position: absolute;
  top: 14px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  z-index: 5;
}

/* =====================================================================
   Premium-Polish 17.05.2026 (Silvio): beschreibbare Felder klar erkennbar,
   Wisch-Navigation statt Pfeilen, Hairline-Trennungen — funktioniert
   automatisch in Hell-Modus via html[data-theme="light"] Tokens.
   ===================================================================== */

/* Beschreibbare Felder — klar erkennbar in beiden Modi */
input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
input[type="password"], input[type="date"], input[type="time"], input[type="search"],
input[type="url"], input:not([type]), textarea, select,
.form-input, .form-select, .form-textarea, .sc-input {
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  padding: 10px 12px;
  min-height: 44px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
textarea, .form-textarea { min-height: 80px; line-height: 1.45; resize: vertical; }
select, .form-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
                    linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 32px;
}

input:focus, textarea:focus, select:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus, .sc-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--ring);
}

input:disabled, input[readonly], textarea:disabled, textarea[readonly],
select:disabled, .form-input:disabled, .form-input[readonly],
.form-select:disabled, .form-textarea:disabled, .sc-input:disabled, .sc-input[readonly] {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-dim);
  opacity: 0.72;
  cursor: not-allowed;
}

input::placeholder, textarea::placeholder, .form-input::placeholder,
.sc-input::placeholder, .form-textarea::placeholder {
  color: var(--text-mute);
  opacity: 1;
}

/* Checkboxes/Radios bekommen einen sichtbaren Rahmen, ohne ihr natives Aussehen zu verlieren */
input[type="checkbox"], input[type="radio"] {
  min-height: auto;
  padding: 0;
  width: 20px; height: 20px;
  accent-color: var(--accent);
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface-2);
}
input[type="radio"] { border-radius: 999px; }

/* iOS Safari soll Inputs nicht heran-zoomen — 15px-Schwelle gilt nicht für 16px Fonts.
   A2 (29.09.2026): !important, weil über 100 Felder ihre Größe direkt im style=""
   setzen (13–15 px) und damit diese Regel schlugen. Solange user-scalable=no galt,
   fiel das nicht auf; seit Zoomen erlaubt ist, würde das iPhone sonst bei jedem
   dieser Felder ungefragt hineinzoomen. Nur iOS — Android zoomt beim Antippen nicht. */
@supports (-webkit-touch-callout: none) {
  input, textarea, select, .form-input, .form-select, .form-textarea {
    font-size: 16px !important;
  }
}

/* Wisch-Navigation statt Pfeilen — setupSwipeBack in app.js:10432 laeuft schon.
   Pfeile nur auf Touch-Geraeten ausblenden, Desktop behaelt sie als Fallback.
   Silvio 17.05.2026 (Update): auch fab-back + alle inline "Zurueck"-Buttons weg. */
@media (hover: none) and (pointer: coarse) {
  .header .back-btn,
  .back-btn,
  .back-btn-row,
  .fab-back,
  .btn-ghost[onclick*="goBack"],
  .btn-ghost[onclick*="showScreen('home')"],
  button[onclick*="goBack"] {
    display: none !important;
  }
  /* Spezialfaelle die kein goBack sind (eigene Handler, z.B. docs-back ‚← BV-Liste') bleiben sichtbar */
  #docs-back { display: inline-flex !important; }
}

/* Sektion-Header zusätzlich abheben (Premium): kleiner Akzent-Punkt links */
.home-section-mini::before {
  content: ""; width: 4px; height: 4px; border-radius: 999px;
  background: var(--accent); opacity: 0.85; flex: 0 0 4px;
}


/* =====================================================================
   App Hell- + Dunkel-Modus Polish 17.05.2026 (Silvio):
   - Hell-Modus: weisse Schrift in Bannern, die nicht auf saturiertem
     Gradient sitzt, hart gegen Body-Token tauschen.
   - Pastell-Hex-Tones (fca5a5/fbbf24/...) auf semantische Tokens.
   - Dunkel-Modus: zarter Anti-Plumb-Schimmer auf Cards.
   ===================================================================== */

/* Hell-Modus: weiße/transparente Schrift in Containern mit hellem Background.
   Whitelist über :where() schließt Banner mit gesättigtem Gradient aus,
   die echt weiße Schrift brauchen (Update-Banner orange, Spiegel-Banner violet,
   Rollen-Switch orange, Impersonate).
   04.10.2026 (lieb, gemessen): DUNKLE Knöpfe behalten Weiß — #2563eb (5,17 statt 3,80)
   und #0e6e72 (6,01 statt 3,27, z. B. „Ganzer Raum“ in der Notiz-Ansicht). Auf
   hellen/gesättigten Knöpfen (Orange, Grün) ist dunkel besser und bleibt.
   Wächter: hell_weisse_schrift.domtest.js */
html[data-theme="light"] :where(:not(.btn-accent):not(.action-card.primary):not(#sc-impersonate-banner):not(#role-alt-banner):not(#app-update-banner):not(.tmw-komm):not([style*="background:#2563eb"]):not([style*="background:#0e6e72"]))[style*="color:#fff"],
html[data-theme="light"] :where(:not(.btn-accent):not(.action-card.primary):not(#sc-impersonate-banner):not(#role-alt-banner):not(#app-update-banner):not(.tmw-komm):not([style*="background:#2563eb"]):not([style*="background:#0e6e72"]))[style*="color: #fff"],
html[data-theme="light"] :where(:not(.btn-accent):not(.action-card.primary):not(#sc-impersonate-banner):not(#role-alt-banner):not(#app-update-banner):not(.tmw-komm):not([style*="background:#2563eb"]):not([style*="background:#0e6e72"]))[style*="color:#FFF"],
html[data-theme="light"] :where(:not(.btn-accent):not(.action-card.primary):not(#sc-impersonate-banner):not(#role-alt-banner):not(#app-update-banner):not(.tmw-komm):not([style*="background:#2563eb"]):not([style*="background:#0e6e72"]))[style*="color:#ffffff"],
html[data-theme="light"] :where(:not(.btn-accent):not(.action-card.primary):not(#sc-impersonate-banner):not(#role-alt-banner):not(#app-update-banner):not(.tmw-komm):not([style*="background:#2563eb"]):not([style*="background:#0e6e72"]))[style*="color:rgba(255,255,255"] {
  color: var(--text) !important;
}

/* Hell-Modus: pastell-Hex-Toene auf semantische Tokens umlenken.
   Diese Farben funktionieren in Dunkel-Modus, sind aber im Hell-Modus auf
   hellem Background nicht lesbar. */
html[data-theme="light"] [style*="color:#fca5a5"],
html[data-theme="light"] [style*="color: #fca5a5"] { color: var(--danger) !important; }
html[data-theme="light"] [style*="color:#fbbf24"],
html[data-theme="light"] [style*="color: #fbbf24"] { color: var(--warning) !important; }
html[data-theme="light"] [style*="color:#fdba74"],
html[data-theme="light"] [style*="color: #fdba74"] { color: var(--warning) !important; }
html[data-theme="light"] [style*="color:#7dd3fc"],
html[data-theme="light"] [style*="color: #7dd3fc"] { color: var(--info, #1240B6) !important; }
html[data-theme="light"] [style*="color:#86efac"],
html[data-theme="light"] [style*="color: #86efac"] { color: var(--positive) !important; }
html[data-theme="light"] [style*="color:#34d399"],
html[data-theme="light"] [style*="color: #34d399"] { color: var(--positive) !important; }
html[data-theme="light"] [style*="color:#93c5fd"],
html[data-theme="light"] [style*="color: #93c5fd"] { color: var(--info, #1240B6) !important; }
html[data-theme="light"] [style*="color:#c4b5fd"],
html[data-theme="light"] [style*="color: #c4b5fd"] { color: #6D28D9 !important; }
html[data-theme="light"] [style*="color:#fb923c"],
html[data-theme="light"] [style*="color: #fb923c"] { color: var(--warning) !important; }

/* Status-Pillen im Hell-Modus: kraeftiger Border + Font-Weight, analog V9 */
html[data-theme="light"] .status-pill,
html[data-theme="light"] .sc-pill,
html[data-theme="light"] [data-ampel] {
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  border-width: 1.5px !important;
}
html[data-theme="light"] [data-ampel="rot"] {
  background: rgba(159,19,19,0.18) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
html[data-theme="light"] [data-ampel="gelb"] {
  background: color-mix(in srgb, var(--warning-flaeche) 16%, transparent) !important;
  border-color: var(--warning) !important;
  color: var(--warning) !important;
}
html[data-theme="light"] [data-ampel="gruen"] {
  background: rgba(15,107,51,0.16) !important;
  border-color: var(--positive) !important;
  color: var(--positive) !important;
}

/* Hell-Modus: kraeftiger Drawer-Schatten + Modal-Shadow */
html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .lightbox {
  background: rgba(30,30,40,0.55) !important;
  backdrop-filter: blur(3px);
}
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-card {
  border: 1px solid var(--border-strong);
  box-shadow: 0 16px 48px rgba(20,20,30,0.18);
}

/* Dunkel-Modus auflockern: dezenter Anti-Plumb-Schimmer + Hover-Lift */
html:not([data-theme="light"]) .myr-card,
html:not([data-theme="light"]) .inbox-card,
html:not([data-theme="light"]) .docs-card,
html:not([data-theme="light"]) .modal-card,
html:not([data-theme="light"]) .ba-cat-block,
html:not([data-theme="light"]) .pf-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.45);
}

html:not([data-theme="light"]) .action-card {
  transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease;
}
html:not([data-theme="light"]) .action-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Dunkel-Modus: Akzent-Punkt im Section-Header bekommt zarte Glow-Aura */
html:not([data-theme="light"]) .home-section-mini::before {
  box-shadow: 0 0 8px var(--accent-glow, rgba(255,107,44,0.40));
}

/* Dunkel-Modus Drawer-Schatten verstärken (mehr Tiefe) */
html:not([data-theme="light"]) .sc-drawer,
html:not([data-theme="light"]) .veh-drawer,
html:not([data-theme="light"]) .pf-drawer {
  box-shadow: -16px 0 48px rgba(0,0,0,0.62), 1px 0 0 var(--border) inset;
}

/* Sprint Kalender-3 (Silvio 18.05.2026) — App-Kalender Outlook-Stil */
#screen-kalender { user-select: none; -webkit-user-select: none; }
.kal-app-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface, #15151a);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  margin-bottom: 6px;
}
.kal-app-nav-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text, #fff);
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.kal-app-nav-btn:hover { background: rgba(255,255,255,0.10); }
.kal-app-nav-btn:active { transform: scale(0.94); }
.kal-app-day-pill {
  flex: 1; text-align: center;
  font-family: var(--display, inherit);
  font-size: 18px; font-weight: 800;
  color: var(--accent, #FF6B2C);
  letter-spacing: -0.01em;
}
.kal-app-hint {
  text-align: center;
  font-size: 13px; color: var(--text-mute, rgba(255,255,255,0.45));
  padding: 4px 0 10px;
  font-style: italic;
}
.kal-app-list {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 80px;
}
.kal-app-empty, .kal-app-loading {
  padding: 50px 18px; text-align: center;
  color: var(--text-mute, rgba(255,255,255,0.55)); font-size: 14px;
}
.kal-app-card {
  display: flex; gap: 0;
  background: var(--surface, #15151a);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 12px; overflow: hidden;
  cursor: pointer; min-height: 64px;
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}
.kal-app-card:active { transform: scale(0.98); }
.kal-app-card-bar { width: 5px; background: var(--kal-c, #3b82f6); flex-shrink: 0; }
.kal-app-card-body { padding: 10px 14px; flex: 1; min-width: 0; }
.kal-app-card-top {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-mute, rgba(255,255,255,0.55));
  margin-bottom: 3px;
}
/* 22.06.2026 Silvio: Karten-Texte auf Theme-Farben (vorher hart #fff →
   im Hellmodus weiße Schrift auf hellem Grund, unlesbar). */
.kal-app-time { font-family: ui-monospace, monospace; color: var(--text, #fff); }
.kal-app-prio-hoch { color: var(--warning); font-size: 14px; }
.kal-app-card-title {
  font-size: 15px; font-weight: 700; color: var(--text, #fff);
  line-height: 1.3; margin-bottom: 3px;
}
.kal-app-card-meta {
  font-size: 12px; color: var(--text-mute, rgba(255,255,255,0.6));
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kal-app-parts {
  display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap;
}
.kal-app-init {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 10px; font-weight: 800; color: #fff;
  border: 1px solid rgba(0,0,0,0.30);
}
.kal-app-more {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--text-mute, rgba(255,255,255,0.55));
  background: var(--surface-2, rgba(255,255,255,0.06)); border: 1px solid var(--border, rgba(255,255,255,0.10));
}
.kal-app-new-fab {
  /* 22.06.2026 Silvio: bottom safe-area-aware — sonst verdeckt die Navbar
     (bottom:0 + env(safe-area-inset-bottom)) den FAB am iPhone. */
  position: fixed; bottom: calc(88px + env(safe-area-inset-bottom)); inset-inline-end: 18px; z-index: 100;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border: 0; color: #fff; font-size: 30px; line-height: 1;
  cursor: pointer; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 50%, transparent);
  display: flex; align-items: center; justify-content: center;
}

/* 19.05.2026 Silvio FIX — Touch-Target Cleanup fuer Pfeile + Nav-Buttons.
 * Verhindert dass innere SVGs/Icons den Click "absorbieren".
 */
.kal-app-nav-btn,
.kal-app-nav-btn *,
.nav-btn,
.nav-btn * {
  -webkit-tap-highlight-color: transparent;
}
.kal-app-nav-btn > svg,
.kal-app-nav-btn svg,
.kal-app-nav-btn > i,
.nav-btn > svg,
.nav-btn svg {
  pointer-events: none;
}

/* 26.05.2026 (Silvio): App-Plantafel — horizontalen Überlauf abklemmen, sonst
   liess sich der Screen beim Wischen seitlich wegschieben und blieb hängen
   (".screen" hat overflow-y:auto → overflow-x wird per Spec zu auto). */
#screen-plantafel { overflow-x: hidden; }
#pt-app-body { overflow-x: hidden; }
#pt-app-list { width: 100%; max-width: 100%; }
#pt-app-list .pt-ma-chip {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  text-align:start;
}

/* === 29.05.2026 Sprint 4b-2: Sub-Rolle Minimal-Sicht === */
body.role-sub .action-card.pl-only,
body.role-sub .home-section-title.pl-only,
body.role-sub #home-stats-bar,
body.role-sub #dash-todo-banner,
body.role-sub #home-week-cards,
body.role-sub #home-tomorrow-card,
body.role-sub #home-today-card,
body.role-sub .stempel-card,
body.role-sub #wochenkarte,
body.role-sub .dienstplan-week,
body.role-sub #role-alt-banner { display: none !important; }

body.role-sub #home-greeting {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

/* 30.05.2026 Silvio: Sub-Dashboard auf Home — Auftraege gruppiert nach Frist */
.sub-dash { margin: 8px 0 16px; display: flex; flex-direction: column; gap: 14px; }
.sub-dash-skeleton, .sub-dash-err { padding: 16px; color: var(--text-mute); text-align: center; }
.sub-dash-empty { padding: 28px 16px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }

.sub-group { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px 12px; }
.sub-group.g-wartet  { border-color: var(--warning-flaeche); background: rgba(251,191,36,0.06); }
.sub-group.g-rot     { border-color: #ef4444; background: rgba(239,68,68,0.05); }
.sub-group.g-orange  { border-color: var(--warning-flaeche); background: color-mix(in srgb, var(--warning-flaeche) 5%, transparent); }
.sub-group.g-gelb    { border-color: #facc15; }
.sub-group.g-blau    { border-color: #60a5fa; }
.sub-group.g-grau    { border-color: var(--border); }

.sub-group-head { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.sub-group-count { background: rgba(255,255,255,0.08); color: var(--text-mute); padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
html[data-theme="light"] .sub-group-count { background: rgba(0,0,0,0.06); }

.sub-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: background .15s, transform .1s; }
.sub-card:last-child { margin-bottom: 0; }
.sub-card:active { transform: scale(0.985); }
.sub-card:hover { background: rgba(255,255,255,0.05); }
html[data-theme="light"] .sub-card { background: #fff; }
html[data-theme="light"] .sub-card:hover { background: #fafafa; }
.sub-card.g-fertig { opacity: 0.7; }

.sub-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.sub-card-ar { font-weight: 700; font-size: 13px; color: var(--text); }
.sub-card-addr { font-size: 13px; color: var(--text); margin-bottom: 4px; }
.sub-card-row { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.sub-card-betreff { font-style: italic; color: var(--text); }
.sub-card-trade { color: var(--accent, #f4722a); }
.sub-card-pl { color: var(--text-mute); }
/* 17.06.2026 Silvio: Sub-Budget (Festpreis) gross + grün hervorgehoben */
.sub-card-budget { margin-top: 6px; padding: 7px 10px; border-radius: 8px;
  background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.45);
  color: #047857; font-weight: 800; font-size: 14px; line-height: 1.3; }
html[data-theme="dark"] .sub-card-budget { color: #6ee7b7; }
.sub-card-budget-hint { display: block; margin-top: 2px; font-weight: 500;
  font-size: 11px; color: var(--text-mute); }

.frist-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.frist-chip.frist-rot    { background: #ef4444; color: #fff; }
.frist-chip.frist-orange { background: var(--warning-flaeche); color: #fff; }
.frist-chip.frist-gelb   { background: #facc15; color: #1a1a1f; }
.frist-chip.frist-blau   { background: #60a5fa; color: #fff; }
.frist-chip.frist-grau   { background: rgba(255,255,255,0.08); color: var(--text-mute); }
html[data-theme="light"] .frist-chip.frist-grau { background: rgba(0,0,0,0.06); }

.sub-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.sub-card-btn { flex: 1; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; }
.sub-card-btn-accept  { background: #22c55e; color: #fff; }
.sub-card-btn-decline { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid #ef4444; }

/* 31.05.2026 Silvio: Quick-Action-Leiste auf Sub-Card (Navi + Mieter + PL).
   Solider Hintergrund + weisser Text — Silvio: blau/gruen vorher zu hell
   gegenueber heller Hintergrund-Karte = nicht lesbar. */
.sub-card-quick { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sub-q-btn {
  flex: 1 1 auto; min-width: 90px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 14px;
  text-decoration: none; border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
}
.sub-q-navi   { background: #0284c7; border-color: #0369a1; }       /* sky-600 */
.sub-q-tenant { background: #16a34a; border-color: #15803d; }       /* green-600 */
.sub-q-pl     { background: #9333ea; border-color: #7e22ce; }       /* purple-600 */
.sub-q-chat   { background: var(--accent-2); border-color: var(--accent-2); cursor: pointer; }  /* orange-600 */
.sub-q-btn:active { transform: scale(0.97); filter: brightness(0.9); }
/* Hell-Modus: gleiche solide Farben — Kontrast bleibt gut, nichts aendern. */

.sub-group-fertig summary { cursor: pointer; padding: 8px 12px; color: var(--text-mute); font-weight: 600; font-size: 13px; }
.sub-group-fertig[open] summary { margin-bottom: 6px; }
.sub-group-fertig { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0 4px; }

/* === 31.05.2026 Silvio: Hell-Modus Sanity-Catchall v2 ===
   Erfasst Inputs/Textareas/Selects/Labels/Buttons/Borders mit hartcodiertem
   semitransparenten Weiß (alle Alpha-Werte 0.02-0.18). 149 Stellen erfasst. */
html[data-theme="light"] input[style*="rgba(255,255,255,0.02"],
html[data-theme="light"] input[style*="rgba(255,255,255,0.03"],
html[data-theme="light"] input[style*="rgba(255,255,255,0.04"],
html[data-theme="light"] input[style*="rgba(255,255,255,0.05"],
html[data-theme="light"] input[style*="rgba(255,255,255,0.06"],
html[data-theme="light"] input[style*="rgba(255,255,255,0.08"],
html[data-theme="light"] input[style*="rgba(255,255,255,0.1"],
html[data-theme="light"] input[style*="rgba(255,255,255,0.12"],
html[data-theme="light"] input[style*="rgba(255,255,255,0.14"],
html[data-theme="light"] input[style*="rgba(255,255,255,0.18"],
html[data-theme="light"] textarea[style*="rgba(255,255,255,0.02"],
html[data-theme="light"] textarea[style*="rgba(255,255,255,0.03"],
html[data-theme="light"] textarea[style*="rgba(255,255,255,0.04"],
html[data-theme="light"] textarea[style*="rgba(255,255,255,0.05"],
html[data-theme="light"] textarea[style*="rgba(255,255,255,0.06"],
html[data-theme="light"] textarea[style*="rgba(255,255,255,0.08"],
html[data-theme="light"] textarea[style*="rgba(255,255,255,0.1"],
html[data-theme="light"] textarea[style*="rgba(255,255,255,0.12"],
html[data-theme="light"] textarea[style*="rgba(255,255,255,0.14"],
html[data-theme="light"] select[style*="rgba(255,255,255,0.0"],
html[data-theme="light"] select[style*="rgba(255,255,255,0.1"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: var(--text-mute) !important;
  opacity: 1;
}

/* Label/Span/Div mit blasser weißer Schrift (40+ Stellen App-Inline-Labels) */
html[data-theme="light"] label[style*="rgba(255,255,255,0.5"],
html[data-theme="light"] label[style*="rgba(255,255,255,0.6"],
html[data-theme="light"] label[style*="rgba(255,255,255,0.7"],
html[data-theme="light"] label[style*="rgba(255,255,255,0.8"],
html[data-theme="light"] span[style*="color:rgba(255,255,255,0.5"],
html[data-theme="light"] span[style*="color:rgba(255,255,255,0.6"],
html[data-theme="light"] span[style*="color:rgba(255,255,255,0.7"],
html[data-theme="light"] span[style*="color:rgba(255,255,255,0.8"],
html[data-theme="light"] div[style*="color:rgba(255,255,255,0.5"],
html[data-theme="light"] div[style*="color:rgba(255,255,255,0.6"],
html[data-theme="light"] div[style*="color:rgba(255,255,255,0.7"] {
  color: var(--text-dim) !important;
}

/* Buttons mit blass-weißem Background (Filter-Pills, Cancel-Buttons) */
html[data-theme="light"] button[style*="rgba(255,255,255,0.06"],
html[data-theme="light"] button[style*="rgba(255,255,255,0.08"],
html[data-theme="light"] button[style*="rgba(255,255,255,0.1"],
html[data-theme="light"] button[style*="rgba(255,255,255,0.14"],
html[data-theme="light"] button[style*="rgba(255,255,255,0.18"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Borders/Divider mit blass-weißer Linie unsichtbar im Hell-Modus */
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.05"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.06"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.08"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.1"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.14"],
html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.05"],
html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.06"],
html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.08"] {
  border-color: var(--border) !important;
}

/* 20.06.2026 Hellmodus-Lesbarkeit (WCAG): inline gesetzte helle Textfarben
   (für Dunkelmodus gedacht) im Hellmodus zentral auf dunkle, lesbare Töne remappen.
   Nur html[data-theme="light"] -> Dunkelmodus bleibt unverändert. */
html[data-theme="light"] [style*="color:#7dd3fc"],
html[data-theme="light"] [style*="color: #7dd3fc"],
html[data-theme="light"] [style*="color:#7DD3FC"],
html[data-theme="light"] [style*="color: #7DD3FC"],
html[data-theme="light"] [style*="color:#93c5fd"],
html[data-theme="light"] [style*="color: #93c5fd"],
html[data-theme="light"] [style*="color:#93C5FD"],
html[data-theme="light"] [style*="color: #93C5FD"],
html[data-theme="light"] [style*="color:#60a5fa"],
html[data-theme="light"] [style*="color: #60a5fa"],
html[data-theme="light"] [style*="color:#60A5FA"],
html[data-theme="light"] [style*="color: #60A5FA"],
html[data-theme="light"] [style*="color:#38bdf8"],
html[data-theme="light"] [style*="color: #38bdf8"],
html[data-theme="light"] [style*="color:#38BDF8"],
html[data-theme="light"] [style*="color: #38BDF8"],
html[data-theme="light"] [style*="color:#0ea5e9"],
html[data-theme="light"] [style*="color: #0ea5e9"],
html[data-theme="light"] [style*="color:#0EA5E9"],
html[data-theme="light"] [style*="color: #0EA5E9"] { color: #1240B6 !important; }
html[data-theme="light"] [style*="color:#fca5a5"],
html[data-theme="light"] [style*="color: #fca5a5"],
html[data-theme="light"] [style*="color:#FCA5A5"],
html[data-theme="light"] [style*="color: #FCA5A5"],
html[data-theme="light"] [style*="color:#f87171"],
html[data-theme="light"] [style*="color: #f87171"],
html[data-theme="light"] [style*="color:#F87171"],
html[data-theme="light"] [style*="color: #F87171"],
html[data-theme="light"] [style*="color:#ef4444"],
html[data-theme="light"] [style*="color: #ef4444"],
html[data-theme="light"] [style*="color:#EF4444"],
html[data-theme="light"] [style*="color: #EF4444"] { color: #B91C1C !important; }
html[data-theme="light"] [style*="color:#86efac"],
html[data-theme="light"] [style*="color: #86efac"],
html[data-theme="light"] [style*="color:#86EFAC"],
html[data-theme="light"] [style*="color: #86EFAC"],
html[data-theme="light"] [style*="color:#4ade80"],
html[data-theme="light"] [style*="color: #4ade80"],
html[data-theme="light"] [style*="color:#4ADE80"],
html[data-theme="light"] [style*="color: #4ADE80"],
html[data-theme="light"] [style*="color:#6ee7b7"],
html[data-theme="light"] [style*="color: #6ee7b7"],
html[data-theme="light"] [style*="color:#6EE7B7"],
html[data-theme="light"] [style*="color: #6EE7B7"],
html[data-theme="light"] [style*="color:#34d399"],
html[data-theme="light"] [style*="color: #34d399"],
html[data-theme="light"] [style*="color:#34D399"],
html[data-theme="light"] [style*="color: #34D399"],
html[data-theme="light"] [style*="color:#10b981"],
html[data-theme="light"] [style*="color: #10b981"],
html[data-theme="light"] [style*="color:#10B981"],
html[data-theme="light"] [style*="color: #10B981"],
html[data-theme="light"] [style*="color:#22c55e"],
html[data-theme="light"] [style*="color: #22c55e"],
html[data-theme="light"] [style*="color:#22C55E"],
html[data-theme="light"] [style*="color: #22C55E"] { color: #0F6B33 !important; }
html[data-theme="light"] [style*="color:#fbbf24"],
html[data-theme="light"] [style*="color: #fbbf24"],
html[data-theme="light"] [style*="color:#FBBF24"],
html[data-theme="light"] [style*="color: #FBBF24"],
html[data-theme="light"] [style*="color:#f59e0b"],
html[data-theme="light"] [style*="color: #f59e0b"],
html[data-theme="light"] [style*="color:#F59E0B"],
html[data-theme="light"] [style*="color: #F59E0B"],
html[data-theme="light"] [style*="color:#fcd34d"],
html[data-theme="light"] [style*="color: #fcd34d"],
html[data-theme="light"] [style*="color:#FCD34D"],
html[data-theme="light"] [style*="color: #FCD34D"],
html[data-theme="light"] [style*="color:#fde68a"],
html[data-theme="light"] [style*="color: #fde68a"],
html[data-theme="light"] [style*="color:#FDE68A"],
html[data-theme="light"] [style*="color: #FDE68A"],
html[data-theme="light"] [style*="color:#fdba74"],
html[data-theme="light"] [style*="color: #fdba74"],
html[data-theme="light"] [style*="color:#FDBA74"],
html[data-theme="light"] [style*="color: #FDBA74"] { color: var(--warning) !important; }
html[data-theme="light"] [style*="color:#ff6b2c"],
html[data-theme="light"] [style*="color: #ff6b2c"],
html[data-theme="light"] [style*="color:#FF6B2C"],
html[data-theme="light"] [style*="color: #FF6B2C"],
html[data-theme="light"] [style*="color:#f4722a"],
html[data-theme="light"] [style*="color: #f4722a"],
html[data-theme="light"] [style*="color:#F4722A"],
html[data-theme="light"] [style*="color: #F4722A"],
html[data-theme="light"] [style*="color:#fb923c"],
html[data-theme="light"] [style*="color: #fb923c"],
html[data-theme="light"] [style*="color:#FB923C"],
html[data-theme="light"] [style*="color: #FB923C"],
html[data-theme="light"] [style*="color:#ffb98a"],
html[data-theme="light"] [style*="color: #ffb98a"],
html[data-theme="light"] [style*="color:#FFB98A"],
html[data-theme="light"] [style*="color: #FFB98A"],
html[data-theme="light"] [style*="color:#ffb494"],
html[data-theme="light"] [style*="color: #ffb494"],
html[data-theme="light"] [style*="color:#FFB494"],
html[data-theme="light"] [style*="color: #FFB494"],
html[data-theme="light"] [style*="color:#ffd1b8"],
html[data-theme="light"] [style*="color: #ffd1b8"],
html[data-theme="light"] [style*="color:#FFD1B8"],
html[data-theme="light"] [style*="color: #FFD1B8"] { color: var(--accent-2) !important; }
html[data-theme="light"] [style*="color:#9ca3af"],
html[data-theme="light"] [style*="color: #9ca3af"],
html[data-theme="light"] [style*="color:#9CA3AF"],
html[data-theme="light"] [style*="color: #9CA3AF"],
html[data-theme="light"] [style*="color:#cbd5e1"],
html[data-theme="light"] [style*="color: #cbd5e1"],
html[data-theme="light"] [style*="color:#CBD5E1"],
html[data-theme="light"] [style*="color: #CBD5E1"],
html[data-theme="light"] [style*="color:#d1d5db"],
html[data-theme="light"] [style*="color: #d1d5db"],
html[data-theme="light"] [style*="color:#D1D5DB"],
html[data-theme="light"] [style*="color: #D1D5DB"],
html[data-theme="light"] [style*="color:#6b7280"],
html[data-theme="light"] [style*="color: #6b7280"],
html[data-theme="light"] [style*="color:#6B7280"],
html[data-theme="light"] [style*="color: #6B7280"] { color: #4A5568 !important; }
html[data-theme="light"] [style*="color:#a78bfa"],
html[data-theme="light"] [style*="color: #a78bfa"],
html[data-theme="light"] [style*="color:#A78BFA"],
html[data-theme="light"] [style*="color: #A78BFA"],
html[data-theme="light"] [style*="color:#c4b5fd"],
html[data-theme="light"] [style*="color: #c4b5fd"],
html[data-theme="light"] [style*="color:#C4B5FD"],
html[data-theme="light"] [style*="color: #C4B5FD"],
html[data-theme="light"] [style*="color:#d8b4fe"],
html[data-theme="light"] [style*="color: #d8b4fe"],
html[data-theme="light"] [style*="color:#D8B4FE"],
html[data-theme="light"] [style*="color: #D8B4FE"],
html[data-theme="light"] [style*="color:#e9d5ff"],
html[data-theme="light"] [style*="color: #e9d5ff"],
html[data-theme="light"] [style*="color:#E9D5FF"],
html[data-theme="light"] [style*="color: #E9D5FF"] { color: #6D28D9 !important; }

/* 22.06.2026 Silvio: Hellmodus — die Ausfüll-Dialoge (Abnahmeprotokoll/Blanko)
   nutzen dunkel-only Inline-Stile (background:rgba(255,255,255,0.0x)). Auf hellem
   Grund sind die praktisch unsichtbar → der Bereich zwischen Mängel und
   Unterschrift wirkte „transparent". Mängel-Zeilen + durchscheinende Buttons
   theme-konform (Eingabefelder sind oben schon abgedeckt). */
html[data-theme="light"] .bf-mangel-row {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="light"] .bf-status-btn:not(.bf-status-sel),
html[data-theme="light"] #bf-mangel-add,
html[data-theme="light"] .bfg-row-add,
html[data-theme="light"] #bf-preview,
html[data-theme="light"] #bf-prev-close,
html[data-theme="light"] #bf-cancel {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
/* 22.06.2026 Silvio: ausgewählter Status-Button (z.B. „ohne Vorbehalt") muss im
   Hellmodus klar sichtbar bleiben — die obige Surface-Regel hatte ihn platt
   gemacht. Deutliches Orange. */
html[data-theme="light"] .bf-status-btn.bf-status-sel {
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  color: var(--accent-2) !important;
  border-color: var(--accent) !important;
}

/* 22.06.2026 Silvio: Abnahme-/Blanko-Dialog war im Bereich zwischen den beiden
   Unterschriften NICHT deckend → die Seite dahinter (z.B. das LV der
   Arbeitsanweisung) schien durch („Fall b"). Garantiert deckend machen: eine
   solide --surface-Schicht auf das Overlay UND den Haupt-Container legen, damit
   der GANZE Dialog (inkl. Streifen zwischen den Unterschriften) abdeckt — in
   Hell- UND Dunkelmodus. So kann durch keine Lücke in Kind-Elementen mehr etwas
   durchscheinen. (Auf dem Handy ist der Dialog ohnehin Vollbild.) */
#bf-modal { background: var(--surface) !important; }
#bf-modal > div { background: var(--surface) !important; }

/* AufmaszScan-Anmeldung (27.09.2026, Silvio am Geraet: "riesiges
   Scrollfenster"). Ohne PIN-Feld ist der Inhalt kurz. .login-wrap erzwingt
   min-height:100dvh UND sitzt in .phone, das dasselbe tut — zusammen ergibt
   das eine leere Flaeche plus Scrollweg, und der Inhalt wirkt auseinander-
   gezogen. Im E-Mail-Modus faellt die erzwungene Hoehe weg; .login-wrap
   bekommt seine Hoehe dann aus flex:1 und zentriert innerhalb des Schirms.
   Der PIN-Weg bleibt unberuehrt — die Regel greift nur mit .email-modus. */
#screen-login.email-modus .login-wrap { min-height: 0; }
#screen-login.email-modus .login-logo { margin-bottom: 4px; }

/* 03.11.2026 (Gesamtprüfung M3): sichtbarer Tastatur-Fokus. Bisher gab es in der App keine
   einzige :focus-visible-Regel, wer mit Tastatur oder Schaltsteuerung bedient, sah nicht, wo
   er steht. :focus-visible greift nur bei Tastatur, nicht beim Tippen mit dem Finger. Felder
   behalten ihren eigenen Fokus (Rahmenfarbe). */
:where(button, a[href], summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 08.11.2026 (handy; Silvio „solche Fehler immer gleich mit erledigen“): Die Fenster aus _wnOverlay (Wandblatt,
   Raum-Prüfkarte, Wand-Notizen …) sind IMMER dunkel (#080B0F). Im Hellmodus galten darin die hellen Theme-Farben
   und die Umschreibe-Regeln oben (z. B. [style*="color:#fbbf24"] → var(--warning)) — dunkles Orange, Rot, Grün auf
   Dunkel, kaum lesbar („Leistung ansagen“, „Verwerfen“, Hinweise). Hier gelten die Dunkel-Werte von :root.
   Wächter: wand_arbeit.domtest.js */
html[data-theme="light"] .sc-immer-dunkel {
  --text: #ECEEF2; --text-dim: #A6AAB4; --text-mute: #868B96;
  --accent: #FF6B2C; --accent-fg: #0A0A0A;
  --positive: #34D399; --warning: #FBBF24; --danger: #F87171;
  color-scheme: dark;
}
/* Feste Umschreibungen oben, die in den _wn-Fenstern vorkommen (gemessen 08.11.: nur diese zwei) — im dunklen
   Fenster bleibt die helle Schrift. */
html[data-theme="light"] .sc-immer-dunkel [style*="color:#22c55e"],
html[data-theme="light"] .sc-immer-dunkel [style*="color: #22c55e"] { color: #22c55e !important; }
html[data-theme="light"] .sc-immer-dunkel [style*="color:#fca5a5"],
html[data-theme="light"] .sc-immer-dunkel [style*="color: #fca5a5"] { color: #fca5a5 !important; }

/* 10.11.2026 (Lieb, Silvio „Ja, so bauen“): Vorschau-Knopf im Bautag hat feste Hellblau-Schrift (#bae6fd, inline in
   index.html) — im Hellen 1,2 : 1, unlesbar. Hier dunkle Schrift auf zartem Blau. Wächter: tests/test_hell_modus_ruhig.py */
html[data-theme="light"] #bv-baulog-day-preview {
  color: #0B4A6F !important;
  background: rgba(14,116,144,0.12) !important;
  border-color: rgba(14,116,144,0.45) !important;
}