/* ============================================================================
   app.css – MessLOG
   Nüchternes, klares Verwaltungs-Design. Handgeschrieben, kein Build-Step.
   Design-Tokens in :root, dunkles Schema per prefers-color-scheme.
   ========================================================================== */:root {
    /* Farben (hell) */
    --bg:        #eef1f4;   /* Seitenhintergrund */
    --flaeche:   #ffffff;   /* Karten/Tabellen */
    --flaeche-2: #f5f7f9;   /* zarte Abhebung */
    --text:      #1c2430;   /* Haupttext */
    --text-leise:#5c6775;   /* Sekundärtext */
    --rahmen:    #d4dbe2;   /* Linien/Rahmen */
    --akzent:    #0f6b6b;   /* Petrol – sachlicher Akzent */
    --akzent-tf: #0a4f4f;   /* dunkler bei Hover */
    --akzent-bg: #e3f0ef;   /* heller Akzenthintergrund */
    --ok:        #1e7a46;
    --ok-bg:     #e3f3ea;
    --warn:      #8a5a00;
    --warn-bg:   #f7eed8;
    --gefahr:    #b3261e;
    --gefahr-bg: #f7e3e1;
    --info-bg:   #e6eef6;
    --info-tf:   #234b73;

    /* Maße */
    --radius:    8px;
    --radius-s:  5px;
    --abstand:   16px;
    --max-breite:1080px;
    --schrift:   system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --schatten:  0 1px 2px rgba(20, 30, 45, .05), 0 1px 3px rgba(20, 30, 45, .05);
    --schatten-l:0 6px 20px rgba(20, 30, 45, .10), 0 2px 6px rgba(20, 30, 45, .06);

    /* Abgeleiteter Abstands-Rhythmus (skaliert mit --abstand) */
    --abstand-s: calc(var(--abstand) * .5);
    --abstand-l: calc(var(--abstand) * 1.5)}

/* Dunkel: automatisch per Betriebssystem – ausser der Nutzer hat fest "Hell"
   gewählt – ODER fest auf "Dunkel" gestellt (data-theme am <html>). */@media (prefers-color-scheme: dark) {
    :root:not([data-theme="hell"]) {
        --bg:        #131820;
        --flaeche:   #1b232e;
        --flaeche-2: #222c39;
        --text:      #e7edf3;
        --text-leise:#9aa7b5;
        --rahmen:    #313d4c;
        --akzent:    #45c0bb;
        --akzent-tf: #6fd3cf;
        --akzent-bg: #173433;
        --ok:        #5cc98a;  --ok-bg:     #15301f;
        --warn:      #d8a13a;  --warn-bg:   #332912;
        --gefahr:    #ef6a62;  --gefahr-bg: #371a18;
        --info-bg:   #16273a;  --info-tf:   #9cc2e8;
        --schatten:  0 1px 2px rgba(0,0,0,.4);
        --schatten-l:0 8px 24px rgba(0,0,0,.5)}}:root[data-theme="dunkel"] {
    --bg:        #131820;
    --flaeche:   #1b232e;
    --flaeche-2: #222c39;
    --text:      #e7edf3;
    --text-leise:#9aa7b5;
    --rahmen:    #313d4c;
    --akzent:    #45c0bb;
    --akzent-tf: #6fd3cf;
    --akzent-bg: #173433;
    --ok:        #5cc98a;  --ok-bg:     #15301f;
    --warn:      #d8a13a;  --warn-bg:   #332912;
    --gefahr:    #ef6a62;  --gefahr-bg: #371a18;
    --info-bg:   #16273a;  --info-tf:   #9cc2e8;
    --schatten:  0 1px 2px rgba(0,0,0,.4);
    --schatten-l:0 8px 24px rgba(0,0,0,.5)}

/* --- Grundlagen --------------------------------------------------------- */* { box-sizing: border-box}html { -webkit-text-size-adjust: 100%}body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 16px;
    color: var(--text);
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;              /* kein horizontales Seiten-Scrollen */
    overflow-wrap: break-word;       /* lange Wörter/URLs brechen statt zu überlaufen */
}
/* Medien nie breiter als ihr Container */img { max-width: 100%; height: auto}svg, canvas, video, iframe { max-width: 100%}h1 { line-height: 1.2; margin: 0 0 .3rem}h2 { line-height: 1.25; margin: 0 0 .5rem}a  { color: var(--akzent); text-decoration: none}a:hover { text-decoration: underline}code {
    background: var(--flaeche-2);
    border: 1px solid var(--rahmen);
    border-radius: 4px;
    padding: .05em .35em;
    font-size: .9em}

/* Sichtbarer Tastatur-Fokus (Barrierearmut). */:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px}

/* --- Kopfzeile / Navigation -------------------------------------------- */.kopf {
    position: sticky; top: 0; z-index: 20;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rahmen);
    box-shadow: var(--schatten)}
/* Modern: leicht durchscheinender Kopf, wo unterstützt (Progressive Enhancement). */@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .kopf {
        background: color-mix(in srgb, var(--flaeche) 82%, transparent);
        -webkit-backdrop-filter: saturate(1.1) blur(10px);
        backdrop-filter: saturate(1.1) blur(10px)}}.marke {
    font-size: 1.1rem}.marke:hover { text-decoration: none; color: var(--akzent)}

/* Hamburger-Schalter ist eine versteckte Checkbox (reiner CSS-Mechanismus). */.nav-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none}.nav-toggle { display: none}   /* Label nur auf dem Handy sichtbar */   

/* --- Inhalt ------------------------------------------------------------- */.inhalt {
    flex: 1;
    width: 100%;
    max-width: var(--max-breite);
    margin: 0 auto;
    padding: calc(var(--abstand) * 1.5) var(--abstand)}.seiten-kopf.mit-aktion { justify-content: space-between}.lead { margin: 0}.zurueck { font-size: .9rem; color: var(--text-leise)}

/* --- Karten / Boxen ----------------------------------------------------- */.karte{
    background: var(--flaeche)}.notiz { color: var(--text-leise); font-size: .92rem}

/* --- Kacheln ------------------------------------------------------------ */.kachel-gitter {
    display: grid}.kachel {
    background: var(--flaeche);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    display: flex}.kachel { transition: transform .12s, box-shadow .12s, border-color .12s}.kachel-zahl { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.02em}.kachel-label { color: var(--text-leise); font-size: .9rem}

/* --- Tabellen ----------------------------------------------------------- */.tabelle-huelle {
    overflow-x: auto}.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem}.tabelle th, .tabelle td {
    text-align: left;
    border-bottom: 1px solid var(--rahmen);
    white-space: nowrap}.tabelle tbody tr { transition: background .1s}.tabelle tbody tr:last-child td { border-bottom: 0}.tabelle .rechts { text-align: right}.aktionen { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap}

/* --- Formulare & Eingaben (app-weit, EINZIGE Quelle) ------------------- */.formular { display: flex; flex-direction: column; gap: var(--abstand)}.formular.karte { padding: var(--abstand); max-width: 560px}

/* Karten-Innenabstand & Abstand zwischen Karten einheitlich */.karte:not(.tabelle-huelle) { padding: var(--abstand)}.karte > h2:first-child, .karte > h3:first-child { margin-top: 0}

/* Ein Feld = Label + Eingabe + optionaler Hinweis/Fehler */.feld { display: flex; flex-direction: column; gap: .35rem}.feld-label .req, .req { color: var(--gefahr); margin-left: .15rem; font-weight: 700}

/* Gleichmässiger Abstand zwischen Feldern innerhalb eines Formulars/einer Karte */form.karte > .feld, form.karte > .feld-check, form.karte > .feld-row,
form.karte > .feld-grid, form.karte > fieldset,
.formular > .feld, .formular > .feld-check, .formular > .feld-row,
.formular > .feld-grid { margin-bottom: 1rem}form.karte > .feld:last-of-type, form.karte > .feld-check:last-of-type { margin-bottom: .25rem}

/* ----------------------------------------------------------------------- *
 *  EINHEITLICHE EINGABE-BOX – EINE zentrale Stelle für ALLE Eingaben.
 *  Global per Element-Selektor: jedes Text-/Zahl-/Datum-/Zeit-/Auswahl-/
 *  Textfeld bekommt app-weit dieselbe Höhe, dasselbe Padding, denselben
 *  Rahmen, Fokus, Pfeil und Disabled/Readonly – OHNE dass neue Modulklassen
 *  je nachgetragen werden müssen. Checkboxen/Radios separat (siehe unten).
 *  Breite/Spalten regeln nur noch die Layout-Klassen (.feld, .feld-row …).
 * ----------------------------------------------------------------------- */input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]),
select, textarea {
    font: inherit; color: var(--text); background: var(--flaeche);
    border: 1px solid var(--rahmen); border-radius: var(--radius-s);
    padding: .5rem .65rem; min-height: 2.5rem; line-height: 1.3;
    max-width: 100%;
    transition: border-color .12s, box-shadow .12s}.feld input, .feld select, .feld textarea { width: 100%}textarea { min-height: 5rem; resize: vertical}input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):hover,
select:hover, textarea:hover {
    border-color: var(--text-leise)}input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):focus,
select:focus, textarea:focus {
    outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-bg)}

/* read-only / disabled app-weit gleich erkennbar */input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly]{
    background: var(--flaeche-2); color: var(--text-leise); cursor: not-allowed}input[readonly]:focus, textarea[readonly]:focus {
    box-shadow: none; border-color: var(--rahmen)}

/* Eigener Select-Pfeil – für ALLE Selects identisch */select {
    -webkit-appearance: none; appearance: none; padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23808a96' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center}

/* Checkboxen / Radios: saubere, ausgerichtete Zeile statt inline */.feld-check { display: flex; align-items: center; gap: .5rem; font-size: .92rem; cursor: pointer}.feld-check input[type=checkbox], .feld-check input[type=radio],
.feld > input[type=checkbox], .feld > input[type=radio] {
    width: 1.05rem; height: 1.05rem; min-height: 0; flex: 0 0 auto;
    accent-color: var(--akzent); margin: 0}

/* Hinweise & Fehler */.hilfe, .feld-hint { color: var(--text-leise); font-size: .82rem}.feld-fehler { font-weight: 600}

/* Mehrspaltige Feld-Layouts */.feld-row { display: flex; flex-wrap: wrap}.feld-row > .feld { flex: 1 1 12rem; margin-bottom: 0}.feld-row > .feld.eng { flex: 0 0 auto}.feld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem}.feld-grid > .feld { margin-bottom: 0}

/* Abschnitt im Formular (Fieldset oder Trenner) */fieldset.feld-fieldset {
    border: 1px solid var(--rahmen); border-radius: var(--radius);
    padding: .8rem 1rem; margin: 0}fieldset.feld-fieldset legend { padding: 0 .4rem; font-weight: 600; font-size: .92rem}.feld-abschnitt {
    margin: 1.2rem 0 .4rem; padding-top: .9rem; border-top: 1px solid var(--rahmen);
    font-weight: 600; font-size: .95rem}.feld-abschnitt:first-child { border-top: 0; padding-top: 0; margin-top: 0}

/* Schmale Eingaben (statt Inline-Breiten) */.feld input.w6,  .w6  { max-width: 6rem}.feld input.w7,  .w7  { max-width: 7rem}.feld input.w8,  .w8  { max-width: 8rem}.feld input.w12, .w12 { max-width: 12rem}

/* Aktionsreihe */.formular-aktion { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .6rem}.formular-aktion .btn-voll { width: auto; min-width: 9rem}

/* Allgemeine Button-Reihe */.btn-reihe { display: flex; flex-wrap: wrap; align-items: center}.karte > .btn-reihe { margin-top: .8rem}.seiten-kopf.mit-aktion > span { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center}

/* Per JS umgeschaltete Bereiche */.versteckt { display: none !important}

/* Kleine generische Helfer */.unter { font-weight: 400; color: var(--text-leise); font-size: .9rem}.spacer { flex: 1 1 auto}.titel-sek { margin: .2rem 0 .6rem}.titel-sek.abstand { margin-top: 1.6rem}

/* Abstands-Utilities (ersetzen Inline-Styles in den Views) */.mt-0 { margin-top: 0 !important}.mt-1 { margin-top: 1rem}.mt-s { margin-top: .8rem}.hinweis { font-size: .92rem}

/* --- Schaltflächen ------------------------------------------------------ */.btn {
    display: inline-block;
    font: inherit;
    color: var(--akzent-ink); background: var(--akzent);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2}.btn:hover { background: var(--akzent-tf); border-color: var(--akzent-tf); text-decoration: none}.btn:active { transform: translateY(1px); box-shadow: var(--schatten)}.btn-still, .btn-gefahr { box-shadow: none}.btn-still:hover, .btn-gefahr:hover { box-shadow: var(--schatten)}.btn-voll { text-align: center}.btn-gefahr:hover { background: var(--gefahr-bg); border-color: var(--gefahr)}form.inline { display: inline; margin: 0}

/* --- Flash-Meldungen ---------------------------------------------------- */.flash-bereich { display: flex; flex-direction: column; gap: .5rem; margin-bottom: var(--abstand)}.flash { font-size: .95rem}.flash-erfolg { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok)}.flash-fehler { background: var(--gefahr-bg); color: var(--gefahr); border-color: var(--gefahr)}.flash-info   { background: var(--info-bg);   color: var(--info-tf);border-color: var(--info-tf)}

/* --- Anmeldeseite ------------------------------------------------------- */.auth-huelle { display: flex; justify-content: center; padding-top: 4vh}.auth-titel { text-align: center; margin-bottom: .1rem}.auth-karte .formular { margin-top: var(--abstand)}

/* --- Leerzustand / Fehlerseite ----------------------------------------- */.leer {
    background: var(--flaeche); border: 1px dashed var(--rahmen);
    border-radius: var(--radius); padding: calc(var(--abstand) * 2);
    text-align: center; color: var(--text-leise);
    display: flex; flex-direction: column; gap: var(--abstand); align-items: center}.fehler-seite { text-align: center; padding: calc(var(--abstand) * 2) 0}.fehler-code { font-size: 3rem; font-weight: 800; color: var(--text-leise); margin: 0}.fuss-inner {
    display: flex; justify-content: space-between; align-items: center;
    max-width: var(--max-breite); margin: 0 auto; padding: .8rem var(--abstand)}.sprachwahl a { color: var(--text-leise); padding: 0 .35rem}.sprachwahl a[aria-current="true"] { color: var(--akzent); font-weight: 700}.theme-wahl { display: inline-flex; gap: .15rem; align-items: center}.theme-wahl a { color: var(--text-leise); padding: .1rem .4rem; border-radius: var(--radius-s); line-height: 1.4}.theme-wahl a:hover { background: var(--flaeche-2); text-decoration: none}.theme-wahl a[aria-current="true"] { color: var(--akzent); font-weight: 700; background: var(--akzent-bg)}.fuss-inner .theme-wahl { margin-left: auto}

/* --- Bewegung reduzieren ------------------------------------------------ */@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important}}

/* --- Handy / Tablet: eigene Darstellung -------------------------------- */@media (max-width: 768px) {

    .marke { flex: 1}

    /* Hamburger (Label) sichtbar; schaltet die versteckte Checkbox. */
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        order: 2; flex: none;
        width: 2.6rem; height: 2.6rem;
        background: var(--flaeche); color: var(--text);
        border: 1px solid var(--rahmen); border-radius: var(--radius-s);
        font-size: 1.2rem; line-height: 1; cursor: pointer;
        transition: background .12s, border-color .12s}
    .nav-toggle::before { content: "\2630"}                        /* ☰ */
    .nav-check:checked ~ .nav-toggle::before { content: "\2715"}   /* ✕ */
    .nav-toggle:hover { background: var(--flaeche-2)}
    .nav-check:focus-visible ~ .nav-toggle { outline: 3px solid var(--akzent); outline-offset: 2px}

    /* Panel: eigene Zeile unter dem Kopf, standardmässig zu; Checkbox klappt auf. */

    

    

    

    .inhalt { padding: var(--abstand)}
    h1 { font-size: 1.4rem}
    .fuss-inner { flex-wrap: wrap; gap: .5rem}

    /* Aktionen/Buttons greifen auf schmalen Schirmen die volle Breite */
    .formular-aktion .btn, .btn-reihe > .btn { flex: 1 1 auto; text-align: center}}

@media (max-width: 480px) {.kachel-gitter { grid-template-columns: 1fr 1fr}.kachel-zahl { font-size: 1.7rem}.seiten-kopf.mit-aktion { align-items: stretch}}

/* --- Daten-Engine: Suche, Blättern ------------------------------------- */.suchleiste { display: flex; gap: .5rem; margin-bottom: var(--abstand); max-width: 520px}.suchleiste input { flex: 1}.leer-zelle { color: var(--text-leise)}.blaettern {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: var(--abstand); flex-wrap: wrap; gap: .5rem;
    color: var(--text-leise); font-size: .9rem}.blaettern-seiten { display: flex; gap: .3rem}.blaettern-seiten a, .blaettern-seiten .seite-akt {
    padding: .25rem .55rem; border-radius: var(--radius-s);
    border: 1px solid var(--rahmen)}.blaettern-seiten a { color: var(--akzent)}.blaettern-seiten .seite-akt { background: var(--akzent); color: var(--akzent-ink); border-color: var(--akzent)}.blaettern-seiten .auslassung { padding: .25rem .2rem; color: var(--text-leise)}

/* --- Testleiste (Impersonation, nur Entwicklungsphase) ----------------- */.testleiste {
    border-bottom: 2px solid #c9a227;
    font-size: .86rem}.testleiste-aktiv { border-bottom-color: #f0a04b}.testleiste-inner {
    max-width: var(--breite-max, 1100px); margin: 0 auto;
    padding: .4rem var(--abstand, 1rem);
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap}.testleiste-status { opacity: .92; white-space: nowrap}.testleiste-status strong { color: #f0c14b}.testleiste-aktiv .testleiste-status strong { color: #ffd9a8}.testleiste-wechsel { display: flex; gap: .35rem; flex-wrap: wrap; flex: 1}.testleiste .btn-klein {
    background: rgba(255,255,255,.10); color: #f3efe8;
    border: 1px solid rgba(255,255,255,.22); padding: .15rem .5rem}.testleiste .btn-klein:hover { background: rgba(255,255,255,.20)}.testleiste .testleiste-btn.ist-aktiv {
    background: #f0c14b; color: #2d2a26; border-color: #f0c14b; font-weight: 700}.testleiste-zurueck .btn-klein {
    background: #f0a04b; color: #2d2a26; border-color: #f0a04b; font-weight: 700}.abschnitt-kopf h2 { margin: 0}.kat-titel { font-size: 1rem; margin: 1.3rem 0 .5rem; color: var(--text-leise)}.kat-titel:first-of-type { margin-top: .4rem}

/* --- Inline-Anlegen (neuer Typ / Kategorie / Eintrag) ----------------- */.neu-form { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem}.neu-form label { display: flex; flex-direction: column; font-size: .82rem; gap: .25rem; color: var(--text-leise)}.neu-form input, .neu-form select { width: auto; min-width: 12rem}

/* --- Reiter / Filter (Pillen) ----------------------------------------- */.lab-tabs, .typ-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem}.lab-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--rahmen); background: var(--flaeche);
    color: var(--text); text-decoration: none; font-size: .9rem; line-height: 1}.lab-tab:hover { background: var(--flaeche-2); text-decoration: none}.lab-tab.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-ink)}.lab-tab .cnt {
    font-variant-numeric: tabular-nums; font-size: .8rem; padding: .05rem .4rem;
    border-radius: 999px; background: var(--flaeche-2); color: var(--text-leise)}.lab-tab.aktiv .cnt { background: rgba(255,255,255,.22); color: #fff}

/* --- Metazeile (Detail-Kopf) ------------------------------------------ */.lab-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1rem}.lab-meta.lab-meta--trenner { border-top: 1px solid var(--rahmen); padding-top: .8rem}.lab-meta div span { display: block; font-size: .8rem; color: var(--text-leise)}

/* --- Listen-Karten (Becken / Grössen / Massnahmen / Kopffelder / Kat.) - */.stamm-bad {
    border: 1px solid var(--rahmen); margin-bottom: 1rem; background: var(--flaeche)}.stamm-bad-kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem}.stamm-bad-kopf h3 { margin: 0; display: inline-flex; align-items: center; gap: .45rem}.stamm-bad-kopf .bez { color: var(--text-leise); font-size: .9rem}.stamm-g {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem; border-top: 1px solid var(--rahmen)}.stamm-g:first-child { border-top: 0}.stamm-g .gmeta, .stamm-g .gsoll { color: var(--text-leise)}.stamm-akt { display: flex; gap: .4rem; flex-wrap: wrap}.stamm-leer { color: var(--text-leise); font-size: .9rem; padding: .4rem 0}

/* --- Ampel-Badges (Kalibrierung / Bestand / Verfall) ------------------ */.kal-status { border-radius: 999px; white-space: nowrap}.kal-ok    { background: var(--ok-bg);     color: var(--ok)}.kal-bald  { background: var(--warn-bg);   color: var(--warn)}.kal-ueber { background: var(--gefahr-bg); color: var(--gefahr)}.kal-keine { border-color: var(--rahmen)}

/* --- GHS-Chips --------------------------------------------------------- */.chem-ghs { display: flex; flex-wrap: wrap; gap: .15rem .5rem; margin: .25rem 0}.ghs-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--text-leise)}.ghs-raute { width: 1.45rem; height: 1.45rem; flex: none}

/* --- Icons ------------------------------------------------------------- */.ico { width: 1.05em; height: 1.05em; vertical-align: -.15em; flex: none}.btn .ico { margin-right: .35em}.dok-typ-ico { width: 1.35rem; height: 1.35rem; color: var(--text-leise); flex: none}.dok-zeile-haupt { display: flex; align-items: center; flex-wrap: wrap; min-width: 0}

/* --- Datei-Vorschau (Dateimanager + Labor) ---------------------------- */.dok-vorschau { margin: 0 0 1rem}.dok-bild { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rahmen)}.dok-pdf { width: 100%; height: 78vh; border: 1px solid var(--rahmen); border-radius: 6px; background: var(--flaeche)}.dok-text { max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem;
    background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 6px; padding: .8rem; margin: 0}.dok-meta { color: var(--text-leise); font-size: .9rem; margin: 0 0 1rem}.dok-import { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end}.dok-import .feld { margin: 0}.dok-import-pfad { font-family: ui-monospace, Menlo, Consolas, monospace;
    background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: .1rem .4rem}

/* --- Modul-Übersichtskacheln (Labor / Typen / Lager / Tool) ----------- */ .typ-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--abstand); margin-top: 1rem}.typ-grid { margin-bottom: .6rem} .typ-kachel {
    display: block; border: 1px solid var(--rahmen); border-radius: var(--radius);
    padding: 1rem 1.1rem; background: var(--flaeche); text-decoration: none; color: inherit;
    transition: box-shadow .15s, border-color .15s} .typ-kachel:hover {
    box-shadow: var(--schatten); border-color: var(--akzent); text-decoration: none}.typ-kachel h3 { margin: 0; font-size: 1.05rem}

/* --- Mobil (zentralisierte Komponenten) ------------------------------- */@media (max-width: 640px) {
    .typ-grid { grid-template-columns: 1fr}
    .stamm-g { flex-wrap: wrap}
    .dok-pdf { height: 60vh}}

/* ============================================================ KI-Assistent === */#ki-assistent { position: fixed; right: 18px; bottom: 18px; z-index: 900}.ki-fab {
    display: inline-flex; align-items: center; gap: .5em;
    background: var(--akzent); color: var(--akzent-ink); border: 0; cursor: pointer;
    padding: .7em 1.05em; border-radius: 999px; font: inherit; font-weight: 600;
    box-shadow: var(--schatten-l)}.ki-fab:hover { background: var(--akzent-tf)}.ki-fab span[aria-hidden] {
    display: inline-grid; place-items: center; width: 1.4em; height: 1.4em;
    border-radius: 50%; background: rgba(255,255,255,.22); font-weight: 700}.ki-panel {
    position: absolute; right: 0; bottom: calc(100% + 12px);
    width: min(360px, calc(100vw - 36px)); height: 520px; /* tatsächliche Höhe setzt assistent_widget.php aus innerHeight */
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--flaeche); color: var(--text);
    border: 1px solid var(--rahmen); border-radius: var(--radius);
    box-shadow: var(--schatten-l)}.ki-panel[hidden] { display: none}.ki-kopf {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6em .8em; border-bottom: 1px solid var(--rahmen); background: var(--akzent-bg)}.ki-zu { border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--text-leise)}.ki-zu:hover { color: var(--text)}.ki-verlauf { flex: 1 1 auto; overflow-y: auto; padding: .8em; display: flex; flex-direction: column; gap: .55em}.ki-msg {
    max-width: 85%; padding: .55em .75em; border-radius: var(--radius-s);
    white-space: pre-wrap; word-wrap: break-word; line-height: 1.4; font-size: .94rem}.ki-bot  { align-self: flex-start; background: var(--bg); border: 1px solid var(--rahmen)}.ki-user { align-self: flex-end; background: var(--akzent); color: var(--akzent-ink)}.ki-warte { opacity: .65; font-style: italic}.ki-fehler { background: var(--gefahr-bg); border-color: transparent}.ki-datenschutz { font-size: .76rem; color: var(--text-leise); margin: .2em 0 0}.ki-eingabe { display: flex; gap: .5em; padding: .6em; border-top: 1px solid var(--rahmen)}.ki-eingabe textarea {
    flex: 1 1 auto; resize: none; font: inherit; padding: .5em .6em;
    border: 1px solid var(--rahmen); border-radius: var(--radius-s);
    background: var(--bg); color: var(--text)}.ki-eingabe .btn { align-self: stretch}
@media (max-width: 480px) {.ki-fab-text { display: none}}.ki-tools-leiste { padding: .4em .8em; border-bottom: 1px solid var(--rahmen); background: var(--bg)}.ki-tools { display: inline-flex; align-items: center; gap: .45em; font-size: .82rem; color: var(--text-leise); cursor: pointer}.ki-tools input { accent-color: var(--akzent)}

/* ============================================================ Mobile: breite Tabellen
 * Tabellen mit eigenen Klassen (Statistik, Verbrauch, Sprach-Editor, Tool-
 * Ergebnisse, Begleitschein) haben keine eigene Scroll-Hülle. Auf schmalen
 * Schirmen werden sie horizontal scrollbar, statt abgeschnitten zu werden.
 * Bereits umhüllte Tabellen (.tabelle in .tabelle-huelle, .rechte-tab in
 * .rechte-tab-wrap) sind ausgenommen. */@media (max-width: 768px) {
    table { max-width: 100%}
    table:not(.tabelle):not(.rechte-tab) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch}
    /* Druck-Etikett bleibt unverändert kompakt */
    .etikett-tab { display: table; overflow: visible}}

/* Fußzeile: Kontakt + Links */.fuss-kontakt { color: var(--text-leise)}.fuss-links { display: inline-flex; gap: .8rem}.fuss-links a { color: var(--akzent)}.impressum-text { white-space: pre-wrap}

/* Menü-Editor */

/* ===== Seitenleisten-Layout (Topbar + Sidebar + Inhalt) ===== */.topbar { display: flex; align-items: center; padding: .5rem var(--abstand); position: sticky; top: 0; z-index: 30}.topbar .marke { font-weight: 700; color: var(--text); text-decoration: none; font-size: 1.05rem}.topbar .marke:hover { color: var(--akzent)}.topbar-spacer { flex: 1}.shell { display: flex; align-items: stretch}.seitenleiste { flex: 0 0 var(--sb-breite, 232px); width: var(--sb-breite, 232px); padding: .6rem; overflow: auto}.shell-main { flex: 1; min-width: 0}.sb-nav { display: flex; flex-direction: column; gap: .12rem}.sb-link { padding: .45rem .6rem; text-decoration: none}.sb-link:hover { text-decoration: none}.sb-grp { margin: .04rem 0}.sb-sum { list-style: none; cursor: pointer; padding: .45rem .6rem; font-weight: 600; display: flex; align-items: center}.sb-sum::-webkit-details-marker { display: none}.sb-sum::before { content: "\25B8"; margin-right: .45rem; font-size: .8em; transition: transform .12s}.sb-grp[open] > .sb-sum::before { transform: rotate(90deg)}.sb-sub { margin: .1rem 0 .3rem .55rem; padding-left: .5rem; border-left: 1px solid var(--rahmen); display: flex; flex-direction: column; gap: .12rem}.inhalt-zentriert { max-width: var(--max-breite); margin: 0 auto}
@media (max-width: 768px) {.shell { flex-direction: column}.seitenleiste { display: none; flex-basis: auto; width: auto; border-right: none; border-left: none; border-bottom: 1px solid var(--rahmen)}.nav-check:checked ~ .shell .seitenleiste { display: block}}

/* ===== Dashboard ===== */

/* Schnellzugriff: gleichmässige Kacheln, kein versetzter Abstand im Gitter,
   lange Titel brechen um statt aus der Box zu laufen. */.kachel-gitter > .karte { margin-top: 0; height: 100%}.kachel-gitter > .karte + .karte { margin-top: 0}.dash-lager-kopf { flex-wrap: wrap}.dash-lager-kopf strong { min-width: 0; overflow-wrap: anywhere}.dash-boxen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr))}.dash-box { display: flex; text-decoration: none}.dash-box:hover { text-decoration: none}.dash-box-wert { font-weight: 700}.dash-box-wert small { font-size: .8rem; font-weight: 400}.dash-lager { display: flex; flex-direction: column; gap: .5rem}.dash-lager-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem}.dash-lager-n { font-size: .8rem; color: var(--text-leise); white-space: nowrap}.dash-lager-akt { display: flex; gap: .4rem; flex-wrap: wrap}.sb-badge { margin-left: auto; border-radius: 999px; font-size: .72rem; line-height: 1; font-weight: 700}

/* ===== App-Rahmen (Desktop): Bildschirm-Fenster, Inhalt scrollt INNEN =====
   Der Trick: body.app wird exakt bildschirmhoch gesperrt (100vh, kein
   Fenster-Scroll). Topbar oben + Fusszeile unten bleiben fix; der Bereich
   dazwischen (.shell) füllt den Rest. Seitenleiste und Inhalt bekommen je
   einen EIGENEN Scrollbalken – die Leiste bewegt sich dadurch NIE mit dem
   Inhalt, sie scrollt höchstens für sich selbst, wenn das Menü zu lang ist.
   100vh ist überall unterstützt; 100dvh nur als Zusatz (Handy-Adressleiste). */@media (min-width: 769px) {
    body.app {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;          /* kein Scrollen auf Fenster-/Body-Ebene */
    }
    body.app > .topbar,
    body.app > .testleiste { flex: none}   /* feste Höhe, wird nicht gestaucht */
    body.app > .shell {
        flex: 1 1 auto;            /* füllt den Platz zwischen Topbar und Fuss */
        min-height: 0;             /* erlaubt Schrumpfen -> innere Scroller wirken */
        align-items: stretch;      /* Leiste + Inhalt gleich hoch wie .shell */
    }
    body.app .seitenleiste { overflow-y: auto}     /* scrollt nur bei Bedarf, bleibt sonst stehen */
    body.app .shell-main    { overflow-y: auto; min-height: 0}   /* hier scrollt der Inhalt */
    body.app > .fuss { flex: none; border-top: 1px solid var(--rahmen); background: var(--flaeche)}}

/* Gruppen-Kopf als Navigationslink (klick = Übersicht der Gruppe) */.sb-sum-link { flex: 1; text-decoration: none}.sb-sum-link:hover { text-decoration: none}

/* ===== Menü-Editor + Rechte-Liste ===== */.menue-add { margin-bottom: var(--abstand)}.menue-h2 { font-size: 1rem; margin: 0 0 .6rem}.menue-add-grid { display: grid; grid-template-columns: 1.3fr 1.6fr 1.2fr auto; gap: .8rem; align-items: end}.menue-add-btn { display: flex; align-items: flex-end}
@media (max-width: 760px) {.menue-add-grid { grid-template-columns: 1fr}}.menue-tabelle-wrap { overflow-x: auto}.menue-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem}.menue-tabelle th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); padding: .4rem .5rem; border-bottom: 2px solid var(--rahmen)}.menue-tabelle th.num, .menue-tabelle th.mit { text-align: center}.menue-tabelle td { padding: .35rem .5rem; border-bottom: 1px solid var(--rahmen); vertical-align: middle}.menue-tabelle td.num, .menue-tabelle td.mit { text-align: center}
/* Editor-Tabellen (Menü-/Seiten-Editor): kompakte, einheitliche Eingaben */.menue-tabelle input[type="text"], .menue-tabelle input[type="number"],
.menue-tabelle select, .menue-tabelle textarea {
    width: 100%; min-height: 2.2rem; padding: .4rem .55rem}.menue-tabelle select { padding-right: 1.8rem; background-position: right .55rem center}.menue-tabelle .w-num { width: 5rem; min-width: 4rem}.menue-tabelle textarea { min-height: 2.6rem; resize: vertical}.menue-tag { display: inline-block; margin-left: .4rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); border: 1px solid var(--rahmen); border-radius: 999px; padding: .05rem .4rem}.recht-pfad { color: var(--text-leise); font-size: .76rem; font-weight: 400}

/* ===== Inhalts-Seiten (Boxen) ===== */.inhalt-boxen { margin-top: var(--abstand)}.inhalt-box { display: flex; flex-direction: column; gap: .35rem; text-align: left}.inhalt-box .kachel-titel { font-weight: 600}.inhalt-box .kachel-text { color: var(--text-leise); font-size: .92rem; line-height: 1.5}a.inhalt-box.ist-link { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s}a.inhalt-box.ist-link:hover { border-color: var(--akzent); transform: translateY(-2px)}.feld-mit-check { align-self: end}.zeile-rechts { display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--abstand); flex-wrap: wrap}.menue-zeile-akt { display: flex; gap: .35rem; justify-content: flex-end}

/* ===== Freitext-Block (Box ohne Link) ===== */.inhalt-text { margin: var(--abstand) 0}.inhalt-text-titel { font-size: 1.15rem; margin: 0 0 .4rem}.inhalt-text-body { color: var(--text); line-height: 1.65; max-width: 70ch}

/* =======================================================================
 *  MODUL: Labor  (zentralisiert aus modules/labor/views/_labor_ui.php)
 * ===================================================================== */
/* ===================================================================== *
 *  Labor – NUR modulspezifische Layouts.
 *  Eingabe-Box, Reiter, Listen-Karten, Meta, Badges, GHS, Icons, Kacheln,
 *  Datei-Vorschau, Inline-Anlegen liegen jetzt zentral in app.css.
 * ===================================================================== */

/* --- Fremdanalyse: Positionen als ausgerichtete Spalten --------------- */.fa-pos { display: grid; gap: .15rem}.fa-pos-zeile {
    display: grid;
    grid-template-columns: minmax(7rem, 1.5fr) minmax(7rem, 1fr) 5rem 5rem minmax(8rem, 2fr);
    gap: .55rem .8rem; align-items: end;
    padding: .6rem 0; border-top: 1px solid var(--rahmen)}.fa-pos-zeile:first-child { border-top: 0; padding-top: .2rem}.fa-pos .feld { margin-bottom: 0}.fa-pos .feld input, .fa-pos .feld select { width: 100%}.fa-pos-name { padding-bottom: .4rem}
@media (max-width: 680px) {.fa-pos-zeile { grid-template-columns: 1fr; gap: .55rem; padding: .8rem 0}.fa-pos-name { padding-bottom: 0}.fa-pos-leer { display: none}}

/* --- Status-Ampel für Messwerte --------------------------------------- */.g-ok    { background: var(--ok-bg);     border-color: var(--ok)}.g-unter, .g-ueber, .g-bad {
    background: var(--gefahr-bg); border-color: var(--gefahr); color: var(--gefahr)}

/* --- Toolbar ----------------------------------------------------------- */.lab-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem}.lab-toolbar .lab-tb-label { font-size: .8rem; color: var(--text-leise); margin-right: .1rem}

/* --- Protokoll-Liste (nach Tag gruppiert) ----------------------------- */.prot-tag-kopf {
    margin: 1rem 0 .2rem; padding-top: .6rem; border-top: 1px solid var(--rahmen)}.prot-liste > .prot-tag-kopf:first-child { margin-top: 0; padding-top: 0; border-top: 0}.prot-zeile {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem .9rem;
    flex-wrap: wrap; border-top: 1px solid var(--rahmen)}.prot-tag-kopf + .prot-zeile { border-top: 0}.prot-zeit { font-variant-numeric: tabular-nums}.prot-ma { color: var(--text-leise)}.prot-filter { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end}.prot-filter .feld { margin-bottom: 0}.prot-tagnav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 1rem}.prot-tagnav-d { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 6.5rem; text-align: center}

/* --- Protokoll-Formular: Vorbehandlung (Becken-Karten) ---------------- */.lab-kopf { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem}.lab-kopf label { display: flex; flex-direction: column; font-size: .9rem; gap: .25rem}.lab-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--abstand)}.lab-karte { border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .8rem 1rem; background: var(--flaeche)}.lab-karte h3 { margin: 0; font-size: 1.02rem}.lab-karte .bez { display: block; font-size: .85rem; color: var(--text-leise); margin-bottom: .3rem}.lab-item { padding: .5rem 0; border-top: 1px solid var(--rahmen)}.lab-item:first-of-type { border-top: 0}.lab-item-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem}.lab-mname { font-weight: 600}.lab-einheit { color: var(--text-leise); font-weight: 400}.lab-msoll { font-size: .8rem; color: var(--text-leise)}.lab-ist { width: 6rem; text-align: right}.lab-zusatz { display: flex; gap: .4rem; margin-top: .35rem; flex-wrap: wrap}.lab-mass, .lab-bem { flex: 1 1 12rem}.lab-fx { display: inline-block; margin-left: .25rem; font-style: italic; font-weight: 700; color: var(--akzent); cursor: help}.lab-berechnet { background: var(--flaeche-2)}

/* --- Protokoll-Formular: generische Typen ----------------------------- */.lab-titems { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .7rem}.lab-titem { border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .7rem .9rem; background: var(--flaeche)}.lab-titem-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap}.lab-fototag { font-size: .72rem; padding: .05rem .4rem; border-radius: var(--radius-s); background: var(--info-bg); color: var(--info-tf)}.lab-eingabe { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap}.t-ist, .t-avg { width: 6.5rem; text-align: right}.t-mw { width: 4.5rem; text-align: right}.t-mwwrap { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center}.lab-beleg-hint { font-size: .85rem; color: var(--text-leise)}

/* --- Protokoll-Anzeige ------------------------------------------------- */.lab-zk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .7rem}.lab-z { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; padding: .45rem 0; border-top: 1px solid var(--rahmen)}.lab-zk-grid .lab-z { padding: .7rem .9rem; border: 1px solid var(--rahmen); border-radius: var(--radius); align-content: start}.lab-z .mname { font-weight: 600}.lab-z .einheit { color: var(--text-leise); font-weight: 400}.lab-z .msoll { font-size: .8rem; color: var(--text-leise)}.lab-z .mist { text-align: right; font-variant-numeric: tabular-nums; padding: .1rem .45rem; border-radius: var(--radius-s); align-self: center; font-weight: 600}.lab-z .mist.g-ok  { background: var(--ok-bg); color: var(--ok)}.lab-z .mist.g-bad, .lab-z .mist.g-unter, .lab-z .mist.g-ueber { background: var(--gefahr-bg); color: var(--gefahr)}.lab-z .mwerte { grid-column: 1 / -1; font-size: .8rem; color: var(--text-leise)}.lab-z .mbem  { grid-column: 1 / -1; font-size: .85rem; color: var(--text-leise)}.lab-z .mmass { grid-column: 1 / -1; font-size: .85rem; color: var(--warn)}.lab-z .mfoto { grid-column: 1 / -1}.lab-z .mfx { display: inline-block; margin-left: .25rem; font-style: italic; font-weight: 700; color: var(--akzent); cursor: help}

/* --- Foto-Galerien ----------------------------------------------------- */.lab-fotos { margin-top: 1.6rem}.lab-foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem}.lab-foto { border: 1px solid var(--rahmen); border-radius: var(--radius); overflow: hidden; background: var(--flaeche)}.lab-foto a.bild { display: block; background: var(--flaeche-2); line-height: 0}.lab-foto a.bild img { display: block; width: 100%; height: 9rem; object-fit: cover}.lab-foto .akt { display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem; align-items: center}.lab-foto .akt form { display: inline}.lab-foto .akt .btn-klein { padding: .2rem .45rem; font-size: .8rem}.lab-foto .masse { width: 100%; font-size: .72rem; color: var(--text-leise); padding: 0 .4rem .4rem}.lab-foto select { font-size: .8rem; padding: .15rem .3rem; min-height: 0}.lab-foto-pdf a.datei { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: 9rem; background: var(--flaeche-2); text-decoration: none; padding: .6rem; text-align: center}.lab-foto-pdf .pdf-icon { font-weight: 800; font-size: .8rem; letter-spacing: .05em; color: var(--gefahr-ink); background: var(--gefahr, #b3261e); border-radius: var(--radius-s); padding: .35rem .55rem}.lab-foto-pdf .pdf-name { font-size: .78rem; color: var(--text); word-break: break-word; line-height: 1.25; max-height: 3.2em; overflow: hidden}.lab-upload { border: 1px dashed var(--rahmen); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem}.lab-upload input[type=file] { display: block; margin: .4rem 0 .6rem}.lab-zfoto { margin-top: .5rem}.lab-zfoto .titel { font-size: .8rem; color: var(--text-leise); margin-bottom: .3rem}.lab-zfoto-grid { display: flex; flex-wrap: wrap; gap: .4rem}.lab-zfoto-grid .ff { border: 1px solid var(--rahmen); border-radius: var(--radius-s); overflow: hidden; width: 7rem; background: var(--flaeche)}.lab-zfoto-grid .ff a.bild { display: block; background: var(--flaeche-2); line-height: 0}.lab-zfoto-grid .ff img { display: block; width: 100%; height: 5rem; object-fit: cover}.lab-zfoto-grid .ff .akt { display: flex; gap: .2rem; padding: .25rem}.lab-zfoto-grid .ff .akt form { display: inline}.lab-zfoto-grid .ff .akt .btn-klein { padding: .1rem .35rem; font-size: .75rem}.lab-zfoto-up { display: flex; gap: .4rem; align-items: center; margin-top: .35rem; flex-wrap: wrap}.lab-zfoto-up input[type=file] { font-size: .8rem; max-width: 14rem}

/* --- Statistik --------------------------------------------------------- */.stat-filter { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-bottom: 1.2rem}.stat-filter .feld { gap: .2rem; margin-bottom: 0}.stat-filter .feld-label { font-size: .8rem; color: var(--text-leise)}.stat-karten { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0}.stat-kpi { border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .6rem .9rem; min-width: 7rem; background: var(--flaeche)}.stat-kpi .wert { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums}.stat-kpi .lab { font-size: .75rem; color: var(--text-leise)}.stat-kpi.warn .wert { color: var(--gefahr)}.lab-chart { width: 100%; height: auto; border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche)}.stat-tab { width: 100%; border-collapse: collapse; margin-top: .6rem}.stat-tab th, .stat-tab td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--rahmen); font-size: .9rem}.stat-tab td.num, .stat-tab th.num { text-align: right; font-variant-numeric: tabular-nums}.stat-tab tr.warn td { background: var(--gefahr-bg)}

/* --- QR-Verwaltung ----------------------------------------------------- */.qr-flex { display: flex; flex-wrap: wrap; gap: var(--abstand); align-items: flex-start}.qr-box { flex: 0 0 auto; text-align: center}.qr-box svg { width: 220px; height: 220px; background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 8px}.qr-box .qr-datum { font-size: .8rem; color: var(--text-leise); margin-top: 6px}.qr-info { flex: 1 1 320px; min-width: 0}.qr-link { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; background: var(--flaeche-2)}.qr-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px}.qr-row.ende { align-items: flex-end}.qr-toggles label { display: flex; gap: 8px; align-items: center; padding: 5px 0}
@media print {body * { visibility: hidden}.qr-print, .qr-print * { visibility: visible}.qr-print { position: absolute; left: 0; top: 0; width: 100%; text-align: center}.qr-print svg { width: 320px; height: 320px; border: none}}

/* --- Mobil ------------------------------------------------------------- */@media (max-width: 768px) {
    .lab-aktion {
        position: sticky; bottom: 0; z-index: 10;
        margin: .6rem calc(var(--abstand) * -1) calc(var(--abstand) * -1);
        padding: .7rem var(--abstand);
        border-top: 1px solid var(--rahmen);
        background: var(--flaeche);
        box-shadow: 0 -2px 10px rgba(20, 30, 45, .08)}
    .lab-kopf input, .lab-kopf select,
    .lab-ist, .lab-mass, .lab-bem { min-height: 2.75rem}
    .lab-item { padding: .65rem 0}

    .prot-zeile { padding: .7rem 0}
    .prot-tagnav-d { flex: 1}}
@media (max-width: 640px) {.lab-karten, .lab-titems, .lab-zk-grid { grid-template-columns: 1fr}.lab-ist, .t-ist, .t-avg { width: 5.5rem}}

/* =======================================================================
 *  MODUL: Lagerverwaltung  (zentralisiert aus modules/lagerverwaltung/views/_lager_ui.php)
 * ===================================================================== */
.etikett { display: flex; gap: 1.2rem; align-items: flex-start; border: 2px solid var(--rahmen); border-radius: var(--radius); padding: 1rem 1.2rem; max-width: 520px; background: #fff}
/* Das Etikett ist ein Druckbild: immer dunkle Schrift auf Weiss, auch im
   Dunkelmodus (sonst helle Schrift auf weissem Grund). */
.etikett { color: #16202b; --text: #16202b; --text-leise: #5b6573; --rahmen: #c9d1da}.etikett-qr { flex: none; width: 150px}.etikett-qr svg { width: 150px; height: 150px; display: block}.etikett-text { min-width: 0}.etikett-name { font-size: 1.25rem; font-weight: 800; line-height: 1.2}.etikett-lief { color: var(--text-leise); margin-bottom: .4rem}.etikett-tab { border-collapse: collapse; margin: .2rem 0}.etikett-tab td { padding: .15rem .5rem .15rem 0; vertical-align: top}.etikett-tab td:first-child { color: var(--text-leise)}.etikett-ghs { margin: .4rem 0}.etikett-hinweis { max-width: 520px}

/* --- Scan-Entnahme (mobil) -------------------------------------------- */.scan-karte { max-width: 480px}.scan-chem { font-size: 1.3rem; font-weight: 800}.scan-meta { color: var(--text-leise); margin: .2rem 0 .5rem}.scan-bestand { display: flex; align-items: baseline; justify-content: space-between; margin: .8rem 0; padding: .6rem .8rem; background: var(--flaeche-2); border-radius: var(--radius-s)}.scan-bestand-label { color: var(--text-leise)}.scan-bestand-wert { font-size: 1.4rem; font-weight: 800}.scan-leer { color: var(--gefahr)}.scan-form { display: flex; flex-direction: column; gap: .8rem}.scan-form input[type="text"] { font-size: 1.05rem}.scan-voll { display: flex; align-items: center; gap: .5rem; cursor: pointer}.btn-gross { font-size: 1.1rem; padding: .8rem 1rem; width: 100%}

/* --- Verbraucher / Verbrauch ------------------------------------------ */.vb-textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace}.vb-filter { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end}.vb-filter .feld { flex: 1 1 12rem}.vb-filter .formular-aktion { flex: 0 0 auto; margin: 0}.vb-gruppe h3 { margin: 0 0 .5rem}.vb-ohne { color: var(--text-leise); font-style: italic; font-weight: 600}.vb-tabelle { width: 100%; border-collapse: collapse}.vb-tabelle td { padding: .35rem 0; border-top: 1px solid var(--rahmen)}.vb-tabelle tr:first-child td { border-top: 0}.vb-menge { text-align: right; font-weight: 700; white-space: nowrap}

/* --- Wareneingang: Aufteilung ----------------------------------------- */.we-pool { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; cursor: pointer}.we-summe { margin: .2rem 0 0; min-height: 1.1em}

/* --- Druck (Etikett) --------------------------------------------------- */@media print {
    .no-print { display: none !important}
    body * { visibility: hidden}
    .etikett-print, .etikett-print * { visibility: visible}
    .etikett-print { position: absolute; left: 0; top: 0}
    .etikett { border-color: #000}}

/* Zahlen in Tabellen rechtsbündig */
.tabelle .num, .tabelle th.num { text-align: right}

/* =======================================================================
 *  MODUL: Dateimanager  (zentralisiert aus modules/dateimanager/views/_dm_ui.php)
 * ===================================================================== */
/* Alle früheren Regeln (Abschnittskopf, neu-form, Listen-Karten, Icons,
   Datei-Vorschau/Import, Kategorie-Titel) sind jetzt zentral in app.css.
   Der Dateimanager hat aktuell kein eigenes, nur hier benötigtes Styling. */

/* =======================================================================
 *  Utilities, die frühere Inline-Styles in den Views ersetzen
 * ===================================================================== */
/* Einzug nach Baumtiefe (Menü-/Rechte-/Seiten-Editor) – statt Inline-Padding */
/* schmale Zahl-Eingabe (z. B. Sortier-Spalte in Editor-Tabellen) */.w-num { width: 5rem; min-width: 4rem}
/* datengetriebene Werte: View liefert nur die Zahl/Farbe per CSS-Variable */

/* ------------------------------------------------------------------ *
 *  Modul-Unternavigation (Reiter je Modul, lib/unternav.php)
 * ------------------------------------------------------------------ */.modul-unternav {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin: 0 0 1.1rem; padding: 0 0 .6rem;
    border-bottom: 1px solid var(--rahmen)}.modul-unternav .un-tab {
    display: inline-flex; align-items: center; padding: .38rem .85rem;
    border: 1px solid transparent; border-radius: 999px;
    background: transparent; color: var(--text-leise);
    text-decoration: none; font-size: .9rem; line-height: 1; white-space: nowrap;
    transition: background .12s, color .12s}.modul-unternav .un-tab:hover {
    background: var(--flaeche-2); color: var(--text); text-decoration: none}.modul-unternav .un-tab.un-aktiv {
    background: var(--akzent); border-color: var(--akzent); color: var(--akzent-ink); font-weight: 600}
/* Mobile: horizontal scrollbar statt Umbruch, damit die Leiste kompakt bleibt. */@media (max-width: 640px) {
    .modul-unternav {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        gap: .3rem; scrollbar-width: thin}
    .modul-unternav .un-tab { flex: 0 0 auto}}

/* ------------------------------------------------------------------ *
 *  Brotkrumen (Breadcrumbs, lib/unternav.php)
 * ------------------------------------------------------------------ */.brotkrumen {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
    margin: 0 0 .7rem; font-size: .82rem; color: var(--text-leise)}.brotkrumen .bk-glied { color: var(--text-leise); text-decoration: none}.brotkrumen .bk-glied:hover { color: var(--akzent); text-decoration: underline}.brotkrumen .bk-sep { color: var(--text-leise); opacity: .6}.brotkrumen .bk-akt { color: var(--text); font-weight: 600}

/* ================================================================== *
 *  Fokus-Modus – nacktes, touch-freundliches Layout für mobile
 *  Arbeitstätigkeiten (Scannen, Buchen/Abbuchen, QR).  lib/fokus.php
 * ================================================================== */body.fokus {
    background: var(--bg);
    /* Kein Chrome: keine Sidebar/Topbar/Footer/Tabbar im Fokus-Modus. */
}.fokus-inhalt {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.1rem 1rem 3rem;
    min-height: 100vh;
    box-sizing: border-box}
/* Grosse, gut lesbare Überschrift der Aufgabe. */.fokus-inhalt h1,
.fokus-inhalt .seiten-kopf h1 { font-size: 1.4rem; margin: .2rem 0 1rem}

/* Touch-Ziele grosszügig: Knöpfe und Eingaben mindestens ~3.2rem hoch. */.fokus-inhalt .btn {
    min-height: 3.2rem; padding: .9rem 1.2rem; font-size: 1.05rem; border-radius: var(--radius)}.fokus-inhalt .btn-voll { width: 100%}.fokus-inhalt input[type="text"],
.fokus-inhalt input[type="number"],
.fokus-inhalt input[type="search"],
.fokus-inhalt input[type="date"],
.fokus-inhalt select,
.fokus-inhalt textarea {
    min-height: 3.2rem; font-size: 1.05rem; padding: .7rem .85rem}
/* Etwas mehr Luft zwischen Formularfeldern für dicke Finger. */.fokus-inhalt .feld { margin-bottom: 1rem}.fokus-inhalt .karte { padding: 1.1rem}

/* Schliessen-Knopf oben rechts – zurück in den normalen Bereich. */.fokus-exit {
    position: fixed; top: .6rem; right: .6rem; z-index: 50;
    width: 2.6rem; height: 2.6rem; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; line-height: 1; text-decoration: none;
    background: var(--flaeche); color: var(--text-leise);
    border: 1px solid var(--rahmen); box-shadow: var(--schatten)}.fokus-exit:hover { background: var(--flaeche-2); color: var(--text); text-decoration: none}

/* Auf sehr kleinen Geräten randlos und noch grösser. */@media (max-width: 480px) {
    .fokus-inhalt { padding: .9rem .8rem 3rem}
    .fokus-inhalt .karte { padding: .9rem; border-radius: var(--radius)}}

/* ------------------------------------------------------------------ *
 *  Firmenlogo (Branding, lib/branding.php)
 * ------------------------------------------------------------------ */
/* Login-Seite: Logo statt Titel */.auth-logo { text-align: center; margin: 0 0 1rem}.auth-logo img { max-width: 100%; max-height: 96px; height: auto; object-fit: contain}
/* Menü-Topbar: Logo in der Marke */.marke-logo { max-height: 34px; width: auto; display: block; object-fit: contain}
/* Einstellungen: Vorschau des aktuellen Logos */.branding-vorschau {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .7rem 1rem; margin: .3rem 0 .8rem;
    background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: var(--radius)}.branding-vorschau img { max-height: 72px; max-width: 260px; width: auto; object-fit: contain}

/* ------------------------------------------------------------------ *
 *  Menü-Editor als Baum
 * ------------------------------------------------------------------ */.mn-werkzeug { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap}.mn-suchfeld { flex: 1; min-width: 14rem; margin: 0}.karte.mn-werkzeug > .mn-suchfeld { margin: 0}.mn-werkzeug .btn-reihe { min-height: 2.75rem}.mn-zaehler { white-space: nowrap}.mn-baum { border: 1px solid var(--rahmen); border-radius: var(--radius); overflow: hidden; background: var(--flaeche)}.mn-zeile { border-bottom: 1px solid var(--rahmen)}.mn-zeile:last-child { border-bottom: 0}.mn-zeile[hidden] { display: none}.mn-haupt { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; min-height: 2.4rem; flex-wrap: wrap}.mn-zeile:hover > .mn-haupt { background: var(--flaeche-2)}.mn-klapp, .mn-klapp-leer { width: 1.6rem; height: 1.6rem; flex: 0 0 auto}.mn-klapp { border: 0; background: none; cursor: pointer; color: var(--text-leise); font-size: .9rem;
            border-radius: var(--radius-s); line-height: 1}.mn-klapp:hover { background: var(--akzent-bg); color: var(--akzent)}.mn-titel { font-weight: 600}.mn-kinder { font-size: .72rem; color: var(--text-leise); background: var(--flaeche-2);
             border-radius: 999px; padding: 0 .4rem}.mn-pfad { color: var(--text-leise); font-size: .8rem; font-family: monospace; margin-left: auto}.mn-aus-tag { font-size: .72rem; color: var(--warn); background: var(--warn-bg); border-radius: 3px; padding: 0 .3rem}.mn-zeile.mn-aus .mn-titel { color: var(--text-leise); font-weight: 400}.mn-aktionen { display: flex; gap: .1rem; flex: 0 0 auto}.mn-akt { border: 1px solid transparent; background: none; cursor: pointer; color: var(--text-leise);
          min-width: 2rem; min-height: 2rem; border-radius: var(--radius-s); font-size: .95rem; line-height: 1}.mn-akt:hover { background: var(--akzent-bg); color: var(--akzent); border-color: var(--rahmen)}.mn-stift-auf { background: var(--akzent-bg); color: var(--akzent)}.mn-form { padding: .6rem .8rem 1rem 2.2rem; background: var(--flaeche-2); border-top: 1px dashed var(--rahmen)}.mn-schalter { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .5rem}.mn-check { display: flex; align-items: center; gap: .35rem; font-size: .9rem}.mn-loeschen { margin-top: .6rem}.mn-frisch { animation: mn-blitz 1.4s ease-out 1}
@keyframes mn-blitz { from { background: var(--akzent-bg); } to { background: transparent; } }.mn-neu { margin-top: 1rem}
@media (max-width: 700px) {.mn-pfad { margin-left: 0; flex: 1 1 100%; order: 9}.mn-aktionen { order: 8; margin-left: auto}}

/* ------------------------------------------------------------------ *
 *  Bereichsleiste (Navigationsart "bereiche")
 * ------------------------------------------------------------------ */.bereichsleiste { display: flex; gap: .1rem; align-items: center; margin-left: .7rem; overflow-x: auto}.bl-punkt {
    display: inline-block; white-space: nowrap; text-decoration: none;
    padding: .35rem .7rem; border-radius: var(--radius-s); font-size: .92rem;
    color: var(--text-leise)}.bl-punkt:hover { background: var(--akzent-bg); color: var(--akzent); text-decoration: none}.bl-aktiv { background: var(--akzent-bg); color: var(--akzent); font-weight: 600}.sb-bereich-titel { padding: .2rem .6rem .5rem}.nav-stil { margin-bottom: 1rem}.nav-stil-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-top: .5rem}.nav-stil-form .feld { flex: 1; min-width: 16rem; margin: 0}
@media (max-width: 900px) {.bereichsleiste { display: none}}
/* Bereichsname in der Seitenleiste führt zur Übersicht des Bereichs */.sb-bereich-link { display: block; text-decoration: none; border-radius: var(--radius-s)}.sb-bereich-link:hover { background: var(--sb-hover, var(--flaeche)); text-decoration: none}

/* ------------------------------------------------------------------ *
 *  Rechte Kontextspalte (Navigationsart "bereiche")
 *  Links: wohin man gehen kann. Rechts: was zum offenen Punkt gehört.
 * ------------------------------------------------------------------ */.kx-titel { padding: .1rem .5rem .5rem}.kx-link { padding: .4rem .55rem; text-decoration: none; font-size: .9rem;
    border-left: 3px solid transparent}.kx-link:hover { text-decoration: none}.kx-auf { color: var(--akzent); background: var(--akzent-bg); border-left-color: var(--akzent); font-weight: 600}.kx-gruppe { padding: .8rem .5rem .3rem; margin-top: .3rem;
    border-top: 1px solid var(--rahmen)}
/* Schmale Schirme: rechte Spalte wandert unter den Inhalt */@media (max-width: 1100px) {

    .kx-titel, .kx-gruppe { flex: 1 1 100%; border-top: 0; padding-bottom: .2rem}
    .kx-link { border-left: 0; border: 1px solid var(--rahmen)}}
/* Freie Punkte (Kontakt, Problem melden) unten in der Seitenleiste */.sb-frei-block { margin-top: .8rem; padding-top: .5rem; border-top: 1px solid var(--sb-rand, var(--rahmen))}.sb-frei { display: block; padding: .35rem .6rem; font-size: .85rem; text-decoration: none;
           color: var(--sb-leise, var(--text-leise)); border-radius: var(--radius-s)}.sb-frei:hover { background: var(--sb-hover, var(--flaeche)); color: var(--sb-text, var(--text)); text-decoration: none}.sb-frei-auf { color: var(--sb-aktiv-tf, var(--akzent))}

/* ------------------------------------------------------------------ *
 *  Geräte-Tätigkeiten (Scannen, Buchen per Scan, QR)
 *  --------------------------------------------------------------------
 *  Dieselbe Seite, zwei Darstellungen – entschieden nach Bildschirmbreite,
 *  nicht nach Adresse:
 *    Handy/schmales Tablet: Vollbild ohne Menü (wie bisher der Fokus-Modus)
 *    Desktop:               normales Layout mit Menü, Arbeitsbereich gross
 *  So gibt es nur EINE Seite zu pflegen statt zwei Fassungen.
 * ------------------------------------------------------------------ */

/* --- Desktop: Arbeitsbereich hervorheben, aber Navigation behalten --- */@media (min-width: 901px) {
    .fokus-seite .inhalt { max-width: 46rem}
    .fokus-seite .scan-form,
    .fokus-seite .scan-karte,
    .fokus-seite form.karte { font-size: 1.05rem}
    /* Eingabefelder gross genug für Scanner-Eingabe und Mausbedienung */
    .fokus-seite .inhalt input[type="text"],
    .fokus-seite .inhalt input[type="search"],
    .fokus-seite .inhalt input[type="number"] {
        min-height: 2.9rem; font-size: 1.05rem}
    .fokus-seite .inhalt .btn { min-height: 2.9rem}
    .fokus-seite .btn-voll { font-size: 1.05rem}}

/* --- Handy und schmales Tablet: Vollbild, kein Chrome --- */@media (max-width: 900px) {
    body.fokus-seite .topbar, body.fokus-seite .seitenleiste, body.fokus-seite .modul-unternav, body.fokus-seite .brotkrumen, body.fokus-seite .kio-tabbar, body.fokus-seite .fuss, body.fokus-seite .testleiste { display: none}

    body.fokus-seite .shell { display: block}
    body.fokus-seite .shell-main { display: block}
    body.fokus-seite .inhalt {
        max-width: none; padding: .8rem .7rem calc(.8rem + env(safe-area-inset-bottom))}
    /* Grosse Ziele für die Bedienung mit Handschuhen */
    body.fokus-seite .inhalt input,
    body.fokus-seite .inhalt select,
    body.fokus-seite .inhalt .btn { min-height: 3rem; font-size: 1.05rem}
    body.fokus-seite .inhalt .btn-voll { width: 100%}}

/* Ausklappbare Gruppen in langen Formularen */.fg-details { border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: 0; margin: .8rem 0}.fg-details[open] { padding-bottom: .7rem}.fg-titel { cursor: pointer; padding: .6rem .8rem; font-weight: 600; font-size: .95rem; list-style: none}.fg-titel::-webkit-details-marker { display: none}.fg-titel::before { content: "\25B8"; margin-right: .45rem; color: var(--text-leise); font-size: .8em; display: inline-block}.fg-details[open] > .fg-titel::before { transform: rotate(90deg)}.fg-titel:hover { background: var(--flaeche-2)}.fg-details > *:not(.fg-titel) { padding-left: .8rem; padding-right: .8rem}

/* --- Weitere Aktionen hinter "···" ---------------------------------------- */.akt-mehr { position: relative; display: inline-block}.akt-mehr-knopf { min-width: 2.4rem; font-size: 1.1rem; line-height: 1}
/* WICHTIG: hidden muss gewinnen. Ohne diese Zeile hebelt das display unten
   das hidden-Attribut aus und das Menue steht dauerhaft offen. */.akt-panel[hidden] { display: none !important}.akt-panel {
    position: absolute; right: 0; top: calc(100% + .25rem); z-index: 30;
    min-width: 12rem; padding: .35rem;
    background: var(--flaeche); border: 1px solid var(--rahmen);
    border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.14);
    display: flex; flex-direction: column; gap: .15rem}.akt-panel > .btn, .akt-panel form > .btn {
    display: block; width: 100%; text-align: left; border: 0; background: none;
    padding: .5rem .6rem; min-height: 2.4rem; border-radius: var(--radius-s)}.akt-panel > .btn:hover, .akt-panel form > .btn:hover { background: var(--flaeche-2)}.akt-panel form { display: block; width: 100%; margin: 0}
/* Löschen abgesetzt am Ende, damit es nicht neben Speichern liegt */.akt-panel .btn-gefahr { color: var(--gefahr); margin-top: .2rem; border-top: 1px solid var(--rahmen)}

/* Absicherung: Elemente mit dem hidden-Attribut bleiben verborgen, auch wenn
   sie sonst ein eigenes display haben. Ohne diese Regel steht z.B. ein
   Aufklappmenue dauerhaft offen. */.akt-panel[hidden], .rt-blatt[hidden], .mn-form[hidden], .mn-zeile[hidden] { display: none !important}

/* ------------------------------------------------------------------ *
 *  Startseite – ruhigere Darstellung
 * ------------------------------------------------------------------ */
/* Kennzahlen: weniger fett, mehr Luft */

/* Handlungsbedarf: dezent statt flächig farbig – nur ein Streifen links */.dash-box {
    border-left: 4px solid var(--rahmen)}.dash-box:hover { background: var(--flaeche-2); text-decoration: none}.dash-box.dash-gefahr { border-left-color: var(--gefahr)}.dash-box.dash-warn   { border-left-color: var(--warn)}.dash-box.dash-info   { border-left-color: var(--akzent)}.dash-box-wert { font-weight: 600}

/* Bereiche als grosse Einstiege */.dash-bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin: .4rem 0 1.4rem}.dash-bereich {
    display: flex; flex-direction: column; gap: .2rem; justify-content: center;
    min-height: 4.6rem; padding: .9rem 1rem; text-decoration: none;
    color: var(--text); transition: border-color .12s, background .12s}.dash-bereich:hover { background: var(--akzent-bg); text-decoration: none}.dash-bereich-titel { font-weight: 600; font-size: 1rem}

/* ------------------------------------------------------------------ *
 *  Tabellen mit Eingabefeldern (z. B. Auftragsstatus verwalten)
 *  --------------------------------------------------------------------
 *  KORREKTUR: Mein erster Versuch machte die Tabelle zu einem Block
 *  (display:block) – dabei rechnen Kopfzeile und Inhalt als ZWEI getrennte
 *  Tabellen, die Spalten passen nicht mehr zusammen und Felder scheinen
 *  Inhalt zu verdecken. Die Tabelle bleibt jetzt eine Tabelle.
 *
 *  Stattdessen: Zellen mit Eingabefeldern dürfen umbrechen, die Felder
 *  füllen ihre Spalte und laufen nicht darüber hinaus.
 * ------------------------------------------------------------------ */
/* Zellen, die ein Eingabefeld enthalten, brauchen kein nowrap –
   sonst zwingen sie die Spalte unnötig breit. */.tabelle td:has(input), .tabelle td:has(select), .tabelle td:has(textarea) {
    white-space: normal}
/* Felder füllen ihre Spalte, ragen aber nie darüber hinaus. */.tabelle td input[type="text"],
.tabelle td input[type="search"],
.tabelle td select,
.tabelle td textarea {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box}.tabelle td input[type="number"] { width: 100%; max-width: 6rem; min-width: 0}
/* Kopfzellen dürfen umbrechen, sonst zwingen lange Titel die Spalten breit. */.tabelle thead th { white-space: normal; line-height: 1.25}
/* Reicht die Breite trotzdem nicht, scrollt die Karte seitlich –
   die Tabelle selbst bleibt dabei intakt. */.karte:has(> table.tabelle) { overflow-x: auto}

/* --- Produktionsplanung: Haken "erledigt" + Druckansicht ------------------ */

/* Wochenplan drucken: nur die Tafel, ohne Menü und Farben.
   In der Halle hängt kein Bildschirm – der Ausdruck ist das Arbeitsmittel. */@media print {
    .topbar, .bereichsleiste, .seitenleiste, .modul-unternav, .brotkrumen, .fuss, .kio-tabbar, .testleiste, .flash-bereich, .seiten-kopf.mit-aktion > span { display: none !important}

    body, .shell, .shell-main, .inhalt { display: block !important; overflow: visible !important; height: auto !important}
    .inhalt { max-width: none}

    

    

    

    @page { size: landscape; margin: 10mm; }}
/* Produktionsplanung: Menge auf der Karte + Auslastung der Zelle */
/* Produktionsplanung: gesperrte Tage */
/* Produktionsplanung: Material und Bestand auf der Karte */

/* ------------------------------------------------------------------ *
 *  Personal & Zeit
 * ------------------------------------------------------------------ */
@keyframes pz-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
/* Personal: Mitarbeiter-Übersicht */
/* Rechte: Klartext und Vorschau */.rechte-erklaerung { display: flex; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--rahmen); font-size: .92rem}.rechte-erklaerung:last-child { border-bottom: 0}.rechte-erklaerung strong { flex: 0 0 11rem}.rechte-erklaerung span { color: var(--text-leise)}.rechte-vorschau { padding: .4rem 0; border-bottom: 1px solid var(--rahmen)}.rechte-vorschau:last-child { border-bottom: 0}.rechte-vorschau > summary { cursor: pointer}
@media (max-width: 700px) {.rechte-erklaerung { flex-direction: column; gap: .15rem}}
/* Rechtevergabe als Baum */.rz-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem}.rz-filter { display: flex; align-items: center; gap: .35rem; font-size: .85rem; white-space: nowrap}.rz-baum { border: 1px solid var(--rahmen); border-radius: var(--radius-s); overflow: hidden}.rz-bereich { border-bottom: 1px solid var(--rahmen)}.rz-bereich:last-child { border-bottom: 0}.rz-bereich[hidden], .rz-zeile[hidden] { display: none !important}.rz-zeile { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; flex-wrap: wrap}.rz-haupt { background: var(--flaeche-2)}.rz-kind { border-top: 1px solid var(--rahmen); font-size: .9rem}.rz-kind.rz-ist-abw { background: var(--warn-bg)}.rz-klapp, .rz-klapp-leer { width: 1.5rem; flex: 0 0 auto}.rz-klapp { border: 0; background: none; cursor: pointer; color: var(--text-leise); font-size: .85rem; line-height: 1}.rz-klapp:hover { color: var(--akzent)}.rz-titel { font-weight: 600}.rz-kind .rz-titel { font-weight: 400}.rz-abw { font-size: .72rem; background: var(--warn-bg); color: var(--warn); border-radius: 999px; padding: 0 .45rem}.rz-wahl { margin-left: auto; max-width: 11rem; min-height: 2.1rem; padding: .25rem .5rem}.rz-summe { margin-top: .5rem}.rz-vorlagen { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
               padding: .5rem .6rem; margin-bottom: .6rem; background: var(--akzent-bg); border-radius: var(--radius-s)}.rz-vorlage-akt { display: flex; gap: .4rem; flex-wrap: wrap}.rv-wahl { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem}
/* Produktionsplanung: eingeteilte Personen auf der Karte */
/* Produktionsplanung: Bilanzzeile Bedarf gegen eingeteilte Leute */
/* Einsatzplan aus Personensicht */
/* Team der ganzen Karte gegenüber Leuten nur für diesen Tag */
/* Modulverwaltung */.mod-zeile { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
             padding: .6rem .2rem; border-bottom: 1px solid var(--rahmen)}.mod-zeile:last-of-type { border-bottom: 0}.mod-zeile.mod-warn { background: var(--warn-bg)}.mod-schalter { display: flex; align-items: center; gap: .5rem; min-width: 15rem; cursor: pointer}.mod-name { font-weight: 600}.mod-meta { font-size: .8rem; color: var(--text-leise)}.mod-fehlt { font-size: .8rem; color: var(--gefahr); font-weight: 600; margin-left: auto}

/* ------------------------------------------------------------------ *
 *  Zeiterfassung fürs Handy (/personal/heute)
 *  Grosse Tippflächen, 16px-Felder gegen das iOS-Zoomen, eine Spalte.
 * ------------------------------------------------------------------ */

/* Kein iOS-Zoom beim Antippen: 16px ist die Schwelle. */

/* ------------------------------------------------------------------ *
 *  Handy-Modus
 *  Kein Menü, keine Seitenleiste – die untere Leiste ist die gesamte
 *  Navigation. Alles auf Daumenbedienung ausgelegt.
 * ------------------------------------------------------------------ */

/* Untere Leiste im Handy-Modus: gleichmässig verteilt, ohne Symbole. */

/* Im Handy-Modus ist die Leiste auch auf breiten Bildschirmen sichtbar –
   man kann den Modus am Computer prüfen. */

/* ------------------------------------------------------------------ *
 *  Handy-Modus
 *  Feste Kopfzeile mit Rückweg, Inhalt dazwischen, Leiste unten.
 *  Alles auf Daumenbedienung: 3 rem Tippflächen, 16px Schrift in Feldern.
 * ------------------------------------------------------------------ */

/* Kopfzeile: links zurück, Mitte Titel, rechts Konto. */

/* Startseite: erste Aufgabe hervorgehoben, Rest ruhig. */

/* Knöpfe: volle Breite, 3,2 rem hoch. */

/* Eingaben: 16px verhindert das Hineinzoomen auf iOS. */

/* Bestätigung. */

/* Karte mit Angaben zum gescannten Gegenstand. */

/* Untere Leiste. */

/* Im Handy-Modus bleibt die Leiste auch auf breiten Bildschirmen sichtbar,
   damit man den Modus am Computer prüfen kann. */

/* Auftragssuche im Handy-Modus */

/* Foto-Seite im Handy-Modus */

/* Reklamationsfotos im Handy-Modus */
/* Startseite: Ausstiege unten, sichtbar statt versteckt hinter einem Symbol */

/* Reklamation: Hinweis auf bereits Erfasstes */
/* Reklamationsfotos am Computer */
/* Hallenzugang */.ha-seite { padding-top: 1rem}.ha-titel { font-size: 1.3rem; margin: .5rem 0 1.2rem}.ha-hinweis { font-size: .85rem; color: var(--text-leise); margin-top: 1rem}.ha-kachel { display: flex; align-items: center; gap: .5rem; padding: .45rem 0}.ha-warn { color: var(--warn); font-size: .8rem}
/* Protokoll */.au-filter { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap}form.karte.au-filter > .feld { margin: 0}.au-filter input, .au-filter select { height: 2.75rem; box-sizing: border-box}.au-filter-aktion { display: flex; gap: .5rem}.au-tabelle { font-size: .9rem}.au-zeit { white-space: nowrap; color: var(--text-leise)}.au-art { font-family: monospace; font-size: .82rem; background: var(--flaeche-2);
          padding: .1rem .4rem; border-radius: var(--radius-s)}.au-detail { color: var(--text-leise)}.au-putz { margin-top: 1.5rem; display: flex; gap: 1rem; align-items: flex-end}
/* Passwort-Seiten */.pw-seite { max-width: 26rem; margin: 2rem auto}.pw-fuss { margin-top: 1rem}
/* Kontoseite */.ko-karte { max-width: 34rem; margin-bottom: 1.2rem}.ko-karte h2 { font-size: 1.05rem; margin: 0 0 .8rem}
/* Systemübersicht */.sy-gruppe { font-size: 1rem; color: var(--text-leise); margin: 1.6rem 0 .7rem}.sy-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem}.sy-kachel { display: block; padding: .9rem; border: 1px solid var(--rahmen); border-radius: var(--radius);
             background: var(--flaeche-2); text-decoration: none; color: var(--text)}.sy-kachel:hover { border-color: var(--akzent)}.sy-kachel strong { display: block}.sy-kachel small { display: block; font-size: .82rem; color: var(--text-leise); margin: .2rem 0 .4rem}.sy-kachel code { font-size: .74rem; color: var(--text-leise)}.sy-demo { max-width: 40rem}.sy-demo-an { border-left: 4px solid var(--warn)}.sy-demo-liste { margin: .5rem 0 1rem 1.2rem; font-size: .9rem}

/* Mitarbeiterliste: Fähigkeiten unter dem Namen, damit die Tabelle nicht
   seitlich scrollen muss. */

/* Die Tabelle bleibt bei Bedarf scrollbar, aber sie ist jetzt schmaler. */
/* Handbuch */.hi-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem}.hi-kachel { display: block; padding: 1rem; border: 1px solid var(--rahmen); border-radius: var(--radius);
             background: var(--flaeche-2); text-decoration: none; color: var(--text)}.hi-kachel:hover { border-color: var(--akzent)}.hi-kachel strong { display: block; margin-bottom: .3rem}.hi-kachel small { color: var(--text-leise)}.hi-text { max-width: 52rem; line-height: 1.6}.hi-text h2 { margin-top: 2rem; font-size: 1.15rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rahmen)}.hi-text ul { margin-left: 1.2rem}.hi-text li { margin-bottom: .4rem}.hi-bild { margin: 1rem 0; padding: .8rem; background: var(--flaeche-2);
           border: 1px solid var(--rahmen); border-radius: var(--radius); overflow-x: auto}.hi-bild img { display: block; max-width: 100%; height: auto}.ok-tf { color: var(--ok); font-weight: 600}.warn-tf { color: var(--warn); font-weight: 600}
/* Audit 15.10.2026: Sprunglink (nur beim Tabben sichtbar) und
   Navigations-Checkbox am PC aus der Tab-Reihenfolge nehmen (dort gibt es
   keinen sichtbaren Schalter, der Fokus verschwand sonst unsichtbar). */
.sprunglink { position: absolute; left: 8px; top: -60px; z-index: 1000; padding: 8px 14px;
    background: var(--akzent); color: var(--akzent-ink); border-radius: var(--radius-s); text-decoration: none; font-weight: 600}
.sprunglink:focus { top: 8px}
@media (min-width: 769px) { .nav-check { display: none} }
main[tabindex="-1"]:focus { outline: none}

/* Selbsttest (Administration › System, Installer): Ampel je Prüfung */
.st-liste { list-style: none; margin: .8rem 0; padding: 0}
.st-liste li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--rahmen)}
.st-liste li:last-child { border-bottom: 0}
.st-punkt { flex: none; width: .9rem; height: .9rem; margin-top: .25rem; border-radius: 50%; background: var(--text-leise)}
.st-ok .st-punkt { background: var(--ok)}
.st-fehler .st-punkt { background: var(--gefahr)}
.st-stand { font-size: .8rem; color: var(--text-leise); white-space: nowrap}
.st-fehler .st-stand { color: var(--gefahr); font-weight: 600}
.st-gesamt { font-weight: 600; padding: .6rem .8rem; border-radius: var(--radius-s); border-left: 4px solid var(--text-leise); background: var(--flaeche-2)}
.st-gesamt.st-ok { border-left-color: var(--ok)}
.st-gesamt.st-fehler { border-left-color: var(--gefahr); color: var(--gefahr)}
.st-gesamt small { font-weight: 400; color: var(--text-leise); margin-left: .5rem}

/* Code in einem Block (z. B. Cron-Befehl auf der Sicherungsseite): ohne die
   helle Inline-Hinterlegung, sonst helle Schrift auf hellem Grund. */
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit}
/* Plattform (SaaS): Betriebsanzeige in der ROOT-Leiste, Einladungslink, aktuelle Zeile */.testleiste-betrieb { color: inherit; text-decoration: none; white-space: nowrap; opacity: .92}.testleiste-betrieb:hover { text-decoration: underline}.testleiste-betrieb strong { color: #f0c14b}.pl-link { width: 100%; font-family: monospace; font-size: .85rem}.pl-tabelle tr.pl-aktuell td { background: var(--flaeche-2)}.pl-logo { margin-top: 1.5rem}.pl-name { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem}.pl-kuerzel { display: block; font-size: .82rem; color: var(--text-leise); margin-top: .15rem}.pl-tabelle + .karte, .tabelle-huelle + #neu { margin-top: 1.5rem}@media (max-width: 640px) {.pl-tabelle td:first-child { display: block; text-align: left}.pl-tabelle td:first-child::before { display: none}.pl-tabelle .aktionen { justify-content: flex-start}}
/* Warnende Hinweise (Grenze erreicht, endgültiges Löschen): rot statt blau */.hinweis.hinweis-fehler, .hinweis.hinweis-gefahr { background: var(--gefahr-bg); color: var(--gefahr)}.hinweis.hinweis-fehler svg, .hinweis.hinweis-gefahr svg { color: var(--gefahr)}.ex-liste { margin: .2rem 0 1rem 1.1rem; padding: 0; line-height: 1.6}.adm-tarif { margin: 0 0 1.2rem}