/* ══════════════════════════════════════════════════════════════
   Control: Tabs
   Zentrale Tab-Navigation — Haupt-Tabs (3px) und Sub-Tabs (2px).
   Active-Status wird über die CSS-Klasse .active gesteuert —
   JS muss nur classList.add/remove('active') toggeln.
   Verwendung:
     <div class="z-tabs">                        ← Container
       <button class="z-tab active">Tab 1</button>
       <button class="z-tab">Tab 2</button>
     </div>
     <div class="z-tabs-sub">                    ← Compact Sub-Tabs
       <button class="z-tab-sub active">Sub 1</button>
       <button class="z-tab-sub">Sub 2</button>
     </div>
   ══════════════════════════════════════════════════════════════ */


/* ── Container ─────────────────────────────────────────────── */

.z-tabs {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid var(--z-border);
    margin-bottom: 2rem;
}

.z-tabs-sub {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--z-border);
    margin-bottom: 1.5rem;
}


/* ── Haupt-Tabs (3px Indikator) ────────────────────────────── */

.z-tab {
    padding: 0.75rem 0;
    font-size: 0.875rem;       /* 14px */
    font-weight: 600;
    color: var(--z-text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;        /* über den Container-Border legen */
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}

.z-tab:hover {
    color: var(--z-text);
}

.z-tab.active {
    color: var(--z-text);
    border-bottom-color: var(--z-primary);
}


/* ── Sub-Tabs (2px Indikator, kompakter) ───────────────────── */

.z-tab-sub {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;      /* 13px */
    font-weight: 600;
    color: var(--z-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}

.z-tab-sub:hover {
    color: var(--z-text);
}

.z-tab-sub.active {
    color: var(--z-primary);
    border-bottom-color: var(--z-primary);
}