/* 1025DEX Community v0.31.35 · css/scan-lab.css · ausgelagert aus index.html */
/* ================= Scan Lab =================
   Eigene Klassen mit dem Vorsatz sl-, damit nichts aus den anderen
   Reitern versehentlich mitgezogen wird. */
.sl-box{background:var(--panel);border:3px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;margin:0 0 14px}
.sl-h{font-size:15px;font-weight:800;margin:0 0 6px}
.sl-hint{font-size:13px;color:var(--ink-soft);margin:6px 0;line-height:1.45}
.sl-canvas{display:block;width:100%;border-radius:12px;background:#000;touch-action:none;
  border:3px solid var(--line)}
.sl-num{font-family:'Archivo Black','Archivo',sans-serif;font-size:40px;line-height:1;
  font-variant-numeric:tabular-nums;text-align:center;margin:2px 0 0}
.sl-axis{text-align:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:800;margin:2px 0 12px}
.sl-grade{display:flex;align-items:center;gap:12px;border:3px solid var(--line);
  border-radius:12px;padding:10px 12px;margin-top:10px;background:var(--panel-2)}
.sl-grade b{font-family:'Archivo Black','Archivo',sans-serif;font-size:30px;line-height:1}
.sl-grade span{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.sl-kv{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;
  padding:7px 0;border-bottom:2px solid var(--line-soft)}
.sl-kv:last-child{border-bottom:none}
.sl-kv i{color:var(--ink-soft);font-style:normal}
.sl-kv b{font-variant-numeric:tabular-nums}
.sl-flag{font-size:13px;line-height:1.4;padding:9px 11px;border-radius:11px;margin-top:8px;
  border:3px solid var(--line)}
.sl-flag.ok{background:color-mix(in srgb, var(--owned) 16%, var(--panel));}
.sl-flag.warn{background:color-mix(in srgb, #e8a33d 20%, var(--panel));}
.sl-flag.bad{background:color-mix(in srgb, var(--red) 16%, var(--panel));}
.sl-row{display:flex;gap:8px}
.sl-row>*{flex:1}
.sl-in{width:100%;padding:10px;border:3px solid var(--line);border-radius:11px;
  background:var(--panel-2);color:var(--ink);font-size:15px;font-weight:700;text-align:center}
.sl-lab{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:800;color:var(--ink-soft);margin:10px 0 4px}
.sl-cands{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.sl-cand{border:3px solid var(--line);border-radius:12px;padding:5px;background:var(--panel-2)}
.sl-cand.on{border-color:var(--red)}
.sl-cand img{width:100%;border-radius:7px;display:block}
.sl-cand b{display:block;font-size:10.5px;line-height:1.25;margin-top:4px;text-align:center}
.sl-range{width:100%;margin:2px 0 4px}
.sl-snap{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--ink-soft);margin:2px 0 8px}
.sl-snap input{width:20px;height:20px}
/* Eigene Knopffarben: die Klassen .o und .t blendet der Gastmodus aus,
   das Scan Lab braucht aber auch ohne Anmeldung alle Knoepfe. */
.btn.sl-go{background:var(--owned);color:#fff}
.btn.sl-find{background:var(--lens);color:#fff}
.sl-live{position:relative;border:3px solid var(--line);border-radius:12px;overflow:hidden;
  background:#000;aspect-ratio:3/4}
.sl-live video{width:100%;height:100%;object-fit:cover;display:block}
.sl-live canvas{position:absolute;inset:0;width:100%;height:100%}
.sl-status{position:absolute;left:10px;bottom:10px;right:10px;background:rgba(0,0,0,.62);color:#fff;
  font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:9px}
.sl-fort{position:absolute;left:0;right:0;top:0;height:5px;background:rgba(0,0,0,.35)}
.sl-fort i{display:block;height:100%;width:0;background:var(--owned);transition:width .12s linear}
.sl-tools{display:flex;gap:8px;margin-top:8px}
.sl-tools .btn{margin-top:0}
.sl-tools .btn.an{background:#f2c94c;color:#1a1a1a;border-color:#f2c94c}
.sl-dia{margin-top:8px;padding:9px 11px;border:3px solid var(--line);border-radius:11px;
  background:var(--panel-2);font-size:11.5px;line-height:1.5;white-space:pre-wrap;
  font-family:ui-monospace,Menlo,monospace;user-select:text}
.sl-top{display:flex;align-items:center;gap:10px;background:var(--panel);border:3px solid var(--line);
  border-radius:12px;padding:8px 8px 8px 12px;margin:0 0 12px}
.sl-top span{flex:1;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.sl-top button{border:3px solid var(--red);background:var(--red);color:#fff;font-weight:800;
  border-radius:10px;padding:7px 16px;font-size:13px}
.sl-werte{display:flex;gap:8px;margin:2px 0 10px}
.sl-werte div{flex:1;border:3px solid var(--line);border-radius:12px;background:var(--panel-2);
  padding:8px 6px;text-align:center}
.sl-werte i{display:block;font-style:normal;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:800}
.sl-werte b{font-family:'Archivo Black','Archivo',sans-serif;font-size:22px;
  font-variant-numeric:tabular-nums}
.sl-zoombox{position:relative;margin-top:8px;border:3px solid var(--line);border-radius:12px;
  overflow:hidden;background:#000}
.sl-zoombox canvas{display:block;width:100%;height:150px}
.sl-zoomlab{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;
  font-size:11px;font-weight:800;padding:3px 8px;border-radius:8px}
.sl-chips{display:flex;gap:6px;margin-top:8px}
.sl-chips button{flex:1;border:3px solid var(--line);border-radius:11px;background:var(--panel-2);
  color:var(--ink);font-weight:800;font-size:13px;padding:9px 4px}
.sl-chips button.on{background:var(--lens);color:#fff;border-color:var(--lens)}
.sl-nudge button{font-size:15px}
/* ---- Wegweiser: vier Schritte ---- */
.sl-weg{display:flex;gap:6px;list-style:none;margin:0 0 12px;padding:0}
.sl-weg li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--ink-soft);
  text-transform:uppercase;line-height:1}
.sl-weg i{width:26px;height:26px;border-radius:50%;border:3px solid var(--line-soft);
  display:grid;place-items:center;font-style:normal;font-size:12px;
  background:var(--panel);color:var(--ink-soft)}
.sl-weg li.fertig i{background:var(--owned);border-color:var(--line);color:#fff}
.sl-weg li.on{color:var(--ink)}
.sl-weg li.on i{background:var(--red);border-color:var(--line);color:#fff}

/* ---- Aufklappbares: lange Erklaerungen und Feinwerkzeug ---- */
.sl-auf{display:flex;align-items:center;justify-content:space-between;width:100%;
  margin-top:10px;padding:9px 11px;border:2px solid var(--line-soft);border-radius:11px;
  background:transparent;color:var(--ink-soft);font-size:12px;font-weight:800;cursor:pointer}
.sl-auf span{font-size:11px;transition:transform var(--motion-fast) var(--ease-fluid)}
.sl-auf.offen{color:var(--ink)}
.sl-auf.offen span{transform:rotate(90deg)}
.sl-aufbox{margin-top:8px}

/* ---- Nebenknoepfe: klein, in einer Reihe, damit der Hauptknopf allein steht ---- */
.sl-neben{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.sl-neben button{flex:1 1 auto;border:2px solid var(--line-soft);border-radius:999px;
  background:transparent;color:var(--ink-soft);font-size:11.5px;font-weight:800;
  padding:7px 12px;cursor:pointer;white-space:nowrap}
.sl-neben button:active{transform:translateY(1px)}

.sl-notenkopf{font-size:15px;font-weight:800;margin:16px 0 0;
  padding-top:13px;border-top:2px solid var(--line-soft)}
.sl-erg{display:block;margin-top:10px}
/* Der Kuerzelkreis war nur innerhalb einer Team-Zeile bemasst - im
   Personenfenster wurde er dadurch zusammengequetscht. */
.pav{width:46px;height:46px;border-radius:50%;border:3px solid var(--line);display:grid;
  place-items:center;font-weight:800;font-size:15px;color:#fff;flex:0 0 46px}
.pkliste{margin-top:12px;max-height:60vh;overflow:auto;-webkit-overflow-scrolling:touch}
.pkarte{display:flex;gap:10px;align-items:center;padding:8px 4px;border-bottom:2px solid var(--line-soft)}
.pkarte:last-child{border-bottom:none}
.pkarte img{width:44px;border-radius:5px;flex:0 0 44px;background:var(--panel-2)}
.pkph{width:44px;height:61px;border-radius:5px;flex:0 0 44px;background:var(--panel-2);
  display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--ink-soft);text-align:center}
.pkname{font-weight:800;font-size:14.5px;line-height:1.2}
.pkpreis{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.person[data-person]{cursor:pointer}
.person[data-person]:active{transform:translateY(1px)}
.sl-zeilen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sl-zeilen img{height:34px;border:2px solid var(--line);border-radius:6px;background:#fff}
.sl-was{flex:1.2;align-self:center;text-align:center;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.hide{display:none !important}