/* Plattform-Cockpit: ruhiges B2B-Admin-Design, Token-basiert, nur hell (kein dunkles Thema, DESIGN.md).
   Tap-Ziele >= 44px, Basis 16px, kein horizontales Scrollen 375-1440px. */

/* Inter Tight vom eigenen Server (fonts/OFL.txt), eine variable Datei für 400 bis 800, nur Latein */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-tight-latin.woff2") format("woff2");
}
/* Arial auf die Masse von Inter Tight gebracht (gemessen), damit beim Wechsel nichts springt */
@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial");
  size-adjust: 95.2%;
  ascent-override: 101.9%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}

:root {
  /* ---- Design-Tokens (DESIGN.md), Marke Ruufd wie die Website (site/src/app/globals.css) ---- */
  --color-primary: #1A35A8;        /* Ridge Blue */
  --color-primary-hover: #0B1640;  /* Night */
  --color-on-primary: #ffffff;
  /* Akzent (nur primäre CTAs, z. B. «Freigeben»): Butter mit Night-Schrift wie «btn-sun» der Website.
     Butter nie als Schrift auf Weiss. */
  --color-accent: #FDE58C;
  --color-accent-hover: #F5D45E;
  --color-on-accent: #0B1640;
  --color-bg: #FFFFFF;             /* Inhalt weiss, Flächen trennen Haarlinien */
  --color-fg: #0E1A33;             /* Ink */
  --color-card: #FFFFFF;
  --color-card-fg: #0E1A33;
  --color-muted: #EEF1F6;          /* gedämpfte Fläche (Tag, Knopf, Platzhalter) */
  --color-muted-fg: #4D5B75;       /* Slate */
  --color-border: #E3E6EC;         /* Haarlinie */
  --color-border-2: #EEF0F4;       /* noch leiser: Zeilen in Tabellen */
  --color-sidebar: #F7F8FA;
  --color-hover: #F2F4F7;
  --color-active: #E8EBF0;
  --color-ring-soft: rgba(26, 53, 168, 0.2);
  --color-input-border: #7F8BA3;   /* Eingabefelder: 3:1 auf Weiss und Mist, sichtbar auch in der Sonne */
  --color-destructive: #DC2626;
  --color-on-destructive: #ffffff;
  --color-ring: #1A35A8;
  /* Kopfzeile wie der Website-Header */
  --color-header: #E1EAFB;

  /* Status-Tinten mit lesbarer Schriftfarbe */
  --color-ok: #15803D;
  --color-ok-bg: #DCFCE7;
  --color-warn: #854D0E;
  --color-warn-bg: #FFF6D6;        /* Butter Tint */
  --color-bad: #B91C1C;
  --color-bad-bg: #FEE2E2;
  --color-info: #1A35A8;
  --color-info-bg: #E6ECFB;
  --color-neutral: #4D5B75;
  --color-neutral-bg: #EDF0F6;

  /* Toast-Streifen: die Toastfläche ist invertiert (Hintergrund --color-fg),
     darum hier die Status-Tinten des dunklen Themes (>= 3:1 auf #0E1A33). */
  --toast-ok: #86EFAC;
  --toast-warn: #FDE58C;
  --toast-bad: #FCA5A5;
  --toast-info: #86B6FF;

  /* Primär als Text/Fläche (aktive Navigation, Links) */
  --color-primary-ink: #1A35A8;
  --color-primary-tint: #E6ECFB;
  --color-faint-fg: #5D6A83;

  --font: "Inter Tight", "Inter Tight Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --shadow-card: 0 1px 2px rgba(11, 22, 64, 0.04), 0 8px 24px rgba(11, 22, 64, 0.05);
  --shadow-pop: 0 20px 50px rgba(11, 22, 64, 0.15);
  /* Gleiche Ecke wie das Logo-Quadrat der Website: rx 14 auf 60, bei 40px gezeichnet */
  --radius: 8px;                   /* Karten, Dialoge, Menüs */
  --radius-s: 6px;                 /* Felder im Kleinen, Tags */
  /* Ebenen der Seite (DESIGN.md «Werte»): innerhalb einer Komponente reichen 1 bis 9 */
  --z-kopf: 20; --z-knopf: 25; --z-leiste: 30; --z-ebene: 40; --z-meldung: 50; --z-sprung: 100;
  --color-overlay: rgba(11, 22, 64, 0.45);
  --shadow-drawer: -8px 0 24px rgba(11, 22, 64, 0.15);
  --shadow-primary: 0 1px 2px rgba(11, 22, 64, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --tap: 44px;
  --feld-schrift: 16px;            /* Eingabefelder: 16px auf Touch (kein Zoom auf iOS), 14px mit Maus */
  --topbar-h: 48px;
  --sidebar-w: 232px;
  --sidebar-w-min: 72px;

  /* ---- Legacy-Aliase (bestehende Bereiche bauen darauf) ---- */
  --bg: var(--color-bg);
  --card: var(--color-card);
  --ink: var(--color-fg);
  --ink2: var(--color-muted-fg);
  --ink3: var(--color-faint-fg);
  --line: var(--color-border);
  --accent: var(--color-primary);
  --accent-ink: var(--color-on-primary);
  --accent-bg: var(--color-primary-tint);
  --ok: var(--color-ok);
  --ok-bg: var(--color-ok-bg);
  --warn: var(--color-warn);
  --warn-bg: var(--color-warn-bg);
  --bad: var(--color-bad);
  --bad-bg: var(--color-bad-bg);
  --info: var(--color-info);
  --info-bg: var(--color-info-bg);
  --neutral: var(--color-neutral);
  --neutral-bg: var(--color-neutral-bg);
  --shadow: var(--shadow-card);
}


* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* Fett ist im Cockpit 600 (DESIGN.md «Regeln mit Prüfung»), auch wo der Browser «bold» setzt */
b, strong, h1, h2, h3, h4, th { font-weight: 600; }

body {
  margin: 0;
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  color: var(--color-fg);
  background: var(--color-bg);
  min-height: 100vh;
}

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

.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;
}

.skip-link {
  position: absolute;
  left: 12px; top: -64px;
  z-index: var(--z-sprung);
  padding: 10px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus-visible { top: 12px; }

svg { flex: 0 0 auto; }

/* ==================== Seitenleiste ==================== */
/* Gedämpfter als der Inhalt, aktive Zeile grau gefüllt, kein Balken, kein Schatten (DESIGN.md «Navigation») */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-border);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  z-index: var(--z-leiste);
  overflow-y: auto;
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 2px 6px 10px;
}

.side-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
}
.side-brand-mark svg { width: 28px; height: 28px; display: block; }

.side-brand-text { display: grid; line-height: 1.2; min-width: 0; }
.side-brand-text strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-brand-text span { font-size: 12px; color: var(--color-faint-fg); }

.side-nav { display: grid; gap: 1px; flex: 1 1 auto; align-content: start; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 8px;
  border-radius: var(--radius-s);
  color: var(--color-muted-fg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-item:hover { background: var(--color-hover); color: var(--color-fg); }

.nav-item[aria-current="page"] {
  background: var(--color-active);
  color: var(--color-fg);
}
.nav-item[aria-current="page"] .nav-icon { color: var(--color-fg); }

.nav-icon { display: inline-flex; color: var(--color-faint-fg); }
.nav-icon svg { width: 16px; height: 16px; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-user {
  border-top: 1px solid var(--color-border);
  padding: 10px 6px 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
}
.side-user:empty { display: none; }
.side-user .avatar { grid-row: 1 / span 2; }
.side-user-label { display: none; }
.side-user-roles { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.side-user-name { grid-column: 2; font-size: 14px; font-weight: 500; color: var(--color-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-id {
  grid-column: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--color-faint-fg);
  word-break: break-all;
}

/* Kreis mit Initialen (Kopfzeile, Seitenleiste) */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-active);
  color: var(--color-muted-fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ==================== Kopfzeile ==================== */
/* 48px: Projektwahl links, rechts Suche, Aktualisieren, Glocke und das Konto als Menü. Keine Textknöpfe. */

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.top {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding-top: env(safe-area-inset-top);
}

.top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--topbar-h);
  padding: 6px 16px;
  flex-wrap: wrap;
}

.brand {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-fg);
}
/* Ruufd-Kachel vor dem Firmennamen in der Kopfzeile (Telefon, Anmeldeseite) */
.brand::before {
  content: "";
  display: inline-block;
  width: 24px; height: 24px;
  margin-right: 8px;
  vertical-align: middle;
  background: url("/cockpit/ruufd-icon.svg") center / contain no-repeat;
}

.top-row .select { flex: 0 1 auto; width: auto; max-width: 320px; min-height: var(--tap); font-weight: 500; }
.top-row .sp { flex: 1 1 auto; }

/* Suche als Feld mit Tastenkürzel (Desktop), auf dem Telefon nur die Lupe */
#suche { gap: 8px; color: var(--color-faint-fg); font-weight: 400; min-width: 0; }
#suche:hover { color: var(--color-fg); }
.suche-kbd {
  margin-left: 12px;
  font: 12px var(--font);
  color: var(--color-faint-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 0 5px;
  line-height: 18px;
  background: var(--color-card);
}
#refresh, .nb-glocke { width: var(--tap); padding: 0; color: var(--color-muted-fg); }
.refresh-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Konto-Menü: Avatar als Knopf, darunter Name, Rollen, Abmelden */
.login { display: flex; gap: 8px; margin-left: auto; }
.konto { position: relative; }
.konto > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  border-radius: var(--radius-s);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.konto > summary::-webkit-details-marker { display: none; }
.konto > summary:hover { background: var(--color-hover); }
.konto-menu {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  z-index: var(--z-knopf);
  min-width: 240px;
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.konto-menu .user { display: grid; gap: 6px; }
.konto-menu .user:empty { display: none; }
.konto-menu .btn { justify-content: flex-start; }
.user-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.user-rollen { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 767.98px) {
  .top-row { row-gap: 6px; }
  .brand { order: 0; flex: 1 1 0; font-size: 13px; }
  .brand::before { width: 20px; height: 20px; margin-right: 6px; }
  .login { order: 1; }
  .top-row .select { order: 2; flex: 1 1 100%; max-width: none; min-width: 0; }
  #refresh, #suche, .nb-glocke { order: 1; }
  #suche { width: var(--tap); padding: 0; justify-content: center; }
  .suche-text, .suche-kbd { display: none; }
}
@media (min-width: 768px) { .nur-telefon { display: none; } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-s);
  background: var(--color-neutral-bg);
  color: var(--color-neutral);
  font-size: 13px;
  white-space: nowrap;
}
.chip-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Telefon (unter 768px): Leiste unten mit bis zu vier Bereichen und «Mehr», Icon über Text */
.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-leiste);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: 56px;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  padding: 2px 4px;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--color-muted-fg);
  text-decoration: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 22px; height: 22px; }
.tab[aria-current="page"] { color: var(--color-primary-ink); }
.tab-icon { display: inline-flex; color: var(--color-faint-fg); }
.tab[aria-current="page"] .tab-icon { color: var(--color-primary-ink); }

/* «Mehr»: alle Bereiche in Gruppen, als Dialog */
.mehr-gruppe { display: grid; gap: 1px; }
.mehr-gruppe + .mehr-gruppe { margin-top: 12px; }
.mehr-titel { font-size: 12px; font-weight: 500; color: var(--color-faint-fg); padding: 0 8px 4px; }
.mehr-link {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap); padding: 0 8px;
  border-radius: var(--radius-s);
  color: var(--color-fg); text-decoration: none; font-size: 16px;
}
.mehr-link:hover { background: var(--color-hover); }
.mehr-link[aria-current="page"] { background: var(--color-active); }
.mehr-link svg { width: 20px; height: 20px; color: var(--color-faint-fg); }

/* ==================== Inhalt ==================== */

.view {
  flex: 1 1 auto;
  min-height: 100svh;   /* Fusszeile von Anfang an unter dem Rand: sonst springt sie beim Laden (Layout-Verschiebung) */
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

.loading { color: var(--color-faint-fg); padding: 12px 0; }

.foot {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
@media (max-width: 767.98px) {
  .shell { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .foot { display: none; }
  .toasts { bottom: calc(72px + env(safe-area-inset-bottom)); }
  font-size: 12px;
  color: var(--color-faint-fg);
  text-align: center;
  border-top: 1px solid var(--color-border);
}

/* ---------- Seitenkopf: ein Titel, ein Satz, rechts die Knöpfe ---------- */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.page-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.page-subtitle { margin: 2px 0 0; font-size: 13px; color: var(--color-muted-fg); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ---------- Raster und Kennzahlen ---------- */

.grid { display: grid; gap: 16px; }
.grid-1 { grid-template-columns: 1fr; }
/* minmax(0, 1fr): eine breite Tabelle scrollt in ihrer Karte, statt die Spalte über den Rand zu schieben */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Kennzahlen: eine Fläche, Haarlinien dazwischen (1px Lücke auf Linienfarbe trennt auch beim Umbruch) */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 20px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 1023.98px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599.98px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .kpi-row .stat { padding: 10px 12px; }
  .kpi-row .stat-value { font-size: 20px; }
}

.stat {
  min-height: var(--tap);
  background: var(--color-card);
  padding: 12px 16px;
  display: grid;
  gap: 2px;
  align-content: start;
}

.stat-label { font-size: 13px; font-weight: 500; color: var(--color-muted-fg); }
.stat-value { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-card-fg); font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 13px; font-weight: 500; color: var(--color-faint-fg); margin-right: 4px; letter-spacing: 0; }
.stat-hint { font-size: 12px; color: var(--color-faint-fg); }

/* Farbe nur, wo sie etwas heisst: Handlungsbedarf. Gut und neutral bleiben Schrift. */
.stat-warn .stat-value { color: var(--color-warn); }
.stat-bad .stat-value { color: var(--color-bad); }

/* ---------- Karten / Abschnitte: flach, Haarlinie, kein Schatten ---------- */

.card {
  background: var(--color-card);
  color: var(--color-card-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 16px;
}

.card > h2 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.card > * + * { margin-top: 10px; }

.note { margin: 0; color: var(--color-muted-fg); font-size: 13px; }

/* Hinweis im Kopf (z. B. Postfach neu verbinden): schliessbar, kein Popup */
.notice {
  box-sizing: border-box;
  width: calc(min(1280px, 100%) - 32px);   /* gleiche Flucht wie der Inhalt (.view: 16px Rand) */
  margin: 16px auto 0;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  font-size: 14px;
  background: var(--color-warn-bg);
  color: var(--color-warn);
  border: 1px solid currentColor;
  border-radius: var(--radius);
}
.notice[hidden] { display: none; }

/* Vorschläge unter Eingabefeldern (ui.choices) */
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.choices:empty { display: none; }
.choice { font-weight: 500; max-width: 100%; overflow-wrap: anywhere; }
.notice-text { margin: 0; flex: 1 1 260px; font-weight: 500; overflow-wrap: anywhere; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.empty {
  padding: 28px 16px;
  color: var(--color-faint-fg);
  font-size: 13px;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.card .empty { border: 0; padding: 20px 0; }

.error-card { border-color: var(--color-destructive); }

/* ---------- Buttons: 32px mit Maus, 44px auf Touch, Haarlinie, ein Primär je Ansicht ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  color: var(--color-fg);
  background: var(--color-muted);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn svg { width: 16px; height: 16px; }
.btn[aria-pressed="true"] svg { fill: currentColor; } /* gesetzter Stern (Hauptkontakt) */

.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn-ghost { background: var(--color-card); border-color: var(--color-border); color: var(--color-fg); }
.btn-danger { background: var(--color-destructive); color: var(--color-on-destructive); }

.btn:hover { background: var(--color-active); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-accent:hover { background: var(--color-accent-hover); }
.btn-ghost:hover { background: var(--color-hover); }
.btn-danger:hover { filter: brightness(0.92); }
.btn:active:not([disabled]) { filter: brightness(0.96); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Filter als Text-Reiter mit Zähler (ui.filter) ---------- */

.filter-zeile {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 4px;
}
.filter-zeile > select { margin-bottom: 6px; width: auto; max-width: 240px; min-height: calc(var(--tap) - 4px); font-size: 13px; }
.filter {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filter::-webkit-scrollbar { display: none; }
.filter-tab { flex: 0 0 auto; white-space: nowrap; }
.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 10px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-muted-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.filter-tab:hover { color: var(--color-fg); }
.filter-tab[aria-pressed="true"] { color: var(--color-fg); border-bottom-color: var(--color-fg); }
.filter-zahl {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-faint-fg);
  background: var(--color-muted);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.filter-tab[aria-pressed="true"] .filter-zahl { color: var(--color-fg); }
@media (max-width: 599.98px) {
  .filter-zeile { flex-wrap: wrap; gap: 6px; }
  .filter-zeile > select { flex: 1 1 100%; max-width: none; margin: 0 0 8px; order: -1; }
}

/* ---------- Status (Pill mit Punkt), Zähler (Badge), Kategorie (Tag) ---------- */

.badge, .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-s);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
}

.badge-ok, .pill-ok, .pill-approved, .pill-placed { background: var(--color-ok-bg); color: var(--color-ok); }
.badge-warn, .pill-warn, .pill-pending { background: var(--color-warn-bg); color: var(--color-warn); }
.badge-bad, .pill-bad, .pill-rejected { background: var(--color-bad-bg); color: var(--color-bad); }
.badge-info, .pill-info, .pill-proposed { background: var(--color-info-bg); color: var(--color-info); }
.badge-neutral, .pill-neutral, .pill-none { background: var(--color-neutral-bg); color: var(--color-neutral); }

.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-s);
  background: var(--color-muted);
  color: var(--color-muted-fg);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
}

.schublade-hinter { position: fixed; inset: 0; background: var(--color-overlay); z-index: var(--z-ebene); }
/* Breite je Bereich über --schublade-breite (Projekte 720px, Rechnungen 760px, Direkte Offerten 820px) */
.schublade {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--schublade-breite, 760px), 100vw);
  display: flex; flex-direction: column; background: var(--color-card); box-shadow: var(--shadow-drawer);
  border-left: 1px solid var(--color-border);
  z-index: calc(var(--z-ebene) + 1);
}
@media (max-width: 679.98px) { .schublade { width: 100vw; border-left: 0; } }

/* ---------- Formulare ---------- */

.form { display: grid; gap: 12px; }

.field { display: grid; gap: 4px; }

.field > label { font-size: 13px; color: var(--color-muted-fg); font-weight: 500; }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-card);
  color: var(--color-card-fg);
  font: inherit;
  font-size: 16px; /* verhindert Zoom auf iOS */
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Jedes Eingabefeld, auch in den Bereichen (border … var(--color-border)), bekommt den kräftigeren Rand */
input, select, textarea { --color-border: var(--color-input-border); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--color-fg); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-ring-soft);
}

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  /* ui-erlaubt: Pfeil des Auswahlfelds, zwei Dreiecke ohne Bild */
  background-image: linear-gradient(45deg, transparent 50%, var(--color-faint-fg) 50%), linear-gradient(135deg, var(--color-faint-fg) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.textarea { min-height: 96px; resize: vertical; }

.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Tabellen: flach, 40px-Zeilen, Haarlinien; schmal als Karten ---------- */

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.tbl th, .tbl td {
  text-align: left;
  vertical-align: middle;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
}

.tbl th {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-faint-fg);
  white-space: nowrap;
}
.tbl td { border-bottom-color: var(--color-border-2); height: 40px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td:first-child, .tbl th:first-child { padding-left: 4px; }
.tbl td:last-child, .tbl th:last-child { padding-right: 4px; }

.tbl .ta-r { text-align: right; }
.tbl .ta-c { text-align: center; }

.tbl .cell { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 100%; }
.tbl .ta-r .cell { justify-content: flex-end; }
/* Ein Text, der in der Zeile bleibt: abgeschnitten mit «…», die Schublade zeigt ihn ganz */
.tbl .trunc { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.tbl .row-click { cursor: pointer; transition: background-color 120ms ease; }
.tbl .row-click:hover, .tbl .row-click:focus-visible { background: var(--color-hover); }

/* Schmaler als 1280px: enger, damit acht Spalten noch nebeneinander passen */
@media (max-width: 1279.98px) {
  .tbl th, .tbl td { padding-left: 6px; padding-right: 6px; }
  .tbl .trunc { max-width: 180px; }
}

/* Auch ab 1024px bleibt .tbl-wrap ein Scroll-Container (overflow-x: auto oben):
   overflow-x: clip wuerde breite Tabellen (z. B. Bauprogramm mit Kalender-Spalte
   und Freigabe-Aktionen) rechts unerreichbar abschneiden. Dafuer klebt der
   Tabellenkopf nicht mehr am Seitenkopf. */

@media (max-width: 719.98px) {
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }

  .tbl tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 4px 12px;
    margin: 0 0 8px;
    background: var(--color-card);
  }

  .tbl td {
    display: grid;
    grid-template-columns: minmax(88px, 36%) 1fr;
    gap: 8px;
    height: auto;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border-2);
  }

  .tbl td:last-child, .tbl tbody tr:last-child td { border-bottom: 0; }
  .tbl tbody tr:last-child td:not(:last-child) { border-bottom: 1px solid var(--color-border-2); }

  .tbl td::before {
    content: attr(data-label);
    color: var(--color-faint-fg);
    font-size: 12px;
    padding-top: 2px;
  }

  .tbl td:first-child { grid-template-columns: 1fr; font-weight: 500; padding-top: 10px; }
  .tbl td:first-child::before { display: none; }
  .tbl td.ta-r, .tbl td.ta-c { text-align: left; }
  .tbl .ta-r .cell { justify-content: flex-start; }
  .tbl .trunc { max-width: 100%; white-space: normal; }
  .tbl td.cell-actions { grid-template-columns: 1fr; }
  .tbl td.cell-actions::before { display: none; }
}

/* ---------- Toast ---------- */

.toasts {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: var(--z-meldung);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-height: var(--tap);
  max-width: 560px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--color-fg);
  color: var(--color-bg);
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  border-left: 5px solid var(--color-neutral);
}

.toast-text { flex: 1 1 auto; }
.toast-aktion {
  flex: 0 0 auto;
  min-height: var(--tap);
  margin: -10px -6px -10px 12px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--toast-info);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.toast-zu {
  flex: 0 0 auto;
  width: var(--tap);
  min-height: var(--tap);
  margin: -10px -14px -10px 4px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.toast-ok { border-left-color: var(--toast-ok); }
.toast-warn { border-left-color: var(--toast-warn); }
.toast-bad { border-left-color: var(--toast-bad); }
.toast-info { border-left-color: var(--toast-info); }

/* ---------- Dialoge ---------- */

.dlg {
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.5);
  padding: 18px;
  width: min(92vw, 420px);
  background: var(--color-card);
  color: var(--color-card-fg);
  box-shadow: var(--shadow-pop);
}

.dlg::backdrop { background: rgba(11, 22, 64, 0.5); }

.dlg p { margin: 0 0 16px; font-size: 16px; }

.dlg .dlg-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dlg .dlg-actions .btn { flex: 1 1 120px; }

.dlg-modal { width: min(94vw, 520px); }
.dlg-modal .dlg-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.dlg-modal .dlg-body { margin: 0 0 16px; }
.dlg-modal .dlg-actions .btn { flex: 0 1 auto; min-width: 120px; }

/* ---------- Kleinigkeiten ---------- */

.muted { color: var(--color-faint-fg); }
.small { font-size: 13px; }
.stack { display: grid; gap: 10px; }

/* ---------- Bereich Offerten: Status-Chip im Seitenkopf ---------- */

.offerten-status { display: inline-flex; align-items: center; }

/* ---------- Startkarte: die ersten Schritte ---------- */

.intro-steps {
  margin: 12px 0 0;
  padding-left: 22px;
  font-size: 14px;
  color: var(--color-muted-fg);
}

.intro-steps li { margin: 0 0 12px; }
.intro-steps li:last-child { margin-bottom: 0; }
.intro-steps strong { display: block; color: var(--color-card-fg); font-weight: 600; }

/* ---------- Segmentierte Auswahl (z. B. Tag | Woche | Monat) ---------- */

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-muted);
  border-radius: var(--radius);
}
.seg-btn {
  min-height: calc(var(--tap) - 6px);
  min-width: var(--tap);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-muted-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.seg-btn[aria-pressed="true"] { background: var(--color-card); color: var(--color-fg); box-shadow: var(--shadow-card); }

/* ---------- Bereich Termine: Kalender (termine.js) ---------- */

/* Der Kalender braucht Breite: Inhalt hier bis 1600px statt 1200px */
.view:has(> .view-root[data-section="termine"]) { max-width: 1600px; }

/* ---------- Bereich Offerten: eingebettetes Offert-Tool (offerten-tool.js) ---------- */

/* Die Positionstabelle braucht Breite wie der Kalender */
.view:has(> .view-root[data-section="offerten"] .offerten-tool) { max-width: 1600px; }
/* Shadow-Wirt: kein eigener Rahmen, kein Innen-Scroll, das Tool fliesst in der Seite wie jeder
   Bereich (die Formensprache im Schatten regelt offer-ui.css, Block «Eingebettet im Cockpit») */
.offerten-tool { display: block; }

.kal {
  --balken-h: 24px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "hinweise" "seite" "body";
}
@media (pointer: coarse) { .kal { --balken-h: 28px; } }

.kal-kopf { grid-area: kopf; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kal-titel { margin: 0 8px 0 0; font-size: 24px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kal-titel-kurz { display: none; }
.kal-luecke { flex: 1 1 0; }
.kal-rund { width: var(--tap); padding: 0; border-radius: 50%; }
.kal-filter-btn[aria-expanded="true"] { background: var(--color-primary-tint); color: var(--color-primary-ink); border-color: transparent; }
.kal-neu svg, .kal-filter-btn svg { width: 18px; height: 18px; }

.kal-hinweise { grid-area: hinweise; display: grid; gap: 8px; }
.kal-hinweise:empty { display: none; }
.kal-hinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 8px 8px 14px;
  background: var(--color-info-bg); color: var(--color-info);
  border-radius: var(--radius);
  font-size: 14px; font-weight: 600;
}
.kal-hinweis > span:not(.kal-hinweis-icon) { flex: 1 1 220px; }
.kal-hinweis-warn { background: var(--color-bad-bg); color: var(--color-bad); }
.kal-hinweis-icon { display: inline-flex; }
.kal-hinweis .btn { background: var(--color-card); }

.kal-body {
  grid-area: body;
  min-width: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Seitenleiste: ab 1280px fest rechts, darunter über «Filter» ein- und ausklappbar */
.kal-seite {
  grid-area: seite;
  display: none;
  align-content: start;
  gap: 18px;
  padding: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.kal-seite[data-offen="true"] { display: grid; }
.kal-gruppe { display: grid; gap: 2px; align-content: start; }
.kal-gruppe h2 { margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--color-faint-fg); }
.kal-gruppe .seg { justify-self: start; }
.kal-check {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap);
  padding: 0 6px;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}
.kal-check:hover { background: var(--color-muted); }
.kal-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); flex: 0 0 auto; }
.kal-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--ev, var(--color-faint-fg)); flex: 0 0 auto; }
.kal-legende { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.kal-legende li { display: flex; align-items: center; gap: 8px; }
.kal-nur-schmal { display: none; }

/* Minikalender: 7 Spalten zu 44px */
.kal-mini { display: grid; gap: 4px; justify-self: center; width: 100%; max-width: 320px; }
.kal-mini-kopf { display: flex; align-items: center; gap: 4px; }
.kal-mini-kopf strong { flex: 1 1 auto; font-size: 14px; padding-left: 6px; }
.kal-mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-mini-wt { font-size: 12px; font-weight: 600; color: var(--color-faint-fg); text-align: center; padding: 4px 0; }
.kal-mini-tag {
  height: 40px; min-width: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--color-fg);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (pointer: coarse) { .kal-mini-tag { height: 44px; } }
.kal-mini-tag:hover { background: var(--color-muted); }
.kal-mini-tag.kal-im-bereich { background: var(--color-primary-tint); color: var(--color-primary-ink); border-radius: 0; }
.kal-mini-tag.kal-fremd { color: var(--color-faint-fg); font-weight: 400; }
.kal-mini-tag.kal-heute-tag { background: var(--color-primary); color: var(--color-on-primary); border-radius: 50%; }

/* Eintrag: getönte Fläche, farbiger Rand links, Text in Kartenfarbe (Kontrast unabhängig von der Farbe) */
.kal-ev {
  --ev: #64748B;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  padding: 2px 6px;
  border: 0;
  border-left: 3px solid var(--ev);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--ev) 15%, var(--color-card));
  color: var(--color-card-fg);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease;
}
.kal-ev:hover { background: color-mix(in srgb, var(--ev) 25%, var(--color-card)); }
/* Ziehen: kein Textmarkieren und kein iOS-Kontextmenü beim langen Drücken */
.kal-ev { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kal-q-termin.kal-ev-block, .kal-q-termin.kal-ev-balken { cursor: grab; }
.kal-ev.kal-zieht { z-index: 5; cursor: grabbing; opacity: 0.92; box-shadow: var(--shadow-pop); transition: none; }
/* Griff zum Verlängern: nur mit der Maus (termine.js), auf Touch ändert man das Ende im Formular */
.kal-griff { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; cursor: ns-resize; touch-action: none; }
.kal-griff::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 24px; height: 3px; margin-left: -12px; border-radius: var(--radius-s); background: var(--ev); opacity: 0; transition: opacity 150ms ease; }
.kal-ev-block:hover .kal-griff::after, .kal-griff:focus-visible::after { opacity: 0.7; }
.kal-ziel { background: var(--color-primary-tint) !important; outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.kal-ev > span, .kal-ev-text > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-ev-titel { font-weight: 600; }
.kal-ev-zeit, .kal-ev-sub { color: var(--color-muted-fg); }
.kal-q-aufgabe { border-left-style: dashed; background: color-mix(in srgb, var(--ev) 8%, var(--color-card)); }
/* Abwesend: schraffiert wie «Unavailable» bei Roofr */
.kal-q-abwesenheit {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ev) 22%, var(--color-card)) 0 6px, var(--color-card) 6px 12px);
  color: var(--color-muted-fg);
}
.kal-q-abwesenheit .kal-ev-titel { font-weight: 600; }

/* Outlook/Google je Termin: Adresse, Stand, ggf. Fehler und «Jetzt eintragen» */
.kal-sync-liste { display: grid; gap: 8px; }
.kal-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kal-sync-adr { font-size: 14px; overflow-wrap: anywhere; }
.kal-sync-fehler { flex-basis: 100%; font-size: 13px; color: var(--color-bad); overflow-wrap: anywhere; }
.kal-chip-abwesend { padding: 0 8px; border-radius: 999px; background: var(--color-warn-bg); color: var(--color-warn); font-size: 12px; font-weight: 600; }

.kal-ev-balken { flex-direction: row; align-items: center; gap: 6px; margin: 1px 3px; height: calc(var(--balken-h) - 2px); }
.kal-ev-balken .kal-ev-zeit { flex: 0 0 auto; }
.kal-ev-balken .kal-ev-titel { flex: 0 1 auto; }
.kal-ev-balken .kal-ev-sub { flex: 1 1 0; font-size: 12px; }   /* Projekt weicht zuerst, der Titel bleibt lesbar */
.kal-ev-balken.kal-offen-l { border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.kal-ev-balken.kal-offen-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }

.kal-ev-block { position: absolute; padding: 3px 6px; gap: 1px; }
.kal-ev-block.kal-ev-kurz { flex-direction: row; gap: 6px; align-items: flex-start; padding-top: 2px; padding-bottom: 0; }
.kal-ev-kurz .kal-ev-zeit { flex: 0 0 auto; }
.kal-ev-kurz .kal-ev-sub { display: none; }

.kal-mehr {
  min-width: 0;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--color-primary-ink);
  font: inherit; font-size: 13px; font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  align-self: start;
  position: relative; z-index: 1;
}
@media (pointer: coarse) { .kal-mehr { min-height: var(--tap); } }

.kal-konflikt-marke {
  display: inline-flex; align-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-bad-bg); color: var(--color-bad);
  font-size: 12px; font-weight: 600;
}

/* Monat */
.kal-wt { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--color-border); }
.kal-wt > div { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--color-faint-fg); text-transform: uppercase; letter-spacing: 0.04em; }
.kal-mreihe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 132px; border-bottom: 1px solid var(--color-border); }
.kal-mreihe:last-child { border-bottom: 0; }
.kal-mtag { display: flex; align-items: flex-start; gap: 2px; padding: 0 4px 4px 0; border-right: 1px solid var(--color-border); cursor: pointer; min-width: 0; }
.kal-mtag.kal-letzte { border-right: 0; }
.kal-mtag:hover { background: color-mix(in srgb, var(--color-muted) 50%, transparent); }
.kal-mtag.kal-fremd { background: var(--color-bg); }
/* Tagesnummer: 44px-Ziel, sichtbar nur der kleine Kreis darin */
.kal-mtag-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  padding: 0; border: 0;
  background: transparent; color: var(--color-fg);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.kal-kreis { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; }
.kal-mtag-nr:hover .kal-kreis { background: var(--color-muted); }
.kal-fremd .kal-mtag-nr { color: var(--color-faint-fg); font-weight: 600; }
.kal-heute-tag .kal-kreis, .kal-heute-tag .kal-mtag-nr:hover .kal-kreis { background: var(--color-primary); color: var(--color-on-primary); }
.kal-mtag .kal-konflikt-marke { margin-top: 13px; }

/* Woche und Tag: Kopf, Ganztags-Zeile und Stunden mit derselben Spaltenvorlage */
.kal-raster-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kal-raster { --gutter: 66px; --spalte-min: 84px; min-width: calc(var(--gutter) + var(--spalten) * var(--spalte-min)); }
.kal-raster-tag { --spalte-min: 160px; }
.kal-rzeile { display: grid; grid-template-columns: var(--gutter) repeat(var(--spalten), minmax(var(--spalte-min), 1fr)); }
.kal-rkopf { border-bottom: 1px solid var(--color-border); }
.kal-rkopf-tag {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px;
  min-height: 56px; min-width: 0;
  padding: 8px 10px;
  border: 0; border-left: 1px solid var(--color-border);
  background: transparent; color: var(--color-fg);
  font: inherit; text-align: left;
  cursor: pointer;
}
.kal-rkopf-tag:hover { background: var(--color-muted); }
.kal-rkopf-wt { font-size: 12px; font-weight: 600; color: var(--color-faint-fg); text-transform: uppercase; letter-spacing: 0.04em; }
.kal-rkopf-nr { font-size: 24px; font-weight: 600; line-height: 1.1; }
.kal-rkopf-tag.kal-heute-tag { background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.kal-rkopf-tag.kal-heute-tag .kal-rkopf-nr { color: var(--color-primary-ink); }
.kal-rkopf-tag .kal-konflikt-marke { flex-basis: auto; }

.kal-person { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 56px; padding: 8px 10px; border-left: 1px solid var(--color-border); }
.kal-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ev, var(--color-faint-fg)) 18%, var(--color-card));
  color: var(--color-card-fg);
  border: 2px solid var(--ev, var(--color-faint-fg));
  font-size: 12px; font-weight: 600;
}
.kal-person-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kal-rganztag { grid-auto-rows: var(--balken-h); padding: 4px 0; min-height: calc(var(--balken-h) + 8px); border-bottom: 1px solid var(--color-border); }
.kal-gutter-text { grid-column: 1; grid-row: 1; align-self: center; padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--color-faint-fg); overflow-wrap: anywhere; }
.kal-rganztag .kal-mehr { align-self: center; }

.kal-stunden { position: relative; }
.kal-stunde { height: 48px; padding: 0 8px; font-size: 12px; color: var(--color-faint-fg); text-align: right; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.kal-stunde:first-child { visibility: hidden; }
.kal-spalte {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--color-border);
  background-image: linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 100% 48px;
  cursor: pointer;
}
.kal-heute-spalte { background-color: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.kal-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--color-destructive); z-index: 2; pointer-events: none; }
.kal-jetzt::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-destructive); }

/* Liste (Telefon) */
.kal-agenda { display: grid; }
.kal-ag-tag { padding: 10px 12px 12px; border-bottom: 1px solid var(--color-border); }
.kal-ag-tag:last-child { border-bottom: 0; }
.kal-ag-kopf { display: flex; align-items: center; gap: 10px; min-height: var(--tap); }
.kal-ag-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 16px; font-weight: 600;
}
.kal-heute-tag .kal-ag-nr { background: var(--color-primary); color: var(--color-on-primary); }
.kal-ag-wt { flex: 1 1 auto; font-weight: 600; color: var(--color-muted-fg); }
.kal-ag-neu { width: var(--tap); padding: 0; border-color: transparent; }
.kal-ag-liste { display: grid; gap: 6px; padding-left: 46px; }
.kal-ag-leer { margin: 0; padding-left: 46px; color: var(--color-faint-fg); font-size: 14px; }
.kal-ev-zeile { flex-direction: row; gap: 12px; min-height: 52px; padding: 8px 12px; font-size: 14px; border-left-width: 4px; border-radius: var(--radius); }
.kal-ev-wann { flex: 0 0 auto; width: 92px; color: var(--color-muted-fg); font-size: 13px; font-weight: 600; white-space: normal !important; }
.kal-ev-text { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.kal-ev-zeile .kal-ev-sub { font-size: 13px; }

/* Monat auf dem Telefon: Punkte statt Balken */
.kal-kmonat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 6px; border-bottom: 1px solid var(--color-border); }
.kal-ktag {
  display: grid; justify-items: center; align-content: start; gap: 3px;
  min-height: 52px; min-width: 0;
  padding: 4px 0;
  border: 0; border-radius: var(--radius);
  background: transparent; color: var(--color-fg);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kal-ktag-nr { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 600; }
.kal-ktag.kal-fremd { color: var(--color-faint-fg); }
.kal-ktag.kal-heute-tag .kal-ktag-nr { color: var(--color-primary-ink); box-shadow: inset 0 0 0 2px var(--color-primary); }
.kal-ktag[aria-pressed="true"] .kal-ktag-nr { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
.kal-ktag.kal-konflikt-tag .kal-ktag-nr { text-decoration: underline wavy var(--color-bad); }
.kal-punkte { display: flex; gap: 3px; min-height: 6px; }
.kal-punkte .kal-punkt { width: 6px; height: 6px; }

/* Detail und Formular */
.kal-detail-art { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-muted-fg); }
.kal-kv { display: grid; grid-template-columns: 120px 1fr; gap: 8px; font-size: 14px; }
.kal-kv-l { color: var(--color-faint-fg); font-size: 14px; font-weight: 600; padding-top: 1px; }
.kal-kv-w { overflow-wrap: anywhere; white-space: pre-line; }
.kal-f-label { font-size: 13px; color: var(--color-muted-fg); font-weight: 600; }
.kal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kal-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap);
  padding: 0 14px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kal-chip input { position: absolute; opacity: 0; pointer-events: none; }
.kal-chip:has(input:checked) { border-color: var(--ev, var(--color-primary)); background: color-mix(in srgb, var(--ev, var(--color-primary)) 14%, var(--color-card)); }
.kal-chip:has(input:focus-visible) { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.kal-chip:not(:has(.kal-punkt))::before { content: ""; width: 16px; height: 16px; border-radius: var(--radius-s); border: 2px solid var(--color-faint-fg); flex: 0 0 auto; }
.kal-chip:not(:has(.kal-punkt)):has(input:checked)::before { background: var(--color-primary); border-color: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-card); }
.kal-schalter { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font-size: 14px; font-weight: 600; cursor: pointer; }
.kal-schalter input { width: 22px; height: 22px; margin: 0; accent-color: var(--color-primary); }
.kal-form-zeile { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.kal-form-zeile:has(> .kal-f-datum + .kal-f-datum) { grid-template-columns: 1fr 1fr; }
.kal-form .field { min-width: 0; }

.kal-fab { display: none; }

@media (min-width: 1280px) {
  .kal { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto 1fr; grid-template-areas: "kopf kopf" "hinweise seite" "body seite"; }
  .kal-hinweise:empty { display: block; }
  .kal-seite { display: grid; grid-row: 2 / span 2; }
  .kal-filter-btn { display: none; }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
  .kal-seite[data-offen="true"] { grid-template-columns: minmax(0, 320px) 1fr 1fr; align-items: start; }
}

@media (max-width: 767.98px) {
  .kal { padding-bottom: 72px; }
  .kal-titel { flex: 1 1 calc(100% - 120px); font-size: 20px; }
  .kal-titel-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .kal-titel-kurz { display: inline; }
  .kal-zurueck, .kal-weiter { order: 1; }
  .kal-heute-btn { order: 2; }
  .kal-seg { order: 3; flex: 1 1 auto; }
  .kal-seg .seg-btn { flex: 1 1 0; padding: 0 6px; }
  .kal-filter-btn { order: 4; width: var(--tap); padding: 0; }
  .kal-filter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .kal-luecke { display: none; }
  .kal-bp-btn { display: none; }   /* Bauprogramm: auf dem Telefon im Filter */
  .kal-neu { display: none; }
  .kal-nur-schmal { display: grid; }
  .kal-seite .kal-mini { display: none; }   /* das Telefon hat Monat und Pfeile, ein zweiter Kalender wäre doppelt */
  .kal-raster { --gutter: 56px; }
  .kal-gutter-text { font-size: 12px; padding: 0 3px; white-space: nowrap; }
  .kal-raster-tag { --spalte-min: 150px; }
  .kal-kv { grid-template-columns: 1fr; gap: 0; }
  .kal-form-zeile { grid-template-columns: 1fr 1fr; }
  .kal-form-zeile > .kal-f-datum:first-child:not(:only-child):not(:has(+ .kal-f-datum)) { grid-column: 1 / -1; }
  .kal-fab {
    display: inline-flex;
    position: fixed;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: var(--z-knopf);
    width: 56px; height: 56px;
    border-radius: 50%;
    padding: 0;
    box-shadow: var(--shadow-pop);
  }
  .kal-fab svg { width: 26px; height: 26px; }
}

/* Breite Dialoge (Tabellen, z. B. Bauprogramm) */
.dlg-modal.dlg-wide { width: min(96vw, 960px); }

/* ==================== Breakpoints der Schale ==================== */

/* 768-1023px: schmale Icon-Seitenleiste, Labels darunter */
@media (min-width: 768px) {
  .sidebar { display: flex; }
  .shell { margin-left: var(--sidebar-w-min); }
  .brand { display: none; }
  .tabs { display: none; }
  .top-row { padding: 6px 24px; flex-wrap: nowrap; }
  .view { padding: 24px 24px 56px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .sidebar { width: var(--sidebar-w-min); padding-left: 6px; padding-right: 6px; align-items: center; }
  .side-brand { padding: 4px 0 10px; }
  .side-brand-text { display: none; }
  .side-nav { justify-items: center; width: 100%; }
  /* Icon mit Beschriftung darunter: auf dem iPad gibt es kein Hover, ein Tooltip bliebe unsichtbar */
  .nav-item { flex-direction: column; justify-content: center; gap: 3px; width: 100%; min-height: 52px; padding: 6px 2px; }
  .nav-icon svg { width: 20px; height: 20px; }
  .nav-label { font-size: 12px; font-weight: 500; line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
  .side-user { display: none; }
}

/* >= 1200px: volle Seitenleiste, Benutzerkarte unten */
@media (min-width: 1200px) {
  .shell { margin-left: var(--sidebar-w); }
}

/* ---------- Druck ---------- */

@media print {
  .sidebar, .top, .foot, .skip-link, .toasts { display: none !important; }
  .view { min-height: 0; }
  .shell { margin: 0; }
  body { background: #fff; color: #000; }
  .card, .stat { box-shadow: none; break-inside: avoid; }
}

/* Benachrichtigungen (benachrichtigungen.js): Glocke in der Kopfzeile, Liste im Dialog */
.nb-glocke { position: relative; }
.nb-zahl { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--color-destructive); color: var(--color-on-destructive); font-size: 12px; font-weight: 600; line-height: 16px; text-align: center; }
.nb-zahl[hidden] { display: none; }
.nb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nb-eintrag { display: grid; gap: 2px; width: 100%; min-height: var(--tap); padding: 8px 10px; text-align: left; font: inherit; font-size: 14px; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--color-border-2); cursor: pointer; }
.nb-eintrag:hover { background: var(--color-hover); }
.nb-eintrag span { overflow-wrap: anywhere; }
.nb-eintrag small { color: var(--color-muted-fg); }
.nb-neu { font-weight: 500; }
@media (max-width: 767.98px) { .nb-glocke { order: 0; } }

/* ---------- Navigation in Gruppen (app.js NAV_GROUPS) ---------- */

.nav-group { display: grid; gap: 2px; width: 100%; }
.nav-group + .nav-group { margin-top: 10px; }
.nav-heading {
  padding: 12px 8px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-faint-fg);
}
/* iPad hochkant (schmale Seitenleiste): Titel passen nicht, eine Linie trennt die Gruppen */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .nav-group + .nav-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border); }
  .nav-heading { display: none; }
}

/* Nachkalkulation im Projekt-Teil «Controlling» (projekte.js, Schalter nachkalkulation) */
.nk { margin-top: 16px; border-top: 1px solid var(--line, #e5e7eb); padding-top: 12px; }
.nk h3 { margin: 0 0 8px; font-size: 14px; }
.nk .actions { margin: 12px 0; }

/* ==================== Bewegung, Platzhalter, Dichte ==================== */

:root { --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); }

.page-title, .card > h2 { text-wrap: balance; }

/* Knöpfe: kurzer Druck-Effekt (fühlt sich sofort an) */
.btn { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms var(--ease-out); }
.btn:active:not([disabled]) { transform: scale(0.98); }
.seg { border-color: var(--color-border); }

/* Schnell: neue Ansicht blendet in 160ms ein; «Lädt …» erscheint erst nach 300ms,
   kurze Ladezeiten blitzen so nicht auf. Nur Übergänge, keine Animationen. */
.view > * { transition: opacity 160ms var(--ease-out), translate 160ms var(--ease-out); }
@starting-style { .view > * { opacity: 0; translate: 0 4px; } }
.view > .loading { transition: opacity 150ms ease 300ms; }
@starting-style { .view > .loading { opacity: 0; } }
/* Platzhalter beim Laden (ui.skelett) */
.sk-seite { padding: 0; color: inherit; }
.sk { background: var(--color-muted); border-radius: var(--radius-s); }
.sk-text { height: 14px; width: 320px; max-width: 80%; margin-top: 8px; }
.sk-liste { display: grid; gap: 1px; margin-top: 16px; }
.sk-zeile { height: 40px; border-radius: 0; }
.sk-tafel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow: hidden; margin-top: 16px; }
.sk-spalte { display: grid; gap: 8px; align-content: start; }
.sk-kopf { height: 28px; width: 60%; }
.sk-karte { height: 104px; }
@media (prefers-reduced-motion: no-preference) { .sk { animation: sk-puls 1.4s ease-in-out infinite; } }
@keyframes sk-puls { 50% { opacity: 0.55; } }
/* Gleiche Seite lädt neu: die alte bleibt, nach 300 ms leicht gedämpft */
.view > .view-root[aria-busy="true"] { opacity: 0.6; transition: opacity 150ms ease 300ms; }
.dlg[open] { transition: opacity 160ms var(--ease-out), scale 160ms var(--ease-out); }
@starting-style { .dlg[open] { opacity: 0; scale: 0.98; } }

/* Mit Maus: dicht wie eine Desktop-App (32px-Ziele). Touch (iPad, iPhone) behält 44px (Regel 11). */
@media (hover: hover) and (pointer: fine) {
  :root { --tap: 32px; --feld-schrift: 14px; }
  body { font-size: 14px; }
  .input, .select, .textarea { font-size: 14px; }
  .tab, .nav-item { min-height: 32px; }
}

/* Projekt-Tafel: graue Bahnen, weisse Karten darauf (Regeln in projekte.js, hier nur Aussehen) */
.view .pb-col { background: var(--color-sidebar); border-color: transparent; box-shadow: none; }
.view .pb-col-kopf { border-bottom-color: transparent; }
.view .pb-card { transition: border-color 120ms ease; }
.view .pb-card:hover { border-color: var(--color-input-border); }

/* ---------- Assistent (assistent.js, Modul 00): Knopf unten rechts, Panel als Schublade oder Vollbild ---------- */

.as-knopf {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: var(--z-ebene);
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%;
  background: var(--color-card); color: var(--color-primary-ink); box-shadow: var(--shadow-pop); cursor: pointer;
  display: grid; place-items: center; transition: background 150ms ease, transform 150ms ease;
}
.as-knopf:hover { transform: translateY(-1px); }
.as-knopf:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.as-knopf svg { width: 20px; height: 20px; }
.as-panel {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(420px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  border: none; border-left: 1px solid var(--color-border); border-radius: 0; padding: 0;
  background: var(--color-card); color: var(--color-card-fg); box-shadow: var(--shadow-pop); z-index: calc(var(--z-ebene) + 1);
  display: none; grid-template-rows: auto auto 1fr auto; transition: transform 200ms ease;
}
.as-panel[open] { display: grid; }
.as-panel::backdrop { background: transparent; }
.as-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.as-kopf .btn { min-height: var(--tap); }
.as-titel { flex: 1; margin: 0; font-size: 16px; font-weight: 600; text-align: center; }
.as-hinweis { margin: 0; padding: 8px 16px; font-size: 13px; color: var(--color-muted-fg); background: var(--color-muted); }
.as-verlauf { overflow-y: auto; padding: 12px 16px; display: grid; gap: 10px; align-content: start; }
.as-leer { margin: 0 0 4px; color: var(--color-muted-fg); font-size: 14px; }
.as-vorschlaege { display: grid; gap: 8px; }
.as-chip, .as-quelle {
  min-height: var(--tap); padding: 8px 12px; text-align: left; font: inherit; font-size: 14px; color: inherit;
  background: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer;
}
.as-chip:hover, .as-quelle:hover { border-color: var(--color-primary); }
.as-blase { max-width: 92%; padding: 10px 12px; border-radius: var(--radius); font-size: 14px; line-height: 1.45; }
.as-frage { justify-self: end; background: var(--color-primary); color: var(--color-on-primary); }
.as-antwort { justify-self: start; background: var(--color-muted); color: var(--color-fg); display: grid; gap: 8px; }
.as-text { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.4em; }
.as-status { font-size: 13px; color: var(--color-muted-fg); }
.as-fehler { border: 1px solid var(--color-bad); }
.as-ungeprueft { border: 1px solid var(--color-warn); }
.as-quellen { display: flex; flex-wrap: wrap; gap: 6px; }
.as-quelle { background: var(--color-card); font-size: 13px; }
.as-bewertung { display: flex; gap: 6px; }
.as-daumen { min-height: var(--tap); padding: 6px 10px; font: inherit; font-size: 13px; color: var(--color-muted-fg); background: none; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; }
.as-daumen[aria-pressed="true"] { color: var(--color-primary); border-color: var(--color-primary); }
.as-form { display: grid; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-card); position: sticky; bottom: 0; }
.as-eingabe { width: 100%; min-height: var(--tap); padding: 10px 12px; font: inherit; font-size: 16px; color: inherit; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); resize: vertical; }
.as-knoepfe { display: flex; gap: 8px; justify-content: flex-end; }
.as-knoepfe .btn { min-height: var(--tap); }
@media (min-width: 768px) and (max-width: 1023.98px) { .as-panel { width: max(50vw, 380px); } }
@media (max-width: 767.98px) {
  .as-panel { inset: 0; width: 100vw; border-left: none; }
  .as-knopf { bottom: calc(72px + env(safe-area-inset-bottom)); right: 16px; }
  /* Kalender hat unten rechts schon «+»: Ziegli darüber */
  body:has(.view-root[data-section="termine"]) .as-knopf { bottom: calc(140px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .as-panel, .as-knopf { transition: none; } }
/* Assistent: Kontext-Zeile und Liste früherer Gespräche; Panel über den Schubladen (pb-drawer, rg-drawer: 41) */
.as-panel { z-index: calc(var(--z-ebene) + 2); }
.as-kontext { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--color-primary); }
.as-eintrag { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.as-datum { flex: none; font-size: 12px; color: var(--color-muted-fg); }

/* Schubladen der Bereiche (Projekte, Rechnungen, Direkte Offerten) und Assistent: nicht unter Notch und Home-Balken */
.pb-drawer, .rg-drawer, .do-drawer {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.as-panel { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
/* Schublade bekommt den Fokus beim Öffnen (ui.drawer, Schalter cockpit-ux2): kein Rahmen um die ganze Schublade */
.pb-drawer:focus, .rg-drawer:focus, .do-drawer:focus { outline: none; }   /* unten: .as-form */

/* Fokusziel nach dem Seitenwechsel (app.js): kein Rahmen um den Titel, er ist kein Bedienelement */
#view h1[tabindex="-1"]:focus, #view[tabindex="-1"]:focus { outline: none; }

/* Ladefehler mit «Erneut versuchen» (ui.ladeFehler) und Hinweis ohne Netz (app.js) */
.lade-fehler { display: grid; gap: 12px; justify-items: start; }
.lade-fehler p { margin: 0; }
.notice-offline { border-color: var(--color-warn); }

/* Fehler direkt am Feld (ui.feldFehler) */
.feld-fehler { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--color-bad); }
[aria-invalid="true"] { --color-border: var(--color-bad); }
/* Assistent: Ziegli (ziegli.js), Vorschlagskarte */
.as-hallo { display: flex; align-items: center; gap: 12px; }
.as-hallo .as-leer { margin: 0; }
.as-status { display: flex; align-items: center; gap: 8px; }
.as-karte { display: grid; gap: 10px; padding: 12px; background: var(--color-card); border: 1px solid var(--color-primary); border-radius: var(--radius); }
.as-zeile { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.as-zeile-kopf { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.as-ziel { font-size: 13px; color: var(--color-muted-fg); }
.as-feld { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; font-size: 14px; }
.as-feld-name { color: var(--color-muted-fg); font-size: 13px; }
.as-feld-input { min-height: var(--tap); padding: 6px 10px; font: inherit; font-size: 16px; color: inherit; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.as-feld-input[type="checkbox"] { width: var(--tap); justify-self: start; }
.as-ok strong { color: var(--color-ok); }
.as-nein strong, .as-zeile-fehler { color: var(--color-bad); }
.as-zeile-fehler { margin: 0; font-size: 13px; }
.as-karte-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.as-karte-knoepfe .btn { min-height: var(--tap); }
.zg { flex: none; }
.zg-winken .zg-arm { transform-box: fill-box; transform-origin: 0% 100%; animation: zg-wink 1.6s ease-in-out 2; }
.zg-denken .zg-punkte { animation: zg-puls 1.2s ease-in-out infinite; }
@keyframes zg-wink { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-14deg); } 50% { transform: rotate(8deg); } }
@keyframes zg-puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zg-arm, .zg-punkte { animation: none; } }
/* Assistent: Antwort-Chips (rueckfragen) */
.as-rueckfragen { display: flex; flex-wrap: wrap; gap: 6px; }
.as-rueckfragen .as-chip { background: var(--color-card); border-color: var(--color-primary); }
/* Assistent: Anleitung als Karte (Schritte und Bilder aus anleitungen/*.json) */
.as-schritte { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; }
.as-schritte li > * + * { margin-top: 6px; }
.as-bild { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius); }
.as-hinweis-klein { margin: 0; font-size: 13px; color: var(--color-muted-fg); }
/* Assistent: Einführung und Rundgang (data-tour="assistent-*") */
.as-einfuehrung { max-width: min(440px, calc(100vw - 32px)); }
.as-einfuehrung h2 { margin: 0; font-size: 20px; }
.as-tour {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: calc(var(--z-ebene) + 3); width: min(340px, calc(100vw - 32px));
  display: grid; gap: 8px; padding: 14px; background: var(--color-card); color: var(--color-card-fg);
  border: 2px solid var(--color-primary); border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.as-tour p { margin: 0; font-size: 14px; }
.as-tour .as-tour-schritt { font-size: 12px; color: var(--color-muted-fg); }
.as-verlauf .as-tour { position: sticky; left: auto; bottom: auto; top: 0; width: auto; }
.as-tour-ziel { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius); }
@media (max-width: 767.98px) { body > .as-tour { bottom: auto; top: calc(16px + env(safe-area-inset-top)); } }

/* Schnellsuche (⌘K, Schalter cockpit-ux2) */
.ss-feld { width: 100%; box-sizing: border-box; }
.ss-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; max-height: min(60vh, 480px); overflow-y: auto; }
.ss-treffer { display: grid; gap: 2px; width: 100%; min-height: var(--tap); padding: 8px 12px; border: 0; border-radius: var(--radius); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ss-treffer[aria-selected="true"], .ss-treffer:hover { background: var(--color-muted); }
.ss-art { font-size: 12px; font-weight: 600; color: var(--color-muted-fg); }
.ss-titel { font-weight: 600; }
.ss-leer { color: var(--color-muted-fg); padding: 8px 12px; }
.dlg-suche { width: min(560px, calc(100vw - 32px)); }

/* Assistent, Oberfläche 2 (12.10.2026): Ziegli als Figur zum Verschieben, Panel als schwebende Karte rechts */
.as-knopf {
  width: auto; height: auto; padding: 4px 6px 2px; border: none; border-radius: var(--radius); background: transparent;
  box-shadow: none; display: grid; justify-items: center; gap: 0; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none; filter: drop-shadow(var(--shadow-pop));
}
.as-knopf svg { width: 56px; height: auto; pointer-events: none; }
.as-knopf:hover { transform: translateY(-2px); }
.as-knopf.as-zieht { cursor: grabbing; transform: scale(1.06); transition: none; }
.as-knopf-name {
  margin-top: -6px; padding: 1px 8px; font-size: 12px; font-weight: 600; color: var(--color-on-primary);
  background: var(--color-primary); border-radius: 999px; pointer-events: none;
}
.as-panel[open] ~ .as-knopf { display: none; }   /* offen: Ziegli sitzt im Kopf des Panels */

@media (min-width: 768px) {
  .as-panel {
    inset: 12px 12px 12px auto; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px);
    border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden;
  }
  .as-panel[open] { animation: as-rein 180ms ease-out; }
}
@keyframes as-rein { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .as-panel[open] { animation: none; } }

.as-kopf { gap: 4px; padding: 8px 8px 8px 12px; }
.as-wer { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.as-titel { text-align: left; font-size: 16px; line-height: 1.2; }
.as-unter { margin: 0; font-size: 12px; color: var(--color-muted-fg); }
.as-kopf-knopf {
  min-width: var(--tap); min-height: var(--tap); padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; font: inherit; font-size: 13px; color: var(--color-fg); background: none; border: none; border-radius: var(--radius); cursor: pointer;
}
.as-kopf-knopf:hover { background: var(--color-muted); }
.as-kopf-knopf:focus-visible { outline: 3px solid var(--color-ring); outline-offset: -3px; }
.as-kopf-knopf svg { width: 18px; height: 18px; }
@media (max-width: 420px) { .as-kopf-knopf span { display: none; } }   /* schmal: nur Symbole, Name bleibt im aria-label */
.as-hinweis { padding: 6px 16px; font-size: 12px; }

.as-verlauf { gap: 12px; }
.as-beispiele { margin: 8px 0 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted-fg); }
.as-chip { border-radius: var(--radius); }
.as-blase { border-radius: var(--radius); }
.as-frage { border-bottom-right-radius: var(--radius-s); }
.as-reihe { display: flex; align-items: flex-start; gap: 8px; justify-self: stretch; }
.as-reihe .as-antwort { max-width: calc(100% - 40px); border-top-left-radius: var(--radius-s); }
.as-avatar { flex: none; width: 32px; display: grid; justify-items: center; }
.as-avatar .zg-arm { animation: none; }

.as-form { gap: 4px; padding-top: 10px; }
.as-eingabe-box {
  display: flex; align-items: flex-end; gap: 6px; padding: 4px 4px 4px 12px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.as-eingabe-box:focus-within { border-color: var(--color-primary); }
.as-eingabe-box .as-eingabe {
  flex: 1; min-height: 36px; max-height: 160px; padding: 8px 0; border: none; background: transparent; resize: none; outline: none; line-height: 1.4;
}
.as-senden, .as-abbrechen {
  flex: none; min-width: var(--tap); height: var(--tap); padding: 0 12px; display: grid; place-items: center;
  font: inherit; font-size: 14px; font-weight: 600; border: none; border-radius: 999px; cursor: pointer;
}
.as-senden { background: var(--color-primary); color: var(--color-on-primary); }
.as-abbrechen { background: var(--color-muted); color: var(--color-fg); }
.as-senden[hidden], .as-abbrechen[hidden] { display: none; }
.as-tipp { margin: 0; padding-left: 12px; font-size: 12px; color: var(--color-muted-fg); }
@media (hover: none) { .as-tipp { display: none; } }   /* Telefon und Tablet: keine Enter-Taste im Sinn */