.reglist { display: grid; gap: 7px; }
.reg { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--border-2); border-radius: 8px; padding: 8px 11px; font-size: 12.5px; }
.reg .grip { color: var(--dim); cursor: grab; }
/* Farbe und Groesse kommen aus `.weg-x` in journal.css (Haus-Loeschkreuz, seit 16.08.2026);
   hier steht nur noch, WO es sitzt. */
.reg .weg-x { margin-left: auto; }

/* Umsortieren der Kriterien. Die gezogene Zeile wird blass, das Ziel bekommt einen Strich
   an der Kante, an der sie einrastet — waehrend des Zugs wird bewusst NICHT umsortiert
   (Begruendung in seite.js). */
.reg.zieht { opacity: .45; }
.reg .grip { touch-action: none; user-select: none; }
.reg.hierhin-vor  { box-shadow: inset 0 2px 0 var(--accent); }
.reg.hierhin-nach { box-shadow: inset 0 -2px 0 var(--accent); }

/* Die Kategorien-Kachel links: eine Liste zum Verwalten, keine Zaehlung mehr.
   Bauform wie die Sammelordner in der Konto-Auswahl -- Name links, Anzahl rechts, Werkzeuge
   am Rand, und sie erscheinen erst beim Zeigen. */
.katzeile {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px;
  font-size: 12.5px; color: var(--muted);
}
.katzeile:hover { background: rgba(255,255,255,.04); color: var(--text); }
.katzeile .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.katzeile .anz { font-variant-numeric: tabular-nums; color: var(--dim); }
.katzeile .werkzeuge { display: inline-flex; gap: 4px; align-items: center; flex: 0 0 46px; justify-content: flex-end; }
.katzeile .werk { visibility: hidden; cursor: pointer; padding: 1px 5px; border-radius: 5px; color: var(--dim); }
.katzeile .weg-x { visibility: hidden; font-size: 15px; padding: 0 4px; }
.katzeile:hover .werk, .katzeile:hover .weg-x { visibility: visible; }
.katzeile .werk:hover { background: rgba(255,255,255,.09); color: var(--text); }
/* „ohne Kategorie" ist keine Kategorie, sondern ihre Abwesenheit: blass und ohne Werkzeuge. */
.katzeile.ohne { color: var(--dim); font-style: italic; }
.katzeile.neu { cursor: pointer; color: var(--accent-2); border: 1px dashed var(--border-2); margin-top: 4px; }
.katzeile.neu:hover { background: rgba(124,108,245,.08); }



/* ---- „Noch nicht gespeichert" ----
   Der Punkt steht NEBEN dem Namen, nicht am Knopf: Dort sieht man hin, wenn man den Ansatz
   wechseln will — und genau dann ist die Frage „habe ich das schon gesichert?" wichtig.
   Orange und nicht rot: Es ist kein Fehler, sondern ein offener Vorgang. */
.offen-punkt {
  width: 9px; height: 9px; border-radius: 50%; background: #ffab00;
  box-shadow: 0 0 0 3px rgba(255,171,0,.16);
  flex: 0 0 9px;
}
/* Der gewaehlte Eintrag in der Liste, solange etwas ungespeichert ist.
   ⚠️ DERSELBE ORANGETON WIE DER PUNKT (#ffab00) — zwei verschiedene Warnfarben fuer
   dieselbe Sache liessen sie wie zwei verschiedene Zustaende aussehen.
   ⚠️ UND ZURUECKHALTEND: Es ist kein Fehler, sondern ein offener Vorgang. Ein kraeftiger
   Balken links reicht; die Flaeche bleibt fast wie sonst, damit der Eintrag noch als der
   GEWAEHLTE lesbar bleibt und nicht als Warnung. */
.listitem.on.offen {
  background: rgba(255,171,0,.10);
  border-color: rgba(255,171,0,.42);
  box-shadow: inset 3px 0 0 #ffab00;
}
.listitem.on.offen .s { color: rgba(255,171,0,.75); }

/* Der ausgegraute Knopf sagt „hier ist gerade nichts zu tun". Ohne `pointer-events` bliebe
   der Zeigefinger stehen und verspraeche einen Klick, der nichts bewirkt. */
.btn:disabled { opacity: .4; cursor: default; pointer-events: none; }