/* Verleih: Personen, Scan und Positionen.
 *
 * Die aelteren Regeln der Verleihmaske stehen in auftrag.css. Diese Datei
 * laedt templates/layout.php als letzte, damit Aenderungen am Verleih dort
 * nichts an der Auftragsmaske verschieben (Gesamtpruefung 30.09.2026).
 *
 * Sie wird auf JEDER Seite geladen. Jede Regel haengt deshalb an einer Klasse
 * oder Kennung, die nur die Verleihmasken tragen (.verleihleiste, .vl-*,
 * #personen), sonst griffe sie in fremde Masken durch. */

/* --- Weitere Aktionen: ein Satz statt eines Knopfs -------------------------
   Am bezahlten Auftrag steht statt „Auftrag stornieren“ und „Zahlung
   gegenbuchen“, was zu tun ist (C-02, C-32). Gleicher Abstand wie die
   Menuezeilen, sonst klebte der Satz am Rand. */
.verleihleiste .lm-inhalt > .lm-hinweis {
  margin: 0;
  padding: 9px 10px;
  color: var(--schrift-hell);
}

/* =============================================================================
   Personen links, die Gesamtliste rechts (Wunsch des Inhabers vom 01.10.2026)
   =============================================================================
   „Die Button Anfänger fortgeschritten und Profi sind auch viel zu groß im
   verleih und ich würde gerne die gesamt übersicht über das leih material
   doch rechts daneben klein eingeblendet haben, so groß müssen die Felder gar
   nicht sein für die personen die leihen, da ist rechts noch platz.“

   Bis dahin (5746fa4) hatten die Personen die volle Breite: die aktive Karte
   rund 700 px breit, die Stufenknoepfe darin 44 px hoch und je ein Drittel
   der Karte breit, die Gesamtliste hinter „Alle Stücke“ als Einblendung.

   Jetzt zwei Spalten, sobald beides nebeneinander passt: links in fester
   Breite die Personen (eine Zeile je Person, daneben die aktive Karte),
   rechts die Gesamtliste, klebend. Gemessen wird der Inhalt und nicht das
   Fenster: Die Navigation steht seit dem 01.10.2026 ueberall voll da
   (232 px), bei 1280 px bleiben 985 px. Darunter steht die Liste unter den
   Personen. Waagerecht rollt nichts: 37rem + 12 px + 28rem = 922 px passen in
   die Schwelle von 940 px. */
.vl-scanplatz {
  container: vlplatz / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 var(--abstand-3);
}
.vl-scanplatz-links,
.vl-scanplatz-rechts { flex: 1 1 100%; min-width: 0; }

@container vlplatz (min-width: 940px) {
  .vl-scanplatz-links { flex: 0 0 37rem; }
  /* Kopf 46 px, Leiste unten rund 70 px: Was dazwischen passt, zeigt die
     Spalte, der Rest rollt in ihr. */
  .vl-scanplatz-rechts {
    flex: 1 1 0;
    min-width: 28rem;
    position: sticky;
    top: calc(var(--kopfhoehe) + 8px);
    max-height: calc(100vh - var(--kopfhoehe) - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .vl-scanplatz-rechts > #positionen { margin-bottom: 0; }
  /* Die Tabelle rollt mit der Spalte und nicht in einem eigenen Rahmen: zwei
     Rollbalken ineinander findet am Tresen niemand. */
  .vl-scanplatz-rechts .tabellenrahmen { max-height: none; }
  /* Die Karte mit dem Personenrand: 12 statt 16 px Innenrand, die Spalte
     ist fest. */
  .vl-scanplatz #personen { margin-bottom: 0; padding: var(--abstand-3); }
}
/* Auf breiten Bildschirmen bekommt die Karte etwas mehr, die Liste bleibt
   die breitere Spalte. */
@container vlplatz (min-width: 1300px) {
  .vl-scanplatz-links { flex-basis: 42rem; }
}

/* --- Zum Scanfeld (am Handy) ------------------------------------------------ *
   Schwebt unten rechts, solange das Scanfeld nicht im Bild ist (verleih.js).
   Breit steht das Feld ohnehin oben im Bild. */
.vl-zum-scan { display: none; }
@media (max-width: 900px) {
  .vl-zum-scan:not([hidden]):not(.vl-zum-scan-weg) {
    position: fixed;
    right: var(--abstand-4);
    bottom: var(--abstand-4);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-2);
    min-height: 48px;
    padding: var(--abstand-3) var(--abstand-5);
    border-radius: 24px;
    background: var(--gruen);
    color: var(--auf-gruen);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  }
  .vl-zum-scan .sym { width: 20px; height: 20px; color: currentColor; }
  .vl-zum-scan:hover { text-decoration: none; background: var(--gruen-hover); }
}

/* --- Die Summenleiste ------------------------------------------------------ */
.vl-summenleiste {
  position: sticky;
  top: var(--kopfhoehe);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: var(--abstand-3) 0 0;
  padding: 6px 10px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.vl-summenleiste .vs-zahlen { font-variant-numeric: tabular-nums; }

/* --- Personenliste links, aktive Person rechts ----------------------------- *
   Die Zeilen stehen untereinander neben der Karte, sobald #personen breit
   genug ist (Container-Abfrage statt Fensterbreite: die linke Spalte ist
   schmaler als das Fenster). Schmaler stehen sie als Reihe ueber der Karte. */
#personen { container: vlpersonen / inline-size; }
#personen .personen.personen-fokus { display: block; }
#personen .personen-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--abstand-3);
}
/* Der Vorname hat die ganze erste Zeile, Stueckzahl und Preis teilen sich
   die zweite: In der schmalen Spalte (154 px) blieben dem Namen sonst 35 px. */
.pl-eintrag {
  flex: 1 1 12rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "nr name name" "nr stueck preis";
  align-items: center;
  gap: 0 8px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--schrift);
  text-decoration: none;
}
.pl-eintrag:hover { background: var(--flaeche-hover); }
.pl-eintrag:focus-visible { outline: 3px solid var(--fokus, var(--blau)); outline-offset: 2px; }
.pl-eintrag.ist-aktiv {
  border-color: var(--gruen-dunkel);
  box-shadow: 0 0 0 1px var(--gruen-dunkel);
  background: var(--erfolg-flaeche);
}
.pl-nr     { grid-area: nr; font-size: 1.4em; font-weight: 700; line-height: 1; color: var(--schrift-hell); }
.pl-name   { grid-area: name; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-stueck { grid-area: stueck; font-size: 0.85em; color: var(--schrift-hell); white-space: nowrap; }
.pl-preis  { grid-area: preis; font-size: 0.85em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

@container vlpersonen (min-width: 460px) {
  #personen .personen.personen-fokus {
    display: grid;
    grid-template-columns: minmax(9.5rem, 11rem) minmax(0, 1fr);
    gap: var(--abstand-3);
    align-items: start;
  }
  #personen .personen-liste { flex-direction: column; flex-wrap: nowrap; margin-bottom: 0; }
  #personen .personen-liste .pl-eintrag { flex: 0 0 auto; }
}

/* Eine einzelne Person (ohne Personenliste) steht im Scanplatz in einer
   Spalte. Das Raster aus auftrag.css (bis vier Karten nebeneinander) gab ihr
   in der linken Spalte 240 px, die Stufen brachen um, das Namensfeld war
   71 px breit (gemessen bei 1280 px). */
.vl-scanplatz #personen .personen:not(.personen-fokus) { grid-template-columns: minmax(0, 36rem); }

/* `hidden` allein verbirgt nichts: `.person` setzt `display`, und eine
   Klassenregel schlaegt das Merkmal. */
#personen .person[hidden] { display: none; }

/* Die gezeigte Person: Stuecke in Grundschrift. Das Scanfeld behaelt die
   Groesse aus auftrag.css (42 px); 48 px und 17 px Schrift waren mehr, als
   das Feld braucht (Inhaber: „so groß müssen die Felder gar nicht sein“). */
#personen .personen-fokus .person:not([hidden]) .person-stuecke { font-size: 1em; }
#personen .personen-fokus .person:not([hidden]) .person-stuecke li { padding: 4px 0; }

/* --- Alter, Geraet und Stufe als kompakte Schalter (01.10.2026) -----------
   Vorher 44 px hoch und ueber die Kartenbreite gezogen, die Stufen in der
   schmalen Karte untereinander (auftrag.css): drei Knoepfe von zusammen
   144 px Hoehe fuer eine Angabe. Jetzt eine Reihe aneinanderstossender
   Knoepfe in natuerlicher Breite, etwa so hoch wie .btn-klein (26 px).

   Die Hausregel fuer den Finger steht in app.css: Mit der Maus gelten die
   knappen Masse, am Touchschirm (`pointer: coarse`) waechst die
   Trefferflaeche auf 44 px, die Schrift bleibt. Gewaehlt bleibt gruen mit
   Haken (26.09.2026); der Haken steht in der Zeile, weil er in der Ecke
   eines 26 px hohen Knopfs die Schrift traefe. */
#personen .person-wahl { flex-direction: row; flex-wrap: wrap; gap: 6px 12px; }
#personen .person-wahl .st-reihe { flex-direction: row; flex-wrap: wrap; gap: 0; }
#personen .person-wahl .st-reihe-stufe { flex-basis: 100%; }
#personen .person-wahl .st-knopf-flach {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0 0 0 -1px;
  padding: 3px 9px;
  font-size: var(--text-liste);
  line-height: 1.4;
  border-radius: 0;
}
#personen .person-wahl .st-knopf-flach:first-child {
  margin-left: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}
#personen .person-wahl .st-knopf-flach:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
#personen .person-wahl .st-knopf-flach:only-child { border-radius: var(--radius); }
/* Der Rand des gewaehlten und des beruehrten Knopfs liegt ueber dem des
   Nachbarn, sonst fehlte ihm eine Kante. */
#personen .person-wahl .st-knopf-flach:hover,
#personen .person-wahl .st-knopf-flach:focus-visible,
#personen .person-wahl .st-knopf-flach.ist-gewaehlt { z-index: 1; }
#personen .person-wahl .st-knopf-flach.ist-gewaehlt::after {
  position: static;
  margin-left: 5px;
  font-size: 11px;
}
#personen .person-wahl .st-knopf-flach.stufe-gruen::before,
#personen .person-wahl .st-knopf-flach.stufe-gelb::before,
#personen .person-wahl .st-knopf-flach.stufe-rot::before {
  width: 9px;
  height: 9px;
  margin-right: 5px;
  vertical-align: 0;
}

/* „+ Stöcke“ und „+ Boot“ in derselben Groesse, nicht mehr kartenbreit. */
#personen .person-zugaben { flex-wrap: wrap; }
#personen .person-zugaben form { flex: 0 0 auto; }
#personen .person-zugaben .st-knopf-flach {
  width: auto;
  min-height: 0;
  padding: 3px 10px;
  font-size: var(--text-liste);
  line-height: 1.4;
  border-radius: var(--radius);
}

/* Der Vorname braucht nicht die Hoehe des Scanfelds. */
#personen .person-name input { min-height: 30px; padding: 3px 8px; font-size: var(--text-grund); }
#personen .person-name .st-knopf-flach { min-width: 30px; min-height: 30px; }

@media (pointer: coarse) {
  #personen .person-wahl .st-knopf-flach,
  #personen .person-zugaben .st-knopf-flach { min-height: 44px; padding-left: 12px; padding-right: 12px; }
  /* Wie jedes Feld am Touchschirm (app.css): 40 px, 16 px gegen das
     Hineinzoomen von iOS. */
  #personen .person-name input,
  #personen .person-name .st-knopf-flach { min-height: 40px; }
  #personen .person-name input { font-size: 16px; }
}
/* Die Karte ist ein Container (auftrag.css). Mit weniger als 320 px Inhalt
   (im Scanplatz bei 1280 px: 300 px, Telefon 375 px: 276 px) ruecken die
   Knoepfe enger, damit „Profi“ nicht allein in die zweite Zeile faellt
   (gemessen: 288 px Schalter in 276 px Karte). Nach dem Touchblock, damit es
   auch am Touchschirm gilt; die Hoehe bleibt dort. */
@container (max-width: 320px) {
  #personen .person-wahl .st-knopf-flach { padding-left: 6px; padding-right: 6px; }
}

/* --- Der Vorname speichert sich selbst (verleih.js) ------------------------ */
#personen .person-name.pn-auto .pn-knopf { display: none; }
#personen .pn-stand { align-self: center; font-size: 0.75em; color: var(--schrift-hell); white-space: nowrap; }
#personen .pn-stand:empty { display: none; }
#personen .pn-stand[data-stand="fehler"] { color: var(--rot-text); font-weight: 600; white-space: normal; }
#personen .person-name input[aria-invalid="true"] { border-color: var(--rot); }

/* Die Karte der Person, an der die Seite nach dem Scan wieder ankommt, steht
   unter dem klebenden Kopf und der Summenleiste und nicht dahinter. Schmal
   bricht der Kopf um. */
#personen .person,
#personen { scroll-margin-top: calc(var(--kopfhoehe) + 62px); }
.vl-scanplatz ~ #rueckgabe,
.vl-einspaltig ~ #rueckgabe,
.vl-scanplatz-rechts > #positionen { scroll-margin-top: calc(var(--kopfhoehe) + 10px); }
@media (max-width: 900px) {
  #personen,
  .vl-scanplatz ~ #rueckgabe,
  .vl-einspaltig ~ #rueckgabe,
  .vl-scanplatz-rechts > #positionen { scroll-margin-top: 110px; }
  /* Dazu die Summenleiste (rund 50 px), die ueber der Karte klebt. */
  #personen .person { scroll-margin-top: 162px; }
}
@media (max-width: 600px) {
  #personen .person,
  #personen,
  .vl-scanplatz ~ #rueckgabe,
  .vl-einspaltig ~ #rueckgabe,
  .vl-scanplatz-rechts > #positionen { scroll-margin-top: 8px; }
}

/* --- Die aktive Person ------------------------------------------------------
   Genau eine Karte traegt das Scanfeld, in das der Scanner schreibt. Sie
   bekommt den gruenen Rahmen des Scanfelds (app.css: „die eine Stelle, an der
   ein starker Rahmen erlaubt ist“), ihr Feld die Scanlampe. Kompakt: In der
   Karte ist kein Platz fuer den grossen Innenrand der Kassenscanleiste. */
#personen .person-aktiv { border-color: var(--gruen-dunkel); box-shadow: 0 0 0 1px var(--gruen-dunkel); }
#personen .person-scan.vl-scanfeld {
  margin: 0;
  padding: 4px;
  border-width: 2px;
  gap: 0;
}
#personen .person-scan.vl-scanfeld input { font-size: 15px; min-width: 0; }

/* --- Meldung am Feld (C-09) --------------------------------------------------
   Grün oder rot, direkt unter dem Scanfeld. Farbe UND Wort: Die Meldung nennt
   das Stueck oder den Grund. */
.vl-meldungen { display: grid; gap: 4px; }
.vl-meldung {
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--radius);
  border-left: 4px solid var(--linie-stark);
  font-weight: 600;
  line-height: 1.3;
}
.vl-meldung-erfolg  { border-color: var(--gruen-dunkel); background: var(--erfolg-flaeche);  color: var(--erfolg-schrift); }
.vl-meldung-hinweis { border-color: var(--blau);         background: var(--hinweis-flaeche); color: var(--hinweis-schrift); }
.vl-meldung-fehler  { border-color: var(--rot);          background: var(--fehler-flaeche);  color: var(--fehler-schrift); }
#rueckgabe .vl-meldungen { margin-bottom: var(--abstand-3); }

/* --- Das zuletzt gescannte Stueck -------------------------------------------
   Hervorgehoben in der Karte und in der Liste rechts: Wer nach dem Scan
   hinsieht, soll ohne Suchen sehen, was angekommen ist. Die Flaeche bleibt,
   bis zum naechsten Scan; ein Aufblitzen, das vergeht, sieht nur, wer gerade
   hinsah. */
#personen .person-stuecke li.ps-neu {
  background: var(--erfolg-flaeche);
  color: var(--erfolg-schrift);
  font-weight: 600;
  border-radius: var(--radius);
  padding-left: 4px;
  padding-right: 4px;
}
/* `table.liste tbody`: Die Zebrastreifen aus app.css (`tr:nth-child(even)`)
   wiegen schwerer als `tr.vl-neu`; in jeder zweiten Zeile blieb die Flaeche
   sonst weiss. */
.vl-scanplatz-rechts table.liste tbody tr.vl-neu > td,
.vl-einspaltig table.liste tbody tr.vl-neu > td {
  background: var(--erfolg-flaeche);
  color: var(--erfolg-schrift);
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  #personen .person-stuecke li.ps-neu,
  .vl-scanplatz-rechts tr.vl-neu > td,
  .vl-einspaltig tr.vl-neu > td { animation: vl-neu-ein .6s ease-out; }
}
@keyframes vl-neu-ein {
  from { box-shadow: inset 0 0 0 2px var(--gruen); }
  to   { box-shadow: inset 0 0 0 0 transparent; }
}

/* Was mit einem Stueck geschehen ist, in der Karte: zurueck oder nicht. */
#personen .ps-stand {
  margin-left: auto;
  font-size: 0.85em;
  color: var(--schrift-hell);
  white-space: nowrap;
}
#personen .ps-stand-warn { color: var(--rot-text); font-weight: 600; }

/* --- Die Gesamtliste: eine Zeile je Stueck (01.10.2026) --------------------
   Person, Stueck, Groesse, Hausbarcode, Stand, entfernen. Eng gesetzt, damit
   sie bei 1280 px in die rechte Spalte passt (rund 435 px); die Stueckspalte
   nimmt, was bleibt, und bricht um. */
/* `table.liste.vl-kompakt`: auftrag.css setzt `.positionsliste table.liste td`
   auf 3 px 8 px, und eine schwaechere Regel hier kaeme nie an. */
table.liste.vl-kompakt th,
table.liste.vl-kompakt td { padding: 3px 6px; vertical-align: top; }
table.vl-kompakt th { font-size: var(--text-klein); }
table.vl-kompakt td.vl-stueck { width: 100%; min-width: 7em; white-space: normal; }
table.vl-kompakt td.vl-person { color: var(--schrift-hell); }
table.vl-kompakt td.vl-person b { color: var(--schrift); }
/* Der Vorname klein unter der Nummer: daneben brauchte die Spalte 89 px, und
   die Tabelle ragte bei 1280 px 42 px aus ihrem Rahmen. */
table.vl-kompakt .vl-pname {
  display: block;
  max-width: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-klein);
}
table.vl-kompakt td.vl-groesse,
table.vl-kompakt td.vl-zustand { color: var(--schrift-hell); }
/* „zurück beschädigt“ darf umbrechen, sonst nahm der Stand der Stueckspalte
   41 px (gemessen in der Rueckgabe bei 1280 px: 118 statt 77 px). */
table.vl-kompakt td.vl-zustand { white-space: normal; }
table.vl-kompakt td.vl-code { font-size: var(--text-klein); }
table.vl-kompakt td.vl-aktion { padding-left: 2px; padding-right: 4px; text-align: right; }
table.vl-kompakt td.vl-aktion .btn { padding: 0 6px; line-height: 1.6; }
table.vl-kompakt .matknopf { white-space: nowrap; }
/* Wo eine neue Person beginnt, steht eine kraeftigere Linie: Die Liste liest
   sich dann wie Gruppen, ohne eine eigene Zeile je Person. */
table.vl-kompakt tbody tr:not(:first-child):has(> td.vl-person-erste) > td { border-top: 2px solid var(--linie-stark); }

/* „Stufe und Hinweis“: ein Klick auf das Stueck. Der Hinweis steht auf dem
   Vertrag; steht einer da, zeigt die Zeile ihn auch zugeklappt. */
table.vl-kompakt details.vl-mehr > summary { display: block; cursor: pointer; list-style: none; }
table.vl-kompakt details.vl-mehr > summary::-webkit-details-marker { display: none; }
table.vl-kompakt details.vl-mehr > summary:hover .vl-name { text-decoration: underline; }
table.vl-kompakt .vl-mehr-zeichen { margin-left: 4px; color: var(--schrift-hell); font-weight: 700; }
table.vl-kompakt details.vl-mehr[open] .vl-mehr-zeichen { color: var(--gruen-text); }
table.vl-kompakt .vl-hinweis { display: block; font-size: var(--text-klein); font-weight: 400; color: var(--schrift-hell); }
table.vl-kompakt .vl-mehr-inhalt { display: grid; gap: 4px; padding: 4px 0 2px; }
table.vl-kompakt .vl-mehr-inhalt .matstufen,
table.vl-kompakt .vl-einstufen { margin-left: 0; }
table.vl-kompakt .vl-einstufen { display: flex; margin-top: 2px; }
table.vl-kompakt .vl-hinweisfeld {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-klein);
  color: var(--schrift-hell);
}
/* `width: 0` und Grundbreite 0: Sonst traegt das Feld die 150 px aus
   formular.css (`table.liste td input[name^="p_hinweis["]`) in die
   Mindestbreite der Spalte, und die aufgeklappte Zeile schob die Tabelle
   bei 1280 px auf 480 px in einem 420-px-Rahmen (gemessen am 02.10.2026).
   Der Selektor traegt deshalb dasselbe Merkmal und wiegt eine Klasse mehr. */
table.vl-kompakt .vl-hinweisfeld input[name^="p_hinweis["] { flex: 1 1 0; width: 0; min-width: 4em; padding: 2px 5px; }

/* Die Zeile mit den Einstufungsknoepfen gehoert zum Stueck darueber: keine
   Linie dazwischen, dieselbe Flaeche (auch die der neuen Zeile). */
table.vl-kompakt tbody tr:has(+ tr.vl-einstufen-zeile) > td { border-bottom: 0; }
table.vl-kompakt tbody tr.vl-einstufen-zeile > td { padding-top: 0; background: transparent; }
table.vl-kompakt tbody tr:nth-child(even) + tr.vl-einstufen-zeile > td { background: var(--zebra); }
.vl-scanplatz-rechts table.liste tbody tr.vl-neu + tr.vl-einstufen-zeile > td,
.vl-einspaltig table.liste tbody tr.vl-neu + tr.vl-einstufen-zeile > td { background: var(--erfolg-flaeche); }

/* Auf dem Telefon (Liste unter 400 px) ohne Vornamen und mit engeren
   Zellen: Sonst rollte die Tabelle bei 375 px 68 px waagerecht. Die
   Vornamen stehen dort in der Personenreihe darueber. Der Abschnitt bekommt
   an der Liste 8 statt 14 px Innenrand, in jeder Breite. */
.vl-scanplatz-rechts { container: vlliste / inline-size; }
.vl-scanplatz-rechts .fa-koerper { padding: 8px; }
/* Auch untereinander rollt die kurze Liste mit der Seite und nicht in einem
   Rahmen von halber Fensterhoehe: dessen Rollbalken nahm ihr 15 px Breite. */
.tabellenrahmen.vl-liste { max-height: none; }
@container vlliste (max-width: 400px) {
  /* „Hausbarcode“ darf hier am weichen Trennstrich der Vorlage umbrechen: Das
     Wort war die breiteste Zelle der Spalte, und `nowrap` aus app.css liess
     den Trennstrich nie greifen. */
  table.vl-kompakt th { white-space: normal; }
  table.vl-kompakt .vl-pname { display: none; }
  table.vl-kompakt td.vl-stueck { min-width: 0; }
  table.liste.vl-kompakt th,
  table.liste.vl-kompakt td { padding-left: 4px; padding-right: 4px; }
}

/* Am Touchschirm dieselbe Hausregel wie oben: Entfernen und die
   Stufenknoepfe 44 px, und das Stueck ist ueber die ganze Zeilenhoehe zu
   treffen (der Innenrand der Zelle geht an die Aufklappzeile). */
@media (pointer: coarse) {
  table.vl-kompakt td.vl-aktion .btn { min-width: 44px; min-height: 44px; }
  table.vl-kompakt .matknopf { min-height: 44px; }
  table.vl-kompakt td.vl-stueck:has(> details.vl-mehr) { padding-top: 0; padding-bottom: 0; }
  table.vl-kompakt details.vl-mehr > summary { padding: 11px 0; }
}

/* Die volle Liste (Stuecke ohne Person) bleibt nach Person gruppiert (C-10). */
.vl-scanplatz-rechts tr.vl-gruppe > th,
.vl-scanplatz-rechts tr.vl-gruppe > td,
.vl-einspaltig tr.vl-gruppe > th,
.vl-einspaltig tr.vl-gruppe > td {
  background: var(--tabellenkopf);
  font-weight: 700;
  text-align: left;
  border-top: 2px solid var(--linie-stark);
}
.vl-scanplatz-rechts tr.vl-gruppe > td.zahl,
.vl-einspaltig tr.vl-gruppe > td.zahl { text-align: right; }

/* Entfernen direkt an der Person (01.10.2026): der Knopf steht rechts in der
   Zeile, die Zeile bleibt eine Zeile. */
#personen .person-stuecke li { align-items: center; }
#personen .person-stuecke .ps-weg { margin: 0 0 0 auto; }