/* ══════════════════════════════════════════════════════════════════════════════
   settings-row.css — CSS des SSOT-Moduls `LoD.SettingsRow`
   (web/js/components/settings/settings-row.js)

   Self-scoped: alle Regeln hängen an `.set-row` / `.set-gruppe` / `.set-info-popup`,
   die das Modul selbst setzt — nie an einer Settings-Hülle. Damit funktioniert die
   Zeile auch in einem Drawer oder einer fremden Fläche (Regel „Modul-CSS ist
   self-scoped", web/CLAUDE.md).

   DIE ENTSCHEIDUNG (2026-07-29, dritter Anlauf und der erste gemessene):
   LABEL-BAHN FEST, CONTROL DIREKT DANEBEN, ÜBERSCHUSS BLEIBT RECHTS LIEGEN.

   Die beiden Vorgänger-Verträge hießen beide „Control an der rechten Kante" und
   haben nur darüber gestritten, WO diese Kante liegt: 700px → volle Breite →
   1100px. Der Vertrag selbst war der Fehler. Im Browser bei 2248px gemessen,
   Bereich „Allgemein":
     · Label-Ende → Feld-Anfang: 543–647px Weiß, und in JEDER Zeile eine andere
       Zahl — die Bahn richtet sich rechts aus, die Labels sind 46–161px lang.
     · Feld-Anfang bei 1078 / 1158 / 1238px: DREI linke Kanten, je nach Feldtyp,
       weil die Control-Bahn aus der Feldbreite gerechnet wurde.
     · Senkrecht ausgerichtet war damit ausschließlich die äußerste rechte Kante.
   Unter 1400px füllt die Zeile ihre Karte, und nichts davon ist zu sehen —
   deshalb hat der Fehler drei Runden überlebt: er zeigt sich nur am großen
   Monitor.

   Jetzt: drei FESTE Bahnen (Label · Control · Aktionen) und KEINE fr-Spur. Was
   übrig bleibt, bleibt rechts liegen, statt die Bahnen auseinanderzuziehen.
   Ergebnis sind drei senkrechte Linien statt einer; die Feldbreite je Typ
   ist für JEDES Feld dieselbe: es füllt seine Bahn (`--set-feld: 100%`). Nur der
   Schalter behält seine Gestalt. Typ-Klassen `.set-row--t-*` bleiben als Lesehilfe
   für Prüfwerkzeuge, vergeben aber keine Breite mehr.

   `--set-label: 240px` ist gemessen, nicht geschätzt: 101 echte Labels über alle
   16 Bereiche ergaben p50 131px · p95 250px · Maximum 313px („Höchstens
   gleichzeitig abwesend (Anteil der Gruppe)"). Sechs Labels brechen damit auf
   zwei Zeilen — lange Sätze lesen sich so ohnehin besser, und eine 320px-Bahn
   für diesen einen Ausreißer hätte allen übrigen Zeilen ~190px Leerlauf
   zwischen Wort und Feld beschert. Die frühere Angabe „das längste Label
   braucht 370px" stand ohne Quelle in dieser Datei und war falsch: kein Label
   erreicht 340px.

   Die Erklärung steht NICHT sichtbar unter dem Label (Wall of Text bei Hunderten
   Settings) und NICHT in einer aufklappenden gestrichelten Kiste (schob das Layout
   auseinander), sondern in einer Hover-Karte am ⓘ — gleiche Optik wie die
   Kennzahl-Legende der Scorecard.
   ══════════════════════════════════════════════════════════════════════════════ */

.set-row,
.set-gruppe {
  /* Natürliche Breite der Zeile: 20 + 12 + 240 + 12 + Control + 12 + 28. Die
     Control-Bahn wächst mit, deshalb ist dies das MASS DER FLÄCHE, nicht eine
     Summe fester Bahnen — bei 760px blieben einem Textfeld 436px (vorher 340px in
     einer 704px-Zeile, und davon gingen 92px an eine leere Einheiten-/Aktions-Bahn
     verloren: „ist auch etwas knapp bemessen der Platz", Kyle 29.07.).
     Der Host deckelt auf diese EINE Zahl, die hier steht und nicht dort.

     ── 1082px seit 2026-07-29 (2) ────────────────────────────────────────────
     Kyle-Vorgabe: „Den Settings bereich so groß machen wie er jetzt grade +
     Menüleiste links an der Seite ist." Die Karte wächst damit von 800 auf
     1116px — und die ZEILE MUSS MITWACHSEN. Sonst entsteht genau der Fehler, den
     die 800px einmal behoben haben, eine Ebene nach innen verschoben: eine 1116px
     breite Karte mit einer 760px-Zeile hätte 340px Weiß INNEN.
     Von drei möglichen Wegen (Zeile wächst · Hilfetext als zweite Spalte · nur die
     Fläche wächst) ist dies der gewählte. Der Preis ist bewusst bezahlt: dem
     Textfeld bleiben jetzt ~758px, deutlich über dem klassischen Lesemaß.

     1082 = 1116 (Karte) − 2×16 (Innenluft) − 2 (Rahmen). Die Beziehung ist
     GEPRÜFT, nicht kommentiert: `settings-breiten-vertrag.js` rechnet beide
     Literale gegeneinander — ohne das driften zwei Zahlen an zwei Orten, und
     sichtbar wird die Drift erst als Weiß in der Karte. */
  --set-mass: 1082px;
}
.set-row {
  /* Bahnen als Variablen: Drawer und Pane erben dieselbe Struktur, und eine
     dichtere Variante ändert EINEN Wert statt zehn Regeln.

     `--set-feld` ist die Breite des EINGABEFELDS, `--set-ctrl` die BAHN, in der
     Feld + Einheit liegen. Die Bahn ist FEST (nicht mehr aus `--set-feld`
     gerechnet): nur so steht die Aktions-Spalte in jeder Zeile an derselben
     Stelle. 412px = breitestes Feld (340) + Abstand (8) + Einheiten-Bahn (64).
     Wer die Bahn direkt überschreibt (Drawer-Container-Queries unten), bekommt
     ein Feld, das über `minmax(0, …)` mitschrumpft. */
  --set-info: 20px;
  --set-label: 240px;
  --set-einheit: 64px;
  --set-aktionen: 28px;
  display: grid;
  /* VIER Bahnen, drei davon fest: ⓘ · Label · Control · Aktionen. Die
     Control-Bahn ist `1fr` und damit die EINZIGE, die mitwächst — das Feld darin
     füllt sie (Textfeld/Auswahl) oder behält seine Typbreite (Schalter, Zahl,
     Uhrzeit). Vorher war die Control-Bahn 412px FEST und enthielt eine immer
     reservierte 64px-Einheiten-Bahn: in einer Zeile ohne Einheit standen dadurch
     rund 110px Weiß zwischen Feldende und Kartenkante, und mit der Label-Slack
     davor las sich das Feld als „mittig in der Karte" (Kyle 29.07.). Im Drawer
     blieben dem Feld davon 118px übrig — Werte wurden abgeschnitten.
     Die Aktions-Bahn bleibt fest und ganz rechts: das Rücksetz-Icon steht damit
     in JEDER Zeile an derselben Stelle. */
  grid-template-columns:
    var(--set-info)
    minmax(0, var(--set-label))
    minmax(0, 1fr)
    var(--set-aktionen);
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2-5) 0;
  position: relative;
  border-radius: var(--radius-sm);
}
.set-row + .set-row { border-top: 1px solid var(--color-border-subtle, var(--lod-gray-100)); }

/* Die natürliche Breite ist auch der DECKEL. Ohne ihn spannt die Hover-Tönung
   über die ganze Karte, während der Inhalt bei 704px endet — und in einer Karte,
   die eine Tabelle trägt (also zu Recht breit ist), liefen die Feldzeilen mit.
   Der Deckel gehört ins MODUL: vorher stand er in einstellungen.css und griff
   nur bei direkten Kindern von `.einst-fields`, weshalb Zeilen in einem
   Panel-Host (Abrechnungsarten) daran vorbeiliefen. */
.set-row:not(.set-row--drawer),
.set-gruppe { max-width: var(--set-mass); }

/* ── Feldbreite: EINE für alle ─────────────────────────────────────────────────
   Jedes Eingabe-Element füllt seine Bahn. Damit haben ALLE Felder einer Fläche
   dieselbe linke UND dieselbe rechte Kante.

   Hier standen vorher sechs Typbreiten (int/zeit/date 150 · tagmonat 220 ·
   string/select 100% · Auswahl-Stufen 260/180) mit der Begründung, ein atomarer
   Wert brauche keinen breiten Kasten. Das ist je Feld einleuchtend und in der
   KARTE falsch: in „Firmendaten" endeten die Felder bei 747 / 571 / 490px — drei
   rechte Kanten in einer Sektion (Kyle 29.07.: „Felder mal so mal so mal so?").
   Ein etwas zu breiter Kasten für „240" kostet nichts; drei Kanten kosten die
   Ruhe der ganzen Fläche.

   Ausnahme ist nur der SCHALTER: er ist kein Kasten, sondern ein Umschalter mit
   eigener Gestalt — ein 436px breiter Schalter wäre keine Einheitlichkeit,
   sondern ein Fehler. Er beginnt an derselben linken Kante wie jedes Feld. */
.set-row { --set-feld: 100%; }
.set-row--t-bool { --set-feld: 44px; }

/* ── KURZFELD-STUFEN — die Bahn gehoert der KARTE, nicht dem Feld ──────────────
   Der Absatz darueber ist richtig und bleibt: drei rechte Kanten in einer Karte
   sind der Fehler („Felder mal so mal so mal so?", Kyle 29.07.). Die Antwort
   darauf war die volle Bahn fuer JEDES Feld — und die kostet dort, wo eine Karte
   ausschliesslich atomare Werte traegt: gemessen 758px Kasten fuer „08:00" in der
   Vorbelegung und fuer „Bayern", waehrend ein Hexwert daneben in 132px stand.
   Also 586px Sprung zwischen zwei Karten derselben Seite (Kyle 30.07.).

   Die Stufe wird deshalb NICHT je Feld gewaehlt, sondern je Karte aus dem, was in
   ihr vorkommt — und ALLE Zeilen der Karte bekommen dieselbe. Damit gilt weiter
   „eine Karte, eine Kante" (die Live-Invariante bleibt unangetastet gruen), und
   eine Karte aus lauter Kurzwerten hoert auf, 600px Weiss zu reservieren.
   In den Firmendaten aendert sich dadurch NICHTS: sie tragen Freitext, also die
   volle Bahn — auch fuer die eine Auswahl darin. Genau das war die 29.07.-Lehre.

   Rangfolge VOLL > MITTEL > KURZ, und die Vorgabe ist VOLL: ein neuer oder
   unbekannter Feldtyp verhaelt sich wie heute, statt still zu schrumpfen.
     lang   = Freitext (`--t-string`) oder eine gestapelte Zeile (Mehrzeiler,
              Rich-Text, `breit: true` — die tragen gar keine Typ-Klasse)
     mittel = Auswahl und Datum (eine Option wie „Mecklenburg-Vorpommern" braucht
              mehr als 160px, ein Datumsfeld traegt Platzhalter + Kalender-Knopf)
     kurz   = Uhrzeit, Zahl, Tag-Monat, Farbe
   Bedingung per `:has()` statt per Klasse vom Renderer: sie steht damit an EINER
   Stelle und kann beim naechsten Feldtyp nicht vergessen werden — dasselbe
   Argument wie bei der Einheiten-Bahn weiter unten. Schalter sind ausgenommen,
   sie haben ihre eigene Gestalt. */
.set-row { --set-feld-kurz: 160px; --set-feld-mittel: 320px; }

.einst-fields:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)) > .set-row:not(.set-row--t-bool),
.setx:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)) > .set-row:not(.set-row--t-bool) {
  --set-feld: var(--set-feld-kurz);
}
.einst-fields:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)):has(.set-row--t-select) > .set-row:not(.set-row--t-bool),
.einst-fields:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)):has(.set-row--t-date) > .set-row:not(.set-row--t-bool),
.setx:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)):has(.set-row--t-select) > .set-row:not(.set-row--t-bool),
.setx:not(:has(.set-row--t-string)):not(:has(.set-row--stapel)):has(.set-row--t-date) > .set-row:not(.set-row--t-bool) {
  --set-feld: var(--set-feld-mittel);
}

/* Hover auf der ganzen Zeile: hebt die getroffene Zeile aus der Liste heraus,
   ohne dauerhafte Tönung (die war als „hässlicher Balken" schon einmal die
   falsche Antwort, siehe unten). Seit die Bahnen fest sind, muss der Hover die
   Zuordnung nicht mehr RETTEN — Label und Feld liegen 12px auseinander. Er
   bleibt trotzdem: bei 18 Zeilen untereinander sagt er, in welcher man ist. */
.set-row:hover { background: var(--color-bg-subtle, var(--lod-gray-50)); }
.set-row--stapel:hover { background: none; }        /* gestapelt gibt es nichts zu verbinden */

/* ── Label-Spalte ─────────────────────────────────────────────────────────── */
/* Das ⓘ bleibt AM LABEL und bekommt keine eigene Spalte (Kyle 29.07.: „Info icon
   direkt am Text … irgendwie durcheinander"). Geprüft und verworfen: eine
   ausgerichtete ⓘ-Bahn am Ende einer festen Label-Spalte. Die Labels sind 50–370px
   breit (gemessen, 134 Felder) — bei „E-Mail" hätte das Symbol dann 300px neben dem
   Wort gestanden und auf nichts gezeigt. Die Unruhe kam nicht von der Nähe zum
   Text, sondern davon, dass das ⓘ mit 42 % Deckkraft als einziges Zeichen in einer
   sehr weiten leeren Zeile stand. Also: engerer Abstand (es gehört zum Label,
   nicht neben es) und ruhig statt blass. */
/* Eigene Bahn für das ⓘ, direkt VOR dem Label — begründet in settings-row.js beim
   Markup. Die Bahn steht auch in Zeilen ohne Erklärung (leer), sonst begännen die
   Labels zweier Nachbarzeilen unterschiedlich weit links. */
/* Alle Zellen EXPLIZIT platziert. Das ist Pflicht, nicht Stil: das ⓘ steht im
   Markup zuletzt (Fokus-Reihenfolge, siehe settings-row.js), soll aber in Spalte 1
   erscheinen. Ohne explizite Spalten würde die Auto-Platzierung der DOM-Reihenfolge
   folgen und das Symbol hinter den Aktionen landen. */
.set-row-infospalte {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; justify-content: center; min-width: 0;
}
.set-row-text { grid-column: 2; grid-row: 1; min-width: 0; }
.set-row-label {
  font-size: var(--fs-body, 14px); font-weight: var(--fw-medium);
  color: var(--color-text);
}
.set-row-pflicht { color: var(--status-danger-fg, #b3261e); font-weight: var(--fw-bold); }
/* „Fehlt"-Hinweis UNTER dem Label, nicht daneben: die Label-Bahn ist fest und der Satz
   ist länger als jedes Label — daneben würde er sie sprengen oder abgeschnitten werden.
   Bewusst kein Kasten und kein Symbol: die Zeile soll auffallen, ohne dass eine Karte
   mit vier leeren Pflichtfeldern wie ein Ausfall aussieht (sie ist ein NEUER Mandant). */
.set-row-fehlt {
  display: block; margin-top: 2px;
  font-size: var(--fs-caption, 12px); line-height: 1.35;
  color: var(--status-danger-fg, #b3261e);
}

/* ── Control-Spalte: ZWEI Bahnen ──────────────────────────────────────────────
   Control + Einheiten-Bahn, und die Einheiten-Bahn wird IMMER reserviert — auch in
   einer Zeile ohne Einheit. Mit einer mitwachsenden Einheit endete das Zahlenfeld
   je nach Wortlänge woanders (gemessen 1453 / 1478 / 1492 für „Personen" / „Tage"
   / „%" in EINER Sektion): wieder drei rechte Kanten, nur eine Ebene tiefer.
   64px trägt das längste vorkommende Wort („Personen"); längere Einheiten gehören
   nicht in eine Bahn, sondern in die Erklärung am ⓘ. */
/* Zwei Spuren: Feld (füllt) + Einheiten-Bahn (fest, IMMER reserviert).
   Der Zwischenschritt „Einheit nur wo es eine gibt" war falsch, obwohl er Weiß
   sparte: dann endet das Feld einer Zeile MIT Einheit früher als das einer Zeile
   ohne — im Drawer gemessene 57px Unterschied, in „Fristen & Vorwarnzeiten" 19px,
   weil auch die Wortlänge der Einheit mitspielte. Das sind zwei bzw. drei rechte
   Feldkanten, und genau die soll es nicht geben.
   Reserviert heißt NICHT verschwendet: die Bahn verhält sich wie die Aktions-Spalte
   daneben — meist leer, aber sie hält die Kante. 64px trägt das längste vorkommende
   Wort („Personen"); längere Einheiten gehören in die Erklärung am ⓘ. */
.set-row-ctrl {
  grid-column: 3; grid-row: 1;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: center; gap: var(--space-2); min-width: 0;
}
/* Die Einheiten-Bahn steht JE FLÄCHE: enthält die Fläche irgendwo eine Einheit,
   reservieren ALLE ihre Zeilen die Bahn — dann endet jedes Feld auf derselben Kante.
   Enthält sie keine, gibt es die Bahn gar nicht.
   Warum nicht global reserviert: in einem 480px-Drawer ohne eine einzige Einheit
   kosten 64px+Abstand ein Sechstel der Breite, und die Werte werden wieder
   abgeschnitten (gemessen 197px Feld). Warum nicht je ZEILE: dann endet eine Zeile
   mit Einheit früher als eine ohne — im Drawer 57px Unterschied, also zwei rechte
   Kanten in einer Fläche. Je Fläche ist beides gelöst: eine Kante dort, wo man
   vergleichen kann, und kein Leerraum, wo es nichts zu reservieren gibt.
   `:has()` statt einer Klasse vom Renderer: die Bedingung steht damit an genau
   einer Stelle und kann nicht vergessen werden. */
.einst-fields:has(.set-row-einheit) .set-row-ctrl,
.setx:has(.set-row-einheit) .set-row-ctrl {
  grid-template-columns: minmax(0, 1fr) var(--set-einheit);
}
/* Das Feld sitzt in Spur 1 und füllt sie (`--set-feld: 100%`); nur der Schalter
   behält seine Gestalt. */
.app-scope .set-row-ctrl > input,
.app-scope .set-row-ctrl > select,
.app-scope .set-row-ctrl > textarea,
/* Datumsfeld (LoD.DateField): ein <span>-Wrapper um verborgenen Wert + Trigger.
   Muss hier stehen, weil `> input` es NICHT trifft — sonst faellt es aus der
   Bahn und steht ohne `--set-feld`-Breite neben allen anderen Feldern. */
.app-scope .set-row-ctrl > .app-date-field,
.app-scope .set-row-ctrl > .select[data-cs-trigger] {
  grid-column: 1; width: var(--set-feld); min-width: 0; max-width: 100%;
}
/* Schalter behält seine Größe und beginnt an derselben linken Kante wie jedes Feld. */
.app-scope .set-row-ctrl > .app-switch { grid-column: 1; justify-self: start; }
/* Zahlen LINKSBÜNDIG mit Tabellenziffern. Rechtsbündig war richtig, solange das
   Zahlenfeld 150px breit war und direkt an seiner Einheit klebte; in einer Bahn über
   die volle Breite stünden die Ziffern rund 400px von ihrem Label entfernt am
   rechten Rand. Tabellenziffern bleiben, damit 7 / 14 / 120 untereinander fluchten. */
.app-scope .set-row-ctrl > input[type="number"] { font-variant-numeric: tabular-nums; }
/* Kein nativer Kalender-/Uhr-Indikator mehr auf dieser Fläche: Datum, Zeitpunkt
   UND Uhrzeit laufen über LoD.DateField / LoD.TimeField. Die früheren
   `::-webkit-calendar-picker-indicator`-Regeln (Symbol absolut an die rechte
   Innenkante gepinnt, weil `margin-left:auto` im Shadow-Flow des Date-Inputs
   nichts tat) sind damit gegenstandslos und entfernt — eine Regel ohne
   Zielelement ist toter Code, der beim nächsten Leser wie eine Absicht aussieht. */
.set-row-einheit {
  grid-column: 2;
  font-size: var(--fs-meta, 12px); color: var(--color-text-muted); white-space: nowrap;
}
/* Auswahl (CustomSelect ersetzt das <select> durch einen Button daneben): dieselbe
   Höhe und Schriftgröße wie ein Textfeld. Ohne diese Regeln liest sich eine Auswahl
   in derselben Bahn kleiner als das Feld über ihr (13px/33px gegen 14px/32px). */
.app-scope .set-row-ctrl .select[data-cs-trigger] { height: 32px; }
.app-scope .set-row-ctrl .cs-label {
  font-size: var(--fs-body, 14px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Aktionen (Zurücksetzen / Gespeichert) ────────────────────────────────── */
/* Eigene, immer gleich breite Spalte am Zeilenrand — nicht zwischen Control und
   Einheit. Dort las sich das Rücksetz-Icon wie ein Ladezeichen. */
.set-row-aktionen {
  grid-column: 4; grid-row: 1;
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-1); min-width: 0;
}

/* ── Das ⓘ ───────────────────────────────────────────────────────────────── */
/* Ruhig, aber immer vorhanden — es ist der Ort der Erklärung, nicht Dekoration.
   Voller Kontrast erst bei Hover auf der Zeile bzw. am Knopf selbst. */
.set-row-info {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 20px; height: 20px; padding: 0; border: 0; background: none;
  border-radius: var(--radius-circular); cursor: help;
  opacity: .55; transition: opacity var(--duration-quick, .12s) var(--ease-out-soft, ease-out),
    background-color var(--duration-quick, .12s) var(--ease-out-soft, ease-out);
}
.set-row:hover > .set-row-infospalte > .set-row-info { opacity: .85; }
.set-row-info:hover,
.set-row-info:focus-visible,
.set-row-info[aria-expanded="true"] { opacity: 1; background: var(--color-bg-subtle, var(--lod-gray-50)); }
.set-row-info .ui-ico img { width: 15px; height: 15px; }

/* ── KEIN „Master-Schalter"-Modifier — bewusst entfernt ───────────────────────
   Hier stand eine getönte Zeile für Schalter, von denen andere Felder abhängen.
   Über die volle Kartenbreite wurde daraus ein grauer Balken (Kyle 27.07.: „Was
   ist dieser hässliche Balken?"), und drei Anläufe (Rahmen, Akzentkante, Tönung
   ohne Polsterung) haben es nicht besser gemacht — weil die Einordnung falsch war,
   nicht die Optik.
   Die Lehre: ein Schalter, der eine GANZE Sektion schaltet, ist keine hervorgehobene
   Zeile, sondern gehört in den SEKTIONSKOPF (`.einst-sec-switch`, einstellungen.css).
   Hängt nur ein TEIL der Sektion an ihm, tragen die eingerückten Kinder
   (`--abhaengig`) die Hierarchie — ohne zweite Betonung am Schalter selbst. */

/* ── Abhängige Zeile ─────────────────────────────────────────────────────── */
/* Die Hierarchie zeigt eine SPINE links, gezeichnet als Pseudo-Element — sie
   verbraucht damit keine Bahn. Vorher trug die Label-Zelle Polsterung + Kante:
   das rückte das Label von seinem ⓘ weg (die beiden gehören zusammen), und in der
   Fassung davor verschob es sogar die Control-Kante gegenüber allen anderen Zeilen.
   Mit der Spine bleiben ⓘ-, Label- und Feld-Kante in JEDER Zeile dieselben. */
/* Negativ versetzt: die Spine liegt in der Innenluft des Hosts, NICHT über der
   ⓘ-Bahn (die beginnt bei 0). */
.set-row--abhaengig::before {
  content: ''; position: absolute; left: calc(var(--space-2) * -1); top: 6px; bottom: 6px;
  width: 2px; border-radius: 1px; background: var(--lod-gray-200);
}

/* ── Gestapelt: Label oben, Control über die ganze Breite ─────────────────── */
/* Zwei Auslöser, ein Layout: `stapel` (Rich-Text, Mehrzeiler, breite Vorlagen) und
   die Drawer-Variante, solange der Drawer schmal ist (siehe Container-Query unten). */
/* Gestapelt: ⓘ · Label · Aktionen in Zeile 1, das Control über die ganze Breite in
   Zeile 2. Die ⓘ-Bahn bleibt auch hier vorne — ein Editor-Label soll nicht anders
   beginnen als ein Feld-Label zwei Zeilen darüber. */
.set-row--stapel,
.set-row--drawer {
  grid-template-columns: var(--set-info) minmax(0, 1fr) var(--set-aktionen);
}
.set-row--stapel > .set-row-ctrl,
.set-row--drawer > .set-row-ctrl { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-2); }
.set-row--stapel > .set-row-aktionen,
.set-row--drawer > .set-row-aktionen { grid-column: 3; grid-row: 1; align-self: start; }
.set-row--stapel > .set-row-ctrl { align-items: stretch; }
.set-row--stapel > .set-row-ctrl { grid-template-columns: minmax(0, 1fr); }
.set-row--stapel > .set-row-ctrl > .set-row-einheit { grid-column: 1; justify-self: end; }

/* ── Drawer-Variante ─────────────────────────────────────────────────────── */
/* Die Breite entscheidet der DRAWER, nicht der Viewport: `container: drawer` kommt
   aus _shared/shared-drawer.css. Mit Viewport-Media wäre eine Zeile im schmalen
   Drawer (Anspruchskonto öffnet 431px breit) am Desktop weiter zweispaltig — dem
   Label blieben ~190px, also „maximal drei Wörter pro Zeile" (gemessener Befund,
   der genau so schon einmal auftrat). Deshalb: gestapelt als Grundhaltung, zwei
   Spalten erst, wenn der Drawer sie trägt. Stufen an echten Drawer-Breiten
   ausgemessen (Arten 511px, Konto 431px, Standort 671px). */
.set-row--drawer { padding: var(--space-2) 0; }
/* ── AUSNAHME VOM STAPELN: der Schalter ───────────────────────────────────────
   Ein Bool-Feld gestapelt heißt: eine Label-Zeile, darunter ein EINSAMER Schalter
   links im Leeren — pro Drawer drei-, viermal (Kyles Standort-Screenshot: „mal nur
   ein Boolean in einer Zeile"). Der Schalter braucht die volle Breite nicht, er IST
   sein Wert. Deshalb einzeilig: Label links, Schalter an der rechten Kante — dieselbe
   Anordnung wie jede Schalter-Zeile der Pane und der Ruhezeit-Kopf. Alle anderen
   Typen bleiben gestapelt (die Begründung dafür steht unten). */
.set-row--drawer.set-row--t-bool > .set-row-ctrl {
  grid-column: 2 / 3; grid-row: 1; margin-top: 0;
  display: flex; justify-content: flex-end;
}
/* Im Drawer wird IMMER gestapelt — Label oben, Feld über die ganze Breite.
   Vorher schaltete eine Container-Query ab 460px auf zwei Spalten. Das ergab zwei
   Drawer-Bauarten (schmal gestapelt, breit zweispaltig) und im zweispaltigen Fall
   Felder von 197px, in denen „Bayerisches Landesamt für Datenschutzaufsicht" mitten
   im Wort abriss: ⓘ 20 + Label 150 + Einheiten-Bahn 64 + Aktionen 28 samt Abständen
   sind 306px, die in einem 480px-Drawer für das Feld nicht übrig bleiben.
   Gestapelt sieht JEDER Drawer gleich aus, unabhängig von seiner Breite, und das
   Feld bekommt die volle Fläche. Die Bahnen von ⓘ, Label und Aktionen bleiben
   dieselben wie in der Pane — es ist dieselbe Zeile, nur umgebrochen. */

/* ── Gruppen-Überschrift ─────────────────────────────────────────────────── */
/* Abstand DAVOR trennt zwei Gruppen, kein Abstand danach bindet die Überschrift an
   ihre Felder. Sonst wiegt eine Überschrift über EINEM Feld mehr als ihr Inhalt. */
.set-gruppe {
  margin: var(--space-5) 0 0; padding-bottom: var(--space-1);
  font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps, .08em); text-transform: uppercase;
  color: var(--lod-gray-500);
}
.set-gruppe:first-child { margin-top: 0; }
.set-gruppe + .set-row { border-top: 0; }

/* ── MODUL-MARKE: „wer liest diese Werte" (`wirktIn`) ──────────────────────
   EINE Klasse für BEIDE Ebenen — Gruppen-Überschrift (hier) und Sektionskopf
   (`einstellungen.js`). Sie sagen dasselbe an zwei Orten; zwei Regelblöcke wären
   genau die Doppelung, die am Tag der Kopie identisch aussieht und danach
   auseinanderläuft. Deshalb steht sie im geteilten Settings-Stylesheet und nicht
   in der Sektions-CSS. Sie hängt an KEINEM fremden Vorfahren (self-scoped über
   die eigene Klasse) und ist damit auch im Katalog-Drawer verwendbar.

   Bewusst RUHIG: keine Tonart, keine Marken-Farbe, kein Akzent-Rahmen. Sie
   beantwortet eine Nebenfrage und darf die Überschrift nicht überstimmen — ein
   farbiges Badge läse sich wie ein Status („Achtung, HR!"), und das ist es nicht:
   es ist eine Herkunftsangabe. `text-transform`/`letter-spacing` werden
   ausdrücklich zurückgesetzt, weil die Gruppen-Überschrift Versalien mit
   Sperrung vererbt; in Kapitälchen läse sich die Marke als zweite Überschrift.
   `flex-shrink: 0`: der Titel gibt nach, die Marke nicht — ein halbes „Personal &
   H…" ist keine Herkunftsangabe mehr, sondern Rauschen. */
.set-modul-marke {
  flex: 0 0 auto;
  font-size: var(--fs-badge, 11px); font-weight: var(--fw-medium);
  text-transform: none; letter-spacing: 0;
  color: var(--color-text-secondary);
  background: var(--lod-gray-100); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm); padding: 1px var(--space-2);
  white-space: nowrap;
}
/* Die Überschrift wird zur Flex-Zeile, damit die Marke NEBEN dem Titel steht.
   Kein `margin-left:auto` an der Marke: am rechten Rand der Pane endete sie
   ~600px vom Titel entfernt und war ihm nicht mehr zuzuordnen. */
.set-gruppe { display: flex; align-items: center; gap: var(--space-2); }

/* ══ Hover-Karte am ⓘ ═════════════════════════════════════════════════════
   Panel hängt am body (Popover-SSOT) — deshalb trägt die Klasse das Scoping,
   nicht `.app-scope`. Das Vokabular (Radius, Schatten, Animation) liegt jetzt
   wirklich an EINER Stelle: `.app-popover--karte` (popover-menu.css), gesetzt in
   settings-row.js. Vorher stand der Anspruch „alle Hover-Karten sollen sich als
   dieselbe Sache lesen" hier als Kommentar — und der Block fuenfmal im Repo. */
.set-info {
  width: 340px; max-width: calc(100vw - 48px);
  padding: var(--space-3) var(--space-3-5) var(--space-3);
  font-family: var(--font-sans, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif);
}
.set-info-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.set-info-ico {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-bg-subtle, var(--lod-gray-50));
  border-radius: var(--radius-md);
}
.set-info-ico img { width: 15px; height: 15px; opacity: .75; }
.set-info-title {
  font-size: var(--fs-body, 14px); font-weight: var(--fw-semibold);
  color: var(--color-text); line-height: 1.3;
}
.set-info-text {
  font-size: 13px; line-height: 1.5;
  color: var(--color-text-secondary, var(--color-text-muted));
}

/* Fakten-Fuß: Standardwert und Geltungsbereich — das, was die Fläche selbst nicht
   zeigen kann. Zwei Bahnen, Werte auf einer Kante. */
.set-info-meta {
  margin: var(--space-3) 0 0; padding-top: var(--space-2-5);
  border-top: 1px solid var(--color-border-subtle, var(--lod-gray-100));
  display: flex; flex-direction: column; gap: var(--space-1);
}
.set-info-meta-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.set-info-meta dt {
  margin: 0; font-size: var(--fs-badge, 11px); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps, .06em); text-transform: uppercase;
  color: var(--lod-gray-500);
}
.set-info-meta dd { margin: 0; font-size: 12.5px; color: var(--color-text); overflow-wrap: anywhere; }

/* ── Treffer-Hervorhebung ────────────────────────────────────────────────── */
/* Zustand, den die Settings-Suche setzt: sie springt zur Zeile und markiert sie
   kurz. Gehört zum Zeilen-Modul, weil nur es die Zeilen-Wurzel kennt. */
@keyframes set-row-hit {
  0% { box-shadow: 0 0 0 3px var(--brand-light); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
.set-row--hit { animation: set-row-hit 1.6s var(--ease-soft) 1; border-radius: var(--radius-sm); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Die Drawer-Variante bleibt AUSGENOMMEN: ihre Breite entscheidet der Container
   (siehe oben), nicht der Viewport — sonst überschreibt eine Viewport-Regel die
   Container-Query und die Zeile springt beim Verkleinern des Fensters, obwohl der
   Drawer gleich breit geblieben ist. */
/* KEINE Notebook-Stufe mehr (hier stand eine, die string/select bei ≤1399px auf
   320px drückte). Sie war nötig, solange die Zeile die volle Kartenbreite nahm und
   das Label gegen das Feld um Platz konkurrierte. Bei festen Bahnen konkurriert
   nichts: die Zeile ist auf jedem Schirm 704px breit, und wird der Host schmaler
   als das, schrumpfen Label- und Control-Bahn über ihr `minmax(0, …)` gemeinsam —
   stufenlos statt in Sprüngen und ohne Sonderregel je Feldtyp. */

/* Tablet: KEIN Stapeln mehr und keine Sonderregeln je Feldtyp — hier standen vorher
   zwölf Selektoren, die je Typ zwischen „stapeln" und „rechter Anschlag mit
   abgeleiteter Bahn" umschalteten. Das Bahnen-Modell braucht das nicht: die
   Label-Bahn wird eine Stufe schmaler, die Control-Bahn (1fr) nimmt den Rest, und
   Textfelder füllen sie. Bei 700px Fenster bleiben dem Feld ~430px.
   Nebeneffekt, der Kyles „mal so mal so" adressiert: eine Zeile sieht auf Tablet
   aus wie am Desktop, nur schmaler — nicht plötzlich anders gebaut. */
@media (max-width: 999px) {
  /* Deckel weg: unter 1000px ist der Host schmaler als 760px. Ein Deckel würde
     rechts IN der Karte eine leere Spalte lassen — auf dem Desktop ist er ein
     Lesemaß, hier wäre er Verschwendung. */
  .set-row:not(.set-row--drawer),
  .set-gruppe { --set-mass: none; }
  .set-row:not(.set-row--drawer) { --set-label: 150px; }

  /* Touch-Maße: 32px ist die Desktop-Norm und für den Finger zu wenig
     (audit:responsive Regel 4 greift ab <36px). Controls UND ⓘ wachsen — und mit
     dem ⓘ seine BAHN, sonst läuft das größere Ziel aus seiner Spalte heraus. */
  .app-scope .set-row-ctrl > input,
  .app-scope .set-row-ctrl > select,
  .app-scope .set-row-ctrl .select[data-cs-trigger] { height: 36px; }
  .set-row { --set-info: 36px; }
  .set-row-info { width: 36px; height: 36px; }
  .set-row-info .ui-ico img { width: 17px; height: 17px; }
}
/* Mobile: HIER wird gestapelt — bei ~340px Inhaltsbreite bliebe dem Feld neben
   einer Label-Bahn nichts Brauchbares. Muster wie `stapel`: ⓘ · Label · Aktionen
   oben, Control über die ganze Breite darunter. SCHMALE Typen (Schalter, Zahl,
   Uhrzeit) bleiben zweispaltig — ein 44px-Schalter unter seinem Label macht die
   Zeile 100px hoch für ein Element, das daneben passt (bei 900px gemessen, als
   diese Regel noch für Tablet galt).
   Das ⓘ ist hier der einzige Ort der Erklärung und ohne Hover erreichbar —
   deshalb voll sichtbar statt gedämpft. */
@media (max-width: 599px) {
  .set-row { padding: var(--space-2) 0; --set-info: 40px; }
  .set-row-info { opacity: .85; width: 40px; height: 40px; }
  .app-scope .set-row-ctrl > input,
  .app-scope .set-row-ctrl > select,
  .app-scope .set-row-ctrl .select[data-cs-trigger] { height: 40px; }
  .app-scope .set-row-ctrl > .app-switch { min-height: 44px; display: inline-flex; align-items: center; }
  .set-info { width: 300px; }

  .set-row:not(.set-row--drawer):not(.set-row--t-bool):not(.set-row--t-int):not(.set-row--t-zeit):not(.set-row--t-date) {
    grid-template-columns: var(--set-info) minmax(0, 1fr) var(--set-aktionen);
  }
  .set-row:not(.set-row--drawer):not(.set-row--t-bool):not(.set-row--t-int):not(.set-row--t-zeit):not(.set-row--t-date) > .set-row-ctrl {
    grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-2);
  }
  .set-row:not(.set-row--drawer):not(.set-row--t-bool):not(.set-row--t-int):not(.set-row--t-zeit):not(.set-row--t-date) > .set-row-aktionen {
    grid-column: 3; grid-row: 1; align-self: start;
  }
  /* Schmale Typen: Label-Bahn eine weitere Stufe schmaler, damit Zahl + Einheit
     daneben passen. */
  .set-row:not(.set-row--drawer) { --set-label: 120px; }
}