/*
 * Persönliche Anzeige („Mein Konto → Anzeige und Barrierefreiheit“).
 * Die Einstellungen stehen als Klassen bzw. data-Attribute am <html>-Element (siehe Anzeige.html_klassen).
 * Farben je Schema kommen aus /farben.css (wissen/farben.py).
 * Grundlage: WCAG 2.2 bzw. EN 301 549 (u. a. 1.4.1 Farbe, 1.4.3/1.4.6 Kontrast, 1.4.12 Textabstände,
 * 2.3.3 Animationen, 2.4.7/2.4.13 Fokus).
 */

/* --- Besonders gut lesbare Schrift (Atkinson Hyperlegible Next, OFL-Lizenz, liegt im Projekt) --- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-weight: 400;
  font-display: swap;
  src: url("../schrift/atkinson-hyperlegible-next-latin-400-normal.e8da57bc0c3d.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-weight: 500 700;
  font-display: swap;
  src: url("../schrift/atkinson-hyperlegible-next-latin-600-normal.9204a77cef78.woff2") format("woff2");
}
html.gut-lesbar { --schrift: "Atkinson Hyperlegible Next", "Verdana", sans-serif; }
html.gut-lesbar input, html.gut-lesbar button, html.gut-lesbar select, html.gut-lesbar textarea { font-family: var(--schrift); }

/* --- Mehr Abstand: genau die Werte aus WCAG 1.4.12 --- */
html.mehr-abstand body, html.mehr-abstand input, html.mehr-abstand textarea, html.mehr-abstand select, html.mehr-abstand button {
  line-height: 1.6 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
html.mehr-abstand p, html.mehr-abstand li { margin-bottom: 1.2em; }
html.mehr-abstand .artikeltext p, html.mehr-abstand .artikeltext li { margin-bottom: 2em; }

/* --- Links immer unterstreichen (auch bei hohem Kontrast) --- */
html.links-unterstrichen a:not(.knopf):not(.kachel):not(.navigation__link):not(.kopf__marke):not(.kopf__link),
html[data-farbschema^="kontrast"] a:not(.knopf):not(.kachel):not(.navigation__link):not(.kopf__marke):not(.kopf__link) {
  text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em;
}
html.links-unterstrichen .navigation__link, html[data-farbschema^="kontrast"] .navigation__link { text-decoration: underline; text-underline-offset: 0.18em; }

/* --- Deutliche Fokusmarkierung (WCAG 2.4.13): dicker Rahmen in zwei Farben, auf jedem Hintergrund sichtbar --- */
html.fokus-deutlich :focus-visible,
html[data-farbschema^="kontrast"] :focus-visible {
  outline: 4px solid var(--text) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px var(--flaeche) !important;
}
/* In der farbigen Kopfzeile: Rahmen in deren Schriftfarbe */
html.fokus-deutlich .kopf__knopf:focus-visible,
html[data-farbschema^="kontrast"] .kopf__knopf:focus-visible {
  outline-color: var(--kopf-text) !important;
  box-shadow: inset 0 0 0 2px var(--kopf-text) !important;
}

/* --- Bewegungen reduzieren: persönlich oder wie im System eingestellt (WCAG 2.3.3) --- */
html.ohne-bewegung *, html.ohne-bewegung *::before, html.ohne-bewegung *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* --- Hoher Kontrast: Ränder statt Flächen, keine Schatten --- */
html[data-farbschema^="kontrast"] .karte,
html[data-farbschema^="kontrast"] .kachel,
html[data-farbschema^="kontrast"] .knopf,
html[data-farbschema^="kontrast"] .hinweisband,
html[data-farbschema^="kontrast"] .kennzeichen,
html[data-farbschema^="kontrast"] .glocke__feld,
html[data-farbschema^="kontrast"] .vorschlaege,
html[data-farbschema^="kontrast"] .amtkarte { border: 2px solid var(--linie) !important; box-shadow: none !important; }
html[data-farbschema^="kontrast"] .kopf { border-bottom-width: 2px; }
html[data-farbschema^="kontrast"] .knopf--haupt { border-color: var(--text) !important; }
html[data-farbschema^="kontrast"] .navigation__link[aria-current="page"] { outline: 2px solid var(--text); outline-offset: -2px; }

/* --- Farbschwäche: Hinweise zusätzlich mit Symbol, nicht nur über die Farbe (WCAG 1.4.1) --- */
html[data-farbschwaeche="rot_gruen"] .hinweisband--gut::before,
html[data-farbschwaeche="blau_gelb"] .hinweisband--gut::before { content: "✓" / ""; font-weight: 700; }
html[data-farbschwaeche="rot_gruen"] .hinweisband--fehler::before,
html[data-farbschwaeche="blau_gelb"] .hinweisband--fehler::before { content: "✕" / ""; font-weight: 700; }
html[data-farbschwaeche="rot_gruen"] .termin--wichtig .termin__datum,
html[data-farbschwaeche="blau_gelb"] .termin--wichtig .termin__datum { outline: 3px dashed currentColor; outline-offset: -3px; }

/* --- Windows-Kontrastdesigns (erzwungene Farben): Bedienelemente bleiben erkennbar --- */
@media (forced-colors: active) {
  .knopf, .eingabe, .kachel, .karte, .glocke__feld, .vorschlaege, .hinweisband, .kennzeichen,
  .kopf__knopf, .amtkarte, .kopf .profil { border: 1px solid CanvasText; }
  .kopf { border-bottom: 1px solid CanvasText; }
  .knopf--haupt { border-width: 2px; }
  :focus-visible { outline: 3px solid Highlight !important; }
  .kopf__gehirn svg, .glocke__symbol svg, .kopf__lupe { forced-color-adjust: auto; }
  .glocke__zahl, .kennzeichen--zahl { border: 1px solid CanvasText; }
  .kopf__link--aktiv, .glocke[open] > .kopf__knopf { box-shadow: inset 0 -3px 0 CanvasText; }
}

/* Fokus nicht verdecken (WCAG 2.4.11): Platz für unten klebende Leisten */
html:has(.rollenleiste) { scroll-padding-bottom: 140px; }