/* ===========================================================================
   intervall-umschalter.css - Umschalter Woche | Monat | Jahr (assets/js/intervall-umschalter.js).
   04.11.2026 (Wochen- und Jahresabrechnung AP6, Nachbesserung nach Kritik Klarheit 1): vorher inline nur in
   pages/de/checkout.php; als eigene Datei, damit Startseite und /upgrade/ (AP7) dasselbe Aussehen und den CSS-Vertrag des
   Skripts bekommen. Einbinden nur ueber sf_asset() (?v=) und nur, wenn mehr als ein Intervall freigeschaltet ist.
   CSS-VERTRAG des Skripts: .sf-iv-aus (ausgeblendet, Hoehe bleibt) und .sf-iv-sr (nur fuer Screenreader, auch die
   Ansage-Zeile #sf-iv-ansage) muessen hier stehen. Farben ueber die Variablen der Seite mit Rueckfallwerten.
   Segment ueber die volle Breite (360 px: drei Felder je ca. 86 px), Beruehrflaeche 44 px, kein Umbruch.
   =========================================================================== */

.sf-iv { display: flex; gap: 4px; padding: 4px; background: #242424; border: 1px solid var(--input-border, #3a3a3a); border-radius: 12px; }
.sf-iv-seg { position: relative; flex: 1 1 0; min-width: 0; }
.sf-iv-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sf-iv-name { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; padding: 0 .4rem;
    border-radius: 9px; font-weight: 700; font-size: .95rem; color: var(--text-secondary, #b3b3b3); cursor: pointer; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease; }
.sf-iv-seg input:checked + .sf-iv-name { background: var(--primary, #ea4c88); color: #fff; }
.sf-iv-seg input:focus-visible + .sf-iv-name { outline: 2px solid #fff; outline-offset: 2px; }
.sf-iv-seg input:disabled + .sf-iv-name { cursor: wait; }
/* Intervall mit Restwert-Sperre: Punkt; den Grund nennt ein .sf-iv-sr-Text im Segment */
.sf-iv-gesperrt .sf-iv-name::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--error-color, #ff5252); flex: none; }
.sf-iv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-iv-ersparnis { text-align: center; font-size: .88rem; font-weight: 600; color: var(--discount-color, #4caf50); line-height: 1.4;
    transition: opacity .25s ease; }
.sf-iv-aus { opacity: 0; visibility: hidden; }

/* 04.11.2026 (AP7): Paketkarten mit Umschalter (core/paket-karten.php, sf_paket_umschalter/sf_paket_karte):
   Segment mittig ueber den Karten, Betrag in voller Groesse trotz ".sf-up-preis span", Ersparnis-Zeile unter dem
   Preis, Knoepfe und Hinweise nur eines Intervalls (sf-iv-weg) nehmen ausgeblendet keinen Platz ein. */
.sf-up-iv { max-width: 420px; margin: 0 auto 1.75rem; }
.sf-up-preis .sf-up-betrag { font-size: inherit; font-weight: inherit; color: inherit; }
.sf-up-karte .sf-up-ersparnis { margin-top: -.6rem; text-align: left; }
.sf-up-karte .sf-iv-weg.sf-iv-aus { display: none; }

@media (prefers-reduced-motion: reduce) {
    .sf-iv-name, .sf-iv-ersparnis { transition: none; }
}