/* ============================================================
   ATELVA BATCH CONTROL – Oberfläche
   Reines Design (keine Funktionalität): Inter-Schrift, feine
   Linien, weiche Radien, ruhige Schatten. Marke: Navy + Grün.
   ============================================================ */

/* ---- Schrift: Inter (lokal mitgeliefert, kein Internet nötig) ---- */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../vendor/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../vendor/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../vendor/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../vendor/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:800; font-display:swap;
  src:url("../vendor/fonts/inter-latin-800-normal.woff2") format("woff2"); }

:root {
  --atelva-blau:#001424;
  --atelva-blau-hell:#0d3050;
  --atelva-gruen:#6eb770;
  --atelva-gruen-dunkel:#4e9757;
  --tinte:#15222d;
  --tinte-soft:#5c6b78;
  --linie:rgba(0,20,36,.09);          /* Haarlinie statt klobiger Rahmen */
  --linie-stark:rgba(0,20,36,.16);
  --flaeche:#f5f7f9;
  --radius-s:.55rem;
  --radius-m:.8rem;
  --radius-l:1.05rem;
  --schatten-1:0 1px 2px rgba(0,20,36,.05), 0 4px 16px rgba(0,20,36,.05);
  --schatten-2:0 2px 6px rgba(0,20,36,.08), 0 12px 28px rgba(0,20,36,.09);
  --fokus:0 0 0 .22rem rgba(110,183,112,.30);
  --bs-body-font-family:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}

body {
  background:var(--flaeche);
  color:var(--tinte);
  font-family:var(--bs-body-font-family);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,.h3,.h4,.card-title { color:var(--atelva-blau); letter-spacing:-.015em; font-weight:700; }
.fw-bold,.fw-bolder { letter-spacing:-.01em; }
.text-muted { color:var(--tinte-soft)!important; }

/* ============================================================
   Navigation: einklappbare Seitenleiste links (Desktop),
   ausfahrbares Menü mit Kopfleiste (Mobil/Tablet)
   ============================================================ */
:root { --sl-breite:15rem; --sl-schmal:4.6rem; }

.seitenleiste {
  position:fixed; inset:0 auto 0 0; width:var(--sl-breite); z-index:1040;
  display:flex; flex-direction:column;
  background:linear-gradient(165deg,#001424 0%,#03223a 60%,#06304e 100%);
  border-right:1px solid rgba(110,183,112,.30);
  box-shadow:4px 0 24px rgba(0,20,36,.18);
  transition:width .18s ease, transform .2s ease;
}
html.sl-zu .seitenleiste { width:var(--sl-schmal); }

.sl-marke { display:flex; align-items:center; justify-content:center; padding:1.1rem .9rem .35rem; }
.sl-logo-voll { height:34px; max-width:100%; }
.sl-logo-symbol { height:30px; display:none; }
html.sl-zu .sl-logo-voll { display:none; }
html.sl-zu .sl-logo-symbol { display:block; }
.sl-untertitel {
  text-align:center; color:var(--atelva-gruen); font-weight:650; font-size:.86rem;
  letter-spacing:.14em; text-transform:uppercase; padding-bottom:.9rem;
  border-bottom:1px solid rgba(255,255,255,.08); margin:0 .9rem .6rem;
}

.sl-navigation { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:.25rem .55rem; }
.sl-link {
  display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.58rem .75rem; margin:.14rem 0; border:0; border-radius:.65rem;
  background:transparent; color:rgba(255,255,255,.78); font-weight:500; font-size:.92rem;
  text-decoration:none; white-space:nowrap; text-align:left;
  transition:background .14s ease, color .14s ease;
}
.sl-link svg { width:1.25rem; height:1.25rem; flex:0 0 auto; }
.sl-link:hover { background:rgba(255,255,255,.09); color:#fff; text-decoration:none; }
.sl-link.aktiv {
  background:rgba(110,183,112,.20); color:#fff; font-weight:600;
  box-shadow:inset 3px 0 0 var(--atelva-gruen);
}
.sl-link.aktiv svg { color:var(--atelva-gruen); }
/* Ungelesen-Zähler an der Meldungs-Glocke */
.sl-zaehler {
  margin-left:auto; min-width:1.35rem; height:1.35rem; padding:0 .38rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:#d9534f; color:#fff; font-size:.72rem; font-weight:700;
  border-radius:999px; line-height:1;
}
html.sl-zu .sl-zaehler {
  position:absolute; top:.28rem; right:.32rem; min-width:1.05rem; height:1.05rem;
  font-size:.62rem; padding:0 .26rem;
}
html.sl-zu .sl-link { position:relative; }
html.sl-zu .sl-text { display:none; }
html.sl-zu .sl-link { justify-content:center; padding:.62rem .3rem; }
html.sl-zu .sl-untertitel { display:none; }

.sl-fuss { padding:.55rem .55rem .8rem; border-top:1px solid rgba(255,255,255,.08); }
.sl-benutzer { padding:.3rem .75rem .5rem; }
.sl-benutzer-name { color:#fff; font-weight:600; font-size:.88rem;
  overflow:hidden; text-overflow:ellipsis; }
.sl-benutzer-rolle { color:rgba(255,255,255,.55); font-size:.76rem; }
.sl-toggle svg { transition:transform .18s ease; }
html.sl-zu .sl-toggle svg { transform:rotate(180deg); }

/* Hauptbereich neben der Leiste.
   WICHTIG: width:auto überschreibt Bootstraps width:100% (.container-fluid) –
   sonst ist die Seite um die Leistenbreite zu breit (horizontales Scrollen). */
body.mit-seitenleiste main, body.mit-seitenleiste footer {
  margin-left:var(--sl-breite);
  width:auto;
  transition:margin-left .18s ease;
}
html.sl-zu body.mit-seitenleiste main, html.sl-zu body.mit-seitenleiste footer {
  margin-left:var(--sl-schmal);
}

/* Mobile Kopfleiste + ausfahrbares Menü */
.mobil-kopf {
  position:sticky; top:0; z-index:1030;
  display:flex; align-items:center; gap:.7rem; padding:.55rem .9rem;
  background:linear-gradient(120deg,#001424,#06304e);
  border-bottom:1px solid rgba(110,183,112,.30);
}
.mobil-burger { border:0; background:transparent; color:#fff; padding:.3rem; border-radius:.5rem; }
.mobil-burger svg { width:1.5rem; height:1.5rem; }
.seiten-backdrop {
  position:fixed; inset:0; z-index:1035; background:rgba(0,20,36,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
@media (max-width: 991.98px) {
  .seitenleiste { transform:translateX(-100%); width:var(--sl-breite)!important; }
  .seitenleiste.offen { transform:translateX(0); }
  .seiten-backdrop.offen { opacity:1; pointer-events:auto; }
  body.mit-seitenleiste main, body.mit-seitenleiste footer { margin-left:0!important; }
  html.sl-zu .sl-text { display:inline; }        /* mobil immer mit Beschriftung */
  html.sl-zu .sl-link { justify-content:flex-start; padding:.58rem .75rem; }
  html.sl-zu .sl-logo-voll { display:block; }
  html.sl-zu .sl-logo-symbol { display:none; }
  html.sl-zu .sl-untertitel { display:block; }
}

/* ---- Karten: randlos wirkend, feine Kontur, weicher Schatten ---- */
.card {
  border:1px solid var(--linie);
  border-radius:var(--radius-l);
  box-shadow:var(--schatten-1);
  background:#fff;
  overflow:hidden;                    /* Tabellen enden sauber in der Rundung */
}
.card-header {
  background:#fff; font-weight:650; color:var(--atelva-blau);
  border-bottom:1px solid var(--linie);
  padding:.85rem 1.15rem; font-size:.95rem;
}
.card-body { padding:1.15rem; }

/* ---- Kennzahl-Kacheln ---- */
.kachel {
  display:block; background:#fff; height:100%;
  border:1px solid var(--linie); border-radius:var(--radius-l);
  padding:1.05rem 1.15rem; box-shadow:var(--schatten-1);
  text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
a.kachel:hover { transform:translateY(-2px); box-shadow:var(--schatten-2); }
.kachel .zahl {
  font-size:1.85rem; font-weight:800; color:var(--atelva-blau);
  line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.kachel .text { font-size:.82rem; color:var(--tinte-soft); margin-top:.1rem; }
.kachel.warnung .zahl { color:#c22f3d; }

/* ---- Buttons: schlanker, sanfte Bewegung ---- */
.btn {
  border-radius:var(--radius-s); font-weight:600; letter-spacing:.005em;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease,
             border-color .12s ease, color .12s ease;
}
.btn:not(.btn-sm):not(.navbar-toggler) { padding-top:.5rem; padding-bottom:.5rem; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-sm { border-radius:.5rem; font-weight:550; }
.btn-lg { border-radius:var(--radius-m); }
.btn-primary { background:var(--atelva-blau); border-color:var(--atelva-blau); box-shadow:0 2px 8px rgba(0,20,36,.18); }
.btn-primary:hover { background:var(--atelva-blau-hell); border-color:var(--atelva-blau-hell); }
.btn-success { background:var(--atelva-gruen); border-color:var(--atelva-gruen); color:#fff; box-shadow:0 2px 10px rgba(110,183,112,.32); }
.btn-success:hover, .btn-success:focus, .btn-success:active { background:var(--atelva-gruen-dunkel); border-color:var(--atelva-gruen-dunkel); color:#fff; }
.btn-outline-primary { color:var(--atelva-blau); border-color:var(--linie-stark); }
.btn-outline-primary:hover { background:var(--atelva-blau); border-color:var(--atelva-blau); }
.btn-outline-secondary { border-color:var(--linie-stark); color:var(--tinte-soft); }
.btn-outline-secondary:hover { background:#eef2f5; border-color:var(--linie-stark); color:var(--tinte); }
.btn-outline-success { color:var(--atelva-gruen-dunkel); border-color:rgba(110,183,112,.55); }
.btn-outline-success:hover { background:var(--atelva-gruen); border-color:var(--atelva-gruen); color:#fff; }
.btn-outline-danger { border-color:rgba(194,47,61,.45); }
.btn-outline-warning { border-color:rgba(255,193,7,.6); color:#8a6d00; }
.btn-outline-warning:hover { color:#4d3d00; }
.btn:focus-visible, .btn:focus { box-shadow:var(--fokus); }

/* ---- Formulare ---- */
.form-control, .form-select {
  border-radius:var(--radius-s); border-color:var(--linie-stark);
  padding:.5rem .8rem; color:var(--tinte);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus, .form-select:focus {
  border-color:var(--atelva-gruen); box-shadow:var(--fokus);
}
.form-control::placeholder { color:#9aa7b1; }
.form-label { font-weight:600; color:var(--atelva-blau); margin-bottom:.3rem; }
.form-check-input:checked { background-color:var(--atelva-gruen); border-color:var(--atelva-gruen); }
.form-check-input:focus { box-shadow:var(--fokus); border-color:var(--atelva-gruen); }

/* ---- Tabellen: Haarlinien, ruhige Köpfe, Tabellenziffern ---- */
.table { --bs-table-hover-bg:rgba(0,20,36,.025); margin-bottom:0; font-variant-numeric:tabular-nums; }
.table thead th {
  color:var(--tinte-soft); font-size:.72rem; font-weight:650;
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--linie-stark);
  padding:.6rem .75rem; background:#fbfcfd;
}
.table td { border-color:var(--linie); padding:.6rem .75rem; }
.table > :not(caption) > * > * { box-shadow:none; }
.table tbody tr:last-child td { border-bottom:0; }
.table-sm td, .table-sm th { padding:.42rem .6rem; }

/* ---- Badges: Pillen, weiche Töne ---- */
.badge { border-radius:50rem; font-weight:650; letter-spacing:.02em; padding:.42em .75em; }
.badge.text-bg-light { background:#f0f3f6!important; color:var(--tinte-soft)!important; border:1px solid var(--linie); }
.badge.text-bg-primary { background:var(--atelva-blau)!important; }
.badge.text-bg-success { background:#dff1e0!important; color:#1e5a26!important; }
.badge.text-bg-secondary { background:#e8edf1!important; color:#4b5a66!important; }
.badge.text-bg-warning { background:#fff0c2!important; color:#6b5200!important; }
.badge.text-bg-danger { background:#fadadd!important; color:#96222e!important; }

/* Kontrollstatus – immer Text, Farbe nur zusätzlich */
.status-OK { background:#dff1e0; color:#1e5a26; font-weight:700; }
.status-PRUEFEN { background:#fff0c2; color:#6b5200; font-weight:700; }
.status-KRITISCH { background:#fadadd; color:#96222e; font-weight:700; }
.status-OFFEN { background:#e8edf1; color:#4b5a66; font-weight:700; }

/* ---- Hinweise: randlos mit Akzentkante ---- */
.alert {
  border:0; border-left:4px solid var(--bs-alert-border-color, var(--linie-stark));
  border-radius:var(--radius-m); box-shadow:var(--schatten-1);
}

/* ---- Lager: großer Scanworkflow ---- */
.scan-feld {
  font-size:1.35rem; padding:.9rem 1.05rem; border-radius:var(--radius-m);
  font-variant-numeric:tabular-nums;
}
.grade-knopf {
  font-size:1.9rem; font-weight:800; min-width:5.4rem; min-height:5.4rem;
  border-radius:1.15rem; border:1.5px solid rgba(0,20,36,.35);
  background:#fff; color:var(--atelva-blau); letter-spacing:-.02em;
  box-shadow:var(--schatten-1);
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease,
             border-color .12s ease, color .12s ease;
}
.grade-knopf:hover {
  background:var(--atelva-gruen); border-color:var(--atelva-gruen); color:#fff;
  transform:translateY(-2px); box-shadow:0 8px 20px rgba(110,183,112,.35);
}
.grade-knopf:active { transform:translateY(0); }
.grade-knopf:focus-visible { outline:0; box-shadow:var(--fokus); }

/* LOCK und DEAD: Sonderstatus – bewusst abgesetzt von den Qualitätsstufen */
.grade-knopf-lock { border-color:rgba(194,47,61,.55); color:#c22f3d; }
.grade-knopf-lock:hover { background:#c22f3d; border-color:#c22f3d; color:#fff; box-shadow:0 8px 20px rgba(194,47,61,.3); }
.grade-knopf.aktiv { background:var(--atelva-blau); border-color:var(--atelva-blau); color:#fff; }
.grade-knopf-lock.aktiv { background:#c22f3d; border-color:#c22f3d; color:#fff; }

/* Kleinere Variante für die Wahl des äußeren Zustands bei LOCK/DEAD */
.grade-knopf-klein {
  font-size:1.25rem; min-width:3.6rem; min-height:3.6rem; border-radius:.85rem;
}
.grade-knopf-radio { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.grade-knopf-radio:has(input:checked) {
  background:var(--atelva-blau); border-color:var(--atelva-blau); color:#fff;
}
.grade-knopf-radio:has(input:focus-visible) { outline:0; box-shadow:var(--fokus); }

/* Etikett-Abgleich */
.abgleich-tabelle td { vertical-align:middle; }

/* ---- Mengenabgleich: Ein-Klick-Bestätigung + klebrige Abschlussleiste ---- */
.menge-zeile.menge-ok td { background:#f2f9f3; }
.menge-notiz-pflicht { border-color:#c22f3d; box-shadow:0 0 0 .18rem rgba(194,47,61,.13); }
.menge-leiste {
  position:sticky; bottom:.6rem; z-index:5;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--linie); box-shadow:var(--schatten-2);
}
.menge-ist { font-size:1.1rem; font-weight:600; }

/* ---- Links: markenfarben, Unterstrich erst beim Zeigen ---- */
a { color:var(--atelva-blau-hell); text-decoration:none; text-underline-offset:3px; }
a:hover { color:var(--atelva-gruen-dunkel); text-decoration:underline; }
a.btn:hover, .btn:hover, a.kachel:hover, .navbar a:hover { text-decoration:none; }
.table a { font-weight:600; }

/* ---- Aufklapper & Fußzeile ---- */
details > summary { cursor:pointer; color:var(--atelva-blau); }
details > summary::marker { color:var(--atelva-gruen-dunkel); }
footer { color:#8b98a3; }

/* ---- Druckansicht: Batch-Detail sauber auf Papier ---- */
@media print {
  .seitenleiste, .mobil-kopf, .seiten-backdrop, footer, .btn, button, form,
  .nicht-drucken, .alert-dismissible { display:none !important; }
  body { background:#fff !important; }
  body.mit-seitenleiste main { margin-left:0 !important; }
  main { padding:0 !important; }
  .card { box-shadow:none !important; border:1px solid #c9d2d9 !important; break-inside:avoid; }
  .kachel { box-shadow:none !important; border:1px solid #c9d2d9; }
  a { color:inherit !important; text-decoration:none !important; }
  .table-responsive { overflow:visible !important; }
}

/* ============================================================
   SokoPanda – kleiner Hilfe-Panda unten rechts (regelbasiert)
   ============================================================ */
.panda-knopf {
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:1055;
  width:3.6rem; height:3.6rem; border-radius:50%;
  background:var(--atelva-gruen); border:2px solid #fff;
  box-shadow:0 6px 20px rgba(0,20,36,.28); cursor:pointer;
  display:flex; align-items:flex-end; justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.panda-knopf img { width:3.05rem; height:auto; margin-bottom:.12rem; }
.panda-knopf:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 10px 26px rgba(0,20,36,.32); }
.panda-knopf.aktiv { background:var(--atelva-gruen-dunkel); }

.panda-panel {
  position:fixed; right:1.15rem; bottom:5.4rem; z-index:1054;
  width:min(23.5rem, calc(100vw - 2rem));
  max-height:min(34rem, calc(100vh - 7.5rem));
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--linie); border-radius:1rem;
  box-shadow:var(--schatten-2); overflow:hidden;
  animation:panda-auf .18s ease;
}
@keyframes panda-auf { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.panda-kopf {
  position:relative; display:flex; align-items:center; gap:.7rem;
  background:linear-gradient(120deg,#001424,#06304e);
  color:#fff; padding:.8rem 1rem .7rem 1rem;
  border-bottom:2px solid var(--atelva-gruen);
}
.panda-kopf .panda-untertext { color:rgba(255,255,255,.65); font-size:.78rem; }
.panda-figur {
  position:absolute; left:.65rem; bottom:-.9rem; height:4.9rem; width:auto;
  filter:drop-shadow(0 3px 6px rgba(0,20,36,.35)); pointer-events:none;
}
.panda-kopf-text { margin-left:4.6rem; }
.panda-schliessen {
  margin-left:auto; border:0; background:transparent; color:rgba(255,255,255,.7);
  font-size:1rem; padding:.2rem .45rem; border-radius:.4rem;
}
.panda-schliessen:hover { background:rgba(255,255,255,.12); color:#fff; }
.panda-inhalt { overflow-y:auto; padding:1.45rem 1rem 1rem; }
.panda-abschnitt { margin-bottom:1.1rem; }
.panda-titelzeile { font-weight:700; color:var(--atelva-blau); margin-bottom:.4rem; }
.panda-schritt { margin:.4rem 0; }
.panda-ergebnis { margin:.5rem 0 0; padding:.6rem .8rem; font-size:.86rem; }
.panda-grade { display:flex; gap:.6rem; align-items:flex-start; padding:.35rem 0;
  border-bottom:1px solid var(--linie); }
.panda-grade:last-child { border-bottom:0; }
.panda-grade .badge { min-width:3.1rem; margin-top:.1rem; }
.panda-frage { border:1px solid var(--linie); border-radius:.6rem; padding:.5rem .75rem; margin:.4rem 0; }
.panda-frage summary { font-weight:600; font-size:.88rem; }
.panda-frage p { margin:.45rem 0 0; font-size:.85rem; color:var(--tinte-soft); }
.panda-fusstext { font-size:.75rem; color:#8b98a3; text-align:center; }

/* Die Mengenabgleich-Leiste lässt dem Panda unten rechts Platz */
.menge-leiste .card-body { padding-right:4.9rem; }

/* Status-Stepper (Sendungsverfolgung): Wareneingang → Prüfung → Rechnung → Abschluss */
.stepper { display:flex; align-items:flex-start; gap:0; margin:.4rem 0 .2rem; }
.stepper-schritt { flex:1 1 0; text-align:center; position:relative; min-width:0; }
.stepper-punkt {
  width:1.55rem; height:1.55rem; margin:0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#e7ecef; color:#8b98a3; font-size:.8rem; font-weight:700;
  border:2px solid #d7dee3; position:relative; z-index:1;
}
.stepper-schritt.fertig .stepper-punkt { background:var(--atelva-gruen); border-color:var(--atelva-gruen); color:#fff; }
.stepper-schritt.aktiv .stepper-punkt { background:#fff; border-color:var(--atelva-gruen); color:var(--atelva-gruen); }
.stepper-name { font-size:.74rem; margin-top:.3rem; color:#8b98a3; font-weight:600; }
.stepper-schritt.fertig .stepper-name, .stepper-schritt.aktiv .stepper-name { color:var(--atelva-blau); }
.stepper-untertitel { font-size:.66rem; font-weight:500; color:#8b98a3; margin-top:.05rem; }
.stepper-schritt::before {
  content:""; position:absolute; top:.78rem; left:-50%; width:100%;
  height:2px; background:#d7dee3;
}
.stepper-schritt:first-child::before { display:none; }
.stepper-schritt.fertig::before, .stepper-schritt.aktiv::before { background:var(--atelva-gruen); }

/* Batteriezustand: gemessener Wert groß, angekündigter Wert klein darunter.
   Der Punkt sagt auf einen Blick, ob wir besser (grün), gleich (schwarz)
   oder schlechter (rot) gemessen haben als angekündigt. */
.batt-gemessen { font-size:.95rem; font-weight:600; color:var(--tinte); line-height:1.15; }
.batt-gemessen.unter-grenzwert { color:#b3261e; }
.batt-angekuendigt { font-size:.76rem; color:#8b98a3; line-height:1.15; margin-top:.05rem; }
.batt-punkt { font-size:.6rem; margin-right:.22rem; vertical-align:.08rem; }
.batt-warnung { color:#b3261e; font-size:.85rem; margin-left:.2rem; }
/* Äußerer Zustand bei LOCK/DEAD – kleine Ergänzung unter dem Grade-Badge */
.optisch-zusatz { font-size:.72rem; color:var(--tinte-soft); margin-top:.15rem; white-space:nowrap; }

/* Grade-Vergleich in derselben Optik wie die Batterieanzeige:
   oben groß der geprüfte Grade, darunter klein und grau der Einkaufsgrade
   mit farbigem Punkt (grün besser, rot schlechter, schwarz identisch).
   Eine einzige Lesart im ganzen Werkzeug – siehe bausteine/grade_vergleich.html. */
.grade-gemessen {
  font-size:1.02rem; font-weight:700; color:var(--tinte);
  line-height:1.15; letter-spacing:-.01em; white-space:nowrap;
}
.grade-gemessen.grade-sonderstatus { color:#b3261e; }
.grade-gemessen.grade-offen { color:#8b98a3; font-weight:600; font-size:.9rem; }
.grade-erwartet { font-size:.76rem; color:#8b98a3; line-height:1.15; margin-top:.05rem; white-space:nowrap; }
.vergleich-punkt { font-size:.6rem; margin-right:.22rem; vertical-align:.08rem; }
.punkt-besser     { color:var(--atelva-gruen-dunkel); }
.punkt-gleich     { color:var(--tinte); }
.punkt-schlechter { color:#b3261e; }
.grade-marke {
  display:inline-block; font-size:.6rem; font-weight:700; line-height:1;
  color:#5d6b77; background:#e6ebef; border-radius:.25rem;
  padding:.15rem .25rem; vertical-align:.15rem; margin-left:.15rem;
}
.grade-marke-korrigiert { color:#8a6100; background:#fdf1d8; }
.batt-besser { color:var(--atelva-gruen-dunkel); }
.batt-gleich { color:var(--tinte); }
.batt-schlechter { color:#b3261e; }

@media print { .panda-knopf, .panda-panel { display:none !important; } }

/* Warenabgleich: nächste offene Position hervorheben, gezählte ruhig darstellen */
.menge-fokus td { box-shadow: inset 0 0 0 9999px rgba(13,110,253,.07); }
.menge-fokus td:first-child { border-left: 4px solid #0d6efd; }
.menge-gezaehlt .form-control[readonly] { background: transparent; border-color: transparent; }