/* --- Lebenszeichen während der Wartezeit (25.08.2026) -------------------- */
  /* Die Uhr steht ruhig neben „denkt nach …", nicht als Alarm: Sie soll sagen
     „es läuft", nicht „es dauert zu lange". Der Geduld-Satz darunter erscheint
     nur, wo ein Modell im eigenen Haus rechnet. */
  .warteUhr { margin-left: 8px; font-size: 12px; color: var(--dim);
    font-variant-numeric: tabular-nums; }
  .warteUhr:empty { display: none; }
  .warteGeduld { margin-top: 8px; font-size: 12.5px; line-height: 1.5;
    color: var(--dim); border-top: 1px solid var(--linie); padding-top: 8px; }
  .werbeRueckmeldung { color: var(--gruenText); font-weight: 600; }
  .werbeHinweis { font-size: 12.5px; }
  .werbeAbmelden { background: transparent; border: 1px solid var(--linie);
    border-radius: var(--rundKlein); color: var(--dim); padding: 9px 16px;
    font: inherit; font-size: 13px; cursor: pointer; min-height: 40px; }

  /* --- Rückmeldung auf der Werbeseite (25.08.2026) ------------------------- */
  /* Abgesetzt wie der Datenblock, aber mit Fläche statt nur einer Linie: Es ist
     das Einzige auf dieser Seite, das eine Handlung erbittet, die dem Betreiber
     etwas einbringt. Die drei Stufen tragen dieselben Farben wie der
     Rechte-Umschalter (--gut / --text-schwach / --warn) — wer die eine Fläche
     kennt, muss die andere nicht lernen. */
  .werbeRueck { margin: 4px 0 20px; padding: 16px 18px; background: var(--bg);
    border: 1px solid var(--linie); border-radius: var(--rundKlein); }
  .werbeKarte .werbeRueckTitel { margin: 0 0 4px; color: var(--text);
    font-weight: 600; font-size: 16px; }
  .werbeKarte .werbeRueckSatz { margin: 0 0 12px; font-size: 13.5px; }
  .werbeRueckWahl { display: flex; gap: 10px; margin-bottom: 12px; }
  /* 44 Pixel, nicht 32: Das ist der eine Klick, auf den es hier ankommt, und er
     wird meistens auf einem Telefon getroffen. Das Symbol darin bleibt klein. */
  .werbeRueckStufe { display: grid; place-items: center; width: 52px; height: 44px;
    border: 1px solid var(--linie); border-radius: var(--rundKlein);
    background: transparent; cursor: pointer; opacity: .62;
    transition: opacity .12s ease, background-color .12s ease; }
  .werbeRueckStufe .ikon { width: 20px; height: 20px; }
  /* Bewusst `--gruenText` / `--dim` / `--warnText` und NICHT die Werte aus
     `.uKnopf`: Dort stehen `var(--gut, #5aa469)` und `var(--text-schwach)` —
     zwei Namen, die es in keiner der beiden Paletten gibt, sodass immer der
     Notwert greift und der dunkle Entwurf leer ausgeht. Diese drei sind echte
     Marken mit einer hellen UND einer dunklen Fassung. */
  .werbeRueckStufe.gut { color: var(--gruenText); }
  .werbeRueckStufe.geht { color: var(--dim); }
  .werbeRueckStufe.schlecht { color: var(--warnText); }
  .werbeRueckStufe:hover { opacity: 1; }
  .werbeRueckStufe[aria-pressed="true"] { opacity: 1;
    box-shadow: inset 0 0 0 1px currentColor; }
  .werbeRueckStufe.gut[aria-pressed="true"] {
    background: color-mix(in srgb, var(--gruen) 26%, transparent); }
  .werbeRueckStufe.geht[aria-pressed="true"] {
    background: color-mix(in srgb, var(--linie) 70%, transparent); }
  .werbeRueckStufe.schlecht[aria-pressed="true"] {
    background: color-mix(in srgb, var(--warn) 26%, transparent); }
  .werbeRueckFeld { display: block; width: 100%; box-sizing: border-box;
    background: var(--panel); border: 1px solid var(--randStark);
    border-radius: var(--rundKlein); color: var(--text); padding: 10px 12px;
    font: inherit; font-size: 14px; resize: vertical; margin-bottom: 10px; }
  .werbeRueckFeld:focus { outline: none; border-color: var(--gold); }
  .werbeRueckSenden { background: var(--gold); color: #fff; border: 0;
    border-radius: var(--rundKlein); padding: 10px 20px; font: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px; }
  .werbeRueckSenden:disabled { opacity: .45; cursor: default; }
  .werbeKarte .werbeRueckBleibt { margin: 10px 0 0; font-size: 12px; }
  .werbeKarte .werbeRueckMeldung { margin: 8px 0 0; color: var(--gruenText);
    font-weight: 600; font-size: 14px; }
  .werbeRueckMeldung:empty { display: none; }
  @media (max-width: 768px) {
    .werbeRueckStufe { height: 48px; }
    .werbeRueckSenden { width: 100%; }
  }

  /* --- Der Hinweis-Kasten beim ersten Anmelden (25.08.2026) ---------------- */
  /* Eine Zeile je Grenze, Symbol vorn. Kein Fließtext-Absatz: Wer vier Sätze
     hintereinander liest, liest den vierten nicht mehr — und der vierte ist
     hier der über das langsame Haus-Modell. */
  .dhListe { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 20px; }
  .dhZeile { display: flex; align-items: flex-start; gap: 12px; background: var(--bg);
    border: 1px solid var(--linie); border-radius: var(--rundKlein); padding: 11px 13px; }
  .dhZeile .ikon { width: 18px; height: 18px; flex: none; margin-top: 2px;
    color: var(--goldText); }
  .dhSatzZeile { font-size: 14px; line-height: 1.5; color: var(--text); }

  /* Erwähnungen mit @ (11.08.2026). Die Marke im Verlauf ist bewusst ruhig —
     sie soll den Namen auffindbar machen, nicht den Satz zerreissen. */
  .blase .erwaehnung { color: var(--goldText); font-weight: 600;
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    border-radius: 5px; padding: 0 3px; }
  .erwaehnPicker { position: fixed; z-index: 90; background: var(--panel);
    border: 1px solid var(--randStark); border-radius: var(--rundKlein);
    box-shadow: var(--schatten); padding: 5px; max-height: 260px; overflow-y: auto; }
  .erwaehnPicker .epEintrag { display: flex; align-items: baseline; gap: 8px; width: 100%;
    text-align: left; background: transparent; border: 0; color: var(--text);
    padding: 8px 10px; border-radius: 7px; cursor: pointer; font: inherit;
    font-size: 14px; min-height: 38px; }
  .erwaehnPicker .epEintrag:hover, .erwaehnPicker .epEintrag.aktiv {
    background: color-mix(in srgb, var(--gold) 12%, transparent); }
  .erwaehnPicker .epArt { margin-left: auto; font-size: 11px; color: var(--dim); }
  /* --- Eingabe-Karte (12.08.2026) -----------------------------------------
     EIN Rahmen statt fünf: Nur die Karte trägt einen Rand, alles darin ist
     randlos. EIN Farbfleck: Gold liegt auf dem Senden-Knopf und auf dem
     Fokus-Rand, sonst nirgends. Zwei Schriftgrößen: 16px Eingabe, 13px
     Bedienung. Und feste Anker — wachsen darf nur das Feld nach oben,
     Nachbarn bewegen sich nie (ADR-077 als Gestaltungsprinzip). */
  #eingabe { position: relative; padding: 10px 16px 16px; background: var(--bg); }
  #eingabeKarte { background: var(--panel); border: 1px solid var(--linie);
    border-radius: var(--rund); box-shadow: var(--schatten);
    transition: border-color .15s ease, box-shadow .15s ease; }
  #eingabeKarte:focus-within { border-color: var(--gold);
    box-shadow: var(--schatten), 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent); }
  #frage { display: block; width: 100%; background: transparent; border: 0;
    color: var(--text); padding: 14px 16px 4px; font: inherit; font-size: 14px;
    line-height: 1.45; resize: none; max-height: 190px; overflow-y: auto; }
  #frage:focus { outline: none; }
  #frage::placeholder { color: var(--dim); }
  /* Beilagen: alles, was die nächste Frage mitnimmt, in einer Zeile. Ohne
     Inhalt fällt sie ganz aus dem Layout — kein reservierter Leerraum. */
  #beilagen { display: none; flex-wrap: wrap; gap: 6px; padding: 0 12px 4px; }
  #beilagen.hat-inhalt { display: flex; }
  #eingabeFuss { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px 12px;
    min-height: 48px; }
  #eingabeFuss .fussLuecke { flex: 1; }
  /* Besetzung: wer würde antworten? Die vorderste Münze ist die Antwortende.
     Zwei Handlungen an einem Ort, deshalb zwei Klickziele: der Name schreibt
     die Erwähnung ins Feld (das, was man ständig tut), das Chevron zeigt den
     Tisch (das, was man selten braucht). Optisch bleibt es ein Element. */
  #besetzungGruppe { display: inline-flex; align-items: center; border-radius: 99px; }
  #besetzungGruppe:hover, #besetzungGruppe:focus-within { background: var(--zeile); }
  #besetzung { display: inline-flex; align-items: center; gap: 9px; background: transparent;
    border: 0; border-radius: 99px; padding: 5px 8px 5px 6px; font: inherit;
    color: var(--text); cursor: pointer; min-height: 40px; }
  #besetzung:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  /* 32 statt 28 Pixel Breite: Der Bild-Pruefer hat ihn am 20.08.2026 als
     einziges zu kleines Tippziel der Chat-Ansicht gemeldet. Das Symbol darin
     bleibt 14 Pixel — nur die Flaeche waechst. */
  #besetzungMehr { display: grid; place-items: center; width: 32px; height: 40px;
    background: transparent; border: 0; border-radius: 99px; cursor: pointer; color: var(--dim); }
  #besetzungMehr .ikon { width: 14px; height: 14px; }
  #besetzungMehr:hover { color: var(--text); }
  #besetzungMehr:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  #besetzung .muenzen { display: inline-flex; }
  #besetzung .muenzen > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--panel); }
  #besetzung .muenzen > *:first-child { margin-left: 0; }
  #besetzung .bText { font-size: 13px; white-space: nowrap; }
  #besetzung .bName { font-weight: 600; }
  #besetzung .bWort { color: var(--dim); }
  #besetzung .bMehr { display: grid; place-items: center; width: 24px; height: 24px;
    border-radius: 9px; background: var(--zeile); color: var(--dim); font-size: 11px;
    font-weight: 600; }
  #besetzung.antwortet .muenzen > *:first-child { animation: muenzePuls 1.6s ease-in-out infinite; }
  @keyframes muenzePuls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
  /* Modell + Kosten sind EIN Element. Die Kostenbreite steht fest, damit ein
     neuer Wert nichts verschiebt — er blendet über. */
  #modellChip { display: inline-flex; align-items: baseline; gap: 7px; background: transparent;
    border: 0; border-radius: 99px; padding: 7px 12px; font: inherit; color: var(--text);
    font-size: 13px; cursor: pointer; min-height: 40px; }
  #modellChip:hover, #modellChip:focus-visible { background: var(--zeile); outline: none; }
  #modellSchaetzung { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums;
    min-width: 72px; text-align: right; transition: opacity .15s ease; }
  #modellSchaetzung:not(:empty)::before { content: "·"; margin-right: 7px; opacity: .5; }
  #eingabeFuss #senden { width: 44px; height: 44px; padding: 0; justify-content: center;
    background: var(--gold); border-color: var(--gold); color: #fff;
    transition: opacity .15s ease; }
  #eingabeFuss #senden .ikon { width: 20px; height: 20px; }
  #eingabeFuss #senden:hover, #eingabeFuss #senden:focus-visible {
    background: var(--goldhell); border-color: var(--goldhell); }
  /* Leeres Feld oder laufende Antwort: der Knopf ist wirklich deaktiviert,
     nicht nur blass. Ein Knopf, der aussieht wie ein Knopf und nichts tut,
     ist für Tastatur und Vorlese-Programme eine Falle. */
  #eingabeFuss #senden:disabled { opacity: .4; cursor: default; }
  #eingabeFuss #senden:disabled:hover { background: var(--gold); border-color: var(--gold); }
  #besetzungPopover, #modellPopover { bottom: calc(100% + 6px); max-width: 340px; }
  #besetzungPopover { left: 0; }
  #modellPopover { right: 56px; min-width: 240px; }
  .popoverKopf { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--dim); margin-bottom: 8px; }
  .modellZeile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px;
    background: transparent; border: 0; border-radius: 7px; padding: 8px 10px; font: inherit;
    font-size: 13.5px; color: var(--text); cursor: pointer; text-align: left; }
  .modellZeile:hover, .modellZeile.aktiv { background: color-mix(in srgb, var(--gold) 12%, transparent); }
  .modellZeile .mzPreis { margin-left: auto; color: var(--dim); font-size: 12.5px;
    font-variant-numeric: tabular-nums; }
  /* Ein Schloss klebt an dem Abschnitt, den es zusperrt. Seit der Name des
     Meetings darüber steht (21.08.2026), braucht es sichtbaren Abstand nach
     oben — sonst las es sich als Sperre des Namensfeldes, das offen ist. */
  .besetzungSperre { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    margin-top: 14px; font-size: 12.5px; color: var(--dim); }
  .besetzungSperre .ikon { width: 14px; height: 14px; flex: none; }
  /* Die Zeilen im Tisch-Popover sind Knöpfe: ein Klick spricht die Agentin an. */
  .rosterZeile.ansprechbar { width: 100%; background: transparent; border: 0;
    font: inherit; text-align: left; cursor: pointer; border-radius: 7px; }
  .rosterZeile.ansprechbar:hover, .rosterZeile.ansprechbar:focus-visible {
    background: color-mix(in srgb, var(--gold) 12%, transparent); outline: none; }
  /* Erstbesuch: der Puls sitzt auf der KARTE, nicht mehr auf dem Textfeld —
     ein <textarea> trägt keine Pseudo-Elemente, deshalb lief die Animation
     dort direkt auf dem Element und malte dauernd neu. */
  body.erstbesuch #eingabeKarte { animation: eingabePuls 2.2s ease-in-out 8; }
  button.aktion { background: var(--leder); color: var(--text); border: 1px solid var(--randStark); border-radius: 9px;
    padding: 11px 18px; font: inherit; font-size: 15px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
  button.aktion .ikon { width: 17px; height: 17px; }
  button.aktion:hover, button.aktion:focus-visible { border-color: var(--gold); outline: none; }
  /* Bestätigungs-Kärtchen (Neu anfangen) — Szene-Sprache statt confirm() */
  #bestaetigung { position: absolute; right: 20px; bottom: calc(100% + 8px); background: var(--papier);
    border: 1px solid var(--gold); border-radius: 12px; padding: 14px 16px; max-width: 330px; display: none;
    box-shadow: 0 18px 50px rgba(0,0,0,.55); z-index: 45; }
  #bestaetigung.offen { display: block; }
  #bestaetigung p { font-size: 14.5px; margin-bottom: 10px; }
  #bestaetigung .knoepfe { display: flex; gap: 8px; }
  .chip { align-self: center; display: flex; align-items: center; gap: 7px;
    background: var(--zeile); border: 1px solid var(--randStark); border-radius: 99px;
    padding: 7px 13px 7px 11px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
  .chip:hover { border-color: var(--gold); }
  .chip b.plus { color: var(--gruen); font-weight: 700; }
  .chip b.minus { color: var(--warn); font-weight: 700; }
  /* Stapel-Icon aus der PixelFlow-Mini-Registry (file, Bibliotheks-Palette) */
  .stapelMini { position: relative; width: 20px; height: 20px; display: inline-block;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAAAEdSURBVDiNxVI9S8RAEJ3ZXS8LZ5FgkBQ2giJI4LCw8Xfcf7C0uEItbOwstLDzHwlXCRZJfwe5IHcp/GCzX1bCZi+JVwi+bt7MvnmzPAQHZfm6TSWPwAOljM3e3udpmtZ+jzUKy24sVZwgSpe3oE6SmE0B4MoXQLdYFvkTBoPLKNqvXL4qs7GRcIqECIFfd0ky+vjpEV+xDboWz8AwBGKOOfCLzhO6sLM3mgHAeVVmY21sw/VGDvqw5mBLDvlqkT+0DSOaKQCqXgEdiFpLuG8VMHj2qwMqgoGxn5NWAWL/yUG4S64RD0VVZtbPzoYODtYi3ClgjDJxfDTveuDjb3NAAJao5e1qkavWaYsJoHp0qcaHFMXLkDEe9m30z/sGF79snsF8XV0AAAAASUVORK5CYII="),
      url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAAAEdSURBVDiNxVI9S8RAEJ3ZXS8LZ5FgkBQ2giJI4LCw8Xfcf7C0uEItbOwstLDzHwlXCRZJfwe5IHcp/GCzX1bCZi+JVwi+bt7MvnmzPAQHZfm6TSWPwAOljM3e3udpmtZ+jzUKy24sVZwgSpe3oE6SmE0B4MoXQLdYFvkTBoPLKNqvXL4qs7GRcIqECIFfd0ky+vjpEV+xDboWz8AwBGKOOfCLzhO6sLM3mgHAeVVmY21sw/VGDvqw5mBLDvlqkT+0DSOaKQCqXgEdiFpLuG8VMHj2qwMqgoGxn5NWAWL/yUG4S64RD0VVZtbPzoYODtYi3ClgjDJxfDTveuDjb3NAAJao5e1qkavWaYsJoHp0qcaHFMXLkDEe9m30z/sGF79snsF8XV0AAAAASUVORK5CYII=");
    background-repeat: no-repeat, no-repeat; background-position: 0 0, 4px 4px;
    image-rendering: pixelated; }
  #tokenLeiste { display: none; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 10px 18px; background: var(--zeile); border-bottom: 1px solid var(--randStark); font-size: 13.5px; }
  body.token-pflicht #tokenLeiste { display: flex; }
  #tokenLeiste input { flex: 1; min-width: 220px; background: var(--bg); border: 1px solid var(--linie);
    border-radius: 7px; color: var(--text); padding: 8px 11px; font: inherit; font-size: 13px; }
  #tokenLeiste .aktion { padding: 8px 14px; }

  /* --- Hamburger-Menü: Drawer auf allen Größen (Icon + Wort je Zeile) -------- */
  #seitenmenue { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 85vw);
    background: var(--flaecheV); border-right: 1px solid var(--linie); z-index: 60;
    display: flex; flex-direction: column; align-items: stretch; padding: 16px 12px; overflow-y: auto; gap: 2px;
    transform: translateX(-105%); transition: transform .22s ease; box-shadow: 24px 0 60px rgba(0,0,0,.45); }
  body.menue-offen #seitenmenue { transform: none; }
  #schleier { position: fixed; inset: 0; background: rgba(8,6,3,.55); opacity: 0;
    pointer-events: none; transition: opacity .22s ease; z-index: 55; }
  body.menue-offen #schleier { opacity: 1; pointer-events: auto; }
  .railKnopf { display: flex; flex-direction: row; align-items: center; gap: 11px; width: 100%;
    background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 7px 10px;
    color: var(--dim); font: inherit; font-size: 13.5px; cursor: pointer; min-height: 0; }
  .railKnopf .ikon { width: 18px; height: 18px; color: var(--dim); transition: color .14s ease; }
  .railKnopf:hover, .railKnopf:focus-visible { border-color: var(--linie); background: color-mix(in srgb, var(--gold) 7%, transparent); color: var(--text); outline: none; }
  .railKnopf:hover .ikon, .railKnopf:focus-visible .ikon { color: var(--text); }
  .railKnopf.aktiv { color: var(--goldText); border-color: color-mix(in srgb, var(--gold) 4%, transparent); }
  .railKnopf.aktiv .ikon { color: var(--goldText); }
  .railKnopf .rlabel { line-height: 1.15; text-align: left; }
  .railTrenner { border: 0; border-top: 1px solid var(--linie); margin: 6px 8px; }
  /* Aufklappbare Menü-Gruppen: Standard ZU — Erstblick zeigt nur das Tagesgeschäft */
  .mgruppe { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent;
    border: 0; font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase;
    color: var(--dim); margin: 10px 0 2px; padding: 6px 10px; cursor: pointer;
    border-radius: 8px; font-family: inherit; text-align: left; }
  .mgruppe::before { content: "\25B8"; font-size: 9px; transition: transform .15s ease; }
  .mgruppe.offen::before { transform: rotate(90deg); }
  .mgruppe:hover, .mgruppe:focus-visible { color: var(--text); background: color-mix(in srgb, var(--gold) 6%, transparent); outline: none; }
  .gruppeInhalt { display: none; }
  /* flex: none ist Pflicht — das Menü ist eine Flex-Spalte, und ohne die Sperre
     quetscht sie eine aufgeklappte Gruppe auf wenige Pixel zusammen, statt das
     Menü rollen zu lassen. Eine 36-px-Liste ist schlimmer als ein Rollbalken. */
  .gruppeInhalt.offen { display: block; padding-left: 8px; flex: 0 0 auto; }
  .navGruppe { flex: 0 0 auto; }
  /* Doppelte Klasse, damit sie das .gruppeInhalt.offen von oben schlaegt:
     sonst zieht eine einmal mobil aufgeklappte Gruppe auf den Desktop mit. */
  .nur-mobil.nur-mobil { display: none; }
  .mgruppe .gzahl { margin-left: auto; font-size: 10.5px; color: var(--dim);
    background: var(--zeile); border-radius: 99px; padding: 1px 7px; }
  /* Die Verlaufs-Liste ist die einzige Gruppe, die unbegrenzt wachsen kann —
     hundert Chats ergäben sonst ein Menü von mehreren tausend Pixeln. Sie
     rollt in sich selbst, damit die Navigation darüber stehen bleibt. */
  .gruppeInhalt[data-gruppe="chats"].offen { max-height: 50vh; min-height: 180px;
    overflow-y: auto; overscroll-behavior: contain; flex: 0 1 auto; }

  /* --- Konto-Feld am Nutzer-Chip (09.08.2026) ------------------------------
     Es SCHWEBT über dem Menü statt es zu verlängern — deshalb kostet es null
     Höhe und kann keinen Rollbalken auslösen. Der Chip war vorher ein zweiter
     Weg zur Konto-Gruppe; jetzt ist er der einzige. */
  .chipHalter { margin-top: auto; position: relative; padding-top: 8px; }
  .chipMenue { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 6px;
    padding: 6px; border: 1px solid var(--linie); border-radius: var(--rund);
    background: var(--panel); box-shadow: var(--schatten); z-index: 6;
    max-height: 68vh; overflow-y: auto; overscroll-behavior: contain; }
  .chipMenue[hidden] { display: none; }
  .cmTrenner { border: 0; border-top: 1px solid var(--linie); margin: 6px 4px; }
  .railFuss { margin-top: auto; text-align: center; font-size: 10.5px; color: var(--dim);
    border-top: 1px solid var(--linie); margin-top: 8px; padding-top: 8px; line-height: 1.5; }
  .railAnsicht { display: flex; flex-direction: column; gap: 4px; }
  .mkopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .mkopf h2 { font: 700 17px var(--schrift); color: var(--kopf); }
  .mkopf button { background: transparent; border: 0; color: var(--dim); font-size: 20px; cursor: pointer; padding: 2px 8px; }
  .bereichKopf { font-size: 11.5px; color: var(--dim); border: 1px solid var(--linie);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
  .bereichKopf:empty { display: none; }

  /* --- Chatverläufe im Menü (v0.7): 4 Kategorien, aufklappbar + scrollbar ---- */
  .chatKat { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent;
    border: 0; font-size: 12px; color: var(--dim); padding: 7px 10px 7px 18px; cursor: pointer;
    border-radius: 8px; font-family: inherit; text-align: left; }
  .chatKat::before { content: "\25B8"; font-size: 8px; transition: transform .15s ease; }
  .chatKat.offen::before { transform: rotate(90deg); }
  .chatKat:hover, .chatKat:focus-visible { color: var(--text); background: color-mix(in srgb, var(--gold) 6%, transparent); outline: none; }
  .chatKat .kzahl { margin-left: auto; font-size: 10.5px; color: var(--dim);
    background: var(--zeile); border-radius: 99px; padding: 1px 7px; }
  .chatKatListe { display: none; }
  .chatKatListe.offen { display: block; max-height: 235px; overflow-y: auto; padding-left: 12px; }
  .chatKatListe .hinweis { font-size: 11.5px; padding: 4px 10px; }
  /* Meeting-Liste (13.08.2026, E1): sie IST das Menue und waechst nach INNEN.
     Der Deckel plus eigener Rollbalken ist der Grund, warum der Erstblick auch
     bei 200 Meetings die gemessene Obergrenze haelt — vorher wuchs die Liste
     das Menue auf und erzeugte dessen Rollbalken. */
  /* Der Deckel ist GERECHNET, nicht geschaetzt: das Menue ohne Liste misst
     338 px (nachgemessen im Browser), die Abnahme-Grenze fuer den Erstblick
     liegt bei 563 px — bleiben 225 px. Wer den Rest des Menues aendert, muss
     ihn neu rechnen; im Browser nachmessen, nicht schaetzen. */
  .chatListe { max-height: 220px; overflow-y: auto; overscroll-behavior: contain;
    margin: 2px 0 6px; }
  .chatListe .hinweis { font-size: 11.5px; padding: 6px 10px; }
  .mNeu { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent;
    border: 1px dashed var(--linie); border-radius: 8px; color: var(--dim);
    font: 500 12.5px var(--schrift); padding: 7px 10px; margin: 2px 0 4px; cursor: pointer;
    transition: color .15s ease, border-color .15s ease; }
  .mNeu:hover, .mNeu:focus-visible { color: var(--text); border-color: var(--gold); outline: none; }
  .mNeu .ikon { width: 13px; height: 13px; }
  /* Der Kontext des gewaehlten Meetings — eingerueckt, damit die Zugehoerigkeit
     ohne Linie sichtbar ist. */
  /* Ein- und Ausklappen bleibt ruhig: nur Deckkraft, kein Hoehen-Tween. Eine
     animierte Hoehe schoebe alle Nachbarn mit — genau das Zappeln, das ein
     Menue unruhig macht (ADR-077: Bewegung am Fokus, nie Reflow der Nachbarn). */
  .chatKontext { padding-left: 14px; margin: 2px 0 4px;
    border-left: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
    animation: zweigAuf .16s ease-out; }
  .navUnter.offen { animation: zweigAuf .16s ease-out; }
  @keyframes zweigAuf { from { opacity: 0 } to { opacity: 1 } }
  @media (prefers-reduced-motion: reduce) {
    .chatKontext, .navUnter.offen { animation: none; }
  }
  .chatKontext .railKnopf { font-size: 12px; padding: 5px 8px; }
  .chatArchiv { display: flex; align-items: center; gap: 6px; width: 100%;
    background: transparent; border: 0; color: var(--dim); font: 400 11.5px var(--schrift);
    padding: 6px 10px; cursor: pointer; text-align: left; }
  .chatArchiv::before { content: "B8"; font-size: 8px; transition: transform .15s ease; }
  .chatArchiv.offen::before { transform: rotate(90deg); }
  .chatArchiv:hover, .chatArchiv:focus-visible { color: var(--text); outline: none; }
  /* Der Zaehler ist die EINZIGE Zahl in der Liste — vorher stand dort die Anzahl
     der Chats, was niemanden interessiert. Er zeigt ungelesene Nachrichten. */
  .cungelesen { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 9px;
    background: var(--gold); color: #1a1408; font: 600 10.5px var(--schrift);
    text-align: center; line-height: 1.5; }
  .cpin { display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--dim); margin-right: 5px; vertical-align: 2px; }
  .cpin.global { background: var(--gold); }
  .pinKnopf { background: transparent; border: 0; color: var(--frei); cursor: pointer;
    padding: 2px; line-height: 0; opacity: 0; transition: opacity .15s ease, color .15s ease; }
  .chatZeile:hover .pinKnopf, .pinKnopf.an, .pinKnopf:focus-visible { opacity: 1; }
  .pinKnopf.an { color: var(--gold); }
  .pinKnopf .ikon { width: 12px; height: 12px; }
  /* Sub-Reiter des Bereichs: nur sichtbar, solange man drin ist. */
  .navUnter { display: none; padding-left: 26px; }
  .navUnter.offen { display: block; }
  .navUnterKnopf { display: block; width: 100%; text-align: left; background: transparent;
    border: 0; color: var(--dim); font: 400 12px var(--schrift); padding: 5px 8px;
    cursor: pointer; border-radius: 6px; }
  .navUnterKnopf:hover, .navUnterKnopf:focus-visible { color: var(--text);
    background: color-mix(in srgb, var(--gold) 6%, transparent); outline: none; }
  .navUnterKnopf.aktiv { color: var(--text); font-weight: 500; }
  .chatZeile { display: flex; align-items: center; gap: 6px; }
  .chatEintrag { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center;
    gap: 8px; flex-wrap: wrap; background: transparent; border: 1px solid transparent; border-radius: 8px;
    padding: 6px 10px; cursor: pointer; font-family: inherit; text-align: left; }
  .chatEintrag:hover, .chatEintrag:focus-visible { border-color: var(--linie);
    background: color-mix(in srgb, var(--gold) 6%, transparent); outline: none; }
  .chatEintrag.chatAktiv { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
  .cbildHalter { position: relative; flex: none; width: 24px; height: 24px; display: grid;
    place-items: center; background: var(--zeile); border-radius: 7px; }
  /* Zwei Klassen, damit die Regel die 18-px-Basis aus huelle.css schlaegt. */
  .cbildHalter .cbild { width: 16px; height: 16px; color: var(--dim); }
  .chatEintrag.chatAktiv .cbild { color: var(--goldText); }
  .csiegel { position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--gold); border: 1px solid var(--panel); }
  .chatEintrag .ctitel { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .chatEintrag.chatAktiv .ctitel { color: var(--goldText); }
  .cmarke { flex: none; margin-left: auto; width: 4px; height: 20px; border-radius: 3px;
    background: var(--alter, var(--dim)); }
  html[data-design="tageslicht"] .cmarke { filter: brightness(.82) saturate(1.1); }
  .chatEintrag .cdetail { flex-basis: 100%; font-size: 10.5px; color: var(--dim); padding-left: 32px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Aktions-Slot: feste Breite (auch leer) hält alle Bänder in einer Linie. */
  /* 13.08.2026: `width: auto` statt fester 26px — seit dem Archiv-Knopf stehen
     dort bis zu drei Schalter nebeneinander, nicht mehr genau einer. */
  .aktionSlot { flex: none; width: auto; gap: 2px; display: flex; align-items: center; justify-content: center; }
  /* Andock-Kasten fuer das Dazulegen an der Szene: Die Geometrie gehoert
     hierher, nicht als `style.cssText` ins JavaScript. */
  #szeneDazu { position: absolute; right: 14px; bottom: 14px; z-index: 6;
               width: min(340px, calc(100% - 28px)); }
  .teilenKnopf { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer;
    border-radius: 6px; opacity: .4; transition: opacity .15s ease, transform .15s ease; }
  .teilenKnopf { color: var(--dim); }
  .teilenKnopf .ikon { width: 16px; height: 16px; margin: auto; }
  .chatZeile:hover .teilenKnopf, .teilenKnopf:focus-visible { opacity: .85; outline: none; }
  .teilenKnopf.geteilt { opacity: 1; }
  .teilenKnopf:hover { opacity: 1; transform: scale(1.12); }
  /* „+" sichtbar neben dem Kategorie-Namen (nicht in der Zähler-Spalte, damit die
     Zähler rechts in einer Linie bleiben). Dezent, Gold beim Anfassen. */
  .katPlus { flex: none; width: 18px; height: 18px; line-height: 16px; text-align: center;
    border-radius: 5px; color: var(--dim); font-size: 15px; cursor: pointer;
    transition: color .12s ease, background .12s ease; }
  .katPlus:hover, .katPlus:focus-visible { color: var(--goldText);
    background: color-mix(in srgb, var(--gold) 14%, transparent); outline: none; }
  .teamNeuFeld { display: block; box-sizing: border-box; width: calc(100% - 20px); margin: 4px 10px 6px;
    background: var(--bg); border: 1px solid var(--gold); border-radius: 7px; color: var(--text);
    font: inherit; font-size: 12.5px; padding: 6px 9px; }
  .teamNeuFeld:focus { outline: none; }
  .teamNeuFeld.verborgen { display: none; }

  /* --- Setup-Formular: neuer Chat (Agent -> Arbeitsbereich) --- */
  .setupBody { padding: 4px 2px 14px; display: flex; flex-direction: column; gap: 14px; }
  .setupAbschnitt { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--dim); }
  /* Die Chips Einzel/Team standen hier bis Welle 3; die Art bringt jetzt der Menüpunkt mit. */
  .agentGalerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .agentKarte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: var(--panel); border: 1.5px solid var(--linie); border-radius: 12px; padding: 14px 10px;
    cursor: pointer; font: inherit; transition: transform .15s ease, border-color .15s ease; }
  .agentKarte:hover, .agentKarte:focus-visible { transform: translateY(-2px); outline: none;
    border-color: color-mix(in srgb, var(--gold) 40%, var(--linie)); }
  .agentKarte.aktiv { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
  .agentBild { width: 48px; height: 48px; image-rendering: pixelated; }
  .agentName { color: var(--text); font-size: 14px; font-weight: 600; }
  .regionSiegel { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--dim);
    background: var(--zeile); border-radius: 99px; padding: 2px 8px; }
  .regionSiegel img { width: 12px; height: 12px; image-rendering: pixelated; }
  .vorschauEcke { position: absolute; top: 8px; right: 8px; font-size: 9.5px; letter-spacing: .3px;
    text-transform: uppercase; color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent);
    border-radius: 6px; padding: 1px 6px; }
  .bereichRegal { display: flex; flex-direction: column; gap: 6px; }
  .bereichRegal:empty { display: none; }
  .agentSatz { color: var(--dim); font-size: 12.5px; font-style: italic; margin-bottom: 2px; }
  .bereichZeile { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid var(--linie);
    border-radius: 9px; padding: 8px 11px; cursor: pointer; font: inherit; text-align: left; }
  .bereichZeile .ikon { width: 20px; height: 20px; color: var(--dim); }
  .bereichZeile:hover:not(.gesperrt), .bereichZeile:focus-visible { border-color: var(--gold); outline: none; }
  .bereichZeile.aktiv { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
  .bereichZeile.gesperrt { opacity: .45; cursor: not-allowed; }
  .bereichText { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .bereichName { color: var(--text); font-size: 13.5px; }
  .bereichInfo { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bstatus { margin-left: auto; font-size: 10px; letter-spacing: .3px; text-transform: uppercase; color: var(--warn); flex: none; }
  .regalHinweis { color: var(--dim); font-size: 12px; padding: 4px 2px; }
  .setupFuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
  #setupTitelFeld { flex: 1; min-width: 160px; background: var(--bg); border: 1px solid var(--gold); border-radius: 8px;
    color: var(--text); font: inherit; font-size: 13px; padding: 8px 11px; }
  #setupTitelFeld:focus { outline: none; }
  #setupTitelFeld.verborgen { display: none; }
  #setupStart { padding: 9px 18px; }
  #setupStart:disabled { opacity: .4; cursor: not-allowed; }
  .setupHinweis { flex-basis: 100%; color: var(--dim); font-size: 12px; }

  /* --- Notizzettel (v0.7): sichtbares Sitzungs-Gedächtnis -------------------- */
  /* `#abschlussModal` steht seit dem 06.09.2026 mit in dieser Reihe: Er ist
     kein Overlay mehr, sondern ein Panel wie die anderen — sein Behälter ist
     still, sein `.pmInhalt` zieht bei Bedarf nach `#seitePanel` um. */
  #notizModal, #eingangModal, #mappeModal, #adminModal,
  #abschlussModal { display: none; }

  /* --- Vorgangsmappe (v0.7, 14.07.): Tisch aufräumen + Übergabe-Formular ----- */
  .mappeFeld { margin: 8px 0; }
  .mappeFeld label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 3px; }
  .mappeFeld textarea { width: 100%; background: var(--bg); border: 1px solid var(--linie);
    border-left: 3px solid var(--gold); border-radius: 8px; color: var(--text);
    padding: 8px 11px; font: inherit; font-size: 13.5px; resize: vertical; }
  .mappeFeld textarea:focus { outline: none; border-color: var(--gold); }
  .mappeFeld textarea[readonly] { border-left-color: var(--linie); color: var(--dim); }
  #mappeStand { font-size: 12px; color: var(--dim); margin: 2px 0 6px; }
  #mappeZettel { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
  .mappeZettelZeile { display: flex; align-items: baseline; gap: 8px; background: var(--bg);
    border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
  #mappeBilanz { font-size: 12.5px; color: var(--dim); margin: 8px 0 4px; }
  #mappeModal .knoepfe { display: flex; gap: 8px; margin-top: 8px; }
  /* Die eigene Eingabe steht seit dem 16.08.2026 UNTEN, hinter der Liste: Die
     Notizen entstehen aus dem Gespraech, das Selbstschreiben ist der zweite
     Weg. Die Reihenfolge auf dem Schirm erzaehlt, welcher der erste ist. */
  /* `:not([hidden])`, weil die eigene Eingabe seit dem 23.08.2026 zugeklappt
     beginnt — eine nackte `display`-Regel wuerde das Attribut schlagen. */
  #notizNeu:not([hidden]) { display: flex; gap: 8px; margin: 14px 0 0; }
  #notizNeu input { flex: 1; background: var(--bg); border: 1px solid var(--linie);
    border-radius: 8px; color: var(--text); padding: 9px 12px; font: inherit; font-size: 14px; }
  #notizNeu input:focus { outline: none; border-color: var(--gold); }
  #notizNeu .aktion { flex: none; width: 40px; height: 40px; display: flex;
    align-items: center; justify-content: center; padding: 0; }
  .notizWerkzeuge { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
  .notizWerkzeuge .aktion { display: inline-flex; align-items: center; gap: 8px; }
  .notizWerkzeuge .aktion .ikon { width: 16px; height: 16px; }
  /* Renés F9 (06.09.2026): „Wenn ich auf Zusammenfassen klicke, passiert
     scheinbar nichts." Der Knopf war schon gesperrt — gesperrt und laufend sahen
     nur gleich aus. Jetzt trägt der Lauf eine eigene Farbe und einen wandernden
     Schimmer; `aria-busy` sagt dasselbe der Vorlesesoftware. */
  .notizWerkzeuge .aktion[aria-busy="true"] { position: relative; overflow: hidden;
    border-color: var(--gold); color: var(--goldText); cursor: progress; opacity: 1; }
  .notizWerkzeuge .aktion[aria-busy="true"]::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%,
      color-mix(in srgb, var(--gold) 34%, transparent) 50%, transparent 80%);
    animation: nLaeuft 1.1s linear infinite; }
  @keyframes nLaeuft { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  /* Und die Antwort danach muss WIEDERHOLT aussehen, wenn sie wiederholt ist:
     Ein zweites „nichts Neues" an derselben Stelle ist von seinem Vorgänger
     nicht zu unterscheiden. Deshalb blinkt die Zeile einmal auf. */
  @keyframes nFrischGeprueft {
    0%   { background: color-mix(in srgb, var(--gold) 30%, transparent); }
    100% { background: transparent; }
  }
  #notizHinweisZiehen.frischGeprueft { animation: nFrischGeprueft 1.4s ease-out;
    border-radius: 8px; }
  .notizStapel { display: inline-flex; gap: 6px; margin-left: auto; }
  .stapelKnopf { display: inline-flex; align-items: center; gap: 5px; min-height: 32px;
    padding: 0 10px; background: color-mix(in srgb, var(--gold) 14%, transparent);
    border: 1px solid var(--gold); border-radius: 8px; color: var(--goldText);
    font: inherit; font-size: 12.5px; cursor: pointer; font-variant-numeric: tabular-nums; }
  .stapelKnopf .ikon { width: 15px; height: 15px; }
  .stapelKnopf.weg { background: transparent; border-color: var(--linie); color: var(--dim); }
  .stapelKnopf:hover { filter: brightness(1.15); }
  .stapelKnopf.weg:hover { border-color: var(--gold); color: var(--text); }
  #notizListe { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
  .notizZeile { display: flex; align-items: center; gap: 10px; background: var(--bg);
    border: 1px solid var(--linie); border-left: 3px solid var(--gold); border-radius: 8px;
    padding: 9px 12px; }
  /* Der Geist-Zustand: Ein Vorschlag steht sichtbar da, mit seinem vollen Text,
     aber gedaempft und gestrichelt umrandet. Das ist der Kern des Verfahrens —
     eine Freigabe-Frage OHNE den Inhalt („3 Eintraege uebernehmen?") laesst den
     Nutzer zustimmen, ohne gelesen zu haben, und ist damit keine Freigabe. */
  .notizZeile.vorschlag { border-style: dashed; border-left-style: dashed;
    background: color-mix(in srgb, var(--gold) 5%, var(--bg)); }
  .notizZeile.vorschlag .ntext { color: var(--dim); }
  .notizZeile .ntext { flex: 1; font-size: 14px; }
  .notizZeile .nmeta { flex: none; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
  /* Die Art ist ein Umschalter, kein Auswahlfeld — ein Klick dreht weiter.
     Farbe UND Form unterscheiden die vier Arten; ohne Farbe bliebe nur das
     Symbol, ohne Form nur der Fleck. */
  .notizZeile .nart { flex: none; width: 32px; height: 32px; display: flex;
    align-items: center; justify-content: center; background: transparent;
    border: 1px solid var(--linie); border-radius: 8px; cursor: pointer;
    color: var(--dim); padding: 0; }
  .notizZeile .nart .ikon { width: 16px; height: 16px; }
  .notizZeile .nart:hover, .notizZeile .nart:focus-visible { border-color: var(--gold); outline: none; }
  .notizZeile .nart.art-entscheidung { color: var(--goldText); }
  .notizZeile .nart.art-aufgabe { color: var(--blau, #6f8cff); }
  .notizZeile .nart.art-frage { color: var(--warn, #d98a3a); }
  .nAktionen { flex: none; display: flex; gap: 6px; }
  .nAktion { width: 32px; height: 32px; display: flex; align-items: center;
    justify-content: center; background: transparent; border: 1px solid var(--linie);
    border-radius: 8px; color: var(--dim); cursor: pointer; padding: 0; }
  .nAktion .ikon { width: 15px; height: 15px; }
  .nAktion.ja:hover, .nAktion.ja:focus-visible { border-color: var(--gold); color: var(--goldText); outline: none; }
  .nAktion.weg:hover, .nAktion.weg:focus-visible { border-color: var(--randStark); color: var(--text); outline: none; }