/* ====================================================================
   TAB-UMSCHALTER
   --------------------------------------------------------------------
   Generisches Umschalt-Pattern zwischen zwei oder mehr Ansichten
   (z.B. Tagesansicht/Stundenplan bei Practicamos Juntos, Einsteiger/
   Wiedereinsteiger bei Einsteiger). .is-active/.is-hidden sind bewusst
   generische Zustandsklassen, per JS über data-view/data-view-panel
   gesteuert.
   ==================================================================== */
.view-tabs {
    display: flex;
    /* Sicherheitsnetz: Ohne flex-wrap würden lange Labels (z.B.
       "Wiedereinsteiger", 16 Zeichen) bei zwei Tabs nebeneinander auf
       schmalen Screens (~320-375px) den Container nicht sauber umbrechen,
       sondern horizontal überlaufen (Default bei flex ist nowrap). */
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 auto 2rem;
}

.view-tab {
    background: transparent;
    border: 1px solid #444;
    color: #ccc;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--font-size-base);
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s;
}

.view-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.view-tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #000;
    font-weight: 600;
}

.view-panel.is-hidden {
    display: none;
}

@media (max-width: 480px) {
    .view-tab {
        /* Reduziert, damit "Einsteiger" + "Wiedereinsteiger" auf sehr
           schmalen Screens eher nebeneinander passen, statt sofort auf
           flex-wrap (siehe .view-tabs oben) angewiesen zu sein - der
           Umbruch bleibt trotzdem als Sicherheitsnetz bestehen. */
        padding: 0.45rem 1rem;
        font-size: var(--font-size-sm);
    }
}