/* E-44 (#106): Kontraste gegen WCAG 2.2 AA nachgemessen (Werte im Commit dokumentiert).
--rand #3a4241 → #6d7773 : 1,36:1 → 3,04:1 auf --flaeche (SC 1.4.11 verlangt 3:1)
--fuss #6f7674 → #5f6664 : 4,04:1 → 5,11:1 auf der hellen Fläche (SC 1.4.3, 4,5:1)
--charcoal wird für Rahmen nicht mehr benutzt (2,38:1) – Felder bekommen --rand
Tabellenkopf: Akzent auf #2e3534 war 4,15:1 → --text mit 10,90:1
--fokus #7fd8e4: 8,60:1 auf --flaeche; --fokus-hell #0f5259 für die helle Fläche (7,70:1) */
:root{--bg:#222823;--flaeche:#262d2c;--flaeche2:#1b201f;--rand:#6d7773;--text:#EFEFEE;--gedimmt:#9aa3a1;--akzent:#39A2AE;--charcoal:#575A5E;--violett:#30011E;--absatz:#c9cdcc;--fuss:#5f6664;--fokus:#7fd8e4;--fokus-hell:#0f5259;--blase:#2f3d40}
/* Ohne border-box addiert sich jedes Innenabstand-Paar zur Breite: Felder mit width:100% ragten
aus ihrer Karte, und die Chat-Spalte lief auf schmalen Geräten seitlich über (Fund im Screenshot). */
*,*::before,*::after{box-sizing:border-box}
/* Sichttest 2026-09-01 (Chris, Punkt 7): UI-Skalierung. Die Oberfläche rechnet fast durchgängig in
rem – deshalb genügt EINE Wurzel-Schriftgröße, um alles mitzuskalieren. Der Server setzt dazu
die Klasse am (Cookie ui_skala, reine Darstellungspräferenz, POST /ui/skala).
Ohne Klasse gilt „Automatisch": heutige Größe als Untergrenze, auf großen Bildschirmen sanft
mehr (clamp; 0.9rem misst hier die Browser-Grundgröße, meist 16 px). Tippziele behalten ihre
px-Untergrenze (SC 2.5.8) – die darf auch bei 75 % nicht unter 24 px rutschen. */
html{font-size:clamp(16px,0.9rem + 0.2vw,19px)}
html.skala-75{font-size:75%}
html.skala-100{font-size:100%}
html.skala-125{font-size:125%}
html.skala-150{font-size:150%}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;max-width:900px;margin:2rem auto;padding:0 1rem;color:var(--text);background:var(--bg)}
/* #437 Runde 2 (Prüfbefund 3): `--marke-primaer(-text)` als Fläche/Text der Kopfzeile verdrahtet –
OHNE Marken-Profil (Variable unbelegt) fallen beide Eigenschaften auf ihren bisherigen Wert
zurück (transparent bzw. geerbte Textfarbe), die Ausgabe bleibt byte-gleich (AK 5). */
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rand);padding-bottom:.6rem;background:var(--marke-primaer,transparent);color:var(--marke-primaer-text,inherit)}
/* Alles hier statt in style='…'-Attributen: die CSP (default-src 'self', kein 'unsafe-inline')
verwirft Inline-Stile im Browser – die Wortmarke wäre sonst ein blau/türkis unterstrichener Link. */
.marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
/* #797: eigenes Logo-Bild tritt an die Stelle des 26×26 px Inline-SVG-Icons (LOGO_SVG) – dieselbe
Höhe, damit Kopfzeile/Login-Karte nicht springen, Breite frei nach Seitenverhältnis des Bilds. */
.marken-logo{height:26px;width:auto;display:block}
/* Nachschliff #845 (Prüferbefund niedrig): OHNE Deckel wächst ein sehr breites Logo (Rückfall aufs
volle Bild, wenn kein schmales Kachel-Profil hinterlegt ist, `_branding_logo_html`) mit fester
Höhe beliebig in die Breite und verdrängt in der schmalen Seitenleiste/Kopfzeile Mandantennamen
und Schließen-Knopf. `.marke` trägt NUR die kompakte Stelle (Kopfzeile UND Seitenleiste, beide
`class='marke'`, `_seite`/`_seitenleiste` oben) – die breite Login-Karte (`.mkopf`, volles Logo
mit eigener Absicht, #797) bleibt bewusst ungedeckelt. `object-fit:contain` verzerrt dabei nicht. */
.marke .marken-logo{max-width:120px;object-fit:contain}
h1{font-size:1rem;margin:0;text-transform:uppercase;letter-spacing:.32em;font-weight:600}
h1 .sub{color:var(--akzent);letter-spacing:.15em;font-weight:400;font-size:.78rem}
h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.12em;margin:.1rem 0 .6rem;border-bottom:2px solid var(--akzent);display:inline-block;padding-bottom:.25rem}
/* #553 (Feed-Reiter Teil 2, AC 1, zweite Hälfte „kein horizontales Scrollen"): Karten zeigen
Fremdtext, dessen Form niemand vorhersagt – eine 120-stellige URL in einem Karten-Körper oder
in der Herkunftszeile des Feeds ist ein einziges umbruchfreies Zeichenband und damit breiter
als die 390 px des schmalen Geräts (#216). Ohne Umbruchregel schiebt ein solches Band die
GANZE Seite seitlich, nicht nur die Karte.
`anywhere` statt `break-word`: break-word bricht erst, wenn das Wort allein in seiner Zeile
noch überläuft, und zählt beim min-content-Maß weiterhin als unteilbar – genau dieses Maß
macht die Seite breit. `anywhere` senkt es mit.
Die Regel steht hier auf `.card` und NICHT zusätzlich in der Mobil-Regel weiter unten: so gilt
sie auf jeder Breite (390 px eingeschlossen) und für jede Karte der Plattform; eine zweite,
breitenabhängige Kopie wäre dieselbe Aussage doppelt und könnte auseinanderlaufen.
`.beleg` (Buchungsliste, #204) setzt für sich weiterhin `break-word` mit `min-width` und bleibt
von der Vererbung unberührt – die dortige Begründung gilt unverändert. */
.card{position:relative;background:var(--flaeche);border:1px solid var(--rand);border-radius:4px;padding:1rem;margin:1rem 0;overflow-wrap:anywhere}
.card::after{content:'';position:absolute;top:-1px;right:-1px;width:22px;height:22px;border-top:2px solid var(--akzent);border-right:2px solid var(--akzent);border-radius:0 4px 0 0;pointer-events:none}
label{display:block;margin:.5rem 0 .2rem;color:var(--gedimmt);font-size:.9rem}
input[type=text],input[type=password],input[type=email],textarea,select{width:100%;padding:.55rem;border:1px solid var(--rand);border-radius:3px;font:inherit;background:var(--flaeche2);color:var(--text)}
/* E-44: sichtbarer Fokus auf ALLEM, was bedienbar ist (SC 2.4.7). Wer `outline` anfasst, schuldet
3:1 (SC 1.4.11) – deshalb ein eigener, gemessener Ring statt outline:none. */
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;border-radius:3px}
.hell :focus-visible,.mfuss :focus-visible{outline-color:var(--fokus-hell)}
.hell .mkarte :focus-visible{outline-color:var(--fokus)}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--akzent)}
/* Tippziele mindestens 24×24 px (SC 2.5.8) */
button,.btn,a.ikon,label.dateiknopf{min-height:24px;min-width:24px}
/* #553 (Feed-Reiter Teil 2): auf schmalem Mobil-Viewport 44×44 px statt der plattformweiten
24-px-Untergrenze oben – der Feed ist Wisch-/Daumenbedienung mit Karte-für-Karte-Entscheidungen,
ein Fehltreffer schaltet unwiderruflich weiter. `.feedaktionen` (Aktionsknöpfe der Karte) und
`.feed-start` (der „Los"-Knopf im Leerzustand) sind die einzigen Bedienflächen dieses Reiters;
die Regel bleibt bewusst auf den Feed beschränkt, statt platformweit auf 44 px zu heben. */
@media(max-width:480px){.feedaktionen button,.feed-start button{min-height:44px;min-width:44px}}
/* Nachbesserung #679 (4): der Palette-Kopf (`.feedpalette>summary`) und ihr Suchfeld
(`.feedsuche input[type=search]`) sind dieselbe Bedienfläche wie die Aktionsknöpfe oben –
ohne diese Ergänzung blieb ausgerechnet der Weg IN die Palette hinein unter der Untergrenze.
Eigene Regel statt Anhängen an die Selektorliste oben, damit deren gepinnte Zeichenkette
(`tests/test_feed.py::test_leerzustand_traegt_im_markup_die_klasse_der_44px_regel`) unverändert
bleibt. */
@media(max-width:480px){.feedpalette>summary,.feedsuche input[type=search]{min-height:44px;
min-width:44px}}
/* #669 (Betreuungsübersicht): dieselbe Untergrenze wie beim Feed, aus demselben Grund (SC 2.5.8
auf schmalem Mobil-Viewport) – Filterleiste (`.betreuungfilterleiste a`) und die Zeilenaktion
„Ansehen" (`.betreuungzeile a`) sind die einzigen Bedienflächen dieser Seite. `display:inline-block`
ist Pflicht: auf einer nicht-ersetzten Inline-Box (`| … | `) greift `min-height` nicht,
der Mandantenlink blieb 19 px hoch (Prüferfund der Merge-Runde 23.09., Mobiltest rot). */
@media(max-width:480px){.betreuungfilterleiste a,.betreuungzeile a{display:inline-block;min-height:44px;min-width:44px}}
/* #715 (Nachzug #669): der aktive Filter-Chip (Klasse `an`, gesetzt in `betreuung.py`) trug bisher
kein CSS und war optisch nicht vom Rest der Leiste zu unterscheiden – `aria-pressed` allein hilft
nur Screenreader-Nutzern. Invertierte Farben mit den vorhandenen Variablen statt einer neuen
Akzentfarbe: mindestens so kontrastreich wie `.btn` (E-44), mit vertauschter Fläche/Textfarbe. */
.betreuungfilterleiste .an{background:var(--text);color:var(--bg);border:1px solid var(--text)}
/* #715: visuell verborgen, für Screenreader vorhanden (Standardmuster „sr-only") – bislang gab es
im Stylesheet keine solche Klasse, obwohl `betreuung.py` sie jetzt für die stumme Kopfzelle über
„Ansehen" braucht. `display:none`-Inhalte überspringen Screenreader, dieser Text soll aber
vorgelesen werden. Ohne `position:absolute`: die Klasse steht auch in Scrollcontainern ohne
positionierten Vorfahren (z. B. `table.vtab`, `app.py` unten), ein absolut positioniertes Element
würde dort aus dem Container heraus an seinen statischen Dokumentplatz rutschen und die Seite
waagerecht aufreißen. `clip-path:inset(50%)` blendet den 1×1-Pixel-Kasten trotzdem aus. */
.sr-only{display:inline-block;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
white-space:nowrap;border:0}
/* #645 (Feed-Aktionen 1): responsives Raster + Command-Palette, sobald mehr Aktionen anstehen als
`_HAUPT_ANZAHL` (feed.py) flach trägt. Zellen schrumpfen (`minmax(…,1fr)`, `min-width:0`) statt
die Karte seitlich zu schieben (AC „kein horizontaler Überlauf"). Natives `details`-Element statt
eines eigenen Auf-/Zuklapp-Skripts — kein JavaScript, die CSP bleibt unverändert. */
.feedaktionen{display:flex;flex-direction:column;gap:.5rem}
.feedpalette{margin-top:.3rem}
.feedpalette>summary{cursor:pointer;list-style:none;width:fit-content}
.feedpalette>summary::-webkit-details-marker{display:none}
.feedsuche{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0}
.feedsuche input[type=search]{flex:1 1 12rem}
.feedraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin-top:.4rem}
.feedraster form{margin:0;min-width:0}
.feedraster button{width:100%}
.kurzbefehl{opacity:.7;font-size:.8em;margin-left:.3rem}
.feedleer{color:var(--gedimmt)}
/* Nur für Hilfsmittel: display:none/visibility:hidden würden Live-Bereiche wirkungslos machen */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sprung{position:absolute;left:-9999px;top:0;z-index:50;background:var(--flaeche);color:var(--text);padding:.5rem .9rem;border:1px solid var(--akzent);border-radius:0 0 4px 0}
.sprung:focus{left:0}
select{width:auto;min-width:12rem}
button{padding:.55rem 1.2rem;border:0;border-radius:3px;background:var(--akzent);color:#0d1413;cursor:pointer;font:inherit;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
button:hover{background:#46b7c4}
button:disabled{background:var(--flaeche2);color:var(--gedimmt);border:1px solid var(--rand);cursor:wait}
button.sek,summary.sek,a.btn.sek{background:transparent;border:1px solid var(--rand);color:var(--absatz);text-transform:none;letter-spacing:0;font-weight:400;padding:.35rem .7rem;font-size:.8rem}
button.sek:hover,summary.sek:hover,a.btn.sek:hover{border-color:var(--akzent);color:var(--text);background:transparent}
summary.sek{display:inline-block;border-radius:3px}
button.link{padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:none;letter-spacing:0;text-decoration:underline;cursor:pointer}
button.link:hover{background:none;color:var(--text)}
.inl{display:inline}
.qr{background:#fff;display:inline-block;padding:8px;border-radius:6px}
.stand{font-size:1.6rem;margin:.2rem 0}
.card.warn{border-color:#e0708a} /* E-32 (#90): Banner Intern-Mandant */
.card.warn::after{border-color:#e0708a}
/* E-37 (#95): Gefahrenbereich der Kontoseite – abgesetzt, roter Rahmen, kein Primärknopf */
.card.gefahr{border-color:#e0708a;margin-top:2.5rem}
.card.gefahr::after{border-color:#e0708a}
.card.gefahr h2{border-bottom-color:#e0708a;color:#e0708a}
/* E-57 (#123, A6): Speicherfristen-Kasten (AGB-Annahme, Konto) – auffällig, aber kein Warnrot */
.fristen{border:1px solid var(--akzent);border-radius:4px;padding:.6rem .9rem;margin:.9rem 0}
.fristen h3{margin:0 0 .3rem;font-size:1rem;letter-spacing:.04em}
.fristen ul{margin:.3rem 0 .3rem 1.2rem;padding:0}
.fristen li{margin:.15rem 0}
/* E-35 (#93): Wiederherstellungscodes – einmalige Anzeige, gut abtippbar */
.codes{border:1px dashed var(--akzent);border-radius:4px;padding:.6rem .9rem;margin:.6rem 0}
.codes ul{list-style:none;margin:.6rem 0;padding:0;display:grid;grid-template-columns:repeat(2,max-content);gap:.3rem 1.4rem}
.codes code{font-size:1.05rem;letter-spacing:.08em}
@media(max-width:640px){.codes ul{grid-template-columns:1fr}}
/* #229: Rückmeldung nach „Als Textdatei speichern“ – Muster #geheim-status, aber mit eigener
Farbregel: das Statusfeld trägt `klein`, und `.klein{color:var(--gedimmt)}` steht WEITER UNTEN
im Stilblatt als `.ok`/`.fehler`. Bei gleicher Spezifität (0,1,0) gewinnt die spätere Regel –
die Bestätigung war deshalb grau statt türkis (Prüferbefund zum verlorenen Vorgänger-Stand).
Die ID hebt die Spezifität auf (1,1,0) und schlägt `.klein` unabhängig von der Reihenfolge.
Kontrast: #7fd8c9 9,0:1 auf --bg / 8,4:1 auf --flaeche, #e0708a 4,9:1 bzw. 4,6:1 (SC 1.4.3).
Solange nichts gemeldet wurde, ist der Live-Bereich unsichtbar – aber NICHT display:none
(Regel für `:empty` weiter unten, #245). */
#codes-status{display:block;margin-top:.35rem}
#codes-status.ok{color:#7fd8c9}
#codes-status.fehler{color:#e0708a}
/* #183 (Paket „zweifa-seiten"): TOTP-Geheimnis zum Abtippen. Angezeigt wird es in Vierergruppen
(word-spacing trennt die Gruppen, ohne dass ein Zeichen dazukommt); die Kopiervorlage im
data-Attribut bleibt das Roh-Geheimnis. Die Gruppen dürfen umbrechen, einzelne Gruppen nicht. */
.geheim{border:1px dashed var(--rand);border-radius:4px;padding:.6rem .9rem;margin:.7rem 0}
.geheim code{display:inline-block;max-width:min(100%,17.5em);background:none;padding:0;font-size:1.15rem;line-height:1.8;letter-spacing:.09em;word-spacing:.5em}
.geheim p{margin:.3rem 0}
#geheim-status{display:block;margin-top:.35rem} /* Rückmeldung unter den Knopf, nicht um ihn herum */
/* #245: Beide Statusfelder standen leer auf `display:none` – damit war der role=status-Bereich VOR
der ersten Ansage gar nicht im Accessibility-Baum (gemessen: ignored: notRendered), entgegen
BARRIEREFREIHEIT 4.1.3 („dauerhaft im DOM stehende, leere Bereiche"). Screenreader melden dann
den ersten Klick nicht an, weil sie den Live-Bereich erst beim Erscheinen kennenlernen. Statt
auszublenden wird das leere Feld deshalb nur visuell versteckt – dieselbe Technik wie `.vh`:
aus dem Fluss genommen und auf 1×1 px geklemmt, also ohne sichtbare Leerzeile im Layout.
Die Spezifität (1,1,0) schlägt die Grundregeln oben, unabhängig von der Reihenfolge. */
#codes-status:empty,#geheim-status:empty{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Gesperrte Wahlmöglichkeit: gedämpft und mit Marke, damit sie beim Überfliegen nicht gleichrangig
neben der wählbaren steht (#183, Verfahrenswahl für plattform-admin). */
h2.gesperrt,.hell h2.gesperrt{color:var(--gedimmt)}
.sperrmarke{display:inline-block;border:1px solid var(--rand);border-radius:3px;padding:0 .4rem;margin-right:.4rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gedimmt)}
.fehler{color:#e0708a}.ok{color:#7fd8c9}
/* E2E-Sichttest 2026-08-31 (Chris): Abweisungen (z. B. Betragsgrenzen beim Aufladen) waren als
.klein-Zeile leicht zu übersehen – generischer Fehler-Banner im Warnrot des Themes (wie .card.warn),
volle Breite, größere Schrift; :empty hält den leeren Live-Bereich (aria-live) unsichtbar. */
.fehlerbanner{display:block;margin:.6rem 0;padding:.6rem .9rem;border:1px solid #e0708a;border-left:4px solid #e0708a;border-radius:4px;background:rgba(224,112,138,.12);color:#e0708a;font-size:1rem;font-weight:600}
.fehlerbanner:empty{display:none}
.msg{padding:.6rem .8rem;border-radius:4px;margin:.4rem 0;white-space:pre-wrap}
.user{background:rgba(57,162,174,.14);border:1px solid rgba(57,162,174,.35)}
.assistant{background:var(--flaeche2);border:1px solid var(--rand)}
.klein{font-size:.85rem;color:var(--gedimmt)}
a{color:var(--akzent)}
ul.files li{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0}
code{background:#171c1b;padding:0 .3rem;border-radius:3px;color:#8fd4dc}
.msg.md{white-space:normal} /* erst nach dem md()-Rendern; vorher/ohne JS bleibt pre-wrap erhalten */
.msg p{margin:.3rem 0}
.msg h3,.msg h4,.msg h5{margin:.5rem 0 .2rem;font-size:1rem;letter-spacing:.05em}
.msg pre{background:#171c1b;border:1px solid var(--rand);border-radius:4px;padding:.5rem;overflow-x:auto;margin:.4rem 0;white-space:pre}
.msg pre:focus-visible{outline:3px solid var(--fokus);outline-offset:1px}
.msg pre code{background:none;padding:0}
.msg table{border-collapse:collapse;margin:.4rem 0;display:block;overflow-x:auto;max-width:100%}
.msg th,.msg td{border:1px solid var(--rand);padding:.25rem .5rem;text-align:left;vertical-align:top}
.msg th{background:#2e3534;color:var(--text);font-weight:600;letter-spacing:.04em}
.msg ul,.msg ol{margin:.3rem 0 .3rem 1.2rem;padding:0}
/* #183 (A4): Zitat im Chat – dieselbe Optik wie im Dokumentenrenderer (.dok blockquote), damit ein
zitierter Absatz auch als solcher zu erkennen ist und nicht wie eigener Fließtext wirkt. */
.msg blockquote{border-left:3px solid var(--akzent);margin:.4rem 0;padding-left:.6rem;color:var(--gedimmt)}
.msg blockquote p{margin:0}
.msg a{color:var(--akzent)}
/* #204: Belegspalte der Buchungsliste (/konto). Gekürzt wird EINMAL, und zwar auf dem Server
(`BELEG_MAX` + „…“); die Spalte schneidet nicht noch einmal nach, sondern bricht um. Vorher
lagen zwei unabhängige Schnitte übereinander – der harte bei 28 Zeichen und die Spaltenkante –
und keiner der beiden war als Kürzung zu erkennen. Der volle Text steht im `title`.
`min-width` gemessen bei 390 px (Hands-on 2026-09-02): ohne sie drückte der Tabellenumbruch die
Spalte auf drei Zeichen Breite und zerlegte „Gutschrift“ in „Gutsc/hrift“ – schlimmer als der
Schnitt, den dieses Paket abräumt. Und `break-word` statt `anywhere`: getrennt wird nur ein
Wort, das für sich zu lang ist, nicht an jeder beliebigen Stelle. */
.beleg{white-space:normal;overflow-wrap:break-word;min-width:11rem;max-width:22rem}
/* E-44 (#106): Die alte Dauerschleife erfüllte alle drei Bedingungen von SC 2.2.2 (Level A):
startet selbst, läuft länger als 5 s, steht neben bedienbarem Inhalt. Jetzt statischer Text;
die dezente Pulsation ist reine Zugabe und fällt bei prefers-reduced-motion weg. */
.tippt::after{content:'Antwort wird erzeugt …';color:var(--gedimmt);font-size:.9rem}
@media(prefers-reduced-motion:no-preference){.tippt::after{animation:pulsiert 1.6s ease-in-out infinite}}
@keyframes pulsiert{0%,100%{opacity:.55}50%{opacity:1}}
@media(max-width:640px){body{margin:.8rem auto}header{flex-wrap:wrap;gap:.3rem}.card{padding:.7rem}textarea{min-height:5rem}}
/* ---------------------------------------------------------------- E-43 (#105): Chat-Oberfläche
Zentrierte Spalte für Nachrichten UND Eingabefeld in derselben Breite – sobald beide
unterschiedlich breit sind, wirkt eine Chat-Oberfläche gebastelt. Rollen-Asymmetrie:
die Frage bekommt eine Blase, die Antwort läuft als Fließtext. Das ist das eine Merkmal, an dem
ChatGPT und Claude sofort erkennbar sind.
Sichttest 2026-09-01 (Chris, Befund 1): Die Spalte stand auf 44rem – auf breiten Schirmen
quetschten sich Knöpfe und Aufwand-Regler in der Werkzeugzeile, obwohl daneben Platz frei war.
Jetzt EINE Variable für alle vier Stellen (Strom, Eingabebox, Leerzustand, Banner); wer die
Breite ändert, ändert sie an einer Stelle und nie wieder verstreut. */
:root{--spaltenbreite:56rem}
/* #437 Runde 2 (Prüfbefund 3): `--marke-hintergrund(-text)` als Fläche/Text der Chat-Schale –
Rückfall auf die bisherigen Werte (--bg/--text) ohne Profil, byte-gleich (AK 5). */
body.chat{max-width:none;margin:0;padding:0;height:100dvh;overflow:hidden;background:var(--marke-hintergrund,var(--bg));color:var(--marke-hintergrund-text,var(--text))}
.rahmen{display:grid;grid-template-columns:16rem 1fr;height:100dvh}
/* Eine Spalte, sobald die Seitenleiste aus dem Fluss ist: bei `display:none` würde `.haupt`
sonst zum ERSTEN Rasterelement und landete in der 0-Pixel-Spalte (Fund im Screenshot). */
body.chat.zu .rahmen{grid-template-columns:1fr}
/* #437 Runde 2 (Prüfbefund 3): `--marke-sekundaer(-text)` als Fläche/Text der Navigation
(Nebenflächen, s. store.py BRANDING_FARB_FELDER) – Rückfall auf --flaeche2/--text, byte-gleich
ohne Profil (AK 5). */
.seitenleiste{background:var(--marke-sekundaer,var(--flaeche2));color:var(--marke-sekundaer-text,var(--text));border-right:1px solid var(--rand);display:flex;flex-direction:column;min-width:0;overflow:hidden}
body.chat.zu .seitenleiste{display:none}
body.chat:not(.zu) .slauf{display:none}
.slkopf{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.9rem .8rem .6rem}
.slkopf .marke h1{font-size:.8rem;letter-spacing:.24em}
.slliste{list-style:none;margin:0;padding:0 .5rem 1rem;overflow-y:auto;flex:1}
.slliste li{display:flex;align-items:center;gap:.3rem;border-radius:4px;padding:.1rem .2rem}
.slliste li:hover{background:var(--flaeche)}
.slliste li a{flex:1;display:block;padding:.4rem .3rem;color:var(--absatz);text-decoration:none;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slliste li.aktiv{background:var(--flaeche)}
.slliste li.aktiv a{color:var(--text)}
.slgruppe{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gedimmt);margin:.9rem .5rem .2rem;border:0;padding:0;display:block}
/* rem statt px (Punkt 7): skaliert mit der Wurzelgröße; die 24-px-Untergrenze oben bleibt */
.ikon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:1px solid var(--rand);border-radius:4px;background:transparent;color:var(--absatz);font-size:1rem;line-height:1;text-decoration:none}
.ikon:hover{border-color:var(--akzent);color:var(--text);background:transparent}
.neu{display:block;margin:0 .8rem .4rem;text-align:center}
.haupt{display:flex;flex-direction:column;min-width:0;min-height:0}
/* #437 Runde 2 (Prüfbefund 3): dieselbe Kopf-Fläche wie `header` oben, plus `--marke-akzent` als
Rahmenfarbe (Hervorhebung, s. store.py BRANDING_FARB_FELDER) – Rückfall auf --rand, byte-gleich
ohne Profil (AK 5). */
.chatkopf{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem 1rem;border-bottom:1px solid var(--marke-akzent,var(--rand));flex:0 0 auto;background:var(--marke-primaer,transparent);color:var(--marke-primaer-text,inherit)}
/* #234 (Runde 3, gemessen 2026-09-10): `position:relative` ist kein Beiwerk. Ohne einen
positionierten Vorfahren misst sich ein `position:absolute`-Kind des Stroms an der Seite
statt am Strom – die versteckte Überschrift „Chatverlauf" (`h2.vh`, 1 px) landete dadurch
an ihrer Stelle im GESCROLLTEN Inhalt auf der Seite (bei 844×390 gemessen y=431) und machte
die Seite 42 px länger als das Fenster, obwohl sichtbar nichts unter der Kante stand. Mit
der Regel bleibt der Überhang im Strom, wo er hingehört. */
.strom{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain}
.spalte{max-width:var(--spaltenbreite);margin:0 auto;padding:1.2rem 1rem 0}
.eingabezone{flex:0 0 auto;position:relative;padding:.4rem 1rem 1rem}
.eingabebox{max-width:var(--spaltenbreite);margin:0 auto;border:1px solid var(--rand);border-radius:12px;background:var(--flaeche);padding:.6rem .7rem}
.eingabebox:focus-within{border-color:var(--akzent)}
#nachricht{border:0;background:transparent;padding:.2rem;min-height:4rem;max-height:12rem;resize:none;width:100%;color:var(--text);font:inherit}
#nachricht:focus,#nachricht:focus-visible{outline:none;border:0}
/* Sichttest 2026-09-01 (Chris, Punkt 3): Die Werkzeugzeile brach auf dem Desktop in ZWEI Zeilen um –
das drückte das Eingabefeld nach oben und wirkte unaufgeräumt. Deshalb stand hier `nowrap`.
Chris-Sichttest 2026-09-02 (Betreiber-Konto dipsitter, VOLLES Modul-Set): `nowrap` löst das
Problem nicht, es verschiebt es. Mit allen sieben Pilotmodulen trägt die Zeile Datei anhängen ·
Diktieren · Dateiauswahl · Dateien verwalten · Als Datei speichern · Arbeitsdaten löschen ·
Aufwand-Regler · Kontextfenster · Senden – gemessen 1136 px Bedarf in einer 994 px breiten Box.
Was nicht umbrechen darf, LÄUFT DANN HINAUS: gemessen 301 px über die Eingabebox bei 1920 px
Fensterbreite, 465 px bei 1024 px – dort lag der Senden-Knopf bei x=1375 in einem 1024 px
breiten Fenster, also vollständig außerhalb des Sichtfelds, und die Dateiauswahl war auf 15 px
zusammengequetscht. Die Einzeiligkeit war eine Zusage für ein Zwei-Modul-Set; bei sieben
Modulen gibt es keine Zeile, in die alles passt. Also: umbrechen, wenn es sonst nicht passt
(solange es passt, bleibt die Zeile von selbst einzeilig – der Umbruch kostet nichts, solange
nichts umbricht), und NICHTS ausblenden, was heute sichtbar ist.
Die Reihenfolge im DOM ist zugleich die Lesereihenfolge und die Tab-Reihenfolge – kein `order`,
keine Umsortierung: Bedienknöpfe zuerst, danach Regler, Kontextfenster, Senden. Die Lücke bzw.
die auto-Marge am Kontextfenster hält Kontextfenster und Senden am rechten Rand ihrer Zeile. */
/* position:relative: die Werkzeugzeile ist der ANKER der Menüpanels – siehe .menupanel unten. */
.werkzeuge{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;padding-top:.4rem;position:relative}
.werkzeuge>*{flex:0 0 auto}
.rollezeile{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;padding-top:.35rem}.rollezeile>p{margin:0;flex:1 1 14rem;min-width:0} /* #954: Hinweis + Knopf der Rollenwahl in EIGENER Zeile unter .werkzeuge (dort flex:0 0 auto – der Satz lief auf 390 px hinaus) */
/* Auswahlfelder: `min-width:0` ließ die Dateiauswahl auf 15 px schrumpfen (Messung oben) – ein
Auswahlfeld ohne lesbaren Inhalt ist kein Bedienelement mehr. Der zweite Teil ist die
flex-Basis: In einer umbrechenden Zeile hilft Schrumpfen NICHT – der Browser bricht um, bevor
er schrumpft, denn er verteilt nach der WUNSCHbreite (hier: der Optionstext, gedeckelt auf
14 rem). Zwei Felder à 14 rem allein sind über die Hälfte der Box. Mit der kleinen Basis
(7 rem) plant der Umbruch mit dem schmalen Feld, und der freie Rest der Zeile wächst hinterher
wieder hinein (flex-grow, gedeckelt auf 14 rem): schmales Modul-Set = eine Zeile mit breiten
Feldern, volles Modul-Set = Umbruch statt „– keine…". */
.werkzeuge select{width:auto;min-width:7rem;max-width:14rem;flex:1 1 7rem;text-overflow:ellipsis;font-size:.82rem;padding:.3rem .4rem;background:var(--flaeche2)}
.werkzeuge .luecke{flex:1 1 .2rem;min-width:0}
/* Prüferbefund 2026-09-02 (#183-Reihe): OHNE JavaScript steht statt des Reglers die Hülle
`#effort-fallback` mit dem Prüftiefe-Select in der Zeile. Sie ist ein Flex-Element ohne
Deckel, und die Mobil-/Skala-Regel `.werkzeuge select{max-width:100%}` bezieht die 100 %
auf eben diese Hülle – also auf nichts. Ergebnis: die Hülle wuchs auf die Breite der
längsten Option („Gründlich – volles Prüfprotokoll, höchster Verbrauch", gemessen 520 px)
und lief aus der Eingabebox hinaus: 196 px bei 390 px Fensterbreite und 150 % Schrift, wo
„Senden" dann unter dem Gesprächsverlauf lag und nicht mehr klickbar war; 70 px bei 900 px.
Der Deckel an der Hülle schließt die Lücke (mit JavaScript ist sie ohnehin versteckt). */
.werkzeuge #effort-fallback{min-width:0;max-width:100%}
/* Der Schluss der Zeile (Kontextfenster + „Senden") ist EIN Element: er bricht als Ganzes um und
sitzt über `margin-left:auto` am rechten Rand SEINER Zeile – auch wenn die Lücke eine Zeile
höher liegt. Ohne die Hülle brach „Senden" bei 1024 px allein in eine dritte Zeile und stand
dort links unter den Knöpfen (gemessen im Sichttest 2026-09-02). */
.werkzeuge .schluss{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;margin-left:auto}
.werkzeuge .dateiknopf,.werkzeuge>button,.werkzeuge>.schluss>button,.werkzeuge>details.menu>summary{white-space:nowrap}
/* Der Sprachstatus ist der einzige freie Text in der Zeile – er darf sie nicht sprengen (#156) */
.werkzeuge #sprach-status{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Punkt 3: „Dateien verwalten" bleibt dauerhaft sichtbarer Knopf auf Eingabehöhe. Vorher machte
`details.menu[open]{position:absolute}` das GANZE details absolut – der Knopf verschwand beim
Aufklappen aus der Zeile. Jetzt schwebt nur das Panel (über der Eingabezone, nach oben).
#183: Das details ist dabei `static`, NICHT `relative` – der Anker des Panels ist die
Werkzeugzeile, nicht der einzelne Knopf. Am Knopf verankert lief das Panel aus dem Fenster,
sobald der Knopf weit rechts steht: „Als Datei speichern" ragte bei 390 px um 129 px hinaus,
„Als Excel-Datei" lag ganz außerhalb des Sichtfelds und war ohne Querscrollen nicht
auslösbar (am Desktop 36 px, Satz mitten im Wort abgeschnitten). An der Zeile verankert und
auf ihre Breite gedeckelt (`width:min(34rem,100%)`) kann kein Panel mehr über die
Fensterkante hinauslaufen – unabhängig davon, wo sein Knopf in der Zeile sitzt und ob die
Zeile umbricht. Das details bleibt im Fluss, der Knopf also sichtbar (Punkt 3 oben). */
.werkzeuge>details.menu[open]{position:static;right:auto;z-index:auto;background:none;border:0;border-radius:0;padding:0;width:auto}
.werkzeuge details.menu>.menupanel{position:absolute;bottom:calc(100% + .5rem);left:0;z-index:25;width:min(34rem,100%);max-height:min(60vh,30rem);overflow:auto;background:var(--flaeche);border:1px solid var(--rand);border-radius:8px;padding:.7rem .8rem;box-shadow:0 6px 22px rgba(0,0,0,.45)}
.dateiknopf{display:inline-flex;align-items:center;gap:.3rem;margin:0;padding:.35rem .7rem;border:1px solid var(--rand);border-radius:4px;color:var(--absatz);font-size:.8rem;cursor:pointer}
.dateiknopf:hover{border-color:var(--akzent);color:var(--text)}
/* opacity statt display:none – ein verstecktes Dateifeld muss für Hilfsmittel bedienbar bleiben (#106) */
/* #234 (Runde 3, Nachzugspunkt aus der Abnahme Runde 2): Wer mit der Tastatur auf das
Dateifeld springt, soll den A6-Fristensatz MITGEBRACHT bekommen. Das Feld selbst ist 1 px
groß; ohne Rand scrollte der Browser genau dieses eine Pixel ins Bild und der Satz darunter
bliebe unter der Kante. `scroll-margin-bottom` deckt den Rechtsfuß ab (gemessen 89–288 px,
je nach Breite). In den gemessenen Lagen greift es gar nicht – dort steht der Satz ohnehin
im Startbild (Höhen-Query oben) und die Seite hat nichts zu scrollen; es ist die
Absicherung für alles daneben (große Schriftgrade, Zoom, Zeilenumbruch). Weil keine Lage es
ausübt, hält der Test es doppelt fest: als Wert dieser CSS und als Wert, den der Browser am
Feld berechnet, gehalten gegen den Abstand vom Knopf zum Ende des A6-Satzes
(tests/test_strom_hoehe.py, Prüferbefund Runde 3). */
.dateiknopf input[type=file]{position:absolute;width:1px;height:1px;opacity:0;scroll-margin-bottom:12rem}
.dateiknopf:focus-within{outline:3px solid var(--fokus);outline-offset:2px}
/* #151 Pilotmodul upload-komfort: Drop-Overlay über der Eingabezone, Anhang-Chip, Inline-Meldung */
/* #183 (P2): Das Signal war kleiner als die Wirkfläche – das Overlay lag nur über der Eingabezone
(y 646–900), der `drop`-Empfänger ist aber das ganze Dokument. Wer oben im Verlauf loslässt,
lädt trotzdem hoch; wer die gestrichelte Fläche für die einzige Zielzone hält, zielt umsonst.
Jetzt deckt das Overlay die ganze Arbeitsfläche (position:fixed) und dunkelt sie ab. */
#drop-overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;border:3px dashed var(--akzent);background:rgba(27,32,31,.92);font-weight:600;font-size:1.1rem;text-align:center;padding:1rem;pointer-events:none}
#drop-overlay[hidden]{display:none}
/* Chris-Sichttest Runde 2 (#151): Die Chip-Zeile sitzt IN der Eingabebox über dem Textfeld (Claude-
Vorbild) – vorher stand sie in der Eingabezone daneben und rutschte an den linken Seitenrand.
Die Breite kommt damit von der Box; der Chip selbst bleibt eine Pille mit Vorschau, Name,
flüchtigem Status und Abwählen-X. */
#anhang-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .45rem}
#anhang-chips:empty{display:none}
.anhang-chip{display:inline-flex;align-items:center;gap:.45rem;max-width:100%;padding:.25rem .35rem .25rem .45rem;border:1px solid var(--rand);border-radius:10px;background:var(--flaeche2);font-size:.82rem}
/* Mini-Vorschau: ~40 px, beschnitten statt verzerrt (object-fit), abgerundet – Quelle ist
GET /datei/{sha} auf demselben Host (CSP img-src 'self'; blob:-URLs wären verboten). */
.anhang-chip .chipbild{flex:0 0 auto;width:2.5rem;height:2.5rem;object-fit:cover;border-radius:6px;background:var(--flaeche)}
.anhang-chip .chipsymbol{flex:0 0 auto;font-size:1.15rem;line-height:1;padding:0 .1rem}
.anhang-chip .chipname{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anhang-chip .chipstatus{color:var(--absatz)}
.anhang-chip .chipstatus:empty{display:none}
/* Sichttest 2026-09-01 (Chris, Punkt 1): „angehängt" hat seine Aufgabe nach wenigen Sekunden
erfüllt – der Text blendet dann langsam aus; Chip und X bleiben. Die Klasse setzt upload.js,
die Zeit steckt in der Animation (4 s Verzögerung, 1,2 s Überblendung). Bei
prefers-reduced-motion bleibt der Text schlicht stehen – kein Bewegungsreiz. */
@media(prefers-reduced-motion:no-preference){
.anhang-chip .chipstatus.verblasst{animation:chipverblasst 1.2s ease-in 4s forwards}
}
@keyframes chipverblasst{from{opacity:1}to{opacity:0}}
/* Das X ist mit JavaScript ein Knopf, im Server-Chip ohne JavaScript ein Link auf dieselbe Seite
ohne `datei`-Parameter – beide sehen gleich aus. */
.anhang-chip .chipx{display:inline-flex;align-items:center;padding:0 .45rem;background:none;border:0;color:var(--absatz);font-size:1rem;line-height:1.4;text-decoration:none;cursor:pointer}
.anhang-chip .chipx:hover{color:var(--text)}
/* #156 Spracheingabe-Pilot: Mikro-Knopf – der Aufnahme-Zustand muss unübersehbar sein (pulsiert) */
.mikro.auf{border-color:#e0708a;color:#e0708a;animation:mikropuls 1.2s ease-in-out infinite}
@keyframes mikropuls{0%,100%{opacity:1}50%{opacity:.45}}
#sprach-status{font-size:.78rem;color:var(--gedimmt)}
#sprach-status.fehler{color:#e0708a}
/* Sichttest 2026-09-01 (Chris, Punkt 2): „Transkribiere…" braucht ein Lebenszeichen – ein reiner
CSS-Spinner aus einem Rahmen (kein Bild, kein Emoji, CSP-fest). Wer Bewegung abbestellt hat
(prefers-reduced-motion), bekommt statt der Drehung schlicht drei Punkte. */
#sprach-status.laeuft::before{content:'';display:inline-block;width:.8rem;height:.8rem;margin-right:.4rem;vertical-align:-.1rem;border:2px solid var(--rand);border-top-color:var(--akzent);border-radius:50%;animation:sprachdreht .9s linear infinite}
@media(prefers-reduced-motion:reduce){#sprach-status.laeuft::before{content:'…';width:auto;height:auto;border:0;animation:none;color:var(--akzent)}}
@keyframes sprachdreht{to{transform:rotate(360deg)}}
.runter{position:absolute;left:50%;top:-1.1rem;transform:translateX(-50%);width:2.15rem;height:2.15rem;padding:0;border-radius:50%;background:var(--flaeche);border:1px solid var(--rand);color:var(--text);font-size:1rem;z-index:5}
/* Sichttest 2026-09-01 (Chris, Punkt 6): Die Fußzeile stand in 44 rem und lief dadurch über viele
Zeilen. Sie nutzt jetzt die volle Breite der Eingabespalte, mit kleinerem Grad und straffer
Zeilenhöhe – ausschließlich Layout: die Wortlaute (Fristen, Art. 9/10, KI-Hinweis, Disclaimer)
sind rechtlich abgestimmt und bleiben zeichengenau (Test pinnt sie). */
.chatfuss{max-width:none;margin:.3rem auto 0;font-size:.72rem;line-height:1.4;color:var(--gedimmt);text-align:center}
.eingabezone .chatfuss{padding:0 .4rem}
/* Rollen-Asymmetrie: Frage in der Blase, Antwort ohne Kasten */
.chat .msg{padding:0;border:0;background:none;border-radius:0;margin:1.1rem 0}
.chat .msg.user{background:var(--blase);border:1px solid var(--rand);border-radius:14px 14px 4px 14px;padding:.6rem .9rem;margin-left:auto;width:fit-content;max-width:85%}
.chat .msg.assistant{background:none;border:0;padding:0;color:var(--absatz)}
/* #183 (F6): Fehlgeschlagener Auftrag – dieselbe Warnfarbe wie .fehlerbanner, damit die Karte auf
den ersten Blick keine Antwort ist. MUSS hier stehen und nicht oben bei .msg: `.chat .msg` und
`.chat .msg.assistant` (beide 0,3,0) räumen Rahmen und Grund ab und stehen weiter unten – eine
Regel `.msg.fehlerkarte` (0,2,0) im allgemeinen Block bliebe wirkungslos (gemessen: border 0px,
Grund transparent). Der Grund bindet Fehlerzeile UND „Jetzt anmelden" zu EINER Karte. */
.chat .msg.fehlerkarte{background:rgba(224,112,138,.08);border-radius:4px;padding:.1rem .7rem .5rem}
.chat .msg h3{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:0;text-transform:none;color:inherit}
.aktionen{display:flex;gap:.4rem;margin:.3rem 0 0;opacity:.75}
.aktionen:hover,.aktionen:focus-within{opacity:1}
/* #216: Der Leerzustand stand auf FESTEN 20vh Kopfpolster – ein Maß am Fenster, nicht am Platz,
den der Strom übrig hat. Bei 390 px (gemessen 2026-09-03: Strom 339 px hoch, Banner 140 px,
20vh = 169 px) rutschte „Womit können wir helfen?" auf y=448 in einem Bereich, der bei 458
endet – und weil app.js beim Bestätigungsbanner auf `top:0` springt (#183), blieb sie dort:
optisch hinter der Eingabebox, die Beispiel-Pillen ganz weg. Jetzt misst der Leerzustand am
ÜBRIGEN Platz: er wächst auf die Resthöhe des Stroms (`flex:1 0 auto` – wachsen ja, unter die
eigene Inhaltshöhe schrumpfen nie) und zentriert seinen Inhalt darin. Ein Banner nimmt dem
Rest Platz weg, statt die Überschrift hinauszuschieben; reicht es nicht, scrollt der Strom.
`:has()` hält die Flex-Spalte auf den Leerzustand beschränkt – der Gesprächsstrom bleibt
unverändert ein Blockfluss. Ohne `:has()`-Unterstützung steht der Leerzustand oben statt
mittig: weniger hübsch, aber nie verdeckt (Prüfer 2026-09-03 mit abgeschalteter Regel
nachgemessen – bei 390 und 1280 px, mit und ohne Banner, überall sichtbar).
`width:100%` an der Spalte ist kein Beiwerk (Prüferbefund 2026-09-03): In einer Flex-Spalte
dehnt sich ein Kind mit `margin:0 auto` NICHT auf die Breite des Elternteils, sondern
schrumpft auf seinen Inhalt. Ein kurzes Bestätigungsbanner stand dadurch als schmales
Kärtchen mitten im Strom statt über die Spaltenbreite (gemessen: 109 statt 916 px bei
1280 px) – die eine Spaltenbreite aus `--spaltenbreite` gilt weiter für alle vier Stellen. */
.leer{max-width:var(--spaltenbreite);margin:0 auto;padding:1.5rem 1rem 2rem;text-align:center;
display:flex;flex-direction:column;justify-content:center}
.strom:has(>.leer){display:flex;flex-direction:column}
.strom>.leer{flex:1 0 auto}
.strom>.spalte{flex:0 0 auto;width:100%}
.leer h2{border:0;display:block;font-family:Georgia,'Times New Roman',serif;font-size:1.6rem;text-transform:none;letter-spacing:0;margin:0 0 1.2rem}
.pillen{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.pille{background:var(--flaeche);border:1px solid var(--rand);border-radius:999px;color:var(--absatz);font-size:.85rem;padding:.45rem .9rem;text-transform:none;letter-spacing:0;font-weight:400}
.pille:hover{border-color:var(--akzent);color:var(--text);background:var(--flaeche)}
.chatbanner{max-width:var(--spaltenbreite);margin:0 auto}
/* Sichttest 2026-09-01 (Befund 2): Zeile unter der Antwort, wenn während des Gesprächs eine Datei
entstanden ist – dezent, aber anklickbar (öffnet GET /datei/{sha} in einem neuen Tab). */
.neuedatei{margin:.5rem 0 0;font-size:.82rem;color:var(--gedimmt)}
.neuedatei a{margin-left:.15rem}
/* #234 (Runde 3, 2026-09-10): Der Block gilt seit Chris' Entscheidung „Variante A" auch für
FLACHE Fenster bis 1100 px Breite – das Querformat-Handy (844×390) ist 4 px breiter als die
840er Schwelle und bekam deshalb die Desktop-Seitenleiste ins Raster, die von 844 px Breite
256 px nahm. Die Chatspalte blieb mit 588 px so schmal, dass der Rechtsfuß auf 194 px
umbrach (gemessen); ohne die Leiste im Raster sind es 101 px, und genau diese ~90 px
entscheiden darüber, ob der A6-Fristensatz im Startbild steht (siehe Höhen-Query unten).
Die 1100 px sind die Grenze zum echten Desktop: breite flache Fenster (1280×530) behalten
ihre Seitenleiste im Raster, sie haben die Breite dafür. Dieselbe Bedingung steht im Skript
(`matchMedia`), das die Leiste beim Laden zuklappt – sonst deckte sie hier das Gespräch ab. */
@media(max-width:840px),(max-height:580px) and (max-width:1100px){
/* Die Seitenleiste liegt hier immer außerhalb des Rasters (fixiert oder ausgeblendet) → eine Spalte */
.rahmen,body.chat:not(.zu) .rahmen{grid-template-columns:1fr}
.seitenleiste{position:fixed;inset:0 auto 0 0;width:min(17rem,86vw);z-index:30;box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}
body.chat.zu .seitenleiste{display:none}
body.chat:not(.zu) .seitenleiste{display:flex}
body.chat:not(.zu) .slauf{display:inline}
.spalte,.eingabebox{max-width:none}
.chatkopf{flex-wrap:wrap;row-gap:.2rem;padding:.5rem .7rem}
.chatkopf .klein{font-size:.78rem;line-height:1.5}
/* Punkt 3: einzeilig war eine Desktop-Zusage – seit dem Befund vom 2026-09-02 bricht die Zeile
überall um, sobald sie muss; hier bleibt nur der größere Abstand für Fingerbedienung. */
.werkzeuge{gap:.4rem}
.werkzeuge select{max-width:100%}
/* Befund 1 (Sichttest 2026-09-01): Die feste Reglerbreite gilt der einzeiligen Desktop-Zeile –
in der umbrechenden Zeile darf er die Restbreite nehmen statt eine Zeile für sich zu belegen */
.werkzeuge .aufwand{flex:1 1 12rem;width:auto;max-width:100%} /* #1057: `.werkzeuge` erhöht die Spezifität gegen die Grundregel weiter unten (Kaskadenfalle) – `min-width:10rem` bleibt von dort bewusst gültig, sie schützt laut Sichttest 2026-09-02 vor Stauchung auch in der umbrechenden Zeile; Ausnahme #987: die Höhen-Query weiter unten setzt mit demselben Selektor nur Startbreite und Boden (`flex-basis:9rem;min-width:8rem`), Wachsen und Nachgeben (`flex-grow`/`-shrink`, `width`, `max-width`) bleiben von hier */
.werkzeuge .luecke{flex:1 1 auto}
/* #183: Auf schmalen Geräten nimmt das Panel die GANZE Werkzeugzeile ein – die Viewport-Maße
(früher 92vw) rechnen den linken Rand der Eingabezone nicht mit und liefen deshalb rechts
über die Fensterkante hinaus. */
.werkzeuge details.menu>.menupanel{width:100%}
/* #162 (Entdopplung): Auf schmalen Geräten hat die Werkzeugzeile keinen Platz für die
Kontextfenster-Anzeige – sie ist Beiwerk und weicht den Bedienelementen. */
.kontextfenster{display:none}
}
/* #234 (Prüferbefund Paket 42, 2026-09-03, vorbestehend): Bei geringer FENSTERHÖHE ist die
Eingabezone höher als das Fenster. Gemessen in der Betreibersicht mit allen Pilotmodulen:
bei 844×390 Kopfzeile 63 px + Eingabezone 403 px (davon Rechtsfuß 194 px und umbrechende
Werkzeugzeile 91 px), bei 360×640 sogar 113 + 571 px. Im festen Rahmen (`height:100dvh` +
`overflow:hidden`) blieb für `.strom{flex:1}` nichts übrig: clientHeight 0 – der gesamte
Gesprächsstrom unsichtbar und nicht scrollbar, und mit ihm der Intern-Warnbanner (E-32/#90),
der in seiner `.spalte` hängt. Vom unteren Ende der Eingabezone war dabei auf `main` mehr
abgeschnitten als sichtbar: bei 844×390 standen 466 px Inhalt in einem 390-px-Fenster, die
letzten 76 px (Art.-9-Satz-Ende, Disclaimer, Speicherstand, Impressum/Datenschutz) lagen
unter der Kante und waren NICHT erreichbar (`body{overflow:hidden}`, Mausrad 0 px).
ENTSCHEIDUNG CHRIS 2026-09-10, Variante A (#234): Der A6-Fristensatz muss VOR dem Upload
OHNE Scrollen im Bild stehen („deutlich sichtbar"). Die Runde-2-Fassung dieses Blocks machte
die SEITE scrollbar und schob den Satz damit unter die Kante (bei 844×390 von y 256 auf
y 490, erst nach 309 px Radscroll sichtbar) – sie ist ersetzt. Nicht mehr die Seite wächst,
sondern die Eingabezone wird kleiner, bis Kopf + Zone + ein Streifen Strom ins Fenster
passen. Der Rechtsfuß wird dafür NICHT gekürzt und nichts eingeklappt – die Wortlaute sind
rechtlich abgestimmt (Chris-Frage 12/D3, Kanzlei-OK fehlt); es geht ausschließlich um
Polster, Zeilenhöhe und die Breite, über die derselbe Text umbricht.
Vier Teile, alle gemessen (Playwright, Betreibersicht, alle Pilotmodule, Intern-Mandant,
40 Gespräche – `tests/test_strom_hoehe.py` fährt dieselbe Messung):
* Der DECKEL des Stroms ist an Kopf + Eingabezone GEKOPPELT, und zwar durch den festen
Rahmen selbst: `.rahmen{height:100dvh}` und `.strom{flex:1}` geben dem Strom genau den
Rest. Deshalb steht hier KEIN `max-height` mehr – ein zweiter Deckel (Runde 2: 60dvh)
nähme dem Strom Platz, den keiner braucht, und schöbe die Zone aus dem Bild.
* Die KOMPAKTREGELN holen den Platz: Kopfzeile und Zone mit kleineren Polstern, das
Eingabefeld startet mit 2,2 statt 4 rem, die Bedienelemente der Werkzeugzeile werden
flacher (sie brauchen dadurch 2 statt 3 Zeilen), der Rechtsfuß bekommt straffere
Zeilenhöhe (1.25 statt 1.4). Gemessen bei 844×390: Zone 403 → 211 px, Kopf 63 → 68 px
(die Leiste ist aus dem Raster, dafür steht der ☰-Knopf in der Kopfzeile), Strom
0 → 111 px, und die Zone endet exakt an der Fensterkante – nichts ist mehr
abgeschnitten. 1280×530: Strom 196 → 281 px, ebenfalls ohne Seitenscroll.
* Der MINDESTSTREIFEN (`min-height:5rem`) hält den Befund fern: wo Kopf + Zone auch
kompakt nicht ins Fenster passen (sehr kleine Fenster, große Schriftgrade), bleibt der
Strom sichtbar und scrollbar, statt wieder auf 0 zu fallen.
* Der NOTAUSGANG: `body.chat` darf dann mitwachsen und scrollen (`height:auto`,
`overflow-y:auto`). Das ist der Unterschied zu `main` – dort schnitt `overflow:hidden`
ab, was nicht passte, und niemand kam daran. In den Ziel-Lagen greift er nicht
(844×390, 360×640, 1280×530: Seite = Fenster, Mausrad 0 px). UNTERHALB rund 600 px
Fensterhöhe greift er sehr wohl, und das ist der Zweck – nachgemessen 390×600 5 px
Überhang, 640×450 27 px, 360×500 119 px, jeweils per Mausrad vollständig erreichbar;
auf `main` waren es dort 33, 57 und 184 px, die NIEMAND erreichen konnte. Der frühere
Satz „in allen gemessenen Ziel-Lagen greift er gar nicht" verallgemeinerte eine
Eigenschaft, die unterhalb 600 px nicht mehr trägt (Prüferbefund Runde 3).
Bewusst KEIN `overflow` an der Eingabezone selbst: dort schweben die Menüpanels
(`.menupanel`, bis 60vh hoch, nach OBEN über die Kante der Zone hinaus) und der Runter-Knopf
(`.runter{top:-1.1rem}`) – ein Scroll-Kasten an der Zone schnitte sie ab (#183).
WIRKBEREICH (unverändert aus Runde 2, dort nachgemessen): Ob der Rahmen bricht, hängt an
Kopf + Eingabezone, und die sind BREITENabhängig – 334 px bei 1280, 425 bei 1024, 453 bei
900, 466 bei 844, 684 bei 360 Pixel Breite. Daraus die zwei Bedingungen:
* `max-height:580px` – flache Fenster bei jeder Breite: 844×530 behielt im festen Rahmen
65 px Strom, 1024×580 155 px, 1280×530 196 px; mit den Kompaktregeln sind es 251, 338
und 281 px. Die Schwelle liegt bewusst unter 600 px – bei 1280×600 trägt der feste
Rahmen (266 px Strom), und diese Klasse hatte Fund 1 der Abnahme Runde 2 als
verschlechtert gemeldet.
* `max-height:720px` zusammen mit `max-width:560px` – das schmale Gerät im Hochformat, wo
Kopf + Zone allein bis 684 px belegen (360×640, 480×720, 540×700).
Draußen bleiben die Fenster, in denen nichts kaputt war; für 1024×720, 1280×900 und das
Hochformat 390×844 aus #216 ist die Geometrie mit und ohne diesen Block pixelgleich
nachgemessen (Strom 295, 566 und 232 px).
Was Variante A KOSTET, offen benannt: Im schmalen Hochformat bleibt der Strom ein Schlitz –
360×640 kommt von 0 px (Befund) auf 101 px, nicht mehr. Der Rechtsfuß braucht dort allein
288 px von 640, und der A6-Satz hat Vorrang. Mehr Strom gäbe es nur über einen kürzeren
Rechtsfuß – das ist die Kanzleifrage aus #234 (Chris-Frage 12/D3), keine CSS-Frage. */
@media(max-height:580px),(max-height:720px) and (max-width:560px){
body.chat{height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
.rahmen{height:100dvh}
.strom{min-height:5rem}
.chatkopf{padding:.25rem .7rem;flex-wrap:nowrap}.chatkopf .kopfwerk{flex:0 0 auto}.chatkopf .kopfrechts{flex:0 1 auto;min-width:0;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:.35rem;margin:-.35rem;background:linear-gradient(to left,var(--marke-primaer,var(--marke-hintergrund,var(--bg))) 40%,transparent) right/2.5rem 100% no-repeat local,linear-gradient(to left,rgba(0,0,0,.5),transparent) right/1rem 100% no-repeat scroll}.chatkopf .kopfrechts>span:first-child{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* #987: EINE Kopfreihe statt vier (360 px: 105 → 41 px, 844 px: 68 → 41 px). Die Links laufen als Streifen, der bei Platzmangel selbst waagrecht scrollt, statt in drei Reihen umzubrechen; die Adresse (reiner Text, auf allen anderen Seiten weiter im Kopf) ist im Chat nur noch für Vorleser da (Muster `.vh`, Welle 45 – `display:none` nahm sie auch ihnen). Keine Schrift wird kleiner. Polster + Gegenrand halten den Fokusrahmen im Scrollkasten sichtbar, ohne die Reihe zu erhöhen; `.chatkopf .kopfrechts` schlägt die spätere Grundregel `.kopfrechts` über die Spezifität, nicht über die Reihenfolge. Welle 45: ein Schatten am rechten Rand zeigt, dass weitere Links folgen (Scrollleisten sind am Handy unsichtbar) – nur bei Überlauf und nicht am Ende: die Abdeckung in der Kopfzeilenfarbe wandert mit dem Inhalt (`local`) und liegt am Ende über dem feststehenden Schatten (`scroll`); Textfarben bleiben, der Schatten liegt unter dem Text. */
.eingabezone{padding:.15rem .7rem .25rem}
.eingabebox{padding:.3rem .5rem}
#nachricht{min-height:2.2rem;max-height:5rem}
/* Nachzug Runde 3 (Prüferbefund 2026-09-10): KEIN `gap` hier. Der Mobil-Block oben setzt
`.werkzeuge{gap:.4rem}` als Zusage aus dem Sichttest 2026-09-02 (Fingerbedienung); dieser
Block steht später bei gleicher Spezifität und hätte sie still zurückgenommen. Der Gewinn
wäre rund 2 px an einer umbrechenden Zeile – dafür wird keine Trefferfläche kleiner. */
.werkzeuge{padding-top:.25rem}.werkzeuge .aufwand{flex-basis:9rem;min-width:8rem} /* #987: Aufwand-Regler startet mit 9 statt 12 rem (Boden 8 statt 10 rem, sonst klemmt der Boden die Ausgangsbreite) – im gesperrten Rollengespräch teilt er sich bei 360 px die Reihe mit „Als Datei speichern“ (Werkzeugzeile 142 → 112 px), bei 844 px bleibt „Senden“ in Reihe 1 (82 → 50 px) */
.werkzeuge select{padding:.2rem .35rem}
/* Die POLSTER der Bedienelemente werden hier sehr wohl kleiner (.2/.5 statt .35/.7 rem), und
das kostet Trefferfläche – bewusst: sie bringen die Werkzeugzeile von 3 auf 2 Zeilen und
sind damit der größte Einzelposten, aus dem der A6-Satz seinen Platz bekommt. Anders als
beim `gap` steht hier also ein echter Gewinn dagegen. Offen für den Sichttest: reicht die
Fläche auf einem echten Gerät im Querformat noch (Frage an Chris, #234). */
.werkzeuge button.sek,.werkzeuge summary.sek,.werkzeuge .dateiknopf{padding:.2rem .5rem}
.werkzeuge>.schluss>button,.werkzeuge>button:not(.sek){padding:.3rem .8rem}
.chatfuss{line-height:1.25;margin-top:.15rem}
.rollezeile{padding-top:.2rem;gap:.2rem .5rem}.rollezeile>p{font-size:.75rem;line-height:1.25}.rollezeile>a.btn.sek{padding:.15rem .5rem;font-size:.75rem}.rollezeile:has(#rolle-neu)>p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* #954; #987: im GESPERRTEN Gespräch klappt der Hinweissatz hier ein (360 px: Rollenzeile 60 → 27 px) – gesperrtes Select und Knopf „Neues Gespräch mit dieser Rolle“ tragen die Regel sichtbar, Vorleser bekommen den Satz weiter über `aria-describedby` (visuell verborgen wie `.vh`, nicht `display:none`). Im NEUEN Gespräch bleibt er stehen: dort ist er die Regel vor dem ersten Wort. */
}
/* ---------------------------------------------------------------- #162 Profil-Cockpit (Pilotmodul)
Das Limit-Menü sitzt in der Kopfzeile; wie in der Werkzeugzeile bleibt das details IM FLUSS und
nur das Panel schwebt (sonst misst sich `position:absolute` am Viewport und das Panel landet am
Fensterrand – Befund der Gesprächsliste). Balken sind