/* ============================================================================
   messlog.css — Aussehen von MessLOG. Richtung "Werkbank".
   ----------------------------------------------------------------------------
   Wird NACH app.css geladen und arbeitet in zwei Schichten:

     1. TOKEN — die Farb- und Formvariablen von app.css werden neu gesetzt.
        Damit ändert sich alles, was app.css über var(...) zeichnet: rund
        2200 Zeilen, ohne dass eine davon angefasst wird.

     2. SCHICHT — darüber die Bausteine, die den heutigen Eindruck ausmachen:
        dunkle Seitenleiste, Kopfzeile, Knöpfe, Karten, Tabellen, Formulare,
        Zustands-Abzeichen, Fussleiste am Telefon.

   Warum so und nicht als Neubau: die Ansichten benutzen an über 1500 Stellen
   eigene Klassennamen (btn, feld-label, karte, seiten-kopf ...). Ein fremdes
   Baukasten-CSS hätte jede Seite zerlegt. Hier bleibt jede Ansicht unberührt.

   Farbe ändern? Nur den :root-Block unten anfassen. Feste Farbwerte stehen
   ABSICHTLICH nirgends sonst in dieser Datei.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKEN
   ------------------------------------------------------------------------- */
:root {
    /* Flächen: warmes Papierweiss statt Blaugrau */
    --bg:          #f3f2ef;
    --flaeche:     #ffffff;
    --flaeche-2:   #faf9f7;
    --rahmen:      #e0ddd6;

    /* Text */
    --text:        #1c1a17;
    --text-leise:  #6d6659;

    /* Akzent: Bernstein */
    --akzent:      #b45309;
    --akzent-tf:   #92400e;
    --akzent-bg:   #fdf0e0;

    /* Zustände */
    --ok:          #15803d;  --ok-bg:     #e6f4ea;
    --warn:        #b45309;  --warn-bg:   #fdf0e0;
    --gefahr:      #b91c1c;  --gefahr-bg: #fdeaea;
    --info-bg:     #eef2f6;  --info-tf:   #334155;

    /* Form */
    --radius:      8px;
    --radius-s:    5px;
    --schatten:    0 1px 2px rgba(40,32,20,.07);
    --schatten-l:  0 12px 32px -14px rgba(40,32,20,.30);

    /* Eigene Token dieser Schicht */
    --ml-nav:        #1e242b;   /* Seitenleiste, dunkel */
    --ml-nav-2:      #2b333c;   /* aktiver Punkt darin */
    --ml-nav-text:   #9fb0bd;
    --ml-nav-hell:   #ffffff;
    --ml-marke:      #f59e0b;
    --ml-fein:       #eeebe5;   /* Trennlinien innerhalb von Karten */
    --ml-sehrleise:  #9a9285;
    --ml-tab:        44px;      /* Mindesthöhe alles Antippbaren */
}

/* Dunkelmodus: derselbe Aufbau, andere Flächen. app.css schaltet über
   data-theme um; hier nur die Werte, die abweichen. */
html[data-theme="dunkel"] {
    --bg:         #14181d;
    --flaeche:    #1b2028;
    --flaeche-2:  #222831;
    --rahmen:     #303842;
    --text:       #e8e6e1;
    --text-leise: #a29a8c;
    --akzent:     #e39445;
    --akzent-tf:  #f0ab63;
    --akzent-bg:  #33261a;
    --ok-bg:      #14291d;  --warn-bg: #33261a;  --gefahr-bg: #331a1a;
    --info-bg:    #1d2530;  --info-tf: #b8c4d2;
    --ml-nav:     #10141a;
    --ml-nav-2:   #1c242e;
    --ml-fein:    #262d36;
    --schatten:   0 1px 2px rgba(0,0,0,.45);
    --schatten-l: 0 12px 32px -14px rgba(0,0,0,.7);
}

/* ---------------------------------------------------------------------------
   2. GRUNDLAGE
   ------------------------------------------------------------------------- */
body {
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -.012em; }

/* ---------------------------------------------------------------------------
   3. KOPFZEILE
   ------------------------------------------------------------------------- */
.topbar {
    background: var(--flaeche);
    border-bottom: 1px solid var(--rahmen);
    box-shadow: none;
    gap: 14px;
}
.marke {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
/* Markenzeichen vor dem Namen – nur wenn KEIN eigenes Logo hinterlegt ist.
   Mit Logo würde es doppelt wirken. */
.marke:not(:has(.marke-logo))::before {
    content: "";
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    background: var(--ml-marke);
    /* Becherglas, als Maske – so nimmt es jede Akzentfarbe an */
    -webkit-mask: var(--ml-glas) center/15px 15px no-repeat;
            mask: var(--ml-glas) center/15px 15px no-repeat;
    background-color: var(--ml-marke);
}
:root { --ml-glas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v6l-5 9a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-5-9V3'/%3E%3Cpath d='M9 3h6M7 15h10'/%3E%3C/svg%3E"); }

.topbar-suche input {
    background: var(--flaeche-2);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius-s);
    min-height: 38px;
}
.topbar-suche input:focus {
    outline: 2px solid var(--akzent);
    outline-offset: -1px;
    border-color: var(--akzent);
}
.benutzer-chip {
    border: 1px solid var(--rahmen);
    border-radius: 20px;
    padding: 5px 13px;
    background: var(--flaeche-2);
    line-height: 1.25;
}
.benutzer-chip small { color: var(--text-leise); }

/* ---------------------------------------------------------------------------
   4. SEITENLEISTE — der auffälligste Unterschied
   ------------------------------------------------------------------------- */
.seitenleiste {
    background: var(--ml-nav);
    border-right: 0;
    color: var(--ml-nav-text);
}
.seitenleiste a,
.sb-nav a {
    color: var(--ml-nav-text);
    border-radius: var(--radius-s);
    font-weight: 500;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sb-nav a:hover {
    background: var(--ml-nav-2);
    color: var(--ml-nav-hell);
}
.sb-nav a[aria-current],
.sb-nav a.ist,
.sb-nav a.aktiv {
    background: var(--ml-nav-2);
    color: var(--ml-nav-hell);
    font-weight: 650;
    box-shadow: inset 3px 0 0 var(--ml-marke);
}
/* Gruppenüberschriften in der Leiste */
.sb-nav .sb-gruppe,
.seitenleiste .gruppe,
.sb-nav > strong {
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ml-sehrleise);
    font-weight: 700;
}
.sb-konto {
    border-top: 1px solid var(--ml-nav-2);
    color: var(--ml-nav-text);
}
.sb-konto small { color: var(--ml-sehrleise); }
.sb-konto .btn,
.seitenleiste .btn-still {
    background: transparent;
    border-color: var(--ml-nav-2);
    color: var(--ml-nav-text);
}
.sb-konto .btn:hover { background: var(--ml-nav-2); color: var(--ml-nav-hell); }

/* ---------------------------------------------------------------------------
   5. SEITENKOPF
   ------------------------------------------------------------------------- */
.seiten-kopf {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: var(--abstand);
    align-items: flex-end;
}
.seiten-kopf h1 { font-size: 1.45rem; }
.seiten-kopf .lead,
.lead { color: var(--text-leise); }

/* ---------------------------------------------------------------------------
   6. KNÖPFE
   ------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-s);
    font-weight: 600;
    min-height: var(--ml-tab);
    box-shadow: none;
    border: 1px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}
.btn:hover { box-shadow: none; }
.btn-still {
    background: var(--flaeche);
    color: var(--text);
    border-color: var(--rahmen);
}
.btn-still:hover { background: var(--bg); }
.btn-klein { min-height: 32px; font-size: .84rem; padding: 5px 11px; }
.btn-gefahr { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }
.btn-voll   { width: 100%; justify-content: center; }
.btn-reihe  { gap: 8px; }

/* ---------------------------------------------------------------------------
   7. KARTEN
   ------------------------------------------------------------------------- */
.karte, .info-box {
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.karte > h2:first-child,
.karte > h3:first-child {
    font-size: .96rem;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   8. TABELLEN — ruhiger, mit Zifferngleichlauf
   ------------------------------------------------------------------------- */
.tabelle-huelle {
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    overflow: hidden;
    background: var(--flaeche);
}
.tabelle thead th {
    background: var(--flaeche-2);
    border-bottom: 1px solid var(--ml-fein);
    font-size: .66rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ml-sehrleise);
    font-weight: 700;
}
.tabelle th, .tabelle td { border-color: var(--ml-fein); }
.tabelle tbody tr:hover td { background: var(--flaeche-2); }
.tabelle .rechts,
.tabelle td.zahl,
.tabelle .zahl { font-variant-numeric: tabular-nums; }
.kv-tabelle th { color: var(--text-leise); font-weight: 600; }

/* ---------------------------------------------------------------------------
   9. ABZEICHEN — als Pille mit Punkt statt als Kasten
   ------------------------------------------------------------------------- */
.badge {
    border-radius: 20px;
    padding: 3px 10px 3px 8px;
    font-size: .76rem;
    font-weight: 600;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--info-bg);
    color: var(--info-tf);
}
.badge::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: none;
}
.badge-ok   { background: var(--ok-bg);     color: var(--ok); }
.badge-warn { background: var(--warn-bg);   color: var(--warn); }
.badge-gefahr,
.badge-fehler { background: var(--gefahr-bg); color: var(--gefahr); }
.badge-aus  { background: var(--info-bg);   color: var(--text-leise); }

/* --------------------------------------------------------------------------
   10. MELDUNGEN
   ------------------------------------------------------------------------- */
.hinweis {
    border-radius: var(--radius);
    border: 0;
    border-left: 3px solid var(--akzent);
    background: var(--akzent-bg);
    color: var(--akzent-tf);
}
.hinweis-ok     { border-left-color: var(--ok);     background: var(--ok-bg);     color: var(--ok); }
.hinweis-fehler { border-left-color: var(--gefahr); background: var(--gefahr-bg); color: var(--gefahr); }
.hilfe { color: var(--ml-sehrleise); font-size: .8rem; }

/* --------------------------------------------------------------------------
   11. FORMULARE — 16 px Schriftgrösse, sonst zoomt iOS beim Antippen hinein
   ------------------------------------------------------------------------- */
.feld-label {
    font-size: .79rem;
    font-weight: 600;
    color: var(--text-leise);
    letter-spacing: .005em;
}
.feld input, .feld select, .feld textarea {
    font-size: 16px;
    min-height: var(--ml-tab);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius-s);
    background: var(--flaeche);
    color: var(--text);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
    outline: 2px solid var(--akzent);
    outline-offset: -1px;
    border-color: var(--akzent);
    box-shadow: none;
}
.feld-fehler { color: var(--gefahr); font-size: .79rem; }
.formular-aktion {
    border-top: 1px solid var(--ml-fein);
    background: var(--flaeche-2);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* --------------------------------------------------------------------------
   12. FUSSLEISTE AM TELEFON
   ------------------------------------------------------------------------- */
.kio-tabbar {
    background: var(--ml-nav);
    border-top: 0;
    box-shadow: 0 -6px 20px -12px rgba(0,0,0,.6);
}
.kio-tabbar a,
.kio-tabbar label { color: var(--ml-nav-text); min-height: 52px; }
.kio-tabbar a.ist,
.kio-tabbar a[aria-current] { color: var(--ml-marke); }
.kio-tabbar a.ist svg,
.kio-tabbar a[aria-current] svg { stroke: var(--ml-marke); }

/* --------------------------------------------------------------------------
   13. HANDY-ANSICHT — ein Wert, gross und mittig
   ------------------------------------------------------------------------- */
.hy-kopf {
    background: var(--ml-nav);
    color: var(--ml-nav-hell);
    border-bottom: 0;
}
.hy-kopf a, .hy-kopf svg { color: var(--ml-nav-text); }
.hy-eintrag {
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    background: var(--flaeche);
    min-height: 64px;
}
.hy-eintrag-haupt { border-color: var(--akzent); box-shadow: var(--schatten-l); }
.hy-knopf { min-height: 52px; border-radius: var(--radius); font-weight: 650; }
.hy-knopf-haupt { background: var(--akzent); color: #fff; }

/* --------------------------------------------------------------------------
   14. FUSS
   ------------------------------------------------------------------------- */
.fuss {
    background: transparent;
    border-top: 1px solid var(--rahmen);
    color: var(--ml-sehrleise);
    font-size: .8rem;
}
.fuss a { color: var(--text-leise); }

/* --------------------------------------------------------------------------
   15. TESTLEISTE (Impersonation) — bewusst auffällig, sie darf stören
   ------------------------------------------------------------------------- */
.testleiste { background: var(--ml-nav); color: var(--ml-nav-text); }
.testleiste-aktiv { background: var(--gefahr); color: #fff; }

/* --------------------------------------------------------------------------
   16. DRUCK — Navigation weg, Flächen weiss
   ------------------------------------------------------------------------- */
@media print {
    .topbar, .seitenleiste, .kontextleiste, .kio-tabbar, .fuss, .testleiste { display: none !important; }
    .shell, .shell-main, .inhalt { display: block; margin: 0; padding: 0; }
    .karte, .tabelle-huelle { border: 1px solid #ccc; box-shadow: none; }
}

/* ==========================================================================
   17. KENNZAHL-KACHELN  (Delta 005)
   Vier Zahlen über der Protokoll-Liste. Symbol links im farbigen Feld,
   Beschriftung klein, Zahl gross und mit Zifferngleichlauf.
   ========================================================================== */
.ml-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 12px;
    margin-bottom: var(--abstand);
}
.ml-kachel {
    background: var(--flaeche);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 14px 15px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.ml-sym {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: grid; place-items: center;
    background: var(--akzent-bg); color: var(--akzent);
}
.ml-sym svg { width: 18px; height: 18px; }
.ml-kachel.warn   .ml-sym { background: var(--warn-bg);   color: var(--warn); }
.ml-kachel.gefahr .ml-sym { background: var(--gefahr-bg); color: var(--gefahr); }
.ml-zahl small {
    display: block; font-size: .76rem; color: var(--text-leise); font-weight: 500;
}
.ml-zahl b {
    display: block; font-size: 1.55rem; line-height: 1.15;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* ==========================================================================
   18. SOLLBEREICHS-BALKEN  (Delta 005)
   Unter jedem Messfeld mit Soll-Grenzen. Der helle Streifen ist der
   Sollbereich, der Strich der gemessene Wert. Damit muss niemand zwei Zahlen
   im Kopf vergleichen.
   ========================================================================== */
.ml-band {
    position: relative;
    height: 6px;
    border-radius: 6px;
    background: var(--flaeche-2);
    border: 1px solid var(--rahmen);
    margin: 9px 0 0;
}
.ml-band-soll {
    position: absolute; top: 0; bottom: 0;
    background: var(--ok-bg);
    border-left: 1px solid var(--ok);
    border-right: 1px solid var(--ok);
}
.ml-band-aus .ml-band-soll { background: var(--warn-bg); border-color: var(--warn); }
.ml-band-ist {
    position: absolute; top: -4px;
    width: 3px; height: 14px; border-radius: 2px;
    background: var(--text);
    transform: translateX(-1px);
    transition: left .12s ease;
}
.ml-band-aus .ml-band-ist { background: var(--gefahr); }
.ml-band-text {
    display: flex; justify-content: space-between;
    font-size: .72rem; color: var(--ml-sehrleise); margin-top: 4px;
}
.ml-band-wert { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-leise); }
.ml-band-wert.ml-aus { color: var(--gefahr); }

/* ==========================================================================
   19. KACHELN ALS LINK, ZUSTANDS-PILLEN  (Delta 006)
   ========================================================================== */

/* Anklickbare Kennzahl-Kacheln (Chemikalienlager: setzen den Filter). */
a.ml-kachel { color: inherit; text-decoration: none; }
a.ml-kachel:hover { border-color: var(--akzent); box-shadow: var(--schatten-l); }
a.ml-kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Ampel-Abzeichen (Bestand, Verfall, Kalibrierung) als Pille mit Punkt –
   dieselbe Sprache wie .badge, damit man sie überall gleich liest. */
.kal-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    font-size: .78rem;
    font-weight: 600;
    border: 0;
}
.kal-status::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: none;
}
.kal-keine { background: var(--info-bg); color: var(--text-leise); }

/* Bestandsmenge in der Liste: Ziffern untereinander bündig. */
.stamm-g .kal-status:first-child { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   20. STARTSEITE  (Delta 008)
   Die Kennzahlen benutzen jetzt dieselben Kacheln wie Lager und Labor
   (.ml-kacheln). Hier nur noch die Handlungs-Kästen und die Lagerkarte.
   ========================================================================== */

/* Handlungsbedarf: Symbol links, Beschriftung und Zahl rechts.
   Die Farbe trägt die Bedeutung, der Rahmen bleibt zurückhaltend – ein
   vollflächig roter Kasten schreit, ohne mehr zu sagen. */
.dash-boxen { gap: 12px; }
.dash-box {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    border-radius: var(--radius);
    border: 1px solid var(--rahmen);
    background: var(--flaeche);
    box-shadow: var(--schatten);
    color: var(--text);
}
.dash-box:hover { filter: none; border-color: currentColor; box-shadow: var(--schatten-l); }
.dash-box-sym {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: grid; place-items: center;
}
.dash-box-sym svg { width: 18px; height: 18px; }
.dash-box-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-box-label { font-size: .78rem; color: var(--text-leise); font-weight: 500; }
.dash-box-wert {
    font-size: 1.55rem; line-height: 1.15; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--text);
}
.dash-box-wert small { color: var(--text-leise); }

.dash-box.dash-gefahr { background: var(--flaeche); border-color: var(--rahmen); color: var(--gefahr); }
.dash-box.dash-warn   { background: var(--flaeche); border-color: var(--rahmen); color: var(--warn); }
.dash-box.dash-info   { background: var(--flaeche); border-color: var(--rahmen); color: var(--info-tf); }
.dash-box.dash-gefahr .dash-box-sym { background: var(--gefahr-bg); color: var(--gefahr); }
.dash-box.dash-warn   .dash-box-sym { background: var(--warn-bg);   color: var(--warn); }
.dash-box.dash-info   .dash-box-sym { background: var(--info-bg);   color: var(--info-tf); }
/* Die Zahl trägt die Warnfarbe – sie ist das, was man zuerst liest. */
.dash-box.dash-gefahr .dash-box-wert { color: var(--gefahr); }
.dash-box.dash-warn   .dash-box-wert { color: var(--warn); }

.dash-h2 {
    font-size: .78rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ml-sehrleise);
    font-weight: 700;
    margin: 1.6rem 0 .7rem;
}

/* Lagerkarte und Bereichs-Einstiege */
.dash-lager { border-radius: var(--radius); }
.dash-bereich {
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    background: var(--flaeche);
    box-shadow: var(--schatten);
}
.dash-bereich:hover { border-color: var(--akzent); box-shadow: var(--schatten-l); }
.dash-bereich-n { color: var(--ml-sehrleise); font-size: .76rem; }

/* ==========================================================================
   21. ARTIKEL-ANSICHT  (Delta 009)
   ========================================================================== */

/* Kachelwert, der keine reine Zahl ist ("12.5 l", "1'240.00"): etwas kleiner,
   sonst bricht er auf schmalen Bildschirmen um. */
.ml-zahl b.ml-klein { font-size: 1.25rem; }

/* Bestandsbalken: gefüllter Anteil bis zum gemessenen Bestand, senkrechte
   Marke beim Mindestbestand. Die Skala geht bis zum Dreifachen des Mindest-
   bestands – darüber ist die genaue Höhe unwichtig. */
.ml-bestand { margin: 0 0 var(--abstand); }
.ml-bestand .ml-band {
    height: 10px;
    margin-top: 0;
    overflow: hidden;
}
.ml-band-fuell {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--ok);
    opacity: .55;
    transition: width .15s ease;
}
.ml-bestand-knapp .ml-band-fuell { background: var(--gefahr); opacity: .5; }
.ml-band-marke {
    position: absolute; top: -3px; bottom: -3px;
    width: 2px;
    background: var(--text);
    opacity: .75;
}

/* Zustands-Pillen in der Seitenüberschrift etwas absetzen. */
.seiten-kopf h1 .kal-status {
    font-size: .8rem;
    vertical-align: middle;
    margin-left: .5rem;
}

/* ==========================================================================
   22. MESSPROTOKOLL AM TELEFON  (Delta 010)
   ----------------------------------------------------------------------------
   Erfasst wird mit Handschuhen, im Stehen, auf Armlänge. Deshalb hier NUR auf
   schmalen Bildschirmen: grosser Wert, grosse Treffflächen, Sollbereich direkt
   darunter.

   Die Zifferntastatur aus der Design-Vorschau ist bewusst NICHT gebaut —
   Begründung in ZUERST_LESEN. Stattdessen öffnet inputmode="decimal"
   weiterhin die Zifferntastatur des Telefons, die jeder kennt.
   ========================================================================== */
@media (max-width: 640px) {

    /* Messzeile: Name oben, Wert gross darunter statt gequetscht daneben. */
    .lab-item { padding: .85rem 0; }
    .lab-item-kopf {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: .4rem .8rem;
    }
    .lab-mname { font-size: 1.02rem; }
    .lab-msoll { font-size: .82rem; }

    /* Der Wert ist das Wichtigste auf der Seite. */
    .lab-ist, .t-ist {
        width: 6.6rem;
        min-height: 56px;
        font-size: 1.55rem;
        font-weight: 650;
        text-align: right;
        padding-right: .55rem;
        font-variant-numeric: tabular-nums;
        border-radius: var(--radius);
        border-width: 2px;
    }
    /* Bewertung sofort sichtbar: der Rahmen färbt sich beim Tippen mit. */
    .lab-ist.g-ok    { border-color: var(--ok);     background: var(--ok-bg); }
    .lab-ist.g-unter,
    .lab-ist.g-ueber { border-color: var(--gefahr); background: var(--gefahr-bg); }

    /* Sollbereichs-Balken (Delta 005) auf dem Telefon kräftiger. */
    .ml-band { height: 9px; margin-top: 11px; }
    .ml-band-ist { height: 17px; top: -5px; width: 4px; }
    .ml-band-text { font-size: .8rem; }

    /* Massnahme und Bemerkung untereinander – nebeneinander ist auf 360 px
       keine Bedienung, sondern Zielen. */
    .lab-zusatz { flex-direction: column; gap: .5rem; }
    .lab-mass, .lab-bem { flex: 1 1 auto; width: 100%; min-height: var(--ml-tab); }

    /* Speichern bleibt am unteren Rand erreichbar, ohne die Leiste zu verdecken. */
    .lab-aktion .btn { min-height: 50px; font-size: 1rem; }
}

/* Handy-Einstieg des Labors: die Typen als grosse Flächen. */
.hy-knopf-gross {
    min-height: 62px;
    font-size: 1.08rem;
    border-radius: var(--radius);
    background: var(--flaeche);
    border: 1px solid var(--rahmen);
    color: var(--text);
    box-shadow: var(--schatten);
}
.hy-knopf-gross:first-of-type {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
    box-shadow: var(--schatten-l);
}
.hy-h2 {
    font-size: .74rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ml-sehrleise);
    font-weight: 700;
    margin: 1.3rem 0 .5rem;
}
.hy-zeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    min-height: 50px;
    padding: .6rem .9rem;
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    background: var(--flaeche);
    margin-bottom: .5rem;
    color: var(--text);
}
.hy-zeile-datum { color: var(--text-leise); font-size: .86rem; font-variant-numeric: tabular-nums; }