/* Handy-Leiste und Bogen „Mehr" — unter 900 px (Schnitt H, §2.3)
   Teil der Kaskade (AK 60). 64 px + Home-Indikator (`env(safe-area-inset-bottom)`),
   fuenf Ziele, jedes >= 44 px hoch. Der Bogen ist ein `div[hidden]` — kein `<dialog>`
   (jsdom kennt `showModal` nicht, Gate 1 H9). Kein Hover ist bedienungsrelevant. */

/* Delta-Gate 2 N-1 (Nr. 125): die Höhe der Navigation an EINEM Ort — die haftende Leiste der Schritt-Karte steht darüber (`fuehrung-karte.css`).
   `--handy-leiste-hoehe` ist die Höhe, die die Navigation unten belegt (ab 900 px: 0), `--unten-frei` der Rand für den Home-Indikator, den die Seite
   selbst noch tragen muss (unter 900 px trägt ihn die Navigation). */
:root { --handy-leiste-hoehe: 0px; --unten-frei: env(safe-area-inset-bottom, 0px); }
@media (max-width: 899px) {
    :root { --handy-leiste-hoehe: calc(64px + env(safe-area-inset-bottom)); --unten-frei: 0px; }
}

.handy-leiste {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    height: var(--handy-leiste-hoehe);
    padding: 0 var(--ab-1) env(safe-area-inset-bottom);
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

.handy-leiste .tab-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    height: 64px;
    flex-direction: column;
    justify-content: center;
    gap: var(--ab-alt-2);
    padding: var(--ab-alt-6) var(--ab-alt-2);
    border: none;
    border-top: 3px solid transparent;
    border-radius: 0;
    font-size: var(--gr-alt-12);
    font-weight: 500;
    white-space: nowrap;
}
.handy-leiste .tab-btn .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.handy-leiste .tab-btn.active { border-top-color: var(--accent); background: transparent; }
.handy-leiste .tab-btn:hover { background: transparent; }

.handy-bogen { position: fixed; inset: 0; z-index: 110; }
.handy-bogen[hidden] { display: none; }

.handy-bogen-schleier { position: absolute; inset: 0; background: rgba(17, 20, 24, 0.45); }

.handy-bogen-blatt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-card);
    border-radius: 12px 12px 0 0;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    animation: bogenAuf 200ms ease-out;
}

@keyframes bogenAuf { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.handy-bogen-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ab-1) var(--ab-1) var(--ab-2);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--ab-2);
}
.handy-bogen-kopf h2 { font-size: var(--gr-alt-17); }

.handy-bogen-schliessen { min-height: 44px; gap: var(--ab-2); }
.handy-bogen-schliessen .tab-icon svg { width: 20px; height: 20px; }

.handy-bogen-blatt .tab-btn {
    min-height: 48px;
    border-left: 4px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--gr-text);
}
.handy-bogen-blatt .tab-btn.active { border-left-color: var(--accent); background: var(--bg-page); }

/* Welle 1 (Ansicht): Konto-Handgriffe im Bogen, je ein Knopf >= 44 px (`.btn`). */
.handy-bogen-konto { display: flex; gap: var(--ab-2); margin-top: var(--ab-3); padding-top: var(--ab-3); border-top: 1px solid var(--border); }
.handy-bogen-konto .btn { flex: 1 1 0; }

@media (max-width: 899px) {
    .handy-leiste { display: flex; }
}
@media (min-width: 900px) {
    .handy-bogen { display: none; }
}
/* W4-6b (hinter PVM_ARBEITSGANG_KARTE): [Zurück zur Karte] nach dem Sprung in die Zeile des Arbeitsgangs (`fuehrung-karte-ag-rueck.js`) — Geschwister NACH dem Panel, haftet unten über der Navigation, nur bei aktivem Panel. */
.sk-ag-rueck { display: none; }
#panel-bauprotokoll.active + .sk-ag-rueck { display: block; position: fixed; left: 0; right: 0; bottom: var(--handy-leiste-hoehe, 0px); z-index: 20; padding: var(--ab-2) var(--ab-3) var(--unten-frei, 0px);
    background: var(--bg-page); border-block-start: 1px solid var(--border-feld); }
#panel-bauprotokoll.active + .sk-ag-rueck .sk-haupt { width: 100%; min-height: 56px; margin: 0; }