/* Grogatec Refurbishment v2 — ruhiges, großes Werkstatt-Design (Tablet zuerst) */
:root {
  --akzent:#1d6f42; --akzent-dunkel:#14522f; --akzent-hell:#e7f2ec; --akzent-mittel:#8fc3a7;
  --bg:#f3f5f4; --karte:#fff; --tinte:#1b2420; --grau:#65706a; --rand:#dfe5e1; --rand-stark:#c9d2cc;
  --rot:#b3261e; --rot-hell:#fbebea; --gelb:#8a6d00; --gelb-hell:#fff6dc; --blau:#1f5fa8; --blau-hell:#e8f0fb;
  --radius:14px; --radius-klein:10px;
  --schatten:0 1px 2px rgba(27,36,32,.06), 0 2px 8px rgba(27,36,32,.05);
  --schatten-hoch:0 6px 20px rgba(27,36,32,.12);
  --kopf-h:58px; --tab-h:64px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--tinte); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--akzent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:1.5rem; margin:.2rem 0 .9rem; letter-spacing:-.3px; line-height:1.2; }
h2 { font-size:1.05rem; margin:1.4rem 0 .6rem; color:var(--akzent-dunkel); }
h3 { font-size:.95rem; margin:.9rem 0 .4rem; }
p { margin:.4rem 0 .8rem; }
.hinweis { color:var(--grau); font-size:.88rem; }
.klein { font-size:.85rem; }
.rechts { text-align:right; }
.zentriert { text-align:center; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.3px; }
.nowrap { white-space:nowrap; }

/* ---------- Kopf ---------- */
header.kopf { position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--rand); box-shadow:0 1px 0 rgba(0,0,0,.02); }
.kopf-innen { max-width:1100px; margin:0 auto; height:var(--kopf-h); padding:0 1rem; display:flex; align-items:center; gap:1rem; }
.logo { font-weight:800; font-size:1.15rem; color:var(--akzent-dunkel); letter-spacing:-.2px; display:flex; align-items:center; gap:.5rem; }
.logo:hover { text-decoration:none; }
.logo .punkt { width:12px; height:12px; border-radius:50%; background:var(--akzent); display:inline-block; }
.logo small { font-weight:500; color:var(--grau); font-size:.8rem; }
nav.haupt { display:flex; gap:.15rem; margin-left:auto; }
nav.haupt a { color:var(--tinte); padding:.5rem .8rem; border-radius:999px; font-weight:500; font-size:.95rem; }
nav.haupt a:hover { background:var(--bg); text-decoration:none; }
nav.haupt a.aktiv { background:var(--akzent-hell); color:var(--akzent-dunkel); font-weight:700; }
.wer-chip { display:inline-flex; align-items:center; gap:.4rem; border:1.5px solid var(--rand-stark); border-radius:999px; padding:.35rem .8rem; background:#fff; color:var(--tinte); font-weight:600; font-size:.9rem; cursor:pointer; white-space:nowrap; }
.wer-chip:hover { border-color:var(--akzent); text-decoration:none; }
.wer-chip.leer { border-style:dashed; color:var(--grau); font-weight:500; }

/* ---------- Tab-Leiste (Handy/Tablet) ---------- */
nav.tabs { display:none; position:fixed; bottom:0; left:0; right:0; z-index:40; height:calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:#fff; border-top:1px solid var(--rand); box-shadow:0 -4px 16px rgba(0,0,0,.05); }
nav.tabs a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--grau); font-size:.72rem; font-weight:600; }
nav.tabs a .ico { font-size:1.35rem; line-height:1; }
nav.tabs a.aktiv { color:var(--akzent-dunkel); }
nav.tabs a.scan .ico { background:var(--akzent); color:#fff; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:-22px; box-shadow:var(--schatten-hoch); font-size:1.5rem; }
nav.tabs a:hover { text-decoration:none; }

main { max-width:1100px; margin:1.2rem auto 3rem; padding:0 1rem; }

/* ---------- Karten, Kacheln ---------- */
.karte { background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius); padding:1.1rem 1.25rem; margin-bottom:1rem; box-shadow:var(--schatten); }
.karte.kompakt { padding:.75rem 1rem; }
.karte.hervor { border-color:var(--akzent); box-shadow:0 0 0 3px var(--akzent-hell), var(--schatten); }
.karte.warn { border-color:#e2a19d; background:var(--rot-hell); }
.karte.gelb { border-color:#dfc879; background:var(--gelb-hell); }
.karte > h2:first-child, .karte > h3:first-child { margin-top:0; }
.kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.9rem; margin:.8rem 0 1.4rem; }
.kachel { display:block; background:var(--karte); border:1.5px solid var(--rand); border-radius:var(--radius); padding:1.2rem 1.15rem; color:var(--tinte); box-shadow:var(--schatten); transition:transform .1s, border-color .1s, box-shadow .1s; position:relative; }
.kachel:hover { transform:translateY(-2px); border-color:var(--akzent); text-decoration:none; box-shadow:var(--schatten-hoch); }
.kachel.primaer { border-color:var(--akzent); background:linear-gradient(180deg,#fff,var(--akzent-hell)); }
.kachel .ico { font-size:1.9rem; line-height:1; }
.kachel .name { font-weight:700; font-size:1.08rem; margin:.55rem 0 .15rem; }
.kachel .info { color:var(--grau); font-size:.86rem; line-height:1.4; }
.kachel .zahl { position:absolute; top:.9rem; right:1rem; background:var(--akzent-hell); color:var(--akzent-dunkel); border-radius:999px; font-weight:800; padding:.15rem .65rem; font-size:.9rem; }

/* ---------- Arbeitsvorrat ---------- */
.vorrat { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.75rem; margin:.6rem 0 1.2rem; }
.vorrat a { display:flex; flex-direction:column; background:var(--karte); border:1.5px solid var(--rand); border-radius:var(--radius); padding:.9rem 1rem; color:var(--tinte); box-shadow:var(--schatten); min-height:96px; transition:border-color .1s, transform .1s; }
.vorrat a:hover { border-color:var(--akzent); text-decoration:none; transform:translateY(-1px); }
.vorrat .anz { font-size:2rem; font-weight:800; line-height:1; letter-spacing:-1px; }
.vorrat .titel { font-weight:700; margin-top:.25rem; }
.vorrat .sub { color:var(--grau); font-size:.8rem; margin-top:.1rem; }
.vorrat a.leer { opacity:.55; border-style:dashed; box-shadow:none; }
.vorrat a.leer .anz { color:var(--grau); }
.vorrat a.gruen .anz { color:var(--akzent); } .vorrat a.gelb .anz { color:var(--gelb); }
.vorrat a.blau .anz { color:var(--blau); } .vorrat a.rot .anz { color:var(--rot); }
.vorrat .nr { font-size:.72rem; color:var(--grau); text-transform:uppercase; letter-spacing:.5px; }

/* ---------- Scanfeld ---------- */
.scanfeld { display:flex; gap:.6rem; align-items:stretch; }
.scanfeld .feld { flex:1; position:relative; }
.scanfeld .feld::before { content:"⌕"; position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--grau); pointer-events:none; }
.scanfeld input { width:100%; max-width:none; height:60px; font-size:1.2rem; padding:0 1rem 0 3rem; border:2px solid var(--rand-stark); border-radius:var(--radius); background:#fff; }
.scanfeld input:focus { border-color:var(--akzent); box-shadow:0 0 0 4px var(--akzent-hell); outline:none; }
.scanfeld .btn { margin:0; height:60px; padding:0 1.1rem; font-size:1.2rem; }
.scan-hero { background:linear-gradient(160deg,var(--akzent-dunkel),var(--akzent)); color:#fff; border-radius:var(--radius); padding:1.3rem 1.25rem 1.1rem; margin-bottom:1.2rem; box-shadow:var(--schatten-hoch); }
.scan-hero h1 { color:#fff; margin:0 0 .8rem; font-size:1.3rem; }
.scan-hero .hinweis { color:rgba(255,255,255,.8); margin:.6rem 0 0; }
.scan-hero .scanfeld input { border-color:transparent; }
.scan-hero .btn.sekundaer { background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.5); }
.scan-hero .btn.sekundaer:hover { background:rgba(255,255,255,.28); }

/* ---------- Formulare ---------- */
label { display:block; font-size:.82rem; color:var(--grau); margin:.75rem 0 .25rem; font-weight:600; }
label.inline { display:flex; align-items:center; gap:.6rem; font-size:.95rem; color:var(--tinte); font-weight:500; margin:.6rem 0; cursor:pointer; }
label.inline input { width:1.35rem; height:1.35rem; accent-color:var(--akzent); margin:0; flex:0 0 auto; }
input,select,textarea { width:100%; max-width:480px; padding:.65rem .8rem; border:1.5px solid var(--rand-stark); border-radius:var(--radius-klein); font:inherit; font-size:1rem; background:#fff; color:var(--tinte); transition:border .15s, box-shadow .15s; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px var(--akzent-hell); }
input[type=checkbox],input[type=radio] { width:auto; }
input[type=file] { padding:.5rem; background:var(--bg); border-style:dashed; }
textarea { min-height:84px; max-width:640px; resize:vertical; }
.zeile { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 1.5rem; }
.zeile-eng { display:flex; gap:.6rem; flex-wrap:wrap; align-items:end; }
.zeile-eng > div { flex:1 1 160px; }
.zeile-eng label { margin-top:0; }
.voll { max-width:none !important; }
.schmal { max-width:160px !important; }
.mittel { max-width:260px !important; }
.pflicht::after { content:" *"; color:var(--rot); }

button,.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; background:var(--akzent); color:#fff; border:1.5px solid var(--akzent); border-radius:var(--radius-klein); padding:.7rem 1.2rem; font:inherit; font-size:1rem; font-weight:700; cursor:pointer; text-decoration:none; margin-top:.7rem; min-height:46px; transition:background .15s, transform .05s; line-height:1.2; }
button:hover,.btn:hover { background:var(--akzent-dunkel); border-color:var(--akzent-dunkel); text-decoration:none; }
button:active,.btn:active { transform:scale(.985); }
button:disabled,.btn.aus { background:#c3cbc6; border-color:#c3cbc6; color:#fff; cursor:not-allowed; transform:none; }
button.sekundaer,.btn.sekundaer { background:#fff; color:var(--akzent-dunkel); border-color:var(--rand-stark); }
button.sekundaer:hover,.btn.sekundaer:hover { background:var(--akzent-hell); border-color:var(--akzent); }
button.gross,.btn.gross { width:100%; min-height:60px; font-size:1.15rem; border-radius:var(--radius); }
button.klein,.btn.klein { padding:.35rem .7rem; font-size:.85rem; min-height:34px; margin:0; }
button.gefahr,.btn.gefahr { background:#fff; color:var(--rot); border-color:#e2a19d; }
button.gefahr:hover,.btn.gefahr:hover { background:var(--rot-hell); border-color:var(--rot); }
button.leise,.btn.leise { background:transparent; border-color:transparent; color:var(--akzent-dunkel); padding-left:.4rem; padding-right:.4rem; }
button.leise:hover,.btn.leise:hover { background:var(--akzent-hell); }
.aktionen { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.5rem; }
.aktionen .btn, .aktionen button { margin-top:.3rem; }

/* Segment-Auswahl (Radio als Buttons) */
.segment { display:inline-flex; border:1.5px solid var(--rand-stark); border-radius:var(--radius-klein); overflow:hidden; background:#fff; max-width:100%; flex-wrap:wrap; }
.segment label { margin:0; cursor:pointer; }
.segment input { position:absolute; opacity:0; pointer-events:none; }
.segment span { display:block; padding:.65rem 1.1rem; font-weight:600; color:var(--tinte); font-size:.95rem; border-right:1.5px solid var(--rand); }
.segment label:last-child span { border-right:0; }
.segment input:checked + span { background:var(--akzent); color:#fff; }
.segment.rot input:checked + span { background:var(--rot); }

/* Mengen-Stepper */
.stepper-num { display:inline-flex; align-items:stretch; }
.stepper-num button { margin:0; border-radius:0; padding:0 1rem; font-size:1.3rem; min-height:46px; background:var(--akzent-hell); color:var(--akzent-dunkel); border:1.5px solid var(--rand-stark); }
.stepper-num button:first-child { border-radius:var(--radius-klein) 0 0 var(--radius-klein); }
.stepper-num button:last-child { border-radius:0 var(--radius-klein) var(--radius-klein) 0; }
.stepper-num input { width:72px; max-width:72px; text-align:center; border-radius:0; border-left:0; border-right:0; -moz-appearance:textfield; font-weight:700; }
.stepper-num input::-webkit-outer-spin-button,.stepper-num input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ---------- Badges, Flash ---------- */
.badge { display:inline-block; border-radius:999px; padding:.15rem .65rem; font-size:.76rem; font-weight:700; background:var(--akzent-hell); color:var(--akzent-dunkel); border:1px solid var(--akzent-mittel); white-space:nowrap; vertical-align:middle; }
.badge.rot { color:var(--rot); border-color:#e2a19d; background:var(--rot-hell); }
.badge.gelb { color:var(--gelb); border-color:#dfc879; background:var(--gelb-hell); }
.badge.blau { color:var(--blau); border-color:#a9c3e6; background:var(--blau-hell); }
.badge.grau { color:var(--grau); border-color:var(--rand); background:#eef0ef; }
.flash { background:var(--akzent-hell); border:1px solid var(--akzent-mittel); color:var(--akzent-dunkel); border-radius:var(--radius-klein); padding:.75rem 2.4rem .75rem 1rem; margin-bottom:.7rem; font-weight:500; position:relative; box-shadow:var(--schatten); }
.flash.warn { background:var(--gelb-hell); border-color:#dfc879; color:var(--gelb); }
.flash.rot { background:var(--rot-hell); border-color:#e2a19d; color:var(--rot); }
.flash .weg { position:absolute; right:.6rem; top:.5rem; background:none; border:0; color:inherit; font-size:1.1rem; cursor:pointer; min-height:0; padding:.2rem .4rem; margin:0; }
.box { border-radius:var(--radius-klein); padding:.75rem 1rem; margin:.6rem 0; font-size:.95rem; }
.box.rot { background:var(--rot-hell); border:1px solid #e2a19d; color:var(--rot); }
.box.gelb { background:var(--gelb-hell); border:1px solid #dfc879; color:#5e4b00; }
.box.blau { background:var(--blau-hell); border:1px solid #a9c3e6; color:var(--blau); }
.box.gruen { background:var(--akzent-hell); border:1px solid var(--akzent-mittel); color:var(--akzent-dunkel); }

/* ---------- Tabellen & Listen ---------- */
.tabelle { overflow-x:auto; background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius); box-shadow:var(--schatten); margin-bottom:1rem; }
table { border-collapse:collapse; width:100%; font-size:.93rem; }
th,td { padding:.7rem .85rem; text-align:left; vertical-align:middle; }
th { background:#f7f9f8; color:var(--grau); font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--rand); font-weight:700; }
td { border-bottom:1px solid var(--rand); }
tr:last-child td { border-bottom:0; }
tbody tr.klick { cursor:pointer; }
tbody tr.klick:hover td { background:#f7faf8; }
.liste { background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius); box-shadow:var(--schatten); margin-bottom:1rem; overflow:hidden; }
.liste a.eintrag, .liste .eintrag { display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-bottom:1px solid var(--rand); color:var(--tinte); }
.liste .eintrag:last-child { border-bottom:0; }
.liste a.eintrag:hover { background:#f7faf8; text-decoration:none; }
.liste .eintrag .haupt { flex:1; min-width:0; }
.liste .eintrag .haupt strong { display:block; font-size:1rem; }
.liste .eintrag .haupt .sub { color:var(--grau); font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:600px) {   /* Handy: Plakette (z. B. „1 Gerät · 1 Kleinteil-Posten“) in die zweite Zeile, Name behält die Breite */
  .liste .eintrag { flex-wrap:wrap; }
  .liste .eintrag .haupt { flex:1 1 60%; }
  .liste .eintrag .badge { order:3; margin-left:2.6rem; white-space:normal; }
}
.liste .eintrag .pfeil { color:var(--rand-stark); font-size:1.3rem; }
.liste .eintrag .nr { width:36px; height:36px; border-radius:50%; background:var(--akzent-hell); color:var(--akzent-dunkel); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; flex:0 0 auto; }
.fortschritt { background:#e6eae8; border-radius:999px; height:8px; width:90px; overflow:hidden; display:inline-block; vertical-align:middle; }
.fortschritt > div { background:linear-gradient(90deg,var(--akzent-mittel),var(--akzent)); height:100%; }

/* ---------- Prozess-Band (Laufzettel) ---------- */
.band { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin:.6rem 0 1rem; }
.band .s { text-align:center; padding:.5rem .15rem .45rem; border-radius:var(--radius-klein); background:#fff; border:1.5px solid var(--rand); color:var(--grau); font-size:.72rem; line-height:1.25; }
.band .s b { display:block; font-size:1rem; margin-bottom:.15rem; }
.band .s.fertig { background:var(--akzent-hell); border-color:var(--akzent-mittel); color:var(--akzent-dunkel); }
.band .s.aktiv { background:var(--akzent); border-color:var(--akzent); color:#fff; font-weight:700; box-shadow:0 0 0 3px var(--akzent-hell); }
.band .s.gesperrt { background:var(--gelb-hell); border-color:#dfc879; color:var(--gelb); }
.band .s.rot { background:var(--rot-hell); border-color:#e2a19d; color:var(--rot); }
@media (max-width:620px) { .band { grid-template-columns:repeat(4,1fr); } }

/* Gerätekopf */
.geraet-kopf { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.geraet-kopf .sn { font-size:1.6rem; font-weight:800; letter-spacing:-.3px; word-break:break-all; }
.geraet-kopf .bez { font-size:1.05rem; color:var(--grau); }
.geraet-kopf .meta { display:flex; gap:.6rem 1.2rem; flex-wrap:wrap; color:var(--grau); font-size:.88rem; margin-top:.4rem; }
.geraet-kopf .meta b { color:var(--tinte); font-weight:600; }
.badges { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.4rem; }

/* Jetzt-Karte */
.jetzt { border:2px solid var(--akzent); border-radius:var(--radius); background:#fff; padding:1.2rem 1.25rem; margin-bottom:1rem; box-shadow:var(--schatten-hoch); }
.jetzt .ueber { text-transform:uppercase; letter-spacing:.7px; font-size:.72rem; color:var(--akzent); font-weight:800; }
.jetzt h2 { margin:.15rem 0 .6rem; font-size:1.35rem; color:var(--tinte); }
.jetzt.gesperrt { border-color:#dfc879; }
.countdown { font-variant-numeric:tabular-nums; font-weight:800; }

/* Testsequenz-Zeilen */
.test-zeile { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; padding:.7rem 0; border-bottom:1px solid var(--rand); }
.test-zeile:last-child { border-bottom:0; }
.test-zeile .was { flex:1 1 200px; }
.test-zeile .was b { display:block; }
.test-zeile .was span { color:var(--grau); font-size:.85rem; }
.test-zeile form { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.test-zeile input { max-width:150px; padding:.5rem .6rem; }
.test-zeile button { margin:0; min-height:42px; padding:.4rem .9rem; }
.test-zeile button.nio { background:#fff; color:var(--rot); border-color:#e2a19d; }
.test-zeile button.nio:hover { background:var(--rot-hell); }

/* Accordion */
details.abschnitt { background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius); margin-bottom:.7rem; box-shadow:var(--schatten); }
details.abschnitt summary { list-style:none; cursor:pointer; padding:.9rem 1.15rem; font-weight:700; display:flex; align-items:center; gap:.6rem; }
details.abschnitt summary::-webkit-details-marker { display:none; }
details.abschnitt summary::after { content:"▾"; margin-left:auto; color:var(--grau); transition:transform .15s; }
details.abschnitt[open] summary::after { transform:rotate(180deg); }
details.abschnitt summary .badge { margin-left:.2rem; }
details.abschnitt .inhalt { padding:0 1.15rem 1.1rem; }
details.abschnitt.gefahr summary { color:var(--rot); }

/* Fotos */
.fotos { display:flex; gap:.5rem; flex-wrap:wrap; }
.fotos img { height:104px; width:104px; object-fit:cover; border-radius:var(--radius-klein); border:1px solid var(--rand); }
.foto-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; height:104px; width:104px; border:2px dashed var(--rand-stark); border-radius:var(--radius-klein); color:var(--akzent-dunkel); font-weight:700; cursor:pointer; text-align:center; font-size:.85rem; background:var(--bg); }
.foto-btn:hover { border-color:var(--akzent); }
.foto-btn input { display:none; }

/* Chips */
.chips { display:flex; gap:.4rem; flex-wrap:wrap; margin:.3rem 0 .6rem; }
.chip { display:inline-flex; align-items:center; gap:.35rem; border:1.5px solid var(--rand-stark); background:#fff; border-radius:999px; padding:.4rem .85rem; font-size:.9rem; font-weight:600; color:var(--tinte); cursor:pointer; }
.chip:hover { border-color:var(--akzent); text-decoration:none; }
.chip.aktiv { background:var(--akzent); border-color:var(--akzent); color:#fff; }
.chip .x { color:var(--grau); font-weight:400; }

/* Positionen (Wareneingang / Warenausgang) */
.positionen .eintrag .typ { width:44px; height:44px; border-radius:var(--radius-klein); background:var(--akzent-hell); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex:0 0 auto; }
.positionen .eintrag input { padding:.45rem .6rem; font-size:.95rem; }
.positionen .eintrag .felder { display:flex; gap:.5rem; flex-wrap:wrap; flex:1; }
.positionen .eintrag .felder > * { flex:1 1 140px; }
.leer-hinweis { text-align:center; color:var(--grau); padding:1.4rem 1rem; }

/* Warenausgang: „Auf diesem Lieferschein“ + „Bereit für den Warenausgang“ (antippen = übernehmen) */
.wa-unterkopf { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:1rem 0 .45rem; }
.wa-unterkopf h3, h3.wa-unterkopf { margin:0; display:flex; align-items:center; gap:.45rem; }
.bereit .eintrag { cursor:pointer; }
.bereit .eintrag:hover { background:#f7faf8; }
.bereit .eintrag:focus-visible { outline:3px solid var(--akzent-mittel); outline-offset:-3px; }
.bereit .eintrag[hidden], .wa-unterkopf [hidden] { display:none; }
.wa-unterkopf .btn, .wa-unterkopf button { white-space:nowrap; }
.wa-auswahl .eintrag .haupt .sub { display:block; }
.bereit .eintrag .haupt .sub { display:block; }
@media (max-width:600px) {
  .bereit .eintrag { flex-wrap:nowrap; }
  .bereit .eintrag .btn .wort { display:none; }
  .bereit .eintrag .btn { min-width:48px; font-size:1.2rem; }
  .bereit .eintrag .haupt .sub { white-space:normal; }
  .wa-unterkopf .wort { display:none; }
}

/* KPIs */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; margin-bottom:1rem; }
.kpi { background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius); padding:.8rem 1rem; box-shadow:var(--schatten); color:var(--tinte); }
.kpi .wert { font-size:1.6rem; font-weight:800; letter-spacing:-.5px; line-height:1.1; }
.kpi .titel { font-size:.74rem; color:var(--grau); text-transform:uppercase; letter-spacing:.5px; margin-top:.2rem; }
a.kpi:hover { border-color:var(--akzent); text-decoration:none; }

/* Autovervollständigung */
.artikel-suche { position:relative; }
.as-ergebnisse { position:absolute; z-index:30; left:0; right:0; background:#fff; border:1px solid var(--rand-stark); border-radius:var(--radius-klein); box-shadow:var(--schatten-hoch); max-height:260px; overflow:auto; margin-top:3px; }
.as-treffer { padding:.6rem .8rem; cursor:pointer; font-size:.9rem; border-bottom:1px solid var(--rand); display:flex; gap:.5rem; align-items:baseline; }
.as-treffer:last-child { border-bottom:0; }
.as-treffer:hover, .as-treffer.aktiv { background:var(--akzent-hell); }
.as-treffer .as-nr { font-weight:700; color:var(--akzent-dunkel); white-space:nowrap; }
.as-treffer .as-quelle { margin-left:auto; font-size:.72rem; color:var(--grau); white-space:nowrap; }

/* Chat */
.chat .nachricht { max-width:760px; margin-bottom:.7rem; padding:.8rem 1rem; border-radius:var(--radius); background:#fff; border:1px solid var(--rand); box-shadow:var(--schatten); }
.chat .nachricht.claude { background:var(--akzent-hell); border-color:var(--akzent-mittel); margin-left:2rem; }
.chat .kopfzeile { display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; color:var(--grau); }
.chat .kopfzeile strong { color:var(--tinte); }
.chat .text { white-space:pre-line; margin:.35rem 0 0; }

/* Tabs */
.tabsleiste { display:flex; gap:.25rem; border-bottom:1px solid var(--rand); margin-bottom:1rem; overflow-x:auto; }
.tabsleiste a { padding:.6rem .9rem; color:var(--grau); font-weight:600; border-bottom:3px solid transparent; white-space:nowrap; }
.tabsleiste a.aktiv { color:var(--akzent-dunkel); border-bottom-color:var(--akzent); }
.tabsleiste a:hover { text-decoration:none; color:var(--tinte); }

/* Dialog */
dialog { border:0; border-radius:var(--radius); padding:1.4rem 1.5rem; box-shadow:var(--schatten-hoch); max-width:420px; width:92vw; }
dialog::backdrop { background:rgba(27,36,32,.45); }
dialog h2 { margin-top:0; color:var(--tinte); }

/* Anzahl-Kreis */
.kreis { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; border-radius:999px; background:var(--akzent); color:#fff; font-weight:800; font-size:.8rem; padding:0 .5rem; }

/* ---------- Responsiv ---------- */
@media (max-width:820px) {
  nav.haupt { display:none; }
  nav.tabs { display:flex; }
  main { margin-top:.9rem; padding-bottom:calc(var(--tab-h) + 1.5rem); }
  body { font-size:15.5px; }
  h1 { font-size:1.35rem; }
  .karte { padding:.95rem 1rem; }
  .zeile { grid-template-columns:1fr; }
  input,select,textarea { max-width:none; }
  th,td { padding:.6rem .6rem; }
  .geraet-kopf .sn { font-size:1.35rem; }
}
@media (pointer:coarse) {
  button,.btn { min-height:48px; }
  input,select,textarea { min-height:48px; }
}
@media print {
  header.kopf, nav.tabs, .flash, .kein-druck { display:none !important; }
  main { margin:0; max-width:none; }
  .karte, .liste, .tabelle { box-shadow:none; }
}

.wer-fest { display:inline-flex; align-items:center; gap:.4rem; min-height:46px; padding:0 .9rem; border-radius:var(--radius-klein); background:var(--bg); border:1.5px solid var(--rand); font-weight:600; color:var(--tinte); }

/* ---------- Wareneingang abarbeiten (MDE/Handy) ---------- */
.we-kopf { display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:flex-start; margin-bottom:.5rem; }
.we-kopf-titel { flex:1 1 260px; min-width:0; }
.we-kopf-knoepfe { display:flex; flex-wrap:wrap; gap:.4rem; flex:0 1 auto; }
.we-kopf-knoepfe .btn, .we-kopf-knoepfe button { margin:0; }
@media (max-width:600px) { .we-kopf-knoepfe { flex:1 1 100%; } .we-kopf-knoepfe > * { flex:1 1 0; justify-content:center; white-space:nowrap; } }
.we-kopf h1 { overflow-wrap:anywhere; }
.we-fortschritt { height:12px; border-radius:999px; background:#e0e6e2; overflow:hidden; }
.we-fortschritt > div { height:100%; width:0; background:linear-gradient(90deg,var(--akzent-mittel),var(--akzent)); transition:width .3s; }
.we-zahlen { display:flex; gap:.5rem; align-items:baseline; margin:.35rem 0 .7rem; font-size:.95rem; flex-wrap:wrap; }
.we-scan { position:sticky; top:calc(var(--kopf-h) + 6px); z-index:20; background:var(--bg); padding:.3rem 0 .2rem; }
.we-scan .scanfeld .btn { padding:0 .9rem; }
.we-scan .btn.aktiv-knopf { background:var(--akzent); color:#fff; border-color:var(--akzent); }
#kamera-box { margin-top:.5rem; text-align:center; }
#kamera-box video { width:100%; max-height:38vh; border-radius:var(--radius); background:#000; object-fit:cover; }
.we-ergebnis { margin-top:.5rem; border-radius:var(--radius); padding:.85rem 1rem; border:2px solid; box-shadow:var(--schatten-hoch); }
.we-ergebnis .gross { font-size:1.2rem; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.we-ergebnis .sub { font-size:.92rem; margin-top:.2rem; }
.we-ergebnis.ok { background:#dff3e6; border-color:var(--akzent); color:var(--akzent-dunkel); }
.we-ergebnis.schon, .we-ergebnis.hinweis { background:var(--blau-hell); border-color:#a9c3e6; color:var(--blau); }
.we-ergebnis.fehler { background:var(--rot-hell); border-color:var(--rot); color:var(--rot); }
.we-ergebnis.frage { background:var(--gelb-hell); border-color:#dfc879; color:#5e4b00; }
.we-ergebnis button { margin:.5rem .4rem 0 0; }
.we-ergebnis .voll-breit { width:100%; justify-content:flex-start; text-align:left; }
.we-info { font-size:.85rem; color:var(--grau); margin-top:.15rem; overflow-wrap:anywhere; }
.we-zustand { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.5rem 0 0; font-size:.9rem; color:var(--grau); }
.we-zustand .chip, .we-zustand-wahl .chip { margin:0; }
.we-zustand-wahl { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.4rem 0; }
.we-zustand-wahl .chip { text-align:left; }
.we-zustand-wahl .chip .bez { font-weight:400; }
.we-geraet-extras { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.4rem; }
.we-geraet-extras .we-zustand-wahl { flex:1 1 100%; margin:0; }
.foto-kachel { position:relative; display:inline-flex; flex-direction:column; gap:.2rem; }
.foto-kachel.schaden img { outline:3px solid var(--rot); outline-offset:-3px; }
.foto-marke { margin:0; padding:.15rem .4rem; min-height:0; font-size:.75rem; background:var(--karte); color:var(--grau); border:1px solid var(--rand); }
.foto-kachel.schaden .foto-marke { color:var(--rot); border-color:var(--rot); background:var(--rot-hell); }
.foto-btn.schaden { color:var(--rot); border-color:var(--rot); }
.foto-auswahl .foto-kachel span { font-size:.8rem; display:flex; align-items:center; gap:.25rem; }
.we-ergebnis.geraet { background:var(--karte); border-color:var(--akzent); color:var(--tinte); }
.we-ergebnis.antippbar .gross { cursor:pointer; }
.we-ergebnis.antippbar .gross::after { content:" ›"; color:var(--akzent); }
.we-geraet-panel { margin-top:.4rem; }
.we-geraet-panel .fotos { margin:.3rem 0 .6rem; }
.we-geraet-panel .foto-kachel { margin:0; padding:0; min-height:0; background:none; border:0; color:inherit; font:inherit; font-size:.75rem; align-items:center; }
.we-geraet-panel .foto-kachel img { height:88px; width:88px; }
.we-geraet-panel .foto-kachel .foto-marke { border:0; background:none; padding:0; }
.we-geraet-panel .foto-btn { height:88px; width:88px; margin:0; }
.we-geraet-panel textarea { width:100%; margin:.3rem 0; }
.we-bemerkungen { white-space:pre-line; font-size:.85rem; color:var(--grau); background:var(--bg); border-radius:var(--radius-klein); padding:.4rem .6rem; margin:.2rem 0; max-height:9rem; overflow:auto; }
.we-zustand-gross { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; flex:1 1 100%; margin:.2rem 0 .3rem; }
.we-zustand-gross .frage { flex:1 1 100%; font-weight:700; }
.we-zustand-gross .wahl { flex:1 1 40%; margin:0; min-height:52px; font-size:1.05rem; background:var(--karte); color:var(--akzent-dunkel); border:2px solid var(--akzent); }
.we-zustand-gross .wahl.aktiv { background:var(--akzent); color:#fff; }
.we-versand { margin:.6rem 0; border:1px solid var(--rand); border-radius:var(--radius-klein); padding:.4rem .6rem; background:var(--karte); }
.we-versand summary { cursor:pointer; font-weight:700; color:var(--akzent-dunkel); }
.we-versand input, .we-versand textarea { width:100%; max-width:none; }
.we-korrektur { margin:.4rem 0; }
.we-korrektur .reihe { display:flex; gap:.4rem; align-items:center; margin:.3rem 0; }
.we-korrektur input { flex:1 1 auto; min-width:0; max-width:none; font-size:1.05rem; }
.we-korrektur .reihe button { margin:0; }
.we-satz { margin-top:.5rem; }
.we-satz-meldung { font-weight:700; color:var(--akzent-dunkel); margin:.2rem 0 .4rem; }
.we-satz-teil { background:var(--karte); border:1px solid #e6d9a8; border-left:5px solid #d9c27a; border-radius:var(--radius-klein); padding:.55rem .7rem; margin-top:.5rem; color:var(--tinte); }
.we-satz-teil.da { border-left-color:var(--akzent); background:var(--akzent-hell); }
.we-satz-teil.fehlt { border-left-color:var(--rot); background:var(--rot-hell); }
.we-satz-teil.teil { border-left-color:#e0a800; }
.we-satz-teil.fokus { box-shadow:0 0 0 3px var(--akzent); }
.we-satz-teil .kopf { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .55rem; }
.we-satz-teil .zeichen { font-weight:800; width:1.2rem; text-align:center; }
.we-satz-teil .name { flex:1 1 150px; min-width:0; line-height:1.25; overflow-wrap:break-word; }
.we-satz-teil .zahl { font-weight:700; white-space:nowrap; font-size:.92rem; margin-left:auto; }
.we-satz-teil .reihe { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.45rem; }
.we-satz-teil .reihe button { margin:0; }
.we-satz-teil .stepper-num input { width:4.2rem; }
.we-menge { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.6rem; padding-top:.6rem; border-top:1px solid #e6d9a8; }
.we-menge .wer { flex:1 1 100%; font-size:.85rem; }
.we-menge button { margin:0; }
.we-gruppe { margin:1rem 0 .35rem; font-size:.85rem; color:var(--grau); font-weight:600; position:relative; }
.we-gruppe .mono { color:var(--tinte); font-weight:700; }
.we-karte { background:#fff; border:1.5px solid var(--rand); border-radius:var(--radius); margin-bottom:.45rem; box-shadow:var(--schatten); overflow:hidden; }
.we-karte .kopf { display:flex; gap:.8rem; align-items:center; padding:.75rem .9rem; cursor:pointer; }
.we-karte .typ { width:42px; height:42px; flex:0 0 auto; border-radius:12px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:800; }
.we-karte .mitte { flex:1; min-width:0; }
.we-karte .mitte strong { display:block; font-size:1.02rem; line-height:1.25; overflow-wrap:anywhere; }
.we-karte .sub { display:flex; gap:.8rem; flex-wrap:wrap; color:var(--grau); font-size:.86rem; margin-top:.15rem; }
.we-karte .sub .sn { color:var(--tinte); font-weight:700; }
.we-karte .badges { margin-top:.3rem; align-items:center; }
.we-karte .pfeil { color:var(--rand-stark); font-size:1.3rem; }
.we-karte .aktionen { padding:0 .9rem .8rem; margin:0; border-top:1px dashed var(--rand); padding-top:.6rem; }
.we-karte.erfasst { border-color:var(--akzent-mittel); background:#f4faf6; }
.we-karte.erfasst .typ { background:var(--akzent); color:#fff; }
.we-karte.fehlt { border-color:#e2a19d; background:#fdf5f4; }
.we-karte.fehlt .typ { background:var(--rot); color:#fff; }
.we-karte.fehlt .mitte strong { text-decoration:line-through; color:var(--grau); }
.we-karte.neu { animation:we-neu 1.6s ease-out; }
@keyframes we-neu { from { box-shadow:0 0 0 4px var(--akzent); } to { box-shadow:var(--schatten); } }
@media (max-width:820px) { .we-scan { top:calc(var(--kopf-h) + 2px); } .we-ergebnis .gross { font-size:1.1rem; } }
#ergebnis { max-height:58vh; overflow-y:auto; overscroll-behavior:contain; border-radius:var(--radius); }
@media (max-width:820px) { #filter #suche { flex:1 1 100%; order:9; } #ergebnis { max-height:52vh; } }

.we-karte.teil { border-color:#dfc879; background:#fffbee; }
.we-karte.teil .typ { background:var(--gelb-hell); color:var(--gelb); }

.we-zusatz label { color:#5e4b00; margin:.6rem 0 .2rem; }
.we-zusatz input { max-width:none; }
.we-zusatz .we-treffer button { margin:.3rem 0 0; font-weight:500; gap:.3rem; }
.we-zusatz .we-artikel { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; background:#fff; border-radius:var(--radius-klein); padding:.6rem .8rem; margin-top:.5rem; color:var(--tinte); }
.we-zusatz .we-artikel button { margin:0 0 0 auto; }
.we-zusatz .stepper-num button { margin:0; }

.we-ergebnis { position:relative; padding-right:3rem; }
.we-ergebnis .we-zu { position:absolute; top:.35rem; right:.35rem; margin:0; min-height:40px; width:40px; padding:0; border-radius:50%; background:rgba(255,255,255,.7); color:inherit; border:1.5px solid currentColor; font-size:1.05rem; opacity:.75; }
.we-ergebnis .we-zu:hover { background:#fff; opacity:1; }

/* ---------- Test-Notiz (nur Desktop) ---------- */
#notiz-knopf { position:fixed; right:18px; bottom:18px; z-index:45; margin:0; border-radius:999px; padding:.65rem 1.1rem; box-shadow:var(--schatten-hoch); background:#fff; color:var(--akzent-dunkel); border:1.5px solid var(--akzent); }
#notiz-knopf:hover { background:var(--akzent-hell); }
#notiz-zahl { background:var(--akzent); color:#fff; border-radius:999px; padding:0 .45rem; font-size:.8rem; margin-left:.2rem; }
#notiz-dialog { max-width:520px; }
#notiz-toast { position:fixed; right:18px; bottom:76px; z-index:46; background:var(--akzent-dunkel); color:#fff; padding:.7rem 1rem; border-radius:var(--radius-klein); box-shadow:var(--schatten-hoch); font-weight:600; }
/* nur auf Touch-Geräten ausblenden (stört beim Scannen) — ein schmales Desktop-Fenster behält den Knopf */
@media (pointer:coarse) and (max-width:820px) { #notiz-knopf, #notiz-toast { display:none !important; } }
@media (max-width:820px) { #notiz-knopf { bottom:calc(var(--tab-h) + 14px); } #notiz-toast { bottom:calc(var(--tab-h) + 72px); } }

.we-werkzeuge { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.35rem; }
.we-werkzeuge button { margin:0; }
@media (max-width:820px) { .we-werkzeuge .hinweis { display:none; } }

.we-zusatz label.inline { margin:.7rem 0 .2rem; color:var(--tinte); }

.we-karte .we-teile { font-size:.82rem; color:var(--akzent-dunkel); margin-top:.3rem; line-height:1.35; }

/* ---------- Kamera (Vollbild in der Seite) ---------- */
html.kamera-offen, html.kamera-offen body { overflow:hidden; }
.kamera-ov { position:fixed; inset:0; z-index:200; background:#000; color:#fff; }
.kamera-ov video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kamera-ov.blitz::after { content:""; position:absolute; inset:0; background:#fff; opacity:.6; }
.kamera-rahmen { position:absolute; left:8%; right:8%; top:30%; height:28%; border:3px solid rgba(255,255,255,.85); border-radius:14px; box-shadow:0 0 0 9999px rgba(0,0,0,.28); pointer-events:none; }
.kamera-ov.foto .kamera-rahmen { display:none; }
.kamera-oben { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:.8rem; padding:calc(env(safe-area-inset-top) + .8rem) 1rem .8rem; background:linear-gradient(rgba(0,0,0,.55), transparent); }
.kamera-titel { flex:1; font-weight:700; font-size:1.05rem; text-shadow:0 1px 3px #000; }
.kamera-rund { margin:0; width:52px; height:52px; min-height:52px; padding:0; border-radius:50%; background:rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.8); color:#fff; font-size:1.3rem; }
.kamera-rund:hover { background:rgba(0,0,0,.65); }
.kamera-rund.an { background:#ffd84d; color:#000; }
.kamera-unten { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; padding:1.2rem 1rem calc(env(safe-area-inset-bottom) + 1.6rem); background:linear-gradient(transparent, rgba(0,0,0,.65)); }
.kamera-status { text-align:center; font-size:1rem; line-height:1.35; text-shadow:0 1px 3px #000; max-width:520px; }
.kamera-ausloeser { margin:0; width:84px; height:84px; min-height:84px; border-radius:50%; background:#fff; border:6px solid rgba(255,255,255,.45); background-clip:padding-box; box-shadow:0 0 0 3px #fff; padding:0; }
.kamera-ausloeser:hover { background:#e7f2ec; }
.kamera-ausloeser:active { transform:scale(.94); }
.kamera-ausloeser:disabled { background:#9aa39e; box-shadow:0 0 0 3px #9aa39e; }
.kamera-ov [hidden] { display:none !important; }
.kamera-hilfe { text-align:center; max-width:520px; }
.kamera-hilfe p { margin:0 0 .8rem; color:#d9e2dd; font-size:.92rem; }
.kamera-knoepfe { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.kamera-knoepfe button { margin:0; background:rgba(255,255,255,.12); color:#fff; border:2px solid rgba(255,255,255,.8); }
.kamera-ov.fehler { background:#1d2622; }
.kamera-ov.fehler .kamera-rahmen { display:none; }
.kamera-ov.fehler .kamera-unten { top:0; justify-content:center; background:none; }