/* Akten (Acta Nova) — Dritt-App des Dashboards (Issue #112).

   Kap. 581: Die App trägt ein Registerkarten-Ribbon nach docs/RIBBON-STANDARD.md
   (Start · Akte · Ansicht). Seine Gestalt steht in ui-2026.css (Override-Schicht,
   Sammelregeln mit allen Container-Klassen — Spezifitäts-Falle); hier stehen nur
   die Regeln, die NUR diese App hat.

   Eigene Datei nach dem Haus-Muster für neue Module (wie netzwerk.css/todo.css):
   KEIN Eingriff in styles.css, damit Login-Seite und bestehende Apps unangetastet
   bleiben. Alle Farben kommen aus den Design-Tokens (--card, --border, --text2,
   --accent) — keine Rohfarben, sonst brechen Dark- und Lumen-Theme.

   Modulfarbe: --wiki (Akten/Dokumente liegt fachlich bei der Doku/Verwaltung);
   der Wert steht NUR im Token (styles.css), nicht hier — sonst wäre er eine
   zweite Wahrheit.

   Formulare sind SEGMENTE mit Wirkung (Haus-Regel): kein Bedienelement ohne
   Backend-Folge, Details in der eigenen Detailspalte — kein Modal.
*/

.ak-wrap{padding:10px 4px 20px}
#sec-akten .ak-wrap{max-width:1500px}

/* ---------- Kopfzeile ---------- */
.ak-top{display:flex;align-items:center;gap:10px;padding:2px 2px 12px}
.ak-mark{width:32px;height:32px;border-radius:var(--radius);display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;
  background:color-mix(in srgb, var(--wiki) 14%, var(--card));color:var(--wiki)}
.ak-t{font-size:14px;font-weight:700;line-height:1.25}
.ak-s{font-size:11.5px;color:var(--text2);line-height:1.3}
.ak-weg{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  color:var(--text2);text-decoration:none;border:1px solid var(--border);border-radius:var(--radius);
  padding:4px 9px;background:var(--card);transition:background var(--tr),border-color var(--tr),color var(--tr)}
.ak-weg:hover{color:var(--accent);border-color:var(--accent);background:var(--hover)}

/* ---------- Zweispaltig: Aktenbaum links, Inhalt rechts ---------- */
.ak-split{display:flex;gap:14px;align-items:flex-start}
.ak-seite{flex:0 0 300px;min-width:0}
.ak-main{flex:1 1 auto;min-width:0}

/* ---------- Kap. 585: Verfahrensbereich, Schnellfilter, die drei Arten ----------

   Der Bereich wird im Kopf gewaehlt (Ribbon-Befehl) und hier als Kachelreihe ausgebreitet:
   sichtbar, mit Zahlen, damit die Wahl etwas bedeutet. Links stehen die Akten des Bereichs
   mit Schnellfilter — gedeckelt, denn 178 Zeilen untereinander sind keine Hilfe (Auftrag).
   Rechts stehen die Objekte des Bereichs, nach ART getrennt; jede Zeile traegt ihre Art. */

/* Die Kachelflaeche unter dem Kopf. */
.ak-tray{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
  padding:11px 12px 12px;margin-bottom:12px}
.ak-tray-kopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.ak-tray-lbl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  color:var(--wiki)}
.ak-tray-kopf .tb-info{flex:1 1 auto;min-width:0}
.ak-tray-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:8px}
.ak-tray-k{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);
  padding:9px 11px;font:inherit;color:var(--text);transition:border-color var(--tr),background var(--tr)}
.ak-tray-k:hover{border-color:var(--wiki);background:color-mix(in srgb, var(--wiki) 7%, var(--card))}
.ak-tray-k.act{border-color:color-mix(in srgb, var(--wiki) 45%, var(--border));
  background:color-mix(in srgb, var(--wiki) 12%, var(--card))}
.ak-tray-t{font-size:12.5px;font-weight:600;line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ak-tray-z{font-size:11px;color:var(--text2)}
.ak-tray-fuss{font-size:11px;color:var(--text2);margin-top:9px;line-height:1.45}

/* Schnellfilter ueber der Aktenliste. */
.ak-such{position:relative;display:flex;align-items:center;gap:7px;margin:2px 0 2px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
  padding:5px 8px 5px 9px}
.ak-such > i{flex:0 0 auto;color:var(--text2)}
.ak-such input{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--text);
  font:inherit;font-size:12.5px;padding:3px 0}
.ak-such input:focus{outline:none}
.ak-such-x{flex:0 0 auto;display:inline-flex;border:0;background:transparent;color:var(--text2);
  cursor:pointer;padding:2px;border-radius:6px}
.ak-such-x:hover{background:var(--hover);color:var(--text)}

/* ---------- Rechts: Kopf des Bereichs, Art-Chips, Artebene der Liste ---------- */
.ak-bereich-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:0 2px 9px}
.ak-bereich-t{font-size:14px;font-weight:700;line-height:1.25}
.ak-bereich-s{font-size:11.5px;color:var(--text2);margin-top:2px}
.ak-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.ak-chip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;
  padding:6px 11px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--card);color:var(--text2);cursor:pointer;
  transition:border-color var(--tr),color var(--tr),background var(--tr)}
.ak-chip:hover{color:var(--text)}
.ak-chip-n{font-size:11px;font-weight:700;padding:1px 7px;border-radius:9px;
  background:color-mix(in srgb, var(--text2) 12%, transparent)}
.ak-chip.act{font-weight:600}
.ak-chip.act.akt{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  background:color-mix(in srgb, var(--accent) 10%, var(--card))}
.ak-chip.act.eingang{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 45%, var(--border));
  background:color-mix(in srgb, var(--warn) 10%, var(--card))}
.ak-chip.act.vorfall{color:var(--file);border-color:color-mix(in srgb, var(--file) 45%, var(--border));
  background:color-mix(in srgb, var(--file) 10%, var(--card))}

/* Die Art in der Zeile — Wort + Symbol + Farbe. Farbe ist Signal, nicht Dekoration:
   drei Arten, drei klar unterscheidbare Toene. */
.ak-art{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  padding:2px 8px 2px 6px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent}
.ak-art i{width:12px;height:12px}
.ak-art.akt{color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
.ak-art.eingang{color:var(--warn);background:color-mix(in srgb, var(--warn) 14%, transparent);
  border-color:color-mix(in srgb, var(--warn) 32%, transparent)}
.ak-art.vorfall{color:var(--file);background:color-mix(in srgb, var(--file) 12%, transparent);
  border-color:color-mix(in srgb, var(--file) 30%, transparent)}

/* Die Zuordnung: ein Knopf, der zum Akt fuehrt — „wo gehoert das hin". */
.ak-eltern{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11.5px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
  color:var(--text2);cursor:pointer;padding:3px 8px;
  transition:border-color var(--tr),color var(--tr)}
.ak-eltern:hover{border-color:var(--accent);color:var(--accent)}
.ak-eltern.fehlt{font-style:italic;opacity:.85;cursor:default;border-style:dashed;color:var(--text2)}
.ak-detail-fuss{display:flex;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--border)}

.ak-lbl{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text2);padding:2px 2px 6px}
.ak-lbl .mc{margin-left:4px}

/* ---------- Handgriffe (nur noch im Formular-Kontext; die Befehle der App sitzen
   seit Kap. 581 im Ribbon — die frühere Knopfreihe `.ak-griffe` ist entfallen) ---------- */
.ak-knopf{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:6px 11px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--card);color:var(--text);cursor:pointer;
  transition:background var(--tr),border-color var(--tr),color var(--tr)}
.ak-knopf:hover{border-color:var(--accent);color:var(--accent)}
.ak-knopf.prim{background:color-mix(in srgb, var(--wiki) 13%, var(--card));
  border-color:var(--wiki);color:var(--wiki)}
/* Der geltende Bereich ist sichtbar getönt (Haus-Muster `.act`: weicher Tint, Farbe
   bleibt Signal — `.prim` ist der Handlung vorbehalten, nicht dem Zustand). */
.ak-knopf.act{background:color-mix(in srgb, var(--wiki) 12%, var(--card));
  border-color:color-mix(in srgb, var(--wiki) 45%, var(--border));color:var(--wiki)}
.ak-knopf:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Aktenliste (Kachel + volle Ansicht) ---------- */
.ak-zeile{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--card);margin-bottom:6px;cursor:pointer;
  transition:background var(--tr),border-color var(--tr)}
.ak-zeile:hover{background:var(--hover);border-color:var(--accent)}
.ak-zeile.act{border-color:var(--wiki);background:color-mix(in srgb, var(--wiki) 10%, var(--card))}
.ak-zeile-b{flex:1 1 auto;min-width:0}
.ak-zeile-t{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ak-zeile-s{font-size:11px;color:var(--text2);line-height:1.35;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-zeile-r{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.ak-nr{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--text2);
  background:var(--hover);padding:2px 6px;border-radius:5px;white-space:nowrap}

/* Alter einer Akte: Handlungsbedarf sichtbar machen, nicht nur ein Datum.
   Farbe bleibt Signal (Haus-Regel) — „alt" heißt lange offen. */
.ak-alt{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
.ak-alt.frisch{background:color-mix(in srgb, var(--ok) 15%, var(--card));color:var(--ok)}
.ak-alt.mittel{background:color-mix(in srgb, var(--warn) 17%, var(--card));color:var(--warn)}
.ak-alt.alt{background:color-mix(in srgb, var(--danger) 14%, var(--card));color:var(--danger)}

/* ---------- Detailspalte: der Akt ---------- */
.ak-kopf{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
  padding:12px 13px;margin-bottom:10px}
.ak-kopf-t{font-size:15px;font-weight:700;line-height:1.3}
.ak-kopf-s{font-size:11.5px;color:var(--text2);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.ak-seg{margin-bottom:10px}
.ak-seg-k{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text2);padding:0 0 5px 4px;border-left:3px solid var(--wiki);padding-left:8px}
.ak-seg-b{display:flex;flex-wrap:wrap;gap:6px}
.ak-paar{flex:0 0 auto;min-width:132px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);padding:6px 9px}
.ak-paar-k{font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--text2)}
.ak-paar-v{font-size:12.5px;font-weight:600;line-height:1.3}

/* ---------- Kap. 584: Sachgebiete, Aktenliste, Detailseite mit Registerkarten ----------

   Die Sicht folgt der Instanz: links die Gliederung (Arbeitsvorrat · Sachgebiete), rechts EIN
   Pane — darin entweder die Akten eines Sachgebiets als LISTE oder die Detailseite des
   gewaehlten Aktes mit Registerkarten. Kacheln gibt es hier nicht; ein Akt ist ein Vorgang,
   den man liest.
   Der alte Baum-Kasten (.ak-b) und die alte Zeilenliste (.ak-n) sind entfallen. */

/* ---------- Formular (Segmente, mit Wirkung) ---------- */
.ak-form{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
  padding:12px 13px}
.ak-feld{margin-bottom:9px}
.ak-feld-k{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text2);padding-bottom:4px;padding-left:8px;border-left:3px solid var(--wiki)}
.ak-feld input,.ak-feld select,.ak-feld textarea{width:100%;font-size:12.5px;padding:7px 9px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);
  color:var(--text);font-family:inherit}
.ak-feld input:focus,.ak-feld select:focus,.ak-feld textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent)}
.ak-feld-h{font-size:10.5px;color:var(--text2);margin-top:3px;padding-left:2px}
.ak-reihe{display:flex;gap:8px;flex-wrap:wrap}
.ak-reihe>*{flex:1 1 170px;min-width:0}
/* Kap. 589: Häkchenzeile (Papierakt) — im Formular dieselbe Bauart wie die Feldreihen. */
.ak-haken{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}
.ak-haken input{width:auto;margin:0}
/* Kap. 589: Hinweiszeile im Formular. Sie sagt, was die Schnittstelle NICHT kann
   (Sachgebiet beim Eingang) — ehrlich statt verschwiegen, aber zurückhaltend. */
.ak-notiz{font-size:11px;color:var(--text2);background:var(--card);border-left:3px solid var(--accent);
  padding:8px 10px;border-radius:var(--radius);line-height:1.5}
.ak-fuss{display:flex;gap:8px;justify-content:flex-end;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--border)}

/* Ein Pflichtfeld, das die API nachgefordert hat — sichtbar als Handlungsbedarf,
   nicht als Fehlermeldung ohne Ort. */
.ak-fehlt{border-color:var(--danger)!important;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent)!important}

/* ---------- Zustände ---------- */
.ak-hinweis{border:1px solid var(--border);border-left:3px solid var(--wiki);border-radius:var(--radius);
  background:var(--card);padding:12px 14px;font-size:12.5px;line-height:1.5}
.ak-hinweis b{display:block;margin-bottom:4px;font-size:13px}
.ak-warn{border:1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  border-left:3px solid var(--warn);border-radius:var(--radius);background:var(--card);
  padding:10px 12px;font-size:12px;line-height:1.45;margin-bottom:9px}
.ak-err{border:1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-left:3px solid var(--danger);border-radius:var(--radius);background:var(--card);
  padding:10px 12px;font-size:12px;line-height:1.45;margin-bottom:9px}
.ak-ok{border:1px solid color-mix(in srgb, var(--ok) 45%, var(--border));
  border-left:3px solid var(--ok);border-radius:var(--radius);background:var(--card);
  padding:10px 12px;font-size:12px;line-height:1.45;margin-bottom:9px}

/* ---------- Baum: Arbeitsvorrat + Akten (Kap. 423) ----------

   Der Auftrag: „links in einem tree ist der arbeitsvorrat sichtbar". Der Baum hat
   zwei Ebenen: Zweig (Vorrat/Gruppe) -> Blatt (Eintrag). Der Zweig traegt die Zahl
   als Signal; ein leeres Blatt ist gedimmt, keine leere Zeile.

   Aktiv-Zustand ist hier `offen` am Kopf (Dreieck gedreht) — NICHT `primary`
   (Ribbon-Standard: Farbe ist Signal, nicht Dekoration). */
.ak-ast{margin-bottom:2px}
.ak-ast-k{display:flex;align-items:center;gap:7px;width:100%;border:0;background:transparent;
  color:var(--text);font:inherit;font-size:12.5px;padding:7px 8px;border-radius:var(--radius);
  cursor:pointer;text-align:left}
.ak-ast-k:hover{background:color-mix(in srgb, var(--wiki) 10%, transparent)}
.ak-ast-k i{flex:0 0 auto;color:var(--text2);transition:transform .15s}
.ak-ast-k > i:first-child{transition:transform .15s}
.ak-ast-k.offen > i:first-child{transform:rotate(90deg)}
/* Kap. 586: Die zweite Ikone trägt die EBENE (Verfahrensbereich/Sachgebiet/Untersachgebiet). */
.ak-ast-ei{display:inline-flex;flex:0 0 auto;color:var(--wiki)}
.ak-ast-luecke{flex:0 0 auto;width:13px}
.ak-ast-k.offen{background:color-mix(in srgb, var(--wiki) 12%, transparent)}
.ak-ast-t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-ast-n{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--wiki);
  background:color-mix(in srgb, var(--wiki) 14%, transparent);border-radius:9px;
  padding:1px 7px;min-width:20px;text-align:center}
.ak-ast-n.leer{color:var(--text2);background:color-mix(in srgb, var(--text2) 10%, transparent);
  font-weight:500}
/* Kap. 586: hat ein Knoten keine Akten, aber Eingänge/Vorfälle, steht das daneben —
   sonst läse man „0" und hielte den Knoten für leer. */
.ak-ast-m{flex:0 0 auto;font-size:10.5px;color:var(--warn);font-weight:600}
.ak-ast-kinder{padding-left:14px;border-left:1px solid var(--border);margin-left:11px}
.ak-ast-f{font-size:11.5px;color:var(--text2);padding:5px 8px;line-height:1.45}
/* Das Blatt: ein Eintrag im Vorrat (Taetigkeit an einem Objekt). */
.ak-blatt{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--radius);
  cursor:pointer;font-size:12px}
.ak-blatt:hover{background:color-mix(in srgb, var(--wiki) 9%, transparent)}
.ak-blatt i{flex:0 0 auto;color:var(--text2)}
.ak-blatt-t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Kap. 423: Blatt traegt zwei Zeilen — der Akt (oben) und die Taetigkeit daran
   (unten, gedimmt). Ohne die zweite Zeile weiss der Nutzer nicht, was zu tun ist. */
.ak-blatt-i{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.ak-blatt-i .ak-blatt-t{display:block}
.ak-blatt-u{font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ak-blatt-z{flex:0 0 auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  color:var(--text2)}
/* Ladeplatzhalter im Baum: haelt die Geometrie, damit nichts springt. */
.ak-skel-z{background:color-mix(in srgb, var(--text2) 13%, transparent);
  border-radius:var(--radius);margin:3px 0;animation:ak-puls 1.4s ease-in-out infinite}
@keyframes ak-puls{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- Karteireiter am Akt (Kap. 423, Auftrag) ----------

   Der Akt ist ein OBJEKT MIT KARTEIREITERN. Aktiv = `on` (Ribbon-Standard). Die
   Leiste ist flach und liegt auf der Trennlinie — kein Kasten, kein Schatten. */
.ak-reiter{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:2px 0 12px}
.ak-reiter-k{display:flex;align-items:center;gap:6px;border:0;background:transparent;
  color:var(--text2);font:inherit;font-size:12.5px;padding:8px 12px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.ak-reiter-k:hover{color:var(--text)}
.ak-reiter-k.on{color:var(--wiki);border-bottom-color:var(--wiki);font-weight:600}
.ak-reiter-k i{width:13px;height:13px}
.ak-reiter-inhalt{min-height:80px}

/* ---------- Upload (Kap. 423) ---------- */
.ak-feld input[type=file]{font-size:12px;color:var(--text2);padding:6px 0;width:100%}
.ak-feld input[type=file]::file-selector-button{border:1px solid var(--border);
  background:var(--card);color:var(--text);border-radius:var(--radius);padding:5px 11px;
  font:inherit;font-size:12px;cursor:pointer;margin-right:9px}
.ak-feld input[type=file]::file-selector-button:hover{
  background:color-mix(in srgb, var(--wiki) 10%, transparent)}



/* Das gewaehlte Sachgebiet: weiche Toenung wie ueberall (.act), nicht Vollfarbe. */
.ak-ast-k.act{background:color-mix(in srgb, var(--wiki) 14%, var(--card))}
.ak-ast-k.act .ak-ast-t{font-weight:600}

/* Aktenliste im Detailpane: man vergleicht Zeilen untereinander — deshalb ein Raster mit
   festen Spaltenkanten, keine Karten. */
.ak-liste-titel{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 8px}
.ak-liste-titel b{font-size:13.5px}
.ak-liste-titel .tb-info{margin-left:8px}
.ak-liste{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.ak-liste-kopf,.ak-liste-z{display:grid;gap:10px;align-items:center;padding:7px 11px}
/* Kap. 585: jede Art hat ihre eigenen Spalten — die Art steht immer vorn, damit man auf den
   ersten Blick sieht, ob eine Zeile ein Akt, ein Eingang oder ein Geschäftsfall ist. */
.ak-liste-akt{grid-template-columns:76px 118px minmax(0,1fr) 84px 132px}
.ak-liste-eingang{grid-template-columns:76px 108px minmax(0,1fr) 82px 150px}
.ak-liste-vorfall{grid-template-columns:76px 96px minmax(0,1fr) 140px 150px}
.ak-liste-kopf{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text2);background:var(--hover);border-bottom:1px solid var(--border)}
.ak-liste-z{border-bottom:1px solid var(--border);cursor:pointer;font-size:12.5px;
  transition:background var(--tr)}
.ak-liste-z:last-child{border-bottom:0}
.ak-liste-z:hover{background:var(--hover)}
.ak-liste-z.act{background:color-mix(in srgb, var(--wiki) 12%, var(--card));font-weight:600}
.ak-liste-nr{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-liste-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-liste-d{font-size:11.5px;color:var(--text2)}
.ak-liste-s{font-size:11.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Kap. 586: Brotkrümelnavigation über dem Detailpane ----------

   Sie zeigt, wo im Baum man steht (Verfahrensbereich › Sachgebiet › Untersachgebiet) und ist
   selbst der Weg zurück: jeder Teil ist anklickbar. Beim geöffneten Objekt kommt dessen
   Nummer als letzte, nicht anklickbare Station dazu. */
.ak-pfad{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:0 2px 9px;
  font-size:11.5px;color:var(--text2)}
.ak-pf-gl{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11.5px;
  border:0;background:transparent;color:var(--text2);cursor:pointer;padding:3px 6px;
  border-radius:var(--radius);transition:background var(--tr),color var(--tr)}
.ak-pf-gl:hover{background:var(--hover);color:var(--wiki)}
.ak-pf-gl i{color:var(--wiki)}
.ak-pf-t{color:var(--text2);opacity:.7;padding:0 1px}
.ak-pf-jetzt{font-weight:600;color:var(--text);padding:3px 6px}

/* Detailseite: Kopf, Registerkarten, Felder in Gruppen (Beschriftung links, Wert rechts). */
.ak-detail{border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.ak-detail-kopf{padding:12px 14px 10px;border-bottom:1px solid var(--border)}
.ak-detail-t{font-size:15px;font-weight:700;line-height:1.3}
.ak-detail-s{font-size:11.5px;color:var(--text2);margin-top:4px;display:flex;gap:10px;
  flex-wrap:wrap;align-items:center}
.ak-pille{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--warn) 16%, var(--card));color:var(--warn)}
.ak-reiter{padding:0 12px}
.ak-reiter-inhalt{padding:12px 14px 14px}
.ak-bereich-wahl{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}

.ak-grp{margin-bottom:12px}
.ak-grp:last-child{margin-bottom:0}
.ak-grp-k{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text2);margin:0 0 6px;padding:0 0 6px 8px;border-left:3px solid var(--wiki)}
.ak-grp-z{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ak-zz{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px;align-items:baseline;
  padding:6px 11px;border-bottom:1px solid var(--border);font-size:12.5px}
.ak-zz:last-child{border-bottom:0}
.ak-zz-k{font-size:11px;color:var(--text2)}
.ak-zz-v{font-weight:600;word-break:break-word}
/* ---------- Mobile: Baum oben, dann der Akt ---------- */
@media (max-width:820px){
  .ak-split{flex-direction:column}
  .ak-main{width:100%}
  .ak-weg{margin-left:0}
  .ak-top{flex-wrap:wrap}
  /* Kap. 584/585: Auf schmalen Fenstern fallen Datum und Status weg, bevor der Titel bricht;
     die ART bleibt immer stehen — sie ist die Aussage der Zeile. */
  .ak-liste-akt,.ak-liste-eingang,.ak-liste-vorfall{grid-template-columns:72px minmax(0,1fr)}
  .ak-liste-kopf span:nth-child(2),.ak-liste-kopf span:nth-child(4),.ak-liste-kopf span:nth-child(5),
  .ak-liste-z .ak-liste-d,.ak-liste-z .ak-liste-s{display:none}
  .ak-seite{flex:1 1 auto;width:100%}
  .ak-zz{grid-template-columns:1fr;gap:2px}
  .ak-zz-k{font-size:10px}
}


/* ============================================================
   KAP. 603 — die Übersichtskachel „Meine Akten" (Startseite)
   ============================================================
   Sie sitzt im Hero-Band und benutzt die Form der Aufgaben-Kachel (`.hero-todo`), damit
   das Band einheitlich bleibt. Hier nur, was die Kachel EIGENES hat: die Zeilen des
   Arbeitsvorrats und die Frist-Marken. */
.ma-kachel{position:relative}
.ma-z{display:flex;align-items:baseline;gap:6px;padding:3px 4px;border-radius:5px;
       cursor:pointer;min-height:20px;line-height:1.3}
.ma-z:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.ma-z > svg{flex:0 0 auto;align-self:center;opacity:.6}
.ma-z-t{font-size:12.5px;font-weight:600;color:var(--text);
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:58%}
.ma-z-u{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
        white-space:nowrap;max-width:34%}
/* Die Frist-Marken sind DIESELBEN wie im Baum (`.ak-alt`, dort definiert) — nicht neu
   erfunden: eine Quelle fuer das Aussehen. Hier nur die Stelle, an der sie in der Kachel sitzen. */
.ma-fr{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center}
.ma-fr > .ak-alt{margin:0}
.hzt-meta.warn{color:var(--danger);font-weight:700}