/*
|--------------------------------------------------------------------------
| 2026-11-06
| Author: Claude
| Neuanlage (Funnel v2, F2-4c; Sammlung F2-4, Freigabe Klaus 11:14).
| Globale Komponente Umschalter (zwei bis drei Wahlfelder in einem Rahmen),
| z. B. Laufzeit 12 / 24 Monate. Werte wie der Laufzeit-Schalter der
| Preisseite (F2-3d/F2-3g): Rahmen #2f5f9c, Fläche #0e1f3d, aktive Seite
| Verlauf #245bff → #42a8ff (gemessen an der Domainauswahl), Überblendung
| statt wandernder Markierung, Fokus sichtbar (WCAG 2.4.7).
| Markup:
|   <div class="vt-umschalter" role="radiogroup" aria-label="…">
|     <button type="button" class="vt-umschalter__wahl is-aktiv" role="radio" aria-checked="true">
|       <span>12 Monate</span><span class="vt-umschalter__klein">…</span></button> …
| Preisseite nutzt noch ihre eigenen Klassen (.vt-hosting-preise-laufzeit);
| Umstellung auf diese Komponente beim nächsten Anfassen der Preisseite.
|--------------------------------------------------------------------------
*/

.vt-umschalter {
    --vt-umschalter-a: #245bff;
    --vt-umschalter-b: #42a8ff;
    --vt-umschalter-dauer: .6s;
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid #2f5f9c;
    border-radius: 20px;
    background: #0e1f3d;
}

.vt-umschalter .vt-umschalter__wahl,
.vt-umschalter .vt-umschalter__wahl:hover,
.vt-umschalter .vt-umschalter__wahl:focus {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 6px 20px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    color: #cfe6ff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--vt-umschalter-dauer) ease;
}

.vt-umschalter .vt-umschalter__wahl::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vt-umschalter-a), var(--vt-umschalter-b));
    opacity: 0;
    transition: opacity var(--vt-umschalter-dauer) ease;
}

.vt-umschalter .vt-umschalter__wahl.is-aktiv { color: #fff; }
.vt-umschalter .vt-umschalter__wahl.is-aktiv::before { opacity: 1; }

.vt-umschalter .vt-umschalter__wahl:focus:not(:focus-visible) { outline: none; }
.vt-umschalter .vt-umschalter__wahl:focus-visible { outline: 2px solid rgb(120, 190, 255); outline-offset: 2px; }

.vt-umschalter .vt-umschalter__klein { font-size: 12px; font-weight: 400; }

@media (max-width: 480px) {
    .vt-umschalter { align-self: stretch; }
    .vt-umschalter .vt-umschalter__wahl { flex: 1 1 50%; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .vt-umschalter { --vt-umschalter-dauer: 0s; }
}