.kachel           { border-radius: 12px}.btn:active       { transform: translateY(1px)}

/* --- 2) Untere Tab-Leiste ---------------------------------------------- */.kio-tabbar { display: none}

@media (max-width: 768px) {.kio-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--flaeche);
        border-top: 1px solid var(--rahmen);
        box-shadow: 0 -2px 10px rgba(20, 30, 45, .06);
        padding-bottom: env(safe-area-inset-bottom, 0)}.kio-tabbar a, .kio-tabbar label {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        padding: .5rem .15rem .55rem; min-height: 48px;
        font-size: .68rem; line-height: 1.1; text-align: center;
        color: var(--text-leise); text-decoration: none;
        background: none; border: none; cursor: pointer; position: relative;
        -webkit-tap-highlight-color: transparent}.kio-tabbar svg { width: 22px; height: 22px; display: block}.kio-tabbar a span, .kio-tabbar label span {
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}.kio-tabbar .ist { color: var(--akzent)}.kio-tabbar .ist::before {
        content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
        border-radius: 0 0 3px 3px; background: var(--akzent)}.kio-tabbar a:active, .kio-tabbar label:active { background: var(--flaeche-2)}

    /* Platz schaffen, damit Inhalt/Fuss nicht hinter der Leiste verschwinden */body.app { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0))}

    /* Topbar auf Mobile schlank halten – Konto/Abmelden wandern ins Menü ("Mehr"),
       der Topbar-Hamburger entfällt (übernimmt "Mehr"). Verhindert den Überlauf. */.topbar { flex-wrap: wrap}.topbar .nav-toggle, .topbar form.inline { display: none}.sb-konto {
        display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
        margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--sb-rand, var(--rahmen))}.sb-konto-name { display: flex; flex-direction: column; line-height: 1.2; font-size: .92rem; color: var(--sb-text, var(--text)); flex: 1 1 auto; min-width: 0}.sb-konto-name small { color: var(--sb-leise, var(--text-leise)); font-size: .78rem}.sb-konto .btn { flex: 0 0 auto}}

/* --- 3) Touch-First (Mobile) ------------------------------------------- */@media (max-width: 768px) {
    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 {
        min-height: 2.85rem; padding: .65rem .75rem;
        font-size: 16px;            /* verhindert Auto-Zoom auf iOS */
        border-radius: 8px}
    .btn { min-height: 2.85rem; padding: .72rem 1.05rem}

    
    }

/* --- 4) Tabellen als Karten (per JS markiert: class="kio-karten") ------ */@media (max-width: 640px) {
    table.kio-karten { border: none; box-shadow: none; background: none; width: 100%}
    table.kio-karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0)}
    table.kio-karten, table.kio-karten tbody, table.kio-karten tr, table.kio-karten td { display: block; width: auto}
    table.kio-karten tr {
        background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 12px;
        padding: .55rem .85rem; margin-bottom: .6rem; box-shadow: var(--schatten)}
    table.kio-karten td {
        display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
        border: none; padding: .32rem 0; text-align: right}
    table.kio-karten td::before {
        content: attr(data-label); color: var(--text-leise); font-weight: 600;
        text-align: left; flex: 0 0 auto}
    table.kio-karten td:empty { display: none}
    table.kio-karten td[data-label=""]::before { display: none}}

/* --- Labor-Messprotokoll: Becken als aufklappbare, farbige Blöcke ------- */.lab-akkordeon-leiste { display: flex; gap: .5rem; margin-bottom: .7rem; flex-wrap: wrap}

/* Petrol-Akzentkante je Becken-Karte */.lab-karte { border-left: 4px solid var(--akzent)}

/* Becken-Kopf: petrol getönt, klickbar */.lab-karte > summary.lab-karte-kopf {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .6rem; margin-bottom: .45rem;
    background: var(--akzent-bg); border-radius: var(--radius-s)}.lab-karte > summary::-webkit-details-marker { display: none}.lab-karte > summary:hover { filter: brightness(.98)}.lab-karte > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px}.lab-karte-titel { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 1.02rem; color: var(--akzent-tf)}.lab-karte-kopf .bez { display: inline; margin: 0; font-weight: 400; color: var(--text-leise); font-size: .85rem}

/* Füllstand als farbige Status-Pille */.lab-karte-meta {
    flex: 0 0 auto; padding: .12rem .55rem; border-radius: 20px;
    font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums;
    background: var(--flaeche); color: var(--text-leise); border: 1px solid var(--rahmen)}.lab-karte-meta.stand-teil { background: var(--warn-bg); color: var(--warn); border-color: transparent}.lab-karte-meta.stand-voll { background: var(--ok-bg);   color: var(--ok);   border-color: transparent}

/* Chevron (petrol) */.lab-karte-kopf::after {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-left: .1rem;
    border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent);
    transform: rotate(45deg); transition: transform .15s}.lab-karte[open] > summary.lab-karte-kopf::after { transform: rotate(-135deg)}

/* --- Menüpunkte, die der Admin auf Mobile ausgeblendet hat ------------- */@media (max-width: 768px) {
    .sb-nav .menu-mobil-aus { display: none !important}}

/* --- Kosten je m² (Rechner) -------------------------------------------- */

/* --- Auftragsliste (gespeicherte Kalkulationen) ----------------------- */

/* --- Auftrag: Vorlage-Aktion ------------------------------------------ */

/* --- Touch-Ziele: Knöpfe auf Mobile mindestens 44px hoch ------------------ */@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center}
    .stamm-akt .btn { padding: .55rem .8rem}
    /* Scan-Tab leicht hervorheben (häufigster mobiler Einstieg) */
    .kio-tabbar .kio-tab-scan svg { width: 26px; height: 26px}}

/* --- Testleiste (Rollenwechsel): überall einklappbar, zu Beginn zu -------- */.tl-details { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: .6rem; align-items: center; min-width: 0}.tl-summary { list-style: none; display: inline-flex; align-items: center; min-width: 0}.tl-summary::-webkit-details-marker { display: none}
@media (min-width: 769px) {
    /* Auch am PC einklappbar (22.09.2026): zu Beginn zu, Klick klappt auf. */.tl-summary { cursor: pointer; padding: .15rem 0}.tl-summary::after { content: "▾"; margin-left: .4rem; opacity: .7}.tl-details[open] .tl-summary::after { content: "▴"}}
@media (max-width: 768px) {.testleiste-inner { padding: .3rem .6rem; gap: .4rem}.tl-details { display: block}.tl-summary { cursor: pointer; width: 100%; font-size: .78rem; padding: .15rem 0; -webkit-tap-highlight-color: transparent}.tl-summary::after { content: "▾"; margin-left: .4rem; color: inherit; opacity: .7}.tl-details[open] .tl-summary::after { content: "▴"}.testleiste-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block}.tl-details .testleiste-wechsel { display: flex; flex-wrap: wrap; gap: .35rem; padding: .4rem 0 .2rem}.testleiste-zurueck .btn { min-height: 36px}}