/* =============================================================================
   EmKater WWS - Arbeitswerteliste

   Zwei Masken zeigen denselben Katalog: /werkstatt/aw zum Nachschlagen und
   der Abschnitt „Arbeitswerte" der Auftragsmaske zum Uebernehmen. Bis zuletzt
   hatte die Auftragsmaske eine eigene, aeltere Fassung davon - neun Spalten,
   ein Auswahlkasten fuer den Bereich, das Schaubild als eigener Block. Wer
   beides an einem Tag benutzte, sah zweimal dieselbe Liste in zwei Gestalten.

   Gemeinsam benutzt werden: .aw-gruppen mit .aw-gruppe (Bereiche als
   Knopfleiste), .aw-radbild (Schaubild am letzten Knopf), table.aw-liste
   samt .aw-plus, .aw-frei, .aw-ohne und .aw-gruppentitel. Alles Uebrige in
   dieser Datei gehoert allein zu /werkstatt/aw; die Auftragsmaske bindet
   auftrag.css zusaetzlich ein und regelt dort Hoehe und Abstaende.

   Die Seite ist ein Nachschlagewerk an der Werkbank, kein Bericht. Wer davor
   steht, weiss, welches Rad vor ihm liegt und woran er arbeitet; er will drei
   Zahlen und keine Erklaerung. Alles ueber der Liste ist deshalb auf zwei
   flache Zeilen gebracht - Kopfzeile, Suche, Gruppenwahl - und die Liste
   bekommt den Rest des Fensters.

   Der Rahmen der Liste ist so hoch wie das Fenster abzueglich dieser Zeilen.
   Gerollt wird damit in der Liste, nicht auf der Seite: die Kopfzeile der
   Tabelle bleibt stehen (formular.css), und Suche und Gruppenwahl bleiben
   unter der Hand. Der Abzug steht als --aw-vorlauf an einer Stelle, damit man
   ihn nachziehen kann, wenn oben eine Zeile dazukommt.

   Farben ausschliesslich ueber die Merkmale aus app.css - keine festen Werte,
   sonst bricht das Dunkelthema. `php bin/kontrast-pruefung.php` prueft nach.
   ============================================================================= */

/* --- Kopfzeile ------------------------------------------------------------ *
   Der Verrechnungssatz stand vorher in einer eigenen Karte (71 px). Er ist
   eine Angabe, kein Abschnitt - also eine Zeile neben der Ueberschrift.      */

.aw-satzzeile { line-height: 1.5; }
.aw-satzzeile strong { color: var(--schrift); font-weight: 700; }
.aw-satzzeile strong[title] { cursor: help; }

.seitenkopf.aw-kopf { margin-bottom: 10px; }

/* .inhalt haelt unten 64 px frei - das ist der Platz fuer die klebende
   Aktionsleiste der Eingabemasken. Diese Seite hat keine; hier ist der
   Streifen nur Fensterhoehe, die der Liste fehlt. Wird ueber :has an genau
   dieser Seite zurueckgeholt, damit app.css unberuehrt bleibt. */
.inhalt:has(> .aw-rahmen) { padding-bottom: 16px; }

/* --- Steuerzeile: Suche und Radausfuehrung -------------------------------- *
   Beide nebeneinander in einer Zeile. Der Block "Radausfuehrung" ist
   zugeklappt so breit wie sein Text; aufgeschlagen nimmt er die ganze Zeile,
   damit die neun Kacheln nebeneinander passen.                               */

.aw-steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
  margin-bottom: 8px;
}

.aw-suche {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 1 1 380px;
  min-width: 0;
}
.aw-suche .feld-suche { flex: 1 1 auto; min-width: 0; }
.aw-suche .feld label { margin-bottom: 1px; }

/* Das Sprungformular traegt nur den in der Vorschlagsliste gewaehlten Code. */
.aw-sprung { display: none; }

.aw-steuerung .aw-rad {
  flex: 0 1 auto;
  margin-bottom: 0;
  max-width: 100%;
}
.aw-steuerung .aw-rad[open] { flex: 1 0 100%; }
.aw-steuerung .aw-rad > summary { padding: 8px 11px; }
.aw-steuerung .aw-rad .fb-kurz { flex: 0 1 auto; }
.aw-steuerung .aw-rad .aktionen { margin-top: 10px; align-items: center; }

/* --- Gruppenleiste -------------------------------------------------------- *
   Die neun Gruppen der ZIV-Liste als Hauptachse. Eine Gruppe gewaehlt, und
   aus 253 Zeilen werden 8 bis 71. Die Spalte "Gruppe" in der Tabelle - die
   denselben Wert ueber rund 28 Zeilen wiederholt hat - entfaellt dafuer.    */

.aw-gruppen {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.aw-gruppe {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--schrift);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
}
.aw-gruppe:hover { background: var(--flaeche-hover); text-decoration: none; }
.aw-gruppe:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Die Gruppennummer ist die Nummer, mit der die Positionsnummern beginnen -
   wer 6500 sucht, sucht in Gruppe 6. Deshalb steht sie vorn. */
.aw-gruppe > b {
  display: inline-grid;
  place-items: center;
  width: 17px; height: 17px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--flaeche-alt);
  color: var(--schrift-hell);
  font-size: 11px;
  font-weight: 700;
}
.aw-gruppe > small {
  padding: 0 5px;
  border-radius: 8px;
  background: var(--flaeche-alt);
  color: var(--schrift-hell);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.aw-gruppe.aktiv {
  background: var(--gruen);
  border-color: var(--gruen-dunkel);
  color: var(--auf-gruen);
}
.aw-gruppe.aktiv > b,
.aw-gruppe.aktiv > small { background: var(--auf-gruen); color: var(--gruen); }

/* Gruppe ohne Treffer der laufenden Suche: sichtbar, aber nicht anklickbar.
   Sie verschwinden zu lassen, wuerde die Leiste bei jedem Tastendruck
   umspringen lassen. */
.aw-gruppe.leer {
  border-style: dashed;
  border-color: var(--linie);
  background: var(--flaeche-alt);
  color: var(--deaktiviert-schrift);
  cursor: default;
}
.aw-gruppe.leer > b,
.aw-gruppe.leer > small { background: var(--deaktiviert-flaeche); color: var(--deaktiviert-schrift); }

.aw-gruppe-alle { font-weight: 700; }

/* --- Schaubild des Rades --------------------------------------------------- *
   Wer nicht weiss, in welcher Gruppe die Sattelstuetze steckt, tippt sie am
   Rad an. Es haengt als letzter Knopf an der Gruppenleiste und ist zu -
   aufgeschlagen kostet das Bild rund 250 px, und die gehoeren der Liste.     */

.aw-radbild { flex: 0 0 auto; }
.aw-radbild > summary { list-style: none; }
.aw-radbild > summary::-webkit-details-marker { display: none; }
.aw-radbild[open] { flex: 1 0 100%; }
.aw-radbild[open] > summary { margin-bottom: 8px; }

.aw-gruppe-bild::after {
  content: "";
  width: 5px; height: 5px;
  margin-left: 1px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}
.aw-radbild[open] .aw-gruppe-bild::after { transform: rotate(-135deg) translate(-1px, -1px); }

.aw-radbild-koerper {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-alt);
  padding: 10px 10px 6px;
}
/* Kleiner als in der Auftragsmaske (560 px): dort ist das Rad der
   Arbeitsbereich, hier nur der Weg zur Gruppe. */
.aw-radbild-koerper .radgrafik { max-width: 440px; }

/* --- Die Liste ------------------------------------------------------------ *
   Neun Spalten waren fuenf Zahlen, die dasselbe aus fuenf Blickwinkeln
   sagen. Uebrig bleiben: Nummer, Arbeit, AW, Dauer, Preis. Grundwert und
   Mehraufwand stehen nur noch dort, wo ueberhaupt ein Zuschlag anfaellt -
   dann als "+0,50" hinter dem Gesamtwert, mit der Rechnung in der
   Sprechblase. Die Gruppe ist die Achse der Seite und keine Spalte mehr.    */

.aw-rahmen {
  --aw-vorlauf: 352px;
  --listenhoehe: calc(100vh - var(--aw-vorlauf));
  min-height: 180px;
  margin-bottom: 8px;
}

table.aw-liste { font-size: 13px; }

/* Dichter als die Standardliste: 6 px Polster und die Zeilenhoehe des
   Fliesstextes ergaben 32 px hohe Zeilen. Eine Tabellenzeile ist aber kein
   Fliesstext - sie ist einzeilig, und der Zeilendurchschuss wirkt hier nur
   als Luft. 3 px Polster und 1,35 ergeben 24 px, also ein Drittel mehr
   Liste im selben Fenster, ohne die Schrift zu verkleinern.
   Auf Fingerbedienung wird weiter unten wieder aufgemacht. */
table.aw-liste th,
table.aw-liste td { padding: 3px 9px; line-height: 1.35; }

table.aw-liste thead th {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px;
  letter-spacing: .01em;
}
table.aw-liste thead th abbr { text-decoration: none; }

/* Spalten ueber ihre Stellung, nicht ueber Klassennamen an jeder Zelle -
   das spart bei 253 Zeilen rund 14 kB Auszeichnung, die nichts aussagt.
   1 Nr. · 2 Arbeit · 3 AW · 4 Dauer · 5 Preis                              */

table.aw-liste td:nth-child(1) {
  width: 1%;
  font-family: var(--mono);
  color: var(--schrift-hell);
}
table.aw-liste td:nth-child(2) { white-space: normal; }
table.aw-liste th:nth-child(n+3),
table.aw-liste td:nth-child(n+3) {
  width: 1%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.aw-liste td:nth-child(3) strong { font-size: 13.5px; }

/* Die Dauer ist die Kontrollzahl neben dem Arbeitswert, nicht die Aussage -
   sie steht klein daneben. */
table.aw-liste td:nth-child(4) { color: var(--schrift-hell); font-size: 12px; }
table.aw-liste td:nth-child(5) { font-weight: 600; }

/* Die Leerzeile der Trefferliste spannt ueber alle Spalten und darf die
   Spaltenregeln nicht erben. */
table.aw-liste td.leer {
  width: auto;
  font-family: var(--schriftfamilie);
  text-align: center;
  color: var(--schrift-hell);
}

/* Zuschlag fuer Lastenrad oder Motor. Steht in derselben Zelle wie der
   Gesamtwert, damit klar ist, dass er darin schon steckt. */
table.aw-liste td:nth-child(3) small,
.aw-plus {
  display: inline-block;
  margin-left: 3px;
  padding: 0 4px;
  border-radius: 7px;
  background: var(--erfolg-flaeche);
  color: var(--erfolg-schrift);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: help;
}

/* Position, fuer die die Liste bei dieser Radausfuehrung keinen Wert nennt.
   Vorher war die ganze Zeile durchgestrichen - das las sich wie "storniert".
   Jetzt steht da, was gilt: nach Aufwand. */
.aw-frei {
  display: inline-block;
  padding: 0 6px;
  border: 1px dashed var(--linie-stark);
  border-radius: 8px;
  color: var(--schrift-hell);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}
/* Die Zeile bleibt lesbar, tritt aber zurueck - sie kostet den Mechaniker
   ein Gespraech, keine Nachschlagearbeit. */
table.aw-liste tr.aw-ohne > td { color: var(--schrift-hell); }

/* Hinweiszeichen der Liste ("[1]", "[Verb]"). Mehrere Zeichen stehen als
   mehrere Marken nebeneinander, jede mit ihrer Bedeutung in der
   Sprechblase; die volle Legende steht unter "Erlaeuterungen zur Liste".
   Traeger ist <i> ohne Klasse - dasselbe Sparargument wie bei den Spalten. */
table.aw-liste td:nth-child(2) i {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--flaeche-alt);
  border: 1px solid var(--linie);
  color: var(--schrift-hell);
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  white-space: nowrap;
  cursor: help;
}

/* --- Zwischentitel je Gruppe ----------------------------------------------- *
   Ohne Gruppenwahl stehen alle 253 Positionen in der Liste. Statt den
   Gruppennamen in jede der 28 Zeilen zu schreiben, steht er einmal darueber.

   Kleben bleibt er bewusst nicht: `position: sticky` an einer Tabellenzelle
   rechnet gegen die Tabelle, nicht gegen ihren Abschnitt. Alle neun Titel
   haetten sich an derselben Stelle uebereinandergelegt (in Chrome nachge-
   messen). Ein Titel, der die Gruppe darunter verdeckt, ist schlimmer als
   einer, der wegrollt - zumal die gewaehlte Gruppe ohnehin oben an der
   Gruppenleiste steht.                                                       */

table.aw-liste tr.aw-gruppentitel > th {
  padding: 4px 9px;
  background: var(--flaeche-alt);
  color: var(--schrift);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  box-shadow: inset 0 1px 0 var(--linie), inset 0 -1px 0 var(--linie);
}
table.aw-liste tr.aw-gruppentitel > th b {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--gruen);
  color: var(--auf-gruen);
  font-size: 10.5px;
  vertical-align: -3px;
}
table.aw-liste tr.aw-gruppentitel > th small {
  margin-left: 6px;
  color: var(--schrift-hell);
  font-weight: 600;
}
table.aw-liste tr.aw-gruppentitel:hover > th { background: var(--flaeche-alt); }

/* --- Erlaeuterungen -------------------------------------------------------- *
   Erklaerabsatz und Zeichenlegende standen als Absatz und als Karte fest auf
   der Seite (265 px). Beides gehoert zum Nachlesen, nicht zum Arbeiten.      */

.aw-erlaeuterung { margin-bottom: 0; }
.aw-erlaeuterung .fb-kurz { font-family: var(--mono); }
.aw-legende th { white-space: nowrap; padding-right: 16px; }
.aw-legende td { color: var(--schrift-hell); }

/* --- Fenstergroessen ------------------------------------------------------- *
   --aw-vorlauf ist alles, was auf der Seite nicht Liste ist: Kopfzeile der
   Anwendung, Reiterleiste, Seitenkopf, Steuerzeile, Gruppenleiste, der
   zugeklappte Block "Erlaeuterungen" und die Abstaende von .inhalt. Der Wert
   ist gemessen, nicht geschaetzt (1280x800 und 768x1024), mit ein paar Pixeln
   Luft fuer Fingerbedienung. Kommt oben eine Zeile dazu, gehoert er
   nachgezogen - sonst rollt die Seite wieder statt der Liste.                */

/* Tablet: unter 900 px stellt app.css die Navigation ueber den Inhalt statt
   daneben. Diese 380 px sind von hier aus nicht zurueckzuholen. Die Liste
   richtet sich deshalb nach dem Fenster abzueglich der klebenden Kopfzeile:
   einmal an den Anfang der Seite gerollt, und der Arbeitsbereich steht
   vollstaendig da - danach rollt nur noch die Liste. */
@media (max-width: 900px) {
  .aw-rahmen { --aw-vorlauf: 446px; }
  .aw-steuerung { align-items: stretch; }
  .aw-suche { flex: 1 1 100%; }
  .aw-steuerung .aw-rad { flex: 1 0 100%; }
  /* Taktung und Stundensatz sind beide abgeleitete Angaben - die eine steht
     unter "Erlaeuterungen", die andere ergibt sich aus dem AW-Satz daneben.
     Ohne sie bleibt der Seitenkopf auf dem Tablet einzeilig: 40 px, die der
     Liste zugute kommen. */
  .aw-takt, .aw-stunde { display: none; }
}

/* Fingerbedienung: Zeilen und Knoepfe wieder auf Trefferhoehe. Lieber ein
   paar Zeilen weniger als danebengetippt - formular.css macht die
   Eingabefelder aus demselben Grund groesser. Die Hoehe der Seite aendert
   sich dadurch nur um die Gruppenleiste; dafuer ist die Luft im Vorlauf. */
@media (pointer: coarse) {
  table.aw-liste th,
  table.aw-liste td { padding: 6px 9px; }
  .aw-gruppe { padding: 6px 11px; }
}

/* Druckt jemand die Maske, gilt dasselbe wie in der Auftragsmaske: die Liste
   laeuft ueber alle Seiten, und der zugeklappte Abschnitt darf nicht fehlen.
   Das Aufdecken selbst erledigt bereits auftrag.css ueber ::details-content. */
@media print {
  .aw-steuerung, .aw-gruppen { display: none !important; }
  .aw-rahmen { --listenhoehe: none; overflow: visible; }
  table.aw-liste tr.aw-gruppentitel > th { position: static; }
  table.aw-liste thead th { position: static; }
}

/* =============================================================================
   Arbeitswerteblock der Auftragsmaske — .awb
   =============================================================================

   Wofuer: Abschnitt 2 („Arbeitswerte") in templates/auftrag/detail.php. Alles
   hier ist unter `.awb` eingeschlossen und ruehrt /werkstatt/aw nicht an — die
   Katalogseite behaelt ihre Steuerzeile, ihre Gruppenleiste und table.aw-liste
   unveraendert. Gemeinsam benutzt bleiben .aw-gruppen/.aw-gruppe, .aw-radbild
   und .aw-frei; die fuenfspaltige Tabelle benutzt die Auftragsmaske nicht mehr.

   Warum ein anderer Aufbau und nicht nur ein kleinerer
   ----------------------------------------------------
   Der Block war zuletzt ein Werkzeugkasten mit dem Werkzeug obenauf: Suche,
   Radausfuehrung, neun Bereichsknoepfe, dann erst eine Liste. Was der
   Mechaniker wissen will — was habe ich gebucht, was kostet es, wie lange
   dauert es — stand gar nicht darin, sondern erst im naechsten Abschnitt.
   Die Rangfolge ist deshalb umgedreht:

     1  Suche      der Haupteingang, gross und ganz oben. Gesucht wird mit
                   einem Wort, nicht mit einer Gruppennummer.
     2  Rad        eine Zeile, kein Kasten. Sie aendert jeden Preis darunter
                   und muss dastehen — aber sie wird einmal je Auftrag gesetzt.
     3  Gebucht    was am Auftrag haengt, mit laufender Summe in AW, Zeit und
                   Euro. Das ist Inhalt, der Katalog ist nur Werkzeug.
     4  Schnellwahl  die haeufigsten Arbeiten des Betriebs als ein Griff.
     5  Treffer    eine Karte je Arbeit statt einer Zeile in einer Tabelle:
                   grosse Ziele fuer schmutzige Finger am Tablet.
     6  Bereiche   die neun Gruppen und das Schaubild — vollstaendig, aber
                   zuletzt, weil sie der langsamste Weg sind.

   Ruhig heisst hier: eine Schriftfamilie, drei Groessen, Linien statt
   Flaechen. Farbe traegt nur, was ohnehin schon Farbe hat (Primaertaste,
   Marken). Farbwerte kommen ausschliesslich aus app.css, damit das
   Dunkelthema mitlaeuft; `php bin/kontrast-pruefung.php` prueft nach.        */

.awb { display: flex; flex-direction: column; gap: 12px; }

/* --- 1 Suche --------------------------------------------------------------- *
   Kein .suchleiste-Kasten: der Block ist selbst schon eingerahmt, ein zweiter
   Rahmen um das erste Feld macht daraus eine Schachtel in der Schachtel. Das
   Feld traegt die Groesse stattdessen selbst.                                 */

.awb-suche {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
}
.awb-suche .feld-suche { flex: 1 1 320px; min-width: 0; }
.awb-suche .feld-suche input {
  min-height: 44px;
  padding: 9px 12px;
  font-size: 16px;
  border-color: var(--linie-stark);
}
.awb-suche .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Der Umschalter „auch nicht passende" steht in derselben Zeile wie die Suche,
   solange sie reicht, und rutscht darunter, sobald sie es nicht mehr tut. Als
   feste eigene Zeile kostete er 38 px, die er nicht wert ist: gebraucht wird
   er bei 43 von 265 Arbeiten. */
.awb-alle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-height: 32px;
  font-size: 12.5px;
  color: var(--schrift);
  cursor: pointer;
}
.awb-alle input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }
.awb-alle .hinweistext { font-size: 11.5px; }

/* --- 2 Radausfuehrung als Zeile -------------------------------------------- *
   .faltblock bringt Pfeil und Tastaturbedienung mit; der Kasten drumherum
   entfaellt. Uebrig bleibt eine Zeile zwischen zwei Haarlinien — sie sagt,
   was gilt, und laesst sich aufschlagen, um es zu aendern.                    */

.awb .awb-rad,
.awb .awb-bereiche { margin: 0; border: 0; background: none; border-radius: 0; }

.awb .awb-rad > summary,
.awb .awb-bereiche > summary {
  padding: 7px 2px;
  border-top: 1px solid var(--linie-hell);
  border-bottom: 1px solid var(--linie-hell);
  border-radius: 0;
}
.awb .awb-rad[open] > summary,
.awb .awb-bereiche[open] > summary { border-bottom-color: transparent; }
.awb .awb-rad > summary:hover,
.awb .awb-bereiche > summary:hover { background: var(--flaeche-hover); }

/* Das Wort vor der Kurzfassung („Radausführung", „Alle 265 Arbeiten …") -
   es darf nicht mitschrumpfen, wenn die Kurzfassung lang wird. */
.awb-wort { flex: 0 0 auto; }

.awb .awb-rad .fb-koerper,
.awb .awb-bereiche .fb-koerper {
  padding: 9px 2px 10px;
  border-bottom: 1px solid var(--linie-hell);
}
.awb .awb-rad .fb-koerper > .hinweistext { margin: 0 0 10px; }
.awb .awb-rad .aktionen { margin-top: 12px; }

/* --- 3 Gebucht ------------------------------------------------------------- *
   Abschnittsmarken statt Ueberschriften: sie ordnen, ohne mitzureden. Die
   Zahlen darunter sind das Lauteste im Block — sie sind die Antwort auf die
   Frage, mit der der Mechaniker herkommt.                                     */

.awb-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--schrift-hell);
}
.awb-titel > span,
.awb-titel > a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.awb-titel > a { margin-left: auto; }

.awb-summe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 26px;
  margin: 0 0 8px;
}
.awb-summe span {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  color: var(--schrift-hell);
}
.awb-summe b {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--schrift);
  font-variant-numeric: tabular-nums;
}

/* Die gebuchten Zeilen sind ein Auszug, kein Bearbeitungsformular — geaendert
   wird in Abschnitt 3. Deshalb eine Liste und keine Tabelle. Fuenf Zeilen
   passen ohne Rollen hinein; gemessen haben 92 % der Auftraege hoechstens
   fuenf Leistungen (Mittel 2,8). */
.awb-gebuchtliste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 170px;
  overflow-y: auto;
}
.awb-gebuchtliste li {
  display: grid;
  grid-template-columns: 4.2em minmax(0, 1fr) auto auto auto;
  align-items: baseline;
  gap: 2px 12px;
  padding: 4px 0;
  border-top: 1px solid var(--linie-hell);
  font-size: 13px;
}
.awb-gebuchtliste .g-code { font-family: var(--mono); font-size: 12px; color: var(--schrift-hell); }
.awb-gebuchtliste .g-menge,
.awb-gebuchtliste .g-aw { font-size: 12px; color: var(--schrift-hell); font-variant-numeric: tabular-nums; }
.awb-gebuchtliste .g-preis { font-weight: 600; font-variant-numeric: tabular-nums; }

.awb-leer { margin: 0; color: var(--schrift-hell); font-size: 13px; }

/* --- 4 Schnellwahl --------------------------------------------------------- *
   Ein Knopf je Arbeit, zweizeilig: oben das Wort, unten Nummer, AW und Preis.
   Steht erst da, wenn der Controller die gemessenen Haeufigkeiten liefert.    */

.awb-schnellwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.awb-schnellknopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 270px;
  min-height: 46px;
  padding: 6px 12px;
  text-align: left;
}
.awb-schnellknopf .sk-bez { font-size: 13px; font-weight: 600; }
.awb-schnellknopf .sk-zahl {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--schrift-hell);
  font-variant-numeric: tabular-nums;
}

/* --- 5 Treffer als Karten -------------------------------------------------- *
   Eine Tabellenzeile ist 24 px hoch und traegt die einzige Aktion am rechten
   Rand — am Tablet ein Ziel, das man verfehlt, und ein Weg quer ueber den
   Schirm. Die Karte stellt dieselben Angaben in drei Bloecken nebeneinander:
   links das Wort, in der Mitte die Zahlen, rechts Menge und Uebernahme.
   Die Liste rollt in sich, damit die Maske darunter erreichbar bleibt.        */

/* Die Trefferliste rollt in sich, damit Material und Abschluss darunter
   erreichbar bleiben. 48vh sind rund sechs Karten - eine weniger als die alte
   Tabelle Zeilen zeigte, dafuer mit lesbarem Namen und eigener Taste. Die
   Trefferzahl steht in der Marke darueber, damit erkennbar ist, dass es
   weitergeht. */
.awb-treffer { max-height: 48vh; overflow-y: auto; }

.awb-karten { list-style: none; margin: 0; padding: 0; }

.awb-karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "titel zahlen tat"
    "fuss  zahlen tat";
  align-items: center;
  gap: 1px 16px;
  margin-bottom: 6px;
  padding: 8px 11px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.awb-karte:last-child { margin-bottom: 0; }
.awb-karte:hover,
.awb-karte:focus-within { background: var(--flaeche-hover); border-color: var(--linie-stark); }

.awb-karte .k-titel {
  grid-area: titel;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
}
.awb-karte .k-code { font-family: var(--mono); font-size: 12px; color: var(--schrift-hell); }
.awb-karte .k-bez { font-size: 14px; font-weight: 600; line-height: 1.35; }

.awb-karte .k-fuss {
  grid-area: fuss;
  margin: 0;
  font-size: 11.5px;
  color: var(--schrift-hell);
}

.awb-karte .k-zahlen {
  grid-area: zahlen;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  white-space: nowrap;
}
.awb-karte .k-aw { font-size: 11.5px; color: var(--schrift-hell); }
.awb-karte .k-aw b {
  font-size: 17px;
  font-weight: 700;
  color: var(--schrift);
  font-variant-numeric: tabular-nums;
}
.awb-karte .k-dauer { font-size: 12px; color: var(--schrift-hell); font-variant-numeric: tabular-nums; }
.awb-karte .k-preis { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.awb-karte .k-tat {
  grid-area: tat;
  display: flex;
  align-items: center;
  gap: 6px;
}
.awb-karte .k-tat .e-menge { width: 58px; }

/* Hinweiszeichen der Liste („[1]", „[Verb]") — dieselbe Marke wie in der
   Tabelle auf /werkstatt/aw, nur an einem anderen Traeger. */
.awb-karte .k-bez i {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--flaeche-alt);
  border: 1px solid var(--linie);
  color: var(--schrift-hell);
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 400;
  white-space: nowrap;
  cursor: help;
}

/* Arbeit, die es an diesem Rad nicht gibt (Umschalter „auch nicht passende").
   Sie bleibt lesbar und tritt zurueck — sie kostet ein Gespraech, keine
   Nachschlagearbeit. */
.awb-karte.awb-ohne { background: var(--flaeche-alt); border-style: dashed; }
.awb-karte.awb-ohne .k-bez { color: var(--schrift-hell); }

.awb-gruppentitel {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--schrift);
}
.awb-gruppentitel:first-child { margin-top: 0; }
.awb-gruppentitel > b {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--gruen);
  color: var(--auf-gruen);
  font-size: 10.5px;
  vertical-align: -3px;
}
.awb-gruppentitel > small { margin-left: 6px; color: var(--schrift-hell); font-weight: 600; }

/* --- 6 Bereiche ------------------------------------------------------------ */

.awb .awb-bereiche .aw-gruppen { margin-bottom: 0; }
.awb .awb-bereiche .aw-radbild[open] { margin-top: 4px; }
.awb-fussnote { margin: 8px 0 0; font-size: 11.5px; }

/* --- Tablet ---------------------------------------------------------------- *
   Unter 820 px steht neben dem Wort nicht mehr genug Platz fuer Zahlen UND
   Taste. Die Arbeit bekommt dann die ganze Breite, Zahlen und Uebernahme
   teilen sich die Zeile darunter — die Taste rechts, wo der Daumen liegt.
   Dreifach untereinander waere die Karte 118 px hoch und es passten fuenf ins
   Bild; so sind es 91 px und sieben.                                         */

@media (max-width: 820px) {
  .awb-karte {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "titel  titel"
      "fuss   fuss"
      "zahlen tat";
    align-items: center;
    gap: 6px 12px;
  }
  .awb-karte .k-tat { justify-content: flex-end; }
  .awb-treffer { max-height: 60vh; }
  .awb-summe b { font-size: 20px; }
  .awb-titel > a { margin-left: 0; }
}

/* Telefonbreite: Zahlenzeile und Taste passen nicht mehr nebeneinander. */
@media (max-width: 560px) {
  .awb-karte {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titel" "fuss" "zahlen" "tat";
    align-items: start;
  }
  .awb-schnellknopf { max-width: none; flex: 1 1 100%; }
}

/* Fingerbedienung: Karte, Schnellwahl und die Zeile „Radausfuehrung" auf
   Trefferhoehe. Lieber eine Karte weniger im Bild als danebengetippt. */
@media (pointer: coarse) {
  .awb-karte { padding: 11px; }
  .awb-karte .k-tat .btn { min-height: 40px; }
  .awb-schnellknopf { min-height: 52px; }
  .awb .awb-rad > summary,
  .awb .awb-bereiche > summary { padding-top: 10px; padding-bottom: 10px; }
  .awb-gebuchtliste li { padding: 7px 0; }
}

/* Gedruckt wird der Beleg, nicht das Werkzeug: Suche, Schnellwahl und
   Bereichsliste haben auf Papier nichts verloren. Gebuchtes und Treffer
   laufen ohne Rollbalken ueber die Seiten. */
@media print {
  .awb-suche, .awb-schnell, .awb-bereiche { display: none !important; }
  .awb-treffer, .awb-gebuchtliste { max-height: none; overflow: visible; }
  .awb-karte { break-inside: avoid; }
}