/* Demo-eigene Styles der PWA-Demo (UI-Phase 2a, Task 11): Handy-Hülle (Rahmen auf
   großem Viewport, volle Breite auf kleinem), Statusleisten-Umgebung, Rollen-Segment,
   Karten-Stapel der beiden Prozesse, EAN-Scan-Zeile, Touren-Karten mit
   Unterschriften-Fläche, kompaktes KPI-Raster, Fußzeile mit Sprachumschalter und die
   schwebende Preset-Steuerung. Bewusst NICHT in tokens.css, damit die verbindlichen
   Tokens unverändert bleiben. Alle Werte ausschließlich über var(--rlv-…).

   PRESET-DUPLIKATE (unten, Abschnitt [data-groesse]): Der Handy-Rahmen bekommt seine
   Rahmen-Optik (Rand, Radius, Schatten, feste Höhe 844 px) über die Media Query ab
   431 px echter Viewportbreite; auf echten Handy-Breiten füllt die App dagegen die
   Breite und bleibt randlos. Der Preset-Schalter setzt jedoch nur data-groesse am
   #app-Rahmen — die Viewportbreite bleibt unverändert, die Media Query greift dort
   also NICHT. Deshalb ist der Regelblock der Media Query zusätzlich als
   [data-groesse]-Selektor dupliziert. Bei Änderungen IMMER beide Blöcke pflegen.

   Preset-Steuerung: sie schwebt unten links AUHALB des zentrierten App-Rahmens; auf
   schmalen Viewports (Rahmen füllt die Breite) reserviert die Fußzeile über
   padding-left freien Raum, damit kein interaktives Element unter der Steuerung liegt. */

html, body {
  height: 100%;
}

body {
  overflow: hidden;
  background: var(--rlv-surface-2);
}

.app {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 390px;
  height: 100vh;
  margin: 0 auto;
  background: var(--rlv-surface);
}

/* Der Benutzername in der Statusleiste bleibt auf dem Handy sichtbar
   (Mobil-Vertrag Screen 1b: Name + Foto vor dem Menü). */

/* kleiner Textlink der Demo-Schalter in der Statusleiste (slot=rechts). */
.demo-link {
  flex: none;
  border: none;
  background: none;
  padding: 2px;
  font: 600 10px/1.2 var(--rlv-font-body);
  color: var(--rlv-primary);
  cursor: pointer;
  white-space: nowrap;
}

.demo-link[hidden] {
  display: none;
}

/* Rollenumschalter (Segment-Control) direkt unter der Statusleiste. */
.rollen {
  flex: none;
  display: flex;
  border-bottom: 1px solid var(--rlv-border);
  background: var(--rlv-surface-2);
  padding: var(--rlv-space-2) var(--rlv-space-3);
  gap: 0;
}

.rollen button {
  flex: 1 1 auto;
  border: 1px solid var(--rlv-border);
  background: var(--rlv-surface);
  padding: var(--rlv-space-2) var(--rlv-space-2);
  font: 600 12px/1.4 var(--rlv-font-body);
  color: var(--rlv-text-2);
  cursor: pointer;
}

.rollen button + button {
  border-left: none;
}

.rollen button:first-of-type {
  border-radius: var(--rlv-radius-ctrl) 0 0 var(--rlv-radius-ctrl);
}

.rollen button:last-of-type {
  border-radius: 0 var(--rlv-radius-ctrl) var(--rlv-radius-ctrl) 0;
}

.rollen button[aria-pressed="true"] {
  background: var(--rlv-accent-soft);
  color: var(--rlv-text);
}

/* Eine scrollbare Seite je Ansicht; die beiden Prozesse stehen als Karten-Stapel. */
.content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--rlv-space-3);
}

.ansicht {
  display: flex;
  flex-direction: column;
  gap: var(--rlv-space-4);
}

.ansicht[hidden] {
  display: none;
}

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

.ansicht > .einleitung {
  margin: calc(-1 * var(--rlv-space-3)) 0 0;
}

.ansicht h2 {
  margin: 0 0 var(--rlv-space-1);
}

.karten-kopf {
  margin-bottom: var(--rlv-space-2);
}

.schritt-titel {
  margin: 0 0 var(--rlv-space-2);
}

.beschreibung {
  margin: 0 0 var(--rlv-space-3);
  color: var(--rlv-text-2);
}

/* EAN-Scan-Simulator: Eingabefeld plus Scannen-Knopf. */
.scan-zeile {
  display: flex;
  align-items: flex-end;
  gap: var(--rlv-space-2);
  margin-bottom: var(--rlv-space-3);
}

.scan-zeile rlv-input {
  flex: 1 1 auto;
}

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

.position-zeile {
  box-sizing: border-box;
  border: 1px solid var(--rlv-border);
  border-radius: var(--rlv-radius-ctrl);
  padding: var(--rlv-space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--rlv-space-2);
}

.positions-name {
  flex: 1 1 100%;
  font-weight: 600;
}

.position-zeile rlv-input {
  flex: 1 1 140px;
}

.pflicht-hinweis {
  margin: var(--rlv-space-2) 0 0;
}

.zeilen-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlv-space-2);
  margin-bottom: var(--rlv-space-3);
}

/* Schritt „Wer liefert?“: die beiden Options-Karten untereinander. */
.liefer-optionen {
  display: flex;
  flex-direction: column;
  gap: var(--rlv-space-3);
}

/* Kennzahlen-Karten der Admin-Ansicht: volle Breite (Nutzervertrag 2026-11-06 —
   auf PWA bekommen Karten stets die volle Breite). */
.kpi-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rlv-space-2);
}

.kpi-raster rlv-card .kpi-zahl {
  font: 700 22px/1.2 var(--rlv-font-body);
  color: var(--rlv-primary);
  font-variant-numeric: tabular-nums;
}

/* Touren-Karten der Fahrer-Ansicht. */
.touren-liste {
  display: flex;
  flex-direction: column;
  gap: var(--rlv-space-3);
}

.tour-info {
  margin: 0 0 var(--rlv-space-3);
}

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

.kommissionier-block {
  margin-top: var(--rlv-space-3);
}

.kommissionier-block[hidden] {
  display: none;
}

.kommissionier-zeile {
  display: flex;
  align-items: center;
  gap: var(--rlv-space-2);
  flex-wrap: wrap;
}

.kommissionier-zeile .positions-name {
  flex: 1 1 160px;
}

/* Berührbare Unterschriften-Platzhalterfläche (Fahrer-Abschluss). */
.unterschrift-flaeche {
  box-sizing: border-box;
  border: 1px dashed var(--rlv-border);
  border-radius: var(--rlv-radius-card);
  min-height: 88px;
  margin-top: var(--rlv-space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rlv-space-2);
  color: var(--rlv-text-2);
  cursor: pointer;
  text-align: center;
}

.unterschrift-flaeche[hidden] {
  display: none;
}

.unterschrift-flaeche.erfasst {
  border-style: solid;
  border-color: var(--rlv-ok);
  background: var(--rlv-ok-soft);
  color: var(--rlv-text);
}

.unterschrift-flaeche svg {
  width: 160px;
  height: 44px;
}

.unterschrift-flaeche p {
  margin: 0;
}

/* Fußzeile mit Sprachumschalter (Position demonstriert, Wirkung folgt in Phase 2b). */
.fusszeile {
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rlv-space-2);
  padding: var(--rlv-space-2) var(--rlv-space-3) var(--rlv-space-2) 108px;
  border-top: 1px solid var(--rlv-border);
  background: var(--rlv-surface-2);
}

.fusszeile p {
  flex: 1 1 auto;
  margin: 0;
}

/* Schwebende Größen-Presets: unten links, außerhalb des App-Rahmens. */
.schalter-schwebend {
  position: fixed;
  left: var(--rlv-space-3);
  bottom: var(--rlv-space-3);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: var(--rlv-space-2);
  background: var(--rlv-surface);
  border: 1px solid var(--rlv-border);
  border-radius: var(--rlv-radius-card);
  box-shadow: var(--rlv-shadow-overlay);
  padding: var(--rlv-space-2);
}

.schalter-schwebend button {
  border: 1px solid var(--rlv-border);
  background: var(--rlv-surface);
  border-radius: var(--rlv-radius-ctrl);
  padding: var(--rlv-space-1) var(--rlv-space-2);
  font: 600 12px/1.4 var(--rlv-font-body);
  color: var(--rlv-text-2);
  cursor: pointer;
}

.schalter-schwebend button[aria-pressed="true"] {
  background: var(--rlv-accent-soft);
  color: var(--rlv-text);
}

/* Auf kurzen Viewports (< 768 px) klappt die Steuerung zu einer
   „Demo-Werkzeuge“-Leiste zusammen (Kollisionsvermeidung nach Review Task 11);
   auf breiten Viewports bleibt sie wie bisher ausgeklappt außerhalb des Rahmens. */
.werkzeug-kippschalter {
  display: none;
}

/* R3o: Grenze wie in tokens.css auf halbe Pixel (fraktionale Viewport-Breiten). */
@media (max-width: 767.5px) {
  .werkzeug-kippschalter {
    display: inline-flex;
  }
  .schalter-schwebend:not(.geoeffnet) > :not(.werkzeug-kippschalter) {
    display: none;
  }
}

/* ------------------- Responsive über echte Viewport-Breite ------------------- */

/* Ab 431 px echter Breite: Handy-Rahmen mit Rand, Radius, Schatten und fester Höhe. */
@media (min-width: 431px) {
  .app {
    width: 390px;
    height: 844px;
    margin: var(--rlv-space-4) auto;
    border: 1px solid var(--rlv-border);
    border-radius: var(--rlv-radius-card);
    box-shadow: var(--rlv-shadow-overlay);
  }
}

/* ---------- PRESET-DUPLIKATE der Media-Query-Regeln (siehe Kopf) ---------- */

.app[data-groesse="390x844"] {
  width: 390px;
  height: 844px;
  margin: var(--rlv-space-4) auto;
  border: 1px solid var(--rlv-border);
  border-radius: var(--rlv-radius-card);
  box-shadow: var(--rlv-shadow-overlay);
}

.app[data-groesse="360x800"] {
  width: 360px;
  height: 800px;
  margin: var(--rlv-space-4) auto;
  border: 1px solid var(--rlv-border);
  border-radius: var(--rlv-radius-card);
  box-shadow: var(--rlv-shadow-overlay);
}