/* ============================================================
   TABS — Tab-Navigation (Buttons/Links) + Inhalte
   Struktur-Werte (Radius, Übergänge) aus bestehenden Tokens,
   die spezifischen Akzentfarben/Verläufe 1:1 vom Live-Design.
   ============================================================ */

.tabs-nav {
    display: flex;
    width: 100%;
    gap: 6px;
    margin-bottom: 15px;
    padding: 4px;
    background: rgba(20,23,30,0.9);
    border-radius: var(--radius);
    border: 1px solid var(--border-card);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}

.tabs-nav button,
.tabs-nav .tab-link {
    flex: 1;
    display: block;
    text-align: center;
    text-decoration: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-body);
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}
.tabs-nav button:hover,
.tabs-nav .tab-link:hover { background: rgba(255,255,255,0.04); color: var(--text-secondary); }

.tabs-nav button.active,
.tabs-nav .tab-link.active {
    background: linear-gradient(180deg, #2e3344, #262b3a);
    color: var(--text-primary);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.5);
}
.tabs-nav button.active::after,
.tabs-nav .tab-link.active::after {
    content: "";
    position: absolute;
    left: 25%; right: 25%;
    bottom: -4px;
    height: 2px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #4d6fff, #7fa2ff);
    box-shadow: 0 0 4px rgba(100,140,255,0.35);
}
.tabs-nav button:active,
.tabs-nav .tab-link:active { transform: scale(0.97); }

/* Datenschutz-Tab: eigener blauer Akzent (aus Live-Design) */
.tabs-nav button[data-tab="tab_privacy"] { color: #8fbaff; }
.tabs-nav button[data-tab="tab_privacy"]:hover { background: rgba(79,130,255,0.08); color: #a8c6ff; }
.tabs-nav button[data-tab="tab_privacy"].active {
    background: linear-gradient(180deg, #2a3346, #222a3a);
    color: var(--text-primary);
    box-shadow: 0 0 0 1px rgba(79,130,255,0.25), 0 4px 10px rgba(0,0,0,0.5);
}
.tabs-nav button[data-tab="tab_privacy"].active::after {
    background: linear-gradient(90deg, #4f82ff, #7fa2ff);
    box-shadow: 0 0 4px rgba(79,130,255,0.4);
}

.tabs-content { display: none; padding-top: 10px; }
.tabs-content.active { display: block; animation: tabsFadeIn 0.2s ease; }

.tabs-select {
    display: none;
    margin-bottom: 10px;
    padding: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

@keyframes tabsFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .tabs-nav    { display: none; }
    .tabs-select { display: block; }
}