/* ============================================================================
   ocellio — Projekte v3 (a43, Spec 2026-09-29 §5.3/§5.4): Projektliste,
   Projekt-Detail mit Stat-Karten, Kanten-Explorer, kompaktem Verlauf und der
   Neu-/Cross-Markierung im Ego-Graphen. Nur Tokens (tokens.css); Projektfarbe
   über pjb-N → --pj-cur (components.css), Höhen/Breiten über h-N/w-N, nie per
   Inline-Style (CSP). Wiederverwendet aus puls.css: .pv-label, .pv-card,
   .pv-feed, .fx-day, .fx-rel, .ev-ico, .new-dot, .xbadge, .rel-label, .spark.
   Lädt vor layout.css/components.css; die Klassen hier sind eigene (pl-, pd-,
   kx-, fc-, kb), damit keine Regel dort überschrieben wird.
   Mobil (< 768 px) einspaltig, Touch-Ziele ≥ 44 px; prefers-reduced-motion
   ohne Übergänge. Kontrast ≥ 4,5:1 für Text, ≥ 3:1 für Grafik (Review a41).
   Lesbarkeit (a43, „ordentlich und lesbar"): Inhalt in Tabellen und Listen
   ≥ 14 px, Sekundärtext ≥ 13 px, nichts Lesbares unter 12 px — auch Badges,
   Tabellenkopf und die Initialen im Ego, wie gerendert
   (tests/e2e/test_projekt_lesbarkeit.py).
   ============================================================================ */

/* ---- Kind-Badge (Spec §4.3): Kreis in Kind-Farbe, weiße Initiale -------- */
/* Die Kind-Farben (kind_palette.py) sind zu hell für weiße Schrift (bis 2,9:1);
   um 25 % abgedunkelt erreichen alle 15 Kinds ≥ 4,8:1. */
.kb { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px;
  border-radius: 50%; background: color-mix(in srgb, var(--kc, var(--faint)) 75%, #000);
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 12px;
  line-height: 1; }
.kb.k-concept{--kc:#4a7a9b}.kb.k-fact{--kc:#7a4a9b}.kb.k-decision{--kc:#9b7a4a}
.kb.k-template{--kc:#4a9b7a}.kb.k-secret{--kc:#9b4a4a}.kb.k-config{--kc:#6b7a9b}
.kb.k-project{--kc:#4a7a4a}.kb.k-task{--kc:#9b9b4a}.kb.k-document{--kc:#5a6a8a}
.kb.k-note{--kc:#8a8a5a}.kb.k-inbox_item{--kc:#7a8a9a}.kb.k-user{--kc:#9a7a7a}
.kb.k-tag{--kc:#7a9a8a}.kb.k-skill{--kc:#c97a3a}.kb.k-commit{--kc:#6a8a6a}

/* ---- Gemeinsam: Kopf, Mini-Tags, Neu-Badge, Frische ------------------- */
.px-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  margin: 24px 0 18px; }
.px-head h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.px-legend { margin: 0; font-size: 13px; color: var(--muted); }
.px-lg { white-space: nowrap; }                /* Punkt und Text brechen nie auseinander */
.px-tag { display: inline-block; max-width: 100%; padding: 0 5px; border: 1px solid var(--line);
  border-radius: 4px; font-size: 12px; line-height: 1.6; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.px-new { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); font-family: var(--font-display); font-weight: 700;
  font-size: 12px; line-height: 1.35; white-space: nowrap; }
.px-fresh { font-size: 11px; line-height: 1; }
/* Frische-Punkt dunkel: #067a52 erreicht auf --panel nur 2,8:1. */
:root[data-theme="dark"] :is(.pl, .pd) .dot-fresh { color: var(--ev-created); }
/* GitHub-Badge als Mini-Tag (gh_badge-Makro rendert .badge). */
:is(.pl-side, .pd-head) .badge { display: inline-block; max-width: 100%; padding: 0 5px;
  border: 1px solid var(--line); border-radius: 4px; background: none; font-size: 12px;
  font-weight: 500; letter-spacing: 0; line-height: 1.6; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.pd-head a.badge { color: var(--link); }

/* ---- Projektliste (Spec §5.3) ------------------------------------------- */
.pl-list { display: flex; flex-direction: column; gap: 10px; }
.pl-row { display: grid; align-items: center; gap: 20px;
  grid-template-columns: minmax(0, 1.4fr) minmax(120px, 1fr) minmax(160px, 1fr) auto;
  padding: 14px 18px; background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--pj-cur, var(--line)); border-radius: var(--r);
  color: var(--fg); text-decoration: none; transition: border-color .15s; }
.pl-row:hover { border-color: var(--faint2); border-left-color: var(--pj-cur, var(--faint2));
  color: var(--fg); }
.pl-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-title { min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-titlerow .px-tag { flex: none; max-width: 14ch; }
/* „Was zuletzt": der Text kürzt, die Zeit bleibt stehen. */
.pl-last { display: flex; gap: 4px; min-width: 0; font-size: 13.5px; line-height: 1.4;
  color: var(--muted); white-space: nowrap; }
.pl-last-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pl-last-rel { flex: none; }
.pl-nums { font-size: 13px; line-height: 1.4; color: var(--muted); }
.pl-num { white-space: nowrap; }
.pl-spark .spark { height: 32px; }
.pl-tasks { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px;
  color: var(--muted); }
.pl-segbar { display: flex; gap: 2px; width: 100%; height: 8px; border-radius: 4px;
  overflow: hidden; background: var(--line2); }
.pl-segbar .segbar-seg { height: 100%; }
.pl-taskline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  min-width: 0; font-size: 12px; color: var(--muted); }
.pl-open { font-size: 13px; font-weight: 600; color: var(--link); white-space: nowrap; }
/* „Ohne Projekt": gedämpft, ohne Sparkline und Tasks (Spec §5.3). */
.pl-orphan { border-style: dashed; border-left: 4px solid var(--line); }
.pl-orphan .pl-title { color: var(--muted); }

/* ---- Projekt-Detail: Kopf, Meta, Beschreibung (Spec §5.4) -------------- */
.pd-crumb { margin: 20px 0 0; }
.pd .pd-crumb { font-size: 12px; }            /* .sec-label (components.css) hat 11 px */
.pd-crumb a { display: inline-flex; align-items: center; min-height: 32px; }
.pd .px-head { margin: 4px 0 8px; }
/* Kopf (Lesbarkeit a43): erst die Kennzahlen, darunter die Push-Zeile als
   eigener, leiserer Absatz — vorher eine Zeile, die am Handy mitten im
   Commit-Betreff umbrach. */
.pd-meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg); }
.pd-m { white-space: nowrap; }
/* Text und Compare-Link als eigene Flex-Teile: am Handy ist der Link ein
   44-px-Ziel und rutscht als Ganzes in die nächste Zeile, statt eine
   Textzeile aufzublähen. */
.pd-push { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 4px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--muted); }
.pd-push-t { min-width: 0; overflow-wrap: anywhere; }
.pd-desc { margin: 10px 0 0; font-size: 13px; }
.pd-desc > summary { display: inline-flex; align-items: center; min-height: 32px;
  color: var(--link); cursor: pointer; }
.pd-desc .doc-body { margin-top: 6px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; }

/* ---- Stat-Karten -------------------------------------------------------- */
.pd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin: 18px 0 22px; }
.pd-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
/* Abnahme a43, Frage 2: die ganze Karte ist der Link (wie a.ctr im Puls). */
a.pd-stat { color: var(--fg); text-decoration: none; transition: border-color .15s; }
a.pd-stat:hover { border-color: var(--faint2); color: var(--fg); }
.pd-stat-n { font-family: var(--font-display); font-weight: 700; font-size: 24px;
  line-height: 1; letter-spacing: -.02em; color: var(--st-c); margin-bottom: 4px; }
.pd-stat.is-zero .pd-stat-n { color: var(--faint); }
.pd-stat-label { font-size: 14px; font-weight: 600; line-height: 1.35; }
.pd-stat-sub { font-size: 13px; line-height: 1.4; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pd-part { white-space: nowrap; }
.pd-accent { --st-c: var(--accent); }
.pd-linked { --st-c: var(--ev-linked); }
.pd-blocked { --st-c: var(--st-blocked); }
.pd-updated { --st-c: var(--ev-updated); }

/* ---- Zweispalter -------------------------------------------------------- */
.pd-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 768px) {
  .pd-cols { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
}
.pd-main { min-width: 0; }
.pd-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Sektions-Labels (puls.css .pv-label, 11 px) hier ≥ 12 px. */
.pd .pv-label { font-size: 12px; }
.pd-foot { margin: 28px 0 0; font-size: 13px; text-align: center; }

/* ---- Kanten-Explorer ---------------------------------------------------- */
/* Container: die Zeile richtet sich nach der Breite des Explorers, nicht des
   Viewports (@container kx unten) — ab 768 px steht er neben der 340-px-
   Seitenspalte, und bis gut 1100 px blieben den Titeln im Desktop-Grid nur
   0–140 px (Review Lesbarkeit a43). */
.kx { scroll-margin-top: calc(var(--topnav-h, 56px) + 12px); container: kx / inline-size; }
.kx-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.kx-top .pv-label { margin: 0; }
.kx-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.kx-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color .15s; }
.kx-pill:hover { border-color: var(--faint2); color: var(--fg); }
.kx-pill.is-active { background: var(--fg); border-color: var(--fg); color: var(--panel); }
.kx-card { overflow: hidden; }
/* Zahl im Filter und die neuen davon über den Zeilen — das Ziel von Zähler 2
   im Puls nennt hier dieselbe Zahl wie dessen Unterzeile (Abnahme a43). */
.kx-caption { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.kx-cap-new { white-space: nowrap; }
/* Feste Breiten für Relation und „Von wem · Wann": jede Zeile ist ihr eigenes
   Grid — mit auto verschöbe ein längerer Akteur die Spalten gegen Kopf und
   Nachbarzeilen. 148 px tragen „Alex Beispiel · vor 2 Std" in 13 px auf einer
   Zeile (Lesbarkeit a43); ein längerer Akteur kürzt, die Zeit nie. */
.kx-cols { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr) 148px;
  gap: 10px; align-items: center; }
.kx-headrow { padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.kx-headrow > :last-child { text-align: right; }
.kx-row { border-bottom: 1px solid var(--line); }
.kx-row:last-of-type { border-bottom: 0; }
/* Inhalt 14 px, Sekundäres 13 px, Zeilen mit Luft (Lesbarkeit a43). */
.kx-sum { min-height: 52px; padding: 12px 14px; font-size: 14px; line-height: 1.4;
  cursor: pointer; list-style: none; }
.kx-sum::-webkit-details-marker { display: none; }
.kx-sum:hover { background: var(--raised); }
.kx-row[open] > .kx-sum { background: var(--raised); }
.kx-end { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 7px;
  align-items: center; min-width: 0; }
.kx-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-end .new-dot { margin-right: 4px; }
/* Cross-Badge unter dem Titel des Gegenübers — verdrängt den Titel nie;
   12 px statt der 10 px aus puls.css (Lesbarkeit a43). */
.kx-end .xbadge { grid-column: 2; justify-self: start; max-width: 100%; padding: 1px 7px;
  border-radius: 4px; font-size: 12px; line-height: 1.4; overflow: hidden;
  text-overflow: ellipsis; }
.kx-tomb { color: var(--muted); }
/* Relation als ruhige Pill in Relationsfarbe statt 11 px Mono-Versalien
   (Lesbarkeit a43): Verknüpfungsblau (--ev-linked), bei einer Kante ins
   andere Projekt dessen Farbe; Text in der Zeilenfarbe auf der Tönung, die
   durchscheint (offen/Hover liegt die Zeile auf --raised). */
.kx-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; }
.kx-rel .rel-label { --rel-c: var(--ev-linked); min-width: 0; max-width: 100%; padding: 1px 8px;
  border: 1px solid color-mix(in oklab, var(--rel-c) 50%, transparent); border-radius: 999px;
  background: color-mix(in oklab, var(--rel-c) 14%, transparent); color: inherit;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.4; letter-spacing: 0;
  text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-row.is-cross .rel-label { --rel-c: var(--pj-cur, var(--ev-linked)); }
.kx-row.is-invalid .rel-label { border-style: dashed; border-color: var(--line); background: none; }
.kx-who { display: flex; justify-content: flex-end; align-items: baseline; gap: 4px;
  min-width: 0; font-size: 13px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.kx-who > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kx-who time { flex: none; color: var(--faint); }
.kx-who time::before { content: "· "; }
.kx-gone { flex-basis: 100%; font-size: 13px; color: var(--faint); white-space: nowrap; }
/* Widerrufen und beim Merge beendet: grau (Spec §5.4; --faint statt --faint2,
   das auf --panel nur 2,5:1 erreicht). */
.kx-row.is-invalid > .kx-sum { color: var(--faint); }
.kx-row.is-invalid .kb { filter: grayscale(1); }
/* Hover und offen liegt die Zeile auf --raised: --faint erreicht dort nur
   4,2:1 (hell) bzw. 4,3:1 (dunkel), --muted ≥ 5,2:1 (Review a43). */
.kx-sum:hover :is(time, .kx-gone), .kx-row[open] > .kx-sum :is(time, .kx-gone),
.kx-row.is-invalid > .kx-sum:hover, .kx-row.is-invalid[open] > .kx-sum { color: var(--muted); }
.kx-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 20px; padding: 6px 14px 14px 42px; background: var(--raised); font-size: 13px;
  line-height: 1.45; }
.kx-panel p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kx-panel b { font-weight: 600; margin-right: 4px; }
.kx-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; }
.kx-act { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
.kx-act-t { min-width: 0; max-width: 28ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.kx-open { font-weight: 600; }
.kx-foot { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px;
  color: var(--muted); }
.kx-empty { margin: 0; padding: 14px; font-size: 13px; color: var(--muted); }
.kx-mobile-more, .kx-desk-more { display: none; }
.kx-card { scroll-margin-top: calc(var(--topnav-h, 56px) + 12px); }
/* Desktop: zuerst 15 Zeilen (Abnahme a43, Frage 1) — derselbe :target-Weg wie
   am Handy mit zehn; „weitere 50 laden" zielt ebenfalls auf #kanten-alle. */
@media (min-width: 768px) {
  .kx-card .kx-row:nth-of-type(n+16) { display: none; }
  .kx-card:target .kx-row { display: block; }
  .kx-card:target .kx-desk-more { display: none; }
  .kx-desk-more { display: block; }
}
/* Schmaler Explorer (Handy, Tablet hochkant, halbes Fenster): Zeile dreizeilig
   — Von / Relation → Nach / Wer · Wann; das Desktop-Grid braucht für zwei
   lesbare Titel neben Relation (104) und „Von wem · Wann" (148) gut 620 px.
   Die Relationsspalte hat wie am Desktop feste 104 px — mit auto wuchs sie je
   Zeile mit dem Label und „(widerrufen)", „Nach" begann überall woanders
   (Review a43). Titel brechen um statt zu kürzen (kein Hover am Handy). */
@container kx (max-width: 639px) {
  .kx-headrow { display: none; }
  .kx-cols.kx-sum { grid-template-columns: 104px minmax(0, 1fr); gap: 6px 8px;
    grid-template-areas: "src src" "rel dst" "who who"; padding: 12px; }
  .kx-sum .kx-title { white-space: normal; overflow-wrap: anywhere; }
  .kx-sum .kx-src { grid-area: src; }
  .kx-sum .kx-rel { grid-area: rel; }
  .kx-sum .kx-dst { grid-area: dst; }
  .kx-sum .kx-who { grid-area: who; justify-content: flex-start; }
  .kx-panel { grid-template-columns: minmax(0, 1fr); padding: 8px 12px 10px; }
}

/* ---- Kompakter Verlauf (Spec §5.4 Links 2) ------------------------------ */
/* Ziel der Karte „Neu seit dir" (#verlauf, Nachtrag 06ac8ffb). */
.pd-feed-sec { margin-top: 22px; scroll-margin-top: calc(var(--topnav-h, 56px) + 12px); }
/* Die ganze Zeile ist der Link (Titel in Akzentfarbe) — 44 px Trefferfläche
   ohne Aufklapper; Commits verlinken extern. */
.fc-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; min-height: 44px; padding: 8px; border-radius: 8px; color: var(--fg);
  text-decoration: none; }
a.fc-row:hover { background: var(--raised); color: var(--fg); }
.fc-text { min-width: 0; font-size: 14px; line-height: 1.4; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fc-first { color: var(--link); }
.fc-more { color: var(--muted); }
.fc-row .fx-rel { font-size: 13px; }           /* puls.css: 12 px */
.pd-feed-sec .fx-day { font-size: 12px; }      /* puls.css: 11 px */
.fc-all { margin: 6px 8px 4px; font-size: 13px; font-weight: 600; }

/* ---- Rechte Spalte: Nachbarschaft, Board, Inhalt nach Art --------------- */
.pd-ego { padding: 4px 10px 8px; }
.pd-ego .ego { margin: 0; }
/* Desktop: „Nachbarschaft" als Sektions-Label über der Karte wie Board und
   Inhalt nach Art; das summary der festgepinnten Karte nur für Screenreader.
   Mobil bleibt es der Klapp-Schalter, das Label entfällt dort. */
@media (min-width: 768px) {
  .pd-ego .ego-pin > summary { position: absolute; width: 1px; height: 1px; min-height: 0;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 767px) {
  .pd-ego-label { display: none; }
}
/* Ohne „·"-Trenner: beim Umbruch stünde er sonst am Zeilenende; die Muster
   trennen die Einträge. */
.ego-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 4px 0 0;
  font-size: 13px; color: var(--muted); }
.ego-lg-item { display: inline-flex; align-items: center; gap: 6px; }
.ego-legend .ego-full { margin: 0; font-size: 13px; }
.pd-ego .ego-more { font-size: 13px; }         /* components.css: 12 px */
.pd-ego .ego-info-kind { font-size: 13px; }    /* components.css: 11 px */
.ego-lg { display: inline-block; flex: none; }
.ego-lg-new { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ego-lg-cross { width: 14px; height: 2px; background: var(--pj-1); }
/* Knoten nach dem Marker gefüllt, Kanten in andere Projekte in deren Farbe. */
.ego-node.is-new .ego-disc { fill: var(--accent); stroke: var(--accent); }
.ego-node.is-new .ego-initial { fill: var(--on-accent); }
/* Größe und Tinte der Initialen stehen für beide Seiten in components.css
   (.ego-initial, --ego-ink); neue Knoten behalten On-Accent auf Lila. */
.ego-edge.is-cross { stroke: var(--pj-cur, var(--faint)); stroke-width: 1.6; stroke-opacity: .9; }
/* Kanten zwischen zwei Ring-1-Knoten nur angedeutet (ego.js, Markierung). */
.ego-edge.is-chord { stroke-opacity: .15; }
.pd-board { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; font-size: 13px; }
.pd-board .pl-segbar { height: 8px; }
.pd-board-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.pd-board-line span { min-width: 0; }
.pd-board-line a { margin-left: auto; font-weight: 600; white-space: nowrap; }
.pd-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-kind { min-width: 0; max-width: 100%; }
.pd-kind[open] { flex-basis: 100%; }
.pd-kind > summary { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font-size: 13px; cursor: pointer; list-style: none; transition: border-color .15s; }
.pd-kind > summary::-webkit-details-marker { display: none; }
.pd-kind > summary:hover, .pd-kind[open] > summary { border-color: var(--faint2); }
.pd-kind-n { color: var(--muted); }
.pd-kind ul { margin: 6px 0 4px; padding: 6px 8px; list-style: none; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); }
.pd-kind li a { display: flex; align-items: center; min-height: 32px; font-size: 14px;
  overflow-wrap: anywhere; }
.pd-empty { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- Fokus (Tastatur) --------------------------------------------------- */
:is(.pl, .pd) a:focus-visible, .kx-sum:focus-visible, .pd-kind > summary:focus-visible,
.pd-desc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kx-sum:focus-visible, a.fc-row:focus-visible { outline-offset: -2px; }

/* ---- Mobil (< 768 px): einspaltig, Touch-Ziele ≥ 44 px ------------------ */
@media (max-width: 767px) {
  .px-head { margin-top: 16px; }
  /* Liste: Sparkline und Tasks unter den Titel, GitHub + Öffnen als Zeile. */
  .pl-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  /* Titel zweizeilig statt Ellipsis (a41-Lehre): bei Sub-Projekten steht der
     unterscheidende Teil hinten; Punkt, Tag und „+n neu" rutschen mit. */
  .pl-titlerow { flex-wrap: wrap; align-items: baseline; row-gap: 2px; }
  .pl-title { white-space: normal; overflow-wrap: anywhere; }
  /* „Was zuletzt" fließt bis zu drei Zeilen — einzeilig blieb am Handy kaum
     mehr als „Alex Beispiel änderte 1 Verknüpfu…" (Lesbarkeit a43). Gekürzt
     wird nur der Text, nie die Zeit: sie ist ein eigenes Flex-Element und
     rutscht bei langem Text in eine eigene Zeile, statt hinter Zeile 3 im
     Clamp zu verschwinden (Review a43, wie die Kachel in a41). */
  .pl-last { flex-wrap: wrap; align-items: baseline; white-space: normal; }
  .pl-last-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .pl-last-rel { white-space: nowrap; }
  .pl-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .pl-open { display: inline-flex; align-items: center; min-height: 24px; }
  .pl-orphan .pl-spark, .pl-orphan .pl-tasks { display: none; }
  .pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 18px; }
  .pd-stat { padding: 10px 12px; }
  .pd-stat-n { font-size: 22px; }
  .pd-stat-sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; }
  .pd-crumb a, .pd-desc > summary, .pd-kind li a, .pv-label-link { min-height: 44px; }
  /* Text-Links im Fließtext: inline ignoriert min-height, erst inline-flex
     macht sie zu 44-px-Zielen (Review a43). */
  .fc-all a, .pd-foot a, .pd-push a, .pd-head a.badge { display: inline-flex;
    align-items: center; min-height: 44px; }
  .kx-pills { margin-left: 0; width: 100%; }
  .kx-pill { min-height: 44px; padding: 0 14px; font-size: 13px; }
  /* Die dreizeilige Zeile regelt @container kx (schmaler Explorer). */
  /* Am Handy zuerst zehn Zeilen, damit Verlauf und Nachbarschaft nah bleiben;
     „weitere zeigen" springt auf #kanten-alle und blendet per :target den
     Rest dieser Seite ein (ohne JS). */
  .kx-card .kx-row:nth-of-type(n+11) { display: none; }
  .kx-card:target .kx-row { display: block; }
  .kx-card:target .kx-mobile-more { display: none; }
  .kx-mobile-more { display: block; }
  .kx-act, .kx-foot a, .kx-empty a { min-height: 44px; }
  .kx-foot a, .kx-empty a { display: inline-flex; align-items: center; }
  .fc-row { grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; align-items: start;
    padding: 8px 4px; }
  .fc-row .ev-ico { grid-row: span 2; }
  .fc-text { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; }
  .fc-row .fx-rel { grid-column: 2; font-size: 13px; }
  .pd-board-line a, .ego-legend .ego-full { display: inline-flex; align-items: center;
    min-height: 44px; }
  .pd-kind > summary { min-height: 44px; }
}

/* ---- Reduzierte Bewegung ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pl-row, .kx-pill, .pd-kind > summary, a.pd-stat { transition: none; }
}