Runde Bedienelemente, Admin zusammengelegt, Kanäle entfallen

Vier der acht Änderungswünsche.

**Knöpfe.** Rund vierzig der siebzig Knöpfe waren blosser Text in Akzentfarbe,
von einem Link nicht zu unterscheiden. Jeder trägt jetzt Rahmen und
Grundfläche, über die Klasse .btn an einer Stelle definiert statt siebzigmal
als Klassenkette. Beim Drücken zieht der Knopf sich zusammen und bekommt einen
inneren Ring - er wirkt kurz dicker, ohne dass die Rahmenbreite sich ändert und
das Umfeld springt; die Rückmeldung setzt ohne Verzögerung ein und klingt
langsam ab, sonst bliebe ein kurzer Klick unsichtbar.

Dazu die neue Regel: Flächen bleiben eckig, alles Bedienbare ist rund. Damit
ist die Rundung eine Auskunft und keine Verzierung.

**Verwaltung.** Rollen, Vorlagen und Änderungsrichtlinie waren drei Einträge in
der Kopfzeile für etwas, das man selten und dann zusammenhängend braucht. Jetzt
ein Eintrag /admin mit Reiterleiste, dazu eine gemeinsame Tabs-Komponente, die
auch der Fallakte zeigt, welcher Reiter offen ist.

**Kanäle.** Ersatzlos entfernt, mitsamt Tabelle. Der Chat gehört dorthin, wo
der Vorgang steht; ein eigener Reiter mit freien Räumen war der Rückweg nach
Discord. Die Personalakte hat jetzt denselben Chat wie die Fallakte - ohne
„als Vermerk übernehmen", denn dafür braucht es einen Verlauf, und Meldungen
gehen nur an Erwähnte, nie in den allgemeinen Kanal: dass es zu jemandem eine
Personalakte gibt, ist selbst eine Auskunft. Ein CHECK erzwingt jetzt, dass
eine Nachricht zu genau einem Ort gehört.

**Kopfzeile.** Suchbalken statt Suchlink, als gewöhnliches Formular ohne ein
Byte im Bündel. Thema, Benachrichtigungen und Abmelden sitzen hinter dem
Profilbild, das von Discord kommt; wer keins hat, bekommt seine Initialen.

Nebenbei: Aktenzeichen in Tests waren nur auf vier Stellen eindeutig und
kollidierten zwischen Läufen, weil Akten nicht löschbar sind.

web/app/globals.css

@@ -54,13 +54,19 @@
   --text-lg--line-height: 1.45;
   --text-xl--line-height: 1.3;
 
-  /* Struktur: Eckenradius 2 px, ueberall gleich. Akten sind nicht abgerundet. */
+  /* Struktur: Flaechen bleiben eckig, Bedienelemente sind rund.
+     Eine Akte ist ein Blatt und hat scharfe Kanten. Was man druecken oder
+     ausfuellen kann, ist rund — daran erkennt man es, bevor man es beruehrt. */
   --radius-none: 0px;
   --radius-sm: 2px;
   --radius-DEFAULT: 2px;
   --radius-md: 2px;
   --radius-lg: 2px;
   --radius-xl: 2px;
+  /* Eingabefelder: weich gerundet. Ein mehrzeiliges Feld kann keine Pille sein. */
+  --radius-field: 10px;
+  /* Knoepfe, Suchbalken, Marken, Profilbild: voll gerundet. */
+  --radius-control: 999px;
 
   /* Keine Schatten ausser dem Fokusring. */
   --shadow-sm: none;
@@ -189,6 +195,12 @@
     text-underline-offset: 2px;
   }
 
+  /* Auch Kaestchen und Schalter gehoeren zur interaktiven Ebene. */
+  input[type='checkbox'],
+  input[type='radio'] {
+    accent-color: var(--color-accent);
+  }
+
   /* Sichtbarer Fokusring in --steel, der einzige Schatten im System. */
   :focus-visible {
     outline: 2px solid var(--color-accent);
@@ -202,6 +214,155 @@
 }
 
 @layer components {
+  /* ---------------------------------------------------------------------
+     Bedienelemente.
+
+     Zwei Regeln, beide aus dem Betrieb heraus:
+
+     **Ein Knopf muss vor der Beruehrung als Knopf erkennbar sein.** Deshalb
+     traegt jeder einen Rahmen und eine eigene Grundflaeche, auch der
+     unscheinbarste. Ein Text, der sich erst beim Ueberfahren als Knopf
+     entpuppt, wird nicht gefunden.
+
+     **Und er muss beim Druecken zurueckmelden, dass er getroffen wurde.**
+     Beim Druecken zieht sich der Knopf leicht zusammen und bekommt einen
+     inneren Ring — er wirkt kurz dicker, ohne dass sich die Rahmenbreite
+     wirklich aendert, sonst wuerde das Umfeld springen. Die Rueckmeldung
+     setzt ohne Verzoegerung ein und klingt langsam ab: ein kurzer Klick
+     bliebe sonst unsichtbar. Siehe docs/10-design-system.md.
+     --------------------------------------------------------------------- */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    border: 1px solid var(--color-line);
+    border-radius: var(--radius-control);
+    background-color: var(--color-raised);
+    color: var(--color-text);
+    padding: 0.3rem 0.85rem;
+    font-family: var(--font-condensed);
+    font-size: var(--text-xs);
+    line-height: 1.45;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    /* Abklingen langsam, damit der Druck sichtbar bleibt. */
+    transition:
+      background-color 240ms ease-out,
+      border-color 240ms ease-out,
+      color 240ms ease-out,
+      transform 240ms ease-out,
+      box-shadow 240ms ease-out;
+  }
+
+  .btn:hover:not(:disabled):not([aria-disabled='true']) {
+    background-color: var(--color-panel);
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+    transition-duration: 90ms;
+  }
+
+  .btn:active:not(:disabled):not([aria-disabled='true']) {
+    transform: scale(0.96);
+    border-color: var(--color-accent);
+    box-shadow: inset 0 0 0 1.5px var(--color-accent);
+    /* Sofort einsetzen, damit auch ein schneller Klick sichtbar wird. */
+    transition-duration: 0ms;
+  }
+
+  .btn:disabled,
+  .btn[aria-disabled='true'] {
+    color: var(--color-text-dim);
+    border-style: dashed;
+    cursor: not-allowed;
+  }
+
+  /* Der Knopf, der die Sache erledigt. Einer je Formular, nie zwei. */
+  .btn-primary {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-raised));
+  }
+
+  /* Fuer dichte Zeilen: Etikettenleisten, Werkzeuge an einem Eintrag. */
+  .btn-sm {
+    padding: 0.15rem 0.6rem;
+    font-size: var(--text-2xs);
+  }
+
+  /* Ein Knopf, dessen Zustand er selbst ist: Etikett an oder aus,
+     Reaktion gesetzt oder nicht, Reiter offen oder nicht. */
+  .btn[aria-current='page'],
+  .btn[aria-pressed='true'] {
+    background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-raised));
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+  }
+
+  /* Waehrend eine Aktion laeuft. Kein Spinner, nur ein ruhiger Zustand:
+     der Knopf bleibt stehen, wo er ist, und nimmt keine zweite Eingabe an. */
+  .btn[aria-busy='true'] {
+    color: var(--color-text-dim);
+    border-style: dashed;
+    cursor: progress;
+  }
+
+  /* Eingabefelder. Weich gerundet statt voll: ein mehrzeiliges Feld als
+     Pille waere unlesbar. */
+  .field {
+    border: 1px solid var(--color-line);
+    border-radius: var(--radius-field);
+    background-color: var(--color-raised);
+    color: var(--color-text);
+    padding: 0.4rem 0.7rem;
+    font-family: inherit;
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    transition:
+      border-color 120ms ease-out,
+      background-color 120ms ease-out;
+  }
+
+  .field:hover:not(:disabled) {
+    border-color: var(--color-accent);
+  }
+
+  .field:disabled {
+    color: var(--color-text-dim);
+    cursor: not-allowed;
+  }
+
+  /* Einzeilige Felder, die wie ein Knopf aussehen duerfen: Suchbalken,
+     Schnellfilter. */
+  .field-pill {
+    border-radius: var(--radius-control);
+    padding-inline: 0.9rem;
+  }
+
+  select.field {
+    padding-block: 0.35rem;
+  }
+
+  /* Das Profilbild oben rechts und ueberall sonst, wo eine Person auftaucht. */
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    border: 1px solid var(--color-line);
+    border-radius: var(--radius-control);
+    background-color: var(--color-raised);
+    color: var(--color-text-dim);
+    font-family: var(--font-condensed);
+    overflow: hidden;
+    object-fit: cover;
+  }
+
   /* Der eine mutige Moment: die Schwaerzung. Ein massiver Balken mit feiner
      Rahmenlinie, der beim ersten Erscheinen einmal von links nach rechts
      durchwischt. Sonst bewegt sich in der Oberflaeche nichts von selbst. */