/* ============================================================
sm-a11y.css — Barrierefreiheit
Aktiv über ``; die Feineinstellungen kommen als
weitere data-Attribute und CSS-Variablen dazu (js/sm-optik.js).
── Warum der Bildfilter am hängt ──────────────────────
Gemessen am 02.08.2026: `filter` auf dem BODY erzeugt einen neuen
Bezugsrahmen und zerstört damit jedes `position: fixed` — eine fixierte
Leiste sass nach 500 px Scrollen bei -500 px statt bei 0. Am Wurzelelement
bleibt sie fixiert. Das Projekt hat rund 300 randfixierte Regeln, deshalb
ist das keine Feinheit, sondern die Bedingung dafür, dass Entfärben und
Kontrastanhebung überhaupt einsetzbar sind.
Alle Stufen laufen in EINER Deklaration zusammen (mehrere `filter`-Angaben
würden einander ersetzen statt sich zu addieren) — sm-optik.js baut die
Kette und legt sie in `--a11y-filter` ab.
── Lehren aus dem Prüflauf über alle Seiten (01.08.2026) ─────
Sie gelten unverändert, deshalb stehen sie hier:
1) `font-size: 1rem` auf Nebentexte war ZU GROSS. Die Seiten sind fast
durchgängig in px gesetzt (`.cs-panel-card-title` fest 15px), der
Nebentext wurde damit GRÖSSER als seine eigene Überschrift.
2) `--mb-border` stark abzudunkeln war falsch: das Token ist im Projekt
auch FÜLLFLÄCHE (Score-Ring, Balkenschienen). Aus feinen Führungslinien
wurden fette graue Balken. Rahmen bekommen ihren Kontrast deshalb
gezielt über `border-color` auf den Bausteinen.
3) `[class*="pulse"]` traf die HeroAI-Hervorhebung und legte sie still;
`.cs-panel-card-body a` traf Kachel-Links und malte drei zusammenhang-
lose Striche quer über die Kachel. Beide Selektoren sind zu weit.
============================================================ */
/* ══════════════════════════════════════════════════════════
BILDFILTER — Entfärben, Kontrast, Farbschwächen
══════════════════════════════════════════════════════════ */
html[data-a11y="1"] {
filter: var(--a11y-filter, none);
}
/* Der Filter erzeugt am Wurzelelement einen eigenen Zeichenbereich. Ohne
Mindesthöhe endet der bei kurzen Seiten mitten im Bild und der Rest bleibt
ungefiltert — sichtbar als harte Kante. */
html[data-a11y="1"] body {
min-height: 100vh;
}
/* Beim invertierten Modus würden Bilder und Videos als Negativ erscheinen.
Sie werden deshalb zurückgedreht — Text und Flächen bleiben invertiert. */
html[data-a11y-kontrast="invertiert"] img,
html[data-a11y-kontrast="invertiert"] video,
html[data-a11y-kontrast="invertiert"] canvas {
filter: invert(1) hue-rotate(180deg);
}
/* ══════════════════════════════════════════════════════════
VERGRÖSSERUNG — in Stufen
Als `zoom`, nicht als `font-size`. Der Grund ist gemessen und eindeutig:
das Projekt setzt 7.625 Schriftgrössen in PIXELN und nur 3 in rem. Eine
Schriftgrösse am Wurzelelement wirkt ausschliesslich auf rem/em — die
Einstellung war damit praktisch wirkungslos, egal welche Stufe.
`zoom` skaliert die Seite wie der Browser-Zoom, erreicht also auch jede
Pixelangabe. Nachgemessen: `position: fixed` bleibt dabei unangetastet
(Sidebar nach 400 px Scrollen weiterhin bei top 0), und es entsteht kein
seitliches Scrollen.
══════════════════════════════════════════════════════════ */
html[data-a11y="1"] {
zoom: var(--a11y-zoom, 1);
-webkit-text-size-adjust: 100%;
}
/* Rückfall für Engines ohne `zoom` (Firefox erst ab 126). Dort greift
wenigstens die Wurzelgrösse plus die typischen kleinen Klassen. */
@supports not (zoom: 1) {
html[data-a11y-schrift="1"] { font-size: 110%; }
html[data-a11y-schrift="2"] { font-size: 120%; }
html[data-a11y-schrift="3"] { font-size: 135%; }
html[data-a11y-schrift="4"] { font-size: 150%; }
html[data-a11y-schrift="1"] .cs-text-muted,
html[data-a11y-schrift="1"] .stat-label,
html[data-a11y-schrift="1"] .page-subtitle { font-size: 13.5px !important; }
html[data-a11y-schrift="2"] .cs-text-muted,
html[data-a11y-schrift="2"] .stat-label,
html[data-a11y-schrift="2"] .page-subtitle { font-size: 15px !important; }
html[data-a11y-schrift="3"] .cs-text-muted,
html[data-a11y-schrift="3"] .stat-label,
html[data-a11y-schrift="3"] .page-subtitle { font-size: 16.5px !important; }
html[data-a11y-schrift="4"] .cs-text-muted,
html[data-a11y-schrift="4"] .stat-label,
html[data-a11y-schrift="4"] .page-subtitle { font-size: 18px !important; }
}
/* Zeilen- und Buchstabenabstand wirken auf den Fliesstext, nicht auf
Bedienelemente — sonst brechen Werkzeugleisten und Tabellenköpfe. */
html[data-a11y="1"] p,
html[data-a11y="1"] li,
html[data-a11y="1"] .cs-panel-card-body,
html[data-a11y="1"] .panel-body,
html[data-a11y="1"] .ds-section-body {
line-height: var(--a11y-zeilen, 1.7);
letter-spacing: var(--a11y-buchstaben, normal);
}
html[data-a11y="1"] body { line-height: 1.65; }
/* ══════════════════════════════════════════════════════════
TEXTKONTRAST
══════════════════════════════════════════════════════════ */
html[data-a11y="1"] {
--mb-text-2: #3b4152;
--mb-text-3: #4b5162;
--mb-border: #dcdfea; /* bewusst nur minimal kräftiger (Lehre 2) */
--mb-border-strong: #c2c7d6;
}
html[data-theme="dark"][data-a11y="1"] {
--mb-text-2: #e2e5ee;
--mb-text-3: #c8cddc;
--mb-border: #2f3552;
--mb-border-strong: #3d446a;
}
/* Bei „hoher Kontrast" zusätzlich die Textfarben ans Maximum ziehen */
html[data-a11y-kontrast="hoch"],
html[data-a11y-kontrast="sehrhoch"] {
--mb-text: #000000;
--mb-text-2: #1a1a1a;
--mb-text-3: #2b2b2b;
}
html[data-theme="dark"][data-a11y-kontrast="hoch"],
html[data-theme="dark"][data-a11y-kontrast="sehrhoch"] {
--mb-text: #ffffff;
--mb-text-2: #f0f0f0;
--mb-text-3: #e0e0e0;
}
/* Rahmen gezielt kräftiger — NICHT über das Token (Lehre 2) */
html[data-a11y="1"] .panel,
html[data-a11y="1"] .cs-panel-card,
html[data-a11y="1"] .stat-card,
html[data-a11y="1"] .geraet-card,
html[data-a11y="1"] .team-member-card,
html[data-a11y="1"] .opt-karte,
html[data-a11y="1"] input:not([type="checkbox"]):not([type="radio"]),
html[data-a11y="1"] textarea,
html[data-a11y="1"] select {
border-color: #9aa1b8;
}
html[data-theme="dark"][data-a11y="1"] .panel,
html[data-theme="dark"][data-a11y="1"] .cs-panel-card,
html[data-theme="dark"][data-a11y="1"] .stat-card,
html[data-theme="dark"][data-a11y="1"] .geraet-card,
html[data-theme="dark"][data-a11y="1"] .opt-karte,
html[data-theme="dark"][data-a11y="1"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"][data-a11y="1"] textarea,
html[data-theme="dark"][data-a11y="1"] select {
border-color: #5a6284;
}
html[data-a11y="1"] .opt-karte:hover { border-color: #6b7391; }
/* ══════════════════════════════════════════════════════════
BEDIENUNG
══════════════════════════════════════════════════════════ */
/* Tastaturfokus — immer sichtbar, verstärkt noch deutlicher */
html[data-a11y="1"] :focus-visible {
outline: 3px solid #1d4ed8 !important;
outline-offset: 2px !important;
}
html[data-theme="dark"][data-a11y="1"] :focus-visible { outline-color: #93c5fd !important; }
html[data-a11y-fokus="1"] :focus-visible {
outline: 4px solid #1d4ed8 !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 8px rgba(29, 78, 216, .3) !important;
border-radius: 3px;
}
html[data-theme="dark"][data-a11y-fokus="1"] :focus-visible {
outline-color: #fbbf24 !important;
box-shadow: 0 0 0 8px rgba(251, 191, 36, .35) !important;
}
/* Grössere Klickflächen — nur Haupt-Bedienelemente. Symbol- und Chip-Knöpfe
bleiben unangetastet (rund 2.000 Stück), sonst brechen Zeilen und Leisten. */
html[data-a11y="1"] .cs-btn,
html[data-a11y="1"] .btn,
html[data-a11y="1"] .menu-item,
html[data-a11y="1"] .sm-sidebar__item {
padding-top: .7em;
padding-bottom: .7em;
}
html[data-a11y="1"] .smbn-item { padding-top: 10px; padding-bottom: 8px; }
/* Verweise im Fliesstext unterstreichen. NUR echter Fliesstext — Kachel-
links sind display:flex und bekämen sonst getrennte Striche (Lehre 3). */
html[data-a11y="1"] .cs-panel-card-body p a:not([class*="btn"]),
html[data-a11y="1"] .cs-panel-card-body li a:not([class*="btn"]),
html[data-a11y="1"] .ds-section-body p a:not([class*="btn"]),
html[data-a11y="1"] .ds-section-body li a:not([class*="btn"]),
html[data-a11y="1"] p a:not([class*="btn"]):not([class*="link-btn"]) {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Verweise hervorheben — deutlich stärker als die Unterstreichung oben.
Navigationselemente sind ausgenommen: dort ist der Verweischarakter
ohnehin klar, und die Hinterlegung würde die Leisten zerreissen. */
html[data-a11y-links="1"] a:not([class*="btn"]):not(.menu-item):not(.sm-sidebar__item):not(.smbn-item) {
text-decoration: underline !important;
text-underline-offset: 2px;
text-decoration-thickness: 2px !important;
background: rgba(29, 78, 216, .1);
box-shadow: 0 0 0 2px rgba(29, 78, 216, .1);
border-radius: 2px;
}
html[data-theme="dark"][data-a11y-links="1"] a:not([class*="btn"]):not(.menu-item):not(.sm-sidebar__item):not(.smbn-item) {
background: rgba(147, 197, 253, .16);
box-shadow: 0 0 0 2px rgba(147, 197, 253, .16);
}
/* Grösserer Mauszeiger. Als Data-URI, weil ein externer Verweis an der
Content-Security-Policy scheitern würde. */
html[data-a11y-cursor="1"],
html[data-a11y-cursor="1"] * {
cursor: url("data:image/svg+xml;utf8,") 4 2, auto !important;
}
html[data-a11y-cursor="1"] a,
html[data-a11y-cursor="1"] button,
html[data-a11y-cursor="1"] [role="button"],
html[data-a11y-cursor="1"] label,
html[data-a11y-cursor="1"] select {
cursor: url("data:image/svg+xml;utf8,") 4 2, pointer !important;
}
/* ══════════════════════════════════════════════════════════
BEWEGUNG UND BILDER
══════════════════════════════════════════════════════════ */
/* Ruhig stellen. Bewusst OHNE `[class*="pulse"]` — das traf die
HeroAI-Hervorhebung (Lehre 3). Ladeanzeigen laufen weiter: sie sind
Rückmeldung, keine Zierde. */
html[data-a11y="1"] .mb-hero::before,
html[data-a11y="1"] [class*="-mesh"],
html[data-a11y="1"] [class*="-glow"] {
animation: none !important;
}
html[data-a11y="1"] .cs-btn,
html[data-a11y="1"] .btn,
html[data-a11y="1"] .menu-item,
html[data-a11y="1"] .opt-karte,
html[data-a11y="1"] .stat-card {
transition-duration: .1s !important;
}
/* Bewegung anhalten — hier umfassend, weil ausdrücklich gewählt.
Ladeanzeigen bleiben ausgenommen, sonst wirkt die Seite eingefroren. */
html[data-a11y-ruhe="1"] *:not([class*="loader"]):not([class*="spinner"]):not([class*="lade"]) {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
html[data-a11y-ruhe="1"] { scroll-behavior: auto !important; }
/* Bilder ausblenden — der Platz bleibt erhalten, damit das Layout hält.
Logos und Symbole bleiben sichtbar: ohne sie wäre die Navigation blind. */
html[data-a11y-bilder="1"] img:not(.topbar-icon-svg):not([class*="logo"]):not([class*="icon"]) {
opacity: 0;
}
/* ══════════════════════════════════════════════════════════
LESEHILFE — Leseband folgt dem Zeiger
Die Position kommt aus js/sm-a11y-panel.js als --a11y-leseband.
══════════════════════════════════════════════════════════ */
#sm-leseband {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2147483000;
background:
linear-gradient(to bottom,
rgba(0, 0, 0, .55) 0,
rgba(0, 0, 0, .55) calc(var(--a11y-leseband, 50vh) - 42px),
transparent calc(var(--a11y-leseband, 50vh) - 42px),
transparent calc(var(--a11y-leseband, 50vh) + 42px),
rgba(0, 0, 0, .55) calc(var(--a11y-leseband, 50vh) + 42px),
rgba(0, 0, 0, .55) 100%);
}
@media (prefers-reduced-motion: reduce) {
html[data-a11y="1"] [class*="float"],
html[data-a11y="1"] [class*="drift"] { animation: none !important; }
}