/* --- Unterlage aufs Pult (v0.7): Klammer, Chips, Eingangs-Quarantäne ------- */
  /* Randlos wie alle Werkzeuge in der Fußzeile: der Hover ist eine
     eingeblendete Fläche, kein erscheinender Rahmen (der würde 1px schieben). */
  #anhangKnopf { flex: none; width: 40px; height: 40px; display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 99px; cursor: pointer; color: var(--dim); }
  #anhangKnopf .ikon { width: 18px; height: 18px; }
  #anhangKnopf:hover, #anhangKnopf:focus-visible { background: var(--zeile); outline: none; }
  #anhangKnopf:hover .ikon, #anhangKnopf:focus-visible .ikon { color: var(--text); }
  #anhangChips { display: flex; flex-wrap: wrap; gap: 6px; }
  .anhangChip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 6px 3px 10px;
    border: 1px solid var(--linie); border-left: 3px solid var(--gold); border-radius: 99px;
    font-size: 12.5px; background: var(--bg); }
  .anhangChip button { border: 0; background: transparent; color: var(--dim); font-size: 14px;
    line-height: 1; cursor: pointer; padding: 2px 4px; }
  .anhangChip button:hover { color: var(--text); }
  #eingabe.zieht-datei { outline: 2px dashed var(--gold); outline-offset: -5px; }
  #eingangListe { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
  .eingangZeile { display: flex; flex-direction: column; gap: 8px; background: var(--bg);
    border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; }
  .eingangKopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .eingangName { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  /* Eingeschleuste Anweisung erkannt (13.08.2026): Die Zeile traegt den Befund
     sichtbar, damit niemand stempelt und uebernimmt, ohne ihn gelesen zu haben. */
  /* Filter-Chips im Ansichts-Kopf (13.08.2026). Bewusst flach: sie ersetzen
     drei Menue-Eintraege, sie sollen keine zweite Navigation aufmachen. */
  .ansichtChips { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
  /* 32 Pixel Mindest-Flaeche (Haus-Regel §4). Der Chip SIEHT weiter klein aus —
     nur seine Flaeche waechst, genau wie beim Statuspunkt daneben. Der
     Bild-Pruefer hat sie am 20.08.2026 mit 22 Pixel Hoehe gemeldet. */
  .ansichtChip { font-size: 12px; padding: 3px 10px; border-radius: 999px;
    min-height: 32px; display: inline-flex; align-items: center;
    border: 1px solid var(--linie); background: transparent; color: var(--text-schwach);
    cursor: pointer; }
  .ansichtChip.aktiv { color: var(--text); border-color: var(--akzent);
    background: color-mix(in srgb, var(--akzent) 12%, transparent); }
  /* Marke ueber dem Verlauf: sie beschreibt das Meeting, nicht eine Antwort. */
  /* Meeting-Rechte einer Person: erscheinen auf Klick unter ihrer Zeile.
     Eingerueckt, damit die Zugehoerigkeit ohne Rahmen lesbar ist. */
  /* Rechte-Umschalter (13.08.2026): drei Zustaende als Form und Farbe.
     Nur der aktive Zustand traegt Farbe — sonst leuchtet die Reihe wie ein
     Weihnachtsbaum und man sucht den gesetzten. Bewegung nur ueber `opacity`
     und `transform` am Element selbst (ADR-077, kein Layout-Reflow). */
  /* Leerzustaende: ein Symbol, ein Satz. Kein Absatz, der zwei Dinge
     gleichzeitig erklaert (13.08.2026, Regel "Symbole > Text"). */
  .leerZustand { display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 28px 16px; color: var(--text-schwach); text-align: center; }
  .leerZustand .ikon { width: 30px; height: 30px; opacity: .4; }
  .leerSatz { font-size: 13px; margin: 0; max-width: 34ch; line-height: 1.5; }

  /* Der Entwickler-Absatz auf der Werbeseite (24.08.2026). Er steht zwischen
     Angebot und Kleingedrucktem und ist abgesetzt, damit er nicht wie eine
     weitere Fusszeile gelesen wird. Masse hier, nicht im JavaScript. */
  .werbeMacher { margin: 18px 0 4px; padding-top: 16px;
    border-top: 1px solid var(--linie); text-align: center; }
  .werbeMacherTitel { font: 600 15px/1.3 Georgia, serif; margin: 0 0 4px;
    color: var(--text); }
  .werbeMacherSatz { font-size: 13px; line-height: 1.5; margin: 0 auto 8px;
    max-width: 46ch; color: var(--text-schwach); }
  .werbeMacherLinks { margin: 0; font-size: 14px; }
  .werbeMacherLinks a { display: inline-block; min-height: 32px; padding: 6px 4px;
    color: var(--akzent); }
  @media (max-width: 767px) {
    .werbeMacherLinks a { min-height: 36px; }
  }

  /* Leerzustand des Gespraechs (24.08.2026). Er sitzt im Chat-Bereich und
     traegt Symbol, Ueberschrift, EINEN Satz und drei Vorschlaege — keine
     Textwand (Haus-Regel „Progressive Disclosure"). Alle Masse stehen hier
     und nicht im JavaScript, damit die Bildschirm-Regel unten greifen kann. */
  #chatLeer { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 40px 20px; margin: auto;
    color: var(--text-schwach); text-align: center; }
  #chatLeer[hidden] { display: none; }
  #chatLeer .ikon { width: 34px; height: 34px; opacity: .35; }
  #chatLeer h2 { font: 600 17px/1.3 Georgia, serif; margin: 0; color: var(--text); }
  #chatLeer p { font-size: 13px; margin: 0; max-width: 42ch; line-height: 1.55; }
  .leerVorschlaege { display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center; justify-content: center; margin-top: 4px; }
  .leerVorschlagKopf { font-size: 12px; opacity: .7; }
  .leerVorschlag { min-height: 32px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--linie); background: var(--bg);
    color: var(--text); font-size: 13px; cursor: pointer; }
  .leerVorschlag:hover { border-color: var(--akzent); }
  #leerZuWork { min-height: 32px; margin-top: 6px; }

  /* Die Ausgaenge des Abschluss-Dialogs: Symbol-Knoepfe mit Hover-Hinweis
     (Haus-Regel 17 §4). Gross genug, um ohne Beschriftung getroffen zu werden;
     der haeufige Weg traegt die Haupt-Farbe. */
  .abFuss { display: flex; gap: 12px; align-items: center; }
  .abGross { min-width: 52px; min-height: 44px; justify-content: center; padding: 0; }
  .abGross .ikon { width: 20px; height: 20px; }
  .abFrage { background: none; border: 0; padding: 4px; cursor: help;
    color: var(--dim); min-width: 32px; min-height: 32px; }
  .abFrage .ikon { width: 15px; height: 15px; }

  /* Kein Gespraech offen (24.08.2026, Flows Vorgabe): Der Chat verschwindet
     wirklich — Verlauf, Eingabefeld, Trenner und Schreibtisch gehen weg. Was
     bleibt, ist die Flaeche und die Leiste rechts.
     Der Grund fuer die Textur: Eine einfarbige schwarze Flaeche liest sich wie
     ein Fehler ("da fehlt was"), eine getoente wie ein Raum, in dem gerade
     nichts liegt. Drei Lagen Licht — KEINE Textur: Die Huelle bleibt
     texturfrei, Material gehoert in die Szene (Flows Entscheidung vom
     10.07.2026, im Testlauf als Zusicherung verankert). */
  body.keinGespraech #verlauf,
  body.keinGespraech #eingabe,
  body.keinGespraech #chatLeer,
  body.keinGespraech #trenner,
  body.keinGespraech aside { display: none; }
  body.keinGespraech #chat {
    background:
      radial-gradient(760px 420px at 26% 12%, rgba(99,102,241,.10), transparent 64%),
      radial-gradient(620px 520px at 82% 84%, rgba(217,164,65,.07), transparent 62%),
      radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.05), transparent 100%),
      linear-gradient(168deg, var(--bgHell, #16171b) 0%, var(--bg, #0e0f12) 72%);
    position: relative;
  }
  /* Die Marke als Wasserzeichen: zu erkennen, wenn man hinsieht, und
     uebersehbar, wenn nicht. Kein Text — die Flaeche soll nichts behaupten. */
  body.keinGespraech #chat::after {
    content: ""; position: absolute; inset: 0;
    background: url("/static/marke.svg") no-repeat center / 132px;
    opacity: .05; pointer-events: none;
  }
  @media (max-width: 767px) {
    .abGross { min-height: 44px; }
    .abFrage { min-height: 36px; min-width: 36px; }
  }
  @media (max-width: 767px) {
    .leerVorschlag, #leerZuWork { min-height: 36px; }
    #chatLeer { padding: 28px 14px; }
  }
  .uLeiste { display: inline-flex; gap: 2px; border: 1px solid var(--linie);
    border-radius: 8px; padding: 2px; background: var(--bg); }
  /* Die Farbe haengt am Symbol, nicht am aktiven Zustand (13.08.2026, nach
     dem ersten echten Blick in die Oberflaeche). Vorher trug nur der gewaehlte
     Knopf Farbe — und weil "erbt" der Normalfall jeder Zeile ist, war die
     ganze Matrix eine graue Wueste, in der kein Symbol seine Bedeutung
     verriet. Discord faerbt immer; gewaehlt wird zusaetzlich markiert. */
  .uKnopf { display: grid; place-items: center; width: 26px; height: 22px;
    border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    opacity: .62;
    transition: opacity .12s ease, background-color .12s ease; }
  .uKnopf.uErlaubt { color: var(--gut, #5aa469); }
  .uKnopf.uVerboten { color: var(--warn); }
  .uKnopf.uErbt { color: var(--text-schwach); }
  .uKnopf:hover { opacity: 1; }
  .uKnopf .ikon { width: 15px; height: 15px; }
  .uKnopf[disabled] { cursor: default; opacity: .25; }
  /* Der gewaehlte Zustand traegt Flaeche UND vollen Kontrast — der Unterschied
     muss aus zwei Metern erkennbar sein, nicht aus zwanzig Zentimetern. */
  .uKnopf.uAn { opacity: 1; box-shadow: inset 0 0 0 1px currentColor; }
  .uKnopf.uAn.uErlaubt {
    background: color-mix(in srgb, var(--gut, #5aa469) 30%, transparent); }
  .uKnopf.uAn.uVerboten {
    background: color-mix(in srgb, var(--warn) 30%, transparent); }
  .uKnopf.uAn.uErbt { color: var(--text);
    background: color-mix(in srgb, var(--linie) 70%, transparent); }
  /* Zeilen-Aktionen als Symbol: das Wort steht im Hover, nicht in der Flaeche. */
  /* 32 Pixel sind das Mindestmaß für alles Antippbare (Haus-Regel §6). Diese
     Knöpfe standen bis 21.08.2026 auf 28 x 26 — der Bild-Prüfer hatte sie nie
     gemessen, weil das Einstellungs-Panel bei seinen Läufen nie offen war.
     Das Symbol darin bleibt klein; nur die Fläche wächst. */
  .zAktion { display: grid; place-items: center; width: 32px; height: 32px;
    border: 1px solid var(--linie); border-radius: 8px; background: transparent;
    color: var(--text-schwach); cursor: pointer; transition: color .12s ease, border-color .12s ease; }
  .zAktion:hover { color: var(--text); border-color: var(--akzent); }
  .zAktion .ikon { width: 15px; height: 15px; }
  /* Mitglieder-Suche statt Dauer-Hinweis: das Feld steht da, die Antwort
     kommt beim Hineinklicken. */
  /* Name des Meetings (21.08.2026): Feld und Symbol-Knopf in einer Zeile.
     Der Knopf trägt keinen Text — das Wort lebt im Hover (Haus-Regel §4). */
  .chatEinstNameZeile { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
  .chatEinstNameFeld { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px;
    border: 1px solid var(--linie); background: var(--bg); color: var(--text);
    font: inherit; font-size: 13px; min-height: 32px; }
  .chatEinstNameFeld:disabled { color: var(--dim); cursor: not-allowed; }
  .chatEinstSuche { position: relative; margin-top: 8px; }
  .chatEinstSuchFeld { width: 100%; padding: 7px 10px; border-radius: 8px;
    border: 1px solid var(--linie); background: var(--bg); color: var(--text);
    font: inherit; font-size: 13px; }
  .chatEinstTreffer { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
  .chatEinstTrefferZeile { display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 5px 8px; border: 0; border-radius: 8px; background: transparent;
    color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
  .chatEinstTrefferZeile:hover { background: var(--bgHell); }
  .chatEinstTrefferZeile .ikon { width: 14px; height: 14px; margin-left: auto; color: var(--text-schwach); }
  .chatEinstLeer { font-size: 12px; color: var(--text-schwach); padding: 6px 8px; }
  .meetingRechte { margin: 4px 0 8px 34px; display: flex; flex-direction: column; gap: 4px; }
  .meetingRechtZeile { display: flex; align-items: center; gap: 8px; font-size: 12px; }
  .mrName { flex: 1; }
  .mrHerkunft { color: var(--text-schwach); font-size: 11px; }
  .vSchalter { font-size: 12px; }
  .fensterStand { font-size: 12px; color: var(--text-schwach); padding: 6px 14px;
    border-bottom: 1px solid var(--linie); cursor: help; }
  .eingangVerdacht { border-color: var(--warn); }
  .eingangWarnung { font-size: 12px; line-height: 1.45; color: var(--warn);
    border-left: 2px solid var(--warn); padding-left: 8px; }
  .eingangMeta { flex: none; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
  .eingangAktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .eingangAktionen .aktion { padding: 5px 12px; font-size: 12.5px; }
  .eingangAktionen .aktion:disabled { opacity: .45; cursor: not-allowed; }
  .eingangAktionen .wegKnopf { margin-left: auto; background: transparent;
    border: 1px solid var(--linie); color: var(--dim); border-radius: 7px;
    padding: 4px 10px; font-size: 12px; cursor: pointer; }
  .eingangAktionen .wegKnopf:hover { border-color: var(--gold); color: var(--text); }

  /* --- Rückfrage + Aufgaben-Merker (P1.7) ------------------------------------ */
  .rueckfrageChips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .rueckfrageChip { font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    border: 1px solid var(--linie); border-radius: 99px; padding: 6px 14px; }
  .rueckfrageChip:hover, .rueckfrageChip:focus-visible { border-color: var(--gold); outline: none; }
  .aufgabenBlock { margin-top: 12px; padding: 9px 12px; background: var(--bg);
    border: 1px solid var(--linie); border-left: 3px solid var(--gold); border-radius: 8px; }
  .aufgabenBlock .atitel { font-size: 11.5px; color: var(--dim); margin-bottom: 5px; }
  .aufgabenBlock .azeile { font-size: 13.5px; padding: 2px 0; }

  /* --- Prozessbibliothek-Modal ---------------------------------------------- */
  #prozessModal { position: fixed; inset: 0; background: rgba(10,8,4,.72); display: none;
    align-items: center; justify-content: center; z-index: 70; padding: 22px; }
  #prozessModal.offen { display: flex; }
  .pmInhalt { background: var(--panel); border: 1px solid var(--linie); border-radius: 14px;
    /* Scrollbar und dvh (30.07.2026): bei 375x360 lag der Anmelde-Knopf
       ausserhalb des Bildes, und weil der Rumpf nicht scrollt, kam man
       nicht an ihn heran — der Zugang war schlicht zu. */
    width: min(860px, 100%); max-height: min(88dvh, 100%);
    overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column;
    padding: 18px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
  /* Der Kopf bleibt stehen — in JEDEM Dialog, nicht nur in der Seitenansicht
     (13.08.2026). `.pmInhalt` scrollt seit dem 30.07., der Kopf war aber nur
     unter `#seite` fixiert: In den Overlays wanderte er beim Scrollen nach oben
     aus dem Bild, und mit ihm die Überschrift, der Einleitungssatz und der
     Schliessen-Knopf. Sichtbar in Flows Screenshots als "abgeschnittener"
     Dialog — es fehlte nichts, es war nur weggerollt. */
  /* Der Abstand nach unten ist PADDING, nicht margin. Ein klebender Kopf mit
     margin-bottom hat unter sich einen durchsichtigen Streifen — der Text,
     der darunter wegscrollt, bleibt darin sichtbar und sieht aus wie eine
     abgeschnittene Zeile. Genau das war Flows Befund vom 13.08.2026, und
     es war mein eigener Fehler vom selben Tag. Padding traegt den
     Hintergrund mit, margin nicht. */
  .pmKopf { display: flex; gap: 10px; align-items: center;
    position: sticky; top: -18px; z-index: 3; background: var(--panel);
    padding: 18px 0 12px; margin: -18px 0 0; }
  .pmKopf h2 { font: 700 18px var(--schrift); color: var(--kopf); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* `min-height` statt Innenabstand: Der Schliessen-Knopf kam auf 30 Pixel und
     lag damit unter dem Mindest-Tippziel — gefunden vom Bild-Pruefer am
     16.08.2026, und ausgerechnet an dem Knopf, der der einzige sichtbare
     Ausweg aus einem offenen Panel ist. */
  .pmKopf button { background: transparent; border: 1px solid var(--linie); color: var(--dim);
    border-radius: 8px; padding: 4px 12px; min-height: 32px; font: inherit; font-size: 13px;
    cursor: pointer; }
  .pmKopf button:hover { border-color: var(--blau); color: var(--text); }
  #pmSuche { background: var(--bg); border: 1px solid var(--linie); border-radius: 8px;
    color: var(--text); padding: 8px 12px; margin-bottom: 12px; font: inherit; font-size: 13.5px; }
  #pmSuche:focus { outline: none; border-color: var(--blau); }
  /* --- Hilfe-Ebenen: Umschalter, Marke, Anlass, Leerzustand (18.08.2026) ----
     Drei Schwellen als Symbol-Knöpfe. Alle Maße stehen HIER und nicht im
     JavaScript — sonst käme die Regel unten für schmale Schirme nicht mehr
     dagegen an (Haus-Regel "Maße gehören ins Stylesheet"). */
  .pmEbenen { display: flex; gap: 6px; margin: 0 0 10px; }
  .pmEbenen[hidden] { display: none; }
  .pmEbene { position: relative; display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 32px; padding: 0 10px;
    background: var(--bg); border: 1px solid var(--linie); border-radius: 8px;
    color: var(--dim); cursor: pointer; font: inherit; }
  .pmEbene[hidden] { display: none; }
  .pmEbene .ikon { width: 18px; height: 18px; }
  .pmEbene:hover, .pmEbene:focus-visible { border-color: var(--blau); color: var(--text); }
  /* Der aktive Zustand unterscheidet sich in FARBE UND FORM: getönter Grund,
     stärkerer Rand — und ein Balken unter dem Symbol. Nur über Farbe wäre
     er für Farbenblinde unsichtbar, und ein Umschalter, dessen Stand man
     nicht sieht, ist keiner. */
  .pmEbene[aria-pressed="true"] { color: var(--goldText); border-color: var(--gold);
    border-radius: 8px 8px 3px 3px;
    background: color-mix(in srgb, var(--gold) 12%, var(--panel)); }
  .pmEbene[aria-pressed="true"]::after { content: ""; position: absolute;
    left: 22%; right: 22%; bottom: 2px; height: 3px; border-radius: 2px;
    background: currentColor; }
  /* Marke an einer Listenzeile: nur dort, wo die Stufe von der normalen Hilfe
     abweicht. Das Wort dazu steht im Hover-Hinweis. */
  .pmEbeneMarke { display: inline-flex; align-items: center; flex: none; color: var(--dim); }
  .pmEbeneMarke .ikon { width: 14px; height: 14px; }
  /* Anlass-Kasten ("wann brauche ich das?") — die beste Sucheingabe der
     Bibliothek, deshalb steht sie oben und nicht im Fließtext. */
  .pmWann { display: flex; gap: 9px; align-items: flex-start;
    background: var(--zeile); border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0; padding: 9px 12px; margin: 2px 0 10px;
    font-size: 13px; color: var(--text); }
  .pmWann[hidden] { display: none; }
  .pmWann .ikon { width: 16px; height: 16px; margin-top: 2px; color: var(--goldText); }
  .pmWannListe { margin: 0; padding-left: 17px; }
  .pmWannListe li { margin: 1px 0; }
  /* Leerzustand: ein Symbol, ein Satz. Kein Absatz. */
  .pmLeer { display: flex; flex-direction: column; align-items: center; gap: 9px;
    color: var(--dim); font-size: 13px; line-height: 1.5; text-align: center;
    padding: 28px 14px; }
  .pmLeer .ikon { width: 28px; height: 28px; opacity: .5; }
  #pmListe { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
  .pmGruppe { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .9px; margin: 8px 0 0; }
  .pmEintrag { text-align: left; background: var(--bg); border: 1px solid var(--linie);
    border-radius: 10px; padding: 10px 14px; cursor: pointer; color: var(--text); font: inherit; }
  .pmEintrag:hover { border-color: var(--gold); }
  .pmEintrag .pname { display: flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 14px; }
  .pmEintrag .psummary { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
  #pmDetail { overflow-y: auto; display: none; }
  /* Hilfe-Bibliothek: Gruppen-Accordion + Start/Ende-Zeile (Hub-Vorbild) */
  /* `min-height`: Der Gruppenkopf ist ein Knopf (er klappt die Gruppe zu) und
     kam mit 26 Pixeln unter das Mindest-Tippziel — gefunden vom Bild-Prüfer
     am 18.08.2026 beim Kontrollgang durch die Hilfe. Die Schriftgröße bleibt
     klein, nur die Fläche wächst. */
  .pmGruppe.klappbar { display: flex; align-items: center; gap: 6px; width: 100%;
    min-height: 32px;
    background: transparent; border: 0; cursor: pointer; font-family: inherit;
    text-align: left; padding: 6px 4px; border-radius: 7px; }
  .pmGruppe.klappbar::before { content: "\25B8"; font-size: 8px; transition: transform .15s ease; }
  .pmGruppe.klappbar.offen::before { transform: rotate(90deg); }
  .pmGruppe.klappbar:hover { color: var(--text); }
  .pmGruppe.klappbar .kzahl { margin-left: auto; font-size: 10px; color: var(--dim);
    background: var(--zeile); border-radius: 99px; padding: 1px 7px; text-transform: none; letter-spacing: 0; }
  .pgInhalt { display: none; }
  .pgInhalt.offen { display: flex; flex-direction: column; gap: 8px; }
  #pmStartEnde { font-size: 12.5px; color: var(--dim); margin: 2px 0 8px;
    border-left: 3px solid color-mix(in srgb, var(--gold) 45%, transparent); padding-left: 10px; }
  .abzeichen { display: inline-block; font-size: 11px; border: 1px solid var(--linie);
    border-radius: 99px; padding: 2px 10px; margin: 0 6px 8px 0; color: var(--dim); }
  /* Ebenen-Chip in der Detail-Ansicht: Symbol UND Wort, weil er hier allein
     steht und nicht in einer Reihe gleichartiger Knöpfe. */
  .abzeichen.ebene { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
  .abzeichen.ebene .ikon { width: 14px; height: 14px; }
  .abzeichen.ebene-admin { color: var(--goldText);
    border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
  .abzeichen.ebene-dev { color: var(--blauText);
    border-color: color-mix(in srgb, var(--blau) 50%, transparent); }
  .abzeichen.status-live { color: var(--gruen); border-color: #2c5c40; }
  .abzeichen.status-draft, .abzeichen.status-planned { color: var(--warn); border-color: #6b4a26; }
  .diagramm { background: var(--bg); border: 1px solid var(--linie); border-radius: 10px;
    padding: 12px; margin: 10px 0; overflow: auto; }
  .diagramm svg { max-width: 100%; min-width: 0 !important; height: auto; }
  .diagramm .fehlschlag { color: var(--warn); font-size: 12.5px; }
  .prozessText { font-size: 14px; }
  .prozessText h1, .prozessText h2, .prozessText h3, .prozessText h4 { font-family: var(--schrift); margin: 14px 0 6px; color: var(--kopf); }
  .prozessText p { margin: 6px 0; }
  .prozessText ul, .prozessText ol { margin: 6px 0 6px 20px; }
  .prozessText pre { background: var(--bg); border: 1px solid var(--linie); border-radius: 8px; padding: 10px; overflow: auto; font-size: 12.5px; margin: 8px 0; }
  .prozessText code { background: var(--zeile); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
  .prozessText pre code { background: transparent; padding: 0; }
  .prozessText table { border-collapse: collapse; margin: 8px 0; max-width: 100%; }
  .prozessText td, .prozessText th { border: 1px solid var(--linie); padding: 4px 9px; font-size: 13px; text-align: left; }
  .prozessText blockquote { border-left: 3px solid var(--gold); margin: 8px 0; padding: 4px 12px; color: var(--dim); }

  /* --- Prüfstand, Sprünge und Rückmeldung (18.08.2026, Etappe 4) -----------
     Alle Maße stehen HIER und nicht im JavaScript: Ein Inline-Maß nimmt sich
     der Regel für schmale Schirme aus der Hand, und die käme nur noch mit
     `!important` dagegen an (Haus-Regel „Maße gehören ins Stylesheet"). */

  /* Symbol-Knopf ohne Wort auf der Fläche — der Text steht im Hover-Hinweis.
     32 Pixel am Schreibtisch, 36 auf dem Telefon (Regel unten). */
  .pmSymbolKnopf { display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; min-height: 32px; flex: none; padding: 0 6px;
    background: var(--bg); border: 1px solid var(--linie); border-radius: 8px;
    color: var(--dim); cursor: pointer; font: inherit; }
  .pmSymbolKnopf:hover, .pmSymbolKnopf:focus-visible { border-color: var(--blau); color: var(--text); }
  .pmSymbolKnopf[hidden] { display: none; }
  .pmSymbolKnopf .ikon { width: 17px; height: 17px; }
  /* Titel und Fragezeichen in einer Zeile; der Titel darf kürzen, der Knopf nicht. */
  .kopfTitelZeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .kopfTitelZeile h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .pmWerkzeuge { display: flex; gap: 6px; margin: 0 0 10px; }
  .pmWerkzeuge:empty { display: none; }
  .pmMelden { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 0 0 10px; }
  .pmMelden[hidden] { display: none; }
  #pmMeldenText { flex: 1 1 180px; min-width: 0; min-height: 32px;
    background: var(--bg); border: 1px solid var(--linie); border-radius: 8px;
    color: var(--text); padding: 6px 10px; font: inherit; font-size: 13px; }
  #pmMeldenText:focus { outline: none; border-color: var(--blau); }
  .pmMeldenStand { flex: 1 0 100%; font-size: 12px; color: var(--dim); }
  .pmMeldenStand:empty { display: none; }

  .pmPruefstand { margin-top: 16px; border-top: 1px solid var(--linie); padding-top: 12px; }
  .pmPruefstand[hidden] { display: none; }
  .pruefTitel { font-size: 11px; color: var(--dim); text-transform: uppercase;
    letter-spacing: .9px; margin-bottom: 8px; }
  .pruefBlock { margin-bottom: 12px; }
  .pruefKopf { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
    font-weight: 600; color: var(--text); margin-bottom: 6px; }
  .pruefKopf .ikon { width: 15px; height: 15px; color: var(--goldText); }
  .pruefAnkerListe { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--dim); }
  .pruefAnkerListe li { margin: 2px 0; overflow-wrap: anywhere; }
  .pruefStand { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
  .pruefHinweis { font-size: 11.5px; color: var(--dim); margin-top: 6px; font-style: italic; }
  .pruefLeer { font-size: 12.5px; color: var(--dim); line-height: 1.5; }

  /* Eine Prüfgruppe. Der Stand steht links als Marke — FARBE UND FORM, nie
     Farbe allein: grüner Haken, roter Balken mit Kreuz, graue Uhr für
     „veraltet", grauer Strich für „nie gemessen". */
  /* Rechter Freiraum für die schwebende Werkzeugleiste (Abnahme-Befund E4,
     18.08.2026): Der Kopier-Knopf lag auf beiden Breiten UNTER dem Griff der
     Leiste — ein Tipp öffnete das Regal statt zu kopieren. Die Maße stimmten,
     verdeckt ist nicht zu klein; genau deshalb meldete der Bild-Prüfer nichts.
     Er vergleicht Nachbarn und kennt schwebende Überlagerungen nicht. */
  .pruefZeile { position: relative; display: flex; align-items: flex-start; gap: 9px;
    background: var(--bg); border: 1px solid var(--linie); border-left-width: 3px;
    border-radius: 8px; padding: 7px 68px 7px 9px; margin: 5px 0; }
  .pruefMarke { display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 20px; height: 20px; color: var(--dim); }
  .pruefMarke .ikon { width: 16px; height: 16px; }
  .pruefText { flex: 1 1 auto; min-width: 0; }
  .pruefName { font-size: 12.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
  .pruefZweck { font-size: 12px; color: var(--dim); margin-top: 1px; }
  .pruefZweck:empty { display: none; }
  .pruefKopiert { position: absolute; right: 8px; bottom: -7px; font-size: 11px;
    color: var(--gruen); background: var(--panel); padding: 0 4px; border-radius: 4px; }
  .pruefZeile.stand-bestanden { border-left-color: var(--gruen); }
  .pruefZeile.stand-bestanden .pruefMarke { color: var(--gruenText); }
  .pruefZeile.stand-gescheitert { border-left-color: var(--warn); }
  .pruefZeile.stand-gescheitert .pruefMarke { color: var(--warnText); }
  /* „Veraltet" ist der HÄUFIGSTE Fall, nicht der Ausnahmefall — deshalb weder
     rot noch grün, sondern neutral: gestrichelter Rand, graue Uhr. Er sagt
     „diese Messung beschreibt einen anderen Quelltext", nicht „kaputt". */
  .pruefZeile.stand-veraltet { border-left-style: dashed; border-left-color: var(--dim); }
  .pruefZeile.stand-nie, .pruefZeile.stand-uebersprungen {
    border-left-style: dotted; border-left-color: var(--randStark); }

  /* --- Team-Schicht: Anmeldung, 2FA, Team & Controlling, Sitzungen ----------- */
  .overlay { position: fixed; inset: 0; background: rgba(10,8,4,.72); display: none;
    align-items: center; justify-content: center; z-index: 70; padding: 22px; }
  .overlay.offen { display: flex; }
  .overlay .pmInhalt { width: min(560px, 100%); }
  /* Vollbild-Anmeldung: ein richtiger Login-Screen — nichts scheint durch */
  .overlay.vollbild { background:
    radial-gradient(1100px 600px at 50% -10%, var(--bgHell), var(--bg) 62%); }
  .overlay.vollbild .pmInhalt.anmeldeKarte { width: min(420px, 94vw);
    border-color: color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: 0 40px 110px rgba(0,0,0,.75);
    background: linear-gradient(180deg, var(--papier), var(--panel)); }
  /* Erstkontakt (29.07.2026): ein Satz ueber dem Formular und ein Weg nach
     draussen darunter. Beides zurueckhaltend — der Schirm soll einladen, nicht
     verkaufen. */
  .anmeldeSatz { text-align: center; color: var(--dim); font-size: 13.5px;
    line-height: 1.5; margin: -4px 0 14px; }
  /* `:not([hidden])`, weil der Fuss-Satz im Passwort-Schritt weggelegt wird —
     eine nackte `display`-Regel wuerde das Attribut schlagen. */
  .anmeldeFuss:not([hidden]) { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie);
    color: var(--dim); font-size: 12.5px; line-height: 1.5; text-align: center; }
  .anmeldeMarke { font: 700 26px var(--schrift); color: var(--kopf); text-align: center;
    letter-spacing: .5px; margin: 4px 0 14px; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
  #teamModal .pmInhalt { width: min(860px, 100%); }
  .formZeile { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
  .formZeile label { font-size: 12px; color: var(--dim); }
  /* `textarea` gehört in dieselbe Aufzählung wie `input` und `select`. Fehlte
     sie, griff die Browser-Voreinstellung: Das Ziele-Feld im Einrichtungs-
     Dialog stand in Monospace neben einem Namensfeld in der Hausschrift —
     ausgerechnet im ersten Bild, das ein neuer Nutzer sieht (21.08.2026). */
  .formZeile input, .formZeile select, .formZeile textarea {
    background: var(--bg); border: 1px solid var(--linie);
    border-radius: 7px; color: var(--text); padding: 8px 11px; font: inherit; font-size: 13.5px; }
  .formZeile textarea { resize: vertical; line-height: 1.5; }
  .formZeile input:focus, .formZeile textarea:focus { outline: none; border-color: var(--blau); }
  /* Das Kaestchen war 13x13 und die Zeile 20 hoch — beides unter dem
     Mindestmass fuer alles Antippbare (Haus-Regel 17 §6), und das
     ausgerechnet im Anmelde-Dialog, dem ersten Bildschirm ueberhaupt.
     Gefunden vom Bild-Pruefer am 21.08.2026, nicht von einem Test. */
  .formHaken { display: flex; gap: 10px; align-items: center; font-size: 13px;
    margin-bottom: 10px; min-height: 32px; cursor: pointer; }
  .formHaken input { accent-color: var(--gold); width: 18px; height: 18px; flex: none; }
  .formFehler { color: var(--warn); font-size: 12.5px; min-height: 18px; margin-bottom: 6px; }
  .teamTabelle { border-collapse: collapse; width: 100%; margin: 6px 0 16px; font-size: 13px; }
  .teamTabelle th, .teamTabelle td { border: 1px solid var(--linie); padding: 5px 9px; text-align: left; }
  .teamTabelle th { color: var(--dim); font-weight: 600; font-size: 12px; }
  .teamTabelle select { background: var(--bg); color: var(--text); border: 1px solid var(--linie);
    border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12.5px; }
  .teamTabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
  .qrKasten { display: flex; gap: 14px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
  .qrKasten img { border-radius: 8px; background: #fff; padding: 6px; width: 148px; height: 148px; }
  .geheimnis { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--goldText);
    word-break: break-all; max-width: 280px; }
  .sitzEintrag { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
  .sitzEintrag .pmEintrag { flex: 1; }
  .sitzEintrag .aktion { padding: 7px 11px; font-size: 12.5px; white-space: nowrap; }
  .auditListe { font-size: 12px; color: var(--dim); max-height: 200px; overflow-y: auto;
    border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
  .auditListe div { padding: 2px 0; border-bottom: 1px solid var(--zeile); }
  .auditListe div:last-child { border-bottom: 0; }
  .auditListe b { color: var(--text); font-weight: 600; }
  header .wer { font-size: 12.5px; color: var(--goldText); }

  /* --- Bewegung: dezent, non-blocking, abschaltbar --------------------------- */
  @keyframes blaseRein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes karteRein { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
  @keyframes zettelRein { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
  /* Dauer-Animationen laufen ueber opacity/transform — NIE ueber box-shadow,
     border-color oder Groessen (29.07.2026).
     Grund: box-shadow und border-color zwingen den Browser in jedem einzelnen
     Bild zum Neuzeichnen. Bei `infinite` heisst das: dauerhafte Last auf dem
     Haupt-Thread, solange die Seite offen ist — und zwei dieser Animationen
     liefen ausgerechnet im Erstzustand, also genau dann, wenn ein neuer Nutzer
     zum ersten Mal hereinschaut. opacity und transform laufen dagegen auf der
     Grafikebene und kosten den Haupt-Thread nichts.
     Haus-Regel ADR-077 (aufmerksamkeitsfokussierte Reaktivitaet). */
  @keyframes scheinPuls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

  /* Der Schein wird EINMAL gezeichnet und liegt als eigene Ebene ueber dem
     Element; animiert wird nur seine Deckkraft. */
  .denkspur .lampe::after, #frage::after, #menue::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit;
    pointer-events: none; opacity: 0; }
  .denkspur .lampe { position: relative; }
  .denkspur.aktiv .lampe::after {
    box-shadow: 0 0 26px 9px rgba(255,233,173,.6);
    animation: scheinPuls 1.6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
  body.keine-animation *, body.keine-animation *::before, body.keine-animation *::after {
    animation: none !important; transition: none !important; }

  @media (max-width: 700px) {
    /* Am Daumen zählt die Grifffläche mehr als die Zeilenzahl. */
    .railKnopf, .navKnopf { min-height: 48px; font-size: 14px; padding: 9px 10px; }
  }
  /* Unterhalb von 768px gilt 36 Pixel als Mindestmaß fuer alles Antippbare
     (Haus-Regel „Maße gehoeren ins Stylesheet", Abschnitt Mindest-Tippziel).
     Der sichtbare Punkt bleibt klein — nur seine Flaeche waechst. */
  @media (max-width: 768px) {
    /* Vom Bild-Pruefer am 20.08.2026 auf 390 Pixel Breite gemeldet: das
       Schliessen-Kreuz des Menues (28x27) und der Besetzungs-Knopf (32x40).
       Beide sind Bestand, beide werden hier beruehrt — also mit. */
    #menueZuKnopf { min-width: 36px; min-height: 36px; }
    #besetzungMehr { width: 36px; }
    .statuspunkt { width: 36px; height: 36px; }
    .rosterStack { min-width: 36px; min-height: 36px; }
    .wlKnopf { width: 40px; height: 40px; }
    .notizZeile .nart, .nAktion { width: 36px; height: 36px; }
    .stapelKnopf { min-height: 36px; }
    #notizNeu .aktion { width: 40px; height: 40px; }
    /* Ebenen-Umschalter: das Symbol bleibt 18px, seine Fläche wächst. */
    .pmEbene { min-width: 48px; min-height: 36px; }
    .pmGruppe.klappbar { min-height: 36px; }
    /* Der Schließen-Knopf kam auf 34x32 und blieb damit unter dem
       Mindest-Tippziel für schmale Schirme — am 16.08.2026 wurde er von 30
       auf 32 gehoben, die Regel für Telefone fehlte aber. Er ist der einzige
       sichtbare Ausweg aus einem offenen Panel (Bild-Prüfer, 18.08.2026). */
    .pmKopf button { min-width: 36px; min-height: 36px; }
    /* Prüfstand und Sprünge: Symbol bleibt 17px, die Fläche wächst auf 36. */
    .pmSymbolKnopf { min-width: 36px; min-height: 36px; }
    #pmMeldenText { min-height: 36px; }
    /* Zeilen-Aktionen: am Schreibtisch 32, am Telefon 36. Gemeldet vom
       Bild-Prüfer am 21.08.2026 auf 375 Pixel Breite — auffällig geworden am
       neuen Knopf für die Unterlage, gilt aber für jede dieser Flächen. */
    .zAktion { width: 36px; height: 36px; }
  }
  @media (max-width: 900px) {
    /* Einspaltig: der Begleiter fuellt den Schirm, der Trenner entfaellt */
    body[data-bereich] main { grid-template-columns: minmax(0, 1fr); }
    aside { display: none !important; }
    /* Ausnahme: in der Schublade IST der Schreibtisch der Inhalt (30.07.2026).
       Vorher schaltete die Regel oben ihn auf schmalen Schirmen komplett ab —
       damit waren die Kontext-Prozentzahl, die Liste der gelesenen Unterlagen,
       der Rueckgaengig-Knopf UND "Dazulegen" mobil unerreichbar. Das ist die
       Kernbotschaft des Produkts; sie darf nicht an der Fensterbreite haengen. */
    #seite.schublade > aside { display: block !important;
      height: 100%; overflow-y: auto; overscroll-behavior: contain;
      padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0)); }
    #trenner { display: none !important; }
    /* Offener Begleiter füllt mobil den Schirm — nebeneinander ist auf einem
       Telefon keine Teilung, sondern zwei zu schmale Spalten. */
    body[data-bereich] #chat { display: none; }
    body[data-bereich] #seite { grid-column: 1 / -1; }
  }
  /* EINE Grenze fuer schmale Schirme: 900px (30.07.2026).
     Vorher lag die Schubladen-Darstellung im 700er-Block, das JavaScript
     schaltete aber ab 900px darauf um — zwischen 701 und 900px setzte es
     also die Klassen, ohne dass eine Regel griff: der Bibliotheks-Knopf tat
     sichtbar nichts. Zwei Grenzen fuer dieselbe Sache sind eine Grenze zu
     viel; die Zahl steht jetzt an beiden Stellen gleich (app.js: SCHMAL). */
  @media (max-width: 900px) {
    /* Der Ansicht-Umschalter ist am 16.08.2026 ganz entfallen (Renés R1) — die
       Werkzeugleiste am rechten Rand hat seine Aufgabe uebernommen und steht
       auf schmalen Schirmen dauerhaft offen. Der Grundsatz von damals gilt
       unveraendert: Kern-Funktionen gehoeren nicht in Menue-Tiefe.
       Die Kosten-Anzeige weicht mobil, damit die Kopfzeile nicht bricht — sie
       steht ohnehin auch an der Eingabekarte. */
    header .summe { display: none; }
    .kopfWerkzeuge { gap: 8px; }
    .mgruppe.nur-mobil, .gruppeInhalt.nur-mobil { display: none !important; }

    /* Regal mobil als Schublade von unten (30.07.2026).
       Warum nicht einfach umschalten: Chat und Regal sind NICHT unabhaengig —
       das Regal ist die sichtbare Begruendung der Antwort. Ein Tab-Wechsel
       zerreisst genau die Kernbotschaft ("schau, DAS hat die KI gelesen").
       Die Schublade laesst beides gleichzeitig bestehen: der Chat bleibt
       sichtbar, das Regal faehrt darueber und wieder weg.
       Bewegung ueber transform, nicht ueber Hoehe — sonst rechnet der Browser
       bei jedem Bild das Layout neu (ADR-077). */
    /* `width` und `pointer-events` muessen hier ausdruecklich zurueckgesetzt
       werden: Der geparkte Begleiter-Slot bringt beides mit (44 % Breite, nicht
       anklickbar), und eine Schublade, die nur 44 % breit und taub ist, waere
       genau die Art Fehler, die man erst auf dem Telefon sieht (16.08.2026). */
    #seite.schublade {
      display: block; position: fixed; left: 0; right: 0; bottom: 0;
      width: auto; pointer-events: auto;
      height: 72dvh; z-index: 60; border-top: 1px solid var(--randStark);
      border-radius: 14px 14px 0 0; background: var(--bg);
      box-shadow: 0 -14px 40px rgba(0,0,0,.5);
      transform: translateY(100%); transition: transform .26s ease;
      padding-bottom: env(safe-area-inset-bottom, 0); }
    #seite.schublade.offen { transform: translateY(0); }
    /* In der Schublade gilt dieselbe Wahl wie ueberall: anschaulich ODER
       schlicht. Bis zum 20.08.2026 lagen BEIDE darin — Szene und Schreibtisch
       verlangen je die volle Hoehe, zusammen die doppelte. Die Schublade ist
       72 dvh hoch und hat keinen Ueberlauf: Der Rest stand unter ihr und lag
       ueber der Eingabekarte. Der Bild-Pruefer meldet das NICHT, weil er
       Verdeckung durch schwebende Elemente nicht kennt — gefunden wurde es mit
       den Augen, auf 390 Pixel Breite. Bestandsfehler, hier mitbehoben.

       Geparkt statt ausgeblendet: Ein `display:none`-Rahmen misst sich zu 0x0
       und baut die Szene beim Wiederkommen leer auf — dieselbe Falle wie beim
       Begleiter am Schreibtisch. */
    #seite.schublade > iframe, #seite.schublade > aside {
      position: absolute; inset: 0; overflow-y: auto; }
    /* Ein Rahmen ist ein ERSETZTES Element: `height:auto` heisst dort nicht
       „streck dich", sondern „nimm deine Eigenhoehe" — 150 Pixel, seit es
       Rahmen gibt. Mit `top` und `bottom` zusammen ist die Angabe dann
       ueberbestimmt und `bottom` wird verworfen. Deshalb hier ausdruecklich
       volle Hoehe statt auto (20.08.2026, am Telefon gemessen). */
    #seite.schublade > iframe { width: 100%; height: 100%; }
    body[data-tisch="szene"] #seite.schublade > aside,
    body[data-tisch="liste"] #seite.schublade > iframe {
      transform: translateX(105%); pointer-events: none; }
    #seite.schublade::before {
      content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px;
      transform: translateX(-50%); border-radius: 99px; background: var(--randStark); }
    /* Die Regeln des Schliessers stehen bewusst AUSSERHALB dieses Blocks —
       siehe Basis-Definition weiter oben. */

    /* Eingabe-Karte mobil (12.08.2026). Seit dem Karten-Umbau stapelt die
       Leiste ohnehin — die alten Umbruch-Reparaturen sind damit hinfällig.
       Was hier bleibt, ist eine einzige Kürzung: Auf schmalen Schirmen
       verschwindet der Kostenteil aus dem Modell-Chip. Er steht weiter im
       Auswahl-Popover je Stufe, also geht keine Kosten-Ehrlichkeit verloren
       — nur der Platz, den die Zahl im Ruhezustand einnimmt. */
    #eingabe { padding: 8px 10px 12px; }
    /* Die 16 Pixel sind hier kein Rest der alten Chat-Größe, sondern ein
       Riegel: Safari auf dem iPhone zoomt die ganze Seite hinein, sobald ein
       Eingabefeld kleiner als 16 Pixel Schrift trägt. Am Schreibtisch steht
       das Feld auf 14 wie die Blasen und das Menü. */
    #frage { font-size: 16px; padding: 12px 14px 4px; }
    #eingabeFuss { gap: 4px; padding: 4px 6px 6px 8px; }
    #modellChip #modellSchaetzung { display: none; }
    #besetzung .bWort { display: none; }
  }


  /* K1 (Welle 4, 23.09.2026): die Marke „ohne Brain" im Kosten-Chip und der
     Schalter im Anlege-Dialog von Work. Die Marke trägt Rahmen UND Wort, damit
     die beiden Arme eines Vergleichs nicht nur an einer Farbe hängen. */
  .kostenChip .kostenOhneBrain { flex: none; padding: 1px 7px; border-radius: 999px;
    border: 1px dashed var(--dim); color: var(--text); font-size: 11px; }
  .obSchalter { display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
    font-size: 13px; color: var(--text); cursor: pointer; }
  .obSchalter[hidden] { display: none; }
  .obSchalter input { width: 16px; height: 16px; margin: 0; accent-color: var(--gold); }