/* stil.css – tili wms. Touch-freundlich: große Flächen, klare Kontraste.
   Reines CSS, keine externen Quellen (DSGVO-Linie). */

:root {
    --grund: #0f172a;      /* Kopf/Marke (Slate 900) */
    --flaeche: #f1f5f9;    /* Seitenhintergrund */
    --karte: #ffffff;
    --rand: #e2e8f0;
    --text: #0f172a;
    --leise: #64748b;
    --blau: #1d4ed8;
    --gruen: #15803d;
    --rot: #b91c1c;
    --gelb: #b45309;
    --grau: #64748b;
    --petrol: #0f766e;     /* klickbare Sprünge in den Arbeitslisten */
    --radius: 14px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--text);
    background: var(--flaeche);
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
code { background: #eef2f7; padding: .1em .35em; border-radius: 6px; font-size: .9em; }

/* ---------- Rahmen: Seitenleiste links, Inhalt rechts (wie im Cockpit) ------ */
.rahmen { display: flex; min-height: 100vh; }

.seite {
    flex: 0 0 15rem; display: flex; flex-direction: column; gap: 1.2rem;
    background: var(--grund); color: #fff;
    padding: 1.2rem 1rem;
    padding-top: calc(1.2rem + env(safe-area-inset-top));
}
.seite .marke { font-size: 1.4rem; }
.nav-gruppe { display: flex; flex-direction: column; gap: .2rem; }
.nav-titel {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    color: #64748b; margin-bottom: .3rem; padding-left: .8rem;
}
.seite .nav-knopf {
    flex: 0 0 auto; padding: .7rem .8rem; border-radius: 10px;
    color: #cbd5e1; text-decoration: none; font-weight: 600; font-size: 1rem;
    touch-action: manipulation;
}
.seite .nav-knopf:hover { background: rgba(255,255,255,.06); color: #fff; }
/* Aktiv = schmaler Balken statt weißer Vollfläche: ruhiger, und die Leiste
   bleibt dunkel. In der schmalen Ansicht (Pillen oben) wieder gefüllt. */
.seite .nav-knopf.aktiv {
    background: rgba(255,255,255,.10); color: #fff;
    box-shadow: inset 3px 0 0 #7dd3fc;
}
.seite-fuss {
    margin-top: auto; display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem;
}
.nutzer { color: #cbd5e1; text-decoration: none; font-size: .92rem; }
.nutzer:hover { color: #fff; }

.haupt { flex: 1 1 auto; padding: 1.5rem; min-width: 0; }

/* Schmale Geräte (Tablet hochkant, Handy): Leiste wandert nach oben. */
@media (max-width: 860px) {
    .rahmen { flex-direction: column; }
    .seite {
        flex: none; flex-direction: row; align-items: center; overflow-x: auto;
        gap: .5rem; padding: .6rem .8rem;
        padding-top: calc(.6rem + env(safe-area-inset-top));
    }
    .seite .marke { flex: 0 0 auto; margin-right: .4rem; }
    /* In der schmalen Oberleiste bleibt das Logo kompakt (Höhe der Leiste). */
    .seite .marke-logo { max-height: 2.2rem; }
    .nav-gruppe { flex-direction: row; gap: .3rem; }
    .nav-titel { display: none; }
    .seite .nav-knopf { border-radius: 999px; padding: .55rem 1rem; }
    .seite .nav-knopf.aktiv { background: var(--karte); color: var(--text); box-shadow: none; }
    .seite-fuss { margin: 0 0 0 auto; border: 0; padding: 0; flex: 0 0 auto; }
    .haupt { padding: 1rem; }
}

/* ---------- Kopfleiste (nur noch auf Login-/Druckseiten) ---------- */
.kopf {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--grund); color: #fff;
    padding: .7rem 1rem;
    padding-top: calc(.7rem + env(safe-area-inset-top));
}
.marke { text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.marke-name { color: #fff; }
.marke-teil { color: #7dd3fc; margin-left: .1em; }
.marke-gross { font-size: 1.8rem; display: block; text-align: center; margin-bottom: 1.2rem; }

/* Hochgeladenes Logo statt Wortmarke. Höhe großzügig, damit die Breite (nicht
   die Höhe) die Grenze ist – sonst wirkt ein breites Wortmarken-Logo winzig. */
.marke-logo { display: block; height: auto; max-height: 4.8rem; max-width: 12rem; }
.marke-logo-gross { display: block; height: auto; max-height: 5.5rem; max-width: 15rem; margin: 0 auto 1.2rem; }

/* Helle Plakette hinter dem Logo: ein dunkles Logo sitzt so als bewusstes
   Badge auf dunklem Grund statt als zufälliger Kasten. Abschaltbar. */
.marke-logo--plakette { background: #fff; padding: .5rem .7rem; border-radius: 12px; }

/* Logo-Vorschau in den Einstellungen: auf dunklem Grund, wie es später steht. */
.marke-vorschau {
    display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem;
    padding: 1rem; background: var(--grund); border-radius: var(--radius);
}
.marke-vorschau img { height: auto; max-height: 4.8rem; max-width: 12rem; }
.marke-vorschau .ankreuz { color: #cbd5e1; }
.ankreuz { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; white-space: nowrap; }
.reihe-eng { align-items: center; gap: .9rem; }

/* ---------- Inhalt ----------
   Keine Breitenbegrenzung: Die Listen im Lager haben viele Spalten, und der
   Platz auf dem Bildschirm soll ihnen gehören. */
.inhalt { max-width: none; }

/* Kopfzeile innerhalb einer Seite (Titel + Knopf) */
.schritt-kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.schritt-kopf h1 { margin: 0; }

/* ---------- Kacheln (Zahlen) ---------- */
.kacheln {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .8rem; margin-bottom: 1.2rem;
}
.kachel {
    background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
    padding: 1.1rem; text-align: center;
}
.kachel-zahl { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.kachel-text { color: var(--leise); margin-top: .4rem; font-size: .95rem; }

/* ---------- Karten ---------- */
.karte {
    background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; margin-bottom: 1rem;
}
.karte-leise { background: transparent; border-style: dashed; }
.karte-mittig { max-width: 460px; margin: 3rem auto; text-align: center; }
.liste { margin: 0; padding-left: 1.1rem; }
.liste li { margin: .3rem 0; }

/* ---------- Knöpfe (groß, touch) ---------- */
.knopf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 3rem; padding: 0 1.3rem;
    border: 1px solid var(--rand); border-radius: var(--radius);
    background: #fff; color: var(--text);
    font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
    touch-action: manipulation;
}
.knopf-stark { background: var(--blau); border-color: var(--blau); color: #fff; }
.knopf-geist { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.knopf-klein { min-height: 2.2rem; padding: 0 .9rem; font-size: .9rem; }
.knopf-voll { width: 100%; }

/* Gedrückt-Zustand.
   Am Tablet ist das keine Verzierung: Ohne sichtbare Rückmeldung tippt man im
   Zweifel ein zweites Mal – und beim Einlagern ist der zweite Tipp eine zweite
   Buchung. touch-action: manipulation nimmt zusätzlich die 300-ms-Wartezeit auf
   den Doppeltipp-Zoom weg, damit die Rückmeldung sofort kommt. */
.knopf:active, .knopf-erledigt:active, .reiter-knopf:active, .liegt-knopf:active {
    transform: translateY(1px); filter: brightness(.94);
}
.knopf:disabled:active, .knopf-erledigt:disabled:active { transform: none; filter: none; }
.reiter-knopf, .liegt-knopf, .kachel-link { touch-action: manipulation; }

@media (prefers-reduced-motion: reduce) {
    .knopf:active, .knopf-erledigt:active, .reiter-knopf:active, .liegt-knopf:active {
        transform: none;
    }
}

/* Sichtbarer Fokus überall – im Lager wird mit Handscanner und Tastatur
   gearbeitet, und ohne Rahmen weiß man nicht, wo die Eingabe landet. */
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.seite :focus-visible { outline-color: #7dd3fc; }

/* ---------- Meldungen ---------- */
.meldung { padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid; }
.meldung-erfolg  { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.meldung-fehler  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.meldung-hinweis { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ---------- Etiketten (Badges) ---------- */
.etikett {
    display: inline-block; padding: .12em .6em; border-radius: 999px;
    font-size: .78rem; font-weight: 700; color: #fff; vertical-align: middle;
}
.etikett-grau  { background: var(--grau); }
.etikett-blau  { background: var(--blau); }
.etikett-gruen { background: var(--gruen); }
.etikett-rot   { background: var(--rot); }
.etikett-gelb  { background: var(--gelb); }

/* ---------- Formularfelder ---------- */
.feld { margin-bottom: 1rem; }
.feld label { display: block; font-weight: 600; margin-bottom: .35rem; }
/* Nur Text-artige Felder werden vollbreit. Checkbox/Radio/Color würden sonst
   die 100%-Breite und min-height:3rem erben und die Ankreuz-Zeilen sprengen. */
.feld input:not([type=checkbox]):not([type=radio]):not([type=color]), .feld select {
    width: 100%; min-height: 3rem; padding: 0 .9rem;
    border: 1px solid var(--rand); border-radius: var(--radius);
    font-size: 1.05rem; background: #fff; color: var(--text);
}
.feld input:focus, .feld select:focus { outline: 3px solid #bfdbfe; border-color: var(--blau); }

/* ---------- Login ---------- */
.login-huelle { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-karte {
    background: var(--karte); border: 1px solid var(--rand); border-radius: 20px;
    padding: 2rem 1.6rem; width: 100%; max-width: 380px;
}
.login-karte .marke-name { color: var(--grund); }
.login-karte .marke-teil { color: var(--blau); }

.mini { margin: 0; }

/* Kleingedrucktes */
.leise { color: var(--leise); font-weight: 400; font-size: .85em; }
.hinweis-text { color: var(--leise); margin: 0 0 1.2rem; font-size: .95rem; }

/* ---------- Karten-Kopf & Formularreihe ---------- */
.karte-kopf {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .8rem; margin-bottom: .8rem;
}
.karte-kopf h2 { margin: 0; }
.druck-leiste { display: flex; flex-wrap: wrap; gap: .4rem; }

.reihe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.reihe .feld { margin-bottom: 0; }
.feld-schmal { width: 8.5rem; }
.feld-mittel { width: 12rem; }
.feld-breit  { flex: 1 1 16rem; min-width: 14rem; }

/* ---------- Aufklapp-Karte (<details>) ----------
   Für Formulare, die man selten braucht: Auf der Artikelseite soll die Tabelle
   oben stehen, nicht das Anlegen-Formular. Der Zusammenklapp-Zustand kommt vom
   Browser – kein JavaScript nötig. */
.aufklapp { padding: 0; }
.aufklapp > summary {
    padding: 1rem 1.2rem; cursor: pointer; font-weight: 600;
    list-style: none; display: flex; align-items: center; gap: .5rem;
    min-height: 3rem; touch-action: manipulation;
}
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::before { content: '＋'; color: var(--leise); font-weight: 700; }
.aufklapp[open] > summary::before { content: '−'; }
.aufklapp[open] > summary { border-bottom: 1px solid var(--rand); }
.aufklapp > *:not(summary) { margin-left: 1.2rem; margin-right: 1.2rem; }
.aufklapp > summary + * { margin-top: 1.1rem; }
.aufklapp > *:last-child { margin-bottom: 1.2rem; }

/* ---------- Reiter (Statusfilter) ---------- */
.reiter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.reiter-knopf {
    padding: .5rem 1rem; border: 1px solid var(--rand); border-radius: 999px;
    background: #fff; color: var(--leise); text-decoration: none;
    font-size: .95rem; font-weight: 600;
}
.reiter-knopf.aktiv { background: var(--grund); border-color: var(--grund); color: #fff; }

/* ---------- Sortierbare Spaltenköpfe ---------- */
.sortier { color: inherit; text-decoration: none; white-space: nowrap; }
.sortier:hover { color: var(--blau); }
.sortier-aktiv { color: var(--blau); }

/* ---------- Tabelle ---------- */
.tabelle-huelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .97rem; }
.tabelle th, .tabelle td {
    padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--rand);
    white-space: nowrap;
}
.tabelle th { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); }
.tabelle tbody tr:last-child td { border-bottom: 0; }

/* Zahlen laufen in gleicher Breite – sonst hüpfen Mengen und Bestände beim
   Aktualisieren seitwärts, und man vergleicht Spalten schlechter. */
.tabelle td, .kachel-zahl, .feld-zahl, .menge-feld, .ort-chip { font-variant-numeric: tabular-nums; }

/* Lange Listen: eigener Scrollbereich mit stehendem Spaltenkopf. Ohne die
   Höhenbegrenzung wäre sticky wirkungslos, weil .tabelle-huelle durch
   overflow-x schon ein eigener Scroll-Container ist. */
.tabelle-huelle-hoch { max-height: 70vh; overflow: auto; }
.tabelle-huelle-hoch .tabelle thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--karte); box-shadow: inset 0 -1px 0 var(--rand);
}
.zeile-leise td { opacity: .55; }
.spalte-aktionen { display: flex; gap: .4rem; justify-content: flex-end; }

/* ---------- Tabelle als Kartenzeilen (Handy) ----------
   Auf dem Handy ist eine neunspaltige Tabelle mit waagerechtem Scrollen nicht
   bedienbar: man verliert beim Schieben die Zeile. Darum wird jede Zeile eine
   Karte, und jede Zelle nennt links ihre Spalte (data-spalte). Nur Tabellen mit
   .tabelle-karten machen das mit – Listen mit wenigen, schmalen Spalten bleiben
   Tabelle. */
@media (max-width: 700px) {
    .tabelle-karten { font-size: 1rem; }
    .tabelle-karten thead { display: none; }
    .tabelle-karten, .tabelle-karten tbody, .tabelle-karten tr, .tabelle-karten td {
        display: block; width: auto;
    }
    .tabelle-karten tr {
        border: 1px solid var(--rand); border-radius: var(--radius);
        padding: .5rem .8rem; margin-bottom: .7rem;
    }
    .tabelle-karten td {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 1rem; padding: .3rem 0; border-bottom: 0; white-space: normal;
        text-align: right;
    }
    .tabelle-karten td::before {
        content: attr(data-spalte);
        flex: 0 0 auto; color: var(--leise);
        font-size: .85rem; font-weight: 600; text-align: left;
    }
    .tabelle-karten td:not([data-spalte]) { justify-content: flex-end; }
    .tabelle-karten .spalte-breit { min-width: 0; }
    .tabelle-karten .spalte-aktionen { padding-top: .5rem; }
    /* In der Kartenansicht scrollt die Seite, nicht die Tabelle. */
    .tabelle-huelle-hoch { max-height: none; overflow: visible; }
}

.knopf-gefahr { border-color: #fecaca; color: var(--rot); }

/* Trennlinie in Karten */
.trenner { height: 1px; background: var(--rand); margin: 1.2rem 0; }

/* Schmale Eingaben in Tabellen/Leisten */
.feld-zahl {
    width: 5.2rem; min-height: 2.4rem; padding: 0 .5rem;
    border: 1px solid var(--rand); border-radius: 10px; font-size: 1rem;
    background: #fff; color: var(--text);
}
.feld-suche {
    min-height: 2.4rem; padding: 0 .7rem; width: 12rem;
    border: 1px solid var(--rand); border-radius: 10px; font-size: 1rem;
    background: #fff; color: var(--text);
}
.spalte-breit { white-space: normal; min-width: 14rem; }

/* Kleiner, mittiger Hilfslink (Login/Zurücksetzen) */
.mitte-klein { text-align: center; margin: 1rem 0 0; font-size: .9rem; }
.mitte-klein a { color: var(--leise); }

/* Lagerorte als kleine Marken in der Artikelliste */
.ort-chip {
    display: inline-block; margin: 0 .3rem .25rem 0; padding: .2rem .55rem;
    background: #eef2f7; border-radius: 999px; font-size: .85rem; white-space: nowrap;
}
.diff-plus  { color: var(--gruen); }
.diff-minus { color: var(--rot); }

/* Klickbare Kachel */
.kachel-link { display: block; text-decoration: none; color: inherit; }
.kachel-link:hover { border-color: var(--blau); }

/* =====================================================================
   Lager-Tablet: Pick-Ablauf. Große Flächen, wenig Text, alles mit
   Handschuhen bedienbar.
   ===================================================================== */

.knopf-gross { min-height: 3.6rem; font-size: 1.1rem; }

/* Bestellauswahl */
.pick-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pick-nummer { font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; }

/* Der Schritt-Bildschirm */
.pick-haupt { padding-bottom: 5rem; }

.pick-fortschritt { margin-bottom: 1rem; }
.pick-balken { height: 10px; background: var(--rand); border-radius: 999px; overflow: hidden; }
.pick-balken-fuellung { height: 100%; width: 0; background: var(--gruen); transition: width .2s ease; }
.pick-zahlen { margin-top: .35rem; color: var(--leise); font-size: .9rem; text-align: right; }

/* Pickliste als abgesetzte Positionskarten (#118): jede Position eine eigene
   Karte mit Petrol-Balken links und klarem Abstand – so verschwimmen sie nicht
   mehr. Platz springt aufs Umlagern, Artikel/SKU auf den Bestand. */
.pick-pos {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--karte); border: 1px solid var(--rand);
    border-left: 6px solid var(--petrol); border-radius: var(--radius);
    padding: .9rem 1.1rem; margin-bottom: .9rem;
}
.pick-pos-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.pick-pos-platz { flex: 0 0 auto; min-width: 6rem; }
.pick-pos-artikel { flex: 1 1 12rem; min-width: 0; }

/* Klickbare Sprünge – in Petrol, damit sie sich vom Standard-Blau der Knöpfe
   absetzen und klar als „hier geht's weiter" lesbar sind. */
.pick-platz {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em;
    color: var(--petrol); text-decoration: none; white-space: nowrap;
}
.pick-artikel { display: block; font-size: 1.05rem; font-weight: 700; color: var(--petrol); text-decoration: none; }
.pick-sku { display: inline-block; margin-top: .15rem; font-size: .9rem; color: var(--petrol); text-decoration: none; }
.pick-platz:hover, .pick-artikel:hover, .pick-sku:hover { text-decoration: underline; }

/* Menge + Aktion: Normalfall ein Tipp auf „Gepickt"; das Kästchen daneben klappt
   fürs Ändern ein Feld mit OK auf (#118). */
.pick-pos-aktion { flex: 0 0 auto; margin-left: auto; }
/* display nur, wenn nicht [hidden] – sonst schlägt das flex das hidden-Attribut
   und beide Zustände (Normal + Teilmenge) stünden gleichzeitig da. */
.pick-menge-normal:not([hidden]), .pick-menge-edit:not([hidden]) { display: flex; align-items: center; gap: .6rem; }

.pick-mengenknopf {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 4.2rem; min-height: 3.4rem; padding: .2rem .5rem;
    border: 2px solid var(--rand); border-radius: 10px;
    background: #faf9f7; color: var(--text); cursor: pointer; touch-action: manipulation;
}
.pick-mengenknopf:hover { border-color: var(--petrol); }
.pick-mengenknopf-zahl { font-size: 1.5rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pick-mengenknopf-hint { font-size: .62rem; letter-spacing: .03em; color: var(--leise); }

.pick-gepickt {
    min-height: 3.4rem; padding: 0 1.3rem;
    background: var(--gruen); border-color: var(--gruen); color: #fff; font-weight: 800;
}
.pick-gepickt:disabled { opacity: .5; }

/* Teilmengen-Feld: grün getönt, damit klar ist, dass hier bestätigt wird. */
.pick-menge-edit {
    background: #f0fdf4; border: 2px solid var(--gruen); border-radius: 10px; padding: .4rem .5rem;
}
.pick-nimm { font-size: .8rem; font-weight: 700; color: var(--gruen); }
.pick-menge-feld {
    width: 3.4rem; min-height: 2.8rem; padding: 0 .3rem;
    border: 1px solid var(--rand); border-radius: 8px;
    font-size: 1.5rem; font-weight: 800; text-align: center;
    background: #fff; color: var(--text); font-variant-numeric: tabular-nums;
}
.pick-von { color: var(--leise); font-size: .9rem; }
.pick-ok { min-height: 2.8rem; padding: 0 1rem; background: var(--gruen); border-color: var(--gruen); color: #fff; font-weight: 800; }

/* Sofortige Rückmeldung beim Buchen, bis der Server den frischen Stand zeichnet. */
.pick-zeile-bucht { opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
    .pick-zeile-bucht { transition: opacity .15s ease; }
}

/* Am Handy: Menge/Aktion unter Platz+Artikel, volle Breite. */
@media (max-width: 700px) {
    .pick-pos-aktion { flex: 1 1 100%; margin-left: 0; }
    .pick-menge-normal { justify-content: space-between; }
}

/* Kleine Überschrift über dem Platzinhalt im Lager (setzt lager.js). */
.pick-label { color: var(--leise); font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; }

.knopf-erledigt {
    display: flex; align-items: center; justify-content: center;
    width: 100%; margin-top: 1.6rem;
    min-height: 5rem; border: 0; border-radius: var(--radius);
    background: var(--gruen); color: #fff;
    font-size: 1.5rem; font-weight: 700; cursor: pointer;
}
.knopf-erledigt:disabled { opacity: .5; }

.pick-fertig { text-align: center; padding: 2rem 1.2rem; }
.pick-haken {
    width: 5rem; height: 5rem; margin: 0 auto 1rem; border-radius: 50%;
    background: #dcfce7; color: var(--gruen);
    font-size: 2.6rem; line-height: 5rem; font-weight: 700;
}
.pick-haenger .fehlend-zeile {
    padding: .6rem .8rem; margin-bottom: .5rem;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
}

.pick-fuss { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.5rem; }

/* Wareneingang: Scan-Feld groß, Zahlen gut lesbar */
.scan-feld {
    width: 100%; min-height: 4rem; padding: 0 1rem;
    border: 2px solid var(--blau); border-radius: var(--radius);
    font-size: 1.7rem; font-weight: 700; letter-spacing: .06em; text-align: center;
    text-transform: uppercase; background: #fff; color: var(--text);
}
.scan-feld:focus { outline: 4px solid #bfdbfe; }
.wahl-feld, .menge-feld {
    width: 100%; min-height: 3.4rem; padding: 0 .8rem;
    border: 1px solid var(--rand); border-radius: var(--radius);
    font-size: 1.15rem; background: #fff; color: var(--text);
}
.menge-feld { font-size: 1.6rem; font-weight: 700; text-align: center; }

.platz-inhalt { margin-bottom: 1.2rem; }
.liegt-knopf {
    display: inline-block; margin: .25rem .3rem 0 0; padding: .5rem .9rem;
    border: 1px solid var(--rand); border-radius: 999px; background: #fff;
    font-size: .95rem; font-weight: 600; cursor: pointer; color: var(--text);
}
.liegt-knopf:hover { border-color: var(--blau); }

/* Lager: alle Felder auf einmal, nebeneinander wo Platz ist */
.lager-raster {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.lager-raster .feld { margin-bottom: 0; }
.feld-notiz { margin-top: .35rem; font-size: .85rem; color: var(--leise); min-height: 1.2em; }
.notiz-fehler { color: var(--rot); font-weight: 600; }

/* Die drei Aktionen: gleich groß, klar unterschieden */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.knopf-drittel { flex: 1 1 11rem; flex-direction: column; gap: .15rem; min-height: 4.2rem; margin-top: 0; }
.knopf-drittel small { font-weight: 500; font-size: .78rem; opacity: .85; }
.knopf-blau { background: var(--blau); }
.knopf-gelb { background: var(--gelb); }