/* Segment-Schalter (FnSegmented) — wenige, sich ausschliessende Wahlmoeglichkeiten nebeneinander.

   Masse und Farben folgen der abgenommenen Vorschau des Positions-Waechters (Szene 2, `.seg`) und
   damit denselben Werten wie die beiden vorhandenen Modul-Kopien, die dieses Bauteil ersetzen soll.
   Nur Token, kein rohes Hex (Vorgabe 1g). Keine schwebende Flaeche - die Leiste sitzt IM Formular,
   deshalb --fn-bg-muted und nicht --fn-surface. */

.fn-seg {
    display: inline-flex;
    align-items: stretch;
    background: var(--fn-bg-muted);
    border: 1px solid var(--fn-border);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.fn-seg button {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 4px 10px;
    color: var(--fn-text-secondary);
    font-family: var(--fn-font);
    font-size: 11.5px;
    line-height: 18px;
    cursor: pointer;
    white-space: nowrap;
}

.fn-seg button:hover:not(:disabled):not(.on) { color: var(--fn-text); }

/* Die geltende Wahl ist gefuellt, nicht nur farbig: Bei drei Moeglichkeiten nebeneinander ist eine
   reine Textfarbe zu schwach, um auf einen Blick zu sagen, was gerade gilt. */
.fn-seg button.on {
    background: var(--fn-primary);
    color: var(--fn-on-primary);
    font-weight: var(--fn-font-weight-medium);
}

.fn-seg button:focus-visible { outline: none; box-shadow: var(--fn-focus-ring); }
.fn-seg button:disabled { opacity: .45; cursor: default; }