/* ============================================================
   Persönlicher Assistent — IBM Carbon Design System v11
   Dunkler g100 UI-Shell-Header + helles g10 Content.
   Layout-Glue + Chat + Login; Komponenten kommen aus app.css
   (kompiliertes @carbon/react). Farben = Carbon-Palette.
   ============================================================ */

:root {
  --header-h: 3rem;       /* 48px */
  --sidenav-w: 16rem;     /* 256px */
  --blue-60: #0f62fe;
  --blue-70: #0043ce;
  --g10: #f4f4f4;
  --g20: #e0e0e0;
  --g30: #c6c6c6;
  --g40: #a8a8a8;
  --g50: #8d8d8d;         /* border-strong: Unterkante der Carbon-Felder */
  --g60: #6f6f6f;
  --g70: #525252;
  --g90: #262626;
  --g100: #161616;
  --white: #ffffff;
  --text: #161616;
  --text-2: #525252;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--g10);
  -webkit-font-smoothing: antialiased;
}

/* ---- Header (g100, dunkel, fix) ---- */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  display: flex; align-items: center; gap: 0;
  background: var(--g100); color: #f4f4f4;
  border-bottom: 1px solid #393939; z-index: 8000;
}
.app-menu {
  display: none; width: var(--header-h); height: var(--header-h);
  background: none; border: 0; cursor: pointer; color: #f4f4f4;
  align-items: center; justify-content: center; padding: 0;
}
.app-menu:hover { background: #2c2c2c; }
.app-name {
  display: flex; align-items: center; height: 100%; padding: 0 1rem;
  color: #f4f4f4; text-decoration: none; font-size: 14px; font-weight: 600;
  letter-spacing: .01em;
}
.app-name__prefix { font-weight: 400; }

/* ---- Side-Nav (hell, fix links) ---- */
.app-sidenav {
  position: fixed; top: var(--header-h); bottom: 0; left: 0; width: var(--sidenav-w);
  background: var(--white); border-right: 1px solid var(--g20);
  z-index: 7000; overflow-y: auto;
  display: flex; flex-direction: column;
}
.app-sidenav ul.nav-main { list-style: none; margin: 0; padding: .5rem 0; }
.nav-foot { margin-top: auto; border-top: 1px solid var(--g20); padding: .25rem 0 .5rem; }
.side-user { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem .35rem; }
.side-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--g20); object-fit: cover; }
.side-avatar--ph { background: var(--blue-60); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; border: 0; }
.side-user-meta { overflow: hidden; flex: 1; min-width: 0; }
.side-user-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-mail { font-size: 12px; color: var(--g60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-logout { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--g60); flex-shrink: 0; }
.side-logout:hover { background: var(--g10); color: var(--text); }
.side-link {
  display: flex; align-items: center; gap: .75rem; height: 2.5rem; padding: 0 1rem;
  color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 400;
  border-left: 3px solid transparent; transition: background .11s;
}
.side-link .nav-ico { flex-shrink: 0; color: var(--g60); }
.side-link:hover .nav-ico, .side-link.current .nav-ico { color: var(--blue-60); }
.side-link:hover { background: #e8e8e8; color: var(--text); }
.side-link.current {
  background: var(--g20); color: var(--text); font-weight: 600;
  border-left-color: var(--blue-60);
}

/* ---- Content ---- */
.app-content {
  margin-top: var(--header-h); margin-left: var(--sidenav-w);
  min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h));
}
.content-inner { padding: 1.5rem 2rem 3rem; max-width: 1584px; }
.page-title { margin: .25rem 0 1.5rem; font-size: 28px; font-weight: 400; line-height: 36px; color: var(--text); }
/* Überschriftzeile: Titel links, optionale Kennzahlen (React-Portal) rechts. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.page-head .page-title { flex: 0 1 auto; }
.page-aside:empty { display: none; }

/* ---- React-Insel-Helfer ---- */
.view { width: 100%; }
.muted { color: var(--g60); }
.mono { font-family: var(--font-mono); font-size: 12px; }
.detail { color: var(--text-2); }

/* Unterlängen (g, y, p, j) nicht abschneiden: Carbons Reset setzt die Basis-
   line-height auf 1.0, und eigene einzeilige overflow:hidden-Textzellen erben
   das → die Glyph-Unterlänge wird geclippt. Diesen Zellen genug Zeilenhöhe geben. */
.reisen .rt-grid, .reisen .rt-bgrid,
.floor-name, .room-name, .haus-card-floor,
.obs .dur-name, .obs .msg-preview,
.photos .person-card .pc-mail,
.scans .scan-title-cell .stc-sum,
.side-user-name, .side-user-mail { line-height: 1.4; }

/* Carbon-Tabellen volle Breite */
.cds--data-table-container { width: 100%; }

/* Belegungen — aktuelle Zeile grün */
.row-current td.cds--table-column-checkbox,
.row-current td { background: #defbe6 !important; }
.row-current:hover td { background: #bef5cd !important; }


/* Belegungen — Kalender/Liste-Umschalter + Jahres-Kalender (Buchungsmanager-Stil) */
.belegungen .bel-switch { margin-bottom: 1rem; }
.ycal { padding: 1.25rem 1.5rem; }
.ycal-nav { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.ycal-range { font-size: 20px; font-weight: 600; color: var(--text); min-width: 14rem; }
.ycal-today { margin-left: auto; }
.ycal-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 2.25rem; }
@media (max-width: 900px) { .ycal-months { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ycal-months { grid-template-columns: 1fr; } }
.mm-title { text-align: center; font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
.mm-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.mm-wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--g60); padding: 2px 0 4px; }
.mm-wd.we { color: #c0bcb4; }
.mm-d { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text); background-clip: padding-box; }
.mm-d.out { visibility: hidden; }
.mm-d > span { position: relative; z-index: 1; }
.mm-d.today > span { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  outline: 2px solid var(--blue-60); border-radius: 999px; font-weight: 600; }
.ycal-legend { margin-top: 1.25rem; display: flex; gap: 1.25rem; font-size: 12px; color: var(--g60); }
.ycal-legend .lg { display: inline-flex; align-items: center; }
.ycal-legend .sw { width: 13px; height: 13px; border-radius: 2px; display: inline-block; margin-right: .4rem; vertical-align: middle; }
.mm-d.busy { cursor: default; }
/* Samstags-Wechsel (gleichzeitige An-/Abreise) rot markiert */
.mm-d.mark-red > span { color: #da1e28; font-weight: 700; }

/* Hover-Popover für Buchungen im Kalender */
.bcal-pop { position: fixed; z-index: 9000; pointer-events: none; background: var(--white); color: var(--text);
  border: 1px solid var(--g20); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); padding: .6rem .8rem;
  min-width: 12rem; max-width: 17rem; font-size: 13px; line-height: 1.45; }
.bcal-pop-name { font-weight: 600; margin-bottom: .25rem; }
.bcal-pop-row { display: flex; align-items: center; gap: .4rem; color: var(--text-2); }
.bcal-pop .dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }
.bcal-pop-note { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--g10); color: var(--g60); font-style: italic; }

/* Haus — Statuskarten pro Etage */
.haus-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.haus-card { padding: 1rem 1.25rem; cursor: pointer; border-left: 3px solid transparent; transition: background .11s; }
.haus-card:hover { background: #e8e8e8; }
.haus-card.has-on { border-left-color: #f1c21b; background: #fdf3d0; }
.haus-card.has-on:hover { background: #f8ebbf; }
.haus-card-floor { font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.haus-card-stat { display: flex; align-items: baseline; gap: .4rem; margin-top: .25rem; }
.haus-card-stat .num { font-size: 28px; font-weight: 300; line-height: 1; }
.haus-card-stat .den { font-size: 13px; color: var(--g60); }

/* Haus — globale Aktionen unter den Karten */
.haus-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }

/* Haus — Toolbar */
.haus-toolbar { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.haus-toolbar .cds--search { flex: 1; }

/* Haus — Raster (Kopf + Geräte-Zeilen, gleiche Spalten) */
.device-head, .device-row {
  display: grid; grid-template-columns: 3.5rem minmax(9rem, 1fr) 8rem 12rem 9rem;
  align-items: center; gap: .5rem; padding: 0 1rem;
}
.device-head {
  height: 2.25rem; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text-2);
  background: var(--g10); border-bottom: 1px solid var(--g30);
}
.device-row { min-height: 3rem; background: var(--white); border-bottom: 1px solid var(--g20); }
.device-row:hover { background: #f2f2f2; }
.device-row.on { background: #fdf3d0; }        /* hellgelb, wenn an */
.device-row.on:hover { background: #f8ebbf; }
.dc { min-width: 0; }
.dc-name { font-size: 14px; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dc-name .row-loc { display: inline-flex; gap: .25rem; }
.haus-cover { display: flex; gap: .25rem; }
.dc-ctrl { display: flex; align-items: center; gap: .75rem; }
.dc-ctrl .cds--slider { min-width: 6rem; max-width: 8rem; }
.haus-bright { display: flex; align-items: center; gap: .5rem; }
.haus-bright .cds--progress-bar { flex: 1; min-width: 3rem; }
.haus-bright .pct { width: 2.6rem; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }

/* Haus — kleinen Toggle ohne Begleittext (fixt doppelte erste Spalte) */
.haus .cds--toggle__text { display: none; }

/* Haus — Gruppen-Header Etage / Raum */
.floor-row, .room-row { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--g20); }
.grp-expand {
  display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: inherit; padding: 0;
}
.grp-toggle { flex-shrink: 0; display: flex; align-items: center; }
.floor-row { height: 2.75rem; padding: 0 1rem; background: #eaeaea; font-size: 14px; font-weight: 600; color: var(--text); }
.floor-row:hover { background: #e0e0e0; }
.floor-row.on { background: #fdf3d0; }
.floor-row.on:hover { background: #f8ebbf; }
.floor-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-row { height: 2.5rem; padding: 0 1rem 0 2.25rem; background: var(--g10); font-size: 13px; font-weight: 600; color: var(--text-2); }
.room-row:hover { background: #ececec; }
.room-row.on { background: #fdf3d0; color: var(--text); }
.room-row.on:hover { background: #f8ebbf; }
.room-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floor-row .chev, .room-row .chev { transition: transform .12s; fill: var(--g60); flex-shrink: 0; }
.floor-row .chev.open, .room-row .chev.open { transform: rotate(90deg); }

@media (max-width: 720px) {
  .device-head, .device-row { grid-template-columns: 3rem 1fr auto; gap: .4rem; }
  .dc-kind, .dc-bright { display: none; }
}

/* Observability */
.obs .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.obs .stat { padding: 1rem 1.25rem; }
.obs .stat-label { font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); }
.obs .stat-value { font-size: 32px; font-weight: 300; line-height: 40px; margin-top: .25rem; }
.obs .stat-sub { font-size: 12px; color: var(--g60); margin-top: .25rem; }
.obs .dur-panel { padding: 1.25rem; margin-bottom: 1rem; }
.obs .dur-title { font-size: 14px; font-weight: 600; margin-bottom: 1rem; }
.obs .dur-list { display: grid; grid-template-columns: minmax(140px, 240px) 1fr minmax(150px, auto); gap: .5rem 1rem; align-items: center; }
.obs .dur-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs .dur-meta { font-size: 12px; color: var(--text-2); text-align: right; font-family: var(--font-mono); }
.obs .dur { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.obs .dur-high { color: #da1e28; }
.obs .dur-mid { color: #8e6a00; }
.obs .dur-low { color: var(--g60); }
.obs .obs-filter { min-width: 11rem; }

/* Observability — Chat-Turns (aufklappbar) */
.obs .nowrap { white-space: nowrap; }
.obs .user-cell { display: inline-flex; align-items: center; gap: .5rem; }
.obs .user-cell .chan { font-size: 11px; color: var(--g60); text-transform: uppercase; letter-spacing: .03em; }
.obs .msg-preview { max-width: 28rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.obs .turn-detail { padding: 1rem 0 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.obs .turn-metrics { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 13px; color: var(--text-2); }
.obs .turn-metrics span { display: inline-flex; align-items: center; gap: .35rem; }
.obs .turn-metrics b { color: var(--text); font-weight: 600; }
.obs .turn-tools { display: flex; flex-wrap: wrap; gap: .4rem; }
.obs .turn-msg { display: flex; flex-direction: column; gap: .35rem; max-width: 64rem; }
.obs .turn-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--g60); }
.obs .turn-text { background: var(--white); border-left: 3px solid var(--g30); padding: .6rem .85rem; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.obs .table-foot { display: flex; align-items: center; justify-content: space-between; padding: .5rem .25rem; }

/* Observability — Dokumente-Workflow */
.obs .wf { padding-top: .5rem; }
.obs .flow-row { display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; }
.obs .flow-step { flex: 1 1 160px; background: var(--white); border: 1px solid var(--g20); padding: 1rem; text-align: center; }
.obs .flow-step.ok { border-color: #a7f0ba; background: #defbe6; }
.obs .flow-step.err { border-color: #ffb3b8; background: #fff1f1; flex: 0 0 140px; }
.obs .flow-step .fs-ico { color: var(--g70); display: flex; justify-content: center; }
.obs .flow-step.ok .fs-ico { color: #198038; }
.obs .flow-step.err .fs-ico { color: #da1e28; }
.obs .flow-step .fs-n { font-size: 30px; font-weight: 300; line-height: 1.1; margin-top: .2rem; }
.obs .flow-step .fs-l { font-size: 12px; color: var(--text-2); margin-top: .2rem; }
.obs .flow-step .fs-path { font-size: 11px; font-family: var(--font-mono); color: var(--g60); margin-top: .35rem; overflow-wrap: anywhere; line-height: 1.3; }
.obs .flow-arrow { display: flex; align-items: center; color: var(--g50); }

/* Observability — Charts */
.obs .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.obs .chart-tile { padding: 1rem 1.25rem; min-width: 0; }
@media (max-width: 980px) { .obs .chart-grid { grid-template-columns: 1fr; } }

/* Observability — Filter-Pills über „Alle Events" */
.obs .obs-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.obs .pill {
  border: 1px solid; background: transparent; border-radius: 999px;
  padding: .3rem .9rem; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; line-height: 1.2; transition: background .11s, color .11s;
}
.obs .pill:hover { background: rgba(0,0,0,.04); }
.obs .pill.active:hover { filter: brightness(1.05); }

/* Users */
.users .form-tile { padding: 1.25rem; margin-bottom: 1rem; }
.users .form-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 1rem; }
.users .user-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.users .user-form .cds--form-item { flex: 0 1 14rem; }

/* Settings */
.settings .settings-tile { padding: 1.5rem; max-width: 60rem; }
.settings .settings-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.settings .settings-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.settings .settings-desc { font-size: 14px; color: var(--text-2); margin: 0 0 1.25rem; line-height: 20px; }
.settings .prompt-area textarea { font-family: var(--font-mono) !important; font-size: 13px; line-height: 1.5; }
.settings .settings-actions { display: flex; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }
.settings .model-select { max-width: 28rem; }
.settings .bg-drop {
  border: 2px dashed var(--g30); background: var(--g10); cursor: pointer;
  padding: 1.25rem; display: flex; justify-content: center; align-items: center;
  transition: border-color .12s, background .12s; outline: none;
}
.settings .bg-drop:hover { border-color: var(--g60); }
.settings .bg-drop:focus-visible { outline: 2px solid var(--blue-60); outline-offset: 2px; }
.settings .bg-drop.drag { border-color: var(--blue-60); background: #edf5ff; }
.settings .bg-drop.busy { cursor: progress; opacity: .8; }
.settings .bg-drop-hint { display: flex; align-items: center; gap: .5rem; color: var(--g60); font-size: 14px; }

/* kleine Galerie-Thumbnails */
.settings .bg-gallery { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.settings .bg-thumb { position: relative; width: 110px; height: 72px; border: 1px solid var(--g20); overflow: hidden; background: var(--g10); }
.settings .bg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.settings .bg-thumb-del {
  position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; display: grid; place-items: center;
  background: rgba(22,22,22,.72); color: #fff; border: 0; cursor: pointer; padding: 0;
}
.settings .bg-thumb-del:hover { background: #da1e28; }
.settings .bg-thumb-del:disabled { opacity: .5; cursor: default; }

/* Users — Owner-Markierung */
.users .user-name-cell { display: inline-flex; align-items: center; gap: .5rem; }

/* Users — Capability-Pills */
.users .form-caps { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }
.users .form-caps-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.cap-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.cap-pill {
  border: 1px solid var(--g30); background: transparent; color: var(--g60);
  border-radius: 999px; padding: .2rem .6rem; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1.3; transition: all .1s;
}
.cap-pill:hover:not(.ro) { border-color: var(--blue-60); color: var(--blue-60); }
.cap-pill.on { background: var(--blue-60); color: #fff; border-color: var(--blue-60); }
.cap-pill.ro { cursor: default; opacity: .75; }
.cap-pill.ro.on { background: #8a3ffc; border-color: #8a3ffc; }

/* ---- Foto Backup ---- */
/* Personen-Karten: eine Kachel je Benutzer mit Foto-Freigabe; die aktive Karte
   bestimmt, wessen Backup unten angezeigt wird. */
.photos .person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.photos .person-card {
  display: flex; align-items: flex-start; gap: .85rem; text-align: left; width: 100%;
  padding: 1rem 1.1rem; background: var(--white); border: 1px solid var(--g20);
  border-left: 3px solid transparent; cursor: pointer; font: inherit; transition: background .11s, border-color .11s;
}
.photos .person-card:hover { background: var(--g10); }
.photos .person-card.active { border-color: var(--blue-60); border-left-width: 3px; background: #edf5ff; }
.photos .person-card .pc-avatar {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--g20);
  color: var(--text); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
.photos .person-card.active .pc-avatar { background: var(--blue-60); color: #fff; }
.photos .person-card.agg .pc-avatar { background: #393939; color: #fff; font-size: 18px; }
.photos .person-card.agg.active .pc-avatar { background: var(--blue-60); }
.photos .person-card .pc-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.photos .person-card .pc-name { font-size: 15px; font-weight: 600; color: var(--text); }
.photos .person-card .pc-mail { font-size: 12px; color: var(--g60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photos .person-card .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .45rem; flex-wrap: wrap; }
.photos .person-card .pc-stats { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.photos .person-card .pc-stats b { font-weight: 600; color: var(--text); }
.photos .person-card .pc-state { display: flex; align-items: center; gap: .35rem; font-size: 12px; color: var(--g60); white-space: nowrap; }
.photos .person-card .pc-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--g40, #a8a8a8); display: block; }
.photos .person-card .pc-state.ok i { background: #24a148; }
.photos .person-card .pc-state.run i { background: var(--blue-60); }
.photos .person-card .pc-state.warn i { background: #f1c21b; }

.photos .person-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .6rem; flex-wrap: wrap; }
.photos .person-head .ph-name { font-size: 18px; font-weight: 600; }
.photos .person-head .ph-sub { font-size: 12.5px; color: var(--g60); font-family: var(--font-mono); }

.photos .disk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.photos .disk-card { padding: 1.1rem 1.25rem; }
.photos .disk-card.vol { background: #edf5ff; }
.photos .disk-head { display: flex; align-items: center; gap: .5rem; color: var(--text-2); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.photos .disk-model { font-size: 14px; font-weight: 600; margin-top: .5rem; overflow-wrap: anywhere; }
.photos .disk-cap { font-size: 26px; font-weight: 300; line-height: 1.1; margin-top: .35rem; }
.photos .disk-cap .of { font-size: 15px; color: var(--g60); }
.photos .disk-sub { font-size: 12px; color: var(--g60); margin-top: .35rem; overflow-wrap: anywhere; }
.photos .vol-bar { height: 8px; background: #d0e2ff; margin-top: .6rem; overflow: hidden; }
.photos .vol-fill { display: block; height: 100%; background: var(--blue-60); }


.photos .photos-empty { padding: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; color: var(--g60); }
.photos .photos-empty .pe-title { font-size: 16px; font-weight: 600; color: var(--text); }
.photos .photos-empty .pe-sub { font-size: 14px; max-width: 40rem; }
.photos .photos-empty code { background: var(--g10); padding: .1rem .35rem; font-family: var(--font-mono); font-size: 12.5px; }
/* Foto-Backup: Einrichtung + Account-Steuerung (Phase 3b) */
.photos .photos-setup, .photos .account-card { padding: 1.25rem; }
.photos .photos-setup .pe-title { font-size: 16px; font-weight: 600; color: var(--text); }
.photos .photos-setup .pe-sub { font-size: 13.5px; color: var(--g60); }
.photos .setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
/* Der NAS-Ordner wird in der Benutzerverwaltung gepflegt — hier nur Anzeige. */
.photos .setup-folder { display: flex; flex-direction: column; gap: .15rem; padding-top: .1rem; }
.photos .setup-folder .sf-label { font-size: 12px; color: var(--text-2); }
.photos .setup-folder .sf-value { font-family: var(--font-mono); font-size: 13px; padding: .55rem 0; border-bottom: 1px solid var(--g30, #c6c6c6); overflow-wrap: anywhere; }
.photos .setup-folder .sf-link { font-size: 12px; color: var(--blue-60); margin-top: .35rem; }

/* Aufgeklappte Benutzerzeile: Foto-Ordner pflegen */
.users .user-photos { padding: 1rem 0 .5rem; }
.users .user-photos .up-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--text-2); margin-bottom: .75rem; }
.users .user-photos .up-hint { font-size: 13px; color: var(--g60); }
.users .user-photos .up-grid { display: grid; grid-template-columns: minmax(220px, 20rem) minmax(240px, 1fr) auto; gap: 1.5rem; align-items: start; }
.users .user-photos .up-meta { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: baseline; font-size: 13px; }
.users .user-photos .up-lbl { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; }
.users .user-photos .up-val { overflow-wrap: anywhere; }
.users .user-photos .up-val.mono { font-family: var(--font-mono); font-size: 12.5px; }
@media (max-width: 860px) { .users .user-photos .up-grid { grid-template-columns: 1fr; gap: 1rem; } }
.photos .acc-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 14px; }
.photos .pill-wrap { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.photos .sync-panel { margin-top: .5rem; padding: .75rem; background: var(--g10); }
.photos .sync-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.photos .sync-metric { display: flex; flex-direction: column; }
.photos .sync-metric .sm-val { font-size: 20px; font-weight: 600; color: var(--text); line-height: 1.2; }
.photos .sync-metric .sm-lbl { font-size: 12px; color: var(--g60); text-transform: uppercase; letter-spacing: .02em; }
.photos .sync-err { margin-top: .5rem; font-size: 13px; color: #da1e28; }
.photos .sync-hint { margin-top: .4rem; font-size: 12px; color: var(--g60); }
.photos .year-tree { display: flex; flex-direction: column; }
.photos .year-row {
  display: flex; align-items: center; gap: .6rem; width: 100%; height: 3rem; padding: 0 1rem;
  background: #eaeaea; border: 0; border-bottom: 1px solid var(--g20); cursor: pointer; font: inherit; text-align: left;
}
.photos .year-row:hover { background: #e0e0e0; }
.photos .year-name { font-size: 16px; font-weight: 600; color: var(--text); }
.photos .year-meta { margin-left: auto; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.photos .year-row .chev { color: var(--g60); flex-shrink: 0; transition: transform .12s; }
.photos .year-row .chev.open { transform: rotate(90deg); }
.photos .month-list { background: var(--white); border-bottom: 1px solid var(--g20); }
.photos .month-row { display: grid; grid-template-columns: 9rem 1fr 11rem; align-items: center; gap: 1rem; padding: .5rem 1rem .5rem 2.5rem; border-top: 1px solid var(--g10); }
.photos .month-name { font-size: 14px; }
/* Mitte der Monatszeile: linke Hälfte Balken, rechte Hälfte Orts-Tags */
.photos .month-mid { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.photos .month-mid .month-bar { flex: 1 1 50%; }
.photos .month-mid .month-places { flex: 1 1 50%; min-width: 0; display: flex; align-items: center; gap: .35rem; overflow: hidden; }
.photos .month-places .cds--tag { max-width: 100%; }
.photos .month-bar { height: 8px; background: var(--g10); border-radius: 0; overflow: hidden; }
.photos .month-fill { display: block; height: 100%; background: var(--blue-60); }
.photos .month-meta { text-align: right; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .photos .month-row { grid-template-columns: 6rem 1fr auto; gap: .5rem; padding-left: 1.5rem; } }

/* ---- Dokumente-Scanner: Filter + Tabelle + DateRange ---- */
/* Kompakte Kennzahlen neben der Seitenüberschrift (statt der vier Kacheln). */
.doc-statline { display: flex; gap: 2rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 1.5rem; padding-bottom: 4px; }
.doc-statline .dsl-label { font-size: 12px; letter-spacing: .32px; text-transform: uppercase; color: var(--text-2); }
.doc-statline .dsl-value { font-size: 20px; font-weight: 400; line-height: 1.3; font-variant-numeric: tabular-nums; }
.doc-statline .dsl-sub { font-size: 12px; color: var(--text-2); margin-left: .35rem; }

/* Carbon-Tab-Panel hat 16px horizontales Padding → die Tabelle säße 16px weiter
   innen als Titel/Kennzahlen/Filter/Tab-Leiste. Padding raus, damit die Liste
   links UND rechts bündig mit dem Rest ausgerichtet ist. (scans + finanzen
   nutzen dasselbe Tabellen-in-Tabs-Muster.) */
.scans .cds--tab-content,
.fin .cds--tab-content { padding-left: 0; padding-right: 0; }

/* Filterleiste: weiße Fläche, Suche über vier Facetten-Dropdowns + Zeitraum. */
.scans .scan-filters { background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 1px; padding: 1px; margin-bottom: .75rem; }
.scans .scan-filters .sf-search .cds--search { width: 100%; }
.scans .scan-filters .sf-facets { display: flex; gap: 1px; flex-wrap: wrap; }
.scans .scan-filters .sf-facets > * { flex: 1 1 10rem; min-width: 8.75rem; }
/* Multiselect-Feld wie das Suchfeld: 48px, nur Unterkante. */
.scans .facet-select .cds--list-box { max-height: none; }
.scans .facet-select .cds--list-box__menu { min-width: 100%; width: max-content; max-width: 21rem; }
.scans .facet-opt { display: flex; align-items: center; gap: .75rem; width: 100%; }
.scans .facet-opt .fo-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scans .facet-opt .fo-count { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Umbuchungs-Toggle sitzt als schmales Feld rechts in der Facettenzeile. */
.fin .scan-filters .sf-facets .fin-transfer-toggle { flex: 1 1 12rem; min-width: 12rem; display: flex; align-items: center; padding: 0 1rem; background: var(--white); white-space: nowrap; }

/* Aktive Filter als entfernbare Tags. */
.scans .scan-activefilters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.scans .scan-activefilters .cds--tag { margin: 0; }
.scans .scan-activefilters .cds--btn--ghost { padding: 0 .5rem; min-height: 1.75rem; }

/* Tab-Zeile mit rechtsbündigem Primary-Button. */
.scans .scan-tabbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.scans .scan-tabbar .cds--tabs { flex: 1 1 auto; width: auto; min-width: 0; }
.scans .scan-tabbar > .cds--btn { flex: none; }
.scans .scan-title-cell .stc-title { font-size: 14px; font-weight: 600; }
.scans .scan-title-cell .stc-sum { font-size: 12px; color: var(--g60); max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scans .scan-actions { display: inline-flex; gap: .35rem; }
.scans .doc-act { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--g70); border: 1px solid var(--g20); text-decoration: none; }
.scans .doc-act:hover { background: var(--blue-60); color: #fff; border-color: var(--blue-60); }
.scans .nowrap { white-space: nowrap; }

/* daterangepicker-Stil */
.daterange { position: relative; display: flex; flex-direction: column; gap: .35rem; }
.daterange .dr-label { font-size: 12px; color: var(--text-2); }
.daterange .dr-label:empty { display: none; }
/* In der Dokumente-Filterleiste: gleiches Feld-Styling wie die Multiselects. */
.scans .sf-facets .daterange { flex: 1 1 12rem; min-width: 10rem; }
.scans .sf-facets .daterange .dr-trigger { min-width: 0; width: 100%; border: 0; border-bottom: 1px solid var(--g50); }
.scans .sf-facets .daterange .dr-trigger:hover { background: var(--g10); border-color: var(--g50); }
.scans .sf-facets .daterange .dr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daterange .dr-trigger {
  display: inline-flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 .8rem; min-width: 16rem;
  background: var(--white); border: 1px solid var(--g50); cursor: pointer; font: inherit; color: var(--text);
}
.daterange .dr-trigger:hover { border-color: var(--blue-60); }
.daterange .dr-text { flex: 1; text-align: left; }
.daterange .dr-caret { transition: transform .12s; }
.daterange .dr-caret.open { transform: rotate(180deg); }
.daterange .dr-pop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; display: flex;
  background: var(--white); border: 1px solid var(--g30); box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.daterange .dr-presets { display: flex; flex-direction: column; border-right: 1px solid var(--g20); padding: .35rem; min-width: 11rem; }
.daterange .dr-preset { text-align: left; background: none; border: 0; padding: .5rem .75rem; font: inherit; font-size: 13px; cursor: pointer; color: var(--text); }
.daterange .dr-preset:hover { background: var(--g10); }
.daterange .dr-preset.dr-clear { margin-top: .25rem; border-top: 1px solid var(--g20); color: var(--text-2); }
.daterange .dr-cal { padding: .75rem; }
@media (max-width: 640px) { .daterange .dr-pop { flex-direction: column; } .daterange .dr-presets { border-right: 0; border-bottom: 1px solid var(--g20); } }

/* ---- Dokumente-Scanner (aufklappbare Inline-Vorschau) ---- */
.scans .stc-title { font-size: 14px; font-weight: 600; }
/* sauberes Hover + klares Highlight der aufgeklappten (aktiven) Zeile */
.scans tbody tr:hover td { background: var(--g10); }
.scans tr.row-open td, .scans tr.row-open:hover td { background: #edf5ff !important; }
.scans tr.row-open td { border-bottom: 0; }
.scans .scan-detail { display: flex; flex-direction: column; }
.scans .scan-detail .doc-frame { width: 100%; height: 72vh; border: 0; background: #fff; display: block; }
.scans .scan-viewer { padding: 0; }
.scans .scan-meta { background: var(--white); border-bottom: 1px solid var(--g20); padding: 1rem 1.25rem; }
.scans .scan-summary { margin: 0 0 .6rem; font-size: 14px; line-height: 1.5; color: var(--text); }
.scans .scan-fields { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; font-size: 13px; color: var(--text-2); }
.scans .scan-fields b { color: var(--text); font-weight: 600; }
.scans .scan-tagrow { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

/* ---- Verschiebbare Spalten + feste Breiten ---- */
.scans .scans-table { table-layout: fixed; width: 100%; }
.scans .scans-table td.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kopfzeile einheitlich kräftig wie in Reisen: dunkleres Grau + Unterlinie. */
.scans .scans-table thead tr th { background: var(--g30); border-bottom: 1px solid var(--g50); }
.scans .scans-table th.rs-th { position: relative; padding-right: 0; }
.scans .scans-table th.rs-th .rs-sort {
  display: inline-flex; align-items: center; gap: .25rem; width: 100%;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; letter-spacing: inherit;
}
.scans .scans-table th.rs-th .rs-sort:hover { color: var(--blue-60); }
.scans .scans-table th.rs-th .rs-arrow { font-size: 10px; color: var(--g60); }
.scans .scans-table th.rs-th .col-resizer {
  position: absolute; top: 0; right: 0; width: 7px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 2;
}
.scans .scans-table th.rs-th .col-resizer::after {
  content: ""; position: absolute; top: 25%; right: 3px; width: 1px; height: 50%;
  background: var(--g30);
}
.scans .scans-table th.rs-th .col-resizer:hover::after,
.scans .scans-table th.rs-th .col-resizer:active::after { background: var(--blue-60); width: 2px; }

/* ---- Upload-Panel + Steuer-ZIP-Leiste ---- */
.scans .upload-tile { padding: 1.5rem; max-width: 46rem; margin-top: 1rem; }
.scans .upload-tile .upload-head { margin: 0 0 .35rem; font-size: 16px; font-weight: 600; }
.scans .doc-drop {
  border: 1.5px dashed var(--g40); border-radius: 4px; background: var(--g10);
  padding: 2.5rem 1rem; display: grid; place-items: center; cursor: pointer; transition: .12s;
}
.scans .doc-drop:hover { border-color: var(--g60); }
.scans .doc-drop:focus-visible { outline: 2px solid var(--blue-60); outline-offset: 2px; }
.scans .doc-drop.drag { border-color: var(--blue-60); background: #edf5ff; }
.scans .doc-drop.busy { cursor: progress; opacity: .8; }
.scans .doc-drop .bg-drop-hint { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--g70); font-size: 14px; }
.scans .tax-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.scans .tax-bar .tax-hint { font-size: 13px; color: var(--g70); }

/* ---- Finanzen ---- */
.fin .amt-pos { color: #198038; }
.fin .amt-neg { color: #da1e28; }
.fin .stat-value.amt-pos, .fin .stat-value.amt-neg { font-variant-numeric: tabular-nums; }
.fin .fin-table td.num, .fin .fin-table th.rs-th.num .rs-sort { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.fin .fin-table td.num { font-weight: 600; }
.fin .fin-detail .scan-fields { gap: .35rem 1.5rem; }
.fin .fin-chart { background: var(--white); border: 1px solid var(--g20); padding: 1rem 1.25rem; }
.fin .stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .fin .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Dokumente ---- */
.docs .docs-filters { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; width: 100%; margin-bottom: 1rem; }
.docs .docs-filters .cds--search { flex: 1 1 22rem; min-width: 14rem; }
.docs .doc-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.docs .doc-pills.quick { margin-bottom: 1rem; }
.docs .pill { border: 1px solid; background: transparent; border-radius: 999px; padding: .3rem .9rem; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1.2; transition: background .11s; }
.docs .pill:hover { background: rgba(0,0,0,.05); }
.docs .docs-count { font-size: 13px; color: var(--g60); margin: .5rem 0 1rem; }
.docs .docs-list { display: flex; flex-direction: column; }
.docs .doc-row { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; background: var(--white); border: 1px solid var(--g20); border-top: 0; }
.docs .doc-row:first-child { border-top: 1px solid var(--g20); }
.docs .doc-row:hover { background: var(--g10); }
.docs .doc-row.open { background: #edf5ff; border-color: var(--blue-60); }
.docs .doc-main { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; background: none; border: 0; cursor: pointer; font: inherit; color: var(--text); text-align: left; padding: .35rem 0; }
.docs .doc-chev { color: var(--g60); flex-shrink: 0; transition: transform .12s; }
.docs .doc-chev.open { transform: rotate(90deg); }
.docs .doc-ico { color: var(--g60); flex-shrink: 0; }
.docs .doc-texts { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.docs .doc-title { font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.docs .doc-meta { display: flex; gap: .75rem; font-size: 12px; line-height: 1.4; color: var(--g60); flex-wrap: wrap; }
.docs .doc-tags { display: flex; gap: .4rem; flex-shrink: 0; }
.docs .doc-act { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--g70); flex-shrink: 0; border: 1px solid var(--g20); text-decoration: none; }
.docs .doc-act:hover { background: var(--blue-60); color: #fff; border-color: var(--blue-60); }
.docs .docs-empty { padding: 3rem 1rem; text-align: center; color: var(--g60); background: var(--white); }
.docs .docs-empty .de-head { font-size: 16px; font-weight: 600; color: var(--text); }
.docs .docs-empty .de-sub { font-size: 14px; margin-top: .375rem; }
/* In-Page-Viewer */
.docs .doc-viewer { border: 1px solid var(--blue-60); border-top: 0; background: var(--g90); padding: .5rem; }
.docs .doc-frame { width: 100%; height: 80vh; border: 0; background: #fff; display: block; }
.docs .doc-viewer img { display: block; max-width: 100%; margin: 0 auto; background: #fff; }
.docs .doc-noview { padding: 2rem; text-align: center; color: #fff; }
.docs .doc-noview a { color: #78a9ff; }
@media (max-width: 720px) { .docs .doc-tags { display: none; } .docs .doc-frame { height: 70vh; } }

/* ---- Chat (Carbon-Look, vanilla JS) ---- */
.chat {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--g20); height: calc(100vh - var(--header-h) - 9rem);
  min-height: 24rem;
}
.messages { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.bubble { max-width: 74%; padding: .75rem 1rem; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.msg.assistant .bubble { background: var(--g10); color: var(--text); border: 1px solid var(--g20); }
.msg.user .bubble { background: var(--blue-60); color: #fff; }
.msg .via { display: block; margin-top: .25rem; font-size: 11px; opacity: .8; }
.msg .attachments { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; }
.msg .attachment { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .4rem .6rem; background: var(--white); border: 1px solid var(--g30); border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--blue-70); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .attachment:hover { border-color: var(--blue-60); background: #edf5ff; }
.msg.pending .bubble { opacity: .5; }
.composer { display: flex; gap: 0; border-top: 1px solid var(--g20); background: var(--white); }
.composer input {
  flex: 1; padding: 0 1rem; height: 3rem; border: 0; border-bottom: 1px solid var(--g60);
  background: var(--g10); color: var(--text); font-size: 14px; font-family: var(--font-sans); outline: none;
}
.composer input::placeholder { color: #8d8d8d; }
.composer input:focus { outline: 2px solid var(--blue-60); outline-offset: -2px; }
.composer button {
  height: 3rem; padding: 0 2.5rem 0 1rem; background: var(--blue-60); color: #fff; border: 0;
  font-size: 14px; font-weight: 400; cursor: pointer; font-family: var(--font-sans);
}
.composer button:hover { background: #0050e6; }
.composer input:disabled, .composer button:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Login ---- */
.login-body { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; background: var(--g10); padding: 1.5rem; position: relative; }
.login-body.has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.login-body.has-bg::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 0; }
.login-body.has-bg .login-card { position: relative; z-index: 1; box-shadow: 0 24px 64px rgba(0, 0, 0, .5); }
.login-card { background: var(--white); border: 1px solid var(--g20); padding: 3rem 2.5rem; width: 24rem; max-width: 100%; text-align: center; }
.login-card .brand-mark.big {
  width: 3rem; height: 3rem; background: var(--blue-60); color: #fff; display: grid; place-items: center;
  font-size: 22px; font-weight: 600; margin: 0 auto 1.5rem;
}
.login-card h1 { font-size: 24px; font-weight: 400; margin: 0 0 .5rem; color: var(--text); }
.subtitle { color: var(--text-2); margin: 0 0 2rem; font-size: 14px; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; height: 3rem;
  border: 1px solid var(--g60); background: var(--white); color: var(--text); font-size: 14px; font-weight: 400;
  text-decoration: none; transition: background .11s;
}
.google-btn:hover { background: var(--g10); }
.login-card .alert { margin-bottom: 1.25rem; text-align: left; }
.alert {
  background: #fff1f1; color: #750e13; border-left: 3px solid #da1e28;
  padding: .75rem 1rem; font-size: 14px;
}

/* ---- Mobile ---- */
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 6000; }
@media (max-width: 1055px) {
  .app-menu { display: flex; }
  .app-sidenav { transform: translateX(-100%); transition: transform .2s cubic-bezier(.2,0,.38,.9); box-shadow: 0 0 40px rgba(0,0,0,.3); }
  body.nav-open .app-sidenav { transform: none; }
  body.nav-open .nav-backdrop { display: block; }
  .app-content { margin-left: 0; }
  .content-inner { padding: 1rem 1rem 2rem; }
  .page-title { font-size: 22px; line-height: 28px; }
  .app-user { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Reisen — Status-Karten → Tabs, Reise-Tabelle mit Geldspalten, Aufgaben-Tabs.
   Größen bewusst wie bisher: Karten-Wert 32px, Trip-Zeile 14px, Buchung 13px,
   Meta 12px — die Vorlage ist teils kleiner, wird hier NICHT verkleinert. */

/* Kopfzeile: Untertitel links, Abgleich-Button rechts. */
.reisen .r-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.reisen .r-sub { font-size: 14px; color: var(--text-2); }

/* Status-Karten (klickbar, wechseln den Tab). */
.reisen .r-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.reisen .r-card { text-align: left; background: var(--white); padding: 1rem 1.25rem 1.1rem; border: 0; border-top: 3px solid #8d8d8d;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); cursor: pointer; font: inherit; color: var(--text); outline-offset: -2px; }
.reisen .r-card:hover { background: #f7f7f7; }
.reisen .r-card.active { outline: 2px solid var(--blue-60); }
.reisen .rc-head { display: flex; align-items: center; gap: .5rem; }
.reisen .rc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.reisen .rc-label { font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); }
.reisen .rc-value { font-size: 32px; font-weight: 300; line-height: 40px; margin-top: .5rem; }
.reisen .rc-unit { font-size: 14px; color: var(--text-2); font-weight: 400; }
.reisen .rc-hint { font-size: 12px; color: var(--g60); margin-top: .25rem; }
.reisen .rc-hint.red { color: #da1e28; font-weight: 600; }

/* Tab-Zählerbadges. */
.reisen .r-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 7px; margin-left: .5rem; border-radius: 10px; background: var(--g20); color: var(--text);
  font-size: 12px; font-weight: 400; }
.reisen .cds--tab--selected .r-badge { background: var(--g100); color: #fff; }
.reisen .cds--tab-content { padding-left: 0; padding-right: 0; }

/* Tabellen-Container (weiß, horizontal scrollbar). */
.reisen .r-table { background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.reisen .rt-scroll { overflow-x: auto; }

/* Reise-Tabelle: Trip-Grid und Buchungs-Grid teilen dieselben festen Spalten
   (20+200+96 vor der flexiblen Spalte), damit die Geldspalten exakt
   untereinander stehen. */
.reisen .rt-grid { min-width: 1000px; display: grid;
  grid-template-columns: 20px 200px minmax(200px, 1fr) 96px 96px 96px 96px; gap: 12px; align-items: center; }
.reisen .rt-bgrid { min-width: 1000px; display: grid;
  grid-template-columns: 20px 200px 96px minmax(200px, 1fr) 96px 96px 96px; gap: 12px; align-items: center; }
.reisen .rt-grid > .num, .reisen .rt-bgrid > .num { text-align: right; font-variant-numeric: tabular-nums; }

.reisen .rt-headrow { background: var(--g30); border-bottom: 1px solid var(--g50); height: 40px; padding: 0 16px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--g90); }
.reisen .rt-row { width: 100%; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--g20);
  background: var(--white); font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: var(--text); }
.reisen .rt-row:hover { background: #e8e8e8; }
.reisen .rt-row.open { background: #f7f7f7; }
.reisen .rt-chev { flex: none; transition: transform .15s; color: var(--g70); }
.reisen .rt-chev.open { transform: rotate(90deg); }
.reisen .rt-range { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reisen .rt-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reisen .rt-chip { display: inline-block; border-radius: 12px; padding: 1px 10px; font-size: 12px; white-space: nowrap; }
.reisen .rt-paid { color: var(--text-2); }
.reisen .rt-open.pos { font-weight: 600; color: var(--text); }
.reisen .rt-footrow { background: var(--g20); padding: 13px 16px; font-size: 14px; font-weight: 600; }
.reisen .rt-fcount { color: var(--g60); font-weight: 400; }

/* Aufgeklappte Buchungszeilen. */
.reisen .rt-book { background: #f7f7f7; border-bottom: 1px solid var(--g20); }
.reisen .rt-brow { padding: 9px 16px; border-top: 1px solid #e8e8e8; font-size: 13px; align-items: start; }
.reisen .rt-brow:hover { background: #ededed; }
.reisen .rb-date { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px; }
.reisen .rb-text { min-width: 0; }
.reisen .rb-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reisen .rb-meta { color: var(--g50); font-size: 12px; }
.reisen .rb-note { font-size: 12px; color: var(--g60); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reisen .rt-brow > .num { padding-top: 2px; white-space: nowrap; }
.reisen .rb-paid { color: var(--text-2); }
.reisen .rb-open.pos { font-weight: 600; color: var(--text); }
.reisen .rt-brow.cancelled { color: var(--g50); }
.reisen .rb-total.struck { text-decoration: line-through; }
.reisen .rt-empty { padding: 12px 16px 12px 48px; font-size: 13px; color: var(--text-2); }
.reisen .rt-empty--pad { padding: 16px; }

/* Aufgaben-Tabs (Entscheidungen / Ich schulde / Mir geschuldet). */
.reisen .rk-row { min-width: 640px; display: grid; grid-template-columns: 20px 110px 110px minmax(280px, 1fr) 32px; gap: 16px;
  align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--g20); font-size: 14px; }
.reisen .rk-row:hover { background: #e8e8e8; }
.reisen .rk-headrow { background: var(--g30); border-bottom: 1px solid var(--g50); font-weight: 600; color: var(--g90);
  align-items: center; }
.reisen .rk-headrow:hover { background: var(--g30); }
.reisen .rk-headrow .num { text-align: right; }
.reisen .rk-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; }
.reisen .rk-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.reisen .rk-date { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reisen .rk-date.overdue { color: #da1e28; font-weight: 600; }
.reisen .rk-title { line-height: 1.35; }
.reisen .rk-note { font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.reisen .rk-done { border: 0; background: transparent; cursor: pointer; color: var(--g50); font-size: 15px; line-height: 1; padding: 0; justify-self: center; }
.reisen .rk-done:hover { color: #24a148; }
.reisen .rk-foot { background: var(--g20); font-weight: 600; align-items: center; }
.reisen .rk-foot .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Zentrales Hirn (/gehirn) ---- */
.gehirn .stat-value.t-ok { color: #24a148; }
.gehirn .stat-value.t-err { color: #da1e28; }
.gehirn .stat-value.t-run { color: var(--blue-60); }
.gehirn .brain-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.gehirn .brain-job { padding: .85rem 1rem; }
.gehirn .brain-job.off { opacity: .55; }
.gehirn .bj-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gehirn .bj-name { font-size: 14px; font-weight: 600; font-family: var(--font-mono); }
.gehirn .bj-sched { font-size: 12px; color: var(--g60); }
.gehirn .bj-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--g40, #a8a8a8); margin-left: auto; flex: none; }
.gehirn .bj-dot.ok { background: #24a148; }
.gehirn .bj-dot.err { background: #da1e28; }
.gehirn .bj-dot.run { background: var(--blue-60); }
.gehirn .bj-note { font-size: 12.5px; color: var(--text-2); margin: .4rem 0 .5rem; line-height: 1.4; }
.gehirn .bj-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.gehirn .bj-meta { font-size: 12px; color: var(--g60); font-variant-numeric: tabular-nums; }
.gehirn .bj-err { color: #da1e28; }
.gehirn .bj-actions { display: flex; gap: .25rem; }
.gehirn .brain-rows { display: flex; flex-direction: column; margin-bottom: 1.5rem; }
.gehirn .brain-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 1rem; background: var(--white); border: 1px solid var(--g20); border-top: 0; font-size: 13px; }
.gehirn .brain-row:first-child { border-top: 1px solid var(--g20); }
.gehirn .brain-row .bj-dot { margin-left: 0; }
.gehirn .br-job { font-family: var(--font-mono); font-weight: 600; min-width: 12rem; }
.gehirn .br-trigger { color: var(--g60); font-size: 12px; min-width: 5rem; }
.gehirn .br-payload { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.gehirn .br-meta { color: var(--g60); font-size: 12px; margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.gehirn .brain-row.q-failed { background: #fff1f1; }
.gehirn .brain-empty { color: var(--g60); font-size: 13px; padding: .75rem 1rem; background: var(--white); border: 1px solid var(--g20); }
.gehirn .brain-convs { display: flex; flex-direction: column; }
.gehirn .conv-row { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem 1rem; background: var(--white); border: 1px solid var(--g20); border-top: 0; cursor: pointer; font: inherit; text-align: left; }
.gehirn .conv-group:first-child .conv-row { border-top: 1px solid var(--g20); }
.gehirn .conv-row:hover { background: var(--g10); }
.gehirn .conv-row .chev { color: var(--g60); transition: transform .12s; flex: none; }
.gehirn .conv-row .chev.open { transform: rotate(90deg); }
.gehirn .conv-who { font-weight: 600; }
.gehirn .conv-meta { color: var(--g60); font-size: 12.5px; margin-left: .5rem; }
.gehirn .conv-row .cds--tag { margin-left: auto; }
.gehirn .conv-summary { padding: .6rem 1rem .8rem 2.4rem; background: var(--g10); border: 1px solid var(--g20); border-top: 0; font-size: 13px; line-height: 1.5; }

/* Kontakte / Familien-CRM */
.kontakte .crm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kontakte .crm-table th { text-align: left; color: var(--g60); font-weight: 600; font-size: 12px; padding: .4rem .75rem; border-bottom: 1px solid var(--g20); }
.kontakte .crm-table td { padding: .5rem .75rem; background: var(--white); border-bottom: 1px solid var(--g20); vertical-align: top; }
.kontakte .crm-table tr:hover td { background: var(--g10); }
.kontakte .crm-table .cds--tag { margin-left: .4rem; }
.kontakte h4 { font-size: 14px; margin: 0 0 .4rem; }

/* Kontakte: Aktionen, Panel, Graphen */
.kontakte .crm-actions { display: flex; gap: 8px; margin: 0 0 1rem; flex-wrap: wrap; align-items: center; }
.kontakte .crm-actions .cds--text-input__field-wrapper { min-width: 340px; }
.kontakte .crm-flash { margin-bottom: 1rem; color: var(--text-2); }
.kontakte .crm-muted { color: var(--g60); }
.kontakte .crm-row-click { cursor: pointer; }
.kontakte .crm-card { background: var(--white); border: 1px solid var(--g20); padding: .7rem 1rem; margin-bottom: .6rem; }
.kontakte .crm-card-title { font-weight: 600; margin-bottom: .3rem; }
.kontakte .crm-legal { color: var(--g60); font-size: 12px; }
.kontakte .crm-graph-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--g20); padding: 1rem; }
.kontakte .crm-connect { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-bottom: .5rem; }
.kontakte .crm-connect .cds--select { min-width: 170px; }
/* Detail-Panel */
.crm-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 8000; }
.crm-panel { position: fixed; top: 0; right: 0; width: 380px; max-width: 92vw; height: 100vh; background: var(--white);
  border-left: 1px solid var(--g20); z-index: 8001; display: flex; flex-direction: column; box-shadow: -4px 0 16px rgba(0,0,0,.12); }
.crm-panel-head { display: flex; align-items: center; gap: .7rem; padding: 1rem; border-bottom: 1px solid var(--g20); }
.crm-panel-name { font-weight: 600; font-size: 15px; }
.crm-panel-body { padding: 1rem; overflow-y: auto; }
.crm-section { margin-bottom: 1rem; }
.crm-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--g60); margin-bottom: .3rem; }
.crm-section-body { font-size: 13px; line-height: 1.6; }
.crm-role { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.crm-edit .cds--text-input, .crm-edit .cds--text-area, .crm-edit .cds--select { margin-bottom: .5rem; }
.crm-addch { display: flex; gap: 8px; align-items: end; }

/* Kontakte: Personen-Seite + Dokumentengruppen (Iteration 3) */
.kontakte .crm-h { font-size: 14px; margin: 0 0 .6rem; }
.kontakte .crm-page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.kontakte .crm-person-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.kontakte .crm-person-name { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.kontakte .crm-person-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.kontakte .crm-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; align-items: start; max-width: 900px; }
.kontakte .crm-docgroup { margin-bottom: 1rem; }
.kontakte .crm-docgroup-title { font-weight: 600; font-size: 13px; margin: 0 0 .3rem; }
.kontakte .crm-role { padding: .1rem 0; }

/* Kontakte: Direkt-Aktionen (Iteration 4) */
.kontakte .crm-acts { display: inline-flex; align-items: baseline; white-space: nowrap; }
.kontakte .crm-act { text-decoration: none; font-size: 13px; color: var(--cds-link-primary, #0f62fe); }
.kontakte .crm-act:hover { text-decoration: underline; }
.kontakte .crm-act-sep { color: var(--g60); padding: 0 4px; }