Bausteine

Seitenleiste mit zehn Typen in vier Gruppen (Personen · Labor · Arbeit · Wissen), darunter Werkzeug. Die Gruppenüberschrift trägt die Ordnung, nicht die Linie. Unter 900px wird die Leiste zur waagerechten Kopfzeile; die Gruppentitel entfallen dort.

Zustände: Navigationspunkt: ruhend · Hover · aria-current="page". Thema: hell · dunkel.

<aside class="leiste">
  <a class="leiste__marke" href="/">…</a>
  <nav class="leiste__gruppe" aria-label="Labor">
    <span class="leiste__titel">Labor</span>
    <a class="navpunkt" href="/proben" aria-current="page">
      <svg class="ikon">…</svg><span>Proben</span><span class="navpunkt__zahl">1 204</span>
    </a>
  </nav>
</aside>

Ein Formular für Suche und Filter. Die große Suche auf der Startseite ist dieselbe Komponente in --gross. Jede Änderung lädt nur die Ergebnisliste nach; die Werte reisen als Formulardaten, nicht als Client-State.

Zustände: Feld: leer · gefüllt · Fokus. Knopf: ruhend · Hover · gewählt (Radio in der Beschriftung).

<form class="filter" id="filter" hx-get="/fragmente/untersuchungen"
      hx-trigger="change, input changed delay:250ms"
      hx-target="#ergebnis" hx-swap="outerHTML">
  <div class="suche suche--klein">
    <svg class="ikon">…</svg>
    <input type="search" name="q" placeholder="Bezeichnung oder Methode">
  </div>
  <div class="filter__gruppe" role="group" aria-label="Prüfstatus">
    <label class="filterknopf">
      <input type="radio" name="pruef" value="" checked><span>alle</span>
    </label>
  </div>
  <div class="filter__rechts"><span class="filter__zahl">95 Leistungen</span></div>
</form>

Ein Zeilenmuster für alle zehn Typen. Drei Varianten decken die neuen Fälle ab: Gruppenkopf für den Leistungskatalog, Tagestrenner für den Notizenstrom, knappe Zeile für lange Kataloge.

Zustände: ruhend · Hover · ungeprüft (Punkt vor dem Titel) · knapp (.zeile--knapp) · Leerzustand statt Liste. Gruppenköpfe kleben beim Scrollen (position: sticky).

<div class="liste" id="ergebnis">
  <div class="gruppenkopf" id="serologie">
    <b>Serologie</b><span class="gruppenkopf__zahl">10</span>
  </div>
  <a class="zeile zeile--knapp" href="/untersuchungen/l-03-001">
    <span class="zeile__haupt">
      <span class="zeile__titel">ELISA Salmonellen</span>
      <span class="zeile__unter">ELISA · Serum, Fleischsaft</span>
    </span>
    <span class="zeile__rechts">
      <span class="leise mono">L-03-001</span><span class="leise">Preis folgt</span>
    </span>
  </a>

  <div class="tagtrenner">Gestern · 19.09.2026</div>
  <a class="zeile zeile--ungeprueft" href="/notizen/n-02218">…
    <span class="schlagworte"><span class="abzeichen">Tierseuchen</span></span>
  </a>
</div>

Prüfstatus, Zustand, Priorität, Schlagwort, Gerätestatus. Nur die drei Status-Token plus neutral und Akzent.

Zustände: neutral (Schlagwort, Version, „geplant") · geprüft (auch „freigegeben", „in Betrieb") · ungeprüft (auch „unbestätigt", „Entwurf") · Fehler (auch „Störung") · Akzent.

<span class="abzeichen abzeichen--geprueft">in Betrieb</span>
<span class="abzeichen abzeichen--ungeprueft">unbestätigt</span>
<span class="abzeichen">Version 4.2</span>

Immer an derselben Stelle: Agent oder Mensch, Quelle als Link, Erstell- und Änderungsdatum. Dazu ID zum Kopieren und die Maschinenansicht. Unverändert aus Iteration 1, gilt für alle zehn Typen.

Zustände: Agent · Mensch · geändert von · nicht geprüft. In der Zeile gekürzt (.herkunft--zeile), am Rand senkrecht gestapelt.

<div class="herkunft">
  <span class="herkunft__teil"><span class="herkunft__wer">Agent</span> · Inventarabgleich</span>
  <span class="herkunft__teil">Quelle: <a href="…">odoo.intern/maintenance/equipment/33</a></span>
  <span class="herkunft__teil">erstellt 04.02.2021</span>
</div>

Der Feldbereich jeder Detailseite. Verknüpfungen stehen als Link im Wert, nicht als eigener Block — so bleibt die Beziehung Tierarzt ↔ Betrieb ↔ Probe eine ruhige Liste und kein Graph.

Zustände: Wert · Wert mit Verknüpfung · Wert unbestätigt · leer. Darunter optional eine Hinweisbox (neutral, warn, akzent).

<dl class="felder">
  <dt>Betreuender Tierarzt</dt>
  <dd class="mit-link"><a href="/tieraerzte/t-00412">Dr. Lena Farwick</a>
    <span class="leise">Tierarztpraxis Seenland</span></dd>
  <dt>Bestandsgröße</dt><dd>48 000 Tiere in 4 Ställen</dd>
</dl>
<div class="hinweis">Autogene Impfstoffe schützen nicht gegen HPAI oder ASP.</div>

Ein Klick, ein Fragment. Die Antwort ersetzt die Komponente durch das Ergebnis.

Zustände: offen (zwei Knöpfe) · bewertet (Ergebnis + zurücknehmen) · mit Zähler („bisher 3 × nützlich") · gesperrt.

<div class="bewertung" id="bewertung-n-02218"
     hx-post="/fragmente/bewertung/n-02218" hx-swap="outerHTML">
  <span class="bewertung__frage">War diese Meldung nützlich?</span>
  <button class="knopf knopf--klein" name="wert" value="ja">nützlich</button>
  <button class="knopf knopf--klein" name="wert" value="nein">nicht nützlich</button>
</div>

Der wichtigste Schreibweg, gleich für alle zehn Typen — und eine Simulation: Der Prompt wird kopiert, außerhalb des Systems beantwortet und das Ergebnis hier eingefügt. Einen direkten Modellaufruf enthält der Entwurf nicht. Die Aufgaben sind intern: Vollständigkeit prüfen, Verknüpfungen vorschlagen, Schlagworte vergeben — nie Text für Kunden oder Einsender. Ein Auswahlfeld kann den Ausschnitt bestimmen, aus dem der Prompt erzeugt wird; bei der SOP der Abschnitt.

Zustände: leer (Hinweis) · prüfend · Fehler (feldgenau, kein Entwurf) · Erfolg (Entwurf angelegt, ansehen oder verwerfen).

<section class="karte prompt">
  <form hx-get="/fragmente/sop/sop-lab-014/prompt" hx-trigger="change"
        hx-target="#prompt-text" hx-swap="outerHTML">
    <select name="abschnitt">…</select>
  </form>
  <pre class="prompt__text" id="prompt-text">…erzeugter Prompt…</pre>
  <form class="prompt__rueck" hx-post="/fragmente/rueckgabe/sop-lab-014"
        hx-target="#rueckgabe-status" hx-swap="outerHTML">
    <textarea name="ergebnis"></textarea>
    <div class="meldung meldung--ok" id="rueckgabe-status">…</div>
    <button class="knopf knopf--haupt">Prüfen und als Entwurf anlegen</button>
  </form>
</section>

Kurze Erfassung mit höchstens fünf Feldern. Validierung je Feld, Erfolg ersetzt das ganze Formular. Knopf und Feld sind Primitive dieser Komponente.

Zustände: Feld: ruhend · Fokus · Fehler (data-zustand="fehler") · Hinweis. Formular: leer · abgeschickt · Erfolg.

<div class="feld" data-zustand="fehler">
  <label for="v-probe">Verknüpfte Probe</label>
  <input id="v-probe" name="probe" aria-invalid="true"
         hx-post="/fragmente/pruefe/probennummer" hx-trigger="change"
         hx-target="#v-probe-fehler" hx-swap="outerHTML">
  <span class="feld__fehler" id="v-probe-fehler">Unbekannte Probennummer.</span>
</div>

Neu in Iteration 2 und die einzige Langtext-Ansicht: die SOP. Nötig, weil MDX-Fließtext mit Überschriften, Listen, Tabellen und Hinweisboxen mit Feldliste und Datenzeile nicht darstellbar ist — beide sind auf kurze Werte ausgelegt. Zweispaltig: Text bis 68 Zeichen, rechts das mitlaufende Inhaltsverzeichnis. Unter 900px wandert das Verzeichnis nach oben.

Zustände: Absatz, Liste, Tabelle, Code, Hinweisbox (neutral · warn · akzent). Verzeichnis: Eintrag · Untereintrag (.tief) · laufend (aria-current="true").

<div class="lesen">
  <article class="lesetext">
    <div class="hinweis hinweis--akzent"><div><b>Diese Fassung gilt.</b> …</div></div>
    <h2 id="ablauf">3 Ablauf</h2>
    <p>…</p>
    <ol><li>Sichtprüfung der Umverpackung</li></ol>
    <table><thead><tr><th>Material</th><th>Lagerung</th></tr></thead>…</table>
  </article>
  <aside class="rand">
    <span class="rand__titel">Inhalt</span>
    <nav aria-label="Inhaltsverzeichnis">
      <a href="#ablauf" aria-current="true">3 Ablauf</a>
      <a class="tief" href="#ablauf-annahme">3.1 Annahme</a>
    </nav>
  </aside>
</div>