/* BPMFab – Tokens und Bausteine nach DESIGN.md */
:root {
  /* Ruhiger, flacher Grund in Hellgrau; alle Flaechen darauf sind weiss. */
  --bg-base: #F2F2F2;
  --surface: #FFFFFF;
  --primary: #2F5BEA;
  --primary-soft: #D4DFF1; /* Hover und Auswahl, gleicher Ton wie pastel-blue */
  /* Gedeckte Pastellflaechen: Icon-Kacheln, Avatar, RASIC, Badges, Hover.
     Alle mit gleicher Staerke wie pastel-blue (Saettigung ~50 %, Helligkeit ~89 %),
     nur der Farbton wechselt. Darauf immer dunkle Schrift, nie weiss. */
  --pastel-blue: #D4DFF1;
  --pastel-green: #D4F1E2;
  --pastel-rose: #F1D4DB;
  --pastel-amber: #F1E6D4;
  --pastel-lilac: #E0D4F1;
  --pastel-cyan: #D4EEF1;
  --pastel-lime: #E3F1D4;
  --pastel-grey: #E3E3E3;
  --ink-900: #111318;
  --ink-600: #5B6270;
  --ink-400: #9AA1AE;
  --border: #E2E6EE;
  --status-high: #F2557A;
  --status-medium: #F5A524;
  --status-low: #2F5BEA;
  --status-ok: #2DBE7E;

  --radius-sm: 10px;
  --radius-md: 32px;
  --radius-lg: 40px;
  --radius-pill: 999px;

  /* Flach und ohne Rahmen: Flaechen heben sich nur durch Weiss auf Grau ab.
     Liegt ein Bedienelement in einer weissen Flaeche, bekommt es den grauen
     Grund (siehe "Weiss in Weiss" am Ende). Schatten nur fuer Schwebendes
     (Menues, Popups, Tooltips, KI-Eingabe). */
  --shadow-float: 0 12px 32px rgba(17, 19, 24, 0.10);
  --focus: 0 0 0 2px rgba(47, 91, 234, 0.4);
  --ease: 180ms ease-out;

  --font: "Plus Jakarta Sans", "General Sans", "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  /* iOS-artige, kontinuierliche Ecken (Squircle) für alle Formen.
     Browser ohne corner-shape zeigen normale Rundungen. */
  corner-shape: squircle;
}
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font: 500 13px/18px var(--font);
  color: var(--ink-600);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); }

/* Strichstaerke gilt im 24er-Raster der Icons und schrumpft mit der Groesse:
   1,5 waere bei 16 px nur 1 px – zu duenn neben Text mit Gewicht 500/600.
   Deshalb kleine Icons und Icons neben fetter Schrift kraeftiger. */
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 16px; height: 16px; stroke-width: 2; }
:is(.btn, .chip, .menu-item, .switcher, .toggle, .el-chip, .msg-tool) .icon { stroke-width: 2; }

/* Typo */
.display { font: 600 28px/32px var(--font); color: var(--ink-900); }
.h1 { font: 600 18px/24px var(--font); color: var(--ink-900); }
.h2 { font: 600 14px/20px var(--font); color: var(--ink-900); }
.caption { font: 500 11px/14px var(--font); color: var(--ink-600); }

/* Flächen */
/* .glass heisst noch so, ist aber eine weisse Flaeche wie alle anderen */
.glass {
  background: var(--surface);
  border-radius: var(--radius-lg);
}
.panel { padding: 24px; }
.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: box-shadow var(--ease);
}
.tile {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md); /* Farbfelder rund wie Buttons */
  background: var(--pastel-blue); color: var(--ink-900);
}
.tile.ok, .tile.green { background: var(--pastel-green); }
.tile.blue { background: var(--pastel-blue); }
.tile.lilac { background: var(--pastel-lilac); }
.tile.cyan { background: var(--pastel-cyan); }
.tile.lime { background: var(--pastel-lime); }
.tile.amber { background: var(--pastel-amber); }
.tile.rose { background: var(--pastel-rose); }
.tile.dark { background: var(--ink-900); color: #fff; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 0; border-radius: var(--radius-md);
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: box-shadow var(--ease), background var(--ease), opacity var(--ease);
}
.btn-primary { background: var(--ink-900); color: #fff; }
.btn-primary:hover { background: #2A2D35; }
.btn-secondary { background: var(--surface); color: var(--ink-900); }
.btn-secondary:hover { background: var(--primary-soft); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.4; box-shadow: none; pointer-events: none; }

/* Formular */
.field { display: grid; gap: 6px; align-content: start; }
.field > span { font: 500 11px/14px var(--font); color: var(--ink-600); }
.input {
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-900);
  font-size: 14px; /* auf iPhone/iPad 16 px, siehe Ende der Datei */
  transition: border-color var(--ease), box-shadow var(--ease);
}
.input::placeholder { color: var(--ink-400); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
.search { position: relative; }
.search .icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--ink-400); }
.search .input { padding-left: 38px; }
.form-error { color: #B3264A; font: 500 12px/16px var(--font); }

/* Chips und Badges */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: 40px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-900);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.chip:hover { background: var(--primary-soft); }
.chip[aria-pressed="true"] { background: var(--ink-900); color: #fff; }
.chip .count {
  min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--primary-soft); color: #2247C4;
  font: 600 11px/20px var(--font); text-align: center;
}
.chip[aria-pressed="true"] .count { background: rgba(255, 255, 255, 0.18); color: #fff; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font: 600 11px/14px var(--font); white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--pastel-green); color: #14704A; }
.badge.info { background: var(--primary-soft); color: #2247C4; }
.badge.warn { background: var(--pastel-amber); color: #855400; }
.badge.high { background: var(--pastel-rose); color: #B3264A; }

/* ---------- Login / Registrierung ---------- */
.auth {
  min-height: calc(100dvh - var(--env-bar-h));
  display: grid; place-items: center;
  padding: 24px 16px;
}
.auth-card { width: 100%; max-width: 400px; padding: 32px; display: grid; gap: 24px; }
.brand { display: flex; align-items: center; gap: 7px; }
/* Wortmarke "BPMfab" in Outfit, nur hier; sonst gilt --font */
.brand-name { font: 500 18px/22px "Outfit", var(--font); color: var(--ink-900); letter-spacing: -0.01em; }
.auth-form { display: grid; gap: 16px; }
.auth-foot { text-align: center; }
.auth-note { text-align: center; color: var(--ink-600); }

/* ---------- App-Rahmen ---------- */
/* Die Seite selbst scrollt nie: Kopfzeile steht fest, nur main scrollt.
   main reicht bis an den rechten Fensterrand, damit der Scrollbalken dort sitzt. */
.app {
  height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
  /* 16px Abstand unter dem Fensterrand bzw. unter dem Development-Streifen */
  padding: calc(var(--env-bar-h) + 16px) 0 0;
}
.app .topbar { flex: none; padding-inline: 16px; margin-bottom: 0; }
/* Inhalt mittig zwischen Navigation und rechtem Rand:
   Abstand zur Navigation = Abstand zum rechten Rand = --gap.
   Die sichtbaren Nav-Buttons enden 78px nach dem Fensterrand. */
.app { --gap: clamp(32px, 5vw, 72px); }
.app main {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 24px var(--gap) 32px calc(78px + var(--gap));
  /* Inhalt läuft unter der Kopfzeile weich aus statt hart abgeschnitten */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
}
.page-head, .view { max-width: 1120px; margin-inline: auto; }
.rail {
  position: fixed; left: 16px; top: var(--env-bar-h); bottom: 0; z-index: 10;
  width: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; /* nur die Buttons fangen Klicks */
}
.rail nav { display: flex; flex-direction: column; gap: 16px; pointer-events: auto; }
.logo { width: 26px; height: 26px; flex: none; fill: var(--ink-900); }
a.brand:hover { text-decoration: none; }
.topbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-head { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-title { min-width: 0; }
.page-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.page-actions:empty { display: none; }
.nav-link {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 11px/14px var(--font); color: var(--ink-600);
  border-radius: var(--radius-md);
}
.nav-link:hover { text-decoration: none; }
.nav-link .dot {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink-900);
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.nav-link:hover .dot { background: var(--primary-soft); }
.nav-link[aria-current="page"] { color: var(--ink-900); font-weight: 600; }
.nav-link[aria-current="page"] .dot { background: var(--ink-900); color: #fff; }

/* Beschriftung: nicht unter dem Button, sondern als Label rechts beim Hover / Tastaturfokus */
.nav-link { position: relative; }
.nav-link .label {
  position: absolute; left: calc(100% + 12px); top: 50%;
  /* kompakt, gleiche Rundung wie die Buttons */
  height: 32px; padding: 0 12px;
  display: flex; align-items: center;
  border-radius: var(--radius-md);
  background: var(--ink-900); color: #fff;
  font: 600 12px/16px var(--font); white-space: nowrap;
  box-shadow: var(--shadow-float);
  opacity: 0; transform: translate(-4px, -50%);
  pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
}
.nav-link:hover .label, .nav-link:focus-visible .label { opacity: 1; transform: translate(0, -50%); }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 24px; min-height: 48px;
}
.topbar .sub { margin-top: 2px; }
.user {
  display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; min-width: 0;
  border: 0; border-radius: var(--radius-pill); background: var(--surface);
  color: var(--ink-900); font-weight: 600; cursor: pointer;
  transition: background var(--ease), box-shadow var(--ease);
}
.user:hover { background: var(--primary-soft); }
.user[aria-expanded="true"] { box-shadow: var(--focus); }
#user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.avatar { width: 36px; height: 36px; border-radius: var(--radius-md); flex: none; display: grid; place-items: center; background: var(--pastel-blue); color: var(--ink-900); font-weight: 600; }

.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; animation: enter 220ms ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
/* Einstellungen: Unterabschnitte (Reiter ueber .chips) */
.settings-tab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.settings-tab[hidden] { display: none; }
.settings-tab .facts { margin-bottom: 0; }
.settings-tab .panel > .caption + div { margin-top: 12px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar .search { flex: 1 1 220px; max-width: 360px; }
.grid { display: grid; gap: 16px; }
.grid.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; min-height: 36px; }
.panel-tools, .panel-tools .tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.panel-tools .caption { text-align: right; }

/* Kennzahlen als schwarze Kacheln: grosse, leichte Zahl in Weiss */
.kpi, .ki-kpi {
  display: grid; gap: 6px; place-content: center; text-align: center;
  min-height: 104px; padding: 16px;
  background: var(--ink-900); color: rgba(255, 255, 255, 0.72);
  box-shadow: none; border-radius: var(--radius-md);
}
/* Zahl oben, gross und leicht; Beschriftung klein darunter */
.kpi .display, .ki-kpi .display {
  order: -1; color: #fff;
  font: 300 28px/32px var(--font); /* Groesse wie .display, nur leichter */
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.kpi .caption, .ki-kpi .caption { color: inherit; }
.kpi .label { display: block; }
.kpi .label i { display: none; } /* Farbpunkt entfaellt, die Kachel ist schlicht */

/* Listen */
.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px;
  background: var(--surface); border-radius: var(--radius-md);
  transition: box-shadow var(--ease);
}
a.row:hover, .proc-main:hover { background: var(--primary-soft); }
.row .grow { flex: 1; min-width: 0; }
.row .grow .h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.done .h2 { color: var(--ink-600); text-decoration: line-through; }
.check { width: 20px; height: 20px; margin: 10px; flex: none; accent-color: var(--primary); cursor: pointer; }
.empty { padding: 24px; text-align: center; }

/* Tabelle */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 500 11px/14px var(--font); color: var(--ink-600); padding: 0 12px 10px; white-space: nowrap; }
td { padding: 12px; border-top: 1px solid var(--border); color: var(--ink-600); }
td strong { font: 600 14px/20px var(--font); color: var(--ink-900); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Prozessfluss */
.flow { display: flex; align-items: center; overflow-x: auto; padding: 8px 4px 12px; }
.node {
  flex: none; min-width: 148px; display: flex; align-items: center; gap: 10px;
  padding: 12px; background: var(--surface); border-radius: var(--radius-md);
}
.edge { flex: 0 0 28px; height: 1px; background: var(--ink-400); }
.model { display: flex; align-items: flex-start; gap: 12px; }
.model .grow { flex: 1; min-width: 0; display: grid; gap: 4px; }

/* ---------- Umgebungsstreifen „Development“ (wie Meteor-AI) ----------
   js/config.js setzt .env-dev an <html>, sobald die Seite mit der
   dev-Datenbank spricht. Der Streifen ist ein ::before am <body>, kein
   Element – so braucht keine Seite eigenes Markup.

   Er nimmt Platz, statt etwas zu verdecken: der body rueckt um --env-bar-h
   nach unten, und was die volle Fensterhoehe nimmt (.app, .auth) oder oben
   am Fensterrand haengt (.rail), zieht die Hoehe ab. Auf live ist
   --env-bar-h 0 – dort aendert sich nichts.

   Das Icon (Hugeicons computer-programming-01) ist ein data-URI: ein
   Pseudo-Element kann kein <use> aufnehmen. Der Strich ist fest Weiss wie
   --env-bar-ink. */
:root { --env-bar-h: 0px; --env-bar: #0E3359; --env-bar-ink: #FFFFFF; --env-bar-r: 20px; }
html.env-dev { --env-bar-h: 36px; }
html.env-dev body:not(.app) { padding-top: var(--env-bar-h); } /* .app rechnet den Streifen selbst ein */
html.env-dev body::before {
  content: "Development";
  position: fixed; top: 0; left: 0; right: 0; z-index: 47;
  display: flex; align-items: center;
  height: var(--env-bar-h);
  padding: 0 16px 0 40px;
  background: var(--env-bar) no-repeat 16px center / 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 21H16M14 21C13.1716 21 12.5 20.3284 12.5 19.5V17L12 17M14 21H10M10 21H8M10 21C10.8284 21 11.5 20.3284 11.5 19.5V17L12 17M12 17V21'/%3E%3Cpath d='M16 3H8C5.17157 3 3.75736 3 2.87868 3.87868C2 4.75736 2 6.17157 2 9V11C2 13.8284 2 15.2426 2.87868 16.1213C3.75736 17 5.17157 17 8 17H16C18.8284 17 20.2426 17 21.1213 16.1213C22 15.2426 22 13.8284 22 11V9C22 6.17157 22 4.75736 21.1213 3.87868C20.2426 3 18.8284 3 16 3Z'/%3E%3Cpath d='M16 8L17.2265 9.05719C17.7422 9.50163 18 9.72386 18 10C18 10.2761 17.7422 10.4984 17.2265 10.9428L16 12'/%3E%3Cpath d='M8 8L6.77346 9.05719C6.25782 9.50163 6 9.72386 6 10C6 10.2761 6.25782 10.4984 6.77346 10.9428L8 12'/%3E%3Cpath d='M13 7L11 13'/%3E%3C/svg%3E");
  color: var(--env-bar-ink);
  font: 500 12px/16px var(--font); letter-spacing: 0.02em;
}
/* Die Seite darunter mit runden oberen Ecken, als laege ein Fenster im
   Rahmen des Streifens: zwei Viertelkreise in --env-bar, fest an der
   Unterkante, ohne Klicks abzufangen. */
html.env-dev body::after {
  content: "";
  position: fixed; top: var(--env-bar-h); left: 0; right: 0; z-index: 47;
  height: var(--env-bar-r);
  pointer-events: none;
  background:
    radial-gradient(circle at 100% 100%, transparent calc(var(--env-bar-r) - 0.5px), var(--env-bar) var(--env-bar-r))
      left top / var(--env-bar-r) var(--env-bar-r) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--env-bar-r) - 0.5px), var(--env-bar) var(--env-bar-r))
      right top / var(--env-bar-r) var(--env-bar-r) no-repeat;
}

/* ---------- Unternehmens-Umschalter (Topbar) ---------- */
.switcher {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-900);
  min-width: 0; cursor: pointer;
}
.switcher { transition: background var(--ease), box-shadow var(--ease); }
.switcher:hover { background: var(--primary-soft); }
.switcher:has(.pick:focus-visible), .switcher:has(.pick[aria-expanded="true"]) { box-shadow: var(--focus); }
.switcher .pick {
  border: 0; background: transparent; color: inherit; padding: 0;
  min-height: 44px; max-width: 240px;
  font: 600 13px/18px var(--font);
}
.switcher .pick:focus-visible { box-shadow: none; }

/* ---------- Auswahl (ersetzt jedes <select>, js/menu.js) ---------- */
.pick-native { display: none !important; }
.pick {
  display: inline-flex; align-items: center; gap: 8px;
  text-align: left; cursor: pointer;
}
.pick-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-chev { color: var(--ink-600); transition: transform var(--ease); }
.pick[aria-expanded="true"] .pick-chev { transform: rotate(180deg); }
.pick.input { display: flex; padding-right: 12px; }
.pick.input:hover { border-color: var(--ink-400); }
.pick.input:focus-visible, .pick.input[aria-expanded="true"] { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
.pick:disabled { cursor: default; }
.pick:disabled .pick-chev { display: none; }

/* ---------- Aufklappmenue (Auswahllisten, Benutzermenue) ---------- */
.menu {
  position: fixed; z-index: 60;
  max-width: min(360px, calc(100vw - 32px));
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 2px; align-content: start;
  padding: 6px;
  border-radius: 24px; /* Eintraege 18px + 6px Innenabstand */
  background: var(--surface);
  box-shadow: var(--shadow-float);
  outline: none;
  animation: menu-in 140ms ease-out;
  transform-origin: top center;
}
.menu.up { transform-origin: bottom center; }
@keyframes menu-in { from { opacity: 0; transform: scale(0.97) translateY(-4px); } }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 12px;
  border-radius: 18px;
  color: var(--ink-900); font: 500 13px/18px var(--font);
  cursor: pointer; user-select: none;
}
.menu-item .icon { color: var(--ink-600); }
.menu-item.active { background: var(--primary-soft); }
.menu-item[aria-selected="true"] { font-weight: 600; }
.menu-item[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item .menu-check { color: var(--primary); }
.menu-item.danger, .menu-item.danger .icon { color: #B3264A; }
.menu-item.danger.active { background: var(--pastel-rose); }
.menu-sep { height: 1px; margin: 4px 8px; background: var(--border); }
.menu-head { display: grid; gap: 2px; padding: 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.menu-head .h2, .menu-head .caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Eingabefeld mit Auswahlliste (Menu.combo): Pfeil rechts im Feld */
.combo { position: relative; display: block; }
.combo .input { padding-right: 44px; }
.combo-chev {
  position: absolute; right: 4px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 16px; background: transparent; cursor: pointer;
}
.combo-chev:hover { background: var(--primary-soft); }
.combo.open .pick-chev { transform: rotate(180deg); }
.combo .input:disabled + .combo-chev { display: none; }
.combo-sub { padding-left: 28px; color: var(--ink-600); }
.combo-new .icon { color: var(--primary); }
.combo-empty { padding: 10px 12px; }

/* ---------- Formulare in Panels ---------- */
.input:disabled { background: transparent; border-color: transparent; padding-left: 0; color: var(--ink-900); }
.icon-btn { width: 40px; padding: 0; flex: none; }
.icon-btn.sm { width: 36px; min-height: 36px; }
.gear[aria-expanded="true"] { background: var(--primary-soft); box-shadow: var(--focus); }
body:not(.is-admin) .admin-only { display: none !important; }

/* ---------- Popup (Hinzufuegen und Einstellungen, App.ui.popup) ----------
   Natives <dialog> mit showModal(): Fokus bleibt drin, Escape schliesst.
   Kein transform/filter am <dialog> selbst – sonst saessen die
   Auswahllisten (position: fixed, js/menu.js) falsch. */
.popup {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  padding: 0; border: 0; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink-600);
  box-shadow: var(--shadow-float);
}
.popup.wide { width: min(640px, calc(100vw - 32px)); }
.popup[open] { display: flex; flex-direction: column; animation: popup-in 180ms ease-out; }
@keyframes popup-in { from { opacity: 0; } }
.popup::backdrop { background: rgba(17, 19, 24, 0.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.popup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 0 24px; } /* Schliessen-Knopf oben und rechts gleich weit vom Rand; Titel buendig mit dem Formular */
.popup-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 24px 24px; overflow-y: auto; }
.popup-form.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.popup-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.field-row { display: flex; gap: 12px; align-items: flex-end; }
.field-row .narrow { flex: 0 0 110px; }
.field-row .grow { flex: 1; min-width: 0; }

/* Nur-lesen-Angaben (Status, Eigner …) */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; margin: 0 0 20px; }
.facts div { display: grid; gap: 4px; min-width: 0; align-content: start; }
.facts dt { font: 500 11px/14px var(--font); color: var(--ink-600); }
.facts dd { margin: 0; color: var(--ink-900); font-weight: 600; overflow-wrap: anywhere; }
.prose { color: var(--ink-900); white-space: pre-line; max-width: 72ch; }

/* ---------- Hinweise ---------- */
.notice { padding: 16px; color: #B3264A; max-width: 1120px; margin: 0 auto 24px; }
.soon { display: flex; align-items: flex-start; gap: 14px; }
.soon p { margin-top: 4px; }
.auth-done { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--pastel-green); color: #14704A; }
.auth-done .h2 { color: #14704A; }
.auth-done strong { color: var(--ink-900); }

body:not(.can-edit) .edit-only { display: none !important; }
textarea.input { min-height: 72px; padding: 10px 12px; line-height: 20px; resize: vertical; font-size: 14px; }
.btn-danger { background: var(--surface); color: #B3264A; }
.btn-danger:hover { background: var(--pastel-rose); }
.hint { margin-bottom: 16px; }
.lead { color: var(--ink-600); max-width: 72ch; }

/* Formular in zwei Spalten (Stammdaten, Schritte); .full geht ueber beide */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.person { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* ---------- Pfad ---------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 12px/16px var(--font); }
.breadcrumb .sep { color: var(--ink-400); }
.breadcrumb [aria-current] { color: var(--ink-900); font-weight: 600; }
/* Pfad ganz oben, ueber dem Seitentitel */
.page-crumbs { max-width: 1120px; margin: 0 auto 12px; }

/* ---------- Landkarten und Prozesskarten ---------- */
a.card { color: inherit; }
a.card:hover, a.row:hover { text-decoration: none; }
.map-card { display: flex; align-items: flex-start; gap: 12px; }
.map-card .grow { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lanes { display: grid; gap: 28px; margin-top: 8px; }
/* Spur: Kopf (Icon, Titel, Plus), darunter direkt die Prozesskarten –
   ohne eigenen Kasten, damit nur eine Ebene Flaechen entsteht
   (Landkarte: weisse Karten auf Grau; Favoriten: graue Karten im weissen Panel). */
.lane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lane-head { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.lane-head .grow { flex: 1; min-width: 0; }
.lane-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
/* Value Stream: jeder Prozess ist ein ganzer Balken ueber die volle Breite,
   die Balken stehen untereinander (Landkarte und Favoriten auf Home).
   Im Balken: Nr. | Name | Status in einer Zeile, Unterprozesse nebeneinander. */
.lane-kern .lane-cards { grid-template-columns: minmax(0, 1fr); }
.lane-kern .proc-card { align-self: stretch; }
.lane-kern .proc-main {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "no name badge" ". meta meta";
  align-items: center; column-gap: 12px; row-gap: 2px;
}
.lane-kern .proc-card-head { display: contents; }
.lane-kern .proc-card-head > :first-child { grid-area: no; }
.lane-kern .proc-card-head > .badge { grid-area: badge; }
.lane-kern .proc-main > .h2 { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-kern .proc-main > .caption { grid-area: meta; }
.lane-kern .proc-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.lane-kern .proc-sub { padding: 6px 10px !important; }
.lane-empty { padding: 0 4px; }
/* Prozesskarte: oben der Prozess (Link), darunter abgetrennt die Unterprozesse */
.proc-card { display: flex; flex-direction: column; padding: 0; align-self: start; }
.proc-main { display: grid; gap: 6px; padding: 16px; color: inherit; border-radius: var(--radius-md); }
.proc-main:hover { text-decoration: none; }
.proc-subs {
  list-style: none; margin: 0 8px; padding: 8px 0; /* Text buendig mit dem Prozess darueber (8 + 8 = 16 px) */
  border-top: 1px solid var(--border);
  display: grid; gap: 2px;
}
.proc-sub {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  padding: 6px 8px; border-radius: 16px;
  color: var(--ink-900); font: 500 12px/16px var(--font);
  transition: background var(--ease);
}
.proc-sub:hover { background: var(--primary-soft); text-decoration: none; }
.proc-sub .proc-no { flex: none; }
.proc-sub-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Favorit-Stern: gefuellt und orange, wenn die Landkarte auf Home steht */
.star[aria-pressed="true"] { color: var(--status-medium); }
.star[aria-pressed="true"] .icon { fill: currentColor; }

/* Favoriten auf Home: je Landkarte Kopfzeile und ihre Spuren */
/* Abschnitte ohne Karte (ui.section): Ueberschrift, darunter direkt der
   Inhalt, meist eine Liste weisser Zeilen auf dem Seitengrund. Home
   (Aufgaben, Favoriten, Erste Schritte), Unterprozesse, Verwendet in Prozessen. */
.home-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.home-section:empty { display: none; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 4px; }
.section-tools { display: flex; align-items: center; gap: 12px; }
.favorites { gap: 16px; }
/* Hinweis- und Ladetext ohne eigene Flaeche, buendig mit der Ueberschrift */
.section-empty { margin: 0; padding: 0 4px; }

/* Jede Favoriten-Landkarte steht in einem eigenen weissen Panel; die
   Prozesskarten darin sind grau (siehe "Weiss in Weiss" am Ende). */
.fav-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.fav-map .lanes { gap: 20px; margin-top: 0; }
.fav-map .proc-card { background: var(--bg-base); }
.fav-head { display: flex; align-items: center; gap: 12px; }
.fav-head .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fav-head a.h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Auswahl mit Haekchen im Popup (z. B. Favoriten waehlen) */
.check-list { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.check-row { display: flex; align-items: center; gap: 4px; padding-right: 10px; border-radius: 18px; cursor: pointer; transition: background var(--ease); }
.check-row:hover { background: var(--primary-soft); }
.check-row .grow { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 8px 0; }

/* Leiste ueber den Spuren: Beschreibung links, Schalter rechts */
.map-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Schalter wie iOS (DESIGN.md: Pill, aktiv in primary, mit Textlabel):
   runde Spur, runder Knopf mit Schatten; beim Druecken wird der Knopf breiter. */
.toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 16px 0 6px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-900); font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.toggle:focus-visible { outline: none; box-shadow: var(--focus); }
.toggle-track {
  position: relative; width: 48px; height: 28px; flex: none;
  border-radius: var(--radius-pill); background: #E2E4EA;
  transition: background 220ms ease;
}
.toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
  border-radius: var(--radius-pill); background: #fff;
  box-shadow: 0 2px 4px rgba(17, 19, 24, 0.18), 0 0 0 0.5px rgba(17, 19, 24, 0.04);
  transition: transform 260ms cubic-bezier(0.3, 1.3, 0.5, 1), width 160ms ease;
}
/* Squircle (siehe *) macht aus der Pill ein abgerundetes Quadrat – der
   Schalter braucht echte Halbkreise wie bei iOS. */
.toggle, .toggle-track, .toggle-knob { corner-shape: round; }
.toggle[aria-checked="true"] .toggle-track { background: var(--primary); }
.toggle[aria-checked="true"] .toggle-knob { transform: translateX(20px); }
.toggle:active .toggle-knob { width: 30px; }
.toggle[aria-checked="true"]:active .toggle-knob { transform: translateX(14px); }

/* ---------- Prozessliste (#prozesse) ----------
   Wie der Elemente-Katalog (Chips, Suche, weisse Zeilen mit Kachel),
   zusaetzlich nach Landkarte gruppiert; Unterprozesse eingerueckt. */
.proc-all { display: grid; gap: 20px; }
.proc-group { display: grid; gap: 8px; }
.proc-group-head { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; color: var(--ink-400); }
.proc-group-head a { color: var(--ink-600); font-weight: 600; }
.proc-group-head a:hover { color: var(--ink-900); text-decoration: none; }
.proc-sub-row { margin-left: calc(var(--depth) * 24px); }
@media (max-width: 640px) { .proc-sub-row { margin-left: calc(var(--depth) * 12px); } }

/* Hierarchie auf der Landkarte: ohne Karte, eingeklappt (details) */
.hier { display: grid; gap: 12px; }
.hier-head { cursor: pointer; list-style: none; border-radius: 18px; transition: background var(--ease); }
.hier-head::-webkit-details-marker { display: none; }
.hier-head:hover { background: rgba(17, 19, 24, 0.05); }
.hier-head .h1 { flex: 1; }
.hier-count { color: var(--ink-400); }
.hier-chevron { display: grid; place-items: center; width: 28px; height: 28px; color: var(--ink-600); transition: rotate var(--ease); }
.hier[open] .hier-chevron { rotate: 180deg; }
.hier .tree-root { padding: 0 4px; }
.hier a.tree-item:hover { background: rgba(17, 19, 24, 0.05); }

/* Hierarchie: eingerueckter Baum mit Verbindungslinien */
.tree { list-style: none; margin: 0; padding: 0; }
.tree .tree { margin-left: 14px; } /* Linie trifft die Mitte der 28px-Kachel darueber */
.tree .tree > li { position: relative; padding-left: 22px; }
.tree .tree > li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid #CBD2DE; }
.tree .tree > li:last-child::before { bottom: auto; height: 20px; }
.tree .tree > li::after { content: ""; position: absolute; left: 0; top: 20px; width: 16px; border-top: 1px solid #CBD2DE; }
.tree-item {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  min-height: 40px; padding: 0 10px; border-radius: 18px;
  color: var(--ink-900);
}
a.tree-item { transition: background var(--ease); }
a.tree-item:hover { background: var(--primary-soft); text-decoration: none; }
.tree-item .proc-no { flex: none; }
.tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.tree-item .tree-name { font-weight: 600; }
.tree-item .badge { margin-left: auto; }
.tree-head { padding-left: 0; }
.tree-head .tile { width: 28px; height: 28px; }
.tree-head .caption { margin-left: auto; }
.proc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.proc-no { font: 600 11px/14px var(--font); color: var(--primary); }

/* ---------- Prozessliste ---------- */
tr.click { cursor: pointer; transition: background var(--ease); }
tr.click:hover td { background: rgba(212, 223, 241, 0.5); }
.proc-link { color: inherit; display: inline-block; }
.proc-link:hover { text-decoration: none; }
.sub-mark { color: var(--ink-400); }
.nowrap { white-space: nowrap; }
a.link-row { color: inherit; }

/* ---------- Prozessschritte und RASIC ---------- */
.steps { display: grid; gap: 12px; margin-top: 16px; }
.step { display: grid; gap: 16px; }
.step-head { display: flex; align-items: center; gap: 12px; }
.step-head .grow { flex: 1; min-width: 0; }
.step-no {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-md); background: var(--ink-900); color: #fff; font-weight: 600;
}
.step-tools { display: flex; gap: 8px; }
/* RASIC je Schritt: Buchstabe | Bedeutung | Rollen (+ Plus zum Zuordnen) */
.rasic-grid { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.rasic-line { display: grid; grid-template-columns: 24px 96px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 36px; }
.rasic-label { font-weight: 600; }
.rasic-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.el-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.xs { width: 28px; min-height: 28px; }
.rasic-add[aria-expanded="true"] { background: var(--primary-soft); box-shadow: var(--focus); }
.muted { color: var(--ink-400); }
table.matrix .matrix-roles { color: var(--ink-900); font-size: 12px; }
table.matrix th, table.matrix td { padding: 8px 10px; }
table.matrix .center { text-align: center; }
.rasic {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: var(--radius-md); font: 600 12px/1 var(--font); color: var(--ink-900);
}
.rasic-R { background: var(--pastel-blue); }
.rasic-A { background: var(--ink-900); color: #fff; }
.rasic-S { background: var(--pastel-green); }
.rasic-I { background: var(--pastel-grey); }
.rasic-C { background: var(--pastel-amber); }

/* ---------- Prozess-KI (js/prozess-ki.js) ---------- */
.pki-open { gap: 8px; }
.pki-hint { align-items: center; }
.pki-hint .grow { flex: 1; min-width: 0; }
.pki.popup.wide { width: min(760px, calc(100vw - 32px)); }
.pki-body { gap: 16px; }
.pki .popup-actions { flex-wrap: wrap; }
.pki-ask { display: grid; gap: 16px; }
.pki-ideas { flex-wrap: wrap; }
.pki-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pki-files .el-chip { max-width: 260px; }
.pki-busy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 24px 0 8px; }
.pki-busy .popup-actions { grid-column: 1 / -1; }
.pki-spin {
  width: 28px; height: 28px; border-radius: 50%; corner-shape: round;
  border: 3px solid var(--primary-soft); border-top-color: var(--primary);
  animation: pki-spin 900ms linear infinite;
}
@keyframes pki-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pki-spin { animation-duration: 3s; } }
.pki-review { display: grid; gap: 16px; }
.pki-summary { display: flex; gap: 10px; align-items: flex-start; padding: 16px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--ink-900); }
.pki-summary .icon { margin-top: 1px; }
.pki-summary p { white-space: pre-line; }
.pki-change { display: grid; gap: 8px; }
.pki-count { font-weight: 500; }
.pki-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pki-old, .pki-new { padding: 12px 16px; border-radius: 18px; background: var(--bg-base); min-width: 0; }
.pki-new { background: var(--pastel-green); color: var(--ink-900); }
.pki-old p, .pki-new p { white-space: pre-line; overflow-wrap: anywhere; margin-top: 4px; }
.pki-old p { color: var(--ink-600); }
.pki-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pki-roles li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pki-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pki-step { display: flex; gap: 12px; padding: 12px; border-radius: 18px; background: var(--bg-base); }
.pki-step .grow { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pki-step p { white-space: pre-line; overflow-wrap: anywhere; }
.pki-rasic { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; }
.pki-rasic-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-900); font-size: 12px; }
.pki-rasic .rasic { width: 20px; height: 20px; font-size: 11px; }
.pki-keep { padding-left: 0; }
.pki-el-group { display: grid; gap: 2px; }
.pki-el-type { padding: 6px 0 2px; font-weight: 500; }
.pki-el { gap: 10px; background: var(--bg-base); margin-bottom: 4px; }
.pki-el .check { margin: 10px 0 10px 10px; }
.pki-el .tile { width: 28px; height: 28px; flex: none; }
.pki-el-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pki-el-name .h2 { overflow-wrap: anywhere; }
.pki-el .caption { overflow-wrap: anywhere; }
@media (max-width: 640px) { .pki-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Swimlanes (js/swimlanes.js) ----------
   Graue Bahnen in der weissen Card, weisse Schritte darauf (Weiss in Grau).
   Breiter als der Platz: die Grafik scrollt waagrecht, die Seite nicht. */
.swim-scroll { overflow-x: auto; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; }
.swim-svg { display: block; font-family: var(--font); }
.swim-lane rect { fill: var(--bg-base); }
.swim-lane.is-none rect { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 6 5; }
.swim-lane-name { font: 600 12px var(--font); fill: var(--ink-900); }
.swim-sep { stroke: var(--border); stroke-width: 1.5; }
.swim-flows path { fill: none; stroke: var(--ink-400); stroke-width: 1.5; }
.swim-head { fill: none; stroke: var(--ink-400); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.swim-start { fill: var(--surface); stroke: var(--ink-900); stroke-width: 2; }
.swim-end { fill: var(--surface); stroke: var(--ink-900); stroke-width: 4; }
.swim-step { cursor: pointer; outline: none; }
.swim-step rect { fill: var(--surface); transition: fill var(--ease); }
.swim-step:hover rect { fill: var(--primary-soft); }
.swim-step:focus-visible rect { stroke: var(--primary); stroke-width: 2; }
.swim-no { fill: var(--ink-900); }
.swim-no-text { font: 600 11px var(--font); fill: #fff; }
.swim-title { font: 600 12px var(--font); fill: var(--ink-900); }
.swim-more { font: 500 10px var(--font); fill: var(--ink-600); }

/* ---------- Elemente ---------- */
a.chip { color: var(--ink-900); }
a.chip:hover { text-decoration: none; }
a.chip[aria-pressed="true"] { color: #fff; }
.tile.high { background: var(--pastel-rose); }
.item { display: grid; gap: 12px; }
.item-form { display: grid; gap: 12px; }
.item-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.item-head .grow { flex: 1 1 220px; }
.item-head .narrow { flex: 0 1 110px; }

/* Elemente auf der Prozess-Seite */
.el-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.el-section { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 10px; align-content: start; padding: 16px; border-radius: var(--radius-md); background: var(--surface); }
.el-head { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.el-head .grow { flex: 1; min-width: 0; }
.el-head .tile { width: 28px; height: 28px; }
.el-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.el-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 4px 4px 12px; border-radius: var(--radius-pill);
  background: var(--primary-soft); color: #2247C4; font: 600 12px/16px var(--font);
}
.el-chip { min-width: 0; }
.el-chip:not(:has(.el-remove)) { padding-right: 12px; }
.el-chip a { color: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-item { font-weight: 500; }
/* x zum Entfernen: Icon statt Zeichen "×", damit es genau mittig sitzt. */
.el-remove {
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0; flex: none; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
}
.el-remove .icon { width: 14px; height: 14px; }
.el-remove:hover { background: rgba(255, 255, 255, 0.7); }

/* Versionshistorie */
.versions { display: grid; gap: 8px; margin-bottom: 16px; }
.version { background: var(--surface); border-radius: var(--radius-md); }
.version summary { display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; list-style: none; }
.version summary::-webkit-details-marker { display: none; }
.version summary .grow { flex: 1; min-width: 0; }
.version summary .step-no { width: auto; min-width: 32px; padding: 0 8px; }
.snapshot-box { padding: 0 12px 12px; }
.snapshot { display: grid; gap: 10px; }
.snapshot dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.snapshot dt { font: 500 11px/18px var(--font); color: var(--ink-600); }
.snapshot dd { margin: 0; color: var(--ink-900); white-space: pre-line; }
.snapshot ol, .snapshot ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ink-900); }

/* ---------- Fabulous (KI-Chat, js/fabulous.js) ----------
   Verlauf oben, Eingabe klebt unten im scrollenden main. */
/* Hoehe = sichtbarer Bereich von main ohne Seitenkopf (Titel + Abstand) */
.fab { --fab-fill: calc(100% - var(--fab-head, 72px)); max-width: 820px; min-height: var(--fab-fill); grid-template-rows: 1fr auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Start: Begruessung, Eingabe und Vorschlaege als Block in der Mitte */
.fab.is-start { grid-template-rows: none; align-content: center; }
.fab-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; text-align: center; padding-bottom: 24px; }
.fab-start .fab-composer { width: 100%; text-align: left; }
.fab-intro { display: grid; justify-items: center; gap: 12px; margin-bottom: 12px; }
/* Gross, aber mit duennerem Strich, damit es optisch so leicht ist wie die Frage darunter */
.fab-intro-icon { width: 44px; height: 44px; color: var(--ink-900); stroke-width: 1.5; }
.fab-title { font: 400 26px/32px var(--font); color: var(--ink-900); letter-spacing: -0.01em; }

.fab-log { display: grid; gap: 20px; align-content: start; }
.msg { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.msg.from-user { justify-content: flex-end; }
.msg.from-user .msg-body {
  max-width: min(85%, 600px); padding: 10px 16px;
  background: var(--ink-900); color: #fff;
  border-radius: var(--radius-md);
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 14px; line-height: 21px;
}
/* KI-Antwort ohne Box: oben klein wer antwortet (Fabulous · Modell),
   darunter der Text, darunter Kopieren und Download. */
.msg.from-ai .msg-main { flex: 1; min-width: 0; display: grid; gap: 14px; }
.msg.from-ai .msg-body { padding: 0 2px; }
.msg-head { display: flex; align-items: center; gap: 6px; color: var(--ink-600); }
.msg-head .icon { width: 14px; height: 14px; }
.msg-head-ai { color: var(--ink-900); }
.msg-head-name { color: var(--ink-900); font-weight: 600; }
.msg-head-sep { color: var(--ink-400); }
.msg-tools { display: flex; gap: 4px; margin-left: -6px; }
.msg-tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px 0 8px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-600);
  font: 600 12px/16px var(--font); cursor: pointer; transition: background var(--ease), color var(--ease);
}
.msg-tool:hover { background: var(--primary-soft); color: var(--ink-900); }
.msg-tool .icon { width: 15px; height: 15px; }
.msg-note { padding-left: 4px; }
.msg-error { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: #B3264A; padding-left: 4px; }
.msg-error .btn { min-height: 32px; padding: 0 12px; }

/* Antworttext (Markdown) */
.md { color: var(--ink-900); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.md > * + * { margin-top: 10px; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md h3, .md h4 { margin-bottom: 0; }
.md h3, .md h4 { margin-top: 16px; }
.md > :first-child { margin-top: 0; }
.md ul, .md ol { padding-left: 22px; display: grid; gap: 4px; margin-top: 8px; }
.md li.sub { margin-left: 18px; }
.md a { font-weight: 600; }
.md code { font: 500 12px/18px ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--bg-base); padding: 1px 6px; border-radius: 8px; }
.md pre { margin: 0; padding: 12px; background: var(--bg-base); border-radius: var(--radius-sm); overflow-x: auto; }
.md pre code { padding: 0; background: none; }
.md blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--ink-600); }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.md-table th { padding: 0 10px 8px; }
.md-table td { padding: 8px 10px; color: var(--ink-900); font-size: 13px; line-height: 18px; vertical-align: top; }

/* Drei Punkte, solange die erste Antwort fehlt */
.typing { display: inline-flex; gap: 5px; padding: 6px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-400); animation: typing 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Laufender Chat: Die Seite scrollt nicht mehr, sondern nur der Verlauf.
   Er endet oberhalb der Eingabe – Nachrichten verschwinden dort, statt
   hinter der Eingabe durchzulaufen. Die Eingabe steht fest darunter. */
.app main:has(> #fabulous-root:not([hidden]):not(.is-start)) {
  display: flex; flex-direction: column; overflow: hidden;
}
/* volle Breite wie sonst (auto-Raender wuerden im Flex-Layout schrumpfen) */
.app main:has(> #fabulous-root:not([hidden]):not(.is-start)) > :not(#fabulous-root) { flex: none; width: 100%; }
#fabulous-root.fab:not(.is-start) {
  display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; gap: 0;
}
#fabulous-root.fab:not(.is-start) .fab-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; /* scrollt weiter per Rad, Touch und Tastatur, nur ohne Balken */
  padding: 12px 4px 20px;
  /* oben und unten weich ausblenden */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
}
#fabulous-root.fab:not(.is-start) .fab-log::-webkit-scrollbar { display: none; }
.fab-dock { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 0 0; }
/* Wenig Hoehe (kleines Fenster, Handy quer): Kopf kompakter, damit fuer den
   Verlauf Platz bleibt. Titel und "Neuer Chat" bleiben trotzdem stehen. */
@media (max-height: 640px) {
  .app main:has(> #fabulous-root:not([hidden]):not(.is-start)) { padding-top: 8px; }
  .app main:has(> #fabulous-root:not([hidden]):not(.is-start)) .page-head { margin-bottom: 4px; }
  .app main:has(> #fabulous-root:not([hidden]):not(.is-start)) #page-sub { display: none; }
  .app main:has(> #fabulous-root:not([hidden]):not(.is-start)) #page-actions .btn { min-height: 32px; padding: 0 12px; }
  #fabulous-root.fab:not(.is-start) .fab-log { padding-top: 8px; }
}
/* Eingabe: leer genau eine Zeile (Plus | Text | Modell | Senden);
   mit Text waechst nur das Feld, die Knoepfe bleiben unten stehen. */
.fab-composer {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px;
  border-radius: 36px;
  background: var(--surface); box-shadow: var(--shadow-float);
  transition: box-shadow var(--ease);
}
.fab-composer.drop { box-shadow: var(--shadow-float), inset 0 0 0 2px var(--primary); }
.fab-row { display: flex; align-items: flex-end; gap: 8px; }
.fab-row > .btn { flex: none; }
.fab-plus { border-radius: 50%; corner-shape: round; }
.fab-row > .btn-primary { border-radius: 50%; corner-shape: round; }
textarea.fab-input {
  display: block; flex: 1; min-width: 0; height: 40px; min-height: 40px; max-height: 200px;
  resize: none; overflow-y: auto; border-color: transparent; background: transparent;
  font-size: 14px; line-height: 22px; padding: 9px 4px;
}
textarea.fab-input:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
textarea.fab-input:focus { border-color: transparent; box-shadow: none; }
/* Laengerer Text: Feld oben ueber die ganze Breite, darunter Plus links,
   Modell und Senden rechts (js/fabulous.js setzt .multi). */
.fab-composer.multi .fab-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px;
  grid-template-areas: "text text text text" "plus . model send";
}
.fab-composer.multi .fab-input { grid-area: text; padding-left: 8px; padding-right: 8px; }
.fab-composer.multi .fab-plus { grid-area: plus; }
.fab-composer.multi .fab-model-wrap { grid-area: model; }
.fab-composer.multi .fab-row > .btn:last-child { grid-area: send; }
/* Modellauswahl als kleine Pille direkt vor dem Senden-Knopf */
.fab-model-wrap { flex: 0 1 auto; min-width: 0; max-width: 180px; align-self: center; }
.pick.fab-model {
  width: auto; max-width: 100%; min-height: 32px; padding: 0 10px 0 12px; gap: 6px;
  border-color: transparent; border-radius: var(--radius-pill);
  background: transparent; font-size: 12px; font-weight: 600;
}
.pick.fab-model:hover { background: var(--primary-soft); border-color: transparent; }
.stop-square { width: 12px; height: 12px; border-radius: 3px; background: var(--ink-900); }

/* Anhaenge: in der Eingabe (mit Entfernen) und in der eigenen Nachricht */
.fab-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 0; }
.fab-file {
  display: inline-flex; align-items: center; gap: 6px; max-width: 220px; min-height: 32px;
  padding: 3px; border-radius: 16px; background: var(--bg-base);
  font: 600 12px/16px var(--font); color: var(--ink-900);
}
.fab-file img, .fab-file-ico { width: 26px; height: 26px; flex: none; border-radius: 10px; object-fit: cover; }
.fab-file-ico { display: grid; place-items: center; background: var(--surface); color: var(--ink-600); }
.fab-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; }
.fab-file-x { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; corner-shape: round; background: transparent; color: var(--ink-600); cursor: pointer; }
.fab-file-x:hover { background: var(--surface); color: var(--ink-900); }
.fab-file-error { padding: 0 12px 4px; }
.msg-user { display: grid; justify-items: end; gap: 6px; max-width: min(85%, 600px); }
.msg.from-user .msg-user .msg-body { max-width: 100%; }
.msg-user .fab-files { justify-content: flex-end; padding: 0; }
.fab-foot { text-align: center; color: var(--ink-600); padding-bottom: 4px; }
/* Unter dem Chat: Schalter und Hinweis in einer Zeile, dezent */
/* Schalter ganz links, Hinweis ganz rechts – buendig mit der Eingabe darueber */
.fab-foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 14px; padding: 0 8px; }
.fab-foot-row .toggle.xs { margin-left: -4px; }
.fab-foot-row .fab-foot { padding-bottom: 0; text-align: right; }
.fab-start .fab-foot-row { justify-self: stretch; margin-top: -10px; }
/* Kleiner Schalter (z. B. Superadmin-Katalog) */
.toggle.sm { min-height: 32px; gap: 8px; padding: 0 12px 0 4px; font-size: 12px; }
.toggle.sm .toggle-track { width: 40px; height: 24px; }
.toggle.sm .toggle-knob { width: 20px; height: 20px; }
.toggle.sm[aria-checked="true"] .toggle-knob { transform: translateX(16px); }
.toggle.sm:active .toggle-knob { width: 24px; }
.toggle.sm[aria-checked="true"]:active .toggle-knob { transform: translateX(12px); }
/* Ganz kleiner, unauffaelliger Schalter ohne Flaeche (Prozesswissen) */
.toggle.xs { min-height: 24px; gap: 6px; padding: 0 4px; background: transparent; box-shadow: none; color: var(--ink-600); font: 500 11px/14px var(--font); }
.toggle.xs:hover { color: var(--ink-900); }
.toggle.xs:focus-visible { box-shadow: var(--focus); }
.toggle.xs .toggle-track { width: 28px; height: 16px; }
.toggle.xs .toggle-knob { top: 2px; left: 2px; width: 12px; height: 12px; box-shadow: 0 1px 2px rgba(17, 19, 24, 0.2); }
.toggle.xs[aria-checked="true"] .toggle-knob { transform: translateX(12px); }
.toggle.xs:active .toggle-knob { width: 14px; }
.toggle.xs[aria-checked="true"]:active .toggle-knob { transform: translateX(10px); }

/* ---------- Einstellungen › KI-Nutzung (js/ki.js) ---------- */
.ki-feature { align-items: flex-start; }
.ki-feature .grow { display: grid; gap: 4px; }
.ki-feature .grow .caption { white-space: normal; }
.ki-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ki-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--bg-base); color: var(--ink-900); font: 600 11px/14px var(--font); }
/* Standard: weiss mit blauem Rand (auf Schwarz waere das OpenAI-Logo unsichtbar) */
.ki-chip.is-default { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--primary); }
.ki-logo { width: 14px; height: 14px; }
.ki-name { display: inline-flex; align-items: center; gap: 6px; }
.ki-name .ki-logo { width: 16px; height: 16px; }
.pick-icon { flex: none; }

/* ---------- Superadmin (js/superadmin.js) ---------- */
.sa-model .ki-logo { width: 20px; height: 20px; flex: none; margin: 0 6px; }
.sa-model .grow .caption { white-space: normal; overflow-wrap: anywhere; }
.sa-model.is-off .h2, .sa-model.is-off .ki-logo { opacity: 0.45; }
.sa-model .toggle.sm { flex: none; min-width: 92px; }
.sa-warn { color: #B3264A; }
.ki-candidate .ki-logo { width: 20px; height: 20px; flex: none; margin: 0 6px; }
.ki-candidate .grow .caption { white-space: normal; overflow-wrap: anywhere; }
.ki-candidate .btn.sm { min-height: 32px; padding: 0 12px; }
.ki-candidates { margin-top: 12px; }
.ki-none { margin-top: 12px; color: var(--ink-900); }
.ki-known { margin-top: 16px; }
.ki-known summary { cursor: pointer; }
.ki-vendor { padding: 8px 4px 2px; font-weight: 600; }
.ki-models { max-height: 44vh; }
.chip.sm { min-height: 32px; padding: 0 12px; font-size: 12px; }

.ki-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }

.ki-chart { position: relative; min-height: 220px; }
.ki-chart svg { display: block; overflow: visible; }
.ki-grid line { stroke: var(--border); stroke-width: 1; }
.ki-grid text, .ki-xlabels text { fill: var(--ink-600); font: 500 11px var(--font); font-variant-numeric: tabular-nums; }
.ki-bars path { fill: var(--primary); transition: fill var(--ease); }
.ki-bars path.on { fill: #2247C4; }
.ki-hit { fill: transparent; cursor: default; outline: none; }
.ki-hit:focus-visible { fill: rgba(47, 91, 234, 0.08); }
.ki-tip {
  position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; z-index: 2;
  display: grid; gap: 2px; padding: 12px; min-width: 120px; text-align: center;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-float);
}
.ki-note { margin-top: 12px; }

.ki-table td { vertical-align: top; font-size: 12px; line-height: 16px; color: var(--ink-900); }
.ki-table td .caption { margin-top: 2px; }
.ki-question { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.ki-more { display: flex; justify-content: center; padding-top: 16px; }
.ki-more:empty { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .app main { padding: 24px 16px calc(104px + env(safe-area-inset-bottom)); }
  .rasic-line { grid-template-columns: 24px minmax(0, 1fr); }
  .rasic-label { display: none; } /* Bedeutung steht im title des Buchstabens */
  .rail {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; padding: 28px 12px calc(12px + env(safe-area-inset-bottom));
    flex-direction: row;
    /* kein Panel, nur ein weicher Auslauf, damit die Beschriftung lesbar bleibt */
    background: linear-gradient(to top, rgba(242, 242, 242, 0.96) 55%, rgba(242, 242, 242, 0));
  }
  /* 8 Bereiche muessen auf 360 px passen: 8 x 36 + 7 x 6 = 330 px */
  .rail nav { flex-direction: row; justify-content: center; gap: 6px; }
  .nav-link { flex: none; align-items: center; }
  .nav-link .label { display: none; } /* Touch: kein Hover, Name steckt im aria-label */
  .nav-link .dot { width: 36px; height: 36px; }
  .topbar { gap: 8px; }
  .topbar-actions { gap: 8px; }
  .switcher .pick { max-width: 140px; }
  .panel { padding: 16px; }
  .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr); }
  #user-name, .user .pick-chev { display: none; }
  .user { padding: 4px; }
  .hide-sm { display: none; }
  .flow { flex-direction: column; align-items: stretch; overflow: visible; }
  .edge { flex: 0 0 16px; width: 1px; height: 16px; margin-left: 28px; }
  .toolbar .search { max-width: none; flex-basis: 100%; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .step-head { flex-wrap: wrap; }
  .el-grid { grid-template-columns: minmax(0, 1fr); }
  .popup-form.form-grid { grid-template-columns: minmax(0, 1fr); }
  .page-head { align-items: flex-start; }
  .snapshot dl { grid-template-columns: minmax(0, 1fr); }
  /* Laufender Chat: unten nur so viel Platz, wie die Navigationsleiste braucht */
  .app main:has(> #fabulous-root:not([hidden]):not(.is-start)) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .ki-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ki-kpis .ki-kpi:first-child { grid-column: 1 / -1; }
  .kpi, .ki-kpi { min-height: 96px; }
  .kpi .display, .ki-kpi .display { font-size: 24px; line-height: 28px; }
  .fab-model-wrap { max-width: 116px; }
  .fab-title { font-size: 22px; line-height: 28px; }
  .fab-row { gap: 4px; }
  .msg.from-user .msg-body { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Weiss in Weiss ----------
   Kein Rahmen um Elemente. Liegt ein Bedienelement in einer weissen Flaeche,
   bekommt es stattdessen den grauen Grund; liegt es wiederum in so einem
   grauen Element, ist es wieder weiss. :where() haelt die Spezifitaet bei
   einer Klasse, damit Hover-, Auswahl- und Sonderregeln weiter gewinnen. */
:where(.glass, .card, .popup, .el-section, .version, .row) :is(.btn-secondary, .btn-danger, .chip, .toggle, .input, .row, .node) { background: var(--bg-base); }
:where(.glass, .card, .popup, .el-section, .version) :where(.row, .node) :is(.btn-secondary, .btn-danger, .chip, .toggle, .input) { background: var(--surface); }

/* Nur iPhone/iPad: Eingaben unter 16 px laesst iOS beim Antippen hineinzoomen.
   -webkit-touch-callout kennt nur iOS-Safari; (pointer: coarse) allein traefe
   auch Laptops mit Touchscreen, die gar nicht zoomen. */
@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    .input, textarea.input, textarea.fab-input { font-size: 16px; }
  }
}

/* ---------- Fabulous: letzte Chats auf der Startansicht ----------
   Halb so breit wie die Eingabe, zurueckhaltend in Grau; lange Listen
   scrollen ohne Balken und laufen nach unten weich aus. */
.fab-recent { width: 50%; min-width: min(100%, 280px); display: grid; gap: 4px; margin-top: 8px; text-align: left; }
.fab-recent-head { padding: 0 12px; color: var(--ink-400); }
.fab-recent .fab-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 6px; }
.fab-recent-head .caption { color: inherit; }
/* Kleines Uhr-Icon rechts neben "Letzte Chats": fuehrt zu allen Chats */
.fab-recent-all {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; corner-shape: round;
  color: var(--ink-400); transition: background var(--ease), color var(--ease);
}
.fab-recent-all:hover, .fab-recent-all:focus-visible { background: rgba(17, 19, 24, 0.05); color: var(--ink-900); }
.fab-recent-all .icon { width: 15px; height: 15px; }
.fab-recent-list {
  list-style: none; margin: 0; padding: 0; max-height: 264px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.fab-recent-list::-webkit-scrollbar { display: none; }
.fab-recent-list.fades {
  padding-bottom: 48px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 112px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 112px), transparent 100%);
}
.fab-recent-item {
  display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: 36px; padding: 8px 12px;
  border: 0; border-radius: 16px; background: transparent; cursor: pointer; text-align: left;
  color: var(--ink-600); font: 500 13px/18px var(--font);
  transition: background var(--ease), color var(--ease);
}
/* Hover nicht blau, sondern der Seitengrund eine Spur dunkler */
.fab-recent-item:hover { background: rgba(17, 19, 24, 0.05); color: var(--ink-900); }
.fab-recent-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fab-recent-when { flex: none; font-size: 11px; line-height: 14px; color: var(--ink-400); }

/* ---------- Fabulous: alle Chats (#chats) ----------
   Uebliches Seitenlayout: Suche in der Werkzeugleiste, darunter direkt auf
   dem Seitengrund (ohne Karte) die Chats, nach Zeit gruppiert, Zeilen wie "Letzte Chats". */
.fab-all { display: grid; gap: 16px; }
.fab-all .empty { margin: 0; padding: 12px; }
.fab-all-group { display: grid; gap: 4px; }
.fab-all-group .fab-recent-head { padding-top: 4px; }
.fab-all-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fab-all-row { position: relative; }
.fab-all-row .fab-recent-item { padding-right: 44px; }
.fab-recent-item.is-open { background: rgba(17, 19, 24, 0.05); color: var(--ink-900); }
/* Papierkorb erscheint erst beim Darueberfahren (auf Touch immer) */
.fab-all-del {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; corner-shape: round; background: transparent;
  color: var(--ink-400); cursor: pointer; opacity: 0;
  transition: opacity var(--ease), background var(--ease), color var(--ease);
}
.fab-all-row:hover .fab-all-del, .fab-all-del:focus-visible { opacity: 1; }
.fab-all-row .fab-recent-item:focus-visible ~ .fab-all-del { opacity: 1; }
.fab-all-del:hover { background: var(--surface); color: #B3264A; }
.fab-all-del:disabled { cursor: default; color: var(--ink-400); background: transparent; }
.fab-all-note { padding: 4px 12px; color: var(--ink-400); }
@media (hover: none) {
  .fab-all-del { opacity: 1; }
}