/* Floki-Chat */
.floki{position:sticky;top:78px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;
  max-height:calc(100vh - 100px);animation:rise .5s ease both;
  /* scroll-margin-top wie bei #meintagView/#erfolgeView (Gegenlese-Fund 06.09.2026): der
     Chat ist Sprungziel des Start-Knopfes und des Floki-Reiters, und ohne diesen Abstand
     parkt sein Kopf hinter der klebenden Kopfzeile. */
  scroll-margin-top:76px}
/* DER LAUFWEG fuer das sticky oben (Dom 03.09.2026: „Floki ist bei langen Videolisten
   ausser Sicht"). `position:sticky` war seit jeher gesetzt und trotzdem wirkungslos: ein
   sticky-Element wandert nur INNERHALB seines Elternkastens, und `.grid{align-items:start}`
   laesst `#flokiCol` exakt so hoch werden wie der Chat selbst — null Laufweg, also nichts
   zu kleben. `align-self:stretch` zieht die Spalte auf die volle Zeilenhoehe (= Hoehe der
   Plan-Spalte); erst dadurch bekommt das sticky Strecke. Der Chat selbst bleibt bei
   `100vh - 100px` gedeckelt und scrollt innen (`.msgs{overflow-y:auto}`).
   NUR zweispaltig: unter 901 px stapelt das Layout, dort ist `.floki` ohnehin `static`
   (Regel weiter unten) — am Handy braeuchte ein mitwanderender Chat den halben Schirm. */
@media(min-width:901px){
  #flokiCol{align-self:stretch}
}
.floki-head{display:flex;align-items:center;gap:11px;padding:14px 16px;
  background:linear-gradient(120deg,var(--maroon),var(--maroon-light));color:#fff}
.avatar{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--maroon);flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.2)}
.avatar svg{width:100%;height:100%}
.floki-head .fn{font-weight:700;font-size:15px;line-height:1.2}
.floki-head .fs{font-size:12px;opacity:.9;display:flex;align-items:center;gap:6px}
.live{width:7px;height:7px;border-radius:50%;background:#7CFFB0;box-shadow:0 0 0 0 rgba(124,255,176,.6);animation:pulse 2s infinite}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;min-height:300px}
.msg{max-width:90%;font-size:13.5px;line-height:1.55;padding:10px 13px;border-radius:14px;animation:rise .3s ease both}
.msg.bot{align-self:flex-start;background:var(--bg-2);border-bottom-left-radius:5px}
.msg.user{align-self:flex-end;background:var(--maroon);color:#fff;border-bottom-right-radius:5px}
.msg.bot b{color:var(--maroon)}
.typing{align-self:flex-start;background:var(--bg-2);padding:12px 15px;border-radius:14px;
  border-bottom-left-radius:5px;display:none;gap:4px}
.typing.show{display:flex}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:bounce 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.chip{font-size:12.5px;font-weight:600;color:var(--maroon);background:var(--tint-rose);border:1px solid #eed7dc;
  padding:9px 13px;border-radius:var(--r-pill);cursor:pointer;transition:all var(--t-fast);min-height:38px;display:inline-flex;align-items:center}
.chip:hover{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.chip.glow{background:var(--maroon);color:#fff;border-color:var(--maroon);animation:glow 1.8s infinite}
.chip.glow:hover{background:var(--maroon-dark)}
.chip.mega{animation:megapulse 1s var(--ease-pop) 2}
@keyframes megapulse{0%{transform:scale(1)}35%{transform:scale(1.12)}70%{transform:scale(.98)}100%{transform:scale(1)}}
/* align-items:center (Dom-Fund 06.09.2026, Handy): ohne das streckt Flex die Kinder, und
   zwei Knöpfe mit UNTERSCHIEDLICHER fester Höhe (Senden 44, Klammer 40 bzw. 36 am Handy)
   stehen oben bündig — die Klammer saß sichtbar höher als der Senden-Knopf. */
.composer{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--card)}
.composer input{flex:1;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:10px 15px;font-size:14px;
  font-family:inherit;outline:none;background:var(--bg);color:var(--ink)}
.composer input:focus{border-color:var(--maroon);background:#fff}
.composer input:focus-visible{outline:3px solid var(--focus);outline-offset:2px} /* outline:none oben schlägt base.css:20 — Tastaturfokus braucht die Outline zurück */
.composer button{width:44px;height:44px;border-radius:50%;border:none;background:var(--maroon);color:#fff;
  cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none;transition:transform var(--t-fast)}
/* `display:flex` oben schlaegt die Browser-Vorgabe fuer [hidden] — ein verstecktes
   Element waere sonst weiterhin sichtbar. Genau das ist am 07.09.2026 passiert: Mikro und
   Senden standen beide da, obwohl platz() einen von beiden auf hidden gesetzt hatte.
   Merksatz: wer display setzt, muss [hidden] selbst wieder bedienen. */
.composer button[hidden]{display:none}
.composer button:hover{background:var(--maroon-dark)}
.composer button:active{transform:scale(.92)}
@media(max-width:900px){
  .grid{grid-template-columns:minmax(0,1fr)} /* minmax(0,…): ein nowrap-Kind darf die Spalte nicht sprengen (Handy-Fund 03.09.2026) */
  .floki{position:static;max-height:none}
  .msgs{min-height:200px;max-height:320px}
}

/* ==== W2-Portierung: additive SSE-/A11y-Zustaende (Portierungs-Spec §3.6) ==== */
/* Screenreader-only (M1: #sr-log/#sr-status + versteckte Turn-h3) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Fehler-Bubble + Retry (Tokens existieren in tokens.css) */
.msg.bot.err{background:var(--error-bg);border:1px solid #e8c2be;color:var(--error)}
.msg.bot.err .fb-retry{margin-top:8px}
/* Tool-Chips als Statuszeile in der Bubble (nicht klickbar) */
.toolchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.toolchip{font-size:11.5px;font-weight:600;color:var(--maroon);background:var(--tint-rose);border:1px solid #eed7dc;border-radius:999px;padding:3px 10px;opacity:.9}
.toolchip.done{opacity:.55}
/* Mathe (CLAUDE.md-Lesson): Bruch auf der mathematischen Achse, Formelzeilen mit Luft */
/* Grundlinie statt „middle" (06.09.2026, dieselbe Messung wie am Lernzettel, app-zettel.css):
   ein einzelnes k oder K(x) rutschte sonst unter die Textzeile; Wurzeln im Formelblock
   erbten die Zeilenhöhe 2.4 und wurden doppelt so tief wie ihr Inhalt. */
.msg math{font-size:1.06em;vertical-align:baseline;line-height:normal}
.msg math mo+mfrac{margin-left:.14em}
.msg .m-blk{display:block;margin:.5em 0;line-height:2.4;overflow-x:auto}
/* Markdown-Struktur in der Bubble (Listen/Headings, SR-relevant) */
.msg-body p{margin:.35em 0}
.msg-body ul,.msg-body ol{margin:.4em 0 .4em 1.25em;padding:0}
.msg-body li{margin:.15em 0}
.msg-body h4{margin:.5em 0 .25em;font-size:1.02em}
.msg-body a{color:var(--maroon);font-weight:600}
/* Glide-Wortspans (aus Dev-Shell uebernommen; noanim/RM killt Fade) */
.gw{opacity:0;animation:gwIn .22s ease forwards}
.gw.gi{animation:none;opacity:1}
.gw.gb{font-weight:700}
.gw.gitl{font-style:italic}
@keyframes gwIn{to{opacity:1}}
@media (prefers-reduced-motion: reduce){.gw{animation:none;opacity:1}}
html.noanim .gw{animation:none;opacity:1}
/* Review-Fund: Absätze kommen als \n-Textknoten aus dem Renderer — ohne pre-wrap kollabieren sie */
.msg-body{white-space:pre-wrap;overflow-wrap:anywhere}

/* --- Graph-Board (02.09.2026) --------------------------------------------------------
   Das SVG kommt fertig vom Server; hier steht nur die Rahmung. Die Druck-Knoepfe sind
   echte Buttons und muessen sichtbar fokussierbar bleiben (BSV) — deshalb kein
   outline:none, sondern der Fokusring aus tokens.css. */
.graphfig{margin:10px 0;padding:10px 10px 8px;background:var(--card,#fff);
  border:1px solid var(--line,#ecdfdb);border-radius:14px}
.graphfig svg{display:block;width:100%;height:auto;border-radius:10px}
.graphcap{margin-top:8px;font-size:15px;color:var(--ink,#3a2b28);font-weight:600}
.graphcap math{font-size:1.12em}
.graphtext{margin:0;font-size:var(--fs-caption,13px);color:var(--ink-3,#7a6b66)}
/* Immer als LETZTES und sichtbar abgesetzt (Dom 03.09.2026: „gleich unter der
   Hauptgleichung ist komisch") — die Knoepfe gehoeren zum Graphen, sind aber eine
   Handlung, keine Beschriftung. */
.graphdruck{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line,#ecdfdb)}
/* Kleiner seit 03.09.2026 (Dom: „ziemlich maechtig gross"): 12 px statt 13, schmalere
   Polsterung, 32 statt 38 px hoch. Untere Grenze ist die Bedienbarkeit — darunter wird
   der Knopf am Handy zur Zielscheibe, deshalb bleibt es bei 32 px und nicht weniger. */
.graphbtn{font:inherit;font-size:12px;font-weight:600;padding:5px 11px;border-radius:16px;
  border:1px solid var(--line,#ecdfdb);background:var(--bg-2,#fbf3f1);color:var(--maroon,#6b1a1a);
  cursor:pointer;min-height:32px}
.graphbtn:hover{background:var(--card,#fff)}
.graphbtn:focus-visible{outline:3px solid var(--focus,#0b5fff);outline-offset:2px}
@media print{.graphdruck{display:none}}

/* WhatsApp-Kontakt unter dem Gespräch (Dom 02.09.2026). Bewusst leise: eine Zeile, keine
   schwebende Sprechblase — die säße am Handy auf der Tab-Leiste und am Rechner auf dem
   Senden-Knopf. Trefferfläche trotzdem >= 44 px hoch (Finger, WCAG 2.5.8). */
.wa-zeile{margin:6px 0 2px;text-align:center;font-size:12.5px;line-height:1.4}
.wa-link{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;min-height:44px;
  box-sizing:border-box;border-radius:999px;color:var(--ink-2);text-decoration:none;
  transition:background var(--t),color var(--t)}
.wa-link:hover{background:rgba(37,211,102,.12);color:var(--ink)}
.wa-link:focus-visible{outline:3px solid var(--maroon);outline-offset:2px}
.wa-ic{color:#25D366;flex:none}
@media print{.wa-zeile{display:none}}

/* Schieberegler unter dem Graphen (Dom 02.09.2026) */
.graphregler{margin:8px 2px 0;display:grid;gap:7px}
.greg{display:grid;grid-template-columns:minmax(9.5em,auto) 1fr;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.greg-n{white-space:nowrap}
.greg-w{color:var(--maroon);font-variant-numeric:tabular-nums}
.greg input[type=range]{width:100%;accent-color:var(--maroon);min-height:28px;cursor:pointer}
.greg input[type=range]:focus-visible{outline:3px solid var(--maroon);outline-offset:3px}
.greg-hin{margin:2px 0 0;font-size:11.5px;color:var(--ink-2);opacity:.85}
@media (max-width:520px){.greg{grid-template-columns:1fr;gap:2px}}

/* Eine Reglergruppe je Kurve (Dom 03.09.2026). Der farbige Strich links wiederholt das
   Strichmuster der Linie im Bild — bei drei Gruppen untereinander ist die Farbe allein
   zu wenig, wenn jemand sie nicht unterscheiden kann. */
.gregg{display:grid;gap:7px}
.gregg + .gregg{margin-top:11px;padding-top:10px;border-top:1px solid var(--line,#efe3e0)}
/* Groesser als der Rest der Reglerzeile: die Funktion ist die Ueberschrift ihrer Gruppe
   (Dom 03.09.2026: „schreib die funktionen jeweils ein bisschen groesser"). */
.gregg-k{margin:0 0 3px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
.gregg-k sup{font-size:.72em;vertical-align:super;line-height:0}
.gregg-strich{width:24px;height:3px;border-radius:2px;flex:none;background:currentColor}
.gregg-strich-1{background-image:repeating-linear-gradient(90deg,currentColor 0 7px,transparent 7px 11px)}
.gregg-strich-2{background-image:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 6px)}
@media print{.graphregler{display:none}}

/* Ziehgriffe an den Achsenenden (Dom 03.09.2026). Unsichtbar, aber greifbar: der Zeiger
   verraet sie, und mit Tastatur sind sie ueber Tab erreichbar. */
/* Die Flaeche liegt auf der ganzen Achse. Beim Zeigen wird sie kurz sichtbar — sonst
   raet man, wo man ziehen kann (Dom-Fund 03.09.2026). */
.zoomgriff{cursor:grab;fill:transparent;transition:fill .12s}
.zoomgriff:hover,.zoomgriff:focus-visible{fill:rgba(107,26,26,.10)}
.zoomgriff:active{cursor:grabbing;fill:rgba(107,26,26,.16)}
.zoomgriff-x{cursor:ew-resize}
.zoomgriff-y{cursor:ns-resize}
.zoomgriff:focus-visible{outline:3px solid var(--maroon);outline-offset:0}
@media print{.zoomgriff{display:none}}

/* Zweite/dritte Funktion dazuzeichnen (Dom 03.09.2026). Bewusst schlicht: ein Feld, ein
   Knopf, und die dazugezeichneten Funktionen als entfernbare Marken. */
.graphplus{margin-top:10px;display:grid;gap:6px}
.gp-zeile{display:flex;gap:6px;flex-wrap:wrap}
.gp-feld{flex:1 1 12em;min-width:0;font:inherit;font-size:12.5px;padding:6px 10px;
  border:1px solid var(--line,#ecdfdb);border-radius:16px;background:var(--paper,#fdfbf7);
  color:var(--ink,#2e2422);min-height:32px}
.gp-feld:focus-visible{outline:3px solid var(--maroon);outline-offset:1px}
.gp-feld:disabled{opacity:.55}
.gp-chips{display:flex;flex-wrap:wrap;gap:5px}
.gp-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 6px 3px 9px;
  border-radius:14px;background:rgba(0,114,188,.10);color:#0a5c93;border:1px solid rgba(0,114,188,.30)}
.gp-chip-1{background:rgba(70,128,31,.10);color:#33600f;border-color:rgba(70,128,31,.30)}
.gp-weg{border:0;background:transparent;color:inherit;font-size:15px;line-height:1;cursor:pointer;
  min-width:22px;min-height:22px;border-radius:50%}
.gp-weg:hover{background:rgba(0,0,0,.08)}
.gp-weg:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.gp-hinweis{margin:0;font-size:11.5px;color:#8a2336}
@media print{.graphplus{display:none}}

/* ---- Bild-Anhang (03.09.2026) ------------------------------------------------
   Der Anhang steht ÜBER dem Eingabefeld, nicht daneben: am Handy ist die Zeile eng,
   und eine Vorschau, die den Senden-Knopf verdrängt, kostet genau den Klick, um den
   es geht. Vorschau klein, Name gekürzt, Entfernen immer erreichbar. */
.bild-leiste{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line);
  background:var(--bg-2)}
/* MUSS sein (Dom-Fund 03.09.2026, direkt nach dem Bau): `display:flex` schlaegt das
   hidden-Attribut aus dem Browser-Stylesheet — die leere Leiste stand deshalb dauerhaft
   im Chat, mit einem X, das nichts zu entfernen hatte. Merksatz: wer einem Element mit
   [hidden] ein display gibt, muss [hidden] selbst wieder ausschalten. */
.bild-leiste[hidden]{display:none}
.bild-vorschau{width:38px;height:38px;object-fit:cover;border-radius:8px;border:1px solid var(--line-2);flex:none}
.bild-name{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bild-weg{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);
  color:var(--ink-2);cursor:pointer;font-size:13px;line-height:1}
.bild-weg:hover{background:var(--tint-rose);color:var(--maroon)}
/* `.composer .klammer` statt `.klammer`: die Regel `.composer button` weiter oben ist
   Klasse+Element und damit spezifischer — der Anhang-Knopf sah sonst aus wie ein zweiter
   Senden-Knopf (dunkelrot gefuellt) statt wie eine Klammer (Dom-Fund 03.09.2026). */
/* WhatsApp-Optik (Dom 08.09.2026): keine Umrandung, keine Fuellung — nur die Kontur des
   Symbols. Die Trefferflaeche bleibt trotzdem 40 px im Quadrat (am Handy 38): sichtbar
   klein, greifbar gross ist genau der Trick, den WhatsApp benutzt. Vorher war es ein
   umrandeter Kreis, der neben dem gefuellten Senden-Knopf wie ein zweiter Knopf wirkte. */
.composer .klammer{flex:none;width:40px;height:40px;border-radius:50%;border:none;
  background:transparent;color:var(--ink-2,#6b4a50);cursor:pointer;line-height:0;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--t-fast),background var(--t-fast)}
.composer .klammer:hover{background:var(--tint-rose);color:var(--maroon)}
.composer .klammer:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:900px){ .composer .klammer{width:38px;height:38px} .composer .klammer svg{width:21px;height:21px} }

/* Bild in der eigenen Sprechblase (Dom-Fund 03.09.2026: „man soll im Chat sehen, dass ein
   Bild hochgeladen wurde"). Ohne das steht dort ein Satz, der sich auf etwas Unsichtbares
   bezieht — und das Gespraech wird unlesbar, sobald man zurueckscrollt. */
.msg-bild{display:block;max-width:220px;max-height:180px;width:auto;height:auto;object-fit:cover;
  border-radius:10px;margin:0 0 7px;border:1px solid rgba(255,255,255,.35)}

/* Bild gross ansehen (Dom 03.09.2026: „man soll es auch anklicken und anschauen koennen").
   Das Vorschaubild im Chat ist ~220 px breit — eine handschriftliche Rechnung liest darauf
   niemand. Die Ebene liegt ueber allem, dunkel abgeblendet, und laesst sich auf drei Wegen
   schliessen: Hintergrund, Kreuz, Escape. */
.msg-bild{cursor:zoom-in;transition:transform var(--t-fast),box-shadow var(--t-fast)}
.msg-bild:hover{transform:scale(1.02);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.msg-bild:focus-visible{outline:3px solid #fff;outline-offset:2px}
.bild-ovl{position:fixed;inset:0;z-index:var(--z-overlay,90);background:rgba(20,8,11,.86);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:rise .18s ease both}
.bild-ovl img{max-width:min(1100px,96vw);max-height:92vh;width:auto;height:auto;
  border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.55);cursor:default}
.bild-zu{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;font-size:18px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bild-zu:hover{background:rgba(0,0,0,.7)}
.bild-zu:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .bild-ovl{animation:none} .msg-bild:hover{transform:none} }

/* Uebungsfrage: Antwortmoeglichkeiten als Chips unter Flokis Antwort (Dom 04.09.2026).
   Dieselbe Optik wie die Kontrollfrage am Player (.vfr-opt) — ein Knopf je Option. */
.quizchips{display:flex;flex-direction:column;gap:6px;margin:6px 14px 12px;align-items:flex-start}
.quizchip{text-align:left;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-small);cursor:pointer;max-width:100%;transition:background var(--t-fast),border-color var(--t-fast)}
.quizchip:hover:not(:disabled){background:var(--bg-2);border-color:var(--maroon-light)}
.quizchip:disabled{cursor:default;opacity:.6}
.quizchip.gewaehlt{border-color:var(--maroon-light);background:var(--bg-2);opacity:1;font-weight:600}

/* Rueckkehrer mit Lernreise sieht die Vorstellung nicht mehr (Dom 04.09.2026) — die
   Klasse setzt app/noanim.js vor dem ersten Paint, damit nichts aufblitzt. */
.hat-plan .msg-intro{display:none}

/* Mikro-Knopf (07.09.2026): sitzt neben der Bueroklammer und benutzt dieselbe Optik
   (.klammer). Nur zwei eigene Zustaende — waehrend der Aufnahme und waehrend der
   Erkennung muss der Knopf sichtbar anders aussehen, sonst weiss niemand, ob laeuft.
   08.09.2026: die laufende Aufnahme ist jetzt ein gefuellter Kreis um das Stop-Zeichen —
   in der flachen WhatsApp-Optik ist Farbe allein zu leise, und ein offenes Mikro muss man
   sehen, ohne hinzusehen. */
#mikroKnopf.mikro-auf{background:var(--maroon);color:#fff}
/* Waehrend der Aufnahme steht rechts nur noch der Pfeil (Dom 08.09.2026) — der gefuellte
   Kreis oben ist dann gar nicht sichtbar. Das „es laeuft" traegt deshalb die linke Seite:
   die Klammer ist zum Papierkorb geworden und ist dabei die einzige farbige Stelle der
   Zeile. Ohne das waere eine laufende Aufnahme nur noch am Hinweistext zu erkennen. */
.composer .klammer.ist-tonne{color:var(--maroon)}
.composer .klammer.ist-tonne:hover{background:var(--tint-rose)}
#mikroKnopf[aria-busy="true"]{cursor:progress;opacity:1}
/* Die Auskunft unter der Schreibzeile: klein, ruhig, und sie verschwindet von selbst.
   role="status" macht sie fuer NVDA hoerbar, ohne den Fokus zu stehlen. */
/* Der Hinweis schwebt UEBER der Schreibzeile und nimmt keine Hoehe ein.
   Warum nicht darunter (bis 07.09.2026): die Karte ist eine Flex-Spalte mit `max-height`
   und `overflow:hidden`, und `.msgs` kann wegen `min-height:300px` nicht schrumpfen — ein
   Element unter der Zeile wurde deshalb am unteren Rand abgeschnitten.
   Links buendig mit dem Eingabefeld: 14 px Composer-Polster + EIN Knopf a 40 px + 8 px
   Abstand = 62 px. Aendert sich die Knopfzahl, gehoert diese Zeile mitgezogen.
   `nowrap`, weil die PANEL-Breite mit der Fensterbreite nichts zu tun hat — eine
   Medienabfrage hat hier schon einmal danebengegriffen. */
.composer{position:relative}
.mikro-hinweis{position:absolute;bottom:100%;left:62px;right:14px;margin:0 0 2px;
  font-size:.82rem;color:var(--ink-2);background:var(--card);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){ .mikro-hinweis{left:58px} }

/* Freisprechen sitzt seit 07.09.2026 im KOPF der Chat-Karte (Dom: „zu wenig Platz für die
   Schreibzeile"). Es ist ein Modus, kein Nachrichten-Werkzeug — und ein dauerhaft offenes
   Mikro gehoert dorthin, wo man es sieht. `margin-left:auto` schiebt es nach rechts; der
   Vergroessern-Knopf folgt direkt daneben. Anders als jener ist es IMMER sichtbar. */
#freiKnopf{display:inline-flex;margin-left:auto}
.floki-head #freiKnopf + .panel-gross{margin-left:8px}
#freiKnopf.frei-an{background:#fff;color:var(--maroon);border-color:#fff}