/* VitaQM · Dokumentenliste in der Breite halten (Begleitstil zur Auflage)
 *
 * Zwei Formen, eine Regel: Solange alle Spalten nebeneinander lesbar sind,
 * bleibt es eine Tabelle mit festem Raster. Wird der Platz knapp, wird jede
 * Zeile zu einer Karte mit Beschriftung je Feld. Nichts wird ausgeblendet und
 * nichts abgeschnitten — was die Liste zeigt, muss in jeder Fensterbreite
 * lesbar sein, ohne seitlich zu rollen.
 *
 * Welche Form gilt, entscheidet die Auflage nach dem PLATZ im Kasten und
 * schreibt es in `data-vq-form`. Die Fensterbreite allein taugt dafür nicht:
 * ein ausgeklapptes Menü kostet knapp dreihundert Pixel. */

/* ── Tabellenform ─────────────────────────────────────────────────────── */
main table[data-vq-dokliste] {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
}
main table[data-vq-dokliste] th,
main table[data-vq-dokliste] td {
  white-space: normal !important;
  /* `break-word` statt `anywhere`: Umbrochen wird an den Leerzeichen, und ein
     Wort wird nur dann aufgebrochen, wenn es allein nicht in die Zeile passt.
     Mit `anywhere` zerfiel „ISO 15189:2022 8.9" zu „ISO 15189:2 022 8.9" und
     eine Zeile wurde sechshundert Pixel hoch (gemessen 17.09.2026). */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow: visible !important;
  text-overflow: clip !important;
  vertical-align: top;
}
/* Auch die Kopfzeile bricht lieber um, als ein Wort zu verstecken — und zwar
   MITSAMT dem Sortierknopf darin. Ohne die zweite Regel behaelt der Knopf sein
   `nowrap` aus der Anwendung: Der Text laeuft dann ueber die Spaltengrenze und
   legt sich ueber die Nachbarspalte („WIEDERVOR…SAGE FASSUN G", gemessen am
   17.09.2026 bei 1440 px). */
main table[data-vq-dokliste] thead th,
main table[data-vq-dokliste] thead th > *,
main table[data-vq-dokliste] thead .sort-kopf {
  white-space: normal !important;
  line-height: 1.25;
  /* Keine Versalien in den Spaltenkoepfen.
     Nachgemessen am 17.09.2026 bei 1.600 px: In Grossbuchstaben brauchte
     „WIEDERVORLAGE" mehr Platz als die Spalte hatte, und der Umbruch zerlegte
     sie in „WIEDERV ORLAGE"; „KATEGORIE" wurde zu „KATEGORI E", „FREIGEGEBEN"
     zu „FREIGE-GEBEN". Kleinbuchstaben brauchen rund ein Fuenftel weniger
     Breite, und die Silbentrennung greift ueberhaupt erst dann sauber.
     Die Koepfe bleiben durch Fettung und Farbe als solche erkennbar. */
  text-transform: none !important;
  font-variant: normal;
  /* Gar nicht trennen.
     Mit Silbentrennung stand im Kopf „Fas-sung", „Freigege-ben" und
     „Wiedervorl age" (gemessen am 17.09.2026). In Kleinbuchstaben passen alle
     Koepfe in ihre Spalte — sie wurden nur getrennt, weil die Regel es erlaubte.
     Zusammengesetzte Koepfe wie „ISO-Bezug" oder „Dok-ID" brechen weiterhin am
     Bindestrich; das ist ein vorhandenes Trennzeichen, keine Silbentrennung. */
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
  max-width: 100%;
  font-size: var(--fs-meta, 12px);
  letter-spacing: .01em;
}
/* Der Sortierknopf nimmt die volle Spaltenbreite ein und das Pfeilzeichen
   laeuft im Text mit. Als Flex-Zeile nebeneinander blieben fuer das Wort nur
   rund 55 px, und die Trennung zerfiel in „WIE-DER-VOR-LAGE". */
main table[data-vq-dokliste] thead .sort-kopf {
  display: block;
  width: 100%;
  text-align: left;
  padding-right: 0;
}
main table[data-vq-dokliste] thead .sort-pfeil {
  margin-left: 3px;
  white-space: nowrap;
}
/* Dok-ID und andere feste Kennungen: umbrechen statt abschneiden. */
main table[data-vq-dokliste] td.mono {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
main table[data-vq-dokliste] .vq-lenk-zelle,
main table[data-vq-dokliste] .vq-lenk-kopf {
  white-space: normal !important;
}
main table[data-vq-dokliste] .vq-lenk-person {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
/* Kennzeichen (Vordruck, ISO-Kapitel) dürfen in die nächste Zeile. */
main table[data-vq-dokliste] td span,
main table[data-vq-dokliste] td a {
  white-space: normal !important;
}

/* ── Kartenform ────────────────────────────────────────────────────────── */
main table[data-vq-dokliste][data-vq-form="karten"],
main table[data-vq-dokliste][data-vq-form="karten"] tbody,
main table[data-vq-dokliste][data-vq-form="karten"] tr,
main table[data-vq-dokliste][data-vq-form="karten"] td {
  display: block;
  width: auto !important;
}
/* Der Tabellenkopf verschwindet NICHT: In ihm sitzen die Sortierknöpfe. In der
   Kartenform wird er zu einer umbrechenden Reihe von Schaltern über den Karten
   — sonst liesse sich auf schmalen Geräten nicht mehr sortieren. */
main table[data-vq-dokliste][data-vq-form="karten"] thead,
main table[data-vq-dokliste][data-vq-form="karten"] thead tr {
  display: block;
}
main table[data-vq-dokliste][data-vq-form="karten"] thead tr {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 8px;
  border: 0;
}
main table[data-vq-dokliste][data-vq-form="karten"] thead th {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  border: 1px solid var(--line, #e3e9ec) !important;
  border-radius: 999px;
  padding: 0 !important;
  background: var(--panel, #fff) !important;
  overflow: hidden;
}
main table[data-vq-dokliste][data-vq-form="karten"] thead th:first-child {
  display: none;            /* „Auswahl" ist kein Sortierfeld */
}
/* Der Schalter füllt die Pille aus; nicht sortierbare Spalten (die drei aus der
   Lenkungs-Auflage) sehen gleich aus, sind aber nur Beschriftung. */
main table[data-vq-dokliste][data-vq-form="karten"] thead th > * {
  border: 0 !important;
  background: none !important;
  padding: 5px 11px !important;
  white-space: nowrap;
  min-height: 32px;
}
main table[data-vq-dokliste][data-vq-form="karten"] thead th {
  font-size: var(--fs-meta, 12px);
  line-height: 1.4;
  white-space: nowrap;
  padding: 0 !important;
}
main table[data-vq-dokliste][data-vq-form="karten"] thead th:not(:has(button)) {
  padding: 5px 11px !important;
  color: var(--muted, #6b7b86);
}
main table[data-vq-dokliste][data-vq-form="karten"] tbody tr {
  border: 1px solid var(--line, #e3e9ec);
  border-radius: 12px;
  background: var(--panel, #fff);
  padding: 10px 12px;
  margin: 0 0 10px;
}
main table[data-vq-dokliste][data-vq-form="karten"] tbody td {
  border: 0 !important;
  padding: 3px 0 !important;
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: 0;
}
/* Die Beschriftung kommt aus dem Spaltenkopf — eingetragen von der Auflage. */
main table[data-vq-dokliste][data-vq-form="karten"] tbody td[data-vq-spalte]::before {
  content: attr(data-vq-spalte);
  flex: 0 0 116px;
  color: var(--muted, #6b7b86);
  font-size: var(--fs-meta, 12px);
  letter-spacing: .03em;
  line-height: 1.5;
}
/* Der Titel ist die Überschrift der Karte und braucht keine Beschriftung. */
main table[data-vq-dokliste][data-vq-form="karten"] tbody td[data-vq-spalte="TITEL"] {
  font-weight: 700;
  font-size: var(--fs-card-title, 15px);
  padding-bottom: 4px !important;
}
main table[data-vq-dokliste][data-vq-form="karten"] tbody td[data-vq-spalte="TITEL"]::before {
  content: none;
}
/* Das Auswahlkästchen steht oben rechts in der Karte, nicht als eigene Zeile. */
main table[data-vq-dokliste][data-vq-form="karten"] tbody td:first-child {
  float: right;
  padding: 0 0 0 10px !important;
}

/* Auf dem Telefon ist auch für die Beschriftungsspalte kein Platz: Dort steht
   die Beschriftung über dem Wert. */
@media (max-width: 560px) {
  main table[data-vq-dokliste][data-vq-form="karten"] tbody td {
    display: block;
  }
  main table[data-vq-dokliste][data-vq-form="karten"] tbody td[data-vq-spalte]::before {
    display: block;
    flex: none;
  }
}

/* Der ISO-Bezug auf drei Zeilen deckeln.
   Gemessen am 17.09.2026 (1.600 px): QMH-001 traegt 71 Zeichen Normbezug; in
   der 116 px schmalen Spalte wurden daraus sechs Zeilen und eine 228 px hohe
   Tabellenzeile. Drei Zeilen reichen fuer den Median von 42 Zeichen; der
   vollstaendige Text steht im Hinweis (die Auflage traegt ihn ein) und
   ohnehin in der Dokumentansicht. */
main table[data-vq-dokliste] td[data-vq-spalte="ISO-BEZUG"],
main table[data-vq-dokliste] td[data-vq-spalte="ISO-BEZUG"] > .badge {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
/* In der Kartenform (schmale Fenster) gibt es den Platzmangel nicht --
   dort steht der Bezug vollstaendig. */
@media (max-width: 1100px) {
  main table[data-vq-dokliste] td[data-vq-spalte="ISO-BEZUG"],
  main table[data-vq-dokliste] td[data-vq-spalte="ISO-BEZUG"] > .badge {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
  }
}

/* Kurze Marken brechen nicht mitten im Wort.
   Gemessen am 17.09.2026 bei eingeklapptem Menue: „Zurückgezogen" stand als
   „Zu-rückge-zogen" in drei Zeilen, „Entwurf" als „Ent-wurf", das Datum
   2029-09-10 in zwei Zeilen und „ISO 15189:2022" als „ISO 15189:2 022".
   Alle vier sind kurz genug fuer ihre Spalte — sie wurden nur getrennt, weil
   die Regel fuer lange Titel auch fuer sie galt. */
main table[data-vq-dokliste] tbody .badge,
main table[data-vq-dokliste] tbody td[data-vq-spalte="WIEDERVORLAGE"],
main table[data-vq-dokliste] tbody td[data-vq-spalte="FASSUNG"],
main table[data-vq-dokliste] tbody td[data-vq-spalte="DOK-ID"] {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}
/* „Zurückgezogen" ist dreizehn Zeichen lang und passt in 108 px nicht auf eine
   Zeile. Mit `nowrap` lief die Marke in die Nachbarspalte und endete als
   „Zurückgezo…". Sie darf umbrechen — nur nicht mitten im Wort. */
/* Der ISO-Bezug darf umbrechen — aber an den Leerzeichen zwischen den Normen,
   nicht innerhalb einer Normnummer. */
main table[data-vq-dokliste] tbody td[data-vq-spalte="ISO-BEZUG"],
main table[data-vq-dokliste] tbody td[data-vq-spalte="ISO-BEZUG"] .badge {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Der Status darf umbrechen, aber nicht abgeschnitten werden.
   `white-space: nowrap` liess „Zurückgezogen" am Spaltenrand als
   „Zurückgezo…" enden. Zwei Zeilen sind besser als ein halbes Wort. */
main table[data-vq-dokliste] tbody td[data-vq-spalte="STATUS"] .badge,
main table[data-vq-dokliste] tbody td[data-vq-spalte="STATUS"] > * {
  white-space: normal !important;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1.25;
}

/* Der ISO-Bezug ist eine Nebenangabe und soll nicht wie eine Marke aussehen.
   Gesehen am 17.09.2026 bei 2.542 px: Er stand als blau hinterlegter Kasten
   über drei Zeilen in jeder Zeile der Liste und bestimmte deren Höhe — 75 px
   je Zeile, bei zehn Zeilen eine dreiviertel Bildschirmhöhe für eine Angabe,
   die man selten braucht. Er bleibt vollständig lesbar (drei Zeilen, Rest im
   Hinweis), sieht aber wieder aus wie Text. */
main table[data-vq-dokliste] tbody td[data-vq-spalte="ISO-BEZUG"] .badge {
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  padding: 0 !important;
  font-weight: 400 !important;
  font-size: var(--fs-meta, 12px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* „Altbestand" und „nicht hinterlegt" sind Hinweise, keine Warnungen.
   Als gelb hinterlegter Block über die halbe Spalte las sich der Altbestand
   wie ein Fehler — er ist aber der Normalfall bei übernommenen Dokumenten. */
/* Die Klasse sitzt an der ZELLE, nicht an einem Kind darin — der erste
   Anlauf griff deshalb ins Leere und der gelbe Block blieb stehen. */
main table[data-vq-dokliste] tbody td.vq-lenk-alt,
main table[data-vq-dokliste] tbody td.vq-lenk-leer {
  background: transparent !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  padding: 0 !important;
}
/* Kennung und Datum brechen nie. Sie sind kurz genug — sie brachen nur, weil
   die Spalte zu schmal war. */
main table[data-vq-dokliste] tbody td[data-vq-spalte="DOK-ID"],
main table[data-vq-dokliste] tbody td[data-vq-spalte="WIEDERVORLAGE"] {
  white-space: nowrap;
}
/* Ruhigere Zeilen: weniger Höhe, klare Trennung. */
main table[data-vq-dokliste] tbody td { padding-top: 7px; padding-bottom: 7px; }

/* „Altbestand" bleibt erkennbar, aber als Wort statt als Farbfläche:
   ein kleiner Punkt davor genügt. Die Erklärung steht im Hinweis der Zelle. */
main table[data-vq-dokliste] tbody td.vq-lenk-alt::before {
  content: "•";
  color: var(--warn);
  margin-right: 5px;
  font-weight: 700;
}