/* ============================================================
   Warenwirtschaft — Oberfläche
   Werkstatt zuerst: große Flächen, hoher Kontrast, dunkel als
   Standard, alles auch mit Handschuhen bedienbar.
   ============================================================ */

/* ── Grundlagen ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

:root {
  --grund:        #0f1115;
  --flaeche:      #171a21;
  --flaeche-hoch: #1e222b;
  --rand:         #2a303c;
  --rand-stark:   #3a4252;
  --text:         #e7eaf0;
  --text-leise:   #98a2b3;
  --text-schwach: #6b7482;

  --akzent:       #3b82f6;
  --akzent-hell:  #60a5fa;
  --akzent-grund: #132540;
  --marke:        #e5322d;

  --gruen:        #22c55e;
  --gruen-grund:  #10291b;
  --gelb:         #f59e0b;
  --gelb-grund:   #2d2410;
  --rot:          #ef4444;
  --rot-grund:    #2d1616;

  --radius:       12px;
  --radius-klein: 8px;
  --schatten:     0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .5);

  --kopf-hoehe:   58px;
  --leiste-breite: 232px;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  color-scheme: dark;
}

:root[data-theme="hell"] {
  --grund:        #f4f6fa;
  --flaeche:      #ffffff;
  --flaeche-hoch: #eef1f6;
  --rand:         #dde2ea;
  --rand-stark:   #c3cbd8;
  --text:         #101623;
  --text-leise:   #58627a;
  --text-schwach: #7d879b;
  --akzent-grund: #e5efff;
  --gruen-grund:  #e6f8ed;
  --gelb-grund:   #fdf3e0;
  --rot-grund:    #fdeaea;
  --schatten:     0 1px 2px rgb(16 22 35 / .06), 0 8px 24px -12px rgb(16 22 35 / .18);
  color-scheme: light;
}

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

body {
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
  background: var(--grund);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;   /* am Handy ohne die ein- und ausfahrende Adressleiste */
  padding-bottom: env(safe-area-inset-bottom);
}

h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; }
h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: 1rem;    font-weight: 620; }

a { color: var(--akzent-hell); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }
.ico { width: 20px; height: 20px; flex: 0 0 auto; }
.ico.klein { width: 16px; height: 16px; }
.ico.gross { width: 28px; height: 28px; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--akzent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.sprung:focus { left: 0; }

/* ── Kopfzeile ─────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 40;
  height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 .875rem;
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand);
}

.marke { display: flex; align-items: center; gap: .55rem; color: var(--text); font-weight: 700; }
.marke:hover { text-decoration: none; }
.marke-logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--marke); color: #fff;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; letter-spacing: -.02em;
}
.marke-text { letter-spacing: -.01em; }

.kopf-suche {
  flex: 1; max-width: 520px; margin-inline: auto;
  display: flex; align-items: center; gap: .5rem;
  background: var(--flaeche-hoch); border: 1px solid var(--rand);
  border-radius: 10px; padding: 0 .7rem;
  color: var(--text-schwach);
}
/* Keine feste Höhe: die Leiste richtet sich nach dem Eingabefeld darin.
   Sonst müsste sie bei jeder Größenänderung nachgezogen werden. */
.kopf-suche:focus-within { border-color: var(--akzent); color: var(--text-leise); }
.kopf-suche input {
  flex: 1; background: none; border: 0; color: var(--text);
  min-width: 0; padding-inline: 0;
}
.kopf-suche input:focus { outline: none; }
.kopf-suche kbd {
  font: 600 .7rem/1 var(--mono);
  padding: .25rem .4rem; border: 1px solid var(--rand-stark);
  border-radius: 5px; color: var(--text-schwach);
}

.kopf-rechts { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.kopf-menue, .knopf-symbol {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: none; border: 1px solid transparent; color: var(--text-leise); cursor: pointer;
}
.kopf-menue:hover, .knopf-symbol:hover { background: var(--flaeche-hoch); color: var(--text); }

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--avatar-farbe, var(--akzent)); color: #fff;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}

.benutzer-menue { position: relative; }
.benutzer-menue summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .5rem .3rem .3rem; border-radius: 999px; cursor: pointer;
  list-style: none; font-size: .875rem; font-weight: 550;
}
.benutzer-menue summary::-webkit-details-marker { display: none; }
.benutzer-menue summary:hover { background: var(--flaeche-hoch); }
.menue-blase {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50;
  min-width: 210px; padding: .35rem;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.menue-kopf { padding: .55rem .6rem; border-bottom: 1px solid var(--rand); margin-bottom: .3rem; display: grid; }
.menue-blase a {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .6rem; border-radius: var(--radius-klein);
  color: var(--text); font-size: .875rem;
}
.menue-blase a:hover { background: var(--flaeche-hoch); text-decoration: none; }

/* ── Gerüst ────────────────────────────────────────────────── */
.huelle { display: flex; align-items: flex-start; }

.seitenleiste {
  position: sticky; top: var(--kopf-hoehe);
  width: var(--leiste-breite); flex: 0 0 auto;
  height: calc(100vh - var(--kopf-hoehe));
  height: calc(100dvh - var(--kopf-hoehe));
  overflow-y: auto; padding: .75rem .6rem 1.5rem;
  border-right: 1px solid var(--rand);
  background: var(--flaeche);
}
.seitenleiste ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.seitenleiste a {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem; border-radius: var(--radius-klein);
  color: var(--text-leise); font-size: .9rem; font-weight: 520;
}
.seitenleiste a:hover { background: var(--flaeche-hoch); color: var(--text); text-decoration: none; }
.seitenleiste a.ist-aktiv { background: var(--akzent-grund); color: var(--akzent-hell); font-weight: 600; }
.seitenleiste a span { flex: 1; }
.seitenleiste hr { border: 0; border-top: 1px solid var(--rand); margin: .75rem .3rem; }
.seitenleiste-fuss { padding: 1rem .7rem 0; font-size: .75rem; line-height: 1.5; }

.abzeichen {
  font-style: normal; font-size: .7rem; font-weight: 700;
  background: var(--rot); color: #fff;
  min-width: 20px; height: 20px; padding: 0 .35rem;
  border-radius: 999px; display: grid; place-items: center;
}

.inhalt {
  flex: 1; min-width: 0;
  padding: 1.25rem 1.5rem 4rem;
  max-width: 1400px; margin-inline: auto;
}
body.breit .inhalt { max-width: none; }

.seiten-kopf {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.seiten-kopf h1 { margin-right: auto; }
.seiten-kopf .knopf.leise { order: -1; flex-basis: 100%; }

/* Untere Leiste am Handy */
.unterleiste { display: none; }

@media (max-width: 900px) {
  .nur-desktop { display: none !important; }
  .seitenleiste {
    position: fixed; inset: var(--kopf-hoehe) auto 0 0; z-index: 45;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--schatten);
  }
  .seitenleiste.offen { transform: none; }
  .inhalt { padding: 1rem .9rem 5.5rem; }
  .kopf-suche kbd { display: none; }
  /* Bei offener Bildschirmtastatur würde die untere Leiste mitten im Bild
     kleben. Solange getippt wird, ist sie weg. */
  body.tastatur-offen .unterleiste { display: none; }

  .unterleiste {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    background: color-mix(in srgb, var(--flaeche) 95%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--rand);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .unterleiste a {
    flex: 1; display: grid; justify-items: center; gap: 2px;
    padding: .5rem .25rem .55rem; color: var(--text-schwach);
    font-size: .68rem; font-weight: 550;
  }
  .unterleiste a:hover { text-decoration: none; }
  .unterleiste-haupt { color: var(--akzent-hell) !important; }
  .unterleiste-haupt .ico { width: 26px; height: 26px; }
}
@media (min-width: 901px) { .nur-mobil { display: none !important; } }

/* ── Knöpfe ────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 40px; padding: .5rem .95rem;
  background: var(--flaeche-hoch); color: var(--text);
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  font: inherit; font-size: .875rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background .12s, border-color .12s;
}
.knopf:hover { background: var(--rand); text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf[disabled], .knopf.aus { opacity: .5; pointer-events: none; }

.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.haupt:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); }
.knopf.gefahr { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.gefahr:hover { filter: brightness(1.12); }
.knopf.erfolg { background: var(--gruen); border-color: var(--gruen); color: #06210f; }
.knopf.leise { background: none; border-color: transparent; color: var(--text-leise); }
.knopf.leise:hover { background: var(--flaeche-hoch); color: var(--text); }
.knopf.gross { min-height: 52px; padding: .75rem 1.4rem; font-size: 1rem; }
.knopf.voll { width: 100%; }

.knopf-reihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ── Karten ────────────────────────────────────────────────── */
.karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1.1rem;
}
.karte + .karte { margin-top: 1rem; }
.karte-kopf {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: -.15rem 0 .9rem;
}
.karte-kopf h2, .karte-kopf h3 { margin-right: auto; }
.karte.flach { padding: 0; overflow: hidden; }
.karte.flach .karte-kopf { padding: 1rem 1.1rem; margin: 0; border-bottom: 1px solid var(--rand); }

.raster { display: grid; gap: 1rem; }
.raster.zwei   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.raster.drei   { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.raster.vier   { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Kennzahlen-Kacheln */
.kennzahl {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: .95rem 1.1rem;
  display: grid; gap: .2rem; align-content: start;
}
.kennzahl-wert { font-size: 1.75rem; font-weight: 680; letter-spacing: -.02em; line-height: 1.1; }
.kennzahl-titel { font-size: .78rem; font-weight: 600; color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; }
.kennzahl-fuss { font-size: .8rem; color: var(--text-schwach); }
.kennzahl.warn  .kennzahl-wert { color: var(--gelb); }
.kennzahl.kritisch .kennzahl-wert { color: var(--rot); }
.kennzahl.gut   .kennzahl-wert { color: var(--gruen); }

/* ── Tabellen ──────────────────────────────────────────────── */
.tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.liste { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.liste th {
  text-align: left; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-schwach);
  padding: .6rem .7rem; border-bottom: 1px solid var(--rand); white-space: nowrap;
  position: sticky; top: 0; background: var(--flaeche); z-index: 1;
}
table.liste td { padding: .65rem .7rem; border-bottom: 1px solid var(--rand); vertical-align: middle; }
table.liste tbody tr:hover { background: var(--flaeche-hoch); }
table.liste tbody tr:last-child td { border-bottom: 0; }
table.liste .rechts, .rechts { text-align: right; }
table.liste .mitte { text-align: center; }
.zahl { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.nummer { font-family: var(--mono); font-size: .82rem; color: var(--text-leise); }

tr.ist-kritisch td { background: color-mix(in srgb, var(--rot-grund) 60%, transparent); }
tr.ist-warnung  td { background: color-mix(in srgb, var(--gelb-grund) 45%, transparent); }

/* ── Formulare ─────────────────────────────────────────────── */
.feld { display: grid; gap: .35rem; margin-bottom: .9rem; }
.feld > label, .feld-titel {
  font-size: .8rem; font-weight: 620; color: var(--text-leise);
}
.feld .hilfe { font-size: .78rem; color: var(--text-schwach); }

/* Zwei Dinge sind hier Absicht:

   1. Ausschluss statt Aufzählung. Ein Attributselektor wie input[type=text]
      greift nur, wenn das Attribut wirklich dasteht — ein <input name="menge">
      ohne type ist zwar ein Textfeld, wäre so aber nie erfasst worden.

   2. 16px als Normalfall. Safari auf iOS zoomt beim Antippen automatisch
      hinein, sobald ein Eingabefeld kleiner gesetzt ist. Deshalb ist die
      touchtaugliche Größe der Ausgangszustand und der Büro-PC die Ausnahme
      (siehe weiter unten) — nicht umgekehrt. So kann keine übersehene Regel
      das Zoomen zurückbringen. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=range]):not([type=color]),
select, textarea {
  width: 100%; min-height: 46px; padding: .55rem .7rem;
  background: var(--flaeche-hoch); color: var(--text);
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  font: inherit; font-size: 16px;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1rem center, right .7rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 2rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--text-schwach); }
input[readonly] { opacity: .7; }

.feld-reihe { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Der Büro-PC ist die Ausnahme: dort darf es kompakter zugehen, weil kein
   Browser wegen einer Schriftgröße hineinzoomt. Beide Bedingungen müssen
   zutreffen — ein Werkstatt-Tablet im Querformat ist breit, aber eben doch
   ein Touchgerät und behält die großen Felder. */
@media (pointer: fine) and (min-width: 901px) {
  /* Derselbe Selektor wie oben, Zeichen für Zeichen — sonst wiegt er
     leichter als die Grundregel und würde schlicht nicht greifen. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=range]):not([type=color]),
  select, textarea {
    font-size: .9rem;
    min-height: 42px;
  }
  textarea { min-height: 90px; }
}

/* Kein Zoom durch versehentliches Doppeltippen, und keine 300ms Verzögerung. */
a, button, .knopf, label, summary, input, select, textarea,
.modus-kachel, .benutzer-kachel, .pin-taste {
  touch-action: manipulation;
}

.schalter { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .9rem; }
.schalter input { width: 18px; height: 18px; accent-color: var(--akzent); flex: 0 0 auto; }

.filterleiste {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 1rem; padding: .85rem; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius);
}
.filterleiste .feld { margin: 0; min-width: 150px; }

/* ── Zustände und Marker ───────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 650; white-space: nowrap;
  background: var(--flaeche-hoch); color: var(--text-leise);
  border: 1px solid var(--rand);
}
.chip.gruen { background: var(--gruen-grund); color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 35%, transparent); }
.chip.gelb  { background: var(--gelb-grund);  color: var(--gelb);  border-color: color-mix(in srgb, var(--gelb) 35%, transparent); }
.chip.rot   { background: var(--rot-grund);   color: var(--rot);   border-color: color-mix(in srgb, var(--rot) 35%, transparent); }
.chip.blau  { background: var(--akzent-grund); color: var(--akzent-hell); border-color: color-mix(in srgb, var(--akzent) 35%, transparent); }

.dezent { color: var(--text-schwach); }
.leise  { color: var(--text-leise); }
.klein  { font-size: .82rem; }

.hinweis {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; margin-bottom: 1rem;
  border: 1px solid var(--rand); border-left-width: 3px;
  border-radius: var(--radius-klein);
  background: var(--flaeche); font-size: .9rem;
}
.hinweis span { flex: 1; }
.hinweis-zu { background: none; border: 0; color: inherit; font-size: 1.25rem; cursor: pointer; opacity: .5; line-height: 1; }
.hinweis-zu:hover { opacity: 1; }
.hinweis-erfolg  { border-left-color: var(--gruen); background: var(--gruen-grund); }
.hinweis-fehler  { border-left-color: var(--rot);   background: var(--rot-grund); }
.hinweis-warnung { border-left-color: var(--gelb);  background: var(--gelb-grund); }
.hinweis-info    { border-left-color: var(--akzent); background: var(--akzent-grund); }

.leer {
  display: grid; justify-items: center; gap: .6rem;
  padding: 3rem 1rem; text-align: center; color: var(--text-schwach);
}
.leer .ico { width: 40px; height: 40px; opacity: .4; }

.fortschritt { height: 6px; background: var(--flaeche-hoch); border-radius: 999px; overflow: hidden; }
.fortschritt > i { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.fortschritt.warn > i { background: var(--gelb); }
.fortschritt.kritisch > i { background: var(--rot); }

/* ── Anmeldung ─────────────────────────────────────────────── */
.anmelde-seite {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 1.25rem;
  background: radial-gradient(1000px 600px at 50% -10%, color-mix(in srgb, var(--akzent) 14%, transparent), transparent), var(--grund);
}
.anmelde-karte {
  width: 100%; max-width: 420px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 18px; padding: 1.75rem; box-shadow: var(--schatten);
}
.anmelde-marke { display: grid; justify-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.anmelde-marke .marke-logo { width: 52px; height: 52px; border-radius: 14px; font-size: 1.15rem; }

.benutzer-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.benutzer-kachel {
  display: grid; justify-items: center; gap: .45rem;
  padding: .9rem .5rem; background: var(--flaeche-hoch);
  border: 1px solid var(--rand); border-radius: var(--radius);
  cursor: pointer; color: var(--text); font-size: .8rem; font-weight: 600;
  text-align: center; word-break: break-word;
}
.benutzer-kachel:hover { border-color: var(--akzent); text-decoration: none; }
.benutzer-kachel .avatar { width: 42px; height: 42px; font-size: .95rem; }

.pin-anzeige { display: flex; justify-content: center; gap: .6rem; margin: 1.4rem 0; }
.pin-punkt {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--rand-stark); transition: all .12s;
}
.pin-punkt.gefuellt { background: var(--akzent); border-color: var(--akzent); transform: scale(1.15); }

.pin-tastatur { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.pin-taste {
  height: 62px; font-size: 1.4rem; font-weight: 600;
  background: var(--flaeche-hoch); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius);
  cursor: pointer; font-family: var(--mono);
}
.pin-taste:hover { background: var(--rand); }
.pin-taste:active { transform: scale(.96); }
.pin-taste.aktion { font-size: .85rem; font-family: var(--schrift); color: var(--text-leise); }

@keyframes ruettel {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-7px); }
  40%,80% { transform: translateX(7px); }
}
.ruettelt { animation: ruettel .4s; }

/* ── Scan-Zentrale ─────────────────────────────────────────── */
.modus-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.modus-kachel {
  display: grid; justify-items: center; gap: .4rem;
  padding: 1rem .6rem; border-radius: var(--radius);
  background: var(--flaeche); border: 2px solid var(--rand);
  color: var(--text-leise); cursor: pointer; font-size: .85rem; font-weight: 650;
  text-align: center;
}
.modus-kachel:hover { border-color: var(--rand-stark); color: var(--text); }
.modus-kachel.ist-aktiv {
  border-color: var(--akzent); background: var(--akzent-grund); color: var(--akzent-hell);
}
.modus-kachel .ico { width: 26px; height: 26px; }

.scan-feld {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.1rem; border-radius: var(--radius);
  background: var(--flaeche); border: 2px dashed var(--rand-stark);
}
.scan-feld.bereit { border-color: var(--akzent); }
.scan-feld input {
  border: 0; background: none; font-size: 1.15rem; font-family: var(--mono);
  min-height: 32px; padding: 0;
}
.scan-feld input:focus { box-shadow: none; }
/* Über die Kennung angesprochen, damit es die allgemeine Feldregel sicher
   übertrifft: das Scan-Feld soll auffällig groß bleiben. */
#scan-eingabe, #inventur-scan { font-size: 1.15rem; min-height: 34px; }
.puls { width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); flex: 0 0 auto; }
@keyframes pulsen { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.puls { animation: pulsen 1.6s infinite; }

.scan-blitz {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0; transition: opacity .1s;
}
.scan-blitz.gruen { background: color-mix(in srgb, var(--gruen) 30%, transparent); opacity: 1; }
.scan-blitz.rot   { background: color-mix(in srgb, var(--rot) 32%, transparent); opacity: 1; }

.scan-ergebnis { display: grid; gap: .75rem; }
.scan-zeile {
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem .95rem; border-radius: var(--radius);
  background: var(--flaeche); border: 1px solid var(--rand);
  border-left: 4px solid var(--gruen);
  animation: einblenden .18s ease-out;
}
.scan-zeile.fehler { border-left-color: var(--rot); }
.scan-zeile-text { flex: 1; min-width: 0; }
.scan-zeile-text strong { display: block; }
.scan-zeile-wert { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes einblenden { from { opacity: 0; transform: translateY(-6px); } }

/* ── Dialog ────────────────────────────────────────────────── */
dialog.modal {
  width: min(560px, calc(100vw - 2rem)); padding: 0;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten);
}
dialog.modal::backdrop { background: rgb(0 0 0 / .55); backdrop-filter: blur(2px); }
dialog.modal .modal-kopf { padding: 1rem 1.15rem; border-bottom: 1px solid var(--rand); display: flex; align-items: center; gap: .6rem; }
dialog.modal .modal-kopf h2 { margin-right: auto; }
dialog.modal .modal-inhalt { padding: 1.15rem; max-height: 65vh; overflow-y: auto; }
dialog.modal .modal-fuss { padding: .9rem 1.15rem; border-top: 1px solid var(--rand); display: flex; gap: .5rem; justify-content: flex-end; }

/* Das Versandfenster braucht mehr Platz als eine Rückfrage: darin steht ein
   ganzer Mailtext, der sich lesen lassen muss, bevor er hinausgeht. */
dialog.versand-modal { width: min(680px, calc(100vw - 1.5rem)); }
dialog.versand-modal .modal-inhalt { max-height: 72vh; }
dialog.versand-modal textarea { font-family: inherit; line-height: 1.5; }

/* ── Kamera-Scanner ────────────────────────────────────────── */
dialog.kamera-modal { width: min(680px, calc(100vw - 1.5rem)); }
.kamera-buehne {
  position: relative; background: #000;
  aspect-ratio: 4 / 3; max-height: 60vh; overflow: hidden;
}
.kamera-buehne video { width: 100%; height: 100%; object-fit: cover; }

/* Zielrahmen: schmales Fenster, damit klar ist, wohin gehalten werden muss. */
.kamera-rahmen {
  position: absolute; left: 8%; right: 8%; top: 50%; height: 28%;
  transform: translateY(-50%);
  border: 2px solid rgb(255 255 255 / .85); border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / .38);
}
.kamera-linie {
  position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
  background: var(--rot); box-shadow: 0 0 8px var(--rot);
  animation: kamera-wandern 2.2s ease-in-out infinite;
}
@keyframes kamera-wandern {
  0%, 100% { transform: translateY(-38px); }
  50%      { transform: translateY(38px); }
}
.kamera-status {
  padding: .8rem 1.15rem; font-size: .85rem; color: var(--text-leise);
  min-height: 3.1rem; line-height: 1.45;
}
.kamera-fuss { flex-wrap: wrap; gap: .45rem; }

@media (max-width: 560px) {
  dialog.kamera-modal { width: 100vw; max-width: 100vw; border-radius: 0; }
  .kamera-buehne { aspect-ratio: 3 / 4; max-height: 55vh; }
}

/* Zwischenüberschrift in einer Liste, etwa je Auftragsstatus. */
.gruppen-zeile td {
  background: var(--flaeche-hoch); padding: .5rem 1.1rem !important;
  border-top: 1px solid var(--rand);
}

/* Eine Datenquelle in den Einstellungen: Schalter, Erklärung, Felder. */
.hilfe-quelle {
  border-top: 1px solid var(--rand); padding: .8rem 0 .4rem;
}
.hilfe-quelle:first-of-type { border-top: 0; }

/* ── Hilfeseite ────────────────────────────────────────────── */
/* Sprungliste links, Text rechts. Die Liste bleibt beim Scrollen stehen,
   damit man von jeder Stelle aus weiterspringen kann. */
.hilfe-huelle { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: start; }
.hilfe-navi { position: sticky; top: calc(var(--kopf-hoehe) + 1rem); }
.hilfe-navi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.hilfe-navi a {
  display: block; padding: .4rem .6rem; border-radius: var(--radius);
  color: var(--text-leise); text-decoration: none; font-size: .88rem;
  border-left: 2px solid transparent;
}
.hilfe-navi a:hover { background: var(--flaeche-hoch); color: var(--text); }
.hilfe-navi a.ist-aktiv {
  color: var(--akzent-hell); border-left-color: var(--akzent); background: var(--akzent-grund);
}

.hilfe-inhalt { display: grid; gap: 1rem; min-width: 0; }
.hilfe-inhalt h3 {
  margin: 1.4rem 0 .5rem; font-size: .95rem;
  color: var(--text); border-top: 1px solid var(--rand); padding-top: 1rem;
}
.hilfe-inhalt h3:first-of-type { border-top: 0; padding-top: 0; }
.hilfe-inhalt p { line-height: 1.6; margin: 0 0 .8rem; }

/* Begriff und Erklärung nebeneinander — auf schmalen Geräten untereinander. */
.hilfe-liste { display: grid; grid-template-columns: 12rem 1fr; gap: .55rem 1rem; margin: 0 0 .5rem; }
.hilfe-liste dt { font-weight: 650; }
.hilfe-liste dd { margin: 0; color: var(--text-leise); line-height: 1.55; }

.hilfe-schritte, .hilfe-punkte { margin: 0 0 .8rem; padding-left: 1.3rem; display: grid; gap: .5rem; }
.hilfe-schritte li, .hilfe-punkte li { line-height: 1.55; color: var(--text-leise); }
.hilfe-schritte li strong, .hilfe-punkte li strong { color: var(--text); }

/* Der Merksatz eines Abschnitts: das, was man behalten soll, wenn man
   den Rest vergisst. */
.hilfe-merke {
  border-left: 3px solid var(--akzent); background: var(--akzent-grund);
  padding: .7rem .9rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9rem; line-height: 1.55; margin-top: 1rem;
}
.hilfe-leer { padding: 2rem; text-align: center; color: var(--text-leise); }

@media (max-width: 900px) {
  .hilfe-huelle { grid-template-columns: 1fr; }
  .hilfe-navi { position: static; }
  .hilfe-navi ul {
    grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; gap: .3rem; padding-bottom: .4rem;
  }
  .hilfe-navi a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .hilfe-navi a.ist-aktiv { border-left: 0; border-bottom-color: var(--akzent); }
  .hilfe-liste { grid-template-columns: 1fr; gap: .2rem .8rem; }
  .hilfe-liste dd { margin-bottom: .6rem; }
}

@media print {
  .hilfe-huelle { grid-template-columns: 1fr; }
  .hilfe-abschnitt { break-inside: avoid; }
}

/* ── Pinnwand ──────────────────────────────────────────────── */
/* Eine Zeile je Eintrag, links der Statusknopf. Der muss groß genug sein,
   dass man ihn mit Arbeitshandschuhen trifft. */
.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pin-gruppe {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1.1rem .35rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise);
}
.pin-zeile {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .65rem 1.1rem; border-top: 1px solid var(--rand);
}
.pin-zeile:hover { background: var(--flaeche-hoch); }
.pin-haken { flex: none; }
.pin-status {
  background: none; border: 0; cursor: pointer; color: var(--text-leise);
  font-size: 1.35rem; line-height: 1; padding: .35rem; min-width: 44px; min-height: 44px;
}
.pin-status:hover { color: var(--akzent); }
.pin-text { min-width: 0; flex: 1; }
.pin-text a { color: inherit; text-decoration: none; }
.pin-text a:hover { text-decoration: underline; }
.pin-marken { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .25rem; }
.pin-zeile.ist-erledigt .pin-text > a strong { text-decoration: line-through; color: var(--text-leise); }
.pin-zeile.ist-erledigt .pin-status { color: var(--gruen); }

/* Antworten unter einem Eintrag — der Rückkanal. */
.pin-antwort {
  display: flex; gap: .7rem; padding: .7rem 0; border-top: 1px solid var(--rand);
}
.pin-antwort:first-child { border-top: 0; }
.pin-antwort-text { min-width: 0; white-space: pre-wrap; }

/* ── Standortverteilung: „wo liegt was" ────────────────────── */
/* Wird nach jedem Scan gezeigt. Muss aus zwei Metern Abstand lesbar sein,
   deshalb der Standortname fett und die Menge groß rechts daneben. */
.verteilung { display: grid; gap: .5rem; margin: .6rem 0; }
.verteilung-standort {
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .55rem .7rem; background: var(--flaeche-hoch);
}
.verteilung-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.verteilung-kopf strong { font-size: 1rem; }
.verteilung-menge { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem; }
.verteilung-orte {
  list-style: none; margin: .35rem 0 0; padding: 0;
  display: grid; gap: .15rem; font-size: .82rem; color: var(--text-leise);
}
.verteilung-orte li { display: flex; justify-content: space-between; gap: .6rem; }
/* Der eigene Arbeitsplatz zuerst erkennbar — sonst sucht man in der Liste. */
.verteilung-standort.hier { border-color: var(--akzent); background: var(--akzent-grund); }

/* Antippbare Auswahl statt Aufklappliste: mit Handschuhen trifft man Flächen,
   keine Dropdowns. */
.wahl-liste { display: grid; gap: .4rem; }
.wahl-liste label {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .6rem .7rem; background: var(--flaeche-hoch);
  min-height: 44px; font-weight: 500;
}
.wahl-liste label:hover { border-color: var(--rand-stark); }
.wahl-liste input { accent-color: var(--akzent); width: 20px; height: 20px; flex: none; }
.wahl-liste label:has(input:checked) { border-color: var(--akzent); background: var(--akzent-grund); }
.wahl-liste .wahl-menge { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── Etikettendruck ────────────────────────────────────────── */
.etiketten-bogen {
  background: #fff; color: #000;
  display: grid; gap: 2mm; padding: 8mm;
  border-radius: var(--radius);
}
.etikett {
  border: 1px dashed #bbb; padding: 2mm;
  display: grid; justify-items: center; gap: 1mm;
  break-inside: avoid; text-align: center;
}
.etikett-titel { font-size: 9pt; font-weight: 700; line-height: 1.15; }
.etikett-zusatz { font-size: 7pt; color: #444; }

/* ── Etikettendesigns ──────────────────────────────────────────
   Alle tragen denselben Barcode. Sie unterscheiden sich nur darin,
   was groß und was klein steht — je nachdem, aus welcher Entfernung
   das Etikett gelesen wird. */

/* Regal: Beschriftung ist die Hauptsache, aus zwei Metern lesbar.
   Der Text schrumpft mit, wenn der Platz nicht reicht. */
.etikett-gross { align-content: center; gap: .5mm; }
.etikett-gross-titel {
  font-size: 15pt; font-weight: 800; line-height: 1.05;
  letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: auto;
}

/* Ein Code, der auch bei kleinstmöglicher Modulbreite nicht in die Spalte
   passt. Er wird trotzdem gedruckt, aber sichtbar angemahnt. */
.barcode-eng { outline: 1px dashed var(--rot); outline-offset: 1px; }
@media print { .barcode-eng { outline: 0; } }

/* Kleinteil: nur der Code, dafür so groß wie möglich. Der Barcode bringt
   hier keinen eigenen Klartext mit, diese Zeile ist der Klartext. */
.etikett-nummer {
  font-family: var(--mono); font-size: 9pt; font-weight: 700;
  letter-spacing: .06em; line-height: 1;
}

/* Inventar: oben steht, wem das Gerät gehört. */
.etikett-inventar { gap: .5mm; }
.etikett-kopf {
  font-size: 6.5pt; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #000;
  border-bottom: .3mm solid #000; width: 100%; padding-bottom: .4mm;
}

/* Mit Preis: Nummer links, Preis rechts — auf einer Grundlinie. */
.etikett-preis-reihe {
  display: flex; align-items: baseline; justify-content: space-between;
  width: 100%; gap: 2mm;
}
.etikett-preis { font-size: 12pt; font-weight: 800; white-space: nowrap; }

/* Die Etikettenvorschau bleibt immer hell — sie zeigt Papier, nicht
   Bildschirm. Ohne das würde im dunklen Modus der Barcode verschwinden. */
.etiketten-bogen .etikett * { color: #000; }
.etiketten-bogen .etikett-zusatz { color: #444; }

@media print {
  .kopf, .seitenleiste, .unterleiste, .seiten-kopf, .hinweis, .nicht-drucken { display: none !important; }
  body { background: #fff; color: #000; }
  .inhalt { padding: 0; max-width: none; }
  .etiketten-bogen { padding: 0; gap: 0; border-radius: 0; }
  .etikett { border-color: transparent; }
  .karte { border: 0; padding: 0; background: none; }
  table.liste th { background: #fff; color: #000; }
  a { color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Testmodus ─────────────────────────────────────────────────
   Absichtlich laut und absichtlich nicht wegklickbar. Der teuerste
   Fehler wäre nicht, im Testmodus zu arbeiten — sondern zu glauben,
   man täte es nicht. */
.test-band {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .7rem 1rem; border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, #7a2e00, #7a2e00 14px, #8a3600 14px, #8a3600 28px);
  color: #fff; font-size: .88rem; line-height: 1.45;
  border: 2px solid #ffb066;
}
.test-band strong:first-child {
  letter-spacing: .14em; font-size: .95rem;
  padding: .1rem .5rem; border: 2px solid #fff; border-radius: 4px; flex: 0 0 auto;
}
.test-band code { background: rgb(0 0 0 / .3); padding: .05rem .3rem; border-radius: 3px; }
.test-band .knopf { background: #fff; color: #7a2e00; border-color: #fff; font-weight: 700; }
.anmelde-seite .test-band { max-width: 26rem; margin: 1rem auto; }

/* Der Etikettenbogen ist in Millimetern gesetzt und darf das auch bleiben —
   sonst stimmt der Ausdruck nicht. Am Handy ist er dadurch breiter als der
   Bildschirm. Er scrollt deshalb in sich selbst; die Seite bleibt ruhig. */
.bogen-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.bogen-huelle > .etiketten-bogen { width: max-content; }
@media print {
  .bogen-huelle { overflow: visible; }
  .bogen-huelle > .etiketten-bogen { width: auto; }
}