/* ===========================================================================
   Anforderungsliste (IRL) — views/irl.ejs
   ---------------------------------------------------------------------------
   Zweck dieser Datei: Die 24 Positionen der Liste sollen mit ihrem Status auf
   EINEN Bildschirm passen (Richtwert 1440 × 900, ohne Scrollen bis Position
   24). Alles hier dient dieser einen Vorgabe — knappe Zeilenhöhe, eine
   Kopfzeile statt vier Karten, Bearbeiten erst auf Klick.

   Ladereihenfolge: Diese Datei kommt in views/partials/head.ejs NACH
   style-room.css. Dort stehen die Regeln der alten, ausgeklappten Fassung
   (Präfix „irl-"). Sie werden hier nicht überschrieben, sondern gar nicht
   berührt: Die neue Tabelle trägt durchgehend das Präfix „irlx-". Zwei
   Dateien, die sich um dieselben Klassennamen streiten, sind ein Ratespiel —
   und die Ladereihenfolge ist nichts, worauf man eine Ansicht stützen sollte.

   Die Spaltenbreiten stehen an genau einer Stelle (--irlx-nr … --irlx-kom).
   Die Kopfzeile ist ein Flexbereich, die Kategorien sind je eine Tabelle mit
   table-layout: fixed. Ohne gemeinsame Werte liefen beide auseinander.

   Betreiber: IHC - Invest in Healthcare GmbH
   =========================================================================== */

.irlx-seite {
  /* Spaltenbreiten der Liste. Summe = 100 %. */
  /* Die Nummernspalte trägt seit dem Aufklapppfeil zwei Zeichen statt einem.
     4 % reichten dafür bei 1280 px nicht mehr — der Pfeil hätte die Nummer
     angeschnitten. Der halbe Prozentpunkt kommt von der Textspalte, die als
     einzige ohnehin gekürzt wird. */
  --irlx-nr: 4.5%;
  --irlx-text: 34%;
  --irlx-prio: 7.5%;
  --irlx-status: 15%;
  --irlx-kom: 19.5%;
  /* „Offene Punkte" — die zweite Textspalte. Der Platz dafür kommt aus der
     Anforderungsspalte (44,5 → 34 %) und je einem Punkt von Status und
     Kommentar. Die Anforderungstexte sind ohnehin die einzigen, die gekürzt
     werden; sie stehen vollständig in der aufgeklappten Zeile und im title. */
  --irlx-offen: 19.5%;
  /* Der obere Abstand ist kleiner als der Standard (32 px): Jeder Pixel über
     der Liste geht der Liste ab. Dieselbe Rechnung steht hinter jeder knappen
     Höhenangabe auf dieser Seite — 24 Zeilen plus vier Abschnittsköpfe plus
     Kopfbereich müssen in 900 Pixel passen, und davon gehen Topbar (64) und
     Pfadanzeige (41) schon ab. */
  margin-top: 12px;
}

/* ---------- Kopfbereich ----------
   Kleiner als anderswo. Die Überschrift ist auf dieser Seite nicht die
   Auskunft, die jemand sucht — der Status ist es. */
.irlx-seite .irlx-kopfbereich { margin-bottom: 10px; align-items: center; }
.irlx-seite .irlx-kopfbereich h1 { font-size: 20px; line-height: 1.25; }
.irlx-seite .irlx-kopfbereich .sub { font-size: 13px; margin-top: 1px; }
.irlx-kopfknoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
/* Meldungen nach einer Handlung („24 Positionen geprüft …") stehen über der
   Liste und schieben sie nach unten. Knapp gesetzt kosten sie eine Zeile
   statt zweier — sonst rutschte Position 24 genau dann unter den Rand, wenn
   man gerade abgeglichen hat. */
.irlx-notice { margin: 0 0 8px; padding: 5px 11px; font-size: 13px; line-height: 1.45; }

/* ===========================================================================
   Die eine Kopfzeile: Fortschritt · Zählung · Filter · Abgleich
   =========================================================================== */
.irlx-leiste {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 7px 14px; margin-bottom: 10px;
  /* Der Spaltenabstand ist knapp bemessen: Fortschritt, Zählung, Filter und
     Abgleich müssen bei 1440 px in EINE Zeile passen, auch wenn der Abgleich
     die Zahl seiner Vorschläge trägt. Eine zweite Zeile kostete 36 Pixel —
     und damit Position 24. */
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  /* position: relative ist die Verankerung für die Abgleichfläche, die sich
     darunterlegt statt die Zeile aufzublähen. */
  position: relative;
}

.irlx-fortschritt { display: flex; align-items: center; gap: 8px; }
.irlx-pv { font-size: 14px; font-weight: 600; color: var(--navy); min-width: 3.2rem; }
.irlx-balken { display: block; width: 92px; height: 7px; border-radius: 4px; }
.irlx-balken .progress-fill { display: block; }

/* Zählung: vier Zahlen mit Zeichen und Beschriftung. Das Zeichen wiederholt
   die Form aus der Tabelle — wer sie einmal gelesen hat, liest sie überall. */
.irlx-zaehl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.irlx-zahl { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
.irlx-zahl b { font-weight: 600; }
.irlx-zahl span { color: var(--slate); }
.irlx-zahl.irlx-gesamt { color: var(--navy); padding-left: 10px; border-left: 1px solid var(--soft); }

/* Filter. Ohne width: auto griffe die allgemeine Regel select { width: 100% }
   aus style.css und machte aus der Filterzeile ein Formular über drei Zeilen. */
/* Kein margin-left: auto am Filter — er nähme den ganzen Restplatz und
   schöbe den Abgleich in eine zweite Zeile. Der Abgleich bekommt ihn, er ist
   das letzte Element der Zeile. */
.irlx-filter { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap; }
.irlx-filter select {
  width: auto; min-width: 7.2rem; max-width: 100%;
  padding: 4px 7px; font-size: 12.5px; height: auto;
}
.irlx-nuroffen { display: inline-flex; align-items: center; gap: 6px; }
.irlx-filter .btn.small { padding: 4px 10px; font-size: 12.5px; }

/* ---------- Abgleich: Aufklappfläche statt Kasten ----------
   Zugeklappt kostet er eine Knopfbreite, aufgeklappt legt er sich über die
   Liste. Ein dauerhafter Kasten stünde vier Zeilen hoch über der Tabelle. */
.irlx-abgleich { position: relative; margin-left: auto; }
.irlx-abgleich > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 12.5px; cursor: pointer; list-style: none;
}
.irlx-abgleich > summary::-webkit-details-marker { display: none; }
.irlx-abz {
  display: inline-block; min-width: 17px; padding: 0 4px; border-radius: 9px;
  background: rgba(255,255,255,.22); font-size: 11.5px; font-weight: 600; text-align: center;
}
.irlx-abpanel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  width: min(560px, 88vw);
  background: #fff; border: 1px solid var(--soft); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px;
}
.irlx-abpanel form { margin: 0; }
.irlx-abtitel { font-size: 14px; margin: 0 0 4px; }
.irlx-abtitel:not(:first-child) { margin-top: 16px; }
.irlx-abpanel p { margin: 0 0 8px; }
.irlx-abzusage { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--soft); }
.irlx-abknoepfe { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
/* Der Satz mit den drei Zahlen darf die Knöpfe nicht vor sich hertreiben:
   Er bekommt die ganze Breite, die Knöpfe stehen darunter in einer Zeile. */
.irlx-abknoepfe > .small:first-child { flex: 1 0 100%; }

/* Das Häkchen „Begründungen als Kommentar übernehmen". Es gehört vor die
   Knöpfe, weil es deren Wirkung ändert — nicht daneben, wo es aussähe wie
   eine dritte Handlung. */
.irlx-abkom { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--navy); cursor: pointer; }
.irlx-abkom input { margin: 0; }

/* Der Fortschritt des laufenden KI-Abgleichs. Steht unter seinem Knopf und
   wird von public/app-irl.js gefüllt; ohne Javascript bleibt er verborgen. */
.irlx-lauf {
  margin: 8px 0 0; padding: 7px 11px; border-radius: 6px;
  background: var(--bg); color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.irlx-lauf.fehler { background: var(--rose-bg); color: var(--red); }
.irlx-lauf[hidden] { display: none; }

/* ===========================================================================
   Die Liste
   =========================================================================== */
.irlx-liste { padding: 4px 14px 8px; margin-bottom: 14px; }

/* Eine Spaltenüberschrift für die ganze Liste. Sie liegt außerhalb der
   Tabellen und hält deren Breiten über dieselben Werte ein. */
.irlx-spaltenkopf {
  display: flex; align-items: center;
  padding: 3px 0 4px; border-bottom: 1px solid var(--soft);
  font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--slate);
}
.irlx-spaltenkopf > span { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irlx-spaltenkopf .irlx-c-nr { flex: 0 0 var(--irlx-nr); }
.irlx-spaltenkopf .irlx-c-text { flex: 0 0 var(--irlx-text); }
.irlx-spaltenkopf .irlx-c-prio { flex: 0 0 var(--irlx-prio); }
.irlx-spaltenkopf .irlx-c-status { flex: 0 0 var(--irlx-status); }
.irlx-spaltenkopf .irlx-c-kom { flex: 0 0 var(--irlx-kom); }
.irlx-spaltenkopf .irlx-c-offen { flex: 0 0 var(--irlx-offen); }

/* ---------- Kategorie als Abschnitt ---------- */
.irlx-kat { border-bottom: 1px solid var(--soft); }
.irlx-kat:last-child { border-bottom: 0; }
.irlx-kat-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 3px 6px; cursor: pointer; list-style: none;
  font-size: 12.5px; line-height: 1.3;
}
.irlx-kat-kopf::-webkit-details-marker { display: none; }
.irlx-kat-kopf:hover { background: var(--bg); }
.irlx-kat-pfeil { display: inline-flex; color: var(--slate); transition: transform .15s; }
.irlx-kat[open] > .irlx-kat-kopf .irlx-kat-pfeil { transform: rotate(90deg); }
.irlx-kat-name { font-weight: 600; color: var(--navy); }
.irlx-kat-zahl { color: var(--slate); }
.irlx-kat-offen { display: inline-flex; align-items: center; gap: 4px; color: var(--red); }
/* Die Angabe steht auch bei null im Markup, damit sie ohne Seitenwechsel
   wieder auftauchen kann. „display: inline-flex" schlüge das [hidden] des
   Browsers, deshalb hier ausdrücklich. */
.irlx-kat-offen[hidden] { display: none; }
.irlx-kat-gefiltert { color: var(--slate); font-style: italic; }

/* ---------- Die Tabelle ----------
   table-layout: fixed ist die Voraussetzung dafür, dass ein langer
   Anforderungstext die Spalte NICHT breiter macht, sondern abgeschnitten
   wird. Ohne sie bestimmte der längste Text die Breite und die Tabelle liefe
   über den rechten Rand. */
.irlx-tab { width: 100%; table-layout: fixed; border-collapse: collapse; }
.irlx-tab td { padding: 0 6px; vertical-align: middle; }

.irlx-pos { border-top: 1px solid var(--bg); }
.irlx-pos > td {
  height: 21px; font-size: 13px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Nur die beiden langen Textspalten bekommen die Kürzung. Ein pauschales
   „.irlx-pos > td > span" träfe auch die Statusmarke und den Vorschlagspfeil
   daneben: Als Blockelemente stünden sie untereinander, die Zeile wüchse von
   22 auf 36 Pixel, und mit Vorschlägen passte die Liste nicht mehr auf einen
   Bildschirm — genau in dem Zustand, in dem man sie am dringendsten braucht. */
.irlx-pos > .irlx-c-text > span,
.irlx-pos > .irlx-c-kom > span,
.irlx-pos > .irlx-c-offen > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irlx-pos:hover { background: var(--bg); }
.irlx-pos.auf { background: #EEF2F7; }

.irlx-tab .irlx-c-nr { width: var(--irlx-nr); color: var(--slate); text-align: right; }
.irlx-tab .irlx-c-text { width: var(--irlx-text); color: var(--ink); }
.irlx-tab .irlx-c-prio { width: var(--irlx-prio); }
.irlx-tab .irlx-c-status { width: var(--irlx-status); }
.irlx-tab .irlx-c-kom { width: var(--irlx-kom); color: var(--slate); font-size: 12.5px; }
/* Offene Punkte tragen etwas mehr Gewicht als der Kommentar: Sie sind das,
   was noch zu tun ist, und sollen sich beim Überfliegen der Liste zeigen. */
.irlx-tab .irlx-c-offen { width: var(--irlx-offen); color: var(--ink); font-size: 12.5px; }

/* Die Nummer ist zugleich der Griff zum Aufklappen. Sie bekommt eine
   Trefferfläche, die auch mit der Maus zu erwischen ist.
   Der Pfeil davor ist dieselbe Auskunft wie am Kategoriekopf: nach rechts
   heißt zu, nach unten heißt auf. Ein eigener Knopf „Schließen" in der
   aufgeklappten Zeile hat dieselbe Aufgabe an anderer Stelle erledigt und
   musste erst gesucht werden. */
.irlx-auf {
  display: inline-flex; align-items: center; gap: 1px;
  padding: 1px 3px; border-radius: 4px;
  color: var(--slate); font-variant-numeric: tabular-nums;
}
.irlx-auf-pfeil { display: inline-flex; flex: 0 0 auto; transition: transform .15s; }
/* Der Zustand hängt an der Zeile (.irlx-pos.auf) und nicht am Pfeil: Ohne
   Javascript setzt der Server dieselbe Klasse, der Pfeil steht damit auf
   beiden Wegen richtig. */
.irlx-pos.auf > .irlx-c-nr .irlx-auf-pfeil { transform: rotate(90deg); }
.irlx-auf:hover { background: var(--navy); color: #fff; }
[data-irl-pos] { cursor: pointer; }

/* ---------- Priorität ----------
   „Hoch" ist die Ausnahme und wird gezeigt; „Medium" ist der Normalfall und
   tritt zurück. Vierundzwanzig gleich laute Marken wären keine Auskunft. */
.irlx-prio { font-size: 11.5px; letter-spacing: .2px; }
/* Nicht fett: „Hoch" steht in mehr als der Hälfte der Zeilen. Fett gesetzt
   nähme es dem Status die Aufmerksamkeit, die ihm zusteht — und der Status ist
   das, was auf dieser Seite gesucht wird. */
.irlx-prio-hoch { color: var(--red); }
.irlx-prio-medium { color: var(--slate); }

/* ---------- Status: Farbe UND Form UND Wort ----------
   Die Farbe allein trüge die Auskunft nicht: Rot-Grün-Schwäche, Graustufen-
   druck und Kontrastmodus lassen sie verschwinden. Deshalb hat jeder Status
   sein eigenes Zeichen (gefüllter Kreis mit Haken · halb gefüllt · leerer
   Kreis · Strich) und seine Beschriftung dazu. */
.irlx-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.irlx-zeichen { flex: 0 0 auto; }
.irlx-stt { overflow: hidden; text-overflow: ellipsis; }
.irlx-offen { color: var(--red); }
.irlx-teilweise { color: #8a5a00; }
.irlx-vorhanden { color: var(--green); }
.irlx-nichtrel { color: var(--grey); }

/* Der Vorschlag des Abgleichs in der Zeile: nur das Zeichen, nicht das Wort.
   Ein zweites vollständiges Etikett machte die Spalte doppelt so breit; der
   Wortlaut steht im title und ausgeschrieben in der aufgeklappten Zeile. */
.irlx-vpfeil { color: var(--line); margin: 0 2px; font-size: 13px; }
.irlx-st-mini { vertical-align: middle; }

/* ===========================================================================
   Die aufklappende Zeile
   =========================================================================== */
.irlx-editzeile > td { padding: 0; background: #F7F9FC; border-top: 1px solid var(--soft); }
.irlx-edit { padding: 12px 14px 14px; }
.irlx-volltext {
  margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--ink);
  overflow-wrap: anywhere;
}
.irlx-meta {
  margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12px; color: var(--slate);
}
.irlx-meta .irlx-ziel { overflow-wrap: anywhere; }
.irlx-meta b { color: var(--navy); font-weight: 600; }

/* ---------- Vorschlag ---------- */
.irlx-vorschlag {
  margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--navy);
  background: #fff; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.irlx-vorschlag.gleich { border-left-color: var(--line); }
.irlx-vkopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.irlx-vkopf form { margin: 0; }
.irlx-vorschlag p { margin: 5px 0 0; overflow-wrap: anywhere; }

/* ---------- Status und Kommentar ---------- */
.irlx-arbeit { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.irlx-statuswahl { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.irlx-swahl { position: relative; margin: 0; }
/* Das Eingabefeld selbst bleibt bedienbar und sichtbar für die Tastatur, wird
   aber von seiner Beschriftung verdeckt. display: none nähme ihm den
   Fokusring und damit die Tastaturbedienung. */
.irlx-swahl input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.irlx-swahl > span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 12.5px; white-space: nowrap;
}
.irlx-swahl input:checked + span { border-color: currentColor; background: var(--bg); font-weight: 600; }
.irlx-swahl input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.irlx-arbeit textarea {
  width: 100%; max-width: 100%; resize: vertical; font-size: 13px; padding: 6px 8px;
}
.irlx-arbeitfuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Zweite Stufe: Wortlaut, Kategorie, Reihenfolge, Löschen ---------- */
.irlx-tiefer { margin-top: 10px; }
.irlx-tiefer > summary { cursor: pointer; font-size: 12.5px; color: var(--slate); width: fit-content; }
.irlx-tiefer > summary:hover { color: var(--navy); }
.irlx-tieferform { margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.irlx-tieferform textarea { width: 100%; resize: vertical; font-size: 13px; padding: 6px 8px; }
.irlx-tieferreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.irlx-tieferreihe select { width: auto; min-width: 8rem; max-width: 100%; font-size: 13px; padding: 5px 8px; }
.irlx-tieferknoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.irlx-tieferknoepfe form { margin: 0; }

.irlx-katleer > td { padding: 8px 6px; font-size: 13px; color: var(--slate); }
.irlx-leerfilter { margin: 10px 6px; }

/* ---------- Anpassen ---------- */
.irlx-anpassen { padding: 14px 20px; }
.irlx-anpassen > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--navy); width: fit-content; }
.irlx-anpassen form { margin: 0; }
.irlx-neu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.irlx-neu > div { min-width: 0; }
.irlx-neu-text { flex: 1 1 22rem; }
.irlx-neu textarea { width: 100%; resize: vertical; }
.irlx-neu label, .irlx-katform label { display: block; margin: 0 0 3px; font-size: 13px; color: var(--slate); }
.irlx-neu > div > select { width: auto; min-width: 10rem; max-width: 100%; }
.irlx-katreihe { display: flex; flex-wrap: wrap; gap: 26px; }
.irlx-katform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0; }
.irlx-katform input, .irlx-katform select { width: auto; min-width: 12rem; max-width: 100%; }

/* ===========================================================================
   Schmalere Bildschirme
   ---------------------------------------------------------------------------
   Eine Tabelle mit fünf Spalten ist bei 390 px unlesbar. Ab 860 px wird
   deshalb aus jeder Zeile ein kleiner Block: Nummer, Text und Status oben, der
   Anforderungstext in voller Länge statt gekürzt, Priorität und Kommentar
   darunter. Die Spaltenüberschrift entfällt — sie stünde über etwas, das nicht
   mehr in Spalten steht.

   Die Grenze liegt bei 860 und nicht bei 760 px: Bei 768 px (Tablet quer)
   blieben für die Statusspalte rund 135 Pixel, und „Nicht relevant“ samt
   Zeichen wurde darin abgeschnitten. Ein abgeschnittener Status ist schlimmer
   als eine gestapelte Zeile.
   =========================================================================== */
@media (max-width: 1100px) {
  /* Sechs Spalten brauchen Breite. Unter 1100 px entfällt „Offene Punkte" —
     als letzte, weil sie für den ÜBERBLICK die entbehrlichste ist; der Text
     steht vollständig in der aufgeklappten Zeile und in der Excel-Ausgabe.
     Die fünf verbleibenden Werte ergeben zusammen 100 %; jeder zusätzliche
     Prozentpunkt schiebt die Tabelle über den rechten Rand — gemessen an
     900 px Fensterbreite, wo 108 % genau 37 Pixel Überlauf ergaben. */
  .irlx-seite {
    --irlx-nr: 7%; --irlx-text: 40%; --irlx-prio: 9%;
    --irlx-status: 19%; --irlx-kom: 25%; --irlx-offen: 0%;
  }
  .irlx-spaltenkopf .irlx-c-offen,
  .irlx-tab .irlx-c-offen { display: none; }
  .irlx-filter { margin-left: 0; }
}

@media (max-width: 860px) {
  .irlx-spaltenkopf { display: none; }
  /* tr ist hier bewusst NICHT aufgeführt: „.irlx-tab tr" wäre spezifischer als
     „.irlx-pos" und machte aus der Zeile wieder einen Block, noch bevor das
     Raster greift. Die Zeilenarten stehen deshalb einzeln da. */
  .irlx-tab, .irlx-tab tbody, .irlx-tab td { display: block; width: auto; }
  .irlx-tab .irlx-editzeile, .irlx-tab .irlx-katleer { display: block; }
  /* Die Spaltenbreiten müssen ausdrücklich zurückgenommen werden. „width: auto"
     an „.irlx-tab td" reicht nicht: „.irlx-tab .irlx-c-status" ist
     spezifischer und behielte seine 19 %. Ein Prozentwert an einem
     Rasterelement in einer auto-Spur ist ein Zirkelschluss — die Spur fiel
     dadurch auf acht Pixel zusammen und der Statustext stand über dem rechten
     Rand. */
  .irlx-tab .irlx-c-nr, .irlx-tab .irlx-c-text, .irlx-tab .irlx-c-prio,
  .irlx-tab .irlx-c-status, .irlx-tab .irlx-c-kom,
  .irlx-tab .irlx-c-offen { width: auto; }
  .irlx-tab .irlx-pos {
    padding: 7px 4px; border-top: 1px solid var(--soft);
    display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 2px 8px;
  }
  .irlx-pos > td {
    height: auto; white-space: normal; overflow: visible;
    padding: 0; font-size: 13.5px;
  }
  .irlx-pos > td > span { white-space: normal; overflow: visible; }
  .irlx-tab .irlx-c-nr { grid-column: 1; grid-row: 1; text-align: left; }
  .irlx-tab .irlx-c-status { grid-column: 3; grid-row: 1; justify-self: end; }
  .irlx-tab .irlx-c-text { grid-column: 2; grid-row: 1; }
  .irlx-tab .irlx-c-prio { grid-column: 2 / -1; grid-row: 2; }
  .irlx-tab .irlx-c-kom { grid-column: 2 / -1; grid-row: 3; }
  .irlx-tab .irlx-c-kom:empty, .irlx-tab .irlx-c-kom span:empty { display: none; }
  /* „Offene Punkte" steht unter dem Kommentar und in der Farbe, die sie in der
     Tabelle trägt — auf einem Telefon ist sie die Zeile, die man sucht. Ohne
     Inhalt entfällt sie ganz, sonst stünde unter jeder Position eine leere
     Zeile. */
  .irlx-tab .irlx-c-offen {
    display: block; grid-column: 2 / -1; grid-row: 4;
    color: var(--navy); font-weight: 500;
  }
  .irlx-tab .irlx-c-offen:empty, .irlx-tab .irlx-c-offen span:empty { display: none; }
  .irlx-editzeile > td { padding: 0; }
  .irlx-leiste { padding: 10px 12px; }
  .irlx-filter { width: 100%; }
  .irlx-filter select { flex: 1 1 7rem; min-width: 0; }
  .irlx-abgleich { width: 100%; }
  .irlx-abgleich > summary { width: 100%; justify-content: center; }
  /* Auf schmalen Geräten ist eine schwebende Fläche fehl am Platz: Sie deckte
     den halben Bildschirm ab. Sie reiht sich hier ein. */
  .irlx-abpanel { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
}

@media (max-width: 560px) {
  .irlx-seite .irlx-kopfbereich h1 { font-size: 19px; }
  .irlx-zahl.irlx-gesamt { padding-left: 0; border-left: 0; }
  .irlx-katreihe { gap: 16px; }
  .irlx-katform input, .irlx-katform select { min-width: 0; width: 100%; }
  .irlx-neu > div, .irlx-neu > div > select { width: 100%; }
  .irlx-tieferreihe select { width: 100%; min-width: 0; }
}

/* ===========================================================================
   Die beiden Textfelder der aufgeklappten Zeile
   ---------------------------------------------------------------------------
   „Kommentar / Erläuterung" und „Offene Punkte" stehen nebeneinander: Sie
   gehören zusammen und werden im Wechsel geschrieben. Untereinander hätten sie
   die aufgeklappte Zeile um eine halbe Bildschirmhöhe wachsen lassen.

   Die Beschriftungen sind sichtbar und nicht nur für Vorleseprogramme: Bei
   EINEM Feld war klar, was hineingehört; bei zweien ist es das nicht.
   =========================================================================== */
.irlx-texte { display: flex; gap: 12px; align-items: flex-start; }
.irlx-textfeld { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.irlx-textfeld > label {
  font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--slate); margin: 0;
}
.irlx-textfeld > textarea { width: 100%; margin: 0; }

/* Schmale Geräte: gestapelt. Zwei Textfelder nebeneinander sind auf einem
   Telefon zwei zu schmale Textfelder. */
@media (max-width: 820px) {
  .irlx-texte { flex-direction: column; gap: 10px; }
}

/* ===========================================================================
   Eingelesene Anforderungslisten Dritter (views/irl.ejs, views/irlimport.ejs)
   ---------------------------------------------------------------------------
   Zurückhaltend gehalten: Die Karte steht über der eigentlichen Liste und darf
   ihr nicht die Aufmerksamkeit nehmen. Auffällig ist hier nur eines — der
   Zustand „ruhend", und der trägt seine Marke selbst.
   =========================================================================== */
.il-listen td { vertical-align: top; }
.il-listen form { margin: 0 0 6px; }
.il-weg { margin-top: 8px; }

.il-upload {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 4px;
}
.il-upload input[type="file"] { max-width: 420px; }

/* Vorschau: Name und Herkunft nebeneinander, solange Platz ist. */
.il-form-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-bottom: 12px;
}
.il-rest { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }
/* Die ruhenden Positionen in der Zählzeile: sichtbar, aber erkennbar nicht
   Teil der Rechnung daneben. Deshalb grau und mit vorangestelltem Plus. */
.irlx-ruhend { color: var(--grey); }