/* ──────────────────────────────────────────────────────────────────────────
   Bau-Begleiter Mobile-App — Design System v2
   Inter-Font, Lucide-Icons, Bento-Layouts, Smooth Transitions
   ────────────────────────────────────────────────────────────────────────── */
/* DSGVO: kein Google-Fonts-CDN (06.06.). Fonts selbst-gehostet (same-origin) — kein Tracking, kein externer Request. */
/* Exo 2 = Überschriften-Marke wie im Web (24.07.), self-hosted aus /app/static/vendor/fonts. Datei deckt Gewicht 600–800 ab. */
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(../vendor/fonts/exo2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(../vendor/fonts/exo2-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../vendor/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../vendor/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../vendor/fonts/ibmplexsans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../vendor/fonts/ibmplexsans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* 26.07.2026 — Hinweis für später, KEIN Bugfix.
     Diese App (PWA) hat bewusst keinen Dunkelmodus: 0 Regeln, während das Web-CSS
     23 hat. Sie ist eine reine Hell-Oberfläche.
     color-scheme deklariert das ausdrücklich, damit Browser Scrollbalken, Autofill
     und native Bedienelemente passend rendern.
     Gemessen: An Beas Meldung „Text unlesbar" ändert diese Zeile NICHTS — die
     Kontraste sind mit und ohne sie identisch (17,85), weil Hintergrund und
     Textfarbe hier ohnehin explizit gesetzt sind. Der echte Fehler lag im Web-CSS.
     Wenn der Dunkelmodus für die App gebaut wird: hier auf "light dark" umstellen. */
  /* 26.08.2026: „light dark" statt „light" — der Dunkelmodus ist gebaut, und
     damit muss der Browser Scrollbalken, Autofill und native Bedienelemente in
     BEIDEN Modi passend rendern. Die Zeile darueber war der Hinweis dafuer. */
  color-scheme: light dark;

  /* ── Flaechen ───────────────────────────────────────────────────────────────
     Bis zum 26.08.2026 stand an 22 Stellen `background: white` im Klartext.
     Eine harte Farbe folgt keiner Umschaltung — genau daran waere der
     Dunkelmodus haengengeblieben, mit weissen Karten auf dunklem Grund. Eine
     Variable, ein Ort. */
  --surface: #ffffff;
  --surface-2: var(--slate-50);

  /* Milchglas-Flaechen (untere Navigation, Chat-Eingabe). Halbtransparentes
     Weiss im Klartext folgt keiner Umschaltung: im Dunkelmodus blieb die
     Navigationsleiste hell, und der Inhalt schien durch — im BILD gesehen, die
     Kontrastmessung hatte es nicht gemeldet (die Beschriftungen standen schon
     vorher im Bestand). Deshalb auch hier eine Variable. */
  --milchglas: rgba(255,255,255,0.92);

  /* ── Brand (Bau-Begleiter: Orange — an Web-Palette angeglichen 24.07.) ─────── */
  --primary: #d97706;
  /* Schrift AUF Orange — Beas Marken-Entscheidung 27.08.2026 (#1c1310, 5,73:1).
     Gleiches Token wie im Web (static/style.css); Weiss hatte nur 3,19:1. */
  --on-primary: #1c1310;
  --primary-50: #fff7ed;
  --primary-100: #ffedd5;
  --primary-500: #d97706;
  --primary-600: #b45309;
  --primary-700: #92400e;
  /* Orange als SCHRIFTFARBE (BFSG-Runde 30.08.2026, wie Web-style.css):
     --primary steht auf hellem Grund bei 3.19:1 — zu wenig fuer Text (4.5:1).
     Hell das dunklere #9c4708 (>7:1), dunkel bleibt #d97706 (5.9:1 auf
     dunklem Grund) — Wert im Dark-Block. Fuer Text IMMER diese Variable,
     nie --primary direkt. Erste Fundstellen: aktiver Bottom-Nav-Tab. */
  --primary-text: #9c4708;
  --orange-bg: rgba(217,119,6,.14); --ok-bg: rgba(42,114,73,.12); --bad-bg: rgba(180,35,24,.10); --info-bg: rgba(10,91,222,.10);
  --schatten: rgba(0,0,0,.14); --scrim: rgba(0,0,0,.45); --hover: rgba(0,0,0,.05);
  --info-text: #0a5bde; --danger-text: #b42318;

  --accent: #f59e0b;  /* helleres Orange als Sekundär-Akzent (Web --primary-light) */
  --accent-50: #fffbeb;
  --accent-500: #f59e0b;

  /* ── Neutral (Slate-Skala) ──────────────────────────────────────────────── */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  --navy: #2c2c33;       /* Graphit (dunkles Grau, nicht Schwarz) — Header/Statuskarte */
  --navy-soft: #3a3a44;

  /* ── Status ─────────────────────────────────────────────────────────────── */
  --success: #10b981;
  /* `--success` ist die FLAECHENfarbe (Knopf, Verlauf). Als Text auf hellem
     Grund haelt sie nur 2,54:1 — deshalb ein eigener, dunklerer Ton fuer
     Schrift. Im Dunkelmodus wird er hell gedreht (siehe dortiger Block). */
  --success-text: #2a7249;
  --success-50: #ecfdf5;
  --success-bg: #d1fae5;
  --warning: #f59e0b;
  --warning-50: #fffbeb;
  --warning-bg: #fef3c7;
  --danger: #ef4444;
  --danger-50: #fef2f2;
  --danger-bg: #fee2e2;
  --info: #3b82f6;
  --info-50: #eff6ff;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Archivo', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1rem;        /* 16 */
  --text-lg: 1.25rem;     /* 20 */
  --text-xl: 1.5rem;      /* 24 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2.25rem;    /* 36 */
  --text-4xl: 3rem;       /* 48 */

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ── Spacing (4px-Basis) ────────────────────────────────────────────────── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --radius-2xl: 12px;
  --radius-full: 9999px;

  /* ── Shadow (gestaffelt) ────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.04);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.04);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.04);
  --shadow-2xl: 0 25px 50px -12px rgba(15,23,42,.25);
  --shadow-card: 0 0 0 1px rgba(15,23,42,.04), 0 2px 4px rgba(15,23,42,.04);
  --shadow-elevated: 0 0 0 1px rgba(15,23,42,.04), 0 8px 16px rgba(15,23,42,.08);

  /* ── Gradients ──────────────────────────────────────────────────────────── */
  --grad-primary: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  --grad-navy: linear-gradient(135deg, #2c2c33 0%, #3a3a44 100%);
  --grad-success: linear-gradient(135deg, #10b981 0%, #059669 100%);  /* bleibt grün: Erfolg */
  --grad-hero: linear-gradient(135deg, #26262c 0%, #2c2c33 55%, #3a3a44 100%);
  /* Avatare tragen WEISSE Initialen (`.avatar { color: white }`) — die Flaeche
     muss deshalb 4.5:1 gegen Weiss schaffen. Die hellen Toene davor lagen bei
     2.15–4.47:1 (gemessen 27.08.), die Initialen waren auf dem Telefon kaum zu
     lesen. Die 700er-Stufe derselben Farbfamilien haelt 5.0–7.0:1 und bleibt
     als Palette zusammen — deshalb nicht je Farbe einzeln nachgerechnet,
     sondern eine Stufe fuer alle. */
  --grad-avatar-1: linear-gradient(135deg, #c2410c, #b45309);
  --grad-avatar-2: linear-gradient(135deg, #4f46e5, #7e22ce);
  --grad-avatar-3: linear-gradient(135deg, #047857, #0f766e);
  --grad-avatar-4: linear-gradient(135deg, #b91c1c, #be185d);
  --grad-avatar-5: linear-gradient(135deg, #1d4ed8, #0e7490);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  /* Bea 02.11.2026: drei Zeiten, eine Kurve (docs/styleguide.md „Bewegung");
     die alten Namen zeigen darauf. */
  --t1: 120ms;
  --t2: 160ms;
  --t3: 200ms;
  --kurve: cubic-bezier(.23, 1, .32, 1);
  --ease-out: var(--kurve);
  --ease-in-out: var(--kurve);
  --duration-fast: var(--t1);
  --duration: var(--t2);
  --duration-slow: var(--t3);

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  /* Android-Hülle (Capacitor 8, randlos): env() liefert dort oft 0 — SystemBars legt die
     echte Höhe als --safe-area-inset-top auf <html>. Der größere Wert gilt (08.11.2026). */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --bottom-nav-h: 68px;
  --sidebar-w: 264px;
  --touch-min: 44px;
}

/* ── Dunkelmodus ────────────────────────────────────────────────────────────
   Gebaut am 26.08.2026. Bis dahin war die App reine Hell-Oberflaeche, waehrend
   das Web einen Dunkelmodus hat — wer ihn dort einstellt, bekam auf dem
   Telefon trotzdem hartes Weiss. Zwei Oberflaechen desselben Produkts, die
   verschieden aussehen, sind kein Geschmacksthema, sondern ein halber Umbau.

   Der Schalter ist DERSELBE wie im Web: `data-theme` am `<html>`, gespeichert
   in `localStorage.darkMode` ('false' = hell, alles andere = dunkel; Vorgabe
   also dunkel). Web und App liegen auf derselben Herkunft, teilen den
   Speicher also — die Wahl gilt damit in beiden Oberflaechen. Genau das war
   der Punkt.

   Umgesetzt als UMKEHRUNG DER SLATE-SKALA statt als Liste von Ausnahmen: das
   CSS benutzt `--slate-*` ueberall direkt (`color: var(--slate-900)`,
   `background: var(--slate-50)`). Wird die Skala gedreht, folgt jede Regel von
   selbst — auch die, die es morgen erst gibt. Eine Ausnahmeliste haette bei
   jeder neuen Karte eine Zeile gebraucht und waere still veraltet.

   Die Markenfarbe bleibt: Orange auf dunklem Grund traegt, und Bea erkennt das
   Produkt daran. Nur die hellsten Tint-Flaechen (--primary-50 usw.) werden
   abgedunkelt, sonst leuchten sie als weisse Kaesten heraus. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Auf dunklem Grund ist das normale Orange als Schrift lesbar (5.9:1). */
  --primary-text: #d97706;
  --orange-bg: rgba(217,119,6,.16); --ok-bg: rgba(95,181,132,.14); --bad-bg: rgba(248,113,113,.14); --info-bg: rgba(98,155,248,.14);
  --schatten: rgba(0,0,0,.35); --scrim: rgba(0,0,0,.55); --hover: rgba(255,232,204,.06);
  --info-text: #629bf8; --danger-text: #f87171;

  /* Flaechen: Karten heller als der Grund, wie im Hellmodus umgekehrt. */
  --surface: #241f1b;
  --surface-2: #1c1815;

  /* Die gedrehte Skala. 900 ist jetzt hell (Text), 50 dunkel (Grund). */
  --slate-50:  #14100d;
  --slate-100: #1c1815;
  --slate-200: #2c2621;
  --slate-300: #3d352e;
  --slate-400: #6e665e;
  --slate-500: #a09589;
  --slate-600: #b0a69c;
  --slate-700: #cdc4bb;
  --slate-800: #e2dbd3;
  --slate-900: #ede7e0;
  --slate-950: #ffffff;

  /* Header und Statuskarte waren schon dunkel — im Dunkelmodus muessen sie
     sich vom Grund noch abheben, sonst verschwindet die Kante. */
  --navy: #1c1815;
  --navy-soft: #241f1b;

  --milchglas: rgba(20,16,13,0.92);

  /* Die hellen Tints der Statusfarben: als Flaeche auf dunklem Grund werden
     daraus leuchtende Kaesten. Gedeckte Toene mit demselben Zweck. */
  --primary-50: #2a1f12;
  --primary-100: #3a2a17;
  --accent-50: #2c2412;
  --success-50: #12261f;
  --success-bg: #17342a;
  --success-text: #5fb584;   /* hell auf dunklem Grund — wie .pill-success */
  --warning-50: #2a2312;
  --warning-bg: #352913;
  --danger-50: #2c1618;
  --danger-bg: #3a1c1f;
  --info-50: #16202e;

  /* Die dunklen Markentoene werden im CSS AUSSCHLIESSLICH als Textfarbe
     benutzt (7x `color:`, 0x `background:` — nachgezaehlt, nicht vermutet).
     Auf einer abgedunkelten Tint-Flaeche waeren sie dunkel auf dunkel: der
     Kontrastlauf meldete `.status-badge--abgeschlossen` mit 2,27:1. Also
     drehen: helle Markentoene als Text.
     ⚠️ Wer hier eines davon spaeter als FLAECHE benutzt, dreht die Bedeutung um
     — dann gehoert eine eigene Variable her, nicht ein zweiter Wert. */
  --primary-600: #fbbf24;
  --primary-700: #fcd34d;

  /* Schatten tragen auf dunklem Grund nicht — dort arbeitet die Kante. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.45), 0 2px 4px -2px rgba(0,0,0,.30);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.50), 0 4px 6px -4px rgba(0,0,0,.30);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.55), 0 8px 10px -6px rgba(0,0,0,.30);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.65);
  --shadow-card: 0 0 0 1px rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.35);
  --shadow-elevated: 0 0 0 1px rgba(255,255,255,.08), 0 8px 16px rgba(0,0,0,.45);

  --grad-hero: linear-gradient(135deg, #14100d 0%, #1c1815 55%, #241f1b 100%);
  --grad-navy: linear-gradient(135deg, #1c1815 0%, #241f1b 100%);
}

/* Getoente Flaeche + FESTE Textfarbe: die Kombination kippt im Dunkelmodus.
   `--warning-bg` wird dunkel, `color: #b45309` bleibt dunkelbraun — dunkel auf
   dunkel. Gemessen wird das hinterher mit `kontrast_messung.py`; hier stehen
   die Gegenstuecke. Nur die Stellen, an denen die Textfarbe im Klartext im CSS
   steht: alles, was `var(--primary-600)` o. ae. benutzt, folgt der Skala schon. */
:root[data-theme="dark"] .pill-success { color: var(--success-text); }
:root[data-theme="dark"] .pill-warning { color: var(--primary-700); }
:root[data-theme="dark"] .pill-danger  { color: var(--danger-text); }
:root[data-theme="dark"] .pill-info    { color: var(--info-text); }

/* Zwei Statusabzeichen tragen ihre Flaeche im Klartext (`#dbeafe`, `#fef3c7`) —
   die folgt keiner Umschaltung und leuchtet im Dunkelmodus als heller Kasten.
   Gedeckte Flaeche, heller Text, gleiche Bedeutung. */
:root[data-theme="dark"] .status-badge--in_arbeit { background: var(--info-bg); color: var(--info-text); }
:root[data-theme="dark"] .status-badge--mangelbehebung { background: var(--orange-bg); color: var(--primary-700); }

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Wie im Web (style.css): Haekchen und Auswahlknoepfe in der Markenfarbe statt im
   System-Blau. Ohne das faellt genau die App aus dem Schema, die sonst am
   staerksten nach eigener Marke aussieht (UX-Durchgang 31.07., Befund 6/7). */
input[type="checkbox"], input[type="radio"], progress, input[type="range"] {
  accent-color: var(--primary);
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0; min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--slate-900);
  background: var(--slate-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'cv11', 'ss01';  /* Inter feature flags für bessere Lesbarkeit */
}
button, input, select, textarea {
  font-family: inherit; font-size: inherit; color: inherit;
  border: 0; background: transparent; padding: 0; margin: 0;
}
button { cursor: pointer; }
a { color: var(--primary); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.2; }

/* ── Icons ─────────────────────────────────────────────────────────────────── */
.icon { --ico: 20px; font-size: var(--ico); width: var(--ico); height: var(--ico); line-height: 1; display: inline-block; flex-shrink: 0; }
.icon-sm { --ico: 16px; }
.icon-lg, .icon-xl { --ico: 24px; }
/* Symbolfarbe der App: Orange als Schrift (--primary-text: hell #9c4708, dunkel #e08a1e/#d97706). Einfach hier umschaltbar. */
:root { --icon-farbe: var(--primary-text); }

/* ── App Layout ────────────────────────────────────────────────────────────── */
.app-root { min-height: 100vh; padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); }

/* Splash */
.splash {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-4);
  background: var(--grad-hero); color: white; z-index: 100;
}
.splash-logo { width: 88px; height: 88px; border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl); }
.splash-text { opacity: .6; font-size: var(--text-sm); }

/* Status-Banner */
.status-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding: 8px 16px;
  padding-top: calc(8px + var(--safe-top));
  font-size: var(--text-sm); font-weight: 500; text-align: center; color: white;
  transition: transform var(--duration) var(--kurve);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.status-banner.online { background: var(--success); }
.status-banner.syncing { background: var(--warning); color: var(--slate-900); }
.status-banner.offline { background: var(--danger); }
.status-banner.hidden { transform: translateY(-100%); }

/* ── Screen-Header ─────────────────────────────────────────────────────────── */
.screen-header {
  background: var(--grad-hero);
  color: white;
  padding: calc(24px + var(--safe-top)) 20px 20px;
  position: sticky; top: 0; z-index: 50;
  border-bottom-left-radius: var(--radius-2xl);
  border-bottom-right-radius: var(--radius-2xl);
}
.screen-header h1 {
  font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-tight);
  margin: 0 0 4px;
}
.screen-header .subtitle { font-size: var(--text-sm); opacity: .7; margin: 0; font-weight: 500; }
.screen-header.with-back { display: flex; align-items: center; gap: var(--space-3); }
.screen-header.with-back > div { flex: 1; min-width: 0; }
.screen-header .back-btn {
  width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-full);
  background: rgba(255,255,255,.1); color: white;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration) var(--kurve);
  flex-shrink: 0;
}
.screen-header .back-btn:hover, .screen-header .back-btn:active { background: rgba(255,255,255,.18); }
.header-action {
  width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-full);
  background: rgba(255,255,255,.08); color: white;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration) var(--kurve);
  position: relative;
}
.header-action:hover { background: rgba(255,255,255,.16); }
.header-action .badge-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--navy);
}

/* ── Container ─────────────────────────────────────────────────────────────── */
.container { padding: var(--space-4); max-width: 760px; margin: 0 auto; }
.section-title {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--slate-500);
  margin: var(--space-6) 0 var(--space-3);
}
.section-title:first-child { margin-top: var(--space-2); }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-3);
  transition: box-shadow var(--duration) var(--kurve), transform var(--duration) var(--kurve);
}
.card.elevated { box-shadow: var(--shadow-elevated); }
.card.clickable { cursor: pointer; }
.card.clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card.clickable:active { transform: scale(.99); }

/* Hero/Status-Card (gross, mit Gradient) */
.hero-card {
  background: var(--grad-navy);
  color: white;
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.hero-card.active {
  background: var(--grad-success);
}
.hero-card::before {
  content: ''; position: absolute; top: -50%; right: -20%;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}
.hero-card .label {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  opacity: .65;
}
.hero-card h2 {
  font-size: var(--text-3xl); font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: var(--space-1) 0 var(--space-2);
}
.hero-card .meta {
  font-size: var(--text-sm); opacity: .85;
  margin-bottom: var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
}

/* Pulse-Dot für live-aktiv */
.pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 0 rgba(255,255,255,.5);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  70% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ── Auftrags-/List-Cards ──────────────────────────────────────────────────── */
.list-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-xs);
  display: flex; gap: var(--space-3); align-items: flex-start;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: box-shadow var(--duration) var(--kurve), transform var(--duration) var(--kurve);
  border-left: 3px solid transparent;
}
.list-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.list-card:active { transform: scale(.99); }
.list-card.aktiv { border-left-color: var(--success); }
.list-card.notdienst { border-left-color: var(--danger); }

.list-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--primary-50); color: var(--primary-600);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.list-card-body { flex: 1; min-width: 0; }
.list-card h3 {
  font-size: var(--text-md); font-weight: 600;
  margin: 0 0 2px; color: var(--slate-900);
}
.list-card .meta {
  font-size: var(--text-sm); color: var(--slate-500);
  margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 4px;
}
.list-card .tags { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.list-card .chevron { color: var(--slate-300); flex-shrink: 0; align-self: center; }

/* ── Avatars ───────────────────────────────────────────────────────────────── */
.avatar {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: var(--text-sm);
  flex-shrink: 0; letter-spacing: var(--tracking-tight);
}
.avatar.sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar.lg { width: 56px; height: 56px; font-size: var(--text-lg); }
.avatar.xl { width: 88px; height: 88px; font-size: var(--text-2xl); }

/* Auto-Gradient via JS classlist (.avatar-1 bis .avatar-5) */
.avatar-1 { background: var(--grad-avatar-1); }
.avatar-2 { background: var(--grad-avatar-2); }
.avatar-3 { background: var(--grad-avatar-3); }
.avatar-4 { background: var(--grad-avatar-4); }
.avatar-5 { background: var(--grad-avatar-5); }

/* ── Pills ─────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.pill .icon-sm { --ico: 16px; }
.pill-success { background: var(--success-bg); color: var(--success-text); }
.pill-warning { background: var(--warning-bg); color: var(--primary-600); }
.pill-danger  { background: var(--danger-bg);  color: var(--danger-text); }
.pill-info    { background: var(--info-50);    color: var(--info-text); }
.pill-default { background: var(--slate-100);  color: var(--slate-700); }

/* ── KPI Bento-Grid ────────────────────────────────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.bento-card {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  transition: transform var(--duration) var(--kurve);
}
.bento-card.wide { grid-column: span 2; }
.bento-card:hover { transform: translateY(-2px); }
.bento-card .icon-tile {
  --ico: 24px; border-radius: var(--radius);
  background: var(--primary-50); color: var(--primary-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.bento-card.success .icon-tile { background: var(--success-50); color: var(--success-text); }
.bento-card.danger .icon-tile { background: var(--danger-50); color: var(--danger); }
.bento-card.info .icon-tile { background: var(--info-50); color: var(--info); }
.bento-card .label {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--slate-500);
}
.bento-card .value {
  font-size: var(--text-2xl); font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--slate-900);
  margin-top: var(--space-1);
}
.bento-card .delta {
  font-size: var(--text-xs); font-weight: 600; margin-top: var(--space-2);
  display: flex; align-items: center; gap: 4px;
  color: var(--slate-500);
}
.bento-card .delta.up { color: var(--success-text); }
.bento-card .delta.down { color: var(--danger); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min); padding: 12px 16px;
  border-radius: var(--radius);
  font-weight: 600; font-size: var(--text-md);
  transition: var(--duration) var(--kurve); transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  white-space: nowrap;
  letter-spacing: var(--tracking-tight);
  width: 100%;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--grad-primary); color: white;
  box-shadow: 0 4px 12px var(--orange-bg);
}
.btn-primary:hover { box-shadow: 0 6px 20px var(--orange-bg); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px var(--orange-bg); }
.btn-secondary {
  background: var(--surface); color: var(--slate-900);
  box-shadow: 0 0 0 1px var(--slate-200);
}
.btn-secondary:hover { background: var(--slate-50); box-shadow: 0 0 0 1px var(--slate-300); }
.btn-success {
  background: var(--grad-success); color: white;
  box-shadow: 0 4px 12px var(--ok-bg);
}
.btn-success:hover { box-shadow: 0 6px 20px var(--ok-bg); transform: translateY(-1px); }
.btn-danger { background: var(--danger); color: white; box-shadow: 0 4px 12px var(--bad-bg); }
.btn-danger:hover { background: #dc2626; }
.btn-ghost { background: var(--slate-100); color: var(--slate-900); }
.btn-ghost:hover { background: var(--slate-200); }
.btn-large { min-height: 56px; font-size: var(--text-lg); padding: 16px 24px; border-radius: var(--radius-md); }
.btn-icon { width: var(--touch-min); padding: 0; border-radius: var(--radius-full); }
/* Klein heisst schmaler und leiser — nicht zu flach zum Tippen.
   Die Hoehe bleibt auf dem Apple-Mass (44px), verkleinert werden Schrift
   und seitliches Polster. */
.btn-sm { min-height: var(--touch-min); padding: 8px 12px; font-size: var(--text-sm); }

/* Sticky-Action-Bar */
.action-bar {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
  background: var(--surface); padding: 12px 16px;
  box-shadow: 0 -8px 24px var(--schatten);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; z-index: 40;
  border-top: 1px solid var(--slate-100);
}
.action-bar .btn {
  min-height: 56px; padding: 8px; flex-direction: column; gap: 4px;
  font-size: var(--text-xs); border-radius: var(--radius);
}

/* ── Bottom-Tab-Nav ────────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--milchglas);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--slate-100);
  display: flex; z-index: 80;
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* slate-400 stand bei 2,55:1 auf Weiss und 3,69:1 im Dunkeln — bei 10px
     Schrift eindeutig zu wenig. slate-500 haelt 4,76:1 hell und 7,04:1 dunkel;
     der Unterschied zur aktiven Marke bleibt ueber die FARBE, nicht ueber die
     Blaesse. */
  text-decoration: none; color: var(--slate-500); font-size: 12px; font-weight: 600;
  gap: 2px; transition: color var(--duration) var(--kurve);
  padding: 8px 4px; letter-spacing: var(--tracking-wider);
}
.bottom-nav a.active { color: var(--primary-text); } /* Text-Variante: --primary waere hell nur 3.19:1 (axe 30.08.2026) */
.bottom-nav a .icon { --ico: 24px; color: var(--icon-farbe); }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }
.form-group label {
  display: block; margin-bottom: 8px;
  font-size: var(--text-sm); font-weight: 600; color: var(--slate-700);
  letter-spacing: var(--tracking-tight);
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 16px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--slate-200);
  border-radius: var(--radius);
  font-size: var(--text-md);
  transition: box-shadow var(--duration) var(--kurve);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: 0;
  box-shadow: 0 0 0 2px var(--primary), 0 0 0 6px var(--primary-50);
}
.form-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

/* Search-Field */
.search-field {
  position: relative; margin-bottom: var(--space-4);
}
.search-field input {
  width: 100%; padding: 12px 16px 12px 44px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--slate-200);
  font-size: var(--text-md);
}
.search-field input:focus { outline: 0; box-shadow: 0 0 0 2px var(--primary); }
.search-field .icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--icon-farbe); pointer-events: none;
}

/* OTP */
.otp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 360px; margin: 0 auto; }
.otp-grid input {
  text-align: center; font-size: var(--text-2xl); font-weight: 600;
  padding: 16px 0; height: 64px;
}

/* ── Modal / Bottom-Sheet ──────────────────────────────────────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0; background: var(--scrim); z-index: 200;
  opacity: 0; transition: opacity var(--duration) var(--kurve);
  backdrop-filter: blur(4px);
}
.sheet-backdrop.open { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
  background: var(--surface); border-radius: 24px 24px 0 0;
  padding: 12px 24px;
  padding-bottom: calc(20px + var(--safe-bottom));
  max-height: 92vh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--kurve);
  box-shadow: 0 -10px 40px var(--schatten);
}
.sheet.open { transform: translateY(0); }
.sheet-handle {
  width: 40px; height: 4px; background: var(--slate-300);
  border-radius: 2px; margin: 4px auto 16px;
}
/* Expliziter Schließen-Button in jedem Sheet (Nico ts 1781453352: „aus dem Fenster kommt man nicht zurück") */
/* 48 × 48 (Android-UX 08.11.2026, E1/B3): 32 px waren mit Handschuh kaum zu treffen. */
.sheet-close {
  position: absolute; top: 4px; right: 8px;
  width: 48px; height: 48px; border-radius: 50%;
  border: none; background: var(--slate-100); color: var(--slate-500);
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration) var(--kurve), color var(--duration) var(--kurve);
}
.sheet-close:hover { background: var(--slate-200); color: var(--slate-700); }
.sheet-close:active { transform: scale(.92); }
.sheet h2 {
  margin: 0 0 16px; font-size: var(--text-xl); font-weight: 600;
  letter-spacing: var(--tracking-tight);
  padding-right: 48px;   /* nicht unter das Schließen-Kreuz laufen */
}

/* Rückfrage im App-Stil statt confirm() (E2/B6, 08.11.2026): über jedem Blatt,
   Knöpfe untereinander in voller Breite, sprechende Beschriftung. */
.rueckfrage-host { position: fixed; inset: 0; z-index: 400; display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.rueckfrage-backdrop { position: absolute; inset: 0; background: var(--scrim);
  opacity: 0; transition: opacity var(--t2) var(--kurve); }
.rueckfrage { position: relative; width: 100%; max-width: 420px; background: var(--surface);
  border-radius: 12px; padding: 24px 16px 16px; box-shadow: 0 12px 40px var(--schatten);
  opacity: 0; transform: scale(.96); transition: opacity var(--t2) var(--kurve), transform var(--t2) var(--kurve); }
.rueckfrage-host.open .rueckfrage-backdrop { opacity: 1; }
.rueckfrage-host.open .rueckfrage { opacity: 1; transform: none; }
.rueckfrage p { margin: 0 0 16px; font-size: var(--text-md); line-height: 1.45; color: var(--a-tx, inherit); }
.rueckfrage-knoepfe { display: flex; flex-direction: column; gap: 12px; }
.rueckfrage-knoepfe .btn { width: 100%; min-height: 52px; }
@media (prefers-reduced-motion: reduce) { .rueckfrage, .rueckfrage-backdrop { transition: none; } }

.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: var(--space-4); }
.sheet-grid button {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 0 0 2px var(--slate-200);
  padding: 16px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 96px; font-weight: 600; font-size: var(--text-sm);
  transition: var(--duration) var(--kurve); transition-property: background-color, border-color, color, box-shadow, transform, opacity;
}
.sheet-grid button:active { transform: scale(.96); }
.sheet-grid button.selected { box-shadow: 0 0 0 2px var(--primary); background: var(--primary-50); }
.sheet-grid button .icon { --ico: 24px; color: var(--icon-farbe); }
.sheet-grid button.selected .icon { color: var(--icon-farbe); }

/* ── Toasts ────────────────────────────────────────────────────────────────── */
.toast-host {
  position: fixed; bottom: calc(var(--bottom-nav-h) + 16px + var(--safe-bottom));
  left: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px; z-index: 300; pointer-events: none;
}
@media (min-width: 768px) {
  .toast-host { bottom: 24px; left: calc(var(--sidebar-w) + 16px); right: 16px; }
}
.toast {
  /* Feste Farbe statt var(--slate-900): die Variable kippt im Dunkelmodus auf
     #f5f6f8 — weisse Schrift auf fast Weiss, jeder Info-Hinweis unlesbar
     (gemessen 24.10.2026 beim Netz-Schalter, Bild klickprobe/16_netz_aus). */
  background: #1e293b; color: white; border: 1px solid rgba(255,255,255,.12);
  padding: 12px 16px; border-radius: var(--radius);
  box-shadow: var(--shadow-2xl);
  animation: toast-in var(--t3) var(--kurve);
  pointer-events: auto;
  display: flex; gap: 12px; align-items: center;
  font-size: var(--text-sm); font-weight: 500;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast .icon { color: currentColor; flex-shrink: 0; }
@keyframes toast-in {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Skeleton ──────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-50) 50%, var(--slate-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text { height: 14px; margin: 8px 0; }
.skeleton-card {
  background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-card); margin-bottom: var(--space-2);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--slate-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty State ───────────────────────────────────────────────────────────── */
/* Kompakter seit 12.08.2026 — Beas „viiiiel kleiner" galt ausdruecklich fuer
   ALLE Seiten, und auf dem Telefon ist der Platz noch knapper als im Browser.
   Gegenstueck zu .empty-state im Web-style.css. */
.empty-state {
  text-align: center; padding: 32px 24px; color: var(--slate-500);
}
.empty-state .empty-icon {
  width: 52px; height: 52px; border-radius: var(--radius-full);
  background: var(--slate-100);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; color: var(--icon-farbe);
}
.empty-state .empty-icon .icon { --ico: 24px; }
.empty-state h3 { margin: 0 0 8px; color: var(--slate-700); font-size: var(--text-lg); }
.empty-state p { margin: 0 0 var(--space-4); font-size: var(--text-sm); }

/* ── Onboarding ────────────────────────────────────────────────────────────── */
/* Domi 01.11.2026 (Tablet, Android-Chrome): „Weiter“ lag unter dem Rand.
   100vh zaehlt dort die einklappbare Adressleiste mit, und #app haengte den
   Platz der Menueleiste (bzw. ab 768 px der Seitenleiste) noch dazu — beide
   gibt es auf Start und Anmeldung nicht. dvh = sichtbare Hoehe, vh bleibt als
   Rueckfall fuer alte Browser. */
.app-root:has(> .onboarding), .app-root:has(> .login-screen) { padding-bottom: 0; padding-left: 0; }
.onboarding {
  min-height: 100vh; min-height: 100dvh; padding: 24px;
  padding-top: calc(40px + var(--safe-top));
  padding-bottom: calc(24px + var(--safe-bottom));
  background: var(--grad-hero); color: white;
  display: flex; flex-direction: column;
}
.onboarding .slide {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 24px;
}
.onboarding .slide-illu {
  width: 160px; height: 160px; border-radius: var(--radius-2xl);
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.onboarding .slide-illu .icon { --ico: 80px; color: var(--icon-farbe); }
.onboarding .slide h2 {
  font-size: var(--text-2xl); font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.onboarding .slide p { opacity: .8; max-width: 320px; line-height: 1.6; }
.onboarding .dots {
  display: flex; gap: 8px; justify-content: center; margin: 24px 0;
}
.onboarding .dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  transition: background-color var(--duration) var(--kurve);
}
.onboarding .dots span.active {
  background: var(--primary); width: 24px; border-radius: var(--radius-full);
}
.onboarding .skip-btn {
  position: absolute; top: calc(20px + var(--safe-top)); right: 20px;
  color: rgba(255,255,255,.65); font-size: var(--text-sm); font-weight: 500;
  padding: 8px 12px;
}

/* ── Login ─────────────────────────────────────────────────────────────────── */
.login-screen {
  min-height: 100vh; min-height: 100dvh; padding: 24px;
  background: var(--grad-hero); color: white;
  display: flex; flex-direction: column;
}
.login-screen .header { text-align: center; padding: 48px 0 32px; }
.login-screen .logo {
  width: 72px; height: 72px; margin: 0 auto 16px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
}
.login-screen h1 { font-size: var(--text-3xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
.login-screen .subtitle { opacity: .7; margin: 4px 0 0; font-size: var(--text-sm); }
.login-screen .card { background: var(--surface); color: var(--slate-900); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-2xl); }
.login-screen .help { text-align: center; margin-top: 16px; font-size: var(--text-sm); opacity: .75; }
.login-screen .help a { color: white; font-weight: 600; }

/* ── Sidebar (Tablet) ──────────────────────────────────────────────────────── */
.sidebar {
  background: var(--navy); color: white; width: var(--sidebar-w);
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
  padding: 24px 0; padding-top: calc(24px + var(--safe-top));
  display: none;
  border-right: 1px solid rgba(255,255,255,.04);
}
.sidebar .brand {
  padding: 0 24px 24px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-tight);
}
.sidebar .brand-icon {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--grad-primary);
  display: flex; align-items: center; justify-content: center;
  color: white;
}
.sidebar .brand-icon .icon { --ico: 24px; }
.sidebar a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px 24px; color: rgba(255,255,255,.7);
  font-size: var(--text-md); font-weight: 500;
  transition: var(--duration) var(--kurve); transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  border-left: 3px solid transparent;
}
.sidebar a:hover { color: white; background: var(--hover); }
.sidebar a.active {
  color: var(--primary); background: var(--orange-bg);
  border-left-color: var(--primary); font-weight: 600;
}
.sidebar a .icon { --ico: 20px; color: var(--icon-farbe); }

/* Floating Action Button */
.fab {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + 16px + var(--safe-bottom));
  right: 20px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-primary); color: white;
  box-shadow: 0 8px 24px var(--orange-bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  transition: transform var(--duration) var(--kurve), box-shadow var(--duration) var(--kurve);
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px var(--orange-bg); }
.fab:active { transform: scale(.95); }
.fab .icon { --ico: 24px; }

/* Tablet-Layout */
@media (min-width: 768px) {
  .app-root { padding-left: var(--sidebar-w); padding-bottom: 0; }
  .sidebar { display: block; }
  .bottom-nav { display: none !important; }
  .screen-header { padding-left: 32px; padding-right: 32px; }
  .container { max-width: 1100px; padding: 32px; }
  .bento-grid { grid-template-columns: repeat(4, 1fr); }
  .action-bar { left: var(--sidebar-w); bottom: 0; }
  .fab { bottom: 28px; right: 28px; width: 64px; height: 64px; }
}

/* ── Tab-Pills (Projekt-Detail-Tabs) ──────────────────────────────────────── */
.tab-pills {
  display: flex; gap: 8px; padding: 8px;
  background: var(--slate-100); border-radius: var(--radius-md);
  margin: 0 0 var(--space-4); overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
}
.tab-pills::-webkit-scrollbar { display: none; }
.tab-pills button {
  flex-shrink: 0; padding: 8px 16px; border-radius: var(--radius-sm);
  min-height: var(--touch-min);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--slate-600);
  transition: var(--duration) var(--kurve); transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  letter-spacing: var(--tracking-tight);
}
.tab-pills button.active {
  background: var(--surface); color: var(--slate-900);
  box-shadow: var(--shadow-sm);
}

/* ── Chat ──────────────────────────────────────────────────────────────────── */
.chat-thread { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: 96px; }
.chat-bubble {
  max-width: 78%; padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: var(--text-md); line-height: 1.4;
}
.chat-bubble.mine { background: var(--grad-primary); color: white; align-self: flex-end; border-bottom-right-radius: 6px; }
/* Offline getippt, noch nicht gesendet (Warteschlange, 08.09.2026): sichtbar, aber erkennbar
   „unterwegs" — gestrichelter Rand, gedaempft. Wird beim Nachsenden durch die echte Blase ersetzt. */
.chat-bubble.ausstehend { opacity: .7; outline: 2px dashed rgba(255,255,255,.7); outline-offset: -2px; }
.card.ausstehend { opacity: .7; outline: 2px dashed var(--slate-300); outline-offset: -2px; box-shadow: none; }
.mangel-card.ausstehend { opacity: .7; outline: 2px dashed var(--slate-300); outline-offset: -2px; box-shadow: none; }
.chat-bubble.theirs { background: var(--surface); align-self: flex-start; border-bottom-left-radius: 6px; box-shadow: var(--shadow-sm); }
.chat-author { font-size: var(--text-xs); font-weight: 600; opacity: .8; margin-bottom: 2px; }

/* Chat-Kreis-Chips + Teilnehmer (Chat-Modernisierung 08.07.) */
.kreis-bar { padding: 8px 16px 0; }
.kreis-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.kreis-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--slate-700); background: var(--slate-100);
  border: 1px solid var(--slate-200); border-radius: 999px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t1) var(--kurve),
              background-color var(--t2) var(--kurve), border-color var(--t2) var(--kurve), color var(--t2) var(--kurve);
}
.kreis-chip-icon { font-size: 14px; line-height: 1; }
.kreis-chip[data-active] { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.kreis-chip--privat { border-style: dashed; }
.kreis-chip:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .kreis-chip:hover { border-color: var(--slate-300); }
  .kreis-chip[data-active]:hover { background: var(--primary); }
}
.kreis-teilnehmer { font-size: 12px; color: var(--slate-500); margin: 8px 0 0; min-height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .kreis-chip { transition: background-color var(--t2) var(--kurve), border-color var(--t2) var(--kurve), color var(--t2) var(--kurve); }
  .kreis-chip:active { transform: none; }
}

/* Raum-Reiter über dem Verlauf (Bea 11.08.2026) — Gegenstück zu .raum-reiter
   im Web. Die Chip-Klassen daneben bleiben: die Terminplanung wählt damit
   Empfänger aus, das ist ein anderes Bedienelement mit derselben Optik. */
.raum-leiste {
  display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
}
.raum-leiste::-webkit-scrollbar { display: none; }
.raum-reiter {
  flex: 0 0 auto; min-height: var(--touch-min, 44px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--slate-700); background: var(--slate-100);
  border: 1px solid var(--slate-200); border-radius: 999px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t1) var(--kurve),
              background-color var(--t2) var(--kurve), border-color var(--t2) var(--kurve), color var(--t2) var(--kurve);
}
.raum-reiter[data-active] { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.raum-reiter--privat { border-style: dashed; }
.raum-reiter[data-nur-ansicht] { opacity: .72; font-style: italic; }
.raum-zahl { font-size: 12px; opacity: .7; }
.raum-reiter:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .raum-reiter:hover { border-color: var(--slate-300); }
  .raum-reiter[data-active]:hover { background: var(--primary); }
}
@media (prefers-reduced-motion: reduce) {
  .raum-reiter { transition: background-color var(--t2) var(--kurve), border-color var(--t2) var(--kurve), color var(--t2) var(--kurve); }
  .raum-reiter:active { transform: none; }
}
.chat-meta { font-size: 12px; opacity: .65; margin-top: 4px; }
.chat-input-bar {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
  background: var(--milchglas); backdrop-filter: blur(12px);
  padding: 12px 12px;
  padding-bottom: calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--slate-100);
  display: flex; gap: 8px; z-index: 40;
}
.chat-input-bar input {
  flex: 1; padding: 12px 16px;
  background: var(--slate-100); border-radius: var(--radius-full);
  font-size: var(--text-md);
}
.chat-input-bar input:focus { outline: 0; box-shadow: 0 0 0 2px var(--primary); }
.chat-input-bar button {
  background: var(--grad-primary); color: white;
  border-radius: 50%; width: 44px; height: 44px;
  flex: 0 0 44px; min-width: 44px;   /* Flex drueckte den Knopf auf 16 px zusammen (gemessen 08.09.2026) — Tippziel 44 px (R24) */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px var(--orange-bg);
}
@media (min-width: 768px) {
  .chat-input-bar { left: var(--sidebar-w); bottom: 0; }
}

/* ── Mängel-Karte ──────────────────────────────────────────────────────────── */
.mangel-card {
  display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-3); align-items: center;
  background: var(--surface); border-radius: var(--radius); padding: var(--space-3);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration) var(--kurve), transform var(--duration) var(--kurve);
  cursor: pointer;
}
.mangel-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mangel-card .thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.mangel-card .thumb-empty {
  width: 64px; height: 64px; border-radius: var(--radius-sm);
  background: var(--slate-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-400);
}
.mangel-card h3 { margin: 0 0 2px; font-size: var(--text-md); font-weight: 600; }
.mangel-card .meta { font-size: var(--text-xs); color: var(--slate-500); margin-bottom: 8px; }
.mangel-card .chevron { color: var(--slate-300); }

/* ── Foto-Galerie-Grid ─────────────────────────────────────────────────────── */
.photo-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  margin: 0 -16px;
}
.photo-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer;
  transition: opacity var(--duration) var(--kurve);
}
.photo-grid img:hover { opacity: .85; }

.photo-strip {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 16px; margin: 0 -16px;
}
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip img {
  width: 140px; height: 140px; object-fit: cover; border-radius: var(--radius);
  flex-shrink: 0; scroll-snap-align: start;
}

/* ── Notification-Item ─────────────────────────────────────────────────────── */
.notif-item {
  background: var(--surface); padding: 16px 16px;
  margin-bottom: 8px; border-radius: var(--radius);
  /* minmax(0, 1fr) statt 1fr (11.10.2026): `1fr` schrumpft nie unter das
     laengste unteilbare Wort — ein langer Feed-Eintrag schob die Datumsspalte
     in Safari 9 px ueber den Rand, die Seite rutschte seitlich. */
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: box-shadow var(--duration) var(--kurve);
}
.notif-item:hover { box-shadow: var(--shadow-md); }
.notif-item .icon-tile {
  --ico: 24px; border-radius: var(--radius-full);
  background: var(--primary-50); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.notif-item .body { min-width: 0; overflow-wrap: anywhere; }
.notif-item .body strong { font-size: var(--text-sm); }
.notif-item .body div { font-size: var(--text-xs); color: var(--slate-500); margin-top: 2px; }
.notif-item .time { font-size: var(--text-xs); color: var(--slate-500); }
.notif-item.unread { background: var(--primary-50); }

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-muted { color: var(--slate-500); }
.text-center { text-align: center; }
.flex { display: flex; gap: var(--space-2); align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
/* Tippbare Listenzeile (z. B. Rechtliches im „Mehr"-Menue).
   `.flex-between` ist eine reine Ausrichtungshilfe ohne Hoehe — als Link war die
   Zeile 23px hoch und damit weit unter dem Apple-Mass. Die Trennlinie ersetzt
   den frueheren Aussenabstand: sie zeigt, wo ein Tippziel endet. */
.link-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  color: inherit;
}
.link-row + .link-row { border-top: 1px solid var(--slate-100); }
.flex-col { display: flex; flex-direction: column; gap: var(--space-2); }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ── Reduced-motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Mobile-Parität: Projektstatus-Umschalter (Übersicht, nur Team) ─────────── */
.icon-xs { --ico: 16px; }

.status-chips {
  display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1);
}
.status-chip {
  flex: 1 1 auto; min-height: var(--touch-min); padding: 8px 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-full);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.92);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--duration) var(--kurve),
              border-color var(--duration) var(--kurve),
              transform var(--duration) var(--kurve);
}
.status-chip:active { transform: scale(.96); }
.status-chip.is-active {
  background: var(--surface); color: var(--primary-700); border-color: #fff; font-weight: 600;
}
.status-chip:disabled { opacity: .6; cursor: default; }

/* ── Mobile-Parität: Beteiligten-Karte mit Kontaktdaten (Beteiligte-Tab) ────── */
.beteiligter-karte { align-items: flex-start; }
.beteiligter-kontakt {
  margin-top: 8px; display: flex; flex-direction: column; gap: 4px;
  font-size: var(--text-xs); color: var(--slate-500);
}
.beteiligter-kontakt > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* 44 px hoch (Geraetetest 10.10.2026: 18 px). Bewusst OHNE negativen Rand: die
   Zeilen liegen ~21 px auseinander, ueberlappende Flaechen wuerden einen Tipp
   auf die Nummer der Mail-Zeile zuschlagen. */
.beteiligter-kontakt a { color: var(--primary-600); font-weight: 600; overflow-wrap: anywhere;
  display: inline-flex; align-items: center; min-height: 44px; }
.beteiligter-kontakt .icon { flex-shrink: 0; color: var(--icon-farbe); }
.beteiligter-aktionen { display: flex; gap: var(--space-2); flex-shrink: 0; align-self: center; }
.kontakt-aktion {
  width: var(--touch-min); height: var(--touch-min); min-width: 44px; min-height: 44px;
  border-radius: var(--radius-full); background: var(--primary-50); color: var(--primary-600);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration) var(--kurve), transform var(--duration) var(--kurve);
}
.kontakt-aktion:hover { background: var(--primary-100); }
.kontakt-aktion:active { transform: scale(.94); }

/* ── Mobile-Parität Block C: Verwalten-Button + Toggle-Switch ──────────────── */
.kontakt-aktion--manage { background: var(--slate-100); color: var(--slate-600); }
.kontakt-aktion--manage:hover { background: var(--slate-200); }

.bb-switch {
  display: flex; align-items: flex-start; gap: var(--space-3);
  cursor: pointer; user-select: none; padding: var(--space-2) 0;
}
.bb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bb-switch-track {
  flex-shrink: 0; width: 46px; height: 28px; border-radius: var(--radius-full);
  background: var(--slate-300); position: relative; margin-top: 2px;
  transition: background var(--duration) var(--kurve);
}
.bb-switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--kurve);
}
.bb-switch input:checked + .bb-switch-track { background: var(--primary); }
.bb-switch input:checked + .bb-switch-track .bb-switch-thumb { transform: translateX(18px); }
.bb-switch input:focus-visible + .bb-switch-track { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.bb-switch-text { display: flex; flex-direction: column; gap: 2px; }
.bb-switch-text strong { font-size: var(--text-sm); color: var(--slate-900); font-weight: 600; }
.bb-switch-text span { font-size: var(--text-xs); color: var(--slate-500); line-height: 1.4; }

/* Beas „c" (09.09.2026): je Ereignis-Typ drei Zustaende (sofort / taeglich
   gebuendelt / aus) — eine Segmentleiste aus Radios statt des Umschalters.
   Tippziele 44 px, aktive Option in --on-primary (Weiss auf Orange: 3,19:1). */
.bb-modus { display: flex; flex-direction: column; gap: 8px; }
.bb-modus-text { display: flex; flex-direction: column; gap: 2px; }
.bb-modus-text strong { font-size: var(--text-sm); color: var(--slate-900); font-weight: 600; }
.bb-modus-text span { font-size: var(--text-xs); color: var(--slate-500); line-height: 1.4; }
.bb-seg {
  display: inline-flex; max-width: 100%; border: 1px solid var(--slate-200);
  border-radius: var(--radius-full); overflow: hidden; background: var(--surface);
}
/* Breite nach Inhalt, nicht gedrittelt: „Täglich gebündelt" ist doppelt so lang
   wie „Aus" und bricht bei 390 px sonst in zwei Zeilen (gemessen 09.09.). */
.bb-seg-opt { flex: 1 1 auto; position: relative; }
.bb-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.bb-seg-opt span {
  display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  padding: 0 16px; white-space: nowrap; font-size: var(--text-xs); font-weight: 600;
  color: var(--slate-600); cursor: pointer; user-select: none;
  transition: background var(--duration) var(--kurve), color var(--duration) var(--kurve);
}
.bb-seg-opt + .bb-seg-opt span { border-left: 1px solid var(--slate-200); }
.bb-seg-opt input:checked + span { background: var(--primary); color: var(--on-primary); }
.bb-seg-opt input:disabled + span { cursor: default; opacity: .6; }
.bb-seg-opt input:focus-visible + span { outline: 2px solid var(--primary-600); outline-offset: -3px; }

/* ── Block C Welle 2: Annotations-Vollbild-Overlay ─────────────────────────── */
.annot-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: #0b1220; display: flex; flex-direction: column;
}
.annot-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 12px; background: var(--scrim);
}
.annot-bar-top { padding-top: max(10px, env(safe-area-inset-top)); }
.annot-bar-bottom { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.annot-title { color: #fff; font-weight: 600; font-size: var(--text-sm); }
.annot-canvas-wrap { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px; min-height: 0; }
#annot-canvas {
  max-width: 100%; max-height: 100%; touch-action: none;
  border-radius: 6px; box-shadow: 0 4px 24px rgba(0,0,0,.5); background: var(--surface);
}
.annot-btn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 38px;
  background: rgba(255,255,255,.12); color: #fff; border: none;
  border-radius: var(--radius-full); padding: 8px 16px;
  font-size: var(--text-xs); font-weight: 600; cursor: pointer;
  transition: transform var(--duration) var(--kurve), background var(--duration) var(--kurve);
}
.annot-btn:active { transform: scale(.96); }
/* Ohne eigene Farbe erbte der Knopf das #fff der Leiste — auf Orange 3,19:1. */
.annot-btn-primary { background: var(--primary); color: var(--on-primary); }
.annot-btn .icon { --ico: 16px; }
.annot-colors { display: flex; gap: 12px; }
.annot-color {
  width: 32px; height: 32px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 3px solid rgba(255,255,255,.35);
  transition: transform var(--duration) var(--kurve), border-color var(--duration) var(--kurve);
}
.annot-color.is-active { border-color: #fff; transform: scale(1.12); }
.annot-tools { display: flex; gap: 8px; }

/* ── Block C Welle 2: Unterschrift-Pad ─────────────────────────────────────── */
.sig-pad-wrap { border: 2px dashed var(--slate-300); border-radius: var(--radius); background: var(--surface); overflow: hidden; position: relative; }
.sig-canvas { width: 100%; height: 160px; display: block; touch-action: none; cursor: crosshair; }
/* Unterschriftslinie mit „Hier unterschreiben“ (Android-UX 08.11.2026, E1/B15): nur
   Anzeige über dem Feld, nicht im Bild der Unterschrift; Tipps gehen durch. */
.sig-hinweis { position: absolute; left: 16px; right: 16px; bottom: 12px; pointer-events: none;
  border-top: 1px solid var(--slate-300); padding-top: 4px; font-size: 12px; color: var(--slate-500); opacity: .8; }
.sig-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--slate-100); }
.sig-item:last-child { border-bottom: none; }
.sig-thumb { width: 72px; height: 40px; object-fit: contain; background: var(--surface); border: 1px solid var(--slate-200); border-radius: 6px; flex-shrink: 0; }

/* ── Block C Welle 3: Dokument-Baukasten ───────────────────────────────────── */
.lbl-sm { font-size: var(--text-xs); color: var(--slate-500); font-weight: 600; margin-bottom: 4px; }
label.lbl-sm { display: block; }   /* Beschriftung über dem Feld (Vorlagen-Baukasten, Android-UX E2/B15) */

/* ── Mobile-Parität Nachzügler: Status-Filter + Status-Badge (Projektliste) ── */
/* Zahlungsband (Domi 10.09.2026) — Gegenstueck zu .zahlungshinweis im Web
   (static/style.css).
   ⚠️ Erster Anlauf schrieb `var(--surface2)` — der Token heisst hier
   `--surface-2` MIT Bindestrich. Die Folge sah man nur im Bild: heller Kasten
   mitten im dunklen Modus, weil der Fallback griff. Deshalb jetzt die
   Hinweis-Toene `--danger-50`/`--warning-50`, die in BEIDEN Modi definiert
   sind, und die Schrift in `--slate-900` statt in einer Signalfarbe: der linke
   Balken traegt die Bedeutung, der Text bleibt lesbar. (`--text` waere die
   zweite Falle gewesen — das sind die SCHRIFTGROESSEN, keine Farbe.) */
.zahlungsband {
  border-left: 3px solid var(--danger);
  background: var(--danger-50);
  color: var(--slate-900);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.zahlungsband strong { display: block; margin-bottom: 2px; }
.zahlungsband--mahnung { border-left-color: var(--warning); background: var(--warning-50); }

.status-filter-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin-bottom: 2px; scrollbar-width: none; }
.status-filter-chips::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto; padding: 8px 12px; border-radius: var(--radius-full);
  min-height: var(--touch-min);
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--slate-200); background: var(--surface); color: var(--slate-600);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--duration) var(--kurve), color var(--duration) var(--kurve), transform var(--duration) var(--kurve);
}
.filter-chip:active { transform: scale(.96); }
/* Dunkler Text auf Orange wie die Web-Knoepfe (btn-primary: #0a0a0a): weiss
   auf #d97706 stand bei 3.19:1 (axe 30.08.2026) — und wich nebenbei von der
   Web-Marke ab, die auf Orange ueberall dunklen Text setzt. */
.filter-chip.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.fc-count { opacity: .7; font-weight: 600; }
.filter-chip.is-active .fc-count { opacity: .95; }
.status-badge { font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); }
.status-badge--vorbereitet { background: var(--slate-100); color: var(--slate-600); }
.status-badge--in_arbeit { background: #dbeafe; color: var(--info-text); }
.status-badge--mangelbehebung { background: #fef3c7; color: var(--primary-600); }
.status-badge--abgeschlossen { background: var(--primary-50); color: var(--primary-700); }

/* ── KI-Spracheingabe (Bautagebuch) ── */
.voice-box { margin-bottom: 16px; }
.voice-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px; border-radius: var(--radius);
  border: 1.5px dashed var(--primary); background: var(--primary-50);
  color: var(--primary-700); font-weight: 600; font-size: var(--text-sm);
  cursor: pointer;
  transition: transform var(--duration) var(--kurve), background var(--duration) var(--kurve), border-color var(--duration) var(--kurve);
}
.voice-btn:active { transform: scale(.97); }
.voice-btn[disabled] { opacity: .55; cursor: default; }
.voice-btn .icon { --ico: 20px; }
.voice-btn.rec {
  border-style: solid; border-color: var(--danger);
  background: var(--danger-50); color: var(--danger);
}
.voice-btn.rec .voice-ico { animation: voicePulse 1.1s ease-in-out infinite; }
@keyframes voicePulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.voice-hint { font-size: var(--text-xs); color: var(--slate-500); text-align: center; margin-top: 8px; line-height: 1.35; }
/* Spracheingabe-Baustein (sprache.js, 07.10.2026): Knopf + Sprachwahl in einer
   Zeile, darunter Hinweis und liegende Diktate. Der Knopf ist derselbe .voice-btn
   wie bisher im Bautagebuch — jetzt an sechs Formularen. */
.sprach-zeile { display: flex; gap: 8px; align-items: stretch; }
.sprach-zeile .voice-btn { flex: 1 1 auto; min-width: 0; }
.sprach-wahl { flex: 0 0 auto; width: auto; max-width: 46%; min-height: 44px; font-size: var(--text-xs); padding: 8px 8px; }
.sprach-einverstaendnis { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-sm); margin-top: 12px; }
.sprach-einverstaendnis input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; }
.sprach-diktate:empty { display: none; }
.sprach-diktat {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 8px; padding: 12px 12px; border-radius: var(--radius);
  background: var(--primary-50); font-size: var(--text-sm);
}
.sprach-diktat > span { flex: 1 1 140px; }
.sprach-diktat--wartet { background: var(--slate-100); }
.sprach-rundgang-liste { padding-left: 24px; margin: 0 0 var(--space-4); }
.sprach-rundgang-eintrag { margin-bottom: 12px; }
.sprach-rundgang-text { font-size: var(--text-sm); margin-top: 2px; }
.sprach-rundgang-knoepfe { display: flex; gap: 8px; margin-top: 8px; }

/* ── Bauzeitenplan-Reiter (Block 3 „Mobile-Paritaet", 20.09.2026) ─────────
   Karten wie die Termine; der Balken ist der Fortschritt (kein Gantt — auf
   390 px traegt eine Zeitachse nichts, das Datum steht als Text). Ein
   wartender Vorschlag bekommt den gelben Streifen, den Bea von „Fuer dich"
   an Terminen kennt. */
.bz-balken { height: 6px; border-radius: 4px; background: var(--slate-100); margin: 8px 0 4px; overflow: hidden; }
.bz-balken-fuellung { height: 100%; background: var(--primary); border-radius: 4px; }
.bz-karte-vorschlag { border-left: 4px solid #f59e0b; }
.bz-vorschlag { margin-top: 8px; padding: 8px 12px; border-radius: var(--radius-sm);
                background: var(--warning-bg); color: #78350f; font-size: var(--text-sm); }
/* Dunkel: dieselbe Falle wie bei .pill-warning (Z. ~268) — der Grund wird
   dunkel, dunkelbraune Schrift darauf ist unlesbar (gemessen 20.09.2026 im
   Nachher-Bild). Gelb wie die Pille. */
:root[data-theme="dark"] .bz-vorschlag { color: var(--primary-700); }

/* ── Beas Glocke in der App (20.09.2026) ────────────────────────────────────
   Punkt am Reiter „Mehr" der unteren Leiste, Zahl an der Kachel, Liste wie
   im Web (templates/glocke/liste.html) — dieselbe Form, damit sie sich
   wiedererkennt. */
.bottom-nav a { position: relative; }
.nav-punkt { position: absolute; top: 5px; left: calc(50% + 6px); width: 8px; height: 8px;
             border-radius: 50%; background: var(--primary); }
.bento-card { position: relative; }
.kachel-zahl { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; padding: 0 8px;
               border-radius: 12px; background: var(--primary); color: #fff; font-size: 12px;
               font-weight: 600; display: flex; align-items: center; justify-content: center; }
.bn-eintrag { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; }
.bn-punkt { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: transparent; }
.bn-neu .bn-punkt { background: var(--primary); }
.bn-inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bn-titel { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); }
.bn-neu .bn-titel { color: var(--primary-text); }
.bn-text { font-size: var(--text-sm); overflow-wrap: anywhere; }
.bn-neu .bn-text { font-weight: 600; }
.bn-meta { font-size: var(--text-xs); color: var(--slate-500); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
                   overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─── Rueckmeldung / Kaefer (Bea 09.10.2026) ─────────────────────────────── */
.rm-zeile { width: 100%; background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.rm-karte {
  position: relative; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  border: 1px solid var(--slate-300); border-radius: var(--radius-lg); padding: 12px 12px;
  min-height: var(--touch-min); font-size: var(--text-sm);
}
.rm-karte input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rm-karte:has(input:checked) { border: 2px solid var(--primary-text); background: var(--primary-50); }
.rm-bild {
  display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-3); cursor: pointer;
  background: var(--slate-100); border-radius: var(--radius-lg); padding: 8px 12px; font-size: var(--text-sm);
}
.rm-bild img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; flex: none; }
.rm-bild span { flex: 1; }
.rm-bild input { width: 22px; height: 22px; accent-color: var(--primary-text); flex: none; }
.rm-fehler { color: var(--danger-text, var(--danger-text)); font-size: var(--text-sm); margin-bottom: var(--space-2); }

/* ─── Zustimmung Eingeladener (16.10.2026) ─────────────────────────────────
   Haekchen + Text als EIN Tippziel (44 px, R24) wie `.haken-zeile` im Web. */
.zustimmung-haken {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  min-height: var(--touch-min); margin: var(--space-3) 0; padding: 12px 12px;
  background: var(--slate-100); border-radius: var(--radius-lg); font-size: var(--text-sm);
}
.zustimmung-haken input { width: 22px; height: 22px; flex: none; margin-top: 1px; }

/* ─── Nutzerfuehrung v6c (Nachtbau 16./17.10.2026, Schalter `ui_v6c`) ─────
   Dieselben Namen wie im Web (static/style.css), damit ein Blick genuegt:
   Orange = du bist dran, Rot = ueberfaellig, Blau = jemand anderes arbeitet. */
.v6c-kicker { text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--text-xs) !important; font-weight: 600 !important; color: var(--primary-text) !important; opacity: 1 !important; }
.v6c-zurueck { margin: 0 0 var(--space-3); }
.v6c-meta { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; color: var(--slate-500); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.hero-dran { padding: var(--space-4); }
.hero-dran__kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.hero-dran__kopf h2 { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.hero-dran__satz { color: var(--slate-500); font-size: var(--text-sm); }
.dran-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--slate-100); }
.hero-dran .dran-zeile:first-of-type { border-top: 0; }
.dran-zeile__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* `.btn` ist in dieser App volle Breite — hier nicht: Knopf neben dem Text. */
.dran-zeile .dran-knopf { width: auto; flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }
.dran-zeile__text strong { font-size: var(--text-md); font-weight: 600; }
.dran-zeile__sub { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; font-size: var(--text-xs); color: var(--slate-500); }
.dran-zeile__projekt { color: var(--slate-500); }
.dran-knopf { flex-shrink: 0; }
.dran-leer { color: var(--slate-500); font-size: var(--text-sm); margin: 8px 0 4px; }
.frist { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.frist--ueberfaellig { color: var(--danger-text, var(--danger)); font-weight: 600; }
.frist--ueberfaellig::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.frist--heute { color: var(--primary-text); font-weight: 600; }
/* Kennzahl-Pillen: waagerecht scrollend wie Beas Dummy */
.lage2 { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: var(--space-3); }
.lage2::-webkit-scrollbar { display: none; }
.lg { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch-min); padding: 0 12px 0 16px;
      border: 1px solid var(--slate-200); border-radius: 999px; background: var(--surface); font-size: var(--text-sm); color: inherit; }
.lg__label { color: var(--slate-500); }
.lg b { font-weight: 600; }
.lg__wert--ok { color: var(--success-text); }
.lg__wert--bad { color: var(--danger-text, var(--danger)); }
.lg__chev { color: var(--slate-400); }
/* Bereiche: zwei Kacheln je Zeile, Zahl = wartet auf dich */
.v6c-bereiche { grid-template-columns: 1fr 1fr; gap: 8px; }
.v6c-kachel { text-align: left; font: inherit; color: inherit; }
.aktivitaet__zeile { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--slate-100); font-size: var(--text-sm); }
.aktivitaet__zeile:first-child { border-top: 0; padding-top: 0; }
.aktivitaet__typ { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: var(--slate-300); }
.aktivitaet__typ--mangel { background: var(--warning); }
.aktivitaet__typ--termin { background: var(--info); }
.aktivitaet__typ--bautagebuch { background: var(--success); }
.aktivitaet__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aktivitaet__text strong { font-weight: 600; }
.aktivitaet__detail { color: var(--slate-500); font-size: var(--text-xs); overflow-wrap: anywhere; }
.aktivitaet__zeit { color: var(--slate-500); font-size: var(--text-xs); white-space: nowrap; }
.v6c-karte__text { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.55; }
/* EIN Marker fuer „du bist dran" */
.dran { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px;
        background: var(--primary-50); color: var(--primary-text); white-space: nowrap; margin-bottom: 4px; }
.dran::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.pill-dran { background: var(--primary-50); color: var(--primary-text); }
/* Chat: Farbe je Person, Trenner, Folgenachrichten */
.pc-0 { --pc: #2152b8; } .pc-1 { --pc: #475569; } .pc-2 { --pc: #5b4a9e; } .pc-3 { --pc: #6a35c2; }
/* pc-5/pc-6 am 23.10.2026 abgedunkelt (vorher #0b6e7c / #4a6a14): als Kuerzel im
   Kreis mit 16 % Eigenfarbe auf dem Seitengrund hielten sie nur 4,12:1 / 4,36:1,
   axe meldet das ab 4,5:1 (test_app_a11y_bfsg). Jetzt 5,0:1, Farbton unveraendert. */
.pc-4 { --pc: #a42a68; } .pc-5 { --pc: #095f6b; } .pc-6 { --pc: #435f12; }
:root[data-theme="dark"] .pc-0 { --pc: #7fa9ff; } :root[data-theme="dark"] .pc-1 { --pc: #9fb3c8; }
:root[data-theme="dark"] .pc-2 { --pc: #b9a8e6; } :root[data-theme="dark"] .pc-3 { --pc: #c79bff; }
:root[data-theme="dark"] .pc-4 { --pc: #f08cc0; } :root[data-theme="dark"] .pc-5 { --pc: #4fc9d9; }
:root[data-theme="dark"] .pc-6 { --pc: #b5d67e; }
.feed-trenner { display: flex; align-items: center; gap: 12px; color: var(--slate-500); font-size: var(--text-xs); margin: 12px 0 2px; }
.feed-trenner::before, .feed-trenner::after { content: ""; flex: 1; height: 1px; background: var(--slate-200); }
.cmw { display: flex; gap: 8px; align-items: flex-start; max-width: 92%; margin-top: 2px; }
.cmw--first { margin-top: 12px; }
.cmw:not(.cmw--first) .cm-av { visibility: hidden; }
.cm-av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
         font-size: 12px; font-weight: 600; color: var(--pc); background: color-mix(in srgb, var(--pc) 18%, var(--surface));
         border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); }
.cmw .cm { background: var(--surface); border-radius: 4px 12px 12px 12px; padding: 8px 12px 4px; border-left: 3px solid var(--pc); min-width: 0; box-shadow: var(--shadow-sm); }
.cmw:not(.cmw--own):not(.cmw--first) .cm { border-radius: 4px 12px 12px 4px; }
.cmw--own { flex-direction: row-reverse; align-self: flex-end; }
.cmw--own .cm { border: 0; border-radius: 12px 4px 12px 12px; background: color-mix(in srgb, var(--slate-900) 8%, var(--surface)); }
.cm-k { display: flex; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--text-xs); margin-bottom: 2px; color: var(--slate-500); }
.cm-k strong { color: var(--pc); font-weight: 600; }
.cmw--own .cm-k strong { color: var(--slate-900); }
.cm-rolle { font-size: 12px; border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); color: var(--pc); border-radius: 999px; padding: 0 8px; }
.cm-text { font-size: var(--text-md); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-zeit { font-size: 12px; color: var(--slate-500); margin-top: 4px; text-align: right; }

/* ─── v6c Seiten (17.10.2026, Beas Projektleiter-Dummy v2): „Listen als Zeilen,
   Linien-Symbole ueberall, Seiten mit Buttons unten". Greift nur in Ansichten,
   die bei Schalter ui_v6c gerendert werden — ohne Schalter bleibt alles beim
   Karten-Stil. Farben ausschliesslich aus den bestehenden Variablen. ───────── */
.zeilen { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
          padding: 0 16px; margin-bottom: var(--space-3); }
.zeile { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-height: 56px;
         border-bottom: 1px solid var(--slate-100); color: inherit; text-decoration: none; }
.zeile:last-child { border-bottom: 0; }
.zeile--tipp { cursor: pointer; }
.zeile--tipp:active { opacity: .85; }
.zeile__ik { color: var(--icon-farbe); flex: 0 0 auto; display: flex; }
.zeile__text { flex: 1 1 auto; min-width: 0; }
.zeile__text strong { display: block; font-size: var(--text-md); font-weight: 600; overflow-wrap: anywhere; }
.zeile__text small { display: block; color: var(--slate-500); font-size: var(--text-xs); margin-top: 1px; overflow-wrap: anywhere; }
.zeile__text .pill { margin: 8px 8px 0 0; }
.zeile__text .dran { margin: 0 0 4px; }
/* 44 px: Apple-Mindestmass fuer Tippziele (R24) — der Geraetetest mass 40/36 px (17.10.2026). */
.zeile .btn { width: auto; flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 0 12px; font-size: var(--text-sm); }
.zeile__chev { color: var(--slate-400); flex: 0 0 auto; display: flex; }
/* Eine Zeile als <button> (Mehr, Rueckmeldung): dieselbe Optik, kein Knopf-Rahmen */
.zeile--knopf { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--slate-100);
                font: inherit; text-align: left; color: inherit; padding: 12px 0; cursor: pointer; }
.zeile--knopf:last-child { border-bottom: 0; }
/* Ungelesen (Neuigkeiten): Titel fett, Punkt rechts */
.zeile--neu .zeile__text strong { font-weight: 600; }
.zeile__text .zeile__sub-rot { color: var(--danger-text, var(--danger)); }
/* Zeile mit Schalter rechts (Push, Dunkelmodus): der Knopf bleibt schmal */
.zeile .btn.btn-sm { min-height: 44px; }
.zeile__menu { border: 0; background: none; color: var(--slate-500); width: 44px; height: 44px; margin-right: -10px;
               display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-full); }
.zeile__menu:active { background: var(--slate-100); }
.zeile__menu--an { color: var(--primary); }
.zeile__status { font-size: var(--text-xs); color: var(--slate-500); flex: 0 0 auto; text-align: right;
                 display: inline-flex; align-items: center; gap: 8px; }
/* Ungelesen-Zahl rechts in einer Zeile (Chatliste) — wie .kachel-zahl, aber im Fluss */
.zeile__zahl { min-width: 20px; height: 20px; padding: 0 8px; border-radius: var(--radius-full);
               background: var(--primary); color: #0a0a0a; font-size: 12px; font-weight: 600;
               display: inline-flex; align-items: center; justify-content: center; }
.zeile__status--ok { color: var(--success-text); }
.zeile__status--wartet { color: var(--primary-text); }
.zeile__status--rot { color: var(--danger-text, var(--danger)); }
.zeile__bild { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; flex: 0 0 auto; }
.zeile__bild--leer { display: flex; align-items: center; justify-content: center; background: var(--slate-100); color: var(--slate-400); }
.zeile__haken { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--slate-300); background: var(--surface);
                display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; padding: 0; }
.zeile__haken--an { background: var(--success); border-color: var(--success); }
.zeile--erledigt .zeile__text strong { text-decoration: line-through; color: var(--slate-400); font-weight: 500; }
.nlabel { font-size: var(--text-xs); color: var(--slate-500); margin: 16px 2px 8px; }
.nlabel:first-child { margin-top: 0; }
.sz-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-400); display: inline-block; }
.sz-punkt--ok { background: var(--success); }
.sz-punkt--wartet { background: var(--primary); }
/* Textlink als Knopf (wie .lnk im Web): „Vorlagen verwalten", „Markieren / Zeichnen", „Foto hinzufügen" */
.lnk { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 2px; min-height: var(--touch-min);
       color: var(--primary-text, var(--primary)); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-decoration: none; }
.lnk:active { opacity: .8; }
/* Seitenfuss: die eine Hauptaktion der Seite steht unten */
.seiten-fuss { display: flex; gap: 8px; align-items: center; margin-top: var(--space-4); }
.seiten-fuss .btn { flex: 1 1 0; min-width: 0; }
/* Android-UX 08.11.2026, E1/B4: „In Bearbeitung nehmen“ war breiter als sein Knopf und
   ragte links heraus. Langer Text bricht jetzt im Knopf um statt überzulaufen. */
.seiten-fuss .btn { white-space: normal; line-height: 1.2; text-align: center; }   /* nur an Leerzeichen umbrechen (WebKit brach sonst „Unterschreibe-n“) */
.sheet .seiten-fuss { position: sticky; bottom: calc(-20px - var(--safe-bottom)); background: var(--surface);
                      padding: 10px 0 calc(10px + var(--safe-bottom)); margin: var(--space-3) 0 calc(-20px - var(--safe-bottom)); }
/* Hinweiszeile mit Punkt (Beas .pkt): „Stufe Bauleitung, danach Bauherr" */
.pkt { display: flex; gap: 8px; align-items: center; font-size: var(--text-xs); color: var(--slate-500); margin: 8px 2px; }
.pkt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex: none; }
/* Hervorgehobene Zeile „wartet auf dich" (heller Orange-Ton + Balken links) */
.warte { display: block; width: 100%; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer;
         background: var(--primary-50); box-shadow: inset 4px 0 0 var(--primary); border-radius: var(--radius);
         padding: 12px 16px; margin: 2px 0 8px; }
.warte strong { display: block; font-size: var(--text-md); }
.warte small { display: block; color: var(--slate-500); font-size: var(--text-xs); margin-top: 1px; }
/* Options-Sheet: Zeilen mit Linien-Symbol statt Knopfreihen */
.opt { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; color: inherit;
       padding: 16px 4px; border-bottom: 1px solid var(--slate-100); font: inherit; font-size: var(--text-md); text-align: left; min-height: var(--touch-min); }
.opt:last-child { border-bottom: 0; }
.opt .icon-sm { color: var(--icon-farbe); flex: 0 0 auto; }
.opt--gefahr { color: var(--danger-text, var(--danger)); }
.opt--gefahr .icon-sm { color: inherit; }
.opt small { display: block; color: var(--slate-500); font-size: var(--text-xs); font-weight: 400; }
/* Bildkasten im Detail (Beas .kk + .bildph) */
.bildph { background: var(--slate-100); border-radius: var(--radius); min-height: 104px; display: grid; place-items: center;
          color: var(--slate-500); margin: 8px 0; overflow: hidden; }
.bildph img { width: 100%; max-height: 50vh; object-fit: contain; display: block; }
.kk { background: var(--surface); border: 1px solid var(--slate-100); border-radius: var(--radius-lg); padding: 12px 12px; margin-bottom: 8px; }
.kk strong { display: block; font-size: var(--text-md); }
.kk small { display: block; color: var(--slate-500); font-size: var(--text-xs); margin-top: 2px; }
.kk .zt { font-size: var(--text-sm); margin-top: 4px; }
/* Bea 15.10.: „Kennzahlen" als zwei Spalten */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 8px; }
.stats > div { background: var(--surface); border-radius: var(--radius); text-align: center; padding: 12px 8px; box-shadow: var(--shadow-card); }
.stats b { display: block; font-size: var(--text-xl); }
.stats small { display: block; color: var(--slate-500); font-size: var(--text-xs); margin-top: 2px; }

/* Nur fuer Vorleser sichtbar (App-Angleichung 19.10.2026: „Zurück: " vor der Krume). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══ App-Angleichung an Beas Click-Dummys (19.10.2026, Schalter ui_app_dummy) ═══
   Klasse `angleich` am <html> (showNav in app.js), nur zusammen mit ui_v6c.
   Werte 1:1 aus docs/dummys/projektleiter_click_dummy_v2.html (`:root` hell,
   `body.dark` dunkel, Abschnitt „Mockup-Stil"). Zwei bewusste Abweichungen:
   Schrift auf Orange bleibt #1c1310 (Beas Marken-Entscheidung 27.08.2026,
   weiss hielte nur 3,19:1), und Tippziele bleiben 44 px (R24, Dummy: 38/32 px).
   Checkliste: docs/app_angleichung_checkliste.md, Abschnitte A und B. */
:root.angleich {
  --a-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --a-titel: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
  --a-bg: #eceff3; --a-ka: #f6f7f9; --a-tx: #111111; --a-mu: #5a5a6a; --a-li: #c9ced6; --a-ei: #e9ebef;
  --a-ctl: #767b86; --a-s3: #e6e8ec; --a-sch: rgba(0,0,0,.14); --a-inf: #0a5bde; --a-inb: rgba(10,91,222,.10);
  --a-pr: #d97706; --a-on: #1c1310; --a-prt: #9c4708; --a-pg: rgba(217,119,6,.16); --a-pgt: #9c4708; --a-hl: rgba(217,119,6,.10);
  --a-ro: #b91c1c; --a-rot: rgba(224,82,82,.16); --a-gr: #2e7d52; --a-grt: rgba(74,157,110,.16);
  --font-sans: var(--a-font); --font-display: var(--a-titel);
  --surface: var(--a-ka); --primary-text: var(--a-prt);
  --slate-500: var(--a-mu); --slate-100: var(--a-li);
}
:root.angleich[data-theme="dark"] {
  --a-bg: #14100d; --a-ka: #241f1b; --a-tx: #ede7e0; --a-mu: #b0a69c; --a-li: rgba(255,232,204,.22); --a-ei: #1c1815;
  --a-ctl: #80776e; --a-s3: #2c2621; --a-sch: rgba(0,0,0,.35); --a-inf: #629bf8; --a-inb: rgba(98,155,248,.14);
  --a-pr: #d97706; --a-prt: #e08a1e; --a-pgt: #e08a1e; --a-hl: rgba(217,119,6,.10);
  --a-ro: #f87171; --a-gr: #5fb584;
}
:root.angleich body { background: var(--a-bg); color: var(--a-tx); font-feature-settings: normal; }

/* B — Kopf flach und hell: Seitengrund, keine Flaeche, keine runden Ecken */
:root.angleich .screen-header { background: var(--a-bg); color: var(--a-tx); border-radius: 0; box-shadow: none;
  padding: calc(14px + var(--safe-top)) 16px 8px; position: static; }
:root.angleich .screen-header h1 { font-family: var(--a-titel); font-size: 24px; font-weight: 600; letter-spacing: 0; margin: 2px 0 0; line-height: 1.25; }
:root.angleich .screen-header .subtitle { color: var(--a-mu); opacity: 1; font-size: 12px; font-weight: 400; margin: 4px 0 0; }
:root.angleich .screen-header .header-action { background: transparent; color: var(--a-tx); }
.kopf-flach { display: flex; align-items: flex-start; gap: 8px; }
/* Hauptseiten (Start, Projekte, Nachrichten, Mehr): Dummy `.hd.gross h1` 24 px, Zeilenhoehe 1,4 → Kopf 58 px */
:root.angleich .kopf-gross h1 { font-size: 24px; line-height: 1.4; }
:root.angleich .screen-header h1 { text-wrap: balance; }
:root.angleich .screen-header h1.titel-lang, :root.angleich .kopf-gross h1.titel-lang { font-size: 20px; line-height: 1.3; }
.start-satz { color: var(--a-mu); font-size: 12px; margin: -4px 2px 8px; }
.kopf-text { flex: 1 1 auto; min-width: 0; }
.kopf-crumb { display: flex; align-items: center; gap: 4px; max-width: 100%; min-height: 44px; margin: -8px 0 -6px;
  border: 0; background: none; padding: 0; color: var(--a-prt); text-align: left; cursor: pointer;
  font: 400 12px/1.2 var(--a-font); letter-spacing: .03em; text-transform: uppercase; }   /* Dummy .hd .cr: Gewicht 400 wie gerendert (dort greift `font:700 … inherit` nicht) */
.kopf-crumb .icon-sm { --ico: 20px; margin-left: -4px; flex: none; }
#kopf-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-sub { display: flex; gap: 4px; align-items: center; color: var(--a-mu); font-size: 12px; margin: 2px 0 0; }
.kopf-sub[hidden] { display: none; }
:root.angleich .container { padding-top: 8px; }

/* A — Grundstil: flache Knoepfe, Bloecke mit Linie statt Schatten */
:root.angleich .btn { border-radius: 12px; font-weight: 600; font-size: 14px; letter-spacing: 0; }
:root.angleich .btn-primary { background: var(--a-pr); color: var(--a-on); box-shadow: none; }
:root.angleich .btn-primary:hover, :root.angleich .btn-primary:active { transform: none; box-shadow: none; filter: brightness(1.05); }
/* Dummy .btn.s: echte 1-px-Linie, kein Schatten */
:root.angleich .btn-secondary, :root.angleich .btn-ghost { background: var(--a-ka); color: var(--a-tx); border: 1px solid var(--a-li); box-shadow: none; }
:root.angleich .btn-secondary:hover, :root.angleich .btn-ghost:hover { background: var(--a-ka); border-color: var(--a-mu); box-shadow: none; }
/* PL-Dummy .btn.xl: Hauptknopf unten 48 px, 15 px, Ecken 12 (Monteur-Dummy bleibt bei 56) */
:root.angleich:not(.m4) #tab-content > .seiten-fuss .btn, :root.angleich:not(.m4) .m4-btn.xl { min-height: 48px; font-size: 16px; border-radius: 12px; }
:root.angleich .zeile__chev.zeile__chev--pfeil { color: var(--a-pr); }   /* Dummy chev(): Pfeil orange */
:root.angleich .zeile__text small.zeile__status--rot { color: var(--a-ro); font-weight: 600; }   /* Dummy .rot */
:root.angleich .zeile__status--ok { color: var(--a-gr); }
/* PL-Dummy V.behind: Zeilen in EINEM Block, Knoepfe direkt darunter */
.pl-bh__z { display: block; padding: 12px 0; border-bottom: 1px solid var(--a-li); cursor: pointer; }
.pl-bh__z:last-child { border-bottom: 0; }
.pl-bh__z b { display: block; font-size: 14px; }
.pl-bh__z small { display: block; color: var(--a-mu); font-size: 12px; margin-top: 1px; }
.pl-bh__z .m4-pille { margin: 8px 8px 0 0; }
.pl-bh__knoepfe { display: flex; gap: 8px; margin: 12px 0 2px; }
.pl-bh__knoepfe .btn { width: auto; flex: none; min-height: 44px; padding: 0 12px; font-size: 14px; }
:root.angleich .btn-success { background: var(--a-gr); color: #fff; box-shadow: none; }
:root.angleich[data-theme="dark"] .btn-success { color: var(--a-on); }
:root.angleich .card, :root.angleich .zeilen, :root.angleich .bento-card, :root.angleich .kk {
  background: var(--a-ka); border: 1px solid var(--a-li); box-shadow: none; border-radius: 12px; }
:root.angleich .card.clickable:hover { box-shadow: none; transform: none; }
:root.angleich .zeilen { padding: 0 12px; }
/* PL-Dummy .kk: Ecken 12, 9 px Abstand darunter (die Monteur-Karten `.m4-karte` bleiben bei 14 wie im Monteur-Dummy) */
:root.angleich .kk, :root.angleich .zeilen, :root.angleich .card.hero-dran { border-radius: 12px; margin-bottom: 8px; }
/* PL-Dummy .trow (Termine): Zeilen direkt auf dem Seitengrund, nur Linie darunter */
:root.angleich .zeilen.zeilen--frei { background: none; border: 0; border-radius: 0; padding: 0; }
:root.angleich .zeilen--frei .zeile { padding: 12px 2px; border-bottom: 1px solid var(--a-li); }
:root.angleich .zeilen--frei .zeile:last-child { border-bottom: 1px solid var(--a-li); }
:root.angleich .zeile, :root.angleich .zeile--knopf { border-bottom-color: var(--a-li); }
:root.angleich .zeile__text strong { font-size: 14px; font-weight: 600; }
:root.angleich .zeile__text small { font-size: 12px; color: var(--a-mu); }
:root.angleich .zeile__chev { color: var(--a-mu); }
:root.angleich .section-title, :root.angleich .nlabel { text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 12px; color: var(--a-mu); margin: 16px 2px 8px; }
:root.angleich .section-title:first-child, :root.angleich .nlabel:first-child { margin-top: 2px; }
:root.angleich .section-title, :root.angleich .nlabel { line-height: 1.4; }   /* Dummy .nlabel 12 px · 16,8 */
/* Start: Bloecke als Spalte — sonst fallen 9 px unter dem Block und 14 px ueber dem
   Abschnitt zu 14 zusammen; im Dummy stehen beide (23 px, gemessen 21.10.2026). */
:root.angleich #start-host { display: flex; flex-direction: column; }
:root.angleich #start-host > * { flex: none; }
/* Start / „Jetzt dran": ein Block, Zeilen mit Linie */
:root.angleich .hero-dran { padding: 0 12px; }
:root.angleich .dran-zeile { border-top-color: var(--a-li); padding: 12px 0; }
:root.angleich .dran-zeile__text strong { font-size: 14px; font-weight: 600; }
:root.angleich .dran-zeile__sub { font-size: 12px; color: var(--a-mu); }
.dran-zeile__eine { display: block; color: var(--a-mu); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root.angleich .dran-zeile__text { gap: 1px; }

/* A8 — Filter-Pillen: aktiv orange, ohne Zahl */
.pillen-reihe { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.pillen-knopf, :root.angleich .filter-chip { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--a-li);
  background: var(--a-ka); color: var(--a-tx); font: 400 12px/1.2 var(--a-font); cursor: pointer; flex: 0 0 auto; }
.pillen-knopf.is-active, :root.angleich .filter-chip.is-active { background: var(--a-pr); border-color: var(--a-pr); color: var(--a-on); font-weight: 600; }
:root.angleich .fc-count { display: none; }
/* Status-Umschalter: war fuer den dunklen Kopf gebaut (weisse Schrift) und stand
   seit v6c auf hellem Grund — kaum lesbar (Vorher-Bild Monteur, 19.10.2026). */
:root.angleich .status-chip { border: 1px solid var(--a-li); background: var(--a-ka); color: var(--a-tx); font: 400 12px/1.2 var(--a-font); }
:root.angleich .status-chip.is-active { background: var(--a-pr); border-color: var(--a-pr); color: var(--a-on); font-weight: 600; }
:root.angleich .status-chips { margin: 4px 0 12px; }
:root.angleich .frist--ueberfaellig::before { display: none; }
:root.angleich .frist { font-size: 12px; }

/* A9 — Pillen: Orange-Ton (Status), Rot (Verzug/Offen), Gruen (Erledigt), Grau */
:root.angleich .pill { padding: 4px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0; }
:root.angleich .pill-dran, :root.angleich .pill-warning, :root.angleich .status-badge { background: var(--a-pg); color: var(--a-pgt); }
:root.angleich .pill-danger { background: var(--a-rot); color: var(--a-ro); }
:root.angleich .pill-success { background: var(--a-grt); color: var(--a-gr); }
/* Dritte bewusste Abweichung vom Dummy (23.10.2026, axe): das Gruen des Dummys
   haelt als Schrift auf dem eigenen 16-%-Grund nur 4,25:1 (hell, Karte weiss)
   bzw. 3,77:1 (dunkel, Karte #232323). Nur die Schrift des Etiketts wird
   kraeftiger — 5,65:1 / 5,04:1 —, --a-gr selbst (Punkte, Rahmen) bleibt wie im
   Dummy. */
:root.angleich .pill-success { color: #256843; }
:root.angleich[data-theme="dark"] .pill-success { color: #62b586; }
.pill-grau, :root.angleich .pill-default, :root.angleich .pill-info { background: var(--a-ei, var(--slate-100)); color: var(--a-mu, var(--slate-700)); }
:root.angleich .status-badge--abgeschlossen { background: var(--a-ei); color: var(--a-mu); }
:root.angleich .zeile__text .pill { margin: 8px 8px 0 0; }

/* D — schlanke Projektliste: Suchfeld + Punkt vor dem Namen */
.such-feld { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin-bottom: 12px;
  background: var(--a-ka, var(--surface)); border: 1px solid var(--a-li, var(--slate-200)); border-radius: 12px; color: var(--a-mu, var(--slate-500)); }
.such-feld:focus-within { border-color: var(--a-pr, var(--primary)); }
.such-feld input { flex: 1 1 auto; min-width: 0; height: 42px; border: 0; background: none; outline: 0; color: var(--a-tx, inherit); font: 16px var(--a-font, inherit); }
.such-feld input::placeholder { color: var(--a-mu, var(--slate-500)); }
.pz-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.pz-punkt--rot { background: var(--a-ro); } .pz-punkt--orange { background: var(--a-pr); } .pz-punkt--gruen { background: var(--a-gr); }
:root.angleich .dran-leer { color: var(--a-mu); font-size: 12px; text-align: center; padding: 16px 0; }

/* A10 — Leiste unten: Seitengrund, Linien-Symbole grau, aktiv orange */
:root.angleich .bottom-nav { background: var(--a-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--a-li); }
:root.angleich .bottom-nav a { color: var(--a-mu); font-size: 12px; font-weight: 500; letter-spacing: 0; }
:root.angleich .bottom-nav a .icon { --ico: 24px; color: var(--icon-farbe); }
:root.angleich .bottom-nav a.active { color: var(--a-prt); font-weight: 600; }
:root.angleich .bottom-nav a.active .icon { color: var(--icon-farbe); }

/* ═══ E2 — Chat in Abschnitten (Beas Punkt 2, Dummy „Chat nach der Desktop-Ansicht") ═══
   Raumliste: „+ Neuer Chat", Suchfeld, GRUPPENCHATS · EINZELGESPRÄCHE · NUR FÜR MICH,
   eine Zeile je Raum ohne Rahmen. Raum: Brotkrumen-Kopf, „Sichtbar für …",
   Datumstrenner, Blasen mit Farbbalken, Eingabe-Kasten mit Foto · Senden. */
:root.angleich.chat-ansicht[data-theme="dark"] { --a-bg: #15110e; --a-ka: #1d1916; --a-ei: #2a2522; --a-li: rgba(255,232,204,.12); }
.cnew { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-bottom: 8px; padding: 1px 8px;
  border: 1px solid var(--a-li); background: var(--a-ka); color: var(--a-tx); border-radius: 12px; font: 600 14px var(--a-font); cursor: pointer; }
.csec { font: 700 12px/1.3 var(--a-font); letter-spacing: .08em; text-transform: uppercase; color: var(--a-mu); margin: 16px 2px 4px; }
.crow { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 8px 8px; border: 0; border-radius: 12px;
  background: none; color: var(--a-tx); font: inherit; text-align: left; cursor: pointer; }
.crow:active { background: var(--a-ei); }
.crow__ik { width: 32px; height: 32px; display: grid; place-items: center; flex: none; color: var(--icon-farbe); }
.crow__text { flex: 1 1 auto; min-width: 0; }
.crow__text strong { display: block; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.crow__text small { display: block; color: var(--a-mu); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow--neu .crow__text strong { font-weight: 600; }   /* PL-Dummy: Ungelesenes nur am blauen Punkt, nicht fetter */
.cav { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 600;
  color: var(--pc); border: 1px solid currentColor; background: color-mix(in srgb, var(--pc) 16%, transparent); }
.cdot { width: 9px; height: 9px; border-radius: 50%; background: #4c8dff; flex: none; }
.sicht { display: flex; gap: 8px; align-items: center; color: var(--a-pr); font-size: 12px; margin: 4px 0 0; }
.sicht .icon-sm { --ico: 16px; flex: none; }
/* Raum-Ansicht: Verlauf + Eingabe-Kasten ueber der Leiste */
:root.angleich .chat-thread { padding-bottom: 150px; gap: 2px; }
:root.angleich .feed-trenner { margin: 16px 0 8px; font-size: 12px; color: var(--a-mu); }
:root.angleich .feed-trenner::before, :root.angleich .feed-trenner::after { background: var(--a-li); }
:root.angleich .cmw .cm { background: var(--a-cbub, var(--a-ei)); box-shadow: none; border-radius: 12px; }
:root.angleich[data-theme="dark"] .cmw .cm { --a-cbub: #2a2522; }
:root.angleich .cmw--own .cm { background: var(--a-cbub, var(--a-ei)); border-left: 0; }
.eing2 { position: fixed; left: 0; right: 0; bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); z-index: 40;
  padding: 8px 12px 12px; background: var(--a-bg); }
.eing2 .box { max-width: 736px; margin: 0 auto; background: var(--a-ka); border: 1px solid var(--a-li); border-radius: 12px; padding: 8px 12px 8px; }
.eing2 input[type="text"], .eing2 #chat-input { width: 100%; height: 40px; border: 0; background: none; color: var(--a-tx); font: 16px var(--a-font); outline: 0; }
.eing2 .z2 { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.eing2 .gh { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--a-li); border-radius: 8px;
  background: none; color: var(--a-tx); font: 600 14px var(--a-font); cursor: pointer; }
.eing2 .snd { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--a-pr); color: var(--a-on); font: 700 14px var(--a-font); cursor: pointer; }
.eing2 .snd:disabled, .eing2 #chat-input:disabled { opacity: .5; }
@media (min-width: 768px) { .eing2 { left: var(--sidebar-w); bottom: 0; } }

/* ═══ E3 — PL-Übersicht (Beas Punkt 5) und ⋮-Aktionen (Punkt 3) ═══ */
.kopf-menu { flex: none; width: 44px; height: 44px; margin: -6px -10px 0 0; border: 0; border-radius: 50%; background: none;
  color: var(--a-tx); display: grid; place-items: center; cursor: pointer; }
.kopf-menu[hidden] { display: none; }
.kopf-menu:active { background: var(--a-ei); }
.a-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; color: var(--a-mu); font-size: 12px; margin: 0 2px 12px; }
.a-meta .st { border: 1px solid var(--a-li); border-radius: 99px; padding: 1px 8px; font-size: 12px; color: var(--a-tx); }
.kk.jd { padding: 12px 12px; }   /* PL-Dummy .kk: 11 12 */
.kk.jd .dran-zeile:last-child { padding-bottom: 0; }
.kk.jd h2 { margin: 0 0 2px; font: 700 16px/1.3 var(--a-font); }
.jd__satz { color: var(--a-mu); font-size: 12px; margin-bottom: 4px; }
:root.angleich .kk.jd .dran-zeile { border-top: 1px solid var(--a-li); padding: 12px 0; }
/* PL-Dummy .jdz / .lz: Titel 14 px, Unterzeile 12 px, Knopf 13 px schmal (Hoehe bleibt 44 — Beas Frage „44 px") */
:root.angleich .kk.jd .dran-zeile__text strong { font-size: 14px; }
:root.angleich .kk.jd .dran-zeile__eine { font-size: 12px; }
:root.angleich .kk.jd .dran-knopf { font-size: 14px; padding: 0 12px; }
:root.angleich .hero-dran .dran-knopf { font-size: 14px; padding: 0 12px; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 2px -16px 4px; padding: 2px 16px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { height: 0; display: none; }
.chip { flex: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--a-li);
  border-radius: 99px; background: var(--a-ka); color: var(--a-mu); font: 12px var(--a-font); cursor: pointer; white-space: nowrap; }
.chip b { color: var(--a-tx); font-weight: 600; }
.chip .chip__wert--ok { color: var(--a-gr); } .chip .chip__wert--bad { color: var(--a-ro); }
.nrow { display: flex; gap: 12px; align-items: flex-start; width: 100%; min-height: 48px; padding: 12px; border: 0;
  border-bottom: 1px solid var(--a-li); background: none; color: var(--a-tx); font: inherit; text-align: left; cursor: pointer; }
.nrow__ik { color: var(--icon-farbe); flex: none; display: flex; margin-top: 2px; }
.nrow__t { flex: 1 1 auto; min-width: 0; }
.nrow__t b { display: block; font-size: 14px; }
.nrow__t small { display: block; color: var(--a-mu); font-size: 12px; margin-top: 1px; }
.kach { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.kach__k { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 92px; padding: 16px 8px;
  border: 1px solid var(--a-li); border-radius: 12px; background: var(--a-ka); color: var(--a-tx); font: 600 14px var(--a-font); cursor: pointer; }
.kach__k .icon { --ico: 24px; color: var(--icon-farbe); }
.kach__k em { position: absolute; right: 9px; top: 8px; min-width: 20px; padding: 1px 8px; border-radius: 99px; background: var(--a-pr);
  color: var(--a-on); font: 700 12px/1.4 var(--a-font); font-style: normal; }
:root.angleich .warte { background: var(--a-hl); box-shadow: inset 4px 0 0 var(--a-pr); border-radius: 12px; color: var(--a-tx);
  padding: 12px 16px; margin: 0 0 12px; min-height: 44px; }
:root.angleich .warte small { color: var(--a-mu); }
.a-status { display: flex; align-items: center; gap: 12px; }
.a-status > span:first-child { color: var(--a-mu); font-size: 14px; }
.a-adresse { display: flex; gap: 12px; align-items: center; }
.a-adresse > div { flex: 1; min-width: 0; }
.a-adresse .btn { width: auto; flex: none; }
:root.angleich .kk small { color: var(--a-mu); font-size: 12px; }
:root.angleich .kk strong { font-size: 14px; }
/* ToDo-Karte (Monteur-Dummy v4) */
.todo-karte { padding: 12px 12px 12px; }
.todo-karte--ueber { box-shadow: inset 4px 0 0 var(--a-ro); }
.todo-karte__kopf { display: flex; gap: 12px; align-items: flex-start; }
.todo-karte__t { flex: 1 1 auto; min-width: 0; }
.todo-karte__t strong { display: block; font-size: 16px; }
.todo-karte .seiten-fuss { margin-top: 12px; }
/* ⋮ im Seitenfuss und die aufklappende Liste */
.fuss-mm { flex: none; width: 44px; min-height: 44px; border: 0; background: none; color: var(--a-mu, var(--slate-500)); display: grid; place-items: center; cursor: pointer; border-radius: 12px; }
.fuss-mm[aria-expanded="true"] { background: var(--a-ei, var(--slate-100)); color: var(--a-tx, inherit); }
.seiten-fuss .fuss-mm { flex: 0 0 44px; }
.seiten-fuss--rechts { justify-content: flex-end; }
.mehr-aktionen { margin-top: 8px; background: var(--a-ka, var(--surface)); border: 1px solid var(--a-li, var(--slate-200)); border-radius: 12px; padding: 0 12px; }
.mehr-aktionen[hidden] { display: none; }
.zeile[hidden] { display: none; }   /* Suchfeld der Foto-Projektwahl (Android-UX E2/B11) */
.komm-feld { padding-right: 4px; }
.komm-senden { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--a-pr); display: grid; place-items: center; cursor: pointer; }
:root.angleich .dran-leer--links { text-align: left; padding: 0 2px 8px; }
.zeile[hidden] { display: none; }   /* Dokumentsuche blendet Zeilen per hidden aus — .zeile ist sonst flex */
/* Dokumente offline (Schalter dokumente_offline): Zeile = Link zum Oeffnen + Knopf ⬇/✓ */
.zeile__link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-height: 44px; }
.dok-off { color: var(--a-mu, var(--slate-500)); }
.dok-off.dok-off--da { color: var(--a-pr, var(--primary)); }   /* PL-Dummy .ibt.on: Haken orange */
.dok-off:disabled { opacity: .5; }
.m4-dok-link { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
/* Baustellen-Hinweise (Schalter baustellen_hinweise): Karte je Hinweis wie im Dummy-Kasten */
.hw__text { font-size: 16px; white-space: pre-line; overflow-wrap: anywhere; }
.hw small { display: block; color: var(--a-mu, var(--slate-500)); font-size: 12px; margin-top: 4px; }
.hw__kopf { display: flex; gap: 8px; align-items: flex-start; }
.hw__kopf .hw__text { flex: 1 1 auto; min-width: 0; }
.hw__kopf .zeile__menu { margin: -10px -8px -12px 0; }   /* ⋮ 44 px Tippflaeche, ohne die Karte aufzublaehen */
.kk.hw { padding: 12px 12px; }
.m4-karte.hw .hw__text { padding-right: 32px; }
.hw__satz { color: var(--a-mu, var(--slate-500)); font-size: 12px; margin: -2px 2px 8px; }
.hw__leer { text-align: left !important; margin: 0 2px 12px !important; padding: 0 !important; }
.hw__neu { width: 100%; margin-top: 2px; }

/* ═══ Monteur-App 1:1 nach Beas Dummy v4 (19.10.2026 abends, Schalter ui_app_dummy) ═══
   Klasse `m4` am <html> (showNav in app.js) = Angleichung + Monteur-Ansicht.
   Werte 1:1 aus docs/dummys/monteur_click_dummy_v4_stil_projektleiter.html
   (`:root` hell, `body.dark` dunkel — warmes Dunkel, nicht das Grau der PL).
   Klassen tragen das Praefix `m4-`, sonst greifen die gleichnamigen App-Regeln
   (.btn, .karte …) mit. Kopf = B (Bea 19.10.: flach wie bei der Projektleitung).
   Checkliste: docs/app_angleichung_checkliste.md, Abschnitt F. */
:root.angleich.m4[data-theme="dark"], :root.angleich.m4.chat-ansicht[data-theme="dark"] {
  --a-bg: #14100d; --a-ka: #1c1815; --a-tx: #ede7e0; --a-mu: #b0a69c; --a-li: rgba(255,232,204,.12); --a-ei: #241f1b;
  --a-pr: #d97706; --a-prt: #d97706; --a-pg: rgba(217,119,6,.16); --a-pgt: #d97706; --a-hl: rgba(217,119,6,.10);
  --a-ro: #f87171; --a-rot: rgba(224,82,82,.16); --a-gr: #4a9d6e; --a-grt: rgba(74,157,110,.16);
}
:root.m4 body { font: 16px/1.4 var(--a-font); }
/* Kopf bleibt beim Scrollen oben (Dummy .hd: position sticky) — Form bleibt B */
:root.m4 .screen-header { position: sticky; top: 0; z-index: 30; background: var(--a-bg); }
/* Seite als Spalte: der Hauptknopf (`.m4-fuss`) sitzt wie im Dummy am Seitenende */
:root.m4 #app, :root.angleich #app { display: flex; flex-direction: column; }
/* PL-Dummy v2 genauso: Seite als Spalte, Hauptknopf (`.seiten-fuss`) am Seitenende */
:root.angleich #app > .container { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }
:root.angleich #app > .container > * { flex: none; }
:root.angleich #app > .container > #tab-content { flex: 1 0 auto; display: flex; flex-direction: column; }
:root.angleich #tab-content > .seiten-fuss { margin-top: auto; padding-top: 16px; }
:root.m4 #app > .container { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; padding: 12px 16px 24px; }
:root.m4 #tab-content > *, :root.m4 #app > .container > * { flex: none; }
:root.m4 #app > .container > #tab-content { flex: 1 0 auto; display: flex; flex-direction: column; }
.m4-fuss { margin-top: auto !important; padding-top: 16px; }

/* Leiste unten (Dummy #tabbar): Kartenflaeche, Zeichen, Zahl-Plaketten */
:root.m4 { --bottom-nav-h: 64px; }   /* Dummy: 6 + 25 Zeichen + 15 Text + 2×2 + 12 + 1 Linie */
:root.m4 .bottom-nav { background: var(--a-ka); border-top: 1px solid var(--a-li); padding: 6px 0 calc(12px + var(--safe-bottom)); }
:root.m4 .bottom-nav a { position: relative; justify-content: flex-start; color: var(--a-mu); font: 400 12px/1.4 var(--a-font); gap: 0; padding: 2px 0; letter-spacing: 0; }
:root.m4 .bottom-nav a b { display: block; font-size: 20px; font-weight: 400; line-height: 1.2; }
:root.m4 .bottom-nav a.active { color: var(--a-prt); font-weight: 600; }
:root.m4 .bottom-nav em { position: absolute; top: -2px; left: 58%; min-width: 17px; padding: 0 8px; border-radius: 99px;
  background: var(--a-pr); color: var(--a-on); font: 700 12px/1.5 var(--a-font); font-style: normal; text-align: center; }
:root.m4 .bottom-nav .nav-punkt { display: none; }

/* Bausteine des Dummys */
.m4-karte { position: relative; background: var(--a-ka); border: 1px solid var(--a-li); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; color: var(--a-tx); }
.m4-karte b { display: block; font-size: 16px; padding-right: 32px; }
.m4-karte small { color: var(--a-mu); font-size: 12px; }
button.m4-karte, a.m4-karte { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; text-decoration: none; }
.m4-karte[hidden], .m4-ab[hidden] { display: none; }
.m4-dots { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: none; color: var(--a-mu);
  font: 700 24px/1 var(--a-font); cursor: pointer; z-index: 1; }
/* Beteiligte (Bea 22.10.2026): ☎ und ✉ sitzen am rechten Zeilenende — das ⋮ lag
   oben rechts DARUEBER und verdeckte den Umschlag. Die Karte lassen rechts einen
   eigenen Streifen frei, das ⋮ steht dort am Rand, mittig; ☎ ✉ ⋮ ueberlappen nie. */
.m4-karte--bet { padding-right: 42px; }
.m4-karte--bet b { padding-right: 0; }
.m4-karte--bet .m4-dots { top: 50%; right: 0; width: 40px; transform: translateY(-50%); }
.m4-pille { display: inline-block; border-radius: 99px; padding: 4px 12px; font-size: 12px; font-weight: 600; background: var(--a-pg); color: var(--a-pgt); margin: 8px 8px 0 0; }
.m4-pille.p-r { background: var(--a-rot); color: var(--a-ro); } .m4-pille.p-v { background: var(--a-grt); color: var(--a-gr); }
.m4-pille.p-n { background: var(--a-ei); color: var(--a-mu); }
.m4-pillen { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.m4-pillen button { min-height: 44px; border: 1px solid var(--a-li); background: var(--a-ka); color: var(--a-tx); border-radius: 99px; padding: 8px 16px;
  font: 14px var(--a-font); cursor: pointer; }
.m4-pillen button.on { background: var(--a-pr); color: var(--a-on); border-color: var(--a-pr); font-weight: 600; }
.m4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--a-pr); color: var(--a-on);
  border-radius: 12px; min-height: 48px; padding: 0 16px; font: 700 16px var(--a-font); cursor: pointer; text-decoration: none; }
.m4-btn.s { background: var(--a-ka); color: var(--a-tx); border: 1px solid var(--a-li); }
.m4-btn.xl { width: 100%; min-height: 56px; font-size: 16px; border-radius: 12px; }
.m4-btn.gr { background: var(--a-gr); color: var(--a-on); }
.m4-btn:disabled { opacity: .5; }
.m4-btns { display: flex; gap: 12px; margin-top: 12px; } .m4-btns .m4-btn { flex: 1; }
.m4-kach { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.m4-kach button { position: relative; background: var(--a-ka); border: 1px solid var(--a-li); border-radius: 12px; padding: 16px 8px;
  font: 600 14px var(--a-font); color: var(--a-tx); cursor: pointer; }
.m4-kach button i { display: block; font-style: normal; font-size: 26px; margin-bottom: 4px; }
.m4-kach em, .m4-ub { position: absolute; right: 9px; top: 8px; background: var(--a-pr); color: var(--a-on); border-radius: 99px;
  font: 700 12px/1.45 var(--a-font); font-style: normal; padding: 1px 8px; }
.m4-ab { font: 700 12px/1.3 var(--a-font); letter-spacing: .08em; text-transform: uppercase; color: var(--a-mu); margin: 16px 2px 8px; }
.m4-ab:first-child { margin-top: 2px; }
.m4-zl { display: flex; align-items: center; gap: 12px; } .m4-zl .m4-t { flex: 1; min-width: 0; }
.m4-zl > span[aria-hidden="true"]:last-child { color: var(--a-mu); }   /* „›" grau wie im Dummy (im Knopf stand es blau) */
.m4-ik { font-size: 20px; width: 26px; text-align: center; flex: none; }
.m4-ik--pl { display: grid; place-items: center; color: var(--icon-farbe); }   /* PL-Dummy: Linien-Symbole in Orange */
.m4-ue { border-left: 4px solid var(--a-ro); } .m4-rot { color: var(--a-ro) !important; font-weight: 600; }
.m4-suche { display: block; width: 100%; border: 1px solid var(--a-li); background: var(--a-ei); color: var(--a-tx); border-radius: 12px;
  padding: 12px 16px; font: 16px var(--a-font); }
.m4-suche::placeholder { color: var(--a-mu); }
.m4-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px; flex: none; }
.m4-av.grau { background: var(--a-ei); color: var(--a-mu); }   /* Dummy: .av mit var(--ei)/var(--mu), Zeichen 14 px fett */
.m4-adr { color: var(--a-mu); text-decoration: none; }
.m4-rd { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--a-li); background: var(--a-ka); color: var(--a-tx); font-size: 20px;
  cursor: pointer; display: grid; place-items: center; flex: none; text-decoration: none; }
.m4-rd.o { background: var(--a-pr); border-color: var(--a-pr); color: var(--a-on); }
.m4-cz { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--a-li);
  background: none; color: var(--a-tx); font: inherit; text-align: left; cursor: pointer; }
.m4-cz .m4-t { flex: 1; min-width: 0; } .m4-cz .m4-t b { display: block; font-size: 16px; }
.m4-cz .m4-t small { display: block; color: var(--a-mu); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m4-cz .m4-ub { position: static; font-size: 12px; }
.m4-lbl { font-size: 12px; background: var(--a-ei); color: var(--a-mu); border-radius: 6px; padding: 1px 8px; margin-left: 8px; font-weight: 600; }
.m4-blase { background: var(--a-ka); border: 1px solid var(--a-li); border-radius: 12px; padding: 8px 12px; margin: 8px 0; max-width: 84%; font-size: 14px; }
.m4-blase small { display: block; color: var(--a-mu); font-size: 12px; margin-top: 2px; }
.m4-blase.ich { background: var(--a-pg); color: var(--a-tx); margin-left: auto; border-color: var(--a-pr); }
.m4-fotoph { height: 120px; border-radius: 12px; background: var(--a-ei); display: grid; place-items: center; color: var(--a-mu); font-weight: 600; margin: 8px 0; overflow: hidden; }
.m4-fotoph img { width: 100%; height: 100%; object-fit: cover; }
.m4-sel { display: flex; gap: 8px; margin: 12px 0 8px; }
.m4-sel button { flex: 1; border: 1px solid var(--a-li); background: var(--a-ka); color: var(--a-tx); border-radius: 12px; padding: 12px 12px; font: 14px var(--a-font);
  text-align: left; cursor: pointer; }
.m4-sel button small { display: block; color: var(--a-mu); font-size: 12px; }
.m4-marken { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.m4-marken span { background: var(--a-ei); border-radius: 99px; padding: 4px 8px 4px 12px; font-size: 12px; }
.m4-marken button { margin-left: 8px; min-width: 32px; min-height: 32px; padding: 4px 8px; border: 0; background: none; color: inherit; cursor: pointer; }
.m4-klein { font-size: 12px; color: var(--a-mu); text-align: center; margin-top: 16px; }
.m4-klein a, .m4-klein button { color: var(--a-mu); background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
/* Bauzeitenplan als Balken (Dummy .gx/.achse/.vor/.det) */
.m4-achse { display: flex; font-size: 12px; color: var(--a-mu); margin: 0 0 4px; }
.m4-achse span { flex: 1; text-align: center; border-left: 1px solid var(--a-li); white-space: nowrap; overflow: hidden; }
.m4-vor { display: block; width: 100%; margin-bottom: 8px; border: 0; border-bottom: 1px solid var(--a-li); padding: 0 0 4px; background: none;
  color: var(--a-tx); font: inherit; text-align: left; cursor: pointer; }
.m4-vor .tt { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.m4-vor .tt small { color: var(--a-mu); font-size: 12px; white-space: nowrap; }
.m4-gx { position: relative; height: 30px; margin: 4px 0 2px; }
.m4-gx .bal { position: absolute; top: 5px; height: 20px; border-radius: 8px; background: var(--a-pr); min-width: 6px; overflow: hidden; }
.m4-gx .bal.fremd { background: var(--a-mu); }
.m4-gx .bal i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: #0003; }
.m4-gx .hl { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--a-ro); }
.pl-mstatus { display: flex; align-items: center; color: var(--a-mu); font-size: 14px; margin: 2px 2px 8px; }
.pl-verlauf { font-size: 14px; margin: 4px 2px; color: var(--a-mu); }
.bet-gruppe { color: var(--a-mu); font-size: 12px; padding: 12px 0 2px; }
.bet-gruppe[hidden] { display: none; }
.m4-draussen { position: relative; top: 6px; color: var(--a-mu); font-size: 12px; }
.m4-det { background: var(--a-ei); border-radius: 12px; padding: 12px 12px; margin: 2px 0 8px; font-size: 14px; }
.m4-det div { margin: 4px 0; }
/* Schalter (Mehr) */
.m4-sw { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--a-li); }
/* Sichtbar 52 × 30 wie im Dummy, Tippflaeche 52 × 44 (R24) — die Spur zeichnet ::before */
.m4-tg { width: 52px; height: 44px; margin: -7px 0; background: none; position: relative; cursor: pointer; flex: none; border: 0; padding: 0; }
.m4-tg::before { content: ""; position: absolute; left: 0; top: 7px; width: 52px; height: 30px; border-radius: 99px; background: var(--a-li); }
.m4-tg::after { content: ""; position: absolute; top: 10px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform var(--t2) var(--kurve); }
.m4-tg[aria-checked="true"]::before { background: var(--a-pr); }
.m4-tg[aria-checked="true"]::after { transform: translateX(22px); }
.m4-klein button { min-height: 44px; padding: 0 12px; }
/* Blaetter (Dummy #sheet): Titel 16 px, Optionen mit Linie */
:root.m4 .sheet { background: var(--a-ka); color: var(--a-tx); border-radius: 22px 22px 0 0; padding: 8px 14px calc(20px + var(--safe-bottom)); }
:root.m4 .sheet-handle { width: 40px; height: 5px; border-radius: 8px; background: var(--a-li); margin: 2px auto 8px; }
:root.m4 .sheet h2 { margin: 8px 2px 8px; font: 700 16px/1.3 var(--a-font); }
:root.m4 .opt { gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--a-li); font: 16px var(--a-font); color: var(--a-tx); }
:root.m4 .opt small { display: block; color: var(--a-mu); font-size: 12px; }
:root.m4 .opt .icon-sm { color: var(--icon-farbe); }
/* Aktuelle Auswahl als gefüllte Zeile (Projektstatus, Android-UX 08.11.2026, E2/B3) */
.opt[aria-current="true"], :root.m4 .opt[aria-current="true"] { background: var(--a-inb, var(--primary-50));
  border-radius: 12px; font-weight: 600; padding-left: 12px; padding-right: 12px; }
.opt[aria-current="true"] .icon-sm { color: var(--primary); }
/* Knopf im Hinweis („Rückgängig“), 48 px hoch für den Handschuh */
.toast-aktion { margin-left: auto; flex: none; min-height: 44px; padding: 0 12px; border-radius: 12px;
  background: transparent; border: 1px solid currentColor; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.m4-glyph { flex: none; font-style: normal; }
.m4-glyph.gross { font-size: 24px; }   /* „Foto an …": Zeichen 24 px wie im Dummy */
:root.m4 .sheet-backdrop { background: #0007; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Chat-Raum: Eingabezeile ueber der Leiste (Dummy .eing) */
.m4-eing { position: fixed; left: 0; right: 0; bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); z-index: 40; display: flex; gap: 8px;
  align-items: center; padding: 8px 12px; background: var(--a-ka); border-top: 1px solid var(--a-li); }
.m4-eing input[type="text"] { flex: 1; min-width: 0; background: var(--a-ei); color: var(--a-tx); border: 0; border-radius: 99px; padding: 12px 16px; font: 16px var(--a-font); outline: 0; }
.m4-eing input::placeholder { color: var(--a-mu); }
.m4-k { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--a-ei); color: var(--a-tx); font-size: 20px; cursor: pointer; flex: none;
  display: grid; place-items: center; }
.m4-k.o { background: var(--a-pr); color: var(--a-on); }
.m4-k:disabled, .m4-eing input:disabled { opacity: .5; }
:root.m4 .chat-thread { padding: 4px 0 74px; display: block; }
@media (min-width: 768px) { .m4-eing { left: var(--sidebar-w); bottom: 0; } }
/* Kopf B (Bea 19.10.) mit „+ Neu" rechts (Dummy .hd .pk.neu) */
.m4-neu { flex: none; align-self: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--a-pr); color: var(--a-on);
  font: 700 14px var(--a-font); cursor: pointer; margin: -7px 0; }   /* wie Dummy margin:-4px 0 — der Knopf macht den Kopf nicht hoeher (58 px wie bei der PL) */

/* Bea 21.10.2026 (Antwort 19): „Der Monteur bekommt alles groesser (Bedienung mit
   Handschuhen), die Projektleitung normale Groesse (38 bis 40 px)." Knoepfe und
   Filter-Pillen der Projektleitung also 40 px wie im PL-Dummy v2 (.btn 38–40,
   .pillen button 38); der Monteur (.m4) bleibt bei 44/48 px. Die breiten Fuss-Knoepfe
   unter einer Seite (#tab-content > .seiten-fuss, 48 px) sind die „xl"-Knoepfe des
   Dummys und bleiben — die Regel dort traegt eine id und gewinnt. */
:root.angleich:not(.m4) .btn,
:root.angleich:not(.m4) .btn-sm,
:root.angleich:not(.m4) .zeile .btn,
:root.angleich:not(.m4) .zeile .btn.btn-sm,
:root.angleich:not(.m4) .pl-bh__knoepfe .btn,
:root.angleich:not(.m4) .chip,
:root.angleich:not(.m4) .filter-chip,
:root.angleich:not(.m4) .pillen-knopf,
:root.angleich:not(.m4) .m4-pillen button { min-height: 40px; }
/* Mängel-Filter mit fünf Pillen (Antwort 6B): umbrechen wie Beas `.pillen` (flex-wrap),
   statt rechts aus dem Bild zu laufen — bei 375 px passten nur dreieinhalb. */
:root.angleich:not(.m4) .status-filter-chips { flex-wrap: wrap; overflow-x: visible; }

/* Bea 21.10.2026 (Antwort 3B): „Eintrag heute", „Eintrag prüfen", „Neues Projekt" als
   eigene Seite wie im PL-Dummy v2 statt als Blatt (openSheet mit opts.seite, ui.js).
   Seitengrund, flacher Kopf mit Brotkrume, die Leiste unten bleibt sichtbar. Hinein
   gleitet die Seite von rechts (wie ein Seitenwechsel), kurz und ohne ease-in. */
html:root .sheet.sheet--seite { top: 0; left: 0; right: 0; bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
  max-height: none; border-radius: 0; box-shadow: none; padding: 0 0 24px;
  background: var(--a-bg, var(--bg)); color: var(--a-tx, inherit);
  transform: translateX(24px); opacity: 0; transition: transform var(--t3) var(--kurve), opacity var(--t2) var(--kurve); }
html:root .sheet.sheet--seite.open { transform: none; opacity: 1; }
.sheet--seite .sheet-content { padding-top: 8px; }
html:root .sheet.sheet--seite .seiten-fuss { position: static; margin: var(--space-4) 0 0; padding: 0; background: none; }
@media (min-width: 768px) { html:root .sheet.sheet--seite { left: var(--sidebar-w, 0); bottom: 0; } }
@media (prefers-reduced-motion: reduce) { html:root .sheet.sheet--seite { transition: none; transform: none; } }

/* ═══ Knopfgroesse nach Rolle (Bea 27.10.2026, Schalter knopf_rolle) ═══
   Klasse am <html> aus /auth/me `knopf_groesse` (utils/ansicht.knopf_groesse),
   gesetzt in showNav (app.js). In App und Web gleich: Monteur Handschuh-Groesse
   48 px, alle anderen Rollen 40 px. Ohne Schalter keine Klasse: 44 px wie bisher. */
:root.knopf-normal { --touch-min: 40px; }
:root.knopf-monteur { --touch-min: 48px; }
:root.knopf-monteur :is(.btn, .btn-sm, .btn-icon, .m4-btn, .m4-k, .m4-neu, .filter-chip, .pillen-knopf, .lnk,
  button, select, [role=button], input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=range])) {
  min-height: 48px;
}
:root.knopf-monteur :is(.btn, .btn-sm, .btn-icon, .m4-k, button, [role=button]) { min-width: 48px; }
/* Symbole im Monteur-Modus: mindestens 24 px (Tippflaeche bleibt 48 px). */
:root.knopf-monteur .icon:not(.icon-xl) { --ico: 24px; }

/* „Wer darf es sehen?“ (Bea 01.11.2026, wie im Web): durchgehende Leiste, auf dem Telefon in
   zwei Spalten statt abgeschnitten; „Individuell“ zeigt die Personen; bei „Auftraggeber“ die Wahl. */
.wds-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); color: var(--slate-500); margin: 0 0 8px; }
.wds-leiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--slate-200); border-radius: 12px; overflow: hidden; }
.wds-seg { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--slate-500); font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wds-seg:nth-child(2n) { border-left: 1px solid var(--slate-200); }
.wds-seg:nth-child(n+3) { border-top: 1px solid var(--slate-200); }
.wds-seg.an { background: var(--primary); color: var(--on-primary, #1c1310); }
.wds-indiv { color: var(--slate-800); }
.wds-ag { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--text-sm); color: var(--slate-500); }
.wds-ag[hidden] { display: none; }
.wds-ag select { flex: 1; min-width: 0; }

/* Bausteine (Bea 02.11.2026): was Inhalt traegt oder schwebt, ist ein Kasten; was man bedient, bleibt flach und zeigt Orange nur fuer an/aktiv. docs/styleguide.md */
/* Toast: Kasten mit Kreis */
:root.angleich .toast, :root.angleich .toast-success, :root.angleich .toast-error { background: var(--a-ka); color: var(--a-tx); border: 1px solid var(--a-li); box-shadow: 0 8px 24px var(--a-sch); max-width: 380px; }
:root.angleich .toast::before { content: "i"; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--a-inb); color: var(--a-inf); font-size: 12px; font-weight: 600; }
:root.angleich .toast-success::before { content: "\2713"; background: var(--a-grt); color: var(--a-gr); }
:root.angleich .toast-error::before { content: "!"; background: var(--a-rot); color: var(--a-ro); }
/* Leerer Zustand: Kasten, grosser Kreis, Titel in Archivo 20 */
:root.angleich .empty-state { background: var(--a-ka); border: 1px solid var(--a-li); border-radius: 12px; padding: 32px 24px; color: var(--a-mu); }
:root.angleich .empty-state .empty-icon { width: 64px; height: 64px; margin: 0 auto 16px; background: var(--a-pg); color: var(--a-prt); }
:root.angleich .empty-state .empty-icon .icon { width: 24px; height: 24px; }
:root.angleich .empty-state h3 { font-family: var(--a-titel); font-size: 20px; font-weight: 600; color: var(--a-tx); }
:root.angleich .empty-state p { font-size: 14px; color: var(--a-mu); }
/* Schalter, Kaestchen, Auswahlknopf: flach */
:root.angleich .bb-switch-track { background: transparent; border: 1px solid var(--a-ctl); box-sizing: border-box; }
:root.angleich .bb-switch-thumb { top: 2px; left: 2px; background: var(--a-ctl); box-shadow: none; }
:root.angleich .bb-switch input:checked + .bb-switch-track { background: var(--a-pg); border-color: var(--a-prt); }
:root.angleich .bb-switch input:checked + .bb-switch-track .bb-switch-thumb { background: var(--a-prt); }
:root.angleich input[type=checkbox]:not(.bb-switch input), :root.angleich input[type=radio]:not(.bb-switch input) {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none;
  width: 22px; height: 22px; border: 1px solid var(--a-ctl); background: transparent; cursor: pointer; accent-color: var(--a-prt);
}
:root.angleich input[type=checkbox]:not(.bb-switch input) { border-radius: 6px; }
:root.angleich input[type=radio]:not(.bb-switch input) { border-radius: 50%; }
:root.angleich input[type=checkbox]:not(.bb-switch input):checked, :root.angleich input[type=radio]:not(.bb-switch input):checked { border-color: var(--a-prt); background: var(--a-pg); }
:root.angleich input[type=checkbox]:not(.bb-switch input):checked::before { content: ""; width: 6px; height: 11px; border: solid var(--a-prt); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
:root.angleich input[type=radio]:not(.bb-switch input):checked::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--a-prt); }
/* Untere Leiste: flach, Rand oben, aktiv orange und fett, kein Hintergrund hinter dem Symbol */
:root.angleich .bottom-nav, :root.m4 .bottom-nav { background: var(--a-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--a-li); }
:root.angleich .bottom-nav a.active { color: var(--a-prt); font-weight: 600; }
:root.angleich .bottom-nav a.active .icon { color: var(--a-prt); background: none; }
/* Monteur-Ansicht (m4): Phosphor statt Textzeichen. Orange, 24 px bei Kacheln und Foto-Blatt. */
.m4-ik .icon, .m4-glyph .icon, .m4-av .icon, button[data-tab] i .icon { color: var(--icon-farbe); }
.m4-glyph.gross .icon, button[data-tab] i .icon { --ico: 24px; }
.m4-ik .icon { --ico: 24px; }
.m4-av.grau .icon { --ico: 20px; }
button[data-tab] i { display: flex; justify-content: center; }
.m4-adr .icon { color: var(--icon-farbe); vertical-align: -3px; }

/* ── Android-UX-Durchgang 08.11.2026 (Paket C) ─────────────────────────────────
   E1/B9: Feldrand mit ≥ 3:1 gegen Karte und Grund (WCAG 1.4.11). --a-ctl ist das
   Steuerelement-Grau der Angleichung (hell #767b86, dunkel #80776e — gemessen
   3,6:1 bzw. 3,5:1). :where() hält die Spezifität niedrig, der Fokusring gewinnt. */
:where(:root.angleich) .form-input, :where(:root.angleich) .form-select, :where(:root.angleich) .form-textarea {
  box-shadow: 0 0 0 1px var(--a-ctl); }
:where(:root.angleich) .such-feld { border-color: var(--a-ctl); }
/* E1/B3: Auswahl als ganze Zeile, 48 px hoch, Kreis mittig zum Text */
.wahl-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.form-group label.wahl-zeile, .wahl-zeile { flex: 1 1 140px; display: flex; margin: 0; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--a-ctl, var(--slate-300)); border-radius: 12px; cursor: pointer; }
.wahl-zeile input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--a-pr, var(--primary)); }
.wahl-zeile:has(input:checked) { border-color: var(--a-pr, var(--primary)); background: var(--a-hl, var(--primary-50)); }
/* E1/B9: zweiter Bauherr zum Aufklappen */
.np-zweiter { margin: 4px 0 12px; }
.np-zweiter > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--a-pr, var(--primary)); }
/* E1/B3: Impressum · Datenschutz · Barrierefreiheit waren 17 dp hoch */
.m4-fuss a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; }
/* Knöpfe und Filter der Projektleitung bleiben 40 px — Beas Regel (21.10., Antwort 19).
   Ob sie für Handschuhe größer werden, ist eine Frage an Bea (Android-UX E1/B3). */
/* E1/B8: offene Tastatur — die Leiste unten nahm ~100 dp der restlichen Fläche */
:root.tastatur-offen .bottom-nav { display: none !important; }
/* E1/B15 + E2/B2: beim Scrollen lief der Inhalt unter Uhrzeit und Akku („Firma“ über
   der Uhr). Ein Streifen in Seitenfarbe deckt den Bereich der Statusleiste ab. Höhe 0,
   wo es keine Statusleiste über der Seite gibt (Browser, Desktop). */
html::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--safe-top);
  background: var(--a-bg, var(--surface)); z-index: 1000; pointer-events: none; }

/* ── Bewegung: reduzierte Bewegung (Bea 02.11.2026, docs/bewegung_uebergabe.md) ──
   Eine zentrale Regel je Datei: jede Animation und jeder Uebergang schrumpft auf 1 ms,
   Schleifen laufen nur einmal. Ladekreis und Schimmer bleiben als stehendes Bild sichtbar. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}