/* Seitenrand — die Reiter ab 900 px (Schnitt H, docs/OFFEN-optik-software.md §2.3)
   Teil der Kaskade (AK 60). `#reiter-leiste` behaelt `.tab-nav`; die Reiter sind
   `.tab-btn` mit `.tab-icon` (SVG) und `.tab-label` (Wort — nie nur das Symbol, R20).
   Unter 900 px ist der Seitenrand unsichtbar, dann traegt `handy-leiste.css`. */

.tab-nav {
    flex: 0 0 232px;
    width: 232px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding: var(--ab-3) var(--ab-3) var(--ab-6);
    position: sticky;
    top: var(--kopf-hoehe);
    align-self: flex-start;
    min-height: calc(100vh - var(--kopf-hoehe));
    max-height: calc(100vh - var(--kopf-hoehe));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ab-1);
}

.rand-gruppe { display: flex; flex-direction: column; gap: var(--ab-alt-2); margin-top: var(--ab-alt-10); }
.rand-gruppe:first-child { margin-top: 0; }

.rand-gruppe-titel {
    font-size: var(--gr-alt-12);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: var(--ab-2) var(--ab-3) var(--ab-1);
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: var(--ab-3);
    min-height: 44px;
    padding: 0 var(--ab-3) 0 var(--ab-2);
    border: none;
    border-left: 4px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--gr-alt-15);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.tab-btn[hidden] { display: none; } /* W3-6: ausgeblendeter Reiter (Monteur, Riegel PVM_HEUTE offen) — `display: flex` oben schlüge sonst das Attribut */
.tab-btn:hover { background: var(--bg-surface); color: var(--text-primary); }

/* Der aktive Reiter: gelber Balken links, Tinte fett — kein gelber Block */
.tab-btn.active {
    border-left-color: var(--accent);
    background: var(--bg-page);
    color: var(--text-primary);
    font-weight: 600;
}

.tab-btn .tab-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: var(--text-muted);
}
.tab-btn .tab-icon svg { width: 24px; height: 24px; }
.tab-btn.active .tab-icon { color: var(--text-primary); }

.tab-btn .tab-label { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 899px) {
    .tab-nav { display: none; }
}