/*
 * Barrierefreiheits-Layer: definiert ueberwiegend CSS-Custom-Properties (Tokens), die vom
 * Kontrastmodus und der Schriftgroessen-Einstellung ueberschrieben werden. Attribut-Schema:
 *   <html data-sa-contrast="high">      -- gesetzt von saA11y.js, orthogonal zu data-bs-theme
 *   <html data-sa-font="system|large|xlarge">  -- gesetzt von saA11y.js
 *   <html data-sa-underline="all">      -- gesetzt von saA11y.js (Option "Links unterstreichen")
 * Ladereihenfolge: nach theme.css, vor dem CSS-Isolation-Bundle (saClient.styles.css /
 * saClient.Web.styles.css) - letzteres steht als letztes im <head> und gewinnt sonst bei
 * gleicher Spezifitaet (siehe app.css:20).
 */

:root[data-sa-contrast="high"] {
    --sa-surface: #ffffff;
    --sa-strong: #000000;
    --sa-muted: #000000;
    --sa-border: #000000;
    --sa-hover-bg: #e0e0e0;
    --bs-body-color: #000000;
    --bs-body-bg: #ffffff;
    --bs-secondary-color: #000000;
    /* Bootstrap zieht die Raender von .card/.list-group-item/.form-control aus diesen beiden
       Tokens (Default #dee2e6 bzw. rgba(0,0,0,.175)) — gegen die weisse Flaeche sind das nur
       ~1.3:1. Die groessere Rahmenstaerke unten allein macht sie also nicht sichtbar. */
    --bs-border-color: #000000;
    --bs-border-color-translucent: #000000;
}

:root[data-sa-contrast="high"][data-bs-theme="dark"] {
    --sa-surface: #000000;
    --sa-strong: #ffffff;
    --sa-muted: #ffffff;
    --sa-border: #ffffff;
    --sa-hover-bg: #1f1f1f;
    --bs-body-color: #ffffff;
    --bs-body-bg: #000000;
    --bs-secondary-color: #ffffff;
    --bs-border-color: #ffffff;
    --bs-border-color-translucent: #ffffff;
}

/* Option „Links unterstreichen" (SettingsMenu → Darstellung), Attribut von saA11y.js gesetzt.
   Alleinige Steuerung des Link-Unterstrichs: ohne Attribut ist KEIN Link unterstrichen (app.css
   `a { text-decoration: none }`), bei "all" wird ausnahmslos jeder Link unterstrichen — auch
   solche, die sonst als Schaltfläche oder Menüeintrag ohne Unterstrich laufen. Wirkt unabhängig
   vom Kontrastmodus. `!important`, weil `.nav-menu-item` (app.css) sowie Bootstrap `.btn`
   `text-decoration: none` mit `!important` setzen. */
:root[data-sa-underline="all"] a {
    text-decoration: underline !important;
}

/* Sichtbarer Tastaturfokus unabhängig vom globalen Fokusring aus P6. */
:root[data-sa-contrast="high"] :focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* Ränder von Karten, Listeneinträgen und Formularelementen deutlicher sichtbar machen. */
:root[data-sa-contrast="high"] .card,
:root[data-sa-contrast="high"] .list-group-item,
:root[data-sa-contrast="high"] .form-control,
:root[data-sa-contrast="high"] .form-select,
:root[data-sa-contrast="high"] .btn {
    border-width: 2px;
}

:root[data-sa-font="large"] {
    font-size: 112.5%;
}

:root[data-sa-font="xlarge"] {
    font-size: 125%;
}

/* Stufe "System": folgt der Schriftgröße der Geräteeinstellung. Den Faktor setzt saA11y.js aus
   dem nativen Plattform-Dienst; im Browser bleibt er ungesetzt und die Regel wirkt wie 100 %. */
:root[data-sa-font="system"] {
    font-size: calc(100% * var(--sa-font-scale, 1));
}