/* ==========================================================================
   DIE WERKAKTE — die zweite Oberfläche
   ==========================================================================

   ALLES HIER HÄNGT AN body.werkakte. Ohne diese Klasse ändert diese Datei
   nichts — die klassische Ansicht sieht aus wie gestern. Das ist die Bedingung,
   unter der ein Umbau dieser Größe vertretbar ist: Der Rückweg muss ein Klick
   sein und kein Deployment (index.html, eine Zeile).

   SIE ERFINDET KEINE ZWEITE GESTALTUNG. Farben, Schrift, Rundungen, Schatten
   kommen aus denselben Größen wie überall (app.css :root). Was sich ändert, ist
   die ANORDNUNG — vier Orte statt fünfundzwanzig Menüpunkte —, und dafür braucht
   es keine zweite Marke. Zwei Gestaltungen in einem Produkt sind zwei Produkte.

   DREI DINGE SIND HIER ANDERS ALS IN DER KLASSISCHEN ANSICHT, und jedes hat
   einen Grund, der nicht Geschmack ist:

     1. DIE SEITENSPALTE IST BREIT UND HAT VIER EINTRÄGE. Vier Ziele, die man
        blind trifft — die Hand geht hin, ohne dass die Augen suchen. Bei
        fünfundzwanzig Einträgen geht das nicht, egal wie gut sie gruppiert sind.

     2. DER ARBEITSPLATZ IST ZWEISPALTIG. Links, was auf dem Tisch liegt, rechts
        das, was man in der Hand hat. Kein Bildschirmwechsel zwischen zwei
        Baustellen: Das ist die eigentliche Ersparnis eines Bürotags.

     3. DIE ANTWORT STEHT GRÖSSER ALS DER TITEL. In einer Trefferliste ist der
        Name die Frage und der Satz darunter die Antwort. Sie kleiner und blasser
        zu setzen als die Frage wäre die übliche Anordnung — und genau falsch.
   ========================================================================== */


/* --- A) Umschalten: genau eine Navigation ist sichtbar --------------------- */

#werk-nav { display: none; }

body.werkakte #sidebar { display: none; }
body.werkakte #werk-nav {
  display: flex;
  flex-direction: column;
  width: 208px;
  flex-shrink: 0;
  background: var(--spalte);
  color: var(--spalte-text);
  padding: 18px 10px 14px;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

#werk-nav .logo {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 0 10px 2px;
  color: #fff;
}
#werk-nav .tenant-name {
  font-size: 0.755rem;
  line-height: 1.35;
  opacity: 0.62;
  padding: 0 10px 22px;
}

/* Ein Ort ist keine Menüzeile. Er ist größer, hat Luft und trägt sein Zeichen
   links — vier davon werden zu vier Stellen im Raum, und danach greift die Hand
   ohne zu lesen. */
#werk-nav .werk-ort {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 12px;
  border-radius: var(--rund-s);
  background: transparent;
  border: none;
  color: var(--spalte-text);
  font-family: var(--schrift);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background .13s ease, color .13s ease;
}
#werk-nav .werk-ort:hover { background: rgba(255, 252, 248, 0.07); color: #fff; }
#werk-nav .werk-ort.aktiv {
  background: rgba(224, 74, 12, 0.19);
  color: #fff;
  font-weight: 650;
}
#werk-nav .werk-ort.aktiv::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primaer);
}
.werk-ikon { width: 20px; text-align: center; opacity: 0.7; font-size: 1.02rem; }
#werk-nav .werk-ort.aktiv .werk-ikon { opacity: 1; }
.werk-wort { flex: 1; }

/* Die Zahl zählt das DRINGENDE, nicht alles. „Achtzig Baustellen" sagt nichts,
   „vier dringend" bewegt jemanden. */
.werk-zahl {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primaer);
  color: #fff;
}
.werk-taste {
  font-family: var(--mono);
  font-size: 0.7rem;
  opacity: 0.45;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 5px;
}

.werk-fuss { margin-top: auto; padding-top: 14px; }
.werk-umschalten {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 252, 248, 0.18);
  color: var(--spalte-text);
  border-radius: var(--rund-s);
  padding: 8px 10px;
  font-family: var(--schrift);
  font-size: 0.8rem;
  opacity: 0.75;
  cursor: pointer;
}
.werk-umschalten:hover { opacity: 1; border-color: rgba(255, 252, 248, 0.4); }

/* Am Handy gibt es die Werkakte nicht — dort gilt der Tagesbildschirm, und der
   ist dafür gebaut. Die Regel steht trotzdem hier: Wer den Browser schmal zieht,
   soll nicht in einer halben Oberfläche landen. */
body.ansicht-mobil.werkakte #werk-nav { display: none; }

/* UND DER MENUEEINTRAG VERSCHWINDET GLEICH MIT. Ein Knopf, der die Oberflaeche
   umschaltet, die es hier gar nicht gibt, waere ein Knopf ins Leere — und der
   Nutzer sucht den Fehler danach bei sich. */
body.ansicht-mobil #werk-anschalten { display: none; }


/* --- B) Die Rückleiste: eine Ebene tiefer, nicht verloren ------------------ */

.werk-rueck {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--primaer-hell);
  color: var(--primaer-tief);
  border: none;
  border-bottom: 1px solid var(--rahmen);
  padding: 9px 22px;
  font-family: var(--schrift);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.werk-rueck:hover { background: #FBE3D4; }


/* --- C) Ort 1: der Arbeitsplatz ------------------------------------------- */

.werk-tageszettel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--sand);
  border-radius: var(--rund-s);
  font-size: 0.86rem;
}
.werk-zettel-titel { font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.7rem; color: var(--gedaempft); }
.werk-zettel-eintrag i { font-style: normal; color: var(--gedaempft); }
.werk-zettel-eintrag.unbesetzt i { color: var(--gefahr); font-weight: 600; }
.werk-zettel-leer { color: var(--gedaempft); }

.werk-zweispalt {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1000px) {
  .werk-zweispalt { grid-template-columns: 1fr; }
}

.werk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.werk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--schrift);
  font-size: 0.82rem;
  color: var(--text-weich);
  cursor: pointer;
}
.werk-chip:hover { border-color: var(--rahmen-stark); }
.werk-chip.aktiv {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  font-weight: 600;
}
.werk-chip-zahl { font-size: 0.72rem; font-weight: 700; opacity: 0.8; }
.werk-chip.aktiv .werk-chip-zahl { opacity: 1; }

.werk-liste { display: flex; flex-direction: column; gap: 6px; }

/* Eine Vorgangszeile trägt DREI Zeilen und in der dritten die Arbeit:
   „fertig, keine Rechnung geschrieben". Der farbige Streifen links ist die
   Dringlichkeit — Farbe UND Position, damit sie auch ohne Farbsehen ankommt
   (die dringenden stehen immer oben). */
.werk-vorgang {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-left: 3px solid var(--rahmen-stark);
  border-radius: var(--rund-s);
  padding: 10px 12px;
  font-family: var(--schrift);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.werk-vorgang:hover { box-shadow: var(--schatten-s); }
.werk-vorgang.gewaehlt {
  border-color: var(--text);
  border-left-color: var(--text);
  box-shadow: var(--schatten-m);
}
.werk-vorgang.stufe-0 { border-left-color: var(--gefahr); }
.werk-vorgang.stufe-1 { border-left-color: var(--warn); }
.werk-vorgang.stufe-2 { border-left-color: var(--rahmen-stark); }

.werk-vorgang-kopf { display: flex; align-items: center; gap: 8px; }
.werk-vorgang-titel {
  flex: 1;
  font-weight: 650;
  font-size: 0.94rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.werk-kuerzel {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--sand);
  color: var(--gedaempft);
  border-radius: 999px;
  padding: 2px 7px;
}
.werk-vorgang-kunde {
  font-size: 0.8rem;
  color: var(--gedaempft);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Der nächste Schritt ist die Botschaft der Zeile — deshalb dunkler und fetter
   als der Kunde darüber, nicht blasser. */
.werk-schritt {
  margin-top: 5px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-weich);
}
.werk-vorgang.stufe-0 .werk-schritt { color: var(--gefahr); }
.werk-vorgang.stufe-1 .werk-schritt { color: var(--warn); }

.werk-spalte-rechts {
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--rund);
  padding: 18px 20px 22px;
  min-height: 320px;
}

.werk-akte-kopf { border-bottom: 1px solid var(--rahmen); padding-bottom: 12px; }
.werk-akte-unter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  font-size: 0.86rem;
  color: var(--gedaempft);
}

.werk-zustaendig {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rahmen);
}
.werk-zustaendig-wahl, .werk-zustaendig-klein {
  font-family: var(--schrift);
  font-size: 0.86rem;
  padding: 4px 8px;
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--rund-s);
  background: var(--flaeche);
}
.werk-zustaendig-klein { font-size: 0.78rem; padding: 2px 4px; }

.werk-mini {
  background: var(--flaeche);
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--rund-s);
  padding: 4px 10px;
  font-family: var(--schrift);
  font-size: 0.78rem;
  color: var(--text-weich);
  cursor: pointer;
}
.werk-mini:hover { border-color: var(--text); color: var(--text); }
.werk-mini.gut { border-color: var(--ok); color: var(--ok); }
.werk-zeilenaktionen { display: inline-flex; gap: 5px; }

.werk-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.werk-fakt {
  background: var(--sand);
  border-radius: var(--rund-s);
  padding: 9px 11px;
}
.werk-fakt.warn { background: var(--warn-blass); }
.werk-fakt.aus { background: var(--gefahr-blass); }
.werk-fakt-titel {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gedaempft);
}
.werk-fakt-wert { font-size: 0.9rem; margin-top: 2px; color: var(--text); }

/* Der stehende Merker ist ein Zettel und sieht auch so aus: Er kommt von einem
   Menschen und nicht aus einer Tabelle. */
.werk-merker {
  border-left: 3px solid var(--warn);
  background: var(--warn-blass);
  border-radius: 0 var(--rund-s) var(--rund-s) 0;
  padding: 9px 12px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}

.werk-verlauf { margin-top: 8px; }
.werk-verlauf-zeile {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rahmen);
  font-size: 0.86rem;
}
.werk-verlauf-tag {
  flex-shrink: 0;
  width: 88px;
  color: var(--gedaempft);
  font-variant-numeric: tabular-nums;
}
.werk-verlauf-text { flex: 1; }
.werk-verlauf-wer { color: var(--gedaempft); font-size: 0.8rem; }

.werk-wege { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }


/* --- D) Ort 2: Geld -------------------------------------------------------- */

.werk-baender {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 2px solid var(--rahmen);
  margin: 14px 0 16px;
}
.werk-band {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 8px 14px;
  font-family: var(--schrift);
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--gedaempft);
  cursor: pointer;
}
.werk-band:hover { color: var(--text); }
.werk-band.aktiv { color: var(--text); border-bottom-color: var(--primaer); font-weight: 700; }

.werk-tabelle-huelle { overflow-x: auto; }
.werk-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  background: var(--flaeche);
  border-radius: var(--rund-s);
  overflow: hidden;
}
.werk-tabelle th {
  text-align: left;
  padding: 8px 11px;
  background: var(--sand);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gedaempft);
  white-space: nowrap;
}
.werk-tabelle td {
  padding: 8px 11px;
  border-top: 1px solid var(--rahmen);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.werk-tabelle tr.warnung td { background: var(--gefahr-blass); }
.werk-tabelle tr.gut td { background: var(--ok-blass); }
.werk-tabelle tr.ruht td { opacity: 0.55; }

.werk-namenszeile {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--schrift);
  font-size: 0.87rem;
  font-weight: 650;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rahmen-stark);
  text-underline-offset: 3px;
  cursor: pointer;
}
.werk-namenszeile:hover { text-decoration-color: var(--primaer); }

.werk-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.werk-kachel {
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--rund-s);
  padding: 13px 15px;
}
.werk-kachel.warn { border-color: var(--gefahr); background: var(--gefahr-blass); }
.werk-kachel.gut { border-color: var(--ok); background: var(--ok-blass); }
.werk-kachel-zahl {
  font-size: 1.32rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.werk-kachel-titel { font-size: 0.78rem; color: var(--gedaempft); margin-top: 2px; }

/* Die Vorschau als Form, nicht als Zahlenkolonne. „Reicht das Geld bis Ende des
   Monats" beantwortet ein Bild schneller als sechsundzwanzig Zahlen. */
.werk-liquiditaet { margin: 6px 0 20px; }
.werk-balken-reihe {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  overflow-x: auto;
  padding-top: 8px;
}
.werk-balken-spalte { flex: 1; min-width: 46px; text-align: center; }
.werk-balken-paar {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  justify-content: center;
  height: 96px;
}
.werk-balken { width: 13px; border-radius: 3px 3px 0 0; min-height: 2px; }
.werk-balken.ein { background: var(--ok); }
.werk-balken.aus { background: var(--primaer); }
.werk-balken-tag {
  font-size: 0.68rem;
  color: var(--gedaempft);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.werk-balken-saldo {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}
.werk-balken-saldo.minus { color: var(--gefahr); }

.werk-aufteilung { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.werk-aufteil-zeile { display: flex; align-items: center; gap: 10px; }
.werk-aufteil-nr {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.84rem;
}
.werk-aufteil-betrag {
  width: 130px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--rund-s);
}
.werk-warnsatz {
  background: var(--warn-blass);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--rund-s) var(--rund-s) 0;
  padding: 8px 11px;
  font-size: 0.87rem;
}

/* Die selbstgebauten Formularfelder (.werk-feld …) sind entfallen: Die zwei
   Dialoge, die sie benutzten, gehen jetzt über formularSchicht wie alle anderen.
   Eine dritte Fassung derselben Sache war der Grund, warum dort Beschriftung und
   Pflichtprüfung fehlten. */


/* --- E) Ort 3: Werkstatt --------------------------------------------------- */

.werk-regale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 16px 0 20px;
}
.werk-regal {
  text-align: left;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--rund-s);
  padding: 12px 14px;
  font-family: var(--schrift);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.werk-regal:hover { box-shadow: var(--schatten-s); }
.werk-regal.aktiv { border-color: var(--text); box-shadow: var(--schatten-m); }
.werk-regal-titel { font-weight: 700; font-size: 0.95rem; }
.werk-regal-unter { font-size: 0.78rem; color: var(--gedaempft); margin-top: 2px; }

/* DER URLAUBSZETTEL. Urlaub ist keine Liste, die man aufsucht — es ist ein
   Zettel, der auf den Tisch gelegt wird. Deshalb sieht er auch so aus: leicht
   gekippt geht zu weit, aber der Papierton und die Kante rechts genügen, damit
   man ihn nicht für eine weitere Tabelle hält. */
.werk-zettel {
  background: #FFFDF7;
  border: 1px solid var(--warn);
  border-left-width: 4px;
  border-radius: 0 var(--rund-s) var(--rund-s) 0;
  padding: 13px 16px;
  margin-bottom: 20px;
  box-shadow: var(--schatten-s);
}
.werk-zettel h3 { margin: 0 0 8px; color: var(--warn); }
.werk-zettel-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--rahmen);
}
.werk-zettel-wer { font-weight: 650; min-width: 140px; }
.werk-zettel-wann { flex: 1; color: var(--gedaempft); font-size: 0.87rem; }

/* DER RECHTE-KASTEN steht abgesetzt und nicht als weitere Zeile im Formular:
   Ein Rollenwechsel nimmt oder gibt Zugriff auf Geld, Personal und Preise und
   beendet die laufende Anmeldung. Eine Auswahl zwischen „Adresse" und
   „Notfallkontakt" wird beim Durchklicken mitgeändert. */
.werk-rechtekasten {
  border: 2px solid var(--text);
  border-radius: var(--rund);
  padding: 14px 16px;
  margin: 16px 0;
  background: var(--sand);
}
.werk-rechtekasten h3 { margin: 0 0 4px; color: var(--text); }
.werk-rollenwahl {
  width: 100%;
  padding: 8px 10px;
  margin: 10px 0;
  font-family: var(--schrift);
  font-size: 0.9rem;
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--rund-s);
  background: var(--flaeche);
}

.werk-verweise { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.werk-verweis {
  text-align: left;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--rund-s);
  padding: 11px 14px;
  font-family: var(--schrift);
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
}
.werk-verweis::after { content: " →"; color: var(--gedaempft); }
.werk-verweis:hover { border-color: var(--text); }


/* --- F) Ort 4: Suchen ------------------------------------------------------ */

.werk-suchkopf { margin-bottom: 12px; }
/* Die Beschriftung steht klein ueber dem Feld statt als aria-label darin:
   Ein Platzhalter verschwindet beim ersten Buchstaben, und danach weiss
   niemand mehr, was in dem Feld steht — genau der Fall, den tests/
   test_beschriftungen.py festhaelt. */
.werk-suchlabel {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gedaempft);
  margin-bottom: 4px;
}
#werk-suchfeld {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--schrift);
  font-size: 1.16rem;
  border: 2px solid var(--rahmen-stark);
  border-radius: var(--rund);
  background: var(--flaeche);
}
#werk-suchfeld:focus {
  outline: none;
  border-color: var(--primaer);
  box-shadow: 0 0 0 4px var(--primaer-hell);
}

.werk-treffer { display: flex; flex-direction: column; gap: 5px; }

.werk-treffer-zeile {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--rund-s);
  padding: 10px 14px;
  font-family: var(--schrift);
  cursor: pointer;
}
.werk-treffer-zeile:hover { border-color: var(--rahmen-stark); box-shadow: var(--schatten-s); }
.werk-treffer-zeile.warnung { border-left: 3px solid var(--gefahr); }
.werk-treffer-zeile.hinweis { border-left: 3px solid var(--warn); }

.werk-treffer-kopf { display: flex; align-items: baseline; gap: 9px; }
.werk-treffer-art {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gedaempft);
  min-width: 76px;
}
.werk-treffer-titel { font-size: 0.93rem; font-weight: 650; color: var(--text-weich); }
.werk-treffer-unter { font-size: 0.8rem; color: var(--gedaempft); margin-left: 85px; }

/* DIE ANTWORT. Sie ist der Grund für den ganzen Bildschirm: „abgeschlossen
   26.02.2026 · Gewährleistung bis 26.02.2031 · 3.480,00 € bezahlt" — der Satz,
   den der Meister in den Hörer liest, ohne etwas geöffnet zu haben.

   Deshalb steht sie GRÖSSER und DUNKLER als der Titel darüber. Die übliche
   Anordnung wäre umgekehrt, und die übliche Anordnung wäre hier falsch: Der
   Name ist die Frage, dieser Satz ist die Antwort. */
.werk-treffer-antwort {
  margin-top: 3px;
  margin-left: 85px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.werk-treffer-zeile.warnung .werk-treffer-antwort { color: var(--gefahr); }

@media (max-width: 700px) {
  .werk-treffer-unter, .werk-treffer-antwort { margin-left: 0; }
  .werk-treffer-kopf { flex-direction: column; gap: 1px; }
}

/* Die Einzelheiten einer Verlaufszeile („Nummer: PP-2026-0001") stehen hinter
   dem Vorgang und nicht darüber: Was passiert ist, liest man zuerst. */
.werk-verlauf-details { color: var(--gedaempft); }

/* --- G) Handeln ------------------------------------------------------------

   Die Handlungen an einer Baustelle stehen NEBENEINANDER und nicht in einem
   Menü: Es sind höchstens fünf, sie sind alle häufig, und ein Menü kostet für
   jede einen zusätzlichen Klick plus die Frage, wo sie steckt.

   Genau eine davon ist hervorgehoben — die, die den Vorgang weiterbringt
   (fertig melden, Abnahme, Rechnung). Wären es drei, wäre keine hervorgehoben. */

.werk-handlungen {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rahmen);
}
.werk-handlung {
  background: var(--flaeche);
  border: 1px solid var(--rahmen-stark);
  border-radius: var(--rund-s);
  padding: 7px 13px;
  font-family: var(--schrift);
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--text-weich);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.werk-handlung:hover { border-color: var(--text); color: var(--text); }
.werk-handlung.stark {
  background: var(--primaer);
  border-color: var(--primaer);
  color: #fff;
  font-weight: 650;
}
.werk-handlung.stark:hover { background: var(--primaer-tief); border-color: var(--primaer-tief); }

/* Anlegen sieht anders aus als Filtern — es tut etwas, statt eine Liste zu
   verengen. Gestrichelt statt gefüllt: Der Platz ist noch leer. */
.werk-chip-neu {
  border-style: dashed;
  border-color: var(--rahmen-stark);
  font-weight: 650;
  color: var(--primaer);
}
.werk-chip-neu:hover { border-style: solid; border-color: var(--primaer); }

/* Die Antwortzeile der Kundenakte — dieselbe Rolle wie in der Trefferliste:
   die Lage in einem Satz, bevor man irgendwo hinsieht. */
.werk-kundensatz {
  margin: 12px 0;
  padding: 9px 13px;
  border-radius: var(--rund-s);
  background: var(--sand);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.werk-kundensatz.warn { background: var(--gefahr-blass); color: var(--gefahr); }

/* Der Mahntext, so wie der Kunde ihn bekommt. Fester Zeichenabstand und
   erhaltene Zeilenumbrüche: Ein Brief, den man in einer Fließtextspalte liest,
   liest sich anders als der, der beim Kunden ankommt. */
.werk-brieftext {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  background: var(--sand);
  border-radius: var(--rund-s);
  padding: 14px 16px;
  max-height: 42vh;
  overflow-y: auto;
}

.werk-verweis-knopf { display: inline-block; text-decoration: none; }
.werk-verlauf-zeile.warnung .werk-verlauf-text { color: var(--gefahr); font-weight: 600; }

/* Die Prüfberechtigung im Rechte-Kasten: eine Zeile mit Häkchen, kein
   Formularfeld. Die ganze Zeile ist anklickbar — bei einem Häkchen ist das die
   natürlichere Form, und sie trifft man auch mit dem Finger. */
.werk-rechte-haken {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0;
  font-size: 0.9rem;
  cursor: pointer;
}
.werk-rechte-haken input { width: auto; }