/* BsMind Lagerwelt (Sektion auf /bsmind). Szene: js/bs-lagerwelt.js */
.lw { --lw-navy:#0b1c3d; --lw-blue:#1f6feb; --lw-ink:#0f1b2d; --lw-ink2:#3b4658; --lw-ink3:#5d6678; --lw-line:#e3e6eb;
  --lw-ok:#067647; --lw-okbg:#ecf8f1; --lw-warn:#a15c07; --lw-warnbg:#fdf6e7; }
.lw-app { margin-top:40px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); color:var(--lw-ink); text-align:left; }
.lw-bar { display:flex; align-items:center; gap:16px; height:52px; padding:0 18px; border-bottom:1px solid var(--lw-line); font-size:13px; }
.lw-logo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--lw-navy); }
.lw-logo i { width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,#3b74ea,#0b1c3d); }
.lw-search { flex:1; max-width:340px; height:32px; border:1px solid var(--lw-line); border-radius:8px; display:flex; align-items:center; padding:0 12px; color:#6a7385; background:#fafbfc; }
.lw-site { display:flex; align-items:center; gap:8px; margin-left:auto; font-weight:600; }
.lw-site b { background:#eef4fe; color:var(--lw-blue); border-radius:4px; padding:2px 6px; font-size:11px; }
.lw-site em { font-style:normal; font-weight:400; color:var(--lw-ink3); }
.lw-demo { font-size:12px; color:var(--lw-ink3); border:1px solid var(--lw-line); border-radius:99px; padding:3px 10px; white-space:nowrap; }

.lw-stage { position:relative; background:#eef2f8; aspect-ratio:1180/700; overflow:hidden; }
.lw-world { position:absolute; left:0; top:0; width:100%; aspect-ratio:1180/700; transform-origin:0 0; transition:transform .9s cubic-bezier(.22,.8,.24,1); --k:1; }
.lw-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.lw-pins { position:absolute; inset:0; pointer-events:none; }
.lw-pin { pointer-events:auto; position:absolute; transform:translate(-50%,-100%) scale(calc(1 / var(--k))); transform-origin:50% 100%; border:0; background:none; padding:0; cursor:pointer; display:flex; align-items:flex-end; justify-content:center; width:44px; height:48px; font:inherit; }
.lw-pin span { width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#fff; color:var(--lw-blue); border:2px solid var(--lw-blue); display:grid; place-items:center; box-shadow:0 4px 10px rgba(15,40,90,.25); transition:background .2s, color .2s; }
.lw-pin span i { transform:rotate(45deg); font-style:normal; font-weight:700; font-size:13px; }
.lw-pin em { position:absolute; bottom:100%; margin-bottom:2px; white-space:nowrap; font-style:normal; font-size:12px; font-weight:600; background:#fff; color:var(--lw-ink); padding:3px 8px; border-radius:6px; box-shadow:0 2px 8px rgba(15,40,90,.15); opacity:0; transition:opacity .2s; pointer-events:none; }
.lw-pin.is-on span { background:var(--lw-blue); color:#fff; }
.lw-pin.is-on { z-index:3; }
.lw-pin.is-on em { opacity:1; }
.lw-pin:focus-visible { outline:3px solid var(--lw-blue); outline-offset:2px; border-radius:8px; }
@media (hover:hover) { .lw-pin:hover em { opacity:1; } .lw-pin:hover span { background:#eef4fe; } .lw-pin.is-on:hover span { background:var(--lw-blue); } }
.lw-label { position:absolute; transform:translate(-50%,-100%) scale(calc(1 / var(--k))); transform-origin:50% 100%; background:var(--lw-navy); color:#fff; font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; white-space:nowrap; }

.lw-kpis { position:absolute; top:16px; left:16px; display:flex; gap:10px; z-index:2; }
.lw-kpi { background:#fff; border:1px solid var(--lw-line); border-radius:10px; padding:10px 14px; min-width:150px; box-shadow:0 4px 14px rgba(15,40,90,.06); }
.lw-kpi span { display:block; font-size:12px; color:var(--lw-ink3); }
.lw-kpi b { display:block; font-size:24px; letter-spacing:-.01em; margin-top:2px; font-variant-numeric:tabular-nums; }
.lw-kpi--warn b { color:var(--lw-warn); }

.lw-card { position:absolute; top:16px; right:16px; width:310px; background:#fff; border:1px solid var(--lw-line); border-radius:12px; padding:16px; box-shadow:0 10px 30px rgba(15,40,90,.12); z-index:2; }
.lw-card-kicker { margin:0; font-size:12px; font-weight:600; color:var(--lw-blue); }
.lw-card h3 { margin:4px 0 2px; font-size:20px; color:var(--lw-ink); }
.lw-card-sub { margin:0 0 12px; font-size:13px; color:var(--lw-ink3); }
.lw-progress { height:6px; border-radius:9px; background:#edf0f4; overflow:hidden; margin-bottom:6px; }
.lw-progress i { display:block; height:100%; background:var(--lw-blue); }
.lw-rows { margin:0; font-size:13px; }
.lw-rows div { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #eef0f3; }
.lw-rows dt { color:var(--lw-ink3); } .lw-rows dd { margin:0; font-weight:600; text-align:right; }
.lw-badge { font-size:12px; font-weight:600; border-radius:4px; padding:2px 7px; white-space:nowrap; }
.lw-badge.ok { background:var(--lw-okbg); color:var(--lw-ok); }
.lw-badge.warn { background:var(--lw-warnbg); color:var(--lw-warn); }
.lw-badge.info { background:#eef4fe; color:#1a5fd0; }
.lw-note { font-size:13px; line-height:1.5; color:var(--lw-ink2); background:#f5f7fa; border-radius:8px; padding:10px; margin:12px 0; }
.lw-actions { display:flex; gap:8px; }
.lw-btn { display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; flex:1; min-height:44px; border-radius:8px; border:0; background:var(--lw-blue); color:#fff; font:600 13px/1.2 inherit; padding:6px 10px; cursor:pointer; }
.lw-btn--ghost { flex:0 0 auto; background:#fff; color:var(--lw-ink); border:1px solid var(--lw-line); }
@media (hover:hover) { .lw-btn:hover { background:#1a5fd0; } .lw-btn--ghost:hover { background:#f5f7fa; } }

.lw-chain { position:absolute; left:16px; right:342px; bottom:16px; margin:0; padding:10px 12px; list-style:none; display:flex; background:#fff; border:1px solid var(--lw-line); border-radius:12px; box-shadow:0 4px 14px rgba(15,40,90,.06); z-index:2; }
.lw-chain li { flex:1; position:relative; min-width:0; }
.lw-chain li::after { content:""; position:absolute; top:13px; left:22px; right:2px; height:2px; background:#e3e6eb; }
.lw-chain li:last-child::after { display:none; }
.lw-chain li.done::after { background:var(--lw-blue); }
.lw-chain button { position:relative; display:block; width:100%; min-height:44px; text-align:left; background:none; border:0; padding:22px 4px 0; font:inherit; cursor:pointer; border-radius:6px; }
.lw-chain button::before { content:""; position:absolute; top:8px; left:4px; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid #c5ccd8; z-index:1; }
.lw-chain .done button::before { background:var(--lw-blue); border-color:var(--lw-blue); }
.lw-chain .now button::before { border-color:var(--lw-blue); box-shadow:0 0 0 4px rgba(31,111,235,.18); }
.lw-chain b { display:block; font-size:12px; font-weight:600; color:var(--lw-ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lw-chain .done b, .lw-chain .now b { color:var(--lw-ink); }
.lw-chain span { display:block; font-size:11px; color:var(--lw-ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lw-chain button:focus-visible { outline:3px solid var(--lw-blue); outline-offset:-2px; }
.lw-foot { margin:14px 0 0; font-size:13px; color:#a9bcd8; }

/* Bewegung: Stapler pendelt, Lkw fährt nach Hanau */
@media (prefers-reduced-motion:no-preference) {
  .lw-anim-lift { animation:lwLift 7s ease-in-out infinite; }
  .lw-anim-truck { animation:lwTruck 12s linear infinite; }
}
@keyframes lwLift { 0%,15% { transform:translate(0,0); } 45%,60% { transform:translate(15px,8.5px); } 90%,100% { transform:translate(0,0); } }
@keyframes lwTruck { 0% { transform:translate(-50px,-29px); opacity:0; } 8% { opacity:1; } 88% { opacity:1; } 100% { transform:translate(50px,29px); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .lw-world, .lw-pin span, .lw-pin em { transition:none; } }

/* Tablet: Karte schmaler */
@media (max-width:1100px) and (min-width:761px) {
  .lw-card { width:270px; padding:14px; }
  .lw-chain { right:298px; }
  .lw-kpi { min-width:0; padding:8px 12px; } .lw-kpi b { font-size:20px; }
  .lw-chain span { display:none; }
}
/* Handy: Szene als Bühne, Kennzahlen, Kette und Karte darunter */
@media (max-width:760px) {
  .lw-app { margin-top:28px; border-radius:12px; }
  .lw-search, .lw-site { display:none; }
  .lw-demo { margin-left:auto; }
  .lw-stage { aspect-ratio:auto; overflow:visible; display:flex; flex-direction:column; background:#fff; }
  .lw-view { position:relative; aspect-ratio:1/0.85; overflow:hidden; background:#eef2f8; order:2; }
  .lw-kpis { position:static; order:1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:10px; }
  .lw-kpi { min-width:0; padding:8px; box-shadow:none; }
  .lw-kpi span { font-size:11px; line-height:1.25; min-height:2.5em; } .lw-kpi b { font-size:20px; }
  .lw-chain { position:static; order:3; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:0; border-width:1px 0; box-shadow:none; padding:8px 10px; -webkit-overflow-scrolling:touch; }
  .lw-chain li { flex:0 0 112px; scroll-snap-align:center; }
  .lw-card { position:static; order:4; width:auto; border:0; border-radius:0; box-shadow:none; }
}
@media (min-width:761px) { .lw-view { position:absolute; inset:0; } }