/* Lager-Erfassung: nur hell, Systemschrift, Farben nur über die Tokens unten
   (Leitplanken: recherche-ui-leitplanken.md, Abschnitt 3). */

:root {
  color-scheme: light;
  --grund: #ffffff;
  --seite: #f4f5f6;
  --text: #101112;
  --text-2: #4d5157;
  --hilfe: #6b6b6b;
  --rand: #767c82;
  --trenner: rgba(0, 0, 0, 0.10);
  --primaer: #101112;
  --auf-primaer: #ffffff;
  --akzent: #ff6600;
  --auf-akzent: #101112;
  --fokus: #16181c;
  --fehler: #a5251d;
  --auf-fehler: #ffffff;
  --aufnahme: #d92d20;          /* roter Punkt während der Aufnahme */
  --erfolg-flaeche: #1e9e4a;
  --erfolg-text: #14753a;
  --druck-hell: rgba(255, 255, 255, 0.18);
  --druck-dunkel: rgba(0, 0, 0, 0.06);
  --abdunkeln: rgba(0, 0, 0, 0.72);
  --schleier: rgba(0, 0, 0, 0.40);         /* hinter dem offenen Menü */
  --schatten-menue: 0 0 24px rgba(0, 0, 0, 0.18);
  /* Markenlogos sind meist dunkel auf transparent: hell ohne Unterlage, dunkel auf weißem Schild. */
  --logo-grund: transparent;
  --logo-polster: 0;
  --schalter-knopf: #ffffff;      /* Knopf des Schalters, hell und dunkel gleich */
  /* Kamera in der Seite: dunkel wie ein Sucher (Werte aus der Dunkel-Tabelle der Leitplanken) */
  --kamera-grund: #08090a;
  --kamera-text: #ffffff;
  --kamera-text-2: #b9bcc0;
  --kamera-linie: rgba(255, 255, 255, 0.55);
  --kamera-flaeche: rgba(255, 255, 255, 0.14);
  --kamera-fokus: #ffffff;
  --kamera-fehler: #ff8a80;
  --kamera-erfolg: #3ecf6a;
  --blitz: #ffffff;

  --radius: 10px;
  --radius-klein: 8px;
  --dauer: 200ms;
  --leiste-hoehe: calc(56px + 24px + env(safe-area-inset-bottom, 0px));
  --z-kopf: 10;
  --z-leiste: 20;
  --z-menue: 30;
  --menue-breite: 264px;
  --z-sprung: 100;
}

/* --- Dunkel (Kili, 14.10.2026: „Darkmode, standardmäßig auf Geräteeinstellung“) ---------------------------
   Ohne Wahl im Menü folgt die Seite dem Gerät, sonst <html data-farbe="hell|dunkel"> (Cookie lager_farbe). Zwei
   gleiche Blöcke, weil Medienabfrage und Attribut nicht in eine Regel passen; der Prüfstand vergleicht sie. Nur für
   den Bildschirm: Gedruckt wird immer hell (Laufzettel). Kamera und Scanner haben eigene, immer dunkle Token. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) {
    color-scheme: dark;
    --grund: #1a1c1f;
    --seite: #0f1012;
    --text: #eceef0;
    --text-2: #b6bbc1;
    --hilfe: #9da2a8;
    --rand: #7d838b;
    --trenner: rgba(255, 255, 255, 0.12);
    --primaer: #eceef0;
    --auf-primaer: #101112;
    --fokus: #ffffff;
    --fehler: #ff8a80;
    --auf-fehler: #101112;
    --aufnahme: #ff5a4f;
    --erfolg-flaeche: #2fb35c;
    --erfolg-text: #5ad286;
    --druck-hell: rgba(0, 0, 0, 0.14);
    --druck-dunkel: rgba(255, 255, 255, 0.08);
    --abdunkeln: rgba(0, 0, 0, 0.78);
    --schleier: rgba(0, 0, 0, 0.55);
    --schatten-menue: 0 0 24px rgba(0, 0, 0, 0.60);
    --logo-grund: #ffffff;
    --logo-polster: 2px 4px;
  }
}
@media screen {
  :root[data-farbe="dunkel"] {
    color-scheme: dark;
    --grund: #1a1c1f;
    --seite: #0f1012;
    --text: #eceef0;
    --text-2: #b6bbc1;
    --hilfe: #9da2a8;
    --rand: #7d838b;
    --trenner: rgba(255, 255, 255, 0.12);
    --primaer: #eceef0;
    --auf-primaer: #101112;
    --fokus: #ffffff;
    --fehler: #ff8a80;
    --auf-fehler: #101112;
    --aufnahme: #ff5a4f;
    --erfolg-flaeche: #2fb35c;
    --erfolg-text: #5ad286;
    --druck-hell: rgba(0, 0, 0, 0.14);
    --druck-dunkel: rgba(255, 255, 255, 0.08);
    --abdunkeln: rgba(0, 0, 0, 0.78);
    --schleier: rgba(0, 0, 0, 0.55);
    --schatten-menue: 0 0 24px rgba(0, 0, 0, 0.60);
    --logo-grund: #ffffff;
    --logo-polster: 2px 4px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--seite);
  color: var(--text);
  font: 400 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
[hidden] { display: none !important; }

.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.unsichtbar {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
h1:focus:not(:focus-visible), .inhalt:focus:not(:focus-visible) { outline: none; }

.sprunglink {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: var(--z-sprung);
  padding: 12px 16px;
  background: var(--grund);
  color: var(--text);
  font-weight: 600;
  border-radius: var(--radius-klein);
}
.sprunglink:focus { top: 8px; }

/* --- Kopf ------------------------------------------------------------------------------ */

.kopf {
  position: relative;
  z-index: var(--z-kopf);
  background: var(--grund);
  border-bottom: 1px solid var(--trenner);
  padding-top: env(safe-area-inset-top, 0px);
}
.kopf-innen {
  max-width: 40rem;
  margin: 0 auto;
  padding: 8px 16px;
  min-height: 64px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 8px;
}
.kopf-marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
}
.kopf-marke img { display: block; width: auto; height: 40px; }

/* --- Menü der Bereiche (Kili, 13.10.2026) ---------------------------------------------------
   Handy: ☰ links im Kopf schiebt das Menü von links ein, Schleier dahinter. Ab 1024 px steht es fest
   links, der Kopf entfällt (Marke steht im Menü). */

.kopf-menue, .menue-zu {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-klein);
  background: none;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kopf-menue { margin-left: -12px; }
.kopf-menue .icon, .menue-zu .icon { width: 24px; height: 24px; }
.kopf-menue:active, .menue-zu:active { background: var(--seite); }

.menue {
  position: fixed;
  z-index: var(--z-menue);
  top: 0;
  bottom: 0;
  left: 0;
  width: min(var(--menue-breite), 84vw);
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--grund);
  box-shadow: var(--schatten-menue);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform var(--dauer) ease, visibility 0s linear var(--dauer);
}
body.menue-offen { overflow: hidden; }
body.menue-offen .menue { transform: none; visibility: visible; transition: transform var(--dauer) ease, visibility 0s; }
.menue-schleier { position: fixed; inset: 0; z-index: calc(var(--z-menue) - 1); background: var(--schleier); }
.menue-schleier[hidden] { display: none; }

.menue-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 64px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--trenner);
}
.menue-liste { margin: 0; padding: 8px; list-style: none; }
.menue-verwaltung { border-top: 1px solid var(--trenner); }
.menue-eintrag {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: var(--radius-klein);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.menue-eintrag .icon { width: 22px; height: 22px; flex: none; }
/* Punkt am ☰, wenn ein Bereich etwas meldet (am Handy ist das Menü meist zu) */
.kopf-menue { position: relative; }
.kopf-punkt {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 0 2px var(--grund);
}
/* Zähler am Bereich (Retouren: Antwort da, Frist abgelaufen, Erstattung fällig) */
.menue-zahl {
  margin-left: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.menue-eintrag:active { background: var(--seite); }
.menue-eintrag[aria-current="page"] { background: var(--seite); font-weight: 700; }
.menue-eintrag[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--primaer);
}
@media (hover: hover) {
  .menue-eintrag:hover { background: var(--seite); }
  .kopf-menue:hover, .menue-zu:hover { background: var(--seite); }
}
.menue-farbe { margin: auto 0 0; padding: 8px 16px 12px; border: 0; border-top: 1px solid var(--trenner); }
.menue-farbe legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; color: var(--text-2); font-size: 0.875rem; }
.menue-farbe-wahl { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rand);
                    border-radius: var(--radius-klein); overflow: hidden; }
.menue-farbe-wahl label { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menue-farbe-wahl label + label { border-left: 1px solid var(--rand); }
.menue-farbe-wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.menue-farbe-wahl span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px;
                         color: var(--text); font-size: 0.9375rem; font-weight: 600; }
.menue-farbe-wahl input:checked + span { background: var(--primaer); color: var(--auf-primaer); }
.menue-farbe-wahl input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: -4px; }
.menue-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--trenner);
}
.menue-nutzer {
  min-width: 0;
  color: var(--text-2);
  font-size: 0.9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Seitenwechsel (Kili, 15.10.2026: „Switch zwischen den Modulen … flüssiger“): Browser mit View Transitions blenden
   kurz über, statt weiß neu aufzubauen; Kopf und festes Menü bleiben dabei stehen. Ohne Unterstützung wie bisher. */
@view-transition { navigation: auto; }
.kopf { view-transition-name: kopf; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

@media (min-width: 1024px) {
  .menue { view-transition-name: menue; }
  body.mit-menue { padding-left: var(--menue-breite); }
  body.mit-menue .kopf, .kopf-menue, .menue-zu, .menue-schleier { display: none; }
  .menue { width: var(--menue-breite); transform: none; visibility: visible; transition: none; box-shadow: none;
           border-right: 1px solid var(--trenner); z-index: var(--z-kopf); }
  body.menue-offen { overflow: visible; }
  body.mit-menue .leiste { left: var(--menue-breite); }
}

.offline, .neue-fassung {
  margin: 0;
  padding: 10px 16px;
  background: var(--primaer);
  color: var(--auf-primaer);
  font-weight: 600;
  text-align: center;
}
.neue-fassung { position: sticky; top: 0; z-index: var(--z-leiste); }

/* --- Inhalt ---------------------------------------------------------------------------- */

.inhalt {
  max-width: 40rem;
  margin: 0 auto;
  padding: 16px 16px 40px;
}
body.mit-leiste .inhalt { padding-bottom: calc(var(--leiste-hoehe) + 32px); }

h1 { margin: 4px 0 8px; font-size: 1.5rem; line-height: 1.25; font-weight: 700; }
h2 { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.3; font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.3; font-weight: 700; }
p { margin: 0 0 12px; }
.abschnitt { margin-top: 28px; }
.abstand-oben { margin-top: 24px; }
.unterabschnitt { margin-top: 24px; }
.hilfe { color: var(--hilfe); font-size: 0.9375rem; }
.leer { color: var(--text-2); }

.kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
}
/* „Hilfe“ der Erfassungsschritte: rechts neben „Schritt n von 5“, der Text erscheint unter der Überschrift */
.hilfe-knopf { margin-left: auto; color: var(--text-2); }
.schritt-hilfe { margin: 0 0 12px; }
.fortschritt {
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ansicht:not([hidden]) { animation: einblenden var(--dauer) ease-out; }
@keyframes einblenden {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* --- Knöpfe ---------------------------------------------------------------------------- */

.knopf {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--dauer) ease-out, box-shadow var(--dauer) ease-out;
}
.knopf-primaer {
  width: 100%;
  min-height: 56px;
  background: var(--primaer);
  color: var(--auf-primaer);
  font-size: 1.0625rem;
}
.knopf-primaer:active:not(:disabled) { box-shadow: inset 0 0 0 999px var(--druck-hell); }
.knopf-zweit { background: var(--grund); color: var(--text); border-color: var(--rand); }
.knopf-zweit:active:not(:disabled) { background: var(--seite); }
.knopf-gefahr { background: var(--grund); color: var(--fehler); border-color: var(--fehler); }
.knopf-gefahr:active:not(:disabled) { background: var(--seite); }
.knopf-breit { width: 100%; }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
/* Sieht gesperrt aus, nimmt aber den Tipp an und zeigt, was fehlt (z. B. offene Prüfpunkte). */
.knopf.ist-weich-gesperrt { opacity: 0.45; }
.knopf:focus-within { outline: 2px solid var(--fokus); outline-offset: 2px; }
.knopf:focus-within:not(:has(:focus-visible)):not(:focus-visible) { outline: none; }

@media (hover: hover) {
  .knopf-primaer:hover:not(:disabled) { box-shadow: inset 0 0 0 999px var(--druck-hell); }
  .knopf-zweit:hover:not(:disabled), .knopf-gefahr:hover:not(:disabled) { background: var(--seite); }
  .textknopf:hover { text-decoration-thickness: 2px; }
}

.textknopf {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.textknopf .icon { width: 20px; height: 20px; }
.textknopf:focus-within { outline: 2px solid var(--fokus); outline-offset: 2px; }
.textknopf:focus-within:not(:has(:focus-visible)):not(:focus-visible) { outline: none; }

.knopf-icon {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}
.knopf-icon:active:not(:disabled) { background: var(--seite); }
.knopf-icon:disabled { opacity: 0.45; cursor: not-allowed; }

.kreisel {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: drehen 0.8s linear infinite;
}
.kreisel.gross { width: 44px; height: 44px; border-width: 4px; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* --- Leiste unten ---------------------------------------------------------------------- */

.leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-leiste);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--grund);
  box-shadow: 0 -1px 0 var(--trenner);
}
.leiste-innen { max-width: 40rem; margin: 0 auto; }
/* Offene Bildschirmtastatur: Leiste nicht über das aktive Feld legen. */
body.tastatur .leiste { position: static; }
body.tastatur.mit-leiste .inhalt { padding-bottom: 24px; }

/* --- Formulare ------------------------------------------------------------------------- */

.formular { margin-top: 8px; }
.feld { margin: 16px 0; }
.feld > label, .feldtitel, legend {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}
.feld > .hilfe { margin-bottom: 6px; }
.marke { color: var(--text-2); font-size: 0.9375rem; font-weight: 400; }

input[type="text"], input[type="password"], textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--grund);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--hilfe); opacity: 1; }
input[readonly] { background: var(--seite); }
input[type="checkbox"], input[type="radio"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--primaer);
}
.ist-fehlerhaft input[type="text"], .ist-fehlerhaft textarea { border-color: var(--fehler); }

.passwort { display: flex; gap: 8px; }
.passwort input { flex: 1; min-width: 0; }

.haken-feld {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  margin: 12px 0;
  padding: 10px 0;
  font-weight: 600;
  cursor: pointer;
}

.feldfehler {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--fehler);
  font-weight: 600;
}
.feldfehler .icon { width: 20px; height: 20px; margin-top: 2px; }

/* --- Meldungen ------------------------------------------------------------------------- */

.meldung, .fehlerbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
}
.meldung > .icon, .fehlerbox-kopf .icon { margin-top: 1px; }
.meldung-fehler, .fehlerbox { border-color: var(--fehler); }
.meldung-fehler > .icon { color: var(--fehler); }
.meldung-warnung { border-color: var(--text); }
.meldung-ok { border-color: var(--erfolg-text); }
.meldung-ok > .icon { color: var(--erfolg-text); }
.meldung ul { margin: 6px 0 0; padding-left: 20px; }
/* Neue Adresse (Kili, 16.10.2026), nur auf lager.powershop.bike: Link in Textfarbe wie die übrigen Textlinks. */
.umzug { margin-top: 0; }
.umzug a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.fehlerbox { display: block; }
.fehlerbox-kopf { display: flex; gap: 10px; margin: 0 0 6px; color: var(--fehler); font-weight: 700; }
.fehlerbox ul { margin: 0; padding: 0; list-style: none; }
.fehlerbox li { margin: 0 0 6px; }
.fehlerbox .textknopf { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 10px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  vertical-align: middle;
}
.chip .icon { width: 16px; height: 16px; }
.chip-pruefen { background: var(--akzent); color: var(--auf-akzent); }
.chip-sicher { background: var(--grund); color: var(--erfolg-text); border-color: var(--erfolg-text); }

/* --- Start ----------------------------------------------------------------------------- */

.vorgaenge, .zugaenge { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.vorgang {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--trenner);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  text-decoration: none;
  touch-action: manipulation;
}
.vorgang:active { background: var(--seite); }
.vorgang img, .vorgang-platzhalter {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--seite);
  color: var(--text-2);
  object-fit: cover;
}
.vorgang-text, .zugang-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.vorgang-titel, .zugang-name { font-weight: 600; }
.vorgang-meta { color: var(--hilfe); font-size: 0.875rem; }
.vorgang-pfeil { color: var(--text-2); }
.kosten { padding: 12px 16px; border: 1px solid var(--trenner); border-radius: var(--radius); background: var(--grund); }
.kosten-zahl { margin: 0 0 8px; font-variant-numeric: tabular-nums; }
/* <progress> statt Breite im style-Attribut: Die CSP (style-src 'self') verbietet Inline-Stile. */
.kosten-balken { display: block; width: 100%; height: 8px; margin: 0 0 8px; border: 0; border-radius: 999px;
  background: var(--seite); color: var(--primaer); overflow: hidden; -webkit-appearance: none; appearance: none; }
.kosten-balken::-webkit-progress-bar { background: var(--seite); border-radius: 999px; }
.kosten-balken::-webkit-progress-value { background: var(--primaer); border-radius: 999px; }
.kosten-balken::-moz-progress-bar { background: var(--primaer); border-radius: 999px; }
.kosten > :last-child { margin-bottom: 0; }   /* ohne Erklärtext (Kili, 13.10.2026) */
/* Offene Vorgänge: nach links wischen legt „Verwerfen“ frei (Kili, 13.10.2026). Der Knopf liegt hinter dem Link
   und ist auch per Tastatur und Bildschirmleser erreichbar; Fokus schiebt die Zeile auf. */
/* iOS-Stil (Kili, 13.10.2026): Die ganze Zeile gleitet nach links und verschwindet erst am Bildschirmrand, nicht
   am Seitenrand; nichts wird gekürzt. Deshalb schneidet .wischbar nicht ab. Zum Knopf bleibt derselbe Abstand wie
   zwischen den Zeilen (8 px, im Skript). */
.wischbar { position: relative; border-radius: var(--radius); }
.wischbar .vorgang { position: relative; z-index: 1; touch-action: pan-y; transition: transform var(--dauer) ease;
  -webkit-user-drag: none; -webkit-touch-callout: none; }   /* kein Link-Ziehen, das den Wisch abbricht */
.vorgang-verwerfen {
  position: absolute; top: 0; right: 0; bottom: 0; width: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: var(--radius); background: var(--fehler); color: var(--auf-fehler);
  font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
.vorgang-verwerfen:focus-visible { outline: 3px solid var(--fokus); outline-offset: -5px; }
/* Geschlossen unsichtbar: Sonst blitzt das Rot an den runden Ecken der Zeile durch. Fokus öffnet die Zeile (JS). */
.wischbar .vorgang-verwerfen { opacity: 0; }
.wischbar.wischt .vorgang-verwerfen, .wischbar.ist-offen .vorgang-verwerfen { opacity: 1; }
.wischbar.ist-weg { overflow: hidden; transition: height var(--dauer) ease, opacity var(--dauer) ease, margin var(--dauer) ease; opacity: 0; }
.stand { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; font-weight: 600; color: var(--text-2); }
.stand .icon { width: 16px; height: 16px; }
.stand-fehler { color: var(--fehler); }
.stand-fertig { color: var(--erfolg-text); }
.stand-pruefen { color: var(--text); }

.zugang {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--trenner);
  border-radius: var(--radius);
  background: var(--grund);
}

/* --- Verwaltung: Zugänge (Kili, 15.10.2026: Zugang anklicken, darin Module schalten und sperren) ------------ */
.zugang-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--trenner);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.zugang-zeile:active { background: var(--seite); }
@media (hover: hover) { .zugang-zeile:hover { background: var(--seite); } }
.einladen > summary.einladen-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: -8px 0;            /* Karte bleibt zugeklappt so hoch wie eine Zeile */
  list-style: none;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.einladen > summary.einladen-kopf::-webkit-details-marker { display: none; }
.einladen-kopf .icon { width: 22px; height: 22px; flex: none; }
.einladen-kopf .zweitweg-pfeil { margin-left: auto; color: var(--text-2); }
.einladen[open] > summary.einladen-kopf { margin-bottom: 8px; }
.einladen-module { margin: 4px 0 8px; padding: 0; border: 0; }
.einladen-module legend { padding: 0; color: var(--text-2); font-size: 0.875rem; font-weight: 600; }
.einladen-module .haken-feld { margin: 4px 0; }
.einladen:has(input[name="admin"]:checked) .einladen-module { display: none; }   /* Admins haben alle Module */
.zugang-hinweis { display: block; font-weight: 400; }
.zugang-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; }
.zugang-module { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.zugang-module li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.zugang-module .icon, .schalter-feld > .icon { width: 22px; height: 22px; flex: none; color: var(--text-2); }

.schalter-feld {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  border-bottom: 1px solid var(--trenner);
  cursor: pointer;
}
.schalter-feld:last-of-type { margin-bottom: 16px; }
.schalter-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.schalter-titel { font-weight: 600; }
.schalter-text .hilfe { margin: 0; font-size: 0.875rem; }
input[type="checkbox"].schalter {   /* gegen die allgemeine Checkbox-Regel (24 px) */
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: 999px;
  background: var(--rand);
  cursor: pointer;
  transition: background-color var(--dauer) ease;
}
input[type="checkbox"].schalter::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--schalter-knopf);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--dauer) ease;
}
input[type="checkbox"].schalter:checked { background: var(--erfolg-flaeche); }
input[type="checkbox"].schalter:checked::after { transform: translateX(20px); }
.schalter:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* --- Erfassung ------------------------------------------------------------------------- */

.fotobereich { margin: 16px 0; }
/* minmax(0, 1fr): die einzeilige Hinweis-Vorschau darf die Karte nicht verbreitern */
.fotoliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 8px 0 12px; padding: 0; list-style: none; }
.fotoliste:empty { display: none; }
.foto {
  padding: 12px;
  border: 1px solid var(--trenner);
  border-radius: var(--radius);
  background: var(--grund);
}
.foto-kopf { display: flex; align-items: flex-start; gap: 12px; }
.foto-vergroessern {
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-klein);
  background: none;
  cursor: zoom-in;
}
.foto-bild {
  display: block;
  width: 88px;
  height: 88px;
  aspect-ratio: 1;
  border-radius: var(--radius-klein);
  background: var(--seite);
  object-fit: cover;
}
.foto-info { flex: 1; min-width: 0; }
.foto-titel { margin: 0 0 2px; font-weight: 600; }
.foto-status { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--text-2); font-size: 0.9375rem; }
.foto-status .icon { width: 18px; height: 18px; margin-top: 2px; }
.foto-status.ist-fertig { color: var(--erfolg-text); }
.foto-status.ist-fehler { color: var(--fehler); font-weight: 600; }
.foto-fortschritt { display: block; width: 100%; height: 8px; margin-top: 6px; accent-color: var(--primaer); }
.foto-erneut { margin-top: 12px; }
.foto-hinweis { margin: 12px 0 0; }
.foto-hinweis label { font-size: 0.9375rem; }

/* Schritt 2: „Hinweis zum Foto“ klappt Textfeld und Einsprechen auf; zugeklappt eine Zeile Vorschau. */
.hinweis-auf {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin: 8px 0 0;
  padding: 8px 4px;
  border: 0;
  border-top: 1px solid var(--trenner);
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hinweis-auf .icon { width: 20px; height: 20px; }
.hinweis-auf-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hinweis-auf.hat-hinweis .hinweis-auf-text { font-weight: 400; text-decoration: none; }
.hinweis-auf.hat-hinweis strong { font-weight: 600; }
.hinweis-pfeil { color: var(--text-2); transition: transform var(--dauer) ease-out; }
.hinweis-auf[aria-expanded="true"] .hinweis-pfeil { transform: rotate(90deg); }
.hinweis-auf:active { background: var(--druck-dunkel); }
.hinweis-auf + .foto-hinweis { margin-top: 4px; }

.aufnahme { display: grid; gap: 4px; justify-items: center; }
.kamera { min-height: 56px; font-size: 1.0625rem; }
.galerie { color: var(--text); }
.kamera-hinweis { margin: 4px 0 0; text-align: center; }
.bereich-meldung { margin: 0 0 12px; }
/* Schritt 1: „Foto aufnehmen“ und „Code scannen“ nebeneinander, Symbol über dem Text (passt ab 320 px); „Aus Galerie
   wählen“ darunter über beide Spalten. Ist das Foto da (.aufnahme hidden), steht der Scan-Knopf allein in voller Breite. */
.aufnahme-zeile.mit-scan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 8px;
  grid-template-areas: "kamera scan" "galerie galerie" "hinweis hinweis"; }
.aufnahme-zeile.mit-scan > .aufnahme { display: contents; }
.aufnahme-zeile.mit-scan .kamera { grid-area: kamera; }
.aufnahme-zeile.mit-scan .galerie { grid-area: galerie; justify-self: center; }
.aufnahme-zeile.mit-scan .kamera-hinweis { grid-area: hinweis; }
.aufnahme-zeile.mit-scan .kamera, .scan-knopf { flex-direction: column; gap: 4px; min-height: 72px; padding: 8px; font-size: 1.0625rem; }
.scan-knopf { grid-area: scan; }
.aufnahme-zeile.mit-scan > .aufnahme[hidden] + .scan-knopf { grid-column: 1 / -1; flex-direction: row; gap: 8px; min-height: 56px; }
.nummer-gescannt { margin: 4px 0 0; }

/* Schritt 1: „Was ist das?“ ist das Hauptfeld unter dem Foto. */
.foto-hinweis.feld-gross label { font-size: 1.0625rem; }
.feld-gross textarea { min-height: 112px; font-size: 1.125rem; }

/* Zweitweg „tippen statt Foto“ und aufklappbare Auswahl */
.zweitweg, .aufklapp { margin: 8px 0; }
.zweitweg > summary, .aufklapp > summary { list-style: none; }
.zweitweg > summary::-webkit-details-marker, .aufklapp > summary::-webkit-details-marker { display: none; }
.zweitweg-pfeil { transition: transform var(--dauer) ease-out; }
details[open] > summary .zweitweg-pfeil { transform: rotate(90deg); }
.zweitweg .feld { margin-top: 4px; }

/* --- Einsprechen ----------------------------------------------------------------------- */

.sprache { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.sprache-knopf { padding: 8px 16px; }
/* Während der Aufnahme: großer Knopf „Fertig“ über die ganze Breite, Zähler und Pegel darüber. */
.sprache-knopf.ist-aktiv:not(:disabled) {
  width: 100%;
  min-height: 56px;
  background: var(--primaer);
  color: var(--auf-primaer);
  border-color: var(--primaer);
  font-size: 1.0625rem;
}
.sprache[data-zustand="aufnahme"] .sprache-status { order: -1; flex-basis: 100%; }
.sprache-knopf .kreisel { display: none; }
.sprache-knopf.ist-schreiben .kreisel { display: inline-block; }
.sprache-knopf.ist-schreiben .sprache-icon { display: none; }
.sprache-knopf.ist-schreiben:disabled { opacity: 1; cursor: progress; }
.sprache-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.sprache-status.ist-fehler { color: var(--fehler); }
.sprache-status > .icon { width: 18px; height: 18px; }
.sprache-zeit { font-variant-numeric: tabular-nums; }
.sprache-punkt {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--aufnahme);
  animation: pulsieren 0.9s ease-in-out infinite alternate;
}
@keyframes pulsieren { to { opacity: 0.25; } }
/* Pegel: zeigt, dass das Mikrofon etwas hört (Breite setzt erfassung.js). */
.pegel { flex: none; width: 56px; height: 8px; border-radius: 4px; background: var(--trenner); overflow: hidden; }
.pegel-wert {
  display: block;
  height: 100%;
  background: var(--text-2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
}
.sprache-tipp { margin: 0; }
/* Der Tipp genügt einmal je Fotoliste; bei zugeklappten Hinweisen (Schritt 2) steht er in jedem geöffneten. */
.fotobereich:not([data-hinweis="zugeklappt"]) .fotoliste > li:not(:first-child) .sprache-tipp { display: none; }

.stufen { min-width: 0; margin: 16px 0 8px; padding: 0; border: 0; }
.stufen legend { margin-bottom: 8px; }
.kachel { display: block; margin: 0 0 8px; cursor: pointer; touch-action: manipulation; }
.kachel-inhalt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  transition: background-color var(--dauer) ease-out, color var(--dauer) ease-out;
}
.kachel-buchstabe { flex: none; width: 2rem; font-size: 1.5rem; font-weight: 800; text-align: center; }
.kachel-text { flex: 1; }
.kachel-haken { visibility: hidden; }
.kachel input:checked + .kachel-inhalt {
  border-color: var(--primaer);
  background: var(--primaer);
  color: var(--auf-primaer);
  box-shadow: 0 0 0 1px var(--primaer);
}
.kachel input:checked + .kachel-inhalt .kachel-haken { visibility: visible; }
.kachel input:focus-visible + .kachel-inhalt { outline: 2px solid var(--fokus); outline-offset: 2px; }

.warten { display: flex; align-items: center; gap: 16px; margin: 24px 0 16px; }
.warten-zeit { margin: 0; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Vorschlag ------------------------------------------------------------------------- */

.karte {
  margin: 12px 0;
  padding: 16px;
  border: 1px solid var(--trenner);
  border-radius: var(--radius);
  background: var(--grund);
}
.karte-hervor { border: 2px solid var(--text); }
.karte > .feld:first-of-type { margin-top: 8px; }

.artikel { display: flex; align-items: flex-start; gap: 12px; }
.artikel-bild {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-klein);
  background: var(--seite);
  color: var(--text-2);
  object-fit: contain;
}
.artikel-text { flex: 1; min-width: 0; }
.artikel-name { margin: 0 0 2px; font-weight: 700; overflow-wrap: break-word; hyphens: auto; }
.artikel-nummer { margin: 0 0 2px; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* Kopfzeile der Artikelkarte: Überschrift links, Markenlogo rechts in der Ecke (Kili, 12.10.2026) */
.karten-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px; }
.karten-kopf h2 { margin: 0; }
.artikel-logo { display: flex; margin-left: auto; }

.gross { margin: 0; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* eBay-Kategorie im Vorschlag (Kili, 14.10.2026) */
.ebay-auswahl { display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 12px; border: 2px solid var(--rand);
  border-radius: var(--radius-klein); background: var(--grund); color: var(--text); font: inherit; font-size: 1rem; }
.ist-fehlerhaft .ebay-auswahl { border-color: var(--fehler); }
.preis-gross { margin: 0 0 4px; font-size: 2rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* EK der Bestandsbuchung (Kili, 15.10.2026): Abzug in %, daneben der errechnete EK */
.ek-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ek-zeile input[type="text"] { flex: none; width: 5.5rem; }
.ek-wert { color: var(--text-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.preis-alt { margin-left: 6px; font-size: 1.125rem; font-weight: 600; color: var(--text-2); text-decoration-thickness: 2px; white-space: nowrap; }

.wahlfeld { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.wahlliste { display: grid; gap: 8px; margin: 4px 0 12px; }
.wahl {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  cursor: pointer;
  touch-action: manipulation;
}
.wahl:has(input:checked) { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); }
.wahl img, .wahl .wahl-ohne {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--seite);
  color: var(--text-2);
  object-fit: contain;
}
.wahl-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.wahl-nummer { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wahl-zusatz { color: var(--hilfe); font-size: 0.875rem; }
.wahl { position: relative; }
.artikel { position: relative; }
/* Markenlogo oben rechts auf Höhe der Artikelnummer (Kili, 12.10.2026) */
.wahl-marke { position: absolute; top: 10px; right: 12px; display: flex; gap: 6px; align-items: center; pointer-events: none; }
.wahl-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; min-width: 0; }
.wahl-zeile .wahl-nummer { white-space: nowrap; }
.wahl-zeile .wahl-marke { position: static; margin-left: auto; }
.wahl.wahl-kachel .wahl-text { padding-right: 0; }          /* muss .wahl .wahl-text (Liste) schlagen */
.wahl-logo { height: 32px; width: auto; max-width: 84px; object-fit: contain;
             background: var(--logo-grund); padding: var(--logo-polster); border-radius: 4px; }
.wahl-marke-text { font-size: 0.75rem; font-weight: 700; color: var(--text-2); border: 1px solid var(--rand); border-radius: 4px; padding: 1px 6px; background: var(--grund); }
/* Rechts Platz für den Farbpunkt unten. */
.wahl .wahl-text { padding-right: 24px; }
/* Listenzeile: Nummer und Logo immer in einer Zeile, das Logo rechts in der Ecke (Kili, 13.10.2026: „noch kleiner,
   damit es auf jeden Fall rechts in die Ecke passt“). Die Zeile reicht in den Rand für den Farbpunkt, der steht
   unten. Logos 18 px hoch, der KTM-Schriftzug 15 px; reicht der Platz nicht (375 px und „A46005975000C1A“), wird
   das Logo schmaler, statt unter die Nummer zu rutschen. Kacheln und Artikelkarte bleiben bei 32 px. */
.wahl:not(.wahl-kachel) .wahl-zeile { flex-wrap: nowrap; gap: 6px; margin-right: -24px; }
.wahl:not(.wahl-kachel) .wahl-zeile .wahl-marke { flex: 0 1 auto; min-width: 0; }
.wahl:not(.wahl-kachel) img.wahl-logo { flex: 0 1 auto; min-width: 0; height: 18px; max-width: 44px; }
.wahl:not(.wahl-kachel) .wahl-marke-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wahl .wahl-nummer { white-space: nowrap; }
/* KTM-Schriftzug ohne Kasten ist breiter als hoch: 20 px statt 32, sonst wirkt er mobil zu groß (Kili, 13.10.2026). */
.wahl-marke img.wahl-logo.wahl-logo-ktm { height: 20px; }
.wahl:not(.wahl-kachel) img.wahl-logo.wahl-logo-ktm { height: 15px; max-width: 48px; }
/* Farbe aus dem Farbcode der Nummer, rechts unten in der Zeile bzw. Kachel. */
/* Höchstens 70 px breit: Rechts neben der Textspalte sind 72 px frei (padding-right); „Dark galvano“ bricht um. */
.wahl-farbe { position: absolute; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px;
  max-width: 70px; font-size: 0.75rem; line-height: 1.2; font-weight: 600; text-align: right; color: var(--text-2);
  pointer-events: none; }
.wahl-kachel .wahl-farbe { right: 8px; bottom: 8px; }
.wahl-farbe-punkt { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--rand); }
/* Liste und Hauptartikel: mehrere Marken untereinander, damit sie im 92-px-Rand bleiben. */
.artikel-logo .wahl-marke { position: static; }            /* steht in der Kopfzeile, nebeneinander */
.wahl > .wahl-marke { flex-direction: column; align-items: flex-end; gap: 4px; }
.wahl-svg { background: #fff; object-fit: contain; padding: 4px; }
.wahl-herkunft, .artikel-herkunft { color: var(--text-2); font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
/* Merkmal laut Lager (Kili, 13.10.2026) und Befund der Erkennung in der Rückfrage */
.wahl-merkmal, .artikel-merkmal { color: var(--text-2); font-size: 0.875rem; overflow-wrap: anywhere; }
.artikel-merkmal { margin: 2px 0 0; }
.erkennung-hinweis { margin: 0 0 8px; }
.erkennung-hinweis > p, .erkennung-details > p { margin: 0 0 8px; padding: 10px 12px; border-left: 3px solid var(--rand);
  background: var(--grund); color: var(--text-2); font-size: 0.9375rem; }
.erkennung-details > p.artikel-merkmal { margin: 0 0 4px; }
/* Merkmal in der Auswahl: Knopf statt <details>, weil er im <label> der Wahl sitzt. */
.wahl-mehr { display: grid; justify-items: start; }
.wahl-mehr-knopf { min-height: 44px; padding: 4px 0; font-size: 0.875rem; color: var(--text-2); }
.wahl-mehr-knopf[aria-expanded="true"] .zweitweg-pfeil { transform: rotate(90deg); }
.wahl-mehr .wahl-merkmal { padding: 0 0 4px; }
.merkmal-feld { margin: 12px 0 0; }
.wahl.ist-gesperrt { border-style: dashed; opacity: 0.5; cursor: not-allowed; }
/* „Andere Farben anzeigen“ unter der Auswahl, über die volle Breite des Kachelrasters. */
.andere-farben { grid-column: 1 / -1; justify-self: start; min-height: 44px; }

/* Kacheln bei Shopsuche und Zubehör: großes Bild, Antippen wählt. */
.kachelwahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
  gap: 8px;
  margin: 4px 0 12px;
}
.wahl-kachel { position: relative; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; padding: 8px; }
.wahl-kachel img, .wahl-kachel .wahl-ohne { width: 100%; height: auto; aspect-ratio: 1 / 1; background: var(--grund); }
/* Markenlogo ist kein Produktbild: Listen- und Kachelregeln für img hier zurücksetzen. */
.wahl img.wahl-logo { flex: none; width: auto; height: 32px; max-width: 84px; aspect-ratio: auto;
  background: var(--logo-grund); border: 0; border-radius: 4px; padding: var(--logo-polster); object-fit: contain; }
.wahl-kachel .wahl-ohne { background: var(--seite); }
.wahl-kachel .wahl-text { align-content: start; }
.wahl-name { font-weight: 700; line-height: 1.3; }
.wahl-kachel .wahl-nummer { color: var(--text-2); font-size: 0.9375rem; font-weight: 600; }
.wahl-preis { font-weight: 700; font-variant-numeric: tabular-nums; }
.wahl-passt { justify-self: start; margin: 2px 0 0; }
.wahl-haken {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 50%;
  background: var(--primaer);
  color: var(--auf-primaer);
  stroke-width: 3;
  visibility: hidden;
}
.wahl-kachel:has(input:checked) .wahl-haken { visibility: visible; }
/* Kachel: Markenlogo oben rechts auf dem Bild (Kili, 15.10.2026: „dann verschiebt sich der Text unten nicht“). Die
   Kachel hat 8 px Innenabstand, das Bild beginnt dort; 6 px Luft zum Bildrand. Der Haken der Auswahl rückt dafür
   nach links oben. */
.wahl-kachel > .wahl-marke { top: 14px; right: 14px; max-width: calc(100% - 28px); }
.wahl-kachel .wahl-haken { right: auto; left: 12px; }
.wahl-kachel > .wahl-marke .wahl-marke-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wahl-kachel:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }

.quelle-hinweis {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-left: 4px solid var(--akzent);
  background: var(--seite);
  font-size: 0.9375rem;
}
h1 + .quelle-hinweis { margin: 0 0 12px; }

/* Prüfpunkte: große Kästchen, jeder Punkt einzeln */
.karte-hervor.ist-fehlerhaft { border-color: var(--fehler); }
.pruefliste { display: grid; gap: 8px; margin-top: 8px; }
.pruefpunkt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 56px;
  padding: 12px;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  cursor: pointer;
  touch-action: manipulation;
}
.pruefpunkt input[type="checkbox"] { width: 32px; height: 32px; }
.pruefpunkt-text { min-width: 0; padding-top: 4px; }
.pruefpunkt:has(input:checked) { border-color: var(--erfolg-text); }
.pruefpunkt:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }
.pruefhinweis { margin: 0; }

.vorschau-titel { margin: 12px 0 4px; color: var(--text-2); font-size: 0.875rem; font-weight: 600; }
.vorschau {
  padding: 12px;
  border: 1px dashed var(--rand);
  border-radius: var(--radius-klein);
  background: var(--seite);
}
.vorschau p:last-child, .vorschau ul:last-child { margin-bottom: 0; }
.vorschau ul { margin: 0 0 12px; padding-left: 20px; }

.fotoraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr)); gap: 8px; }
.rasterfoto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 6px;
  padding: 6px;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  cursor: pointer;
  touch-action: manipulation;
}
.rasterfoto:has(input:checked) { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); }
.rasterfoto img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; background: var(--seite); object-fit: cover; }
.rasterfoto-zeile { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 0.875rem; font-weight: 600; }
.rasterfoto-zeile span { min-width: 0; overflow-wrap: anywhere; }
/* Reihenfolge der Shop-Fotos: Nummer oben links, Pfeile unten auf dem Bild (Kili, 12.10.2026) */
.rasterfoto-eintrag { position: relative; display: grid; min-width: 0; }
.rasterfoto-bild { position: relative; display: block; }
.rasterfoto-nr { position: absolute; top: 6px; left: 6px; display: flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--primaer); color: var(--auf-primaer);
  font-weight: 800; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.rasterfoto-nr[hidden] { display: none; }
.rasterfoto-reihe { position: absolute; top: 8px; left: 8px; right: 8px; aspect-ratio: 1; display: flex; align-items: flex-end;
  justify-content: space-between; padding: 6px; pointer-events: none; }
.reiheknopf { pointer-events: auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; border: 2px solid var(--primaer); border-radius: 999px; background: var(--grund); color: var(--primaer);
  cursor: pointer; touch-action: manipulation; }
.reiheknopf:disabled { visibility: hidden; }
.reiheknopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
/* Sortieren durch Ziehen (Kili, 13.10.2026): Finger kurz halten, dann ziehen. Die Pfeile bleiben für Tastatur und
   Bildschirmleser und erscheinen erst mit Tastaturfokus; sonst sind sie unsichtbar und nicht antippbar. */
.rasterfoto-reihe { opacity: 0; }
.rasterfoto-reihe .reiheknopf { pointer-events: none; }
.rasterfoto-eintrag:has(:focus-visible) .rasterfoto-reihe { opacity: 1; }
.rasterfoto-eintrag:has(:focus-visible) .reiheknopf { pointer-events: auto; }
.rasterfoto-eintrag { transition: transform var(--dauer) ease; -webkit-user-select: none; user-select: none; }
.rasterfoto img { -webkit-touch-callout: none; -webkit-user-drag: none; }
.rasterfoto-griff { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; padding: 4px;
  border-radius: 999px; background: var(--grund); color: var(--text); opacity: 0.9; pointer-events: none; }
.rasterfoto-eintrag.ist-gezogen { z-index: 2; transition: none; cursor: grabbing; }
.rasterfoto-eintrag.ist-gezogen .rasterfoto { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); transform: scale(1.03); }
.fotoraster .rasterfoto { cursor: grab; }

.nebenaktionen { display: grid; gap: 12px; margin: 24px 0 0; }

.erfolg { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.erfolg-icon {
  width: 48px;
  height: 48px;
  padding: 10px;
  border-radius: 50%;
  background: var(--erfolg-flaeche);
  color: var(--auf-primaer);
  stroke-width: 3;
}
.erfolg h1 { margin: 0; }
.bnummer { display: block; font-variant-numeric: tabular-nums; overflow-wrap: normal; word-break: keep-all; }

.grossbild {
  width: 100%;
  max-width: 40rem;
  max-height: 100dvh;
  padding: 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--grund);
}
.grossbild::backdrop { background: var(--abdunkeln); }
.grossbild img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 120px);
  margin: 0 auto 12px;
  object-fit: contain;
}

/* --- Kamera in der Seite --------------------------------------------------------------- */

html.kamera-offen, html.kamera-offen body { overflow: hidden; }

.kamera-ansicht {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--kamera-grund);
  color: var(--kamera-text);
  overflow: hidden;
}
.kamera-ansicht[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "kopf" "bild" "status" "streifen" "unten";
}
.kamera-ansicht::backdrop { background: var(--kamera-grund); }
.kamera-ansicht :focus-visible { outline-color: var(--kamera-fokus); }

.kamera-kopf {
  grid-area: kopf;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: calc(4px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 4px
           calc(16px + env(safe-area-inset-left, 0px));
}
.kamera-titel { margin: 0; min-width: 0; font-weight: 700; }
.kamera-zaehler { margin-left: 6px; color: var(--kamera-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.kamera-knopf {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  min-height: 48px;
  padding: 8px 16px;
  border: 2px solid var(--kamera-linie);
  border-radius: 999px;
  background: var(--kamera-flaeche);
  color: var(--kamera-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kamera-knopf .icon { width: 20px; height: 20px; }
.kamera-knopf:active { background: var(--kamera-linie); }
.kamera-licht[aria-pressed="true"] { background: var(--kamera-text); color: var(--kamera-grund); border-color: var(--kamera-text); }
.kamera-fertig { justify-self: end; min-width: 6.5rem; font-size: 1.0625rem; }

.kamera-bild { grid-area: bild; position: relative; min-height: 0; overflow: hidden; }
/* contain: Zu sehen ist genau, was aufgenommen wird. */
.kamera-bild video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--kamera-grund); }
.kamera-blitz { position: absolute; inset: 0; background: var(--blitz); opacity: 0; pointer-events: none; transition: opacity 180ms ease-out; }
.kamera-blitz.ist-an { opacity: 0.7; transition: none; }
/* Fokusring an der angetippten Stelle (nur wo die Kamera dorthin scharfstellen kann, Android-Chrome) */
.kamera-fokus { position: absolute; width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 2px solid var(--kamera-text);
  border-radius: 8px; opacity: 0; pointer-events: none; }
.kamera-fokus.ist-an { animation: kamera-fokus 1200ms ease-out forwards; }
@keyframes kamera-fokus { 0% { opacity: 1; transform: scale(1.4); } 25% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  @keyframes kamera-fokus { 0%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
}
.kamera-start {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: var(--kamera-text-2);
  font-weight: 600;
}

.kamera-status {
  grid-area: status;
  margin: 0;
  padding: 8px 16px 0;
  color: var(--kamera-text);
  font-weight: 600;
  text-align: center;
}
.kamera-status.ist-fehler { color: var(--kamera-fehler); }

.kamera-streifen {
  grid-area: streifen;
  display: flex;
  gap: 8px;
  min-height: 72px;
  margin: 0;
  padding: 8px calc(16px + env(safe-area-inset-right, 0px)) 8px calc(16px + env(safe-area-inset-left, 0px));
  overflow-x: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: none;
}
.kamera-streifen::-webkit-scrollbar { display: none; }
.kamera-mini { position: relative; flex: none; width: 56px; height: 56px; }
.kamera-mini img {
  display: block;
  width: 56px;
  height: 56px;
  border: 2px solid var(--kamera-linie);
  border-radius: 6px;
  background: var(--kamera-flaeche);
  object-fit: cover;
}
.kamera-mini .icon {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--kamera-grund);
  stroke-width: 3;
  visibility: hidden;
}
.kamera-mini-fertig { color: var(--kamera-erfolg); }
.kamera-mini-fehler { color: var(--kamera-fehler); }
.kamera-mini[data-status="fertig"] .kamera-mini-fertig,
.kamera-mini[data-status="fehler"] .kamera-mini-fehler { visibility: visible; }
.kamera-mini[data-status="fehler"] img { border-color: var(--kamera-fehler); }

.kamera-unten {
  grid-area: unten;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px))
           calc(16px + env(safe-area-inset-left, 0px));
}
.kamera-ausloeser {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 4px solid var(--kamera-text);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kamera-ausloeser-innen {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--kamera-text);
  transition: transform 120ms ease-out;
}
.kamera-ausloeser:active:not(:disabled) .kamera-ausloeser-innen { transform: scale(0.86); }
.kamera-ausloeser:disabled { opacity: 0.4; cursor: not-allowed; }
.kamera-ausloeser:focus-visible { outline: 3px solid var(--kamera-fokus); outline-offset: 4px; }

/* Quer gehalten: Bild links, Bedienung rechts in einer Spalte. */
@media (orientation: landscape) and (max-height: 540px) {
  .kamera-ansicht[open] {
    grid-template-columns: minmax(0, 1fr) 9rem;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "kopf kopf" "bild status" "bild streifen" "bild unten";
  }
  .kamera-kopf { min-height: 48px; }
  .kamera-status { padding: 4px 8px 0; font-size: 0.875rem; }
  .kamera-streifen { flex-direction: column; align-items: center; overflow-x: hidden; overflow-y: auto; min-height: 0; padding: 8px; }
  .kamera-unten {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding: 8px calc(8px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
  }
  .kamera-platz { display: none; }
  .kamera-fertig { justify-self: center; }
  .kamera-ausloeser { width: 72px; height: 72px; }
  .kamera-ausloeser-innen { width: 54px; height: 54px; }
}

/* App auf dem Home-Bildschirm (iOS 26): Das System legt eine Glas-Unschärfe über die oberen rund 40 pt des
   Inhalts („scroll edge effect“), auch über Logo und Abmelden (Kili, 13.10.2026, zweimal gemeldet). Ein
   Schalter dafür fehlt; WebKit lässt die Unschärfe nur weg, wenn ein undurchsichtiges, festes oder
   mitlaufendes Element über die volle Breite am oberen Rand liegt, und nimmt dessen Farbe für die
   Statusleiste. Deshalb in der App: Kopf sticky, weißer Grund, kein backdrop-filter. Im Browser bleibt er
   statisch. Am Gerät zu prüfen (headless nicht nachstellbar). */
@media (display-mode: standalone) {
  html { background: var(--grund); }
  .kopf { position: sticky; top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .kreisel { border-right-color: currentColor; opacity: 0.5; }
}

/* --- Einbuchen (BSO WMS, Kili 13.10.2026) ---------------------------------------------- */
.eb-schritt h2 { margin: 0 0 12px; }
.eb-schritt h2:focus { outline: none; }
.eb-tippen { margin: 12px 0 0; }
.eb-tippen label { display: block; margin: 0 0 4px; color: var(--text-2); font-size: 0.9375rem; }
.eb-zeile { display: flex; gap: 8px; }
.eb-zeile input { flex: 1; min-width: 0; text-transform: uppercase; }
.eb-zeile .knopf { flex: none; width: auto; padding-inline: 16px; }
.eb-gewaehlt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.eb-wert { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.eb-status { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--text-2); }
.eb-status[hidden] { display: none; }
.eb-vorschlag { min-height: 44px; margin-left: 8px; }
.eb-artikel { display: grid; gap: 2px; margin: 0 0 8px; }
.eb-artikel strong { font-size: 1.125rem; }
.eb-nummer { color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.eb-bestand { display: grid; gap: 2px; margin: 0 0 4px; padding: 0; list-style: none; color: var(--text-2); font-size: 0.9375rem; }
.eb-bestand .eb-ziel { color: var(--text); font-weight: 600; }
.eb-bestand .eb-we { color: var(--text); }
.eb-art .wahl { min-height: 56px; }
.eb-art .wahl-nummer { white-space: normal; }
.eb-auswahl {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--rand);
  border-radius: var(--radius-klein); background: var(--grund); color: var(--text); font: inherit;
}
.eb-menge { display: flex; align-items: center; gap: 8px; }
.eb-menge input { width: 5.5rem; text-align: center; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.eb-menge .knopf-icon { width: 48px; height: 48px; font-size: 1.5rem; font-weight: 700; }
.eb-buchungen { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.eb-buchung { padding: 10px 12px; border: 1px solid var(--trenner); border-radius: var(--radius); background: var(--grund); }
.eb-buchung p { margin: 0; }
.eb-buchung .hilfe { margin-top: 2px; overflow-wrap: anywhere; }
.eb-buchung-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.eb-buchung-kopf strong { min-width: 0; overflow-wrap: anywhere; }
.eb-buchung-kopf .stand { flex-shrink: 0; white-space: nowrap; }
.eb-stand-ok .stand { color: var(--erfolg-text); }
.eb-stand-fehler .stand, .eb-stand-unvollstaendig .stand, .eb-stand-unklar .stand { color: var(--fehler); }
.eb-buchung .textknopf { min-height: 44px; }
/* Scanner: Rahmen in der Bildmitte, so groß wie der Ausschnitt, den das Skript liest (86 × 44 %) */
.eb-rahmen { position: absolute; left: 7%; right: 7%; top: 28%; bottom: 28%; border: 3px solid var(--kamera-text);
  border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); pointer-events: none; }
.eb-scanner .kamera-status { grid-area: status; margin: 0; padding: 12px 16px; text-align: center; }