/* COMPASS-Web — eigene Ergaenzungen zum Kit (compass-kit.css), NIE das Kit selbst patchen (R17).
   Jede Zeile hier ist etwas, das das Kit nicht abdeckt, weil das Kit keine Interaktions-/Transport-
   Bibliothek kennt (htmx) oder weil es Frame-Beispieldaten zeigt, die im echten Produkt fehlen
   koennen. Rueckmeldung an Design: siehe PR-Body "app.css-Ergaenzungen fuer Design".

   1) htmx-Ladezustand auf einem Eintrag/einer Aktion (Kit hat .ck-skeleton fuer Seiten-/
      Karten-Ladezustand, aber keine Klasse fuer "dieser einzelne Button/diese Zeile laedt gerade
      nach einem Klick" — htmx setzt htmx-request auf das Zielelement waehrend des Requests). */
.htmx-request.ck-btn,
.htmx-request .ck-btn { opacity: .6; pointer-events: none; }

/* 2) .ck-scrim ausserhalb von 760px unsichtbar UND aus dem Grid-Fluss nehmen — Kit-Luecke,
      keine App-Eigenheit (Befund beim Live-Rendern gegen den echten Kern, siehe PR-Body):
      compass-kit.css definiert `.ck-scrim{display:none;...}` NUR innerhalb der
      `@media (max-width:760px)`-Regel (kit/compass-kit.css, letzter Block). frames/frame.css
      setzt zusaetzlich ein bedingungsloses `.ck-scrim{display:none}` (Zeile 9) — das ist
      Frame-Huelle, ausdruecklich "kein Produktcode" (frames/frame.js Kommentarzeile 1) und wird
      hier bewusst NICHT eingebunden. Ohne diese Zeile ist `.ck-scrim` oberhalb von 760px ein
      normaler <div> (default display:block) und damit ein drittes Grid-Item im zweispaltigen
      `.ck-app`-Grid (Sidebar/Scrim in Zeile 1, `.ck-main` faellt dadurch per Auto-Placement in
      Zeile 2 — sichtbar als ~100vh Leerraum vor dem eigentlichen Inhalt, gemessen per
      Playwright-Render gegen den echten Kern 15.09.2026). `display:none` nimmt das Element aus
      dem Grid-Fluss, das Produkt braucht also dieselbe Regel wie der Frame, nur eigenstaendig
      (kein Import von frame.css). Sidebar-Schublade selbst: static/js/nav.js. */
.ck-scrim { display: none; cursor: pointer; }
@media (max-width: 760px) {
  .ck-scrim { display: none; }
  .ck-app.nav-open .ck-scrim { display: block; }
}

/* 3) ENTFERNT am 28.09.2026 (COMPASS-239 Abschnitt 1): `.ck-alert .retry`.
      Die Klasse `retry` kommt in keiner Vorlage vor — die Fehler-Banner setzen den
      Link mit `ck-btn ck-btn-sm`. Nur der VARIABLENNAME `fehler_retry` sieht ihr
      aehnlich, und der steht in den Routen, nicht im Markup. Die Regel zielte damit
      ins Leere, seit die Banner auf Kit-Knoepfe umgestellt wurden.
      Gefunden nicht per Augenmass, sondern vom Waechter in
      web/tests/test_compass239_app_css.py, der jeden Selektor gegen die benutzten
      Namen aus Vorlagen, Routen und Skripten haelt. */

/* 4) Regelwerk-Sachenliste: der geltende Satz ist echter Aussagetext (oft 200+ Zeichen) statt der
      kurzen Frame-Beispielzahl "5 Aussagen" (das Feld existiert nicht in spec/api.md, siehe
      PR-Body "Frame zeigt, API hat nicht") — ohne Begrenzung wird jede Zeile 5-6 Zeilen hoch und
      177 echte Sachen sind nicht mehr scannbar. Kit-.ck-list .m ist fuer kurze Meta-Zeilen gedacht
      (z.B. "Frist 2026-09-20 · Sicherheit 0.8"), keine eigene Klasse fuer Langtext-Kuerzung noetig
      gewesen bisher — hier scoped auf die Regelwerk-Liste, nicht global. Titel-Attribut traegt den
      vollen Text (kein Datenverlust, nur eine Anzeige-Kuerzung). */
.rw-sache-meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 5) Mermaid-Diagramm-Rahmen (Prozesse) — das Kit hat .ck-chart fuer eigene SVG-Diagramme, aber
      Mermaid rendert sein eigenes SVG mit eigenen Hintergrundfarben; hier nur der Card-Rahmen
      drumherum, damit es sich in .ck-card-body wie eine Zeichnung und nicht wie ein Fremdkoerper
      einfuegt. Keine Mermaid-Theme-Werte hier — die kommen aus mermaid.initialize() im Template. */
.compass-mermaid-wrap { overflow: auto; }
.compass-mermaid-wrap svg { max-width: 100%; }

/* 6) Sidebar-Nav-Spacer (Z.576, "Einstellungen" ganz unten) — Kit definiert .sp{flex:1} nur
      innerhalb .ck-topbar/.ck-row/.ck-card-head/.ck-list li/.ck-alert/.ck-chart-head, nicht
      innerhalb .ck-nav (compass-kit.css Zeilen ~124-283). .ck-nav ist selbst schon
      flex-direction:column (Kit), hier nur die fehlende Zeile fuer genau diesen Container --
      kein Patch am Kit, nur die App-eigene Ergaenzung fuer einen Fall, den das Kit nicht kannte. */
.ck-nav .sp { flex: 1; }

/* 7) Brief-Fuellstand-Balken (Agents/Statistik, Nachtrag Z.578 "Gehirn-Last sichtbar", umbenannt
      COMPASS-104 20.09.2026 — Betrieb-Befund: "Kopf 96 %" neben Personas, die noch nie online
      waren, las sich wie eine Auslastungs-/Burst-Messung einer laufenden Sitzung; die Zahl ist
      aber der AUF ABRUF berechnete Fuellstand des Briefs, keine Sitzungsmessung — s.
      routes/agents.py::_mit_anzeige/_brief_ansicht, routes/statistik.py::_koepfe_anzeige. Das
      Kit hat Pillen, Karten und Charts, aber keinen einfachen "Anteil von Budget"-
      Fortschrittsbalken. Zwei Klassen statt einer erfundenen Kit-Ergaenzung: Track (Schiene) +
      Fill (Fuellstand, Breite kommt inline aus dem berechneten Prozentwert). Farbe folgt dem
      Kit-Zustandsvokabular (ruhig=normal, achtung=abgeschnitten oder >90% voll), keine neue
      Farbe erfunden. Wird NUR gezeigt, wenn die Persona je online war (`jemals_online`) — ohne
      das bleibt der Balken ganz weg, kein Fuellstand ohne jeden Herzschlag (CLAUDE.md
      Eigenheit 4). */
.agents-brief-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ck-sunken);
  overflow: hidden;
  margin: 4px 0 2px;
}
.agents-brief-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ck-ruhig);
}
/* --ck-achtung ist als TEXTfarbe gedacht (Nachtrag Carsten 20.09.2026, im Zug des
   Statistik-Balken-Befunds): als Flaechenfarbe eines Fortschrittsbalkens wirkt sie
   unpassend/braun. Kit-Flaechenton ist --ck-achtung-bg (siehe .ck-pill-achtung,
   .ck-alert-achtung, compass-kit.css) + --ck-achtung-bd als Rand -- keine neue Farbe
   erfunden, nur der schon vorhandene Flaechen-Ton statt des Text-Tons. */
.agents-brief-fill.is-achtung { background: var(--ck-achtung-bg); border: 1px solid var(--ck-achtung-bd); }

/* 7b) Kartenkopf der Agents-Karten: Pillen duerfen umbrechen, statt aus der Karte zu laufen
      (Carsten, Bildschirmfoto 20.09.2026: "hier bricht auch was raus"). Ursache: `.ck-card-head`
      ist eine Flex-Zeile ohne Umbruch; ein langer Jobtitel ("Sparringspartner der
      Geschaeftsfuehrung") macht den Textblock breit, die Pillen tragen `white-space:nowrap`
      (Kit) und koennen nicht schrumpfen -- sie schoben sich ueber den rechten Kartenrand
      hinaus. Im Frame (frames/agents.html) sind die Jobtitel kurz und einzeilig, deshalb
      faellt es dort nicht auf. Zwei Zeilen, beide nur fuer diese Karten: der Textblock darf
      schrumpfen (min-width:0 -- ohne das ignoriert ein Flex-Kind seine Inhaltsbreite nicht),
      und der Kopf bricht um, statt ueberzulaufen. Kein Eingriff ins Kit (bleibt byte-gleich
      zum Design-Export, pruefwege/kit_drift.py). */
.agents-karten .ck-card-head { flex-wrap: wrap; row-gap: 6px; }
.agents-karten .ck-card-head > div:first-child { min-width: 0; }
.agents-karten .ck-card-head .sp { min-width: 0; }
/* ── Team-Reiterleiste (COMPASS-52, 18.09.2026) — Agents/Personas/Hall of Lessons/Hall of
   Fame teilen sich eine Reiterleiste oben auf jeder der vier Flaechen. Eigene horizontale
   Scrollleiste statt Umbruch (overflow-x:auto + Kinder mit white-space:nowrap/flex:none), damit
   vier Labels bei 375px nie die ganze Seite waagerecht scrollen lassen (AC COMPASS-52).
   Liegt in app.css, nicht im Kit: compass-kit.css bleibt byte-gleich zum Design-Export (COMPASS-41, pruefwege/kit_drift.py). */
.ck-team-tabs{display:flex;gap:2px;padding:2px;margin-bottom:var(--ck-s4);border:1px solid var(--ck-hair);border-radius:var(--ck-r-sm);background:var(--ck-sunken);overflow-x:auto;-webkit-overflow-scrolling:touch}
.ck-team-tabs a{flex:none;white-space:nowrap;height:32px;padding:0 14px;border-radius:6px;font:500 13px/1 var(--ck-font-body);color:var(--ck-t2);text-decoration:none;display:inline-flex;align-items:center}
.ck-team-tabs a:hover{color:var(--ck-t0)}
.ck-team-tabs a.is-active{background:var(--ck-card);color:var(--ck-t0);box-shadow:var(--ck-sh-sm)}

/* 8) Graph-Hoehe unter 1024px (COMPASS-Graph-Mockup-Angleichung, Carsten 19.09.2026) --
   frames/graph.html bekommt diese Zeile aus frames/frame.css, dort ausdruecklich als
   "Frame-Huelle, nicht Teil des Produkts" markiert (frame.js Kommentarzeile 1) und deshalb
   NICHT eingebunden (gleiches Muster wie Abschnitt 2 oben, .ck-scrim). Das Produkt braucht die
   Zeile trotzdem selbst, sonst bleibt der 560px hohe Graph auf 390px Breite unnoetig groß und
   drueckt den Rest der Seite weit nach unten. */
/* ABGEGEBEN am 09.10.2026 (Zehnter Export): hier stand
   `@media (max-width:1024px){.ck-graph{height:420px!important}}`. Das Kit bringt
   die Regel jetzt selbst mit, als `.ck-graph.is-flaeche` -- deshalb traegt
   `graph.html` die Klasse und diese Zeilen sind weg. Der Zusatz 8b darunter
   bleibt: eine Regel fuer KURZE Viewports hat das Kit nicht, und app.css laedt
   nach dem Kit, also gewinnt sie weiterhin. */
/* 8b) Legende bei kurzen Viewports (Befund Carsten, 20.09.2026, Bildschirmfoto Mandant compass:
      "die Erklaerung unten links" fehle). Nachgemessen mit Playwright (nicht vermutet, R27):
      die Legende sitzt korrekt im DOM, mit position:relative/absolute wie im Kit vorgesehen, IMMER
      mindestens mit der Kategorie "Sonstiges" befuellt -- keiner dieser drei Verdaechte aus dem
      Auftrag traf zu. Was zutraf: die Hoehe. Bei 390px Breite liegt der Graph-Container erst bei
      ca. 263px Seiten-Y (Kopfzeile + Titel + Suchformular darueber), die Legende am unteren Rand
      des 420px hohen Kastens damit bei ca. 670px -- genau die Fensterhoehe eines iPhone SE/8
      (375x667, ein reales, haeufiges Geraet, kein Extremfall). Jeder kuerzere Viewport zeigt die
      Legende nur nach Scrollen, nicht beim ersten Blick: technisch vorhanden, praktisch "nicht
      sichtbar". `100dvh` statt `100vh`, weil mobile Browser-Chrome (Adressleiste) `100vh` zu hoch
      ausweist -- genau der Fall, der die Luecke verursacht. Unterstuetzt ein Browser `dvh` nicht,
      ist die ganze Deklaration ungueltig und wird verworfen (kein stiller Rueckfall auf falsch
      Berechnetes) -- es bleibt bei den festen 420px aus der Regel oben. */
@media (max-width: 1024px) and (max-height: 760px) {
  .ck-graph { height: max(260px, min(420px, calc(100dvh - 290px))) !important; }
}
/* 9) Projekt-Umschalter (COMPASS-70) — das Kit definiert `.ck-proj-item` fuer ein `<a>` (Frame-
   Beispiel: jede Zeile navigiert direkt zu einer anderen Beispielseite, projekt.js). Das Produkt
   wechselt ein Projekt ueber ein echtes `POST /projekt/wechseln`-Formular (funktioniert ohne JS,
   Auftrag), jede nicht-aktive Zeile ist deshalb ein `<button type="submit">` statt eines `<a>` --
   hier nur der Reset auf die native Button-Optik, damit sie Pixel-genau wie das Kit-`<a>` aussieht
   (kein Kit-Patch, kein Duplikat der Kit-Regeln selbst, nur was ein `<button>` zusaetzlich mitbringt).
   `:focus-within` oeffnet das Menue zusaetzlich zu `static/js/projekt.js`s Klick-Steuerung: ohne
   JS ist das Menue sonst nie erreichbar (Kit zeigt es nur ueber `.ck-proj.is-open`, eine reine
   JS-Klasse) — mit Tab hinein bleibt der Wechsel selbst dann nutzbar. */
.ck-proj-item[type="submit"]{border:0;background:transparent;font:inherit;text-align:left;width:100%;cursor:pointer}
.ck-proj:focus-within .ck-proj-menu{display:flex}
/* 10) Fehlerbanner fuer einen abgelehnten Projekt-Wechsel (403/Kern nicht erreichbar) — dieselbe
   Position wie die Wechsel-Bestaetigung (`.ck-proj-toast`, Kit), aber mit dem bestehenden
   `.ck-alert-fehler`-Ton statt der Kit-eigenen `--ck-inverse`-Bestaetigungsfarbe (kein neuer
   Fehlerfarbwert erfunden, R1). */
.ck-proj-fehler{position:fixed;left:50%;top:calc(var(--ck-topbarh) + 14px);transform:translateX(-50%);z-index:60;max-width:520px;box-shadow:var(--ck-sh-lg)}
@media (max-width:760px){.ck-proj-fehler{left:8px;right:8px;transform:none;max-width:none}}
/* 11) Schaltzentrale — "Das Gehirn in Zahlen" (COMPASS-19/COMPASS-74): sechs Kacheln in einer
   Zeile auf breiten Bildschirmen. Kit hat .ck-grid-4 (vier Spalten) als naechstgelegene Klasse,
   keine Sechs-Spalten-Variante -- Spaltenzahl kommt per Inline-style auf dem Element
   (schaltzentrale.html), hier nur die Media-Query-Verengung fuer schmalere Breiten (dieselben
   Bruchpunkte wie das Mockup, compass-design-system/handoff/compass/frames/schaltzentrale.html).
   Liegt in app.css, nicht im Kit: compass-kit.css bleibt byte-gleich (COMPASS-41, pruefwege/kit_drift.py). */
/* ABGEGEBEN am 09.10.2026 (Zehnter Export): hier standen drei Zeilen fuer
   `#sz-gehirn` -- sechs Spalten, bei 1024 drei, bei 760 zwei. Genau diese zwei
   Stufen sind jetzt `.ck-flaeche-raster.is-3-2` im Kit, und die Spaltenzahl auf
   breiten Schirmen gehoert laut Lieferung an das Element. `schaltzentrale.html`
   steht damit Zeichen fuer Zeichen wie der Frame `#gz`. */

/* 11) Team-Uebersicht (COMPASS-52-Nachtrag, 19.09.2026, "coole Uebersicht und Stats"): fuenf
   Wochenzahlen-Kacheln in einer Reihe. Das Kit definiert .ck-grid-2/3/4 (Zeilen 138-140) und
   deren Rueckbau auf 2/1 Spalten (Zeilen 627/637), aber keine Fuenferreihe -- eigene Klasse
   statt eines Kit-Patches (compass-kit.css bleibt byte-gleich zum Design-Export, COMPASS-41,
   pruefwege/kit_drift.py), dieselben Rueckbau-Stufen wie .ck-grid-4. */
.ck-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1024px){.ck-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ck-grid-5{grid-template-columns:1fr}}

/* 12) Statistik -- Rang-Balken als HTML/CSS-Zeilen statt SVG (Befund 20.09.2026, Carsten,
   Screenshot /statistik: "das ist eher was fuer blinde oder? im mockup ist das anders").
   Ursache: `.ck-chart-body svg{width:100%;height:auto}` (compass-kit.css) zog das vorherige
   Balken-SVG (feste `viewBox="0 0 320 H"`) auf die volle Kartenbreite -- SVG-Text skaliert mit
   der viewBox, nicht mit einem CSS-Schriftgrad. Gemessen per Playwright (dieser Fix): bei
   1280px Kartenbreite (986px gerenderte Chart-Breite / viewBox 320 = Faktor ~3,08) rendere
   die als 10px deklarierte Kit-Achsenschrift effektiv mit ~30,8px. HTML-Text kennt keine
   viewBox -- hier deshalb reine Kit-Farben/-Tokens statt SVG, feste Schriftgroessen unten sind
   bewusst NICHT von der Kartenbreite abgeleitet. Struktur/Vokabular an
   compass-design-system/handoff/compass/frames/statistik.html angelehnt (schmale Balken,
   rx/Radius klein, Wert rechts) -- dort selbst als SVG mit einer viewBox gebaut, die zufaellig
   der gerenderten Breite entspricht (600 Einheiten), was denselben Fehler nur zufaellig
   vermeidet und bei 390px nicht mehr traeg; die HTML/CSS-Zeile hier ist deshalb die robustere
   der beiden im Auftrag genannten Optionen, nicht nur eine Uebersetzung des Mockups.
   Liegt in app.css, nicht im Kit: compass-kit.css bleibt byte-gleich (COMPASS-41,
   pruefwege/kit_drift.py). */
.stat-balken { display: flex; flex-direction: column; }
.stat-balken-zeile {
  display: grid;
  grid-template-columns: 104px 1fr 60px;
  column-gap: 12px;
  align-items: center;
  padding: 5px 0;
}
.stat-balken-label {
  font: 500 11px/1.3 var(--ck-font-mono);
  color: var(--ck-t3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-balken-schiene {
  height: 10px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-sunken);
  overflow: hidden;
}
.stat-balken-fuellung {
  display: block;
  height: 100%;
  border-radius: var(--ck-r-pill);
  background: var(--ck-ac);
}
.stat-balken-wert {
  font: 500 12px/1 var(--ck-font-mono);
  color: var(--ck-t2);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 480px) {
  /* COMPASS-260 (25.09.2026, Befund tank): bei 400 px lief /statistik ueber --
     Dokument 420 statt 400. Ursache war NICHT ein Flaechen-Raster (dafuer gibt
     es `ck-flaeche-split`), sondern diese Zeile: die Wertspalte stand fest auf
     50 px, waehrend `.stat-balken-wert` `white-space:nowrap` traegt. Der
     laengste Wert entsteht ausgerechnet bei den KLEINSTEN Zahlen --
     "1 von 1 (100%)" ist rund 98 px breit, weil die Klammer mit der
     Prozentzahl immer mitgeht. 98 in 50, und nichts bricht um.

     Jetzt: der Wert bekommt, was er braucht (`auto`), die Schiene gibt nach
     (`minmax(0,1fr)`), und das Etikett ist nach oben begrenzt. `minmax(0,…)`
     statt `80px`, weil ein Rasterkind sonst `min-width:auto` behaelt und
     nicht unter seine breiteste unteilbare Stelle schrumpft -- derselbe
     Grund wie bei den Spalten auf /personas/<slug>. */
  .stat-balken-zeile { grid-template-columns: minmax(0, 72px) minmax(0, 1fr) auto; column-gap: 8px; }
}
/* Die schliessende Klammer dieser Media-Abfrage fehlte (gefunden 23.09.2026
   beim Zaehlen: 72 oeffnende gegen 71 schliessende). Folge: ALLES, was in
   dieser Datei danach stand, lag im Rumpf von `max-width: 480px` und galt
   nur auf sehr schmalen Schirmen -- rund neunzig Zeilen, darunter die
   Gedaechtnis-Flaeche und die Statusmarke im Kartenkopf. Kein Fehler, den
   ein Blick auf die Datei zeigt: CSS bricht nicht ab, es verschiebt still
   den Geltungsbereich. */

/* 12) Gedaechtnis -- Master-Detail (COMPASS-74, Frame compass/frames/gedaechtnis, gemessen
   19.09.2026): eine <tr> darf laut HTML selbst kein <a> sein, deshalb traegt jede Zelle einen
   eigenen Link auf dieselbe Zeilen-URL (?id=…), hier auf Zellengroesse gestreckt (negativer Rand
   gleicht das Kit-Zellenpolster `.ck-table td{padding:11px 14px}` wieder aus) und farblos, damit
   die Zeile wie EIN Klickziel wirkt statt wie vier blaue Linktexte. `.ck-table td.trunc` deckelt den
   Klartext (kein eigenes Namensfeld im Kern, siehe routes/gedaechtnis.py-Kommentar) auf zwei
   Zeilen -- dasselbe Line-Clamp-Muster wie `.rw-sache-meta` oben (Abschnitt 4), nicht neu
   erfunden. Grid-Ruecklauf auf 1 Spalte unter 1024px: dieselbe Zeile wie frames/frame.css
   `#gd{grid-template-columns:1fr!important}` (Frame-Huelle, ausdruecklich nicht eingebunden,
   s. Abschnitt 2/8 oben), das Produkt braucht sie eigenstaendig unter derselben ID. */
.gd-row-link{display:block;margin:-11px -14px;padding:11px 14px;color:inherit;text-decoration:none}
.gd-row-link:hover{color:inherit}
/* `.gd-name` IST WEG (10.10.2026). Sie klemmte den Namen mit
   `-webkit-line-clamp:2` auf zwei Zeilen und schnitt den Rest ohne jedes
   Zeichen dafuer ab -- Carstens Meldung "bricht mitten in der dritten Zeile
   ab". Die Auslassung macht jetzt die Kit-Klasse `.ck-table td.trunc`
   (`text-overflow:ellipsis`), der volle Text steht in der Detailspalte.

   DIESE EINE ZEILE BLEIBT NOETIG, und zwar wegen des Links: `trunc` sitzt am
   `<td>`, der Text aber in einem `<a class="gd-row-link">`, das die ganze
   Zelle als Klickziel auslegt (`display:block` plus negative Raender). Ein
   Block-Kind erbt die Auslassung nicht -- ohne diese Zeile laeuft der Text
   wieder ueber. Der Frame hat das Problem nicht: seine Zeilen sind keine
   Links. */
.ck-table td.trunc .gd-row-link{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1024px){
  #gd-grid{grid-template-columns:1fr!important}
}


/* 12) ENTFERNT 25.10.2026: die Regeln der klappbaren Nav-Gruppe (`.ck-nav-group`, COMPASS-129) -- die Gruppe
      „Fachgebiete“ war ihr einziger Nutzer und ist aus der Seitenleiste entfernt (COMPASS-368); der Waechter
      `test_compass239_app_css.py` meldet Regeln ohne Nutzer. Das Kit fuehrt `.ck-nav-group` selbst, falls eine
      Gruppe (Frame: Mannschaft, Lernen) wiederkommt. */

/* ── Ampel-Wege (Schaltzentrale) ─────────────────────────────────────────────
   Sprechender Name statt der naechsten Nummer: die Nummerierung oben ist nicht
   eindeutig — "11)" und "12)" kommen in dieser Datei je zweimal vor, eine "13)"
   haette die Doppelung nur verlaengert.

   Warum hier und nicht im Kit: compass-kit.css ist eine unveraenderte Kopie aus
   dem Design-Entwurf (der Pruefweg `kit_drift` WUERDE jede Byte-Abweichung melden,
   hat aber keinen Ausloeser -- COMPASS-138, 22.09.2026; die zwei Tests, die wirklich
   laufen, pruefen die Kopien auf Gleichheit untereinander, nicht auf Treue zum Entwurf) — siehe die
   Kopfzeile dieser Datei: "NIE das Kit selbst patchen (R17)".

   Kit-Luecke, keine App-Eigenheit: `.ck-ampel .warum` ist im Kit reiner
   Fliesstext. Sobald ein Teil davon ein Ziel hat, braucht es die Sprache, die
   das Kit fuer Links schon spricht (`.ck-link`) — nur eben INNERHALB eines
   Satzes, wo ein voll gefaerbter Link den Satz zerreissen wuerde. Deshalb:
   unauffaellig im Fluss, deutlich beim Darueberfahren. Rueckmeldung an Design:
   `.ck-ampel-weg` und `.ck-ampel-quellen` gehoeren ins Kit, sobald das
   Design-Repo die Runde macht. */
.ck-ampel-weg { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ck-hair); }
.ck-ampel-weg:hover { color: var(--ck-ac); border-bottom-color: var(--ck-ac); text-decoration: none; }

.ck-ampel-quellen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ck-ampel-quellen > .ck-small { color: var(--ck-t3); }
.ck-ampel-quelle { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: var(--ck-r-pill); background: var(--ck-sunken); border: 1px solid var(--ck-hair); color: var(--ck-t1); font: 500 12.5px/1.35 var(--ck-font-body); text-decoration: none; }
a.ck-ampel-quelle:hover { background: var(--ck-card); border-color: var(--ck-border); color: var(--ck-t0); text-decoration: none; }
/* Ohne Ziel: sichtbar, aber nicht anklickbar — ein Link ins Leere waere
   schlimmer als keiner, und Weglassen waere die Sackgasse von vorher. */
.ck-ampel-quelle.is-ohne-ziel { color: var(--ck-t3); background: transparent; border-style: dashed; cursor: default; }
.ck-ampel-quelle .stand { color: var(--ck-t3); font-size: 11.5px; }

/* ── Bereich am Gedaechtnis-Eintrag ──────────────────────────────────────────
   Sprechender Name statt der naechsten Nummer (die Nummerierung oben ist nicht
   eindeutig: "11)" und "12)" kommen je zweimal vor).

   Warum eine eigene Klasse und kein `<span class="ck-small">` mit Stil am Tag:
   "ohne Bereich" ist ein benannter Leerzustand, der an drei Stellen gleich
   aussehen muss (Tabellenzeile, Detailkarte, Persona-Zeitleiste) -- derselbe
   Satz in drei verschiedenen Graus waere eine Aussage ueber nichts.

   Warum hier und nicht im Kit: compass-kit.css ist eine unveraenderte Kopie aus
   dem Design-Entwurf (Pruefweg `kit_drift`, zwei weitere Tests auf Gleichheit
   der Kopien) -- siehe die Kopfzeile dieser Datei: "NIE das Kit selbst patchen".
   Das Praefix `gd-` ist das der Gedaechtnis-Flaeche, wie `.gd-row-link` und
   `.gd-name` darueber; `ck-` bleibt dem Kit vorbehalten. */
.gd-ohne-bereich { color: var(--ck-t4); font-style: italic; }

/* Kopfzeilen-Marke (COMPASS-219, 22.09.2026) — die Statusmarke im Kartenkopf
   darf nicht schrumpfen.

   GEMESSEN, nicht vermutet (Chromium, das Kit allein in einer Wegwerf-Seite):
   `.ck-status` selbst clippt NICHT — overflow ist `visible`, scrollHeight ==
   clientHeight, scrollWidth == clientWidth, auch bei "Kein Satz" und bei
   laengeren Woertern. Die Marke wird erst im Kartenkopf gequetscht:
   `.ck-card-head` ist `display:flex`, und `.ck-status` hat -- anders als
   `.ck-kind` eine Zeile darunter im Kit -- kein `flex:none`. Bei 390px
   schrumpft sie dadurch von 71,5px auf 41,8px, und "KEIN SATZ" ist
   abgeschnitten. Das ist der Befund aus Carstens Screenshot.

   WARUM HIER UND NICHT IM KIT, obwohl der Auftrag "im Design-Kit beheben"
   sagt: das Kit ist ein Handoff aus dem Design-Repo, drei byte-identische
   Kopien (web/, website/, dokumentation/), bewacht von pruefwege/kit_drift.py
   und web/tests/test_design_kit.py. Die Kopfzeile dieser Datei sagt es
   woertlich: "NIE das Kit selbst patchen (R17)". Gemeldet statt still
   anders gemacht -- dieselbe Stelle, an der COMPASS-131 schon einmal
   korrigiert wurde. Wenn das Kit es lernen soll, gehoert die Aenderung ins
   Design-Repo und kommt als Handoff zurueck.

   Eng gefasst auf den Kartenkopf: eine `.ck-status` anderswo (Listen,
   Tabellen) soll weiter schrumpfen duerfen, wenn ihr Behaelter das will. */
.ck-card-head > .ck-status { flex: none; }

/* Graph-Flaeche: Bild links, Auswahl rechts (COMPASS-131, 23.09.2026)

   Carsten woertlich: "die Auswahl ist nix, wenn ganz unten dann der Graph
   kommt". Der Graph stand am Ende der Seite, unter Filterzeile UND
   Auswahlliste.

   Zwei Spalten statt untereinander. Die rechte Spalte ist fest, die linke
   nimmt den Rest — `minmax(0, 1fr)` und nicht `1fr`, weil ein Grid-Kind
   sonst nicht unter seine Inhaltsbreite schrumpft und die Zeichenflaeche
   die Seite aufreisst.

   UNTER 900px EINE Spalte, und der Graph steht dort ZUERST — er kommt im
   Markup vor der Auswahl, also braucht es dafuer keine Umsortierung. Genau
   das ist der Punkt: ein Nebeneinander, das mobil umbricht, waere dort
   wieder die alte Reihenfolge, nur mit mehr CSS.

   Sprechender Name statt Nummer: app.css traegt zweimal "11)" und zweimal
   "12)" — eine weitere Nummer haette die Doppelung nur verlaengert.

   Die Auswahl bleibt unveraendert sichtbar; sie wurde bewusst hergestellt
   (versteckte <datalist>, Befund 20.09.2026) und wird hier nur umgestellt. */
.graph-flaeche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--ck-s4);
  align-items: start;
}

@media (max-width: 900px) {
  .graph-flaeche { grid-template-columns: minmax(0, 1fr); }
}

/* Die Karte in der rechten Spalte bringt ihren eigenen Abstand mit
   (`ck-mt-2` aus dem Kit) -- im Nebeneinander sieht das aus wie ein
   verrutschter Kopf, deshalb hier weg. Das Kit selbst bleibt unberuehrt. */
.graph-flaeche-auswahl > .ck-card { margin-top: 0; }

/* ── COMPASS-264 · Die Krume drückt die Dachzeile über den Rand ───────────────
   Gemessen (Playwright, /regelwerk mit einer langen Krume):
       Schirm 375 px → Dokument 495 px   (120 px Überlauf)
       Schirm 400 px → Dokument 497 px   ( 97 px Überlauf)
   Der Überlauf wächst mit der TEXTLÄNGE der Krume, nicht mit dem Inhalt der
   Seite — wer ihn im Inhalt sucht, findet ihn nie. Gefunden von Werft und tank
   unabhängig voneinander.

   URSACHE, und sie ist ein Paar, das sich selbst aufhebt. Im Design-Kit steht:
       .ck-crumbs b{… white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
       .ck-crumbs b{flex:none; min-width:max-content}
   Die erste Regel kürzt die letzte Krume mit Auslassungspunkten. Die zweite
   nimmt ihr die Fähigkeit zu schrumpfen: `min-width:max-content` heißt „nie
   schmaler als mein Inhalt", und `flex:none` verbietet das Schrumpfen ein
   zweites Mal. Damit kommt die erste Regel nie zum Zug.

   WARUM DIE KORREKTUR HIER STEHT UND NICHT IM KIT: `compass-kit.css` ist eine
   unveränderte Kopie aus dem Entwurf (Prüfweg `kit_drift`). Beide Zeilen stehen
   SO im Entwurfs-Kit — das ist kein Abschreibfehler von uns. Die Korrektur
   gehört deshalb ins Produkt-Stylesheet, und der Befund ans Design, sonst kommt
   er mit dem nächsten Export zurück.

   Gekürzt, nicht weggeklappt: die Krume bleibt sichtbar und behält ihre
   Auslassungspunkte. Eine Krume verschwinden zu lassen wäre die bequeme Lösung
   und der größere Schaden — der Mensch weiß dann nicht mehr, wo er ist.

   NACHTRAG 06.10.2026 — DER ENTWURF HAT DIESE KORREKTUR UEBERNOMMEN, und damit
   ist der Befund von damals erledigt. Das Kit des Neunten Exports traegt jetzt
   selbst:

       .ck-crumbs b{flex:0 1 auto;min-width:0;overflow:hidden;
                    text-overflow:ellipsis;white-space:nowrap}

   Unsere Zeile darunter ist darin enthalten und tut nichts mehr. Gefunden hat
   das `tests/test_compass239_app_css.py::test_keine_regel_wiederholt_das_kit_
   wortgleich` beim Uebernehmen des Exports -- genau der Fall, fuer den dieser
   Waechter gebaut wurde: eine Regel, die das Kit schon kann, verdeckt nur, dass
   es sie kann, und bleibt stehen, wenn das Kit sich aendert. Sie ist deshalb
   entfernt; die Begruendung oben bleibt als Herkunft stehen, weil sie erklaert,
   warum es sie ueberhaupt gab.

   Das ist die Gegenrichtung zum Nachtrag 04.10.2026 weiter unten (dort hat ein
   Export drei Regeln VERLOREN, und wir mussten sie uebernehmen). Beide Faelle
   zeigen dasselbe: ein uebernommenes Kit ist kein unveraenderlicher Grund, und
   nur ein Waechter je Richtung merkt es. */

/* NACHTRAG COMPASS-260, 25.09.2026: dieselbe Ursache, eine Krume weiter vorn —
   und der erste Versuch war falsch, deshalb steht er hier mit.

   Die Regel darüber rettet die LETZTE Krume (`<b>`). Die Krumen davor sind
   `<a>` und im Kit `white-space:nowrap` ohne Gegenstück: sie können weder
   umbrechen noch schrumpfen. Das fiel nie auf, weil jede bestehende Fläche
   höchstens EINE Verweis-Krume trägt. `/personas/<slug>/uebertragen` trägt
   vier Stufen, und eine davon ist ein Name, den der Kunde vergibt.
   Gemessen bei 400 px: .ck-crumbs 255 px breit in 134 px Platz, Dokument
   472 px statt 400.

   MEIN ERSTER VERSUCH war `.ck-crumbs a{flex:0 1 auto;min-width:0;
   overflow:hidden;text-overflow:ellipsis}` — also dieselbe Behandlung wie für
   `<b>`. Der Überlauf war weg, und ich hätte es fast so abgegeben. Nachgemessen
   (scrollWidth gegen clientWidth je Krume) schrumpften bei 400 px ALLE VIER
   Krumen auf 15 bis 27 px: aus „Personas" wurde „P…", aus „Compass" „C…".
   Der Kommentar oben warnt wörtlich vor genau dem — „der Mensch weiß dann
   nicht mehr, wo er ist". Ein Überlauf, den man durch Unlesbarkeit ersetzt,
   ist nicht behoben.

   WAS JETZT HIER STEHT: die Leiste selbst scrollt. Der Text bleibt vollständig
   und erreichbar, das Dokument bleibt 400 px. Für die bestehenden Flächen
   ändert sich nichts — sie passen hinein, und ein Scrollbereich, in dem nichts
   zu scrollen ist, ist unsichtbar. Nachgemessen: keine Krume auf keiner Fläche
   wird geschnitten, bei 1280 und bei 400 px.

   Der Befund gehört ans Design, sonst kommt er mit dem nächsten Export zurück. */
.ck-crumbs{overflow-x:auto;scrollbar-width:thin}
/* NACHBESSERUNG nach tanks Pruefung zu #270, 25.09.2026: hier stand
   `scrollbar-width:none` und ein `::-webkit-scrollbar{display:none}`. Damit
   scrollte die Leiste, ohne dass irgendetwas das anzeigte — tank hat gemessen,
   dass bei 400 px „Der Rundgang" zu 1 % und „Übertragen" zu 0 % sichtbar waren,
   und es gab kein Zeichen, dass da noch etwas ist. Der erste Fix ersetzte den
   Überlauf durch Unlesbarkeit, dieser hätte ihn durch Unsichtbarkeit ersetzt.
   Eine dünne Bildlaufleiste ist weniger hübsch und sagt die Wahrheit — und sie
   erscheint nur dort, wo es wirklich etwas zu rollen gibt. Dazu rollt
   `static/js/nav.js` die Leiste ans ENDE: wo man ist, zählt mehr als wo man
   herkommt. */
.ck-crumbs a{flex:none}
/* Und ein Boden fuer die letzte Krume. Die Regel aus COMPASS-264 darueber gibt
   ihr `min-width:0`, damit sie mit Auslassungspunkten kuerzen kann -- richtig
   fuer den Fall, den sie loeste (EINE lange Krume). In einer vierstufigen Kette
   heisst `min-width:0` aber: sie schrumpft auf clientWidth 0 und ist WEG.
   Gemessen, nachdem die Leiste scrollte: 'Übertragen' sw=65 cw=0.
   Der Boden laesst das Kuerzen zu und das Verschwinden nicht -- die Regel aus
   264 bleibt unangetastet, sie bekommt nur eine Untergrenze. */
.ck-crumbs b{min-width:7ch}

/* ── COMPASS-264 · Zweispaltige Flaechen brechen auf schmalem Schirm nicht um ──
   Dieselbe Familie wie der Krumen-Ueberlauf darueber, aber eine andere Ursache:
   ein von Hand geschriebenes `grid-template-columns:<fest>px minmax(0,1fr)`
   ohne Medienregel. Die feste erste Spalte bleibt 300-340 px breit, die zweite
   kann nicht unter ihren Inhalt schrumpfen, und zusammen sind sie breiter als
   der Schirm.

   DIE ENTWURFSVORLAGEN LOESEN GENAU DAS, und zwar mit einer Zeile je Flaeche:
       @media (max-width:1024px){ #rw { grid-template-columns:1fr !important } }
   15 von 37 Frames tragen eine solche Regel. Beim Uebernehmen der Flaechen ist
   sie mehrfach liegengeblieben -- sie steht im Frame im <style> des Kopfes und
   nicht im Markup, also faellt sie beim Abgleich von Markup und Klassen nicht
   auf. Gefunden hat es tank am laufenden Stand, nicht der Markup-Vergleich.

   Hier EINE Regel fuer alle statt einer je Flaeche: drei Flaechen hatten
   denselben Fehler, und eine vierte haette ihn beim naechsten Bau wieder.
   Gemessen bei 400 px, mit Inhalt in der Liste (leer faellt es nicht auf):
       /regelwerk   428 px  -> 400
       /regelbuch   396 px  -> 375
   Die Grenze 1024 px ist die der Vorlagen, nicht selbst gewaehlt. */
/* ABGEGEBEN am 09.10.2026 (Zehnter Export) -- und das ist die Zeile, auf die
   es bei dieser Uebernahme ankommt: `.ck-flaeche-split` war UNSERE Klasse, hier
   erfunden, weil 15 von 37 Frames dieselbe Regel je Flaeche im Kopf trugen. Der
   Zehnte Export nimmt sie ins Kit auf -- unter demselben Namen, mit derselben
   Grenze (1024 px) und zusaetzlich `.ck-flaeche-split>*{position:static}` sowie
   `.is-links`/`.is-gleich`/`.is-frueh` und `--ck-split-aside`. Nachgemessen,
   bevor diese Zeilen wegfielen: die Kit-Basis `.ck-flaeche-split` ist Zeichen
   fuer Zeichen dieselbe Spaltenangabe wie `.ck-split` (beide
   `minmax(0,1fr) 340px`, gleicher Abstand, gleiche Ausrichtung) -- die vier
   Stellen, die BEIDE Klassen tragen, sehen also unveraendert aus, obwohl die
   neue Basis in der Datei spaeter steht und damit gewinnt. Und die zwei Stellen,
   die die Klasse allein tragen, setzen ihre Spalten inline: inline schlaegt
   Klasse, auch dort keine Aenderung. */

/* ── Die Profil- und Portraetkarte stapelt auf dem Telefon ──────────────────
   Befund tank an #337, gemessen bei 390 px: die Seite lief WAAGERECHT ueber
   (overflow-x true, die Profil-Ueberschrift reichte bis 409 px). Bei 1280 war
   alles sauber -- der Fehler zeigt sich nur schmal.

   Die Karte traegt ihr Raster INLINE (zweispaltig, 220 px + Rest), und eine
   Inline-Regel laesst sich von einer Media-Query nicht ueberschreiben. Der
   Frame `persona.html` loest das genauso wie hier: mit `!important`. Diese
   Regel ist deshalb woertlich seine, nur auf unsere id (`#persona-profil`
   statt `#profil`) uebertragen -- und bewusst auf eine ID statt auf eine neue
   `ck-`Klasse: das Kit bekommt von uns keine erfundene Klasse.

   Die Grenze 760 px ist die des Frames, nicht selbst gewaehlt. */
/* ABGEGEBEN am 09.10.2026 (Zehnter Export): hier stand die Regel fuer
   `#persona-profil` bei 760 px -- eine Spalte, Portraet-Rahmen unten statt
   rechts. Das Kit hat sie jetzt als `.ck-profil-karte`, wortgleich, und
   `partials/persona_profil.html` traegt die Klasse. Damit faellt auch der Grund
   weg, sie auf eine ID zu haengen: der Kommentar darueber sagte, das Kit
   bekomme von uns keine erfundene Klasse -- jetzt bringt es seine eigene mit. */

/* ── COMPASS-264 · Lange, nicht trennbare Woerter sprengen den Leerzustand ─────
   Dritte Ursache derselben Familie, gemessen an /einstellungen bei 400 px:
   Dokument 605 px statt 400, also 205 px Ueberlauf -- der groesste der drei.
   Schuld ist kein Raster, sondern ein Wort: `<code>compass_schluessel</code>`
   und aehnliche Bezeichner brechen nicht um. `.ck-empty` ist ein Flex-Kasten
   mit `align-items:center`; ein Kind, das breiter ist als der Kasten, steht
   dann auf BEIDEN Seiten ueber.

   `anywhere` statt `break-word`: nur ersteres darf mitten im Wort trennen, wenn
   sonst nichts hilft -- und genau das ist hier noetig, denn `compass_schluessel`
   hat keine Trennstelle, an der ein Umbruch erlaubt waere.
   `min-width:0` dazu, weil ein Flex-Kind sonst nicht unter seine Inhaltsbreite
   schrumpfen DARF, egal was der Umbruch erlaubt. Beides zusammen, sonst wirkt
   keins von beidem. */
.ck-empty > * { min-width: 0; }
.ck-empty .d, .ck-empty .t { overflow-wrap: anywhere; }

/* ── COMPASS-260 · `hidden` muss `display` schlagen ───────────────────────────
   Gemessen an der Entscheidungs-Fläche: ein `<button class="ck-mic" hidden>`
   war sichtbar. Ursache ist keine Eigenheit dieses Knopfes, sondern eine
   Lücke, die jedes Element des Kits trifft: `.ck-mic{display:grid}` hat eine
   höhere Spezifität als die Standardregel `[hidden]{display:none}` des
   Browsers, und damit gewinnt sie.

   Das Kit bringt selbst keine `[hidden]`-Regel mit (gemessen: 0 Treffer in
   compass-kit.css). Wer also `hidden` setzt — der naheliegendste Weg, etwas zu
   verbergen — bekommt bei jeder Klasse mit `display` das Gegenteil, und zwar
   lautlos: kein Fehler, kein Hinweis, das Element steht einfach da.

   Deshalb hier eine Zeile für alle statt eines Sonderfalls je Klasse. `!important`
   ist hier kein Notbehelf: `hidden` ist eine Aussage des Markups über den
   Zustand, keine über die Darstellung — sie soll eine Layout-Regel schlagen. */
[hidden] { display: none !important; }

/* ── COMPASS-260 · `is-inline` faellt unter 760 px auf eine Spalte zurueck ────
   Befund von Tank an #265: die Webhook-Karte auf /einstellungen quetscht bei
   400 px -- 27 Zeichen Titel auf 71 px und vier Zeilen. Nicht mein PR, aber
   dieselbe Familie wie `.ck-flaeche-split` (COMPASS-264) und `[hidden]`
   (#262): eine Kit-Klasse, der eine Regel fehlt, und das Produkt merkt es
   erst im Bild.

   Gemessen, und dabei hat sich meine erste Vermutung erledigt. Ich hatte
   angenommen, die Ursache sei unser eigenes Markup: `.t` + `.d` als direkte
   Flex-Kinder kommen in KEINEM der 39 Frames vor (gezaehlt: alle 50
   `is-inline`-Vorkommen sind `is-quelle` mit `.ico` + einem Sammel-`<span>`
   + Knopf). Das stimmt -- ist aber nicht der Grund. Im selben Browser
   gerendert quetscht das Muster des Entwurfs genauso:

       Breite   Entwurf (is-quelle)      Produkt (.t + .d)
       760 px   380 px, 1 Zeile          194 px, 1 Zeile
       600 px   359 px, 2 Zeilen         194 px, 1 Zeile
       480 px   248 px, 2 Zeilen         115 px, 3 Zeilen
       400 px   175 px, 3 Zeilen          92 px, 3 Zeilen

   `.ck-empty` ist `flex-direction:column`, `is-inline` dreht auf `row` -- und
   das Kit bringt dafuer keine Medienregel mit (gemessen: keine `@media` in
   Verbindung mit `ck-empty`, weder in der Produktkopie noch im Export
   73ac4d4). Unter 760 px bleibt die Reihe eine Reihe.

   760 px ist nicht geraten: es ist die Schwelle, an der das Kit sieben andere
   Reihen selbst auf eine Spalte dreht (`.ck-abo`, `.ck-sec`, `.ck-sum`,
   `.ck-go`, `.ck-provider-list` u. a.). Sie liegt ausserdem oberhalb der
   gemessenen ersten Quetschung bei 600 px, faengt den Fall also ganz.

   ACHTUNG, und das gehoert in die Entscheidung: unterhalb von 760 px sieht
   die Flaeche damit ANDERS aus als der Frame -- der Frame quetscht dort
   weiter. Das ist bewusst und die einzige Stelle, an der wir vom Entwurf
   abweichen, weil der Entwurf an dieser Breite kaputt ist. Der dauerhafte
   Platz dieser Regel ist das Kit im Design-System, nicht hier; als Frage
   zurueckgegeben (Tank: „Ob `is-inline` unter einer Breite auf `column`
   zurueckfallen soll, ist eine Kit-Frage."). Bis dahin steht sie hier, weil
   `compass-kit.css` nie direkt gepatcht wird. */
@media (max-width: 760px) {
  .ck-empty.is-inline { flex-direction: column; align-items: flex-start; }
  /* `margin:0 0 0 auto` schiebt den Knopf in der Reihe nach rechts; in der
     Spalte schoebe dasselbe `auto` ihn an den rechten Rand, weg vom Text. */
  .ck-empty.is-inline .ck-btn { margin: 0; }
}

/* ── COMPASS-265 · Antwort-Knöpfe brechen, sobald Label und Folge lang sind ──
   Carsten hat es im Betrieb gesehen (Screenshot vom 25.09.2026, Block „Zu
   entscheiden"): das Label stand als schmale, vielzeilige Spalte links, die
   Folge als lange Zeile darüber, beide übereinander und weit über den
   Knopfrand hinaus.

   URSACHE, eine einzige Zeile im Kit:
       .ck-answer{height:30px; … font:500 12.5px/1 …}
   Eine FESTE Höhe mit Zeilenhöhe 1. Für den Fall, für den der Entwurf sie
   gezeichnet hat, ist das richtig — „R12 auf 19 Uhr · Regel ändert sich"
   passt in eine Zeile. Echte Fragen haben dreisätzige Folgen.

   GEMESSEN an den zwei offenen Fragen im Mandanten compass, je .ck-answer
   scrollHeight gegen die Knopfhöhe:

       1280 px   5 von 6 Knöpfen kaputt, Inhalt bis 40 px in einem 30-px-Knopf
        400 px   6 von 6 kaputt, Inhalt bis 102 px — die .folge hing 73 px
                 unter dem Rand des Knopfes

   WARUM DER ÜBERLAUF-WÄCHTER GESCHWIEGEN HAT: das DOKUMENT läuft nicht über
   (scroll=400, client=400). Der Inhalt läuft über den KNOPF. Ein Wächter auf
   die Seitenbreite sieht das nie — dafür gibt es jetzt einen eigenen.

   DIE KORREKTUR STEHT HIER UND NICHT IM KIT: `compass-kit.css` ist eine
   unveränderte Kopie aus dem Entwurf (Prüfweg `kit_drift`), und die Zeile
   steht SO im Entwurfs-Kit. Der Befund gehört ans Design, sonst kommt er mit
   dem nächsten Export zurück.

   Kurze Antworten bleiben unverändert einzeilig: `min-height` hält die
   Pillenform, `flex-wrap` greift erst, wenn der Inhalt sonst herausliefe. */
.ck-answer{height:auto;min-height:30px;padding:6px 12px;line-height:1.35;
           flex-wrap:wrap;text-align:left;max-width:100%}
.ck-answer .folge{min-width:0;flex:1 1 auto}

/* ── COMPASS-267 · Die Stichtag-Zeile läuft bei 400 px auf das Doppelte ──
   tank gemessen an `/regelwerk?stichtag=2026-09-24`:

       400 px   scroll 796 gegen client 400
       375 px   scroll 796 gegen client 375
       span.d „Stand 2026-09-24 — was an diesem Tag galt."  336 px, rechts bei 796

   Ursache im Kit, zwei Zeilen, die zusammen wirken:
       .ck-timeline{display:flex;align-items:center;gap:12px}   kein flex-wrap
       .ck-timeline .d{… white-space:nowrap}
   Eine nicht umbrechende Zeile in einer nicht umbrechenden Reihe. Für den
   Entwurf richtig — dort steht dort „24.09.2026 · heute", elf Zeichen.

   Das ist dieselbe Familie wie `ck-flaeche-split`, `ck-empty.is-inline` und
   `[hidden]`: eine Kit-Klasse ohne Regel für den schmalen Schirm, und das
   Produkt ist das erste, das sie mit echtem Inhalt füllt. Die Korrektur steht
   deshalb hier und nicht im Kit (Prüfweg `kit_drift`); der Befund gehört ans
   Design, sonst kommt er mit dem nächsten Export zurück.

   `nowrap` bleibt für die kurze Form (ein Datum soll nicht mitten im Datum
   umbrechen) — die Zeile darf nur UMBRECHEN statt hinauszulaufen. */
.ck-timeline{flex-wrap:wrap}
.ck-timeline .d{white-space:normal;min-width:0}

/* COMPASS-163 (26.09.2026) — `.ck-mt-0`, die fehlende Null in einer Reihe.

   Das Kit definiert `.ck-mt-1`, `-2`, `-3`, `-4`, `-6`, `-8`, `-12` — aber
   kein `.ck-mt-0`. Zwei Vorlagen benutzen es trotzdem
   (agents_detail.html, einstellungen.html) und bekamen dafür: nichts. Genau
   der stille Fall, um den COMPASS-163 geht — der Absatz behielt seinen
   Standard-Abstand, und niemandem fiel es auf.

   Hier statt im Kit, weil das Kit ein Handoff aus dem Design-Repo ist und
   nie direkt gepatcht wird (CLAUDE.md, COMPASS-138). Verschwindet die Zeile
   eines Tages aus dem Handoff-Export nicht, sondern taucht dort auf, kann
   dieser Block ersatzlos weg. */
.ck-mt-0{margin-top:0}
/* COMPASS-308: a guided path, alongside measured project facts. */
.onboarding{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:28px;align-items:start}
.onboarding-steps{display:grid;gap:20px;min-width:0}
.onboarding .ck-card,.onboarding .ck-card-body{min-width:0}
.onboarding .ck-card-body{padding:24px}
.onboarding-context{border-left:2px solid var(--ck-border);padding:12px 0 12px 24px;min-width:0}
.onboarding-counts>div{padding:16px 0;border-bottom:1px solid var(--ck-border)}
.onboarding-counts dd{margin:6px 0 0;font-size:22px}
.onboarding-counts dd .ck-caption{display:block;margin-top:4px}
.onboarding .ck-cmd{align-items:flex-start;flex-wrap:wrap}
.onboarding .ck-cmd code{flex-basis:100%;word-break:normal}
.onboarding .ck-cmd code,.onboarding .url code{overflow-wrap:anywhere;white-space:pre-wrap;min-width:0}
.onboarding .ck-mcp .hd{flex-wrap:wrap}
.onboarding .ck-mcp .tabs{flex-wrap:wrap}
.onboarding .ck-mcp .tabs button{flex:1 1 150px}
.onboarding .ck-mcp .url{max-width:100%;flex-wrap:wrap}
.onboarding time{overflow-wrap:anywhere}
@media(max-width:900px){.onboarding{grid-template-columns:minmax(0,1fr)}.onboarding-context{border-left:0;border-top:2px solid var(--ck-border);padding:20px 0}}
@media(max-width:480px){.onboarding .ck-card-body{padding:18px}.onboarding .ck-mcp .tabs{flex-wrap:wrap}.onboarding .ck-mcp .tabs button{flex:1 1 130px}}

/* Nachtrag 04.10.2026 — drei Zeilen, die die Kit-Lieferung VERLOREN hat.

   Der Achter Export hat `.ck-list li .t:has(.ck-pill)` aus dem Kit entfernt;
   im Siebten stand es noch (gemessen: Zeilen 1091-1093 der alten Kopie). Die
   drei Kit-Kopien im Repo bleiben byte-gleich die Lieferung
   (docs/kit-uebernahme.json, Waechter website/tests/test_compass28_kit_stand.py)
   -- die Regel kommt deshalb HIER wieder hinein, an die Stelle, die es fuer
   genau diesen Fall gibt ("eigene Ergaenzungen zum Kit, NIE das Kit selbst
   patchen", Kopf dieser Datei).

   Der Befund dahinter ist unveraendert gueltig (COMPASS-119, Carstens
   Entscheidung, 26.09.2026): bei schmaler Breite (gemessen bei 375 px) schob
   eine Pille den Text aus der Zeile -- und weil die Ellipse auf `.t` selbst
   sitzt, verschwand die PILLE ohne Ellipse, also spurlos. Eine Pille ist aber
   ein Statussignal ("offen", "Brief fast voll"), kein Beiwerk. Bei 768 px und
   darueber trat es nicht auf.

   Die Zeile wird deshalb zur Flex-Zeile, SOBALD sie eine Pille enthaelt
   (`:has`) -- der Text weicht, die Pille bleibt. Bewusst nicht als eigene
   Klasse zum Danebensetzen, damit die naechste Vorlage mit Pille sie nicht
   vergessen kann; und bewusst nicht fuer ALLE `.t`, damit keine Liste ohne
   Pille ihr Verhalten aendert. `.ck-t-text` ist der Traeger der Ellipse: ein
   blosser Textknoten koennte sie nicht tragen.

   An das Design gemeldet (PR-Body): der naechste Export soll sie wieder
   mitbringen. Ein Waechter haelt fest, dass sie im Produkt UEBERHAUPT gilt --
   egal aus welcher der beiden Dateien. */
.ck-list li .t:has(.ck-pill){display:flex;align-items:center;gap:6px;min-width:0}
.ck-list li .t:has(.ck-pill) > .ck-t-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-list li .t:has(.ck-pill) > .ck-pill{flex:0 0 auto}

/* ── Ein Baustein in einem Schritt landet in der Nummernspalte ───────────────
   BEFUND Carsten, 09.10.2026, Bildschirmfoto „Design-Fehler": auf /verbinden
   (Schritt „Im Chat sagen, wer er ist") steht der Satz-Chip neben dem Knopf
   „Kopieren" als schmale, hohe Pille -- ein Wort je Zeile.

   GEMESSEN mit Playwright, nicht vermutet: `.ck-say` ist **28 px breit und
   116 px hoch**, bei 1280 px UND bei 390 px, mit einem langen Persona-Namen.
   Der innere `<span>` ist 122 px breit und laeuft damit aus seinem Kasten
   heraus. 28 px ist kein Zufallswert: es ist die Breite der Nummernspalte.

   URSACHE: `.ck-steps3>li` ist ein Raster mit `28px minmax(0,1fr)`, und
   `li::before` (die Nummer) belegt `grid-row:1/3` in Spalte 1 -- also nur die
   ersten zwei Zeilen. Ein `<li>` mit DREI Kindern (`.t`, `.d`, und dann der
   Baustein) legt das dritte per Auto-Platzierung in Zeile 3, Spalte 1: in die
   28 px breite Nummernspalte. Das Kit setzt fuer `.t` und `.d` keine
   Spaltenangabe, sondern verlaesst sich auf die Auto-Platzierung -- die bei
   zwei Kindern aufgeht und beim dritten kippt.

   DER ENTWURF HAT DENSELBEN FEHLER. Gemessen am Frame
   `handoff/compass/frames/verbinden.html` selbst: 28 px breit, 96 px hoch.
   „Soll = Frame" ist hier also nicht erreichbar, indem man den Frame
   abschreibt -- das Markup des Produkts ist bereits Zeichen fuer Zeichen
   seines. Es ist eine Luecke im KIT, und sie gehoert ans Design gemeldet,
   sonst kommt sie mit dem naechsten Export zurueck.

   EINE Regel fuer alle Kinder statt einer je Baustein: betroffen ist nicht nur
   `.ck-say`. Gemessen in denselben Laeufen tragen `/verbinden` (`.ck-cmd`,
   `.ck-row`) und `/willkommen` (`.ck-card`, `.ck-clients`, `.ck-empty`,
   `.ck-mcp`) dieselbe Stelle. Wer nur `.ck-say` repariert, repariert einen von
   sieben Faellen und laesst den naechsten offen.

   Fuer `.t` und `.d` aendert die Regel nichts: sie standen durch
   Auto-Platzierung schon in Spalte 2, hier stehen sie nun ausdruecklich dort.
   Die natuerliche Breite bleibt unberuehrt -- der Chip darf umbrechen, aber
   nichts drueckt ihn mehr unter seine Breite (Carstens Vorgabe), weil er jetzt
   die ganze Inhaltsspalte hat und `max-width:440px` des Kits wieder greift. */
.ck-steps3 > li > * { grid-column: 2; }


/* COMPASS-329 (11.10.2026): die Spalte Eintrag bekommt den Hauptplatz.
   GEMESSEN vorher, /gedaechtnis bei 1280 px: Eintrag 100 px, Herkunft 305 px.
   Ursache ist `max-width:0` aus der Kit-Klasse `trunc` -- noetig, damit die
   Auslassung in einer Tabellenzelle greift, aber es setzt die Spalte auf ihre
   Minimalbreite. `width:100%` auf genau dieser Spalte dreht die Verteilung um:
   die anderen schrumpfen auf ihren Inhalt, der Rest geht an den Eintrag.
   NICHT im Kit, weil es eine Entscheidung ueber DIESE Tabelle ist: welche
   Spalte den Rest bekommt, weiss nur die Flaeche.

   NACHBESSERUNG 11.10.2026 (Befund von Pruefer 2): `width:100%` plus ein
   Deckel auf Herkunft reichte NICHT. Gemessen bei 1200 px -- der Breite, die
   das Ticket ausdruecklich nennt -- bekam der Eintrag 185 von 526 px, also
   35 %; verlangt sind rund 50 %. Nachgerechnet: dafuer haette Herkunft auf
   98 px stehen muessen, 15 Zeichen, ein Stummel. Herkunft steht deshalb
   jetzt als zweite Zeile UNTER dem Eintrag (Vorlage), und die Spalte ist
   weg. Der Deckel auf `td:last-child` ist mitentfallen -- er traefe nach dem
   Umbau die Spalte „Art". */
#gd-grid .ck-table td.gd-eintrag,
#gd-grid .ck-table thead th:first-child { width: 100%; }

/* `max-width:0` MUSS dazu, und das ist beim Umbau am 11.10.2026 einmal
   verlorengegangen: ohne sie waechst die Spalte auf die Breite des ganzen
   Textes (gemessen 2155 px bei einem 324-Zeichen-Eintrag, Zeile 2320 px),
   und die Tabelle laeuft seitlich aus dem Raster. `width:100%` sagt „nimm
   den Rest", `max-width:0` erlaubt „schrumpf unter deinen Inhalt" -- erst
   zusammen ergeben sie eine Spalte, die den Platz bekommt UND klemmt. Die
   Kit-Klasse `trunc` hatte beides; sie sitzt jetzt nicht mehr an der Zelle,
   weil die Zelle zwei Zeilen traegt. */
/* NUR OBERHALB DER KARTENFORM, und das hat ein Bildschirmfoto gefunden,
   kein Test: unter 760 px macht das Kit aus der Tabelle Karten, und eine
   Zelle mit `max-width:0` ist dort ein Block der Breite null -- die
   Eintraege waren auf 390 px LEER, nur Ebene und Art standen da. In einer
   Tabelle verteilt `max-width:0` die Breite, als Block loescht es sie.
   Gefunden, weil Pruefer 2 Bilder als Nachweis verlangt hat (11.10.2026);
   meine eigenen Tests prueften auf 390 px nur Ueberlauf und Kartenposition,
   nicht, ob ueberhaupt etwas dasteht. */
@media (min-width: 761px) {
  #gd-grid .ck-table td.gd-eintrag { max-width: 0; }
}

/* Die Auslassung sitzt jetzt am TEXT, nicht an der Zelle: die Zelle traegt
   zwei Zeilen (Text und Herkunft), ein `white-space:nowrap` auf ihr wuerde
   beide in eine pressen. `trunc-inline` klemmt nur die obere. */
#gd-grid .ck-table td.gd-eintrag .gd-text,
#gd-grid .ck-table td.gd-eintrag .gd-herkunft {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gd-grid .ck-table td.gd-eintrag .gd-herkunft {
  font-weight: 400;
  color: var(--ck-t3);
  font-size: 12px;
}

/* Die beiden anderen bleiben einzeilig, damit sie nur ihren Inhalt belegen.
   Nur oberhalb der Kartenform: unter 760 px macht das Kit aus der Tabelle
   Karten, und dort waere `nowrap` ein Ueberlauf. */
@media (min-width: 761px) {
  #gd-grid .ck-table td:not(.gd-eintrag),
  #gd-grid .ck-table thead th:not(:first-child) { white-space: nowrap; }
}

/* COMPASS-329, zweiter Befund (gemessen, nicht im Ticket): auf 390 px lag die
   Detailkarte nach dem Klick 1436 px tief -- hinter der ganzen Liste. Der
   Volltext war da und ausserhalb des Bildes; ein Klick sah aus, als tue er
   nichts.

   NACHBESSERUNG 11.10.2026 (Pruefer 2, P2): `order:-1` auf der Seitenkarte
   war zu grob -- damit stand sie VOR der ganzen Liste, verlangt ist direkt
   unter der angeklickten Zeile. Jetzt gibt es die Karte zweimal im Markup
   (EIN Baustein, `partials/gedaechtnis_detail.html`, zweimal eingebunden)
   und je Breite ist genau EINE sichtbar: in der Tabelle, direkt hinter der
   gewaehlten Zeile, solange das Kit auf eine Spalte legt -- und in der
   Seitenspalte darueber. Ein `order` kann das nicht: die Karte muesste dafuer
   zwischen zwei Tabellenzeilen stehen, und dort steht sie im Markup auch. */
#gd-grid .gd-detail-reihe { display: none; }

@media (max-width: 1024px) {
  #gd-grid > .gd-detail-seite { display: none; }
  #gd-grid .gd-detail-reihe { display: table-row; }
}

/* In der Kartenform ist eine Tabellenzeile ein Block -- `table-row` waere
   dort eine Zeile ohne Tabelle. */
@media (max-width: 760px) {
  #gd-grid .gd-detail-reihe { display: block; }
  #gd-grid .gd-detail-reihe > td { display: block; width: 100%; }
}

/* Der Sprung zur gewaehlten Zeile darf nicht unter der klebenden Topbar
   landen (`.ck-topbar` ist `position:sticky`, Hoehe `--ck-topbarh`).
   Gemessen am 11.10.2026, nachdem Pruefer 2 gemeldet hatte, dass der Klick
   auf einen spaeteren Eintrag bei 390 px gar nicht zum Volltext fuehrt:
   ohne Anker beginnt der neue Seitenaufruf oben, mit Anker ohne diesen
   Abstand verschwindet die Zeile unter der Leiste. */
#gd-grid .ck-table tbody tr[id^="gd-"] { scroll-margin-top: calc(var(--ck-topbarh, 56px) + 12px); }

/* UND DIE SEITENKARTE BLEIBT STEHEN. Gemessen, nachdem der Anker drin war:
   bei 1200 px sprang die Seite zur gewaehlten Zeile (scrollY 1410) und die
   Karte stand dann bei y=-966, also OBERHALB des Bildes -- mein eigener Fix
   fuer schmale Flaechen hatte die breite kaputtgemacht.
   `sticky` ist dafuer das vorgesehene Mittel und keine Erfindung: das Kit
   hebt `position` fuer die Kinder von `ck-flaeche-split` unter 1024 px
   ausdruecklich wieder auf (`position:static!important`) -- es rechnet also
   oberhalb damit. */
@media (min-width: 1025px) {
  #gd-grid > .gd-detail-seite {
    position: sticky;
    top: calc(var(--ck-topbarh, 56px) + var(--ck-s4, 16px));
  }
}


/* Aufträge (Siebzehnter Export, 24.10.2026): zwei Lücken des Kits, die der Frame selbst hat. 1. `ul.ck-tl > li > .t + .m` (Verlauf im Frame
   `auftrag`) hat im Kit keine Regel -- ohne sie steht eine Aufzählung mit Punkten und aneinanderhängenden Zeitangaben da; die Regel
   übernimmt das Aussehen von `.ck-tl-item`. 2. Auf dem Handy (<= 760 px) hat `.ck-auftrag` drei Spalten, und der Status-Knopf bekäme die
   28-px-Spalte des Griffs: er überlagert die Altersangabe. Befund an Design (beides gehört ins Kit, dann fallen diese Zeilen weg). */
ul.ck-tl{list-style:none;padding:0}
ul.ck-tl>li{position:relative;display:grid;gap:4px;padding:10px 0 10px 18px;border-left:1px solid var(--ck-hair);margin-left:4px}
ul.ck-tl>li::before{content:'';position:absolute;left:-4.5px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--ck-border-strong)}
ul.ck-tl>li .t{font:400 13.5px/1.5 var(--ck-font-body);color:var(--ck-t0);text-wrap:pretty}
ul.ck-tl>li .m{font:400 11.5px/1.3 var(--ck-font-mono);color:var(--ck-t3)}
/* Punkt 2 ist ENTFALLEN (29.10.2026, design 9279): das Kit legt den Status am Handy inzwischen selbst in die Fläche „s“ oben rechts
   (`grid-template-areas`). Die Zeile hier setzte die Spalte neu, die Zeile blieb die erste -- der Status lag dann über dem Titel. */

/* Regelwerk, Detailseite (Achtzehnter Export): die Liste der Sachen hat eine feste 340-px-Spalte, und die Seite war bei 360 px 587 px breit
   (gemessen am Stand vor dieser Änderung: waagerechter Überlauf). Unter 900 px steht sie über dem Inhalt statt daneben. */
@media(max-width:900px){.rw-raster{grid-template-columns:minmax(0,1fr)!important}}

/* Organigramm (25.10.2026): die Anwesenheitspunkte stehen VOR dem Namen in der Zeile `.wer`. Im Frame ist `.sitze` ein
   Geschwister von `.stelle`; in der Kartenraster-Zelle landet es dann in einer eigenen Zeile und schiebt den Namen
   nach oben. Hier gehoert es in die Namenszeile, wo ein langer Jobtitel es nicht abschneidet. */
.ck-orga .karte .wer .sitze{margin:0 6px 0 0}

/* COMPASS-414 (25.10.2026): Antwort-Knoepfe am Handy. Die Zielflaeche eines Fingers ist mindestens 44 px hoch; der Kit-Knopf ist
   30 px (gemessen bei 375 px: ein kurzer Knopf wie „Noch offen lassen" war 31 px hoch). Nur unter 760 px, der Schreibtisch
   bleibt, wie der Frame ihn zeichnet. Kit-Luecke, an Design gemeldet. */
@media (max-width: 760px) {
  .ck-entscheid .ck-answer { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}

/* Eingabefelder am Handy (25.10.2026, Auftrag Trinity 6913, Teil von COMPASS-414): tank misst live bei 375 px 38 px Hoehe fuer die Felder
   auf /login (E-Mail, Passwort, Schluessel) -- unter den 44 px, die ein Daumen braucht. Das Kit setzt `.ck-input` auf 38 px und kennt
   keine Handy-Regel dafuer (Kit-Luecke, an Design gemeldet). Gilt fuer jedes Feld in einem `.ck-field` unter 760 px, nicht nur fuer die
   Anmeldung: ein Daumen ist auf /registrieren und in den Formularen derselbe. Nur die Hoehe aendert sich, nie die Breite. */
@media (max-width: 760px) {
  .ck-field .ck-input, .ck-field .ck-select { height: 44px; }
}

/* 13) Handy-Menue erreichbar bis ganz unten (Auftrag 7116, Befund Carsten 25.10.2026, iPhone Safari): das Kit setzt
      `.ck-sidebar{height:100vh}` und unter 760 px `position:fixed;inset:0 auto 0 0`. Die Hoehe gewinnt gegen `bottom:0`, und
      `100vh` ist auf dem iPhone die Hoehe OHNE Werkzeugleiste -- der Kasten ragt unter die Leiste, der Scrollweg endet dort, und alles
      unter „Rundgang“ samt Fuss (Name, Abmelden) war nicht zu erreichen. Hier: keine feste Hoehe, `bottom:0` gilt wieder (ein fixiertes
      Element endet am SICHTBAREN Rand), gedeckelt mit `100dvh`; der Fuss klebt unten, die Liste scrollt darueber. Kit unveraendert.
      Gemessen nur in Chromium (der Werkzeugleisten-Fall laesst sich in keinem Headless-Browser nachstellen, WebKit startet auf dieser
      Maschine nicht): `tests/test_compass7116_menue_handy.py` prueft den Fuss und den letzten Punkt bei 375x480 und haelt diese Regel im Text fest. */
@media (max-width: 760px) {
  .ck-sidebar { height: auto; max-height: 100vh; max-height: 100dvh; overscroll-behavior: contain; }
  .ck-sidebar-foot { position: sticky; bottom: calc(-1 * var(--ck-s4)); z-index: 1; background: var(--ck-bg-elev);
                     padding-bottom: calc(var(--ck-s3) + env(safe-area-inset-bottom, 0px)); }
}

/* 14) Eine Frage per Link ansteuern (Auftrag 7114, Wunsch Carsten 25.10.2026): `/entscheidungen#frage-381` springt zur Frage und hebt sie hervor.
      Rein CSS (`:target`), also auch ohne Skript und in der Web-App am Handy. `scroll-margin-top` haelt sie unter der klebenden Kopfzeile. */
.ck-entscheid[id^="frage-"] { scroll-margin-top: calc(var(--ck-topbarh) + 12px); }
.ck-entscheid[id^="frage-"]:target { background: var(--ck-ac-bg); box-shadow: inset 3px 0 0 var(--ck-ac); }


/* 15. Grossansicht eines Bildes in `.ck-lightbox` (Auftrag 7564, Frame `dokument`). Der Frame zeichnet dort einen Platzhalter (`.bd .f`); das Produkt
   zeigt das echte Bild, eingepasst in die Buehne. Eine Ergaenzung zum Kit, kein Ersatz. */
.ck-lightbox .bd img{max-width:min(100%,1100px);max-height:100%;object-fit:contain;border-radius:6px;background:#232833}
/* Auftrag 8474 (Carsten 28.10.2026: „geöffnete Bilder, die länger als der Bildschirm sind, kann man nicht scrollen"). Die Bühne scrollt jetzt selbst:
   eingepasst heißt „volle Breite bis 1100 px, Höhe frei" -- ein 1280×6000-Ganzseitenbild bleibt lesbar statt auf Briefmarkengröße zu schrumpfen, und
   der Rest liegt unter dem Rand statt abgeschnitten. Klick schaltet auf Originalgröße (`is-original`) und zurück. Am Handy wischt man in der Bühne;
   `overscroll-behavior` hält das Wischen davon ab, die Seite dahinter mitzuziehen. */
.ck-lightbox .bd{display:block;overflow:auto;text-align:center;padding-bottom:16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ck-lightbox .bd img{display:inline-block;vertical-align:top;max-height:none;height:auto;cursor:zoom-in}
.ck-lightbox .bd.is-original{text-align:left}
.ck-lightbox .bd.is-original img{max-width:none;cursor:zoom-out}

/* Mein Postfach (Auftrag 7896, 28.10.2026): am Handy EINE Fläche zur Zeit -- ohne offene Nachricht die Liste, mit offener Nachricht die Lesefläche. Der Frame regelt das mit einer
   Frame-Hülle (`body[data-state]`, „Kein Produktcode“); im Produkt steht der Zustand als Klasse `is-lesen` am Raster und am Werkzeug. */
@media (max-width: 760px) {
  .pf:not(.is-lesen) .pf-lesen { display: none; }
  .pf.is-lesen .pf-liste, .pf-werkzeug.is-lesen { display: none; }
}

/* Navigation (Auftrag 8466, 28.10.2026, Carsten: „unten komplett kaputt“): im Menü „Mein Konto“ sind „Sprache“ und „Hell oder dunkel“
   `<button>` (Sprache als Formular, damit es ohne Skript wechselt), der Frame zeichnet `<a>`. Ohne diese Zeilen erbten die Knöpfe die
   Browser-Darstellung: zentriert, eingerückt, eigene Schrift. Sie sehen jetzt aus wie die Links daneben. */
.ck-konto .menu button.ck-nav-item{width:100%;text-align:left;justify-content:flex-start;background:transparent;border:0;margin:0;cursor:pointer}

/* Absenden mit Rückmeldung (static/js/absenden.js, Carsten 29.10.2026): der geklickte Knopf zeigt einen
   Kreisel und „Wird gespeichert…“, der gesperrte Bereich wird blasser; nach der Zeitgrenze steht ein Satz
   darunter. Kit-Lücke (es kennt keinen Lade-Zustand eines Knopfs) -- an design-cc gemeldet; der Kreisel
   nutzt die Kit-Animation ckSpin. */
[data-sendet="1"] { opacity: .75; }
.ck-btn.is-sendet, .ck-answer.is-sendet { cursor: progress; }
.sendet-spin { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ckSpin .8s linear infinite; }
.sendet-meldung { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--ck-r-sm);
  background: var(--ck-achtung-bg); color: var(--ck-achtung); font: 500 13px/1.4 var(--ck-font-body); }
@media (prefers-reduced-motion: reduce) { .sendet-spin { animation: none; } }

/* Navigation, schmale Breite (design-cc zu lupes Abweichung 3 an #863, 29.10.2026): „Projekt“ steht am Ende der Liste, ohne feste
   Lücke. Das Kit heftet .ck-nav-bottom mit margin-top:auto unten an -- bei zugeklappten Gruppen entstand so am Handy eine leere
   Fläche (gemessen 135 px bei 375 × 812). Ist die Liste länger als der Bildschirm, steht „Projekt“ ohnehin am Ende. Kit-Lücke, an
   design-cc gemeldet; am Desktop (250 px bei 1280) gilt die Kit-Regel weiter, bis design-cc entscheidet. */
/* 29.10.2026, design-cc zu lupes 8819: NUR „Projekt“ rückt ans Listenende; der Konto-Fuß bleibt am unteren Rand der Schublade wie im
   Frame (margin-top:auto auf den Fuß statt der festen 12 px des Kits). */
@media (max-width:760px) { .ck-nav-bottom { margin-top: 0; } .ck-nav-bottom + .ck-sidebar-foot, .ck-nav-bottom + .ck-konto { margin-top: auto; } }

/* Dokument-Ansicht, „Verschieben nach…“ (30.10.2026, lupe an #901): am Handy hängt das Fenster an der Breite des Bildschirms, nicht am Knopf.
   Rechtsbündig am Knopf ragte es auf Deutsch rechts hinaus (x bis 462 bei 390 px), auf Englisch -- kürzerer Knopf -- links (x=-3). */
/* Nachtrag (lupe an #996): `position:fixed` übernahm das `top:36px` des Kits -- das Fenster lag oben unter der Kopfleiste (z-index 20).
   Jetzt als Blatt am unteren Rand, über der Kopfleiste. */
@media(max-width:520px){.dok-verschieben-pop{position:fixed;left:16px !important;right:16px !important;width:auto !important;top:auto !important;bottom:16px;z-index:30}}