/* Demo-eigene Styles der Desktop-Demo (UI-Phase 2a, Task 10).
   Enthält nur das Seitenlayout (Statusleiste/Sidebar/Content),
   Platzhalter-Kästen und Screen-Spezialregeln — bewusst NICHT in
   tokens.css, damit die verbindlichen Tokens unverändert bleiben. Alle Werte
   ausschließlich über var(--rlv-…).
   Rollen- und Dichte-Umschalter sind entfallen (R3i, 2026-11-07):
   Desktop-Review-Sicht = Administrator, Dichtestufe „ruhig“ ist gesetzt.

   LAYOUT (R3c, 2026-11-07): Kein künstlicher Viewport-Rahmen mehr — der Body
   ist ein CSS-Grid: Zeile 1 = Header (volle Breite), Zeile 2 = Sidebar +
   Content. Die Sidebar bekommt damit automatisch 100vh − Header-Höhe, der
   Content den Rest (100vw − Sidebar-Breite) mit eigener Scrollzone.
   Responsivität läuft ausschließlich über echte Media Queries auf der
   Viewport-Breite: 768–1023 px → 64-px-Icon-Rail, < 768 px → Drawer. */

html, body {
  height: 100%;
}

body {
  --demo-header-h: 44px;
  --demo-sidebar-b: 248px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--demo-sidebar-b) 1fr;
  grid-template-rows: var(--demo-header-h) 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--rlv-surface);
}

header {
  grid-area: 1 / 1 / 2 / 3;
}

/* Wortmarke links in der Statusleiste (Slot marke). */
.wortmarke {
  font-family: var(--rlv-font-head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--rlv-primary);
}

/* R3t-2: im schmalen (Phone-)Header nur die quadratische Bildmarke —
   Media Query statt JS, Breakpoint-Konvention auf halbe Pixel. */
.logo-quad { display: none; }
@media (max-width: 767.5px) {
  .logo-horiz { display: none; }
  .logo-quad { display: block; }
}

/* Sidebar: Grid-Zelle links unter der 44 px hohen Statusleiste — sie füllt
   automatisch 100vh − Header-Höhe, bleibt beim Content-Scroll stehen; die
   eigene Scrollzone ist dezent (thin, dezente Thumb-Farbe). */
.sidebar {
  box-sizing: border-box;
  grid-area: 2 / 1 / 3 / 2;
  min-width: 0;
  background: var(--rlv-surface-2);
  border-right: 1px solid var(--rlv-border);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rlv-border-strong) transparent;
  padding-bottom: var(--rlv-space-4);
}

/* Content: Grid-Zelle rechts neben der Sidebar, rückt bei schmalerer Rail
   automatisch weiter nach links (Grid-Spalte), scrollt allein. */
.content {
  grid-area: 2 / 2 / 3 / 3;
  min-width: 0;
  overflow-y: auto;
}

.content-innen {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--rlv-space-5);
}

.screen[hidden] {
  display: none;
}

.screen > h1 {
  margin: 0 0 var(--rlv-space-1);
}

.screen > p.kicker {
  margin: 0 0 var(--rlv-space-5);
}

/* Hinweiszeile über dem AD-Block auf Screen „Meine Daten“: Lesehilfe, dass die
   Stammdaten aus dem täglich aktualisierten AD-Import kommen. */
.ad-hinweis {
  margin: 0 0 var(--rlv-space-2);
  font-size: 12px;
  color: var(--rlv-text-2);
}

/* Mehrfach-Filter als Dropdown mit Chips innerhalb (R3d, 2026-11-07): der
   Trigger („Herkunft ▾“) öffnet ein Panel mit allen Optionen als Chips; Klick
   toggelt — gewählt = gefüllt + X. Das Panel bleibt offen (Mehrfach-Auswahl);
   leere Auswahl ODER alle gesetzt = kein Filter. */
.filter-gruppe {
  display: inline-flex;
  align-items: center;
}

.chip-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--rlv-space-1);
  height: 36px;
  padding: 0 var(--rlv-space-3);
  border: 1px solid var(--rlv-primary);
  border-radius: var(--rlv-radius-ctrl);
  background: var(--rlv-surface);
  color: var(--rlv-primary);
  font: 500 14px/1 var(--rlv-font-body);
  cursor: pointer;
}

.chip-trigger:hover {
  background: var(--rlv-accent-soft);
}

/* Gewählter Filter: der Trigger trägt die Farbe des gewählten Chips
   (gefüllt, weiß) — der Filterzustand bleibt ohne geöffnetes Panel sichtbar. */
.chip-trigger.aktiv {
  background: var(--rlv-primary);
  border-color: var(--rlv-primary);
  color: #fff;
}

.chip-trigger.aktiv:hover {
  color: #fff;
}

.chip-zaehler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--rlv-primary);
  color: #fff;
  font: 600 11px/1 var(--rlv-font-body);
}

.chip-trigger.aktiv .chip-zaehler {
  background: rgba(255, 255, 255, .28);
  color: #fff;
}

.chip-trigger .trigger-ikon {
  display: inline-flex;
}

.chip-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlv-space-1);
  padding: var(--rlv-space-2) var(--rlv-space-3);
}

.chip-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--rlv-space-1);
  height: 30px;
  padding: 0 var(--rlv-space-3);
  border: 1px solid var(--rlv-primary);
  border-radius: 999px;
  background: var(--rlv-surface);
  color: var(--rlv-primary);
  font: 500 13px/1 var(--rlv-font-body);
  cursor: pointer;
}

.chip-opt:hover {
  background: var(--rlv-accent-soft);
}

.chip-opt .chip-x {
  display: none;
}

/* Selektierter Chip = semantischer Soft-Ton pro Option (wie die Badges in
   der Tabelle) mit X; Rand entfällt, Kapsel bleibt gleich groß. */
.chip-opt.aktiv {
  border-color: transparent;
}

.chip-opt.aktiv.ton-grau {
  background: var(--rlv-surface-2);
  color: var(--rlv-text-2);
}

.chip-opt.aktiv.ton-warn {
  background: var(--rlv-warn-soft);
  color: var(--rlv-warn-text);
}

.chip-opt.aktiv.ton-ok {
  background: var(--rlv-ok-soft);
  color: var(--rlv-ok-text);
}

.chip-opt.aktiv.ton-danger {
  background: var(--rlv-danger-soft);
  color: var(--rlv-danger-text);
}

/* R3p: zwei weitere Töne, die exakt die Badge-Palette spiegeln (info =
   „lieferung“-Badge, akzent = „bestellung“/„in_bearbeitung“-Badge). */
.chip-opt.aktiv.ton-info {
  background: var(--rlv-info-soft);
  color: var(--rlv-info);
}

.chip-opt.aktiv.ton-akzent {
  background: var(--rlv-accent-soft);
  color: var(--rlv-ok-text);
}

.chip-opt.aktiv .chip-x {
  display: inline-flex;
}

/* Sektions-Kicker der Sidebar (Licht-DOM, damit der Rail-Modus sie per CSS
   ausblenden kann — der Component-Kicker läge im Shadow-DOM). Abgesetzter
   Hintergrund (surface-2 dunkler, über die Tokens gemischt) + Bodenlinie
   lesen ihn als Gruppenkopf; der Text bleibt Kicker-Stil (12 px, 600,
   grau) — für AA-Kontrast auf der dunkleren Bahn ist die text-2-Mischung
   leicht abgedunkelt (Screen 2). */
.sektions-kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--rlv-text-2), var(--rlv-text) 35%);
  letter-spacing: .02em;
  padding: var(--rlv-space-1) var(--rlv-space-3);
  margin: var(--rlv-space-5) 0 var(--rlv-space-1);
  background: color-mix(in srgb, var(--rlv-surface-2), var(--rlv-text) 6%);
  border-bottom: 1px solid var(--rlv-border);
}

/* Kennzahlen-Raster der Übersicht. */
.kpi-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--rlv-space-3);
  margin-bottom: var(--rlv-space-5);
}

.kpi-zahl {
  font: 700 28px/1.2 var(--rlv-font-head);
  color: var(--rlv-primary);
  font-variant-numeric: tabular-nums;
}

/* R5 (2026-11-13, Übersicht-Design): Rollen-Überschriften, Gruppen-
   Überschriften und klickbare KPI-Karten (Sprung mit Filter-Vorbelegung).
   Hover: nur intensiverer Schatten auf der Kartenfläche + grauer Body —
   der Schatten sitzt auf .karte (border-radius), nicht auf der Grid-Zelle. */
.rollen-kopf {
  margin: var(--rlv-space-5) 0 var(--rlv-space-3);
  font: 600 18px/1.3 var(--rlv-font-head);
  color: var(--rlv-text, inherit);
}
.rollen-kopf:first-of-type { margin-top: var(--rlv-space-2); }
.gruppen-kopf {
  margin: var(--rlv-space-4) 0 var(--rlv-space-2);
  font: 600 15px/1.3 var(--rlv-font-head);
  color: var(--rlv-text-2, inherit);
}
#screen-uebersicht .uebersicht-karte { margin-top: var(--rlv-space-3); }
/* Gleiche Kartenhöhe in einer Raster-Zeile: die Kartenfläche füllt die Zelle. */
.kpi-karte { height: 100%; }
.kpi-karte::part(karte) { height: 100%; }
.kpi-karte:hover::part(body) { background: var(--rlv-surface-2); }
.kpi-karte:focus-visible {
  outline: 2px solid var(--rlv-primary);
  outline-offset: 2px;
}

/* Positionen im Wizard-Schritt 1. */
/* R4f (2026-11-11) / R4g: Der Assistent trägt insgesamt einen Rahmen;
   der Schritt (Body) bekommt dasselbe Padding wie .kopf und Fuß (12 px),
   Formularzeile und Positionstabelle laufen randbündig über die volle
   Body-Breite (so breit wie der Fuß) — daher negativer Einzug. */
#liefer-wizard {
  border: 1px solid var(--rlv-border-strong);
  border-radius: var(--rlv-radius-card);
}

#liefer-wizard::part(schritt) {
  padding: var(--rlv-space-3);
}

.schritt-titel {
  margin: 0 0 var(--rlv-space-3);
  font-family: var(--rlv-font-head);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--rlv-text);
}

/* R4f/R4g: Positionstabelle — Produktzelle: Zeile 1 Name fett + [Gebinde]
   normal, Zeile 2 Kicker ohne Oberkante-Abstand. */
.zellen-produkt {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.zellen-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rlv-space-1);
}

.zellen-name {
  font-weight: 600;
}

.zellen-gebinde {
  font-weight: 400;
}

#positionen-tabelle {
  margin-top: var(--rlv-space-4);
  /* R4f-2: Abstand vom letzten Artikel zum Wizard-Fuß (Abbrechen/Weiter). */
  margin-bottom: var(--rlv-space-4);
}

/* R4k (2026-11-11): Adress-Schritte — Freieingabe-Zweispalter (mobil
   gestapelt), Liste der gelernten Rechnungspartner, Request-Block der
   Übersicht. */
.frei-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rlv-space-3);
  margin-bottom: var(--rlv-space-3);
}

.frei-raster rlv-input {
  min-width: 0;
}

/* R4l (2026-11-11): Kundenwahl zuerst (breiter), dann Umkreis – in einer
   Zeile, Telefon-Ansicht gestapelt. */
.umkreis-zeile {
  display: flex;
  gap: var(--rlv-space-3);
  margin-bottom: var(--rlv-space-3);
}

.umkreis-zeile rlv-combobox:first-child {
  flex: 2 1 0;
  min-width: 0;
}

.umkreis-zeile rlv-combobox:last-child {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 767.5px) {
  .umkreis-zeile {
    flex-direction: column;
  }
}

/* R4m (2026-11-11): Adressblock „Rechnung wie Lieferadresse“ — die gewählte
   Lieferadresse wird im Akkordeon noch einmal ausgegeben. */
/* R4n (2026-11-11): Kopf-zu-Text-Abstand in „Rechnung wie Lieferadresse“
   gestrafft (Komponenten-Body-Padding 16 px war zu luftig). */
.wie-item::part(body) {
  padding-top: var(--rlv-space-1);
}

.wie-item p:first-of-type {
  margin-top: 0;
}

.wie-vorschau {
  margin: var(--rlv-space-2) 0 0;
  padding: var(--rlv-space-2) var(--rlv-space-3);
  border-left: 3px solid var(--rlv-primary);
  background: var(--rlv-surface-2);
  border-radius: 0 var(--rlv-radius-ctrl) var(--rlv-radius-ctrl) 0;
}

.wie-vorschau p {
  margin: 0;
  line-height: 1.45;
}

.wie-vorschau .wie-name {
  font-weight: 600;
}

.wie-vorschau .beschreibung {
  color: var(--rlv-text-2);
}

@media (max-width: 767.5px) {
  .frei-raster {
    grid-template-columns: 1fr;
  }
}

.gelernt-liste {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rlv-space-2);
}

.uebersicht-request {
  margin: var(--rlv-space-3) 0 0;
  padding: var(--rlv-space-3);
  background: var(--rlv-surface-2);
  border: 1px solid var(--rlv-border);
  border-radius: var(--rlv-radius-ctrl);
  font: 400 12px/1.5 var(--rlv-font-mono, monospace);
  color: var(--rlv-text-2);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* R4e: Meta-Zeile der Position — ID · EAN · Charge · MHD, getrennt durch
   dünne senkrechte Bullets. */
.position-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rlv-space-2);
  /* R4g (Nutzer): Kicker ohne Oberkante-Abstand. */
  margin-top: 0;
  padding-top: 0;
  color: var(--rlv-text-2);
  font-size: 13px;
}

.meta-trenner {
  width: 1px;
  height: 12px;
  background: var(--rlv-border-strong);
}

/* R4d Schritt 1: Auswahlzeile Produkt/Menge/Rabatt/Charge. */
.artikel-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--rlv-space-3);
  margin-top: var(--rlv-space-3);
}

/* R4f-2 (2026-11-11): Die Formularzeile steht in denselben Spaltenmaßen wie
   die Positionstabelle (46/14/14/26 % — spiegelt POSITION_SPALTEN); die
   Feld-Labels bleiben und dienen als Pseudo-Überschriften. Auf dem Telefon
   (Karten-Modus der Tabelle) stapeln die Felder wieder untereinander. */
@media (min-width: 768px) {
  /* R4r-2 (2026-11-12, Nutzer): Charge (nur bei Flag-Artikeln) steht in
     derselben Zeile rechts neben dem Produkt — Produkt- und Charge-Spur
     zusammen bleiben 46 %, damit die table-Kanten (Menge/Rabatt/Aktion)
     unverändert Δ 0 zur Positionstabelle stehen. */
  .artikel-zeile {
    display: grid;
    /* Produkt- + Charge-Spur zusammen = Rest wie die Tabellen-Spalte 1
       (100 % − 14 % − 14 % − 150 px), damit die Kanten Δ 0 bleiben.
       R4r-3 (2026-11-12, Nutzer): Charge-Spur breiter (16 -> 20 %), der
       Chargentext („Z-2503-1 · Bestand 480“) soll nicht abgeschnitten werden. */
    grid-template-columns: minmax(0, calc(72% - 150px - 20%)) minmax(0, 20%) 14% 14% 150px;
    align-items: end;
    gap: 0;
  }

  .artikel-zeile > * {
    min-width: 0;
    padding-left: var(--rlv-space-3);
  }

  .artikel-zeile #artikel-wahl { grid-column: 1; grid-row: 1; }
  .artikel-zeile #artikel-charge {
    grid-column: 2; grid-row: 1; margin-top: 0;
  }

  /* R4t-4 (2026-11-12, Nutzer): ohne sichtbare Chargenauswahl spannt das
     Produkt über beide Produkt-Spuren (Summe = Tabellen-Spalte 1), Kanten
     zu Menge/Rabatt/Aktion bleiben Δ 0. */
  .artikel-zeile.ohne-charge #artikel-wahl { grid-column: 1 / 3; }
  .artikel-zeile #artikel-menge { grid-column: 3; grid-row: 1; }
  .artikel-zeile #artikel-rabatt { grid-column: 4; grid-row: 1; }

  /* „Hinzufügen“ steht immer in der Aktions-Spalte. */
  .artikel-zeile #artikel-hinzufuegen {
    grid-column: 5;
    grid-row: 1;
  }
}

/* R4r-2: Auf dem Telefon stapelt die Charge wieder unter dem Produkt
   (natürliche Flussreihenfolge) — 12 px Abstand wie der Rest. */
@media (max-width: 767.5px) {
  .artikel-zeile #artikel-charge {
    order: 1;
    margin-top: 0;
  }

  .artikel-zeile #artikel-menge,
  .artikel-zeile #artikel-rabatt,
  .artikel-zeile #artikel-hinzufuegen { order: 2; }
}

.artikel-warnung {
  margin: var(--rlv-space-2) 0 0;
  padding: var(--rlv-space-2) var(--rlv-space-3);
  border: 1px solid var(--rlv-danger);
  border-radius: var(--rlv-radius-ctrl);
  background: rgba(204, 75, 55, 0.06);
  color: var(--rlv-danger);
  font-size: 13px;
}

.artikel-hinweis {
  margin: var(--rlv-space-2) 0 0;
  font-size: 13px;
  color: var(--rlv-text-2);
}

/* R4e: „Hinzufügen“ steht in der Auswahlzeile — kein eigener Abstand mehr. */

/* Schritt 4: zwei Karten nebeneinander. */
.liefer-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlv-space-3);
}

/* Vorauswahl „Neuer Vorgang“ (Entscheidung A, 2026-11-10): zwei
   Auftragsart-Karten nebeneinander, Knopf je Karte unter der Beschreibung. */
/* R4e: Auftragsart-Karten ohne Kopf — Titel im Body, Abstand Titel↔Text
   so groß wie der Rand (16 px). */
.karten-titel {
  margin: 0 0 var(--rlv-space-4);
  font-family: var(--rlv-font-head);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--rlv-text);
}

/* R4e: frei stehende Lagerwahl über den Auftragsart-Karten. */
.vorgang-lager {
  max-width: 340px;
}

.vorgang-typen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlv-space-3);
  margin-top: var(--rlv-space-4);
}

.vorgang-typen rlv-card {
  flex: 1 1 320px;
}

.vorgang-typen rlv-card rlv-button {
  margin-top: var(--rlv-space-4);
}

/* R4o: Info-Hinweis auf offene Vorgänge in der Vorauswahl. */
.vorgang-hinweis {
  display: flex;
  align-items: center;
  gap: var(--rlv-space-2);
  margin-top: var(--rlv-space-4);
  padding: var(--rlv-space-2) var(--rlv-space-3);
  border: 1px solid var(--rlv-border);
  border-left: 3px solid var(--rlv-info);
  border-radius: var(--rlv-radius-ctrl);
  background: var(--rlv-surface-2);
  color: var(--rlv-text-2);
  font-size: 13px;
}

.vorgang-hinweis .hinweis-ikon {
  display: inline-flex;
  color: var(--rlv-info);
}

.liefer-optionen rlv-card {
  flex: 1 1 320px;
}

/* R4s (2026-11-12, Nutzer): „Wer liefert?“ als Radio-Karten — ein Klick
   wählt die Option (Ring + gefüllter Punkt); die Zuweisung beendet den
   Assistenten („Abschließen“ im Fuß). */
.liefer-optionen .radio-karte {
  position: relative;
  cursor: pointer;
  border-radius: var(--rlv-radius-card);
}

.liefer-optionen .radio-karte::before {
  content: '';
  position: absolute;
  top: var(--rlv-space-4);
  right: var(--rlv-space-4);
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid var(--rlv-border-strong);
  border-radius: 50%;
  background: var(--rlv-surface);
}

.liefer-optionen .radio-karte.gewaehlt {
  box-shadow: 0 0 0 2px var(--rlv-primary);
}

.liefer-optionen .radio-karte.gewaehlt::before {
  border-color: var(--rlv-primary);
  background: radial-gradient(circle at center, var(--rlv-primary) 0 4px, var(--rlv-surface) 5px);
}

.liefer-optionen .radio-karte:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rlv-focus);
}

/* R4t (2026-11-12, Nutzer): Bestätigungs-Schritt der Bestellung. */
.bestaetigung-intro {
  margin: 0 0 var(--rlv-space-4);
  font-size: 14px;
  color: var(--rlv-text);
}

.bestaetigung-kopf {
  margin: var(--rlv-space-5) 0 var(--rlv-space-2);
  font: 600 12px/1.4 var(--rlv-font-body);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--rlv-text-2);
}

.bestaetigung-adresse {
  padding: var(--rlv-space-3) var(--rlv-space-4);
  border: 1px solid var(--rlv-border);
  border-radius: var(--rlv-radius-ctrl);
  background: var(--rlv-surface-2);
}

.bestaetigung-adresse p {
  margin: 0;
  line-height: 1.5;
}

.bestaetigung-adresse p + p {
  margin-top: 2px;
}

.bestaetigung-name {
  font-weight: 600;
  color: var(--rlv-text);
}

.bestaetigung-rechnung {
  margin: var(--rlv-space-3) 0 0;
  color: var(--rlv-text-2);
  font-size: 13px;
}

.bestaetigung-produkte {
  margin: 0;
  padding-left: var(--rlv-space-5);
}

.bestaetigung-produkte li {
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.bestaetigung-check {
  display: flex;
  align-items: flex-start;
  gap: var(--rlv-space-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
}

.bestaetigung-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--rlv-primary);
}

.bestaetigung-ma-signatur {
  margin-top: var(--rlv-space-3);
}

.bestaetigung-ma-signatur svg {
  width: 160px;
  height: auto;
  display: block;
}

/* Unterschriften-/Signatur-Platzhalter. */
.unterschrift-kasten {
  box-sizing: border-box;
  border: 1px dashed var(--rlv-border);
  border-radius: var(--rlv-radius-card);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rlv-space-2);
  margin: var(--rlv-space-3) 0;
  color: var(--rlv-text-2);
}

.unterschrift-kasten svg {
  width: 260px;
  height: 60px;
}

.unterschrift-kasten p {
  margin: 0;
}

/* Zwischenüberschriften innerhalb der AD-Karte auf „Meine Daten“ (R3j):
   16 px Luft zum Feld darüber, damit die Sektionsgrenze lesbar bleibt. */
#screen-meinedaten .feld-gruppe-kopf {
  margin: var(--rlv-space-4) 0 var(--rlv-space-2);
  font: 600 12px/1.4 var(--rlv-font-body);
  color: var(--rlv-text-2);
}

.rollen-zeile {
  display: flex;
  align-items: center;
  gap: var(--rlv-space-2);
  margin-top: var(--rlv-space-2);
}

/* R3k „Meine Daten“: Zweispalten-Raster — Stammdaten-Karte links, Signatur
   und Sprache rechts (R3l: auf Nutzervorgabe halbe Breite). Grid-Gap = 8 px
   Card-Abstand. R3m/R3n: die rechte Spalte ist ein eigener Flex-Stapel statt
   Zeilen-Span — der Span zwang das Grid, beide Tracks auf die AD-Kartenhöhe
   (434 px) zu vergrößern und ~17 px leeren Raum pro Track unter die Cards zu
   legen; im Stapel bleiben die Cards in ihrer Inhaltshöhe und der 8-px-Gap
   ist der einzige Abstand. */
.meinedaten-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rlv-space-2);
  align-items: start;
}

.karten-stapel {
  display: flex;
  flex-direction: column;
  gap: var(--rlv-space-2);
}

/* R4u: Das hidden-Attribut muss gegen die eigene display-Regel durchkommen
   (UA-Default wird von display:flex überstimmt) — sonst verdeckt die
   Tourenliste die Ausführungs-Ansicht. */
.karten-stapel[hidden],
.tour-ausfuehrung[hidden] {
  display: none;
}

/* Feld-Rhythmus in der AD-Karte (R3k/R3l): jedes Eingabefeld bekommt denselben
   16-px-Top-Margin wie die Zwischenüberschrift darüber — außer dem ersten,
   das direkt am Kartenrand ansetzt. */
#screen-meinedaten rlv-card.ad-karte > rlv-input {
  margin-top: var(--rlv-space-4);
}

#screen-meinedaten rlv-card.ad-karte > rlv-input:first-child {
  margin-top: 0;
}

.beschreibung {
  color: var(--rlv-text-2);
}

/* Kopfzeile über einer Tabelle (Screen 3, R3): rechtsbündiger Aktionen-Button. */
.table-kopf {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--rlv-space-2);
  margin: var(--rlv-space-2) 0;
}

/* Screen 3, Runde 2 (R3b, 2026-11-06) + R3d (2026-11-07): einzeilige
   Werkzeugleiste über der Kundentabelle — Suchfeld wächst, die beiden
   Filter-Dropdowns halten ihre Breite, der Button sitzt rechts; bei schmaler
   Breite bricht die Zeile um. Die Kontrollelemente sind unten ausgerichtet
   (flex-end), damit Dropdown-Trigger und Button auf der 36 px hohen
   Eingabezeile stehen — nicht zentriert über Label UND Feld des Suchinputs.
   Das Such-Icon sitzt links vor dem Feld (rlv-input hat kein Icon-Attribut). */
.kunden-werkzeugleiste {
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Screen 3/5/6 + Vorgänge (R3d/R3e/R3p, 2026-11-07/08): sticky Filter-Sektion + Tabellenkopf.
   Bei großem Fenster bleiben beim Seiten-Scroll die Werkzeugleiste direkt
   unter der 44-px-Statusleiste stehen und darunter der Tabellenkopf
   (kopf-top der Tabelle muss dieser Höhe entsprechen); die Zeilen scrollen
   hindurch. Solide Füllung, damit keine Zeile durchscheint. Margin-Unten
    (12 px) = Abstand zwischen Filter-Sektion und Tabelle im Ruhezustand;
    im geklebten Zustand rückt der Tabellenkopf bündig unter die Leiste.
    Ab 767,5 px (R4, 2026-11-10, Nutzerbefund): klebt die Leiste auch in der
    Tablet-/Schmal-Menü-Ansicht — dort bricht sie zwar um, aber der
    ResizeObserver (R3f) liefert dem Tabellenkopf ständig die gemessene
    Höhe, der fixe Offset-Einwand von R3d ist damit hinfällig. Unterhalb
    (Karten-Modus, Kopf ausgeblendet) bleibt sie im Fluss. */
@media (min-width: 767.5px) {
  #screen-kunden .table-kopf.kunden-werkzeugleiste,
  #screen-produkte .table-kopf.kunden-werkzeugleiste,
  #screen-lager .table-kopf.kunden-werkzeugleiste,
  #screen-bestellungen .table-kopf.kunden-werkzeugleiste {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--rlv-surface);
    margin: 0 0 var(--rlv-space-3);
    padding: var(--rlv-space-2) 0;
  }
}

/* R4 (2026-11-10, Nutzer): Das Suchicon sitzt jetzt innen im Feld
   (rlv-input-Attribut „vorn-ikon“) — die außenstehende Icon-Spalte ist
   entfallen, dadurch steht das Feld (und sein Label) bündig links mit der
   Tabelle. Der Wrapper bleibt als Flex-Kind der Werkzeugleiste. */
.such-feld {
  flex: 1 1 240px;
  min-width: 220px;
}

.such-feld rlv-input {
  display: block;
}

.kunden-filter {
  flex: 0 0 160px;
  width: 160px;
}

.aktions-gruppe {
  display: inline-flex;
  align-items: center;
  gap: var(--rlv-space-2);
}

/* Meine Touren (2026-11-07): jede zugewiesene Lieferung als Karte; die Zeile
   trägt Kundennamen, Badges und die Aktions-Buttons in einer Flex-Zeile. */
.tour-zeile {
  display: flex;
  align-items: center;
  gap: var(--rlv-space-2);
  flex-wrap: wrap;
}

.tour-kunde {
  margin: 0;
  font-weight: 600;
  flex: 1 1 auto;
}

/* Ausführungs-Modal der Touren (R3q, 2026-11-08; R3r 2026-11-09 um Sektionen
   mit Menü-Hintergrund, Adress-Grid und Gate-Bullet-Box im Fuß erweitert).
   Kopf und Fuß des Dialogs kleben (Flex-Spalte in rlv-modal), die Sektionen
   scrollen in .inhalt. */
.tour-sektion {
  display: flow-root; /* hält die negative Kopf-Marge im Abschnitt-Kasten */
  margin-bottom: var(--rlv-space-4);
}

/* Mehr Luft über der nächsten Sektions-Kopfbar (außer der ersten):
   benachbarte Randmargen verfallen paarweise (max statt Summe) — 32 px
   Randmarge abzüglich der 16 px negativen Kopf-Marge ergeben sichtbare
   16 px über der Bar (vorher 0). */
.tour-sektion + .tour-sektion {
  margin-top: var(--rlv-space-6);
}

.tour-sektion:last-child {
  margin-bottom: 0;
}

/* R4u (2026-11-12, Nutzer): Ausführungs-Ansicht in voller Seitenbreite statt
   Modal — Kopf und Fuß kleben am Scrollcontainer (.content), die
   Sektionsköpfe kleben unter dem Ansichtskopf. R4u-2: die Balken respektieren
   das Padding des Seitenbodys — kein randanliegender Vollauszug. */
.tour-ausf-kopf {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--rlv-space-2);
  margin: 0 0 var(--rlv-space-4);
  padding: var(--rlv-space-2) 0;
  background: var(--rlv-surface);
  border-bottom: 1px solid var(--rlv-border);
}

.tour-ausf-fuss {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--rlv-space-2);
  margin: var(--rlv-space-4) 0 0;
  padding: var(--rlv-space-3) 0;
  background: var(--rlv-surface);
  border-top: 1px solid var(--rlv-border);
}

.tour-ausfuehrung .tour-sektion-kopf {
  margin-left: 0;
  margin-right: 0;
  /* kalibriert (Playwright 2026-11-12): Kopf 53 px hoch (8+36+8 padding +
     1 px Border) — die Sektionsbar klebt direkt unter ihm. */
  top: 53px;
}

/* R4v (2026-11-12, Nutzer): Ausführungs-Wizard — derselbe gerahmte
   Assistenten-Look wie der Erfassungs-Wizard; Gate-Box als Abstandshalter
   über dem unteren Rand. */
#ausf-wizard {
  border: 1px solid var(--rlv-border-strong);
  border-radius: var(--rlv-radius-card);
}

#ausf-wizard::part(schritt) {
  padding: var(--rlv-space-3);
}

#ausf-gate-box {
  margin-top: var(--rlv-space-4);
}

/* Sektionskopf wie ein Menüpunkt: eigene Fläche mit Hintergrund, randanliegend
   über die Inhaltspolsterung des Modals gezogen. */
.tour-sektion-kopf {
  /* klebt beim Scrollen im Modal unter dem Dialog-Kopf; die negative Marge
     von 16 px wird über den top-Offset gegengerechnet (R3s). */
  position: sticky;
  top: calc(-1 * var(--rlv-space-4));
  z-index: 3;
  margin: calc(-1 * var(--rlv-space-4)) calc(-1 * var(--rlv-space-4)) var(--rlv-space-3);
  padding: var(--rlv-space-2) var(--rlv-space-3);
  background: var(--rlv-surface-2);
  border-bottom: 1px solid var(--rlv-border);
  font-weight: 600;
  letter-spacing: .02em;
}

.tour-adresse {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--rlv-space-3);
}

.tour-adresse-text p {
  margin: 0;
  line-height: 1.45;
}

.tour-adresse-zeile {
  font-weight: 600;
}

/* Rechte Spalte des Adressblocks: „Route öffnen“ obenauf, darunter die
   GPS-Koordinaten (R3r-2) — bündig unter dem Button. */
.tour-adresse-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: end;
  align-self: start;
  gap: var(--rlv-space-1);
}

.tour-adresse-rechts .tour-gps {
  margin: 0;
  color: var(--rlv-text-2);
  font-variant-numeric: tabular-nums;
}

/* Gate-Hinweise im Fuß über den Buttons — Palette des Fehler-Toasts
   (danger-soft Grund, danger-Text), Aufzählung was zur Freigabe fehlt. */
.tour-fuss-msg {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--rlv-space-2);
  background: var(--rlv-danger-soft);
  color: var(--rlv-danger-text);
  border-radius: var(--rlv-radius-ctrl);
  padding: var(--rlv-space-2) var(--rlv-space-3);
}

.tour-fuss-msg[hidden] {
  display: none;
}

.tour-fuss-msg ul {
  margin: 0;
  padding-left: 18px;
}

.tour-fuss-msg li {
  font-size: 13px;
  line-height: 1.45;
}

.tour-fuss-symbol {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 2px;
}

.tour-signatur-feld {
  display: block;
  width: 100%;
  height: 140px;
  border: 1px dashed var(--rlv-border-strong);
  border-radius: var(--rlv-radius-card);
  background: var(--rlv-surface);
  touch-action: none;
  cursor: crosshair;
  margin-bottom: var(--rlv-space-2);
}

.tour-signatur-knoepfe {
  display: flex;
  gap: var(--rlv-space-2);
}

/* R4b-3 (2026-11-10, Nutzer): Der Vollbild-Knopf sitzt am rechten Rand der
   Knopfzeile, „Unterschrift löschen“ bleibt links. */
.tour-signatur-knoepfe rlv-button:last-child {
  margin-left: auto;
}

/* R4b (2026-11-10, Nutzerbefund Handy/Querformat): Vollbild-Signatur —
   Overlay über den ganzen Viewport, Zeichenfläche = Viewport minus Padding
   (12 px ringsum); die beiden Aktionsknöpfe (übernehmen/verwerfen) liegen
   frei am rechten oberen Rand über der Zeichenfläche. Über dem rlv-modal
   (z 1100), unter Toasts (z 1300). R4b-2: Der Rand ist transparent — das
   Grau des darunterliegenden Modals scheint durch, nur die Zeichenfläche
   trägt die eigene Grundfläche. */
.signatur-vollbild {
  position: fixed;
  inset: 0;
  z-index: 1200;
  padding: var(--rlv-space-3);
  background: rgba(31, 30, 31, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

/* R4t-3 (2026-11-12, Nutzer): Das Vollbild-Zeichenfeld behält in beiden
   Orten (Touren-Ausführung und Bestell-Bestätigung) das Seitenverhältnis
   des kleinen Signaturfelds (560:140 = 4:1) bei — bei abweichendem
   Bildschirmformat wird es mittig eingepasst, nicht gestreckt. */
.signatur-vollbild canvas {
  display: block;
  width: min(calc(100vw - 2 * var(--rlv-space-3)),
             calc((100vh - 2 * var(--rlv-space-3)) * 4));
  aspect-ratio: 560 / 140;
  height: auto;
  box-sizing: border-box;
  border: 1px dashed var(--rlv-border-strong);
  border-radius: var(--rlv-radius-card);
  background: var(--rlv-surface);
  touch-action: none;
  cursor: crosshair;
}

.signatur-vollbild-aktionen {
  position: absolute;
  top: calc(var(--rlv-space-3) + 8px);
  right: calc(var(--rlv-space-3) + 8px);
  display: flex;
  gap: var(--rlv-space-2);
}

.tour-gate-hinweis {
  margin: 0;
  color: var(--rlv-text-2);
  font-size: 12px;
}

/* Live-Kamerabild im Scan-Modal (R3q-3, 2026-11-08; R3v: startet mit dem
   Öffnen; R3v-2: volle Sektionsbreite — die alte 480-px-Obergrenze ließ
   rechts einen deutlich breiteren Rand als links). Schlägt der Start fehl,
   übernimmt der rahmengroße Platzhalter mit dem Knopf „Kamera starten“
   exakt die Bildfläche; sind alle Codes erkannt, die Erfolgs-Kachel. */
.scan-video {
  display: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--rlv-primary);
  border-radius: var(--rlv-radius-card);
  background: var(--rlv-surface-2);
  margin-bottom: var(--rlv-space-2);
}

.scan-video.lauf {
  display: block;
}

.scan-kamera-fehler,
.scan-erfolg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rlv-space-2);
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--rlv-border-strong);
  border-radius: var(--rlv-radius-card);
  background: var(--rlv-surface-2);
  color: var(--rlv-text-2);
  margin-bottom: var(--rlv-space-2);
}

.scan-kamera-fehler[hidden],
.scan-erfolg[hidden] {
  display: none;
}

.scan-kamera-fehler p,
.scan-erfolg p {
  margin: 0;
  font-size: 13px;
}

.scan-erfolg {
  border-style: solid;
  border-color: var(--rlv-ok);
  background: var(--rlv-ok-soft);
  color: var(--rlv-ok-text);
}

/* Scanner-/Manuell-Fallback unter dem Kamerabild (R3v) */
.scan-manuell {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlv-space-3);
  margin-top: var(--rlv-space-2);
}

.scan-manuell rlv-input {
  flex: 1 1 200px;
  max-width: 280px;
}

/* Produkt-Sektion des Scan-Modals (R3v): Menge normal neben dem fetten
   Namen, Soll-Werte als Bullets. Der Name steht randlos unter der
   Sektions-Kopfbar (R3v-2: Standard-<p>-Marge war zu groß). */
#scan-produkt {
  margin: 0;
}

.scan-menge {
  font-weight: 400;
  color: var(--rlv-text-2);
}

.scan-bullets {
  margin: var(--rlv-space-1) 0 0;
  padding-left: 18px;
}

.scan-bullets li {
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Rote „Fehlt noch“-Box im Hauptbereich (R3v, Muster des Vorgang-Modals) */
.scan-fehlt {
  margin-top: var(--rlv-space-2);
  align-items: flex-start;
}

.scan-fehlt .scan-fehlt-titel {
  margin: 0;
  font-weight: 600;
  font-size: 13px;
}

.scan-fehlt rlv-button {
  margin-top: var(--rlv-space-1);
}

/* Admin-Screens (2026-11-07): Config-Akkordeon-Zeilen als schlanke
   Schlüssel-Wert-Tabelle ohne Rahmen; Marken-Karte mit Logo-Vorschau. */
.config-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.config-tabelle th,
.config-tabelle td {
  padding: var(--rlv-space-1) var(--rlv-space-2);
  border-bottom: 1px solid var(--rlv-border);
  text-align: left;
}

.config-tabelle tr:last-child th,
.config-tabelle tr:last-child td { border-bottom: 0; }

.config-tabelle th {
  color: var(--rlv-text-2);
  font-weight: 600;
  width: 40%;
}

.marke-zeile {
  display: flex;
  align-items: center;
  gap: var(--rlv-space-3);
}

.marke-logo {
  height: 40px;
  width: auto;
}

/* Schalter-schwebend/Dichte-Regeln entfallen (R3i, 2026-11-07) — der
   schwebende Demo-Werkzeugkasten mit dem Dichte-Schalter ist entfernt. */

/* Hamburger und Drawer-Verdunkelung: standardmäßig aus, unter 768 px an. */
#hamburger {
  display: none;
}

.drawer-verdunkelung {
  display: none;
}

/* ---------- Responsive über echte Viewport-Breite (nur Media Queries) ---------- */

/* R3o Grenzwert-Konvention: alle Breakpoints liegen auf halben Pixeln, damit
   fraktionale Layout-Viewports (Zoom-Stufe × Device-Pixel-Ratio, z. B.
   767,5 CSS-px) nie in die Lücke zwischen max-width: 767px und min-width:
   768px fallen — dort hätte KEINE Query getroffen und das Basis-Layout (volles
   Menü in Flow) wäre sichtbar gewesen. Bei exakt 767,5 px treffen Mobile+Rail
   beide und lösen per Kaskade auf Mobile auf (Mobile steht später im Blatt);
   bei exakt 1023,5 px Rail+Sticky — beides funktional. */

@media (min-width: 767.5px) and (max-width: 1023.5px) {
  body {
    /* R3m: 64 px ließen rechts einen grauen Rand um die Icons — 48 px ist das
       übliche Icon-Rail-Maß und fasst den 16-px-Icon-Kern eng. */
    --demo-sidebar-b: 48px;
  }
  .sidebar .sektions-kicker {
    display: none;
  }
  .sidebar rlv-menu-item .label {
    display: none;
  }
  /* R3m: Icon in der Rail zentrieren (ohne Label fehlt das linke Padding-
     Gegengewicht); die 3-px-Aktiv-Bar bleibt am linken Rand. Der leere
     Text-Span muss mit aus, sonst hält sein 8-px-Flex-Gap das Icon nach links. */
  .sidebar rlv-menu-item::part(knopf) {
    justify-content: center;
    padding: 0;
  }
  .sidebar rlv-menu-item::part(text) {
    display: none;
  }
}

@media (max-width: 767.5px) {
  body {
    grid-template-columns: 1fr;
  }
  /* R3m: ohne diesen Override erzeugt die Spalten-Pin-Position 2/3 der
     Content-Zelle eine implizite zweite Spur — die leere erste Spur bleibt
     als weiße Lücke links stehen. */
  .content {
    grid-area: 2 / 1 / 3 / 2;
  }
  .sidebar {
    position: fixed;
    top: var(--demo-header-h);
    bottom: 0;
    /* R3o-2: Versteckt wird per left (off-screen) statt transform — eine
       transform-Transition würde auch beim Überqueren des Breakpoints
       laufen (none → -100%) und das volle Menü sichtbar nach links
       herausfahren lassen. left wechselt beim Crossing von auto (in-flow)
       auf -248px: auto ist nicht interpolierbar, die Transition startet
       daher nicht — der Wechsel bleibt unsichtbar. Die Drawer-Animation
       (−248 ↔ 0) läuft weiter, visibility schaltet erst am Ende des
       Ausfahrwegs um. */
    left: -248px;
    z-index: 1050;
    width: 248px;
    visibility: hidden;
    transition: left var(--rlv-motion-expand) ease,
                visibility 0s linear var(--rlv-motion-expand);
    box-shadow: var(--rlv-shadow-overlay);
  }
  body.drawer-offen .sidebar {
    left: 0;
    visibility: visible;
    transition: left var(--rlv-motion-expand) ease;
  }
  /* Verdunkelung nur bei offenem Drawer — sonst blockt sie jeden Touch. */
  body.drawer-offen .drawer-verdunkelung {
    display: block;
    position: fixed;
    inset: var(--demo-header-h) 0 0 0;
    background: rgba(10, 10, 10, .4);
    z-index: 1040;
  }
  #hamburger {
    display: inline-flex;
  }
  /* R3k: „Meine Daten“-Raster bricht auf einer Spalte um (Reihenfolge
     Stammdaten → Signatur → Sprache). */
  .meinedaten-raster {
    grid-template-columns: 1fr;
  }
  /* Der rechte Statusleisten-Cluster muss in 390 px passen: In der Demo
     entfallen Status-Text und Benutzername (wifi-Icon, Foto und Hamburger
     bleiben); die Textinhalte bleiben im DOM ablesbar. Der Name sitzt im
     Shadow-Root des Components und wird über ::part(name) ausgeblendet. */
  rlv-statusbar .status-text,
  rlv-statusbar::part(name) {
    display: none;
  }
}