/* ============================================================
   Garbit SHIP - Scanner · seitenspezifische Komponenten
   Schwerpunkt: Packtisch-Terminal, Scan→Waage→Druck-Sequenz,
   Feedback (Ton/Licht), Pick-Ansicht. Theme-aware.
   ============================================================ */

:root {
  --c-3: oklch(0.66 0.14 255);
  --c-5: oklch(0.78 0.15 85);
  --c-6: oklch(0.68 0.16 35);
  --term-bg: #0c1410;
  --term-line: rgba(51,204,63,0.18);
  --term-green: #4ee65a;
  --term-dim: rgba(120,200,130,0.5);
}

/* ===========================================================
   FENSTER (Hero & flach)
   =========================================================== */
.win { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.win--hero { box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); }
.win--flat { box-shadow: var(--card-shadow); }
.win__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.win__dot { width: 11px; height: 11px; border-radius: 50%; }
.win__dot.r { background: #ff5f57; } .win__dot.y { background: #febc2e; } .win__dot.g { background: #28c840; }
.win__title { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.win__title b { color: var(--text-head); font-weight: 700; }
.win__static { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* ===========================================================
   PACKTISCH-TERMINAL
   =========================================================== */
.term { background: var(--term-bg); padding: 22px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background-image: linear-gradient(var(--term-line) 1px, transparent 1px); background-size: 100% 28px; }
.term__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--term-line); }
.term__id { font-size: 12px; font-weight: 700; color: var(--term-dim); letter-spacing: 0.05em; }
.term__status { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--term-green); display: inline-flex; align-items: center; gap: 7px; }
.term__status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--term-green); box-shadow: 0 0 8px var(--term-green); }
.term__line { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; line-height: 1.9; color: #cfeed4; }
.term__line .k { color: var(--term-dim); min-width: 92px; }
.term__line .v { color: #fff; font-weight: 700; }
.term__line .ok { color: var(--term-green); margin-left: auto; font-weight: 700; }
.term__big { font-size: 26px; font-weight: 800; color: var(--term-green); letter-spacing: 0.02em; }
.term__cursor { display: inline-block; width: 9px; height: 17px; background: var(--term-green); margin-left: 2px; animation: blink 1s steps(2) infinite; vertical-align: middle; }
@keyframes blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .term__cursor { animation: none; } }

/* ===========================================================
   01 · SCAN-STATION (interaktiv)
   =========================================================== */
.scan { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px){ .scan { grid-template-columns: 1fr; gap: 24px; } }

.scan-input { display: flex; gap: 10px; margin-bottom: 16px; }
.scan-input__field { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 11px; padding: 0 14px; height: 52px; }
.scan-input__field svg { width: 19px; height: 19px; color: var(--text-faint); flex-shrink: 0; }
.scan-input__field input { flex: 1; border: none; background: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; font-weight: 700; color: var(--text-head); outline: none; letter-spacing: 0.03em; }
.scan-btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px; background: var(--green); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; border: none; border-radius: 11px; cursor: pointer; transition: background var(--dur-base), transform var(--dur-fast); white-space: nowrap; }
.scan-btn:hover { background: var(--green-dark); transform: translateY(-1px); }
.scan-btn:active { transform: translateY(0); }
.scan-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.scan-preset { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); }
.scan-preset:hover { border-color: var(--green); color: var(--green-dark); }
[data-theme="dark"] .scan-preset:hover { color: var(--green); }

/* Sequenz Scan → Waage → Druck */
.seq { display: flex; flex-direction: column; gap: 0; }
.seq-step { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; border: 1px solid transparent; transition: background var(--dur-base), border-color var(--dur-base); }
.seq-step.is-active { background: var(--card-bg); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); box-shadow: var(--card-shadow); }
.seq-step__dot { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-faint); transition: all var(--dur-base); }
.seq-step.is-active .seq-step__dot { background: var(--green); border-color: var(--green); color: #fff; }
.seq-step.is-done .seq-step__dot { background: var(--green-tint); border-color: transparent; color: var(--green-dark); }
[data-theme="dark"] .seq-step.is-done .seq-step__dot { background: rgba(51,204,63,0.14); color: var(--green); }
.seq-step__dot svg { width: 20px; height: 20px; }
.seq-step__name { font-size: 1rem; font-weight: 800; color: var(--text-head); }
.seq-step__val { font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.seq-step__val b { color: var(--green-dark); font-weight: 700; }
[data-theme="dark"] .seq-step__val b { color: var(--green); }
.seq-conn { width: 2px; height: 14px; background: var(--border); margin-left: 37px; transition: background var(--dur-base); }
.seq-conn.is-filled { background: var(--green); }

/* ===========================================================
   02 · AKTIONEN
   =========================================================== */
.act-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 760px){ .act-grid { grid-template-columns: 1fr; } }
.act-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px; box-shadow: var(--card-shadow); transition: box-shadow var(--dur-base), transform var(--dur-base); }
.act-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-3px); }
.act-card__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--green-tint); color: var(--green-dark); display: grid; place-items: center; margin-bottom: 16px; }
[data-theme="dark"] .act-card__icon { background: rgba(51,204,63,0.13); color: var(--green); }
.act-card__title { font-size: 1rem; font-weight: 800; color: var(--text-head); margin-bottom: 8px; }
.act-card__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.act-card__codes { display: flex; flex-wrap: wrap; gap: 6px; }
.act-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; color: var(--text); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; }
.act-code b { color: var(--green-dark); } [data-theme="dark"] .act-code b { color: var(--green); }

/* ===========================================================
   03 · FEEDBACK (interaktiv)
   =========================================================== */
.fb { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 760px){ .fb { grid-template-columns: 1fr; } }
.fb-stage { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--card-shadow); padding: 36px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.fb-lamp { width: 120px; height: 120px; border-radius: 50%; background: var(--bg-alt); border: 2px solid var(--border); display: grid; place-items: center; color: var(--text-faint); transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); }
.fb-lamp svg { width: 52px; height: 52px; }
.fb-lamp.ok { background: color-mix(in srgb, var(--green) 16%, var(--card-bg)); border-color: var(--green); color: var(--green-dark); box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 12%, transparent), 0 0 40px color-mix(in srgb, var(--green) 35%, transparent); }
[data-theme="dark"] .fb-lamp.ok { color: var(--green); }
.fb-lamp.err { background: color-mix(in srgb, var(--c-6) 16%, var(--card-bg)); border-color: var(--c-6); color: var(--c-6); box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-6) 12%, transparent), 0 0 40px color-mix(in srgb, var(--c-6) 35%, transparent); }
.fb-lamp.is-pulse { animation: lampPulse 0.4s var(--ease-out); }
@keyframes lampPulse { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce){ .fb-lamp.is-pulse { animation: none; } }
.fb-readout { font-size: 14px; font-weight: 700; color: var(--text-head); text-align: center; min-height: 1.4em; }
.fb-readout span { color: var(--text-muted); font-weight: 600; }
.fb-buttons { display: flex; gap: 12px; }
.fb-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 10px; cursor: pointer; border: 1px solid; transition: transform var(--dur-fast), background var(--dur-fast); }
.fb-btn:active { transform: scale(0.97); }
.fb-btn--ok { background: var(--green); border-color: var(--green); color: #fff; }
.fb-btn--ok:hover { background: var(--green-dark); }
.fb-btn--err { background: transparent; border-color: var(--c-6); color: var(--c-6); }
.fb-btn--err:hover { background: color-mix(in srgb, var(--c-6) 10%, transparent); }
.fb-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.fb-list li { display: flex; gap: 14px; align-items: flex-start; }
.fb-list__ico { width: 42px; height: 42px; border-radius: 11px; background: var(--green-tint); color: var(--green-dark); display: grid; place-items: center; flex-shrink: 0; }
[data-theme="dark"] .fb-list__ico { background: rgba(51,204,63,0.13); color: var(--green); }
.fb-list__title { font-size: 0.98rem; font-weight: 800; color: var(--text-head); margin-bottom: 3px; }
.fb-list__desc { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; }

/* ===========================================================
   04 · PICK-ANSICHT (interaktiv)
   =========================================================== */
.pick { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--card-shadow); overflow: hidden; }
.pick__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pick__title { font-size: 14px; font-weight: 800; color: var(--text-head); }
.pick__sub { font-size: 12px; color: var(--text-muted); }
.pick__progress { display: flex; align-items: center; gap: 12px; }
.pick__bar { width: 120px; height: 8px; border-radius: 99px; background: var(--bg-alt); border: 1px solid var(--border); overflow: hidden; }
.pick__fill { height: 100%; background: var(--green); width: 0; border-radius: 99px; transition: width var(--dur-slow) var(--ease-out); }
.pick__pct { font-size: 13px; font-weight: 800; color: var(--text-head); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.pick__list { list-style: none; }
.pick-item { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--border); transition: background var(--dur-fast); }
.pick-item:last-child { border-bottom: none; }
.pick-item.is-next { background: color-mix(in srgb, var(--green) 6%, transparent); }
.pick-item.is-picked { opacity: 0.5; }
.pick-item__box { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--border); flex-shrink: 0; display: grid; place-items: center; color: #fff; transition: background var(--dur-fast), border-color var(--dur-fast); }
.pick-item.is-picked .pick-item__box { background: var(--green); border-color: var(--green); }
.pick-item__box svg { width: 15px; height: 15px; opacity: 0; }
.pick-item.is-picked .pick-item__box svg { opacity: 1; }
.pick-item__bin { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; flex-shrink: 0; }
.pick-item__name { font-size: 13.5px; font-weight: 700; color: var(--text-head); }
.pick-item__meta { font-size: 11px; color: var(--text-faint); }
.pick-item__qty { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--text-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick-item__scan { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; color: var(--green-dark); background: var(--green-tint); border: none; border-radius: 7px; padding: 7px 12px; cursor: pointer; transition: background var(--dur-fast); white-space: nowrap; }
[data-theme="dark"] .pick-item__scan { color: var(--green); background: rgba(51,204,63,0.14); }
.pick-item__scan:hover { background: var(--green); color: #fff; }
.pick-item.is-picked .pick-item__scan { visibility: hidden; }
.pick__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: var(--bg-alt); border-top: 1px solid var(--border); flex-wrap: wrap; }
.pick__done-msg { font-size: 13px; font-weight: 700; color: var(--green-dark); display: none; align-items: center; gap: 8px; }
[data-theme="dark"] .pick__done-msg { color: var(--green); }
.pick__done-msg.is-shown { display: inline-flex; }
.pick__reset { font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); }
.pick__reset:hover { border-color: var(--text-muted); color: var(--text-head); }
@media (max-width: 560px){ .pick-item__bin { display: none; } }

/* ===========================================================
   Hinweis + FAQ + Heads (geteilt)
   =========================================================== */
.mock-note { margin-top: 12px; font-size: 11px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; justify-content: center; }
.mock-note svg { width: 12px; height: 12px; flex-shrink: 0; }
[data-theme="dark"] .faq-q:hover { color: var(--green); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 16px; }
[data-theme="dark"] .eyebrow { color: var(--green); }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--green); border-radius: 1px; }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-lead { margin-left: auto; margin-right: auto; }