@font-face {
  font-family: Manrope;
  src: url("schrift.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #F2F4F6;
  --surface: rgb(255 255 255);
  --erhoben: rgb(255 255 255);
  --line: #E7E9EC;
  --ink: #17191B;
  --muted: #6E747B;
  --accent: #45908F;
  --accent-ink: rgb(255 255 255);
  --ok: #3E9463;
  --warn: #B8922E;
  --err: #BC5A49;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --dunkelkarte: #1C1F22;
  --dunkelkarte-ink: #F2F4F5;
  --r-karte: 20px;
  --r-innen: 13px;
  --r-pill: 999px;
  --schweben: 0 1px 2px rgba(18,22,28,.04), 0 10px 30px rgba(18,22,28,.07);
  --schweben-tief: 0 2px 4px rgba(18,22,28,.05), 0 18px 44px rgba(18,22,28,.10);
  --glas: rgba(255,255,255,.66);
  --glas-rand: rgba(23,25,27,.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1113; --surface: #191C1F; --erhoben: #1E2225;
    --line: #282C30; --ink: #ECEDEE; --muted: #989EA3;
    --accent: #7FB4B6; --accent-ink: #0F2627; --ok: #5FB585;
    --warn: #D3B45E; --err: #D97F70; --s1: #3987e5; --s2: #d95926;
    --s3: #199e70; --s4: #c98500; --dunkelkarte: #22262A;
    --dunkelkarte-ink: #F2F4F5;
    --schweben: 0 2px 5px rgba(0,0,0,.2), 0 12px 32px rgba(0,0,0,.24);
    --schweben-tief: 0 4px 10px rgba(0,0,0,.3), 0 20px 48px rgba(0,0,0,.34);
    --glas: rgba(25,28,31,.72); --glas-rand: rgba(236,237,238,.10);
  }
}

[data-theme="dark"] {
  --bg: #0F1113; --surface: #191C1F; --erhoben: #1E2225;
  --line: #282C30; --ink: #ECEDEE; --muted: #989EA3;
  --accent: #7FB4B6; --accent-ink: #0F2627; --ok: #5FB585;
  --warn: #D3B45E; --err: #D97F70; --s1: #3987e5; --s2: #d95926;
  --s3: #199e70; --s4: #c98500; --dunkelkarte: #22262A;
  --dunkelkarte-ink: #F2F4F5;
  --schweben: 0 2px 5px rgba(0,0,0,.2), 0 12px 32px rgba(0,0,0,.24);
  --schweben-tief: 0 4px 10px rgba(0,0,0,.3), 0 20px 48px rgba(0,0,0,.34);
  --glas: rgba(25,28,31,.72); --glas-rand: rgba(236,237,238,.10);
}

.b-dashboard { color: var(--ink); font-family: Manrope, system-ui, sans-serif; }
.b-dashboard * { box-sizing: border-box; }

/* EINE FLAECHE FUER ALLE KARTEN (14.08.2026).
   Die Marken --glas/--glas-rand gab es seit der Formsprache Fassung 2,
   benutzt hat sie genau EIN Bauteil: .b-kopf. Panels, Statkarten und
   Projektkarten standen auf var(--surface) — deckend, ohne Rand, ohne
   Unschaerfe. Drei Flaechenarten auf einer Seite lesen sich als drei
   Systeme. Ab hier tragen alle Karten dieselbe Glasflaeche; abgedunkelte
   Dialoge bleiben bewusst deckend (raster.css sagt warum). */
.b-glas, .b-panel, .b-stat, .b-entscheidung, .b-faltung {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  backdrop-filter: blur(14px);
  border-radius: var(--r-karte);
}
.b-panel, .b-stat { box-shadow: var(--schweben); }
.b-panel { padding: 16px; margin-bottom: 16px; }
.b-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.b-panel h3 { font-size: 15px; font-weight: 600; margin: 0; }
.b-panel-body { font-size: 14px; }
.b-empty { color: var(--muted); }
.b-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.b-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.b-stat { padding: 16px; min-height: 100px; display: flex; flex-direction: column; gap: 8px; }
.b-number { font: 700 28px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.b-stat span, .b-stat small, .b-plan span, .b-message time { font-size: 12px; color: var(--muted); }
.b-quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px; background: var(--glas); border: 1px solid var(--glas-rand); border-radius: var(--r-karte); backdrop-filter: blur(14px); margin-bottom: 16px; }
.b-quick-action, .b-switch, .b-btn { min-height: 44px; padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: var(--erhoben); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.b-quick-action:hover, .b-switch.active, .b-btn { background: var(--ink); color: var(--bg); }
.b-btn.secondary { background: var(--erhoben); color: var(--ink); }
.b-btn:disabled { opacity: .5; cursor: not-allowed; }
.baustein-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.b-plan { padding: 16px; background: var(--dunkelkarte); color: var(--dunkelkarte-ink); border-radius: var(--r-innen); display: grid; gap: 8px; }
.b-rows { display: grid; gap: 1px; }
.b-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); padding: 12px 0; border-bottom: 1px solid var(--line); }
.b-row[role="button"], .b-row[onclick] { cursor: pointer; }
.b-switches { display: flex; gap: 8px; flex-wrap: wrap; }
.b-bars { display: grid; gap: 12px; }
.b-bar-row { display: grid; grid-template-columns: 120px 1fr 60px; align-items: center; gap: 8px; font-size: 12px; }
.b-bar-row i { height: 8px; border-radius: var(--r-pill); background: var(--accent); display: block; }
.b-message { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.b-error { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--err); }
.b-spinner { width: 20px; height: 20px; display: inline-block; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: b-spin .8s linear infinite; }
@keyframes b-spin { to { transform: rotate(360deg); } }
.b-ring { width: 44px; height: 44px; fill: none; stroke: var(--accent); stroke-width: 4; transform: rotate(-90deg); }
.b-strang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ki-statistik-stats, .ki-statistik-grid { margin-bottom: 16px; }
.b-node { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-pill); color: var(--ink); background: var(--bg); text-decoration: none; }
/* EINE Akzentfarbe: "laeuft" ist ueberall var(--accent). --s1 war ein
   zweites Blau neben dem Akzent und nur hier im Einsatz. */
.b-node-fertig { color: var(--ok); } .b-node-laeuft { color: var(--accent); } .b-node-fehlgeschlagen { color: var(--err); }
@media (max-width: 1000px) { .b-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .b-stats { gap: 8px; } .b-stat { padding: 12px; min-height: 92px; } .b-number { font-size: 22px; } .b-bar-row { grid-template-columns: 80px 1fr 48px; } .b-quick { order: 2; } }
/* ==== Projekte-Seite (kip-) — Karten, Filter-Dialog, Unterseiten ==== */
.kip-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.kip-kopf .dehn { flex: 1; }
.kip-segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--glas); border: 1px solid var(--glas-rand); backdrop-filter: blur(14px); }
.kip-segment button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; padding: 8px 16px; border-radius: var(--r-pill); cursor: pointer; min-height: 40px; }
.kip-segment button.active { background: var(--ink); color: var(--bg); font-weight: 600; }
.kip-filterknopf { position: relative; }
.kip-filterknopf .badge { position: absolute; top: -4px; right: -4px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 1px 7px; }

.kip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.kip-karte { text-align: left; font: inherit; cursor: pointer; background: var(--glas); border: 1px solid var(--glas-rand); backdrop-filter: blur(14px); border-radius: var(--r-karte); box-shadow: var(--schweben); padding: 16px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.kip-karte:hover { box-shadow: var(--schweben-tief); }
.kip-karte-kopf { display: flex; align-items: center; gap: 12px; }
.kip-karte-kopf strong { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kip-ring { position: relative; width: 44px; height: 44px; flex: none; }
.kip-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.kip-meta { color: var(--muted); font-size: 12.5px; }
.kip-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.kip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.kip-dot.z-fertig { background: var(--ok); }
.kip-dot.z-laeuft { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.kip-dot.z-fehlgeschlagen { background: var(--err); }
.kip-dot.z-freigabe { background: var(--warn); }
.kip-liste { display: grid; gap: 8px; }
.kip-zeile { display: flex; align-items: center; gap: 12px; background: var(--glas); border: 1px solid var(--glas-rand); backdrop-filter: blur(14px); border-radius: var(--r-innen); box-shadow: var(--schweben); padding: 12px 16px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; min-height: 44px; }
.kip-balken { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; min-width: 60px; }
.kip-balken i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }

/* Dialog: Desktop mittig, Mobil als Bottom-Sheet */
.kip-overlay { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--ink) 32%, transparent); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.kip-dialog { background: var(--surface); border-radius: var(--r-karte); box-shadow: var(--schweben-tief); width: min(440px, 100%); max-height: 85vh; overflow: auto; padding: 20px; }
.kip-dialog.gross { width: min(680px, 100%); }
.kip-dialog h3 { margin: 0 0 16px; font-size: 16px; }
.kip-dialog-fuss { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.kip-chiprow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.kip-chip { border: 0; font: inherit; font-size: 13px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--bg); color: var(--muted); cursor: pointer; min-height: 40px; }
.kip-chip.an { background: var(--ink); color: var(--bg); }
.kip-dialog textarea { width: 100%; min-height: 320px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-innen); background: var(--bg); color: var(--ink); font: 13px/1.5 ui-monospace, monospace; padding: 12px; resize: vertical; }
@media (max-width: 640px) {
  .kip-overlay { align-items: flex-end; padding: 0; }
  .kip-dialog { border-radius: var(--r-karte) var(--r-karte) 0 0; width: 100%; max-height: 92vh; }
}

/* Unterseiten: Projekt und Runde */
.kip-zurueck { display: inline-flex; align-items: center; gap: 6px; border: 0; font: inherit; font-size: 13.5px; color: var(--muted); background: none; cursor: pointer; padding: 8px 12px 8px 0; margin-bottom: 8px; min-height: 44px; }
.kip-zurueck:hover { color: var(--ink); }
.kip-detailkopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.kip-detailkopf h2 { margin: 0; font-size: 22px; letter-spacing: -.3px; flex: 1; min-width: 200px; }
.kip-status { font-size: 12px; font-weight: 650; padding: 4px 12px; border-radius: var(--r-pill); background: var(--bg); color: var(--muted); }
.kip-status.z-laeuft { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.kip-status.z-fertig { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.kip-status.z-fehlgeschlagen { background: color-mix(in srgb, var(--err) 14%, var(--surface)); color: var(--err); }
.kip-status.z-freigabe { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn); }
.kip-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* Strang als Zeitleiste */
.kip-strang { display: flex; flex-direction: column; }
.kip-knoten { display: flex; align-items: center; gap: 14px; position: relative; padding: 10px 12px; border-radius: var(--r-innen); cursor: pointer; border: 0; font: inherit; text-align: left; background: none; color: var(--ink); }
.kip-knoten:hover { background: var(--bg); }
.kip-knoten:not(:last-child)::before { content: ""; position: absolute; left: 26px; top: 42px; bottom: -10px; width: 2px; background: var(--line); }
.kip-mark { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; z-index: 1; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); color: var(--muted); }
.kip-mark svg { width: 14px; height: 14px; }
.kip-mark.z-fertig { box-shadow: inset 0 0 0 2px var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.kip-mark.z-laeuft { box-shadow: none; background: var(--accent); color: var(--accent-ink); }
.kip-mark.z-fehlgeschlagen { box-shadow: inset 0 0 0 2px var(--err); color: var(--err); }
.kip-mark.z-freigabe { box-shadow: inset 0 0 0 2px var(--warn); color: var(--warn); }
.kip-knoten-text { flex: 1; min-width: 0; }
.kip-knoten-text strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kip-knoten-text span { color: var(--muted); font-size: 12px; }
.kip-chipzeile { display: flex; gap: 8px; flex-wrap: wrap; }
.kip-depchip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 7px 13px; border-radius: var(--r-pill); background: var(--bg); color: var(--ink); border: 0; font-family: inherit; cursor: pointer; min-height: 36px; }
.kip-auftrag { white-space: pre-wrap; font: 12.5px/1.55 ui-monospace, monospace; color: var(--ink); max-height: 180px; overflow: hidden; position: relative; }
.kip-auftrag.offen { max-height: none; }
.kip-auftrag:not(.offen)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(transparent, var(--bg)); }
.kip-grip { cursor: grab; color: var(--muted); flex: none; touch-action: none; }
.kip-suche { border: 0; font: inherit; font-size: 13.5px; min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); box-shadow: var(--schweben); width: 160px; }
.kip-suche:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) { .kip-suche { width: 100%; order: 3; } }


/* ZEILEN AM HANDY — bis 14.08.2026 stand hier auch auf 390 Pixeln
   `repeat(auto-fit, minmax(0, 1fr))`. Drei Kinder wurden damit drei
   gleich breite Spalten: Etikett, Text und Datum bekamen je ein
   Drittel, dem Text blieben rund zwanzig Zeichen, und aus zwei
   Saetzen wurde ein fingerlanges Band. Der Nutzer im Bildschirmfoto:
   "die Seite sieht schrecklich aus von den Listen her und von den
   Texten her."

   Unter 640 Pixeln stehen die Teile deshalb UNTEREINANDER, in der
   Reihenfolge, in der man sie liest: Einordnung, Text ueber die volle
   Breite, Zeit. Ab 641 Pixeln bleibt alles, wie es war. */
@media (max-width: 640px) {
  .b-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 14px 0;
  }
  .b-row > * { min-width: 0; }
  .b-row > strong {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .b-row > .b-muted { font-size: 12px; }

  /* Dieselbe Falle im Meldungs-Baustein: Symbol, Text und Zeit lagen
     nebeneinander. Symbol und Zeit gehoeren in eine Kopfzeile, der
     Text darunter. */
  .b-message {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    align-items: start;
  }
  .b-message > span { grid-column: 1 / -1; }
  .b-message time { grid-column: 2; justify-self: end; font-size: 12px; }
}


/* ==== ERGEBNIS — was der letzte Lauf getan hat, OHNE Klick ==========
   Die Rundenseite zeigte das Ergebnis bis 14.08.2026 nur hinter einem
   Klick in einem Dialog (kipLaufDialog), waehrend die alte
   Auftragsseite es direkt hinschrieb. Wer eine Runde oeffnet, will als
   Erstes wissen, was herauskam. */
.b-ergebnis { display: grid; gap: 12px; }
.b-ergebnis-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b-note {
  font: 700 20px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums;
  padding: 8px 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.b-note.z-fehlgeschlagen { background: color-mix(in srgb, var(--err) 16%, transparent); color: var(--err); }
.b-note.leer { font: 600 12.5px/1.4 Manrope, system-ui, sans-serif; background: var(--bg); color: var(--muted); }
.b-satz { font-size: 15px; line-height: 1.5; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.b-fakten { display: flex; gap: 8px; flex-wrap: wrap; }
.b-fakt { font-size: 12.5px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--bg); color: var(--muted); }
.b-fakt b { color: var(--ink); font-weight: 600; }
.b-dateien { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none;
  font: 12.5px/1.6 ui-monospace, monospace; }
.b-dateien li { overflow-wrap: anywhere; min-width: 0; }

/* ==== LIVE auf der Rundenseite =====================================
   Der Block ist derselbe wie auf der Aufgabenseite (app.js:liveBlock) —
   eine zweite Fassung waere genau der Fehler, den wir gerade beheben.
   Umgehaengt werden nur die Farben: styles.css malt ihn in der alten
   App-Palette (--txt, --bg-soft, --run), die KI-Seiten stehen in der
   Baukasten-Palette. Die feste Planbox uebernimmt dabei die Form der
   PlanBox von der Heute-Seite (.b-plan, dunkle Karte) — ein Ding, ein
   Aussehen. */
#ki-runde .detail-block { margin-bottom: 0; }
#ki-runde .live-list { background: transparent; border: 1px solid var(--glas-rand);
  border-radius: var(--r-innen); }
#ki-runde .live-plan { background: var(--dunkelkarte); color: var(--dunkelkarte-ink);
  border-left: 2px solid var(--accent); border-radius: var(--r-innen); }
#ki-runde .live-plan-kopf,
#ki-runde .live-plan-punkt.completed { color: color-mix(in srgb, var(--dunkelkarte-ink) 62%, transparent); }
#ki-runde .live-text { color: var(--ink); }
#ki-runde .live-row.thought .live-text { color: var(--muted); }
#ki-runde .live-dot { background: var(--accent); }
#ki-runde .live-row.thought .live-dot { background: var(--muted); }

/* ==== ENTSCHEIDUNG — genau EINE naechste Handlung, mit Folge ========
   "Wartet auf Freigabe" sagte, dass etwas ansteht, aber nie, WAS man
   freigibt. Der Baustein erzwingt die Folgenangabe: ohne `folge` steht
   dort ein leerer Absatz, und das faellt beim Bauen auf. */
.b-entscheidung { display: grid; gap: 8px; padding: 16px; margin-bottom: 16px; }
.b-entscheidung > strong { font-size: 15px; }
.b-entscheidung > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.b-entscheidung .b-actions { margin-top: 8px; }
/* Alle anderen Knoepfe sind ruhiger als der eine, der dran ist. */
.b-btn.leise { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--glas-rand); }
.b-btn.leise:hover { color: var(--ink); }

/* ==== FALTUNG — Nachschlagewerk, standardmaessig zu ================= */
.b-faltung { padding: 0 16px; margin-bottom: 16px; }
.b-faltung > summary { min-height: 44px; display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 15px; font-weight: 600; list-style: none; padding: 12px 0; }
.b-faltung > summary::-webkit-details-marker { display: none; }
.b-faltung > summary .baustein-icon { transition: transform .15s ease; }
.b-faltung[open] > summary .baustein-icon { transform: rotate(90deg); }
.b-faltung[open] > summary { border-bottom: 1px solid var(--glas-rand); }
.b-faltung-inhalt { padding: 16px 0; font-size: 14px; }
.b-faltung-inhalt > * + * { margin-top: 16px; }
/* styles.css setzt global `margin: 0` — ohne diese Regel klebten die
   Beschriftungen der Einstellungen an ihren Chipreihen. */
.b-faltung-inhalt .kip-meta { margin: 16px 0 8px; }
.b-faltung-inhalt > :first-child > .kip-meta:first-child { margin-top: 0; }

/* ==== CHAT — der Rahmen um DIE EINE Gespraechsdarstellung ===========
   HIER STAND BIS 14.08.2026 EIN ZWEITER CHAT (.b-chat/.b-blase/
   .b-chat-kopf/.b-chat-verlauf/.b-chat-eingabe). Er war der Nachbau des
   Chats, den es seit jeher gibt — Blasen, Eingabezeile, Wellenform,
   alles zweimal, mit zwei Optiken. Geblieben ist der Rahmen: Was das
   Gespraech SELBST aussieht, steht in styles.css bei .chat-scroll /
   .msg / .bubble / .composer, und es steht dort nur einmal.

   --chat-abzug ist die Hoehe von KI-Kopf und Reiterleiste ueber dem
   Gespraech. Wer den Seitenkopf aendert, zieht diesen Wert nach. */
.chat-rahmen { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-rahmen.eigenhoehe { --chat-abzug: 300px;
  height: calc(100dvh - var(--chat-abzug)); min-height: 380px; }
/* Der Kopf traegt selbst keine Flaeche — er reiht die Faltungen, und
   die sind schon Glas. Zwei Glasschichten uebereinander lesen sich als
   Kasten im Kasten. */
.chat-kopf { display: grid; gap: 8px; margin-bottom: 8px; }
.chat-kopf.hidden { display: none; }
.chat-kopf .b-faltung { margin-bottom: 0; padding: 0 12px; }
.chat-kopf .b-faltung > summary { padding: 10px 0; }
.chat-kopf .b-faltung-inhalt { display: grid; gap: 12px; padding: 12px 0 4px; }
.chat-marke { display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: 12px; color: var(--muted); }
.chat-marke::before, .chat-marke::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Fussnote (Tokens), Belege und Rundenvorschlag haengen IN der Blase —
   dieselbe Blase wie im Drawer-Chat, nur mit mehr Inhalt. */
.bubble small { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.bubble ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px;
  font-size: 12px; color: var(--muted); }
.bubble ul li { overflow-wrap: anywhere; }
.bubble .b-btn { margin-top: 8px; }

/* GRUPPE — Beschriftung plus Bedienelement, die Kopfzeilenform. */
.b-gruppe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b-gruppe > span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.b-auswahl select { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--glas-rand); border-radius: var(--r-pill);
  background: var(--glas); color: var(--ink); font: inherit; }

/* GESPRAECHSLISTE — die Zeilenform der Aufgaben im Drawer. */
.b-gespraeche { display: grid; gap: 6px; }
.b-gespraech { display: flex; align-items: stretch; gap: 4px; border-radius: var(--r-innen); }
.b-gespraech.aktiv { background: var(--glas); }
.b-gespraech-oeffnen { flex: 1; min-width: 0; text-align: left; display: grid; gap: 2px;
  min-height: 44px; padding: 8px 10px; border-radius: var(--r-innen); }
.b-gespraech-kopf { display: flex; gap: 8px; align-items: baseline; }
.b-gespraech-kopf strong { flex: 1; min-width: 0; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-gespraech-kopf time { flex: none; font-size: 11px; color: var(--muted); }
.b-gespraech-letzte { font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-gespraech-weg { flex: none; width: 44px; min-height: 44px; border-radius: var(--r-innen);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.b-gespraech-weg .ic { width: 16px; height: 16px; }
.b-gespraech-oeffnen:hover, .b-gespraech-weg:hover { background: var(--glas); }

.b-hinweis { font-size: 12px; line-height: 1.5; color: var(--muted); }
.b-hinweis.warn { color: var(--warn); }

@media (max-width: 640px) {
  /* Am Handy fuellt das Gespraech den Schirm: nur Kopf und Reiter
     bleiben stehen, der Rest gehoert dem Verlauf. Einspaltig heisst
     hier: jede Gruppe nimmt die ganze Breite, nichts steht nebeneinander. */
  .chat-rahmen.eigenhoehe { --chat-abzug: calc(248px + env(safe-area-inset-top) + env(safe-area-inset-bottom)); }
  .b-gruppe { width: 100%; }
  .b-gruppe .b-switches { width: 100%; }
  /* Ein aufgeklappter Kopf darf das Gespraech nicht auffressen: er
     bekommt hoechstens die halbe Hoehe und scrollt dann selbst.
     Die Eingabezeile bleibt so immer sichtbar. */
  .chat-kopf { max-height: 50%; overflow-y: auto; }
  .b-ergebnis-kopf { gap: 8px; }
  /* TAPZIELE AM HANDY: der Chat ist aelter als die 44-px-Regel und
     kam mit 40er Knoepfen und einem ~40 px hohen Eingabefeld. Nur am
     Handy nachgezogen — am Rechner bleibt die Optik unangetastet. */
  .round-btn { width: 44px; height: 44px; }
  .composer textarea { min-height: 44px; }
}