/* ============================================================================
   auskunft.css – MessLOG im "Auskunft"-Stil (Vorlage demo.html/style.css)
   ----------------------------------------------------------------------------
   Petrol (hell) / Tuerkis (dunkel), Inter, ruhige Tiefe. Wird als LETZTE
   Schicht nach app.css + modern.css geladen und belegt deren Design-Tokens
   neu – app.css/modern.css bleiben unveraendert.
   Rueckweg: diese <link>-Zeile in views/layout.php entfernen (Original) oder
   auf appy.css zeigen lassen (blaue Alternative bleibt im Projekt liegen).
   Abweichungen von der Vorlage (bewusst):
   - Statusfarben HELL je eine Stufe dunkler (WCAG >= 4.5 auf Soft-Toenen).
   - Zusaetzlicher Auto-Modus via prefers-color-scheme (Vorlage kennt nur
     getrennte Hell-/Dunkel-Dateien; MessLOG hat Auto/Hell/Dunkel).
   ========================================================================== */

/* --- Inter (selbst gehostet, OFL – Dateien aus der Appy-Lieferung) -------- */@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2'); }

/* --- MessLOG-Tokens: HELL (Vorlagen-Palette + Kontrast-Fixe) ---------------- */:root {
    --bg:            #fbfbfc;
    --flaeche:       #ffffff;
    --flaeche-2:     #f2f4f7;
    --feld:          var(--flaeche);    /* Eingabefelder (Vorlage: --field) */
    --feld-ro:       var(--flaeche-2);    /* readonly */
    --leise-2:       var(--text-leise);    /* Platzhalter/Nebensaechliches (Vorlage: --faint) */
    --text:          #1a1e29;
    --text-leise:    #666d7c;
    --rahmen:        #e6e9ef;
    --rahmen-stark:  var(--rahmen);
    --akzent:        #2f7d8f;
    --akzent-tf:     #276876;
    --akzent-bg:     #e3f1f4;
    --akzent-stark:  var(--akzent-tf);
    --akzent-ink:    #ffffff;
    --ok:     #177a49;  --ok-bg:     #e5f4ec;   /* Fix: 4.72 statt 3.84 */
    --warn:   #96590b;  --warn-bg:   #f9f0e2;   /* Fix: 4.98 statt 3.78 */
    --gefahr: #c03050;  --gefahr-bg: #fceef1;   /* Fix: 4.93 statt 3.85 */
    --info-bg:#e6f0f7;  --info-tf:   #2b74a8;
    --ring:   var(--akzent-bg);
    --radius:    9px;  --radius-s: 7px;
    --radius-lg: calc(var(--radius) + 6px); --radius-full: 999px;
    --schrift:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --schatten:   0 1px 3px rgba(20,30,35,.06);
    --schatten-l: 0 2px 12px rgba(20,30,35,.08);
    --shadow-akzent: var(--schatten-l);
    --t-fast:120ms; --t-base:150ms; --ease:ease}

/* --- DUNKEL (Vorlage 1:1) – fest gewaehlt ---------------------------------- */:root[data-theme="dunkel"] {
    --bg:            #0d1113;
    --flaeche:       #151a1d;
    --flaeche-2:     #1d2429;
    --feld:          var(--flaeche);
    --feld-ro:       var(--flaeche-2);
    --leise-2:       var(--text-leise);
    --text:          #e4e8ea;
    --text-leise:    #909aa2;
    --rahmen:        #242c31;
    --rahmen-stark:  var(--rahmen);
    --akzent:        #4bc2d8;
    --akzent-tf:     #63cfe2;
    --akzent-bg:     #0f2830;
    --akzent-stark:  var(--akzent-tf);
    --akzent-ink:    #04222a;
    --ok:     #3fc48a;  --ok-bg:     #12251b;
    --warn:   #d99a3e;  --warn-bg:   #271f12;
    --gefahr: #f2727d;  --gefahr-bg: #2a1519;
    --info-bg:#132430;  --info-tf:   #5aa3d8;
    --ring:   var(--akzent-bg);
    --schatten:   0 1px 3px rgba(0,0,0,.35);
    --schatten-l: 0 2px 12px rgba(0,0,0,.4);
    --shadow-akzent: var(--schatten-l)}

/* --- DUNKEL automatisch (Systemeinstellung, solange kein "Hell" fest) ------ */@media (prefers-color-scheme: dark) {
    :root:not([data-theme="hell"]) {
        --bg:            #0d1113;
        --flaeche:       #151a1d;
        --flaeche-2:     #1d2429;
        --feld:          var(--flaeche);
    --feld-ro:       var(--flaeche-2);
    --leise-2:       var(--text-leise);
        --text:          #e4e8ea;
        --text-leise:    #909aa2;
        --rahmen:        #242c31;
        --rahmen-stark:  var(--rahmen);
        --akzent:        #4bc2d8;
        --akzent-tf:     #63cfe2;
        --akzent-bg:     #0f2830;
        --akzent-stark:  var(--akzent-tf);
        --akzent-ink:    #04222a;
        --ok:     #3fc48a;  --ok-bg:     #12251b;
        --warn:   #d99a3e;  --warn-bg:   #271f12;
        --gefahr: #f2727d;  --gefahr-bg: #2a1519;
        --info-bg:#132430;  --info-tf:   #5aa3d8;
        --ring:   var(--akzent-bg);
        --schatten:   0 1px 3px rgba(0,0,0,.35);
        --schatten-l: 0 2px 12px rgba(0,0,0,.4);
        --shadow-akzent: var(--schatten-l)}}

/* --- Grundlagen ------------------------------------------------------------ */html { scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce) {* { transition:none !important; animation:none !important}html { scroll-behavior:auto}}

/* --- Typografie (Vorlage: 15px-Basis, straffe Headings, 500er-Labels) ------ */body { font-size:15px}h1, h2, h3, h4 { font-weight:600; line-height:1.25; letter-spacing:-.01em}label, .feld-label { font-weight:500}a { color:var(--akzent); text-decoration:none}a:hover { text-decoration:underline}.btn:hover, .theme-wahl a:hover, .marke:hover { text-decoration:none}

/* Fokus-Stil der Vorlage: klare 2px-Kontur. */a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible {
    outline:2px solid var(--akzent);
    outline-offset:2px;
    border-radius:4px;
    box-shadow:none}

/* --- Formularelemente ELEMENTWEIT (Vorlage 1:1, auf MessLOG-Tokens) --------- */input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=search], input[type=tel],
input[type=url], select, textarea {
    font:inherit; color:var(--text); background:var(--feld);
    border:1px solid var(--rahmen); border-radius:var(--radius);
    padding:.5rem .7rem; outline:none;
    transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}input::placeholder, textarea::placeholder { color:var(--leise-2)}input:hover, select:hover, textarea:hover { border-color:var(--rahmen-stark)}input:focus, select:focus, textarea:focus {
    border-color:var(--akzent); box-shadow:0 0 0 3px var(--ring)}input[readonly] { background:var(--feld-ro); color:var(--text-leise)}input:disabled, select:disabled, textarea:disabled { opacity:.55; cursor:not-allowed}textarea { resize:vertical}select[multiple] { padding:.25rem}input[type=file] { padding:.35rem; font-size:.9em; color:var(--text-leise)}input[type=file]::file-selector-button {
    font:inherit; margin-right:.6rem; padding:.35rem .7rem; cursor:pointer;
    border:1px solid var(--rahmen); border-radius:var(--radius);
    background:var(--flaeche-2); color:var(--text)}input[type=color] { width:2.6rem; height:2.1rem; padding:2px; cursor:pointer}input[type=range] { accent-color:var(--akzent)}input[type=checkbox], input[type=radio] { accent-color:var(--akzent); width:1rem; height:1rem}.err, .req { color:var(--gefahr)}.err { font-size:.82em}

/* --- Buttons ---------------------------------------------------------------- */.btn {
    display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap}.btn:disabled { opacity:.5; cursor:not-allowed}.btn-voll { background:var(--akzent); color:var(--akzent-ink); border-color:transparent}.btn-voll:hover { background:var(--akzent-tf); box-shadow:var(--shadow-akzent)}:root[data-theme="dunkel"] .btn-gefahr { color:#1c090c}
@media (prefers-color-scheme: dark) {:root:not([data-theme="hell"]) .btn-gefahr { color:#1c090c}}

/* --- Toggle-Schalter der Vorlage (.sw – fuer Formulare nutzbar) ------------- */.sw { display:inline-flex; align-items:center; gap:.55rem; cursor:pointer}.sw input { position:absolute; opacity:0; width:0; height:0}

/* --- Statuspunkt + kbd (Vorlage) --------------------------------------------- */.stat-dot.work { background:var(--warn)}kbd {
    font-family:ui-monospace, Consolas, monospace; font-size:.75em;
    padding:.05rem .35rem; border:1px solid var(--rahmen); border-bottom-width:2px;
    border-radius:5px; background:var(--flaeche-2); color:var(--text-leise)}

/* --- Chips (Vorlagen-.fc – fuer Filter/Auswahlgruppen) ----------------------- */.chip {
    display:inline-flex; align-items:center; gap:.35rem;
    background:var(--flaeche); border:1px solid var(--rahmen);
    border-radius:var(--radius-full); padding:.32rem .8rem;
    font-size:.85rem; color:var(--text-leise); cursor:pointer}.chip:hover { border-color:var(--rahmen-stark); color:var(--text)}.chip.on { background:var(--akzent-bg); border-color:transparent; color:var(--akzent-stark); font-weight:600}

/* --- Karten / Flaechen ------------------------------------------------------ */.karte, .auth-karte, .dash-box {
    border-radius:var(--radius-lg);
    box-shadow:var(--schatten)}

/* --- Formulare --------------------------------------------------------------- */.feld input, .feld select, .feld textarea, .zu-filter, #scan-code {
    background:var(--feld);
    border-radius:var(--radius);
    transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}.feld input:hover, .feld select:hover, .feld textarea:hover { border-color:var(--rahmen-stark)}.feld input:focus, .feld select:focus, .feld textarea:focus, #scan-code:focus {
    outline:none;
    border-color:var(--akzent);
    box-shadow:0 0 0 3px var(--ring)}.topbar .marke, .topbar .logo { color:var(--text); font-weight:700}.topbar .logo { background:none; box-shadow:none; padding:0; color:var(--akzent)}

/* --- Theme-Umschalter im Chip-Stil der Vorlage (.fc) ------------------------- */.theme-wahl {
    display:inline-flex; align-items:center; gap:2px;
    padding:3px; margin-right:.5rem;
    border:1px solid var(--rahmen); border-radius:var(--radius-full);
    background:var(--flaeche)}.theme-wahl a {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:1.9rem; height:1.9rem; padding:0 .55rem;
    border-radius:var(--radius-full);
    color:var(--text-leise); text-decoration:none; font-size:.8rem;
    transition:background var(--t-base) var(--ease), color var(--t-base) var(--ease)}.theme-wahl a:hover { background:var(--flaeche-2); color:var(--text)}.theme-wahl a[aria-current="true"] {
    background:var(--akzent-bg); color:var(--akzent-stark); font-weight:600}

/* --- Dunkel-Feinschliff Bestands-Sonderfaelle -------------------------------- */:root[data-theme="dunkel"] .roh-code,
:root[data-theme="dunkel"] .etikett-notiz { background:var(--flaeche-2); color:var(--text)}
@media (prefers-color-scheme: dark) {:root:not([data-theme="hell"]) .roh-code,
    :root:not([data-theme="hell"]) .etikett-notiz { background:var(--flaeche-2); color:var(--text)}}