/* ============================================================================
   auskunft.css – kiobet 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; kiobet 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'); }

/* --- kiobet-Tokens: HELL (Vorlagen-Palette + Kontrast-Fixe) ---------------- */
:root {
    --bg:            #fbfbfc;
    --flaeche:       #ffffff;
    --flaeche-2:     #f2f4f7;
    --feld:          #ffffff;    /* Eingabefelder (Vorlage: --field) */
    --feld-ro:       #f2f4f7;    /* readonly */
    --leise-2:       #9aa1af;    /* Platzhalter/Nebensaechliches (Vorlage: --faint) */
    --text:          #1a1e29;
    --text-leise:    #666d7c;
    --rahmen:        #e6e9ef;
    --rahmen-stark:  #d3d8e0;
    --akzent:        #2f7d8f;
    --akzent-tf:     #276876;
    --akzent-bg:     #e3f1f4;
    --akzent-stark:  #245f6d;
    --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:   rgba(47,125,143,.16);
    --radius:    9px;  --radius-s: 7px;
    --radius-lg: 14px; --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: 0 6px 14px rgba(47,125,143,.25);
    --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:          #111619;
    --feld-ro:       #1d2429;
    --leise-2:       #5f6a72;
    --text:          #e4e8ea;
    --text-leise:    #909aa2;
    --rahmen:        #242c31;
    --rahmen-stark:  #353f46;
    --akzent:        #4bc2d8;
    --akzent-tf:     #63cfe2;
    --akzent-bg:     #0f2830;
    --akzent-stark:  #5fcfe2;
    --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:   rgba(75,194,216,.22);
    --schatten:   0 1px 3px rgba(0,0,0,.35);
    --schatten-l: 0 2px 12px rgba(0,0,0,.4);
    --shadow-akzent: 0 6px 14px rgba(75,194,216,.20);
}

/* --- 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:          #111619;
    --feld-ro:       #1d2429;
    --leise-2:       #5f6a72;
        --text:          #e4e8ea;
        --text-leise:    #909aa2;
        --rahmen:        #242c31;
        --rahmen-stark:  #353f46;
        --akzent:        #4bc2d8;
        --akzent-tf:     #63cfe2;
        --akzent-bg:     #0f2830;
        --akzent-stark:  #5fcfe2;
        --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:   rgba(75,194,216,.22);
        --schatten:   0 1px 3px rgba(0,0,0,.35);
        --schatten-l: 0 2px 12px rgba(0,0,0,.4);
        --shadow-akzent: 0 6px 14px rgba(75,194,216,.20);
    }
}

/* --- 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; -webkit-font-smoothing:antialiased; }
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 kiobet-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; }
.inv { border-color:var(--gefahr) !important; }
.err, .req { color:var(--gefahr); }
.err { font-size:.82em; }

/* --- Buttons ---------------------------------------------------------------- */
.btn {
    display:inline-flex; align-items:center; gap:.4rem;
    border-radius:var(--radius);
    padding:.5rem .95rem; white-space:nowrap;
    font-weight:500;
    transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
               box-shadow var(--t-base) var(--ease);
}
.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); }
.btn-gefahr { background:var(--gefahr); color:#fff; border-color:transparent; }
: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; }
.sw .track {
    width:2.4rem; height:1.3rem; border-radius:999px; background:var(--rahmen-stark);
    position:relative; transition:background var(--t-base); flex:none;
}
.sw .track::after {
    content:""; position:absolute; top:2px; left:2px;
    width:calc(1.3rem - 4px); height:calc(1.3rem - 4px); border-radius:50%;
    background:#fff; transition:transform var(--t-base);
    box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.sw input:checked + .track { background:var(--akzent); }
.sw input:checked + .track::after { transform:translateX(1.1rem); }
.sw input:focus-visible + .track { outline:2px solid var(--akzent); outline-offset:2px; }

/* --- Statuspunkt + kbd (Vorlage) --------------------------------------------- */
.stat-dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--text-leise); display:inline-block; flex:none; }
.stat-dot.ok { background:var(--ok); } .stat-dot.work { background:var(--warn); }
.stat-dot.off { background:var(--leise-2); }
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, .dash-kpi {
    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 / Tabbar (Vorlagen-Charakter: Linie statt Schatten) ----- */
.topbar { box-shadow:none; border-bottom:1px solid var(--rahmen); }
.topbar .marke, .topbar .logo { color:var(--text); font-weight:700; }
.topbar .logo { background:none; box-shadow:none; padding:0; color:var(--akzent); }
.kio-tabbar { border-top:1px solid var(--rahmen); }

/* --- 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); }
}