/* 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) Fehler-Banner-Retry-Link, wenn kein <button> passt (GET-Neuladen der aktuellen Seite) —
      das Kit kennt .ck-alert-fehler, aber keinen eigenen "Erneut versuchen"-Link-Stil darin;
      hier nur ein schmaler Abstand, keine neue Farbe/Form (Kit-Button-Klassen bleiben massgeblich). */
.ck-alert .retry { margin-left: auto; white-space: nowrap; }

/* 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) Gehirn-Last-Balken (Agents, Nachtrag Z.578 "Gehirn-Last sichtbar") — das Kit hat Pillen,
      Karten und Charts, aber keinen einfachen "Anteil von Budget"-Fortschrittsbalken. Zwei
      neue Klassen statt einer erfundenen Kit-Ergaenzung: Track (Schiene) + Fill (Fuellstand,
      Breite kommt inline aus dem berechneten Prozentwert, routes/agents.py::_brief_ansicht).
      Farbe folgt dem Kit-Zustandsvokabular (ruhig=normal, achtung=abgeschnitten oder >90%),
      keine neue Farbe erfunden. */
.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);
}
.agents-brief-fill.is-achtung { background: var(--ck-achtung); }
/* ── 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. */
@media (max-width: 1024px) {
  .ck-graph { height: 420px !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}}