/* ============================================================================
   Seitenwerkzeuge — wiederverwendbares Modul
   ----------------------------------------------------------------------------
   TEIL A  Die Werkzeugleiste am rechten Rand (Barrierefreiheit, Teilen,
           Nach oben) und das Barrierefreiheits-Panel.
   TEIL B  Die Nutzer-Anpassungen (Kontrast, Textgroesse, Abstaende ...).

   Alles ist opt-in: Solange niemand etwas einstellt, veraendert diese Datei
   das Aussehen der Seite nicht.

   VORAUSSETZUNG fuer die Textvergroesserung:
   Das Projekt muss Schriftgroessen in rem oder em angeben. Bei festen
   px-Werten hat die Vergroesserung keine Wirkung.

   KEIN :root-Block hier. Das Modul definiert seine Variablen bewusst nicht,
   sondern liest sie mit Ausweichwert. Stuende hier ein :root-Block, wuerde er
   die Projektfarben ueberschreiben, sobald diese Datei nach dem Projekt-CSS
   geladen wird - und genau das ist die empfohlene Reihenfolge.

   Anpassen im Projekt-CSS:
     :root {
       --a11y-akzent: #d5001c;        Knoepfe, aktive Zustaende
       --a11y-akzent-hover: #a80016;
       --a11y-auf-akzent: #ffffff;    Schrift auf der Akzentflaeche
       --a11y-panel-grund: #ffffff;
       --a11y-panel-text: #1a1a1a;
       --a11y-panel-linie: #dcdcdc;
       --a11y-radius: 10px;

       --wz-abstand: 24px;            Abstand der Leiste zum rechten Rand
       --wz-groesse: 40px;            Kantenlaenge eines Knopfes
       --wz-groesse-mobil: 38px;
       --wz-luecke: 6px;              Abstand zwischen den Knoepfen
       --wz-unten: 24px;              nur bei position 'unten'
       --wz-grund: #1a1a1a;           Knopfflaeche im Ruhezustand
       --wz-auf-grund: #ffffff;
       --wz-oben-mobil: 80px;         Abstand von oben auf schmalen Schirmen
     }

   PLATZ FREIHALTEN:
   Die Leiste liegt ueber dem Inhalt. Breite Elemente, die bis an den
   Fensterrand reichen - eine grosse Wortmarke, eine Bildergalerie, eine
   Zeile in Vollbreite - laufen sonst darunter. Solche Elemente sollten den
   Bereich aussparen:

     :root { --wz-platz: 96px; }   (Abstand + Knopfgroesse + Luft)

     .grosse-wortmarke {
       font-size: calc(min(100vw - 48px - var(--wz-platz), var(--wrap)) / 6.6);
     }

   Das Modul kann das nicht selbst uebernehmen, weil es nicht weiss, welche
   Elemente betroffen sind. Es lohnt der Blick bei jeder Seite, die etwas
   ueber die volle Breite setzt.
   ============================================================================ */

/* Traegt die Textvergroesserung. Wirkt nur bei rem/em im Projekt. */
html { font-size: calc(100% * var(--user-font-scale, 1)); }

/* ============================================================================
   TEIL A1 — Werkzeugleiste
   ============================================================================ */

.wz {
  position: fixed;
  z-index: 9970;
  right: var(--wz-abstand, 24px);
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--wz-luecke, 6px);
  transform: translateY(-50%);
}
/* Zweite Lage: unten statt vertikal mittig.
   Ueber window.WERKZEUGE.position = 'unten' zu setzen. */
.wz--unten {
  top: auto;
  bottom: var(--wz-unten, 24px);
  transform: none;
}
@media print { .wz { display: none; } }

.wz-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--wz-groesse, 40px);
  height: var(--wz-groesse, 40px);
  padding: 0;
  color: var(--wz-auf-grund, #fff);
  background: var(--wz-grund, #1a1a1a);
  border: 0;
  border-radius: var(--a11y-radius, 10px);
  /* Haelt die Knoepfe auch dann lesbar, wenn sie ueber einer Flaeche
     aehnlicher Farbe liegen - etwa einem farbigen Fussbereich. */
  box-shadow: 0 1px 8px rgba(0, 0, 0, .22);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wz-btn svg { width: 18px; height: 18px; display: block; }
.wz-btn:hover { background: var(--a11y-akzent, #1a1a1a); }
.wz-btn:focus-visible {
  outline: 2px solid var(--a11y-akzent, #1a1a1a);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .wz-btn { transition: background-color .18s ease, opacity .22s ease, transform .22s ease; }
}

/* Barrierefreiheit traegt als einziger Knopf dauerhaft die Akzentfarbe:
   Sie ist der Einstieg fuer Menschen, die sie brauchen, und muss auffindbar
   sein, ohne dass man die Leiste absucht. */
.wz-btn--a11y { background: var(--a11y-akzent, #1a1a1a); }
.wz-btn--a11y:hover { background: var(--a11y-akzent-hover, #000); }
.wz-btn--a11y svg { width: 21px; height: 21px; }

/* Link kopieren: Haken erscheint nach dem Kopieren */
.wz-btn--kopieren .wz-ico--haken { display: none; }
.wz-btn--kopieren.ist-kopiert .wz-ico { display: none; }
.wz-btn--kopieren.ist-kopiert .wz-ico--haken { display: block; }
.wz-btn--kopieren.ist-kopiert { background: var(--a11y-akzent, #1a1a1a); }
.wz-ico { display: grid; place-items: center; }

/* Rueckmeldung fuer Screenreader, optisch nicht vorhanden */
.wz-meldung {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Nach oben: belegt seinen Platz dauerhaft, damit die Leiste beim
   Ein- und Ausblenden nicht springt. */
.wz-btn--hoch {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}
.wz-btn--hoch.ist-da {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Der Sammel-Knopf fuer die System-Teilen-Funktion ist am Rechner unnoetig,
   dort stehen die einzelnen Dienste zur Verfuegung. */
.wz-btn--teilen { display: none; }

/* Auf schmalen Schirmen naeher an den Rand, kleiner, und vor allem kuerzer:
   Sechs Knoepfe verdecken auf einem Smartphone zu viel vom Inhalt. Kennt das
   Geraet die System-Teilen-Funktion, ersetzt ein Knopf die vier einzelnen.
   Aus sechs Knoepfen werden drei. */
@media (max-width: 680px) {
  .wz {
    /* Oben statt mittig: In der Mitte laege die Leiste quer im Lesefluss.
       Oben rechts ist auf den meisten Seiten die ruhigste Ecke. */
    top: var(--wz-oben-mobil, 80px);
    right: var(--wz-abstand-mobil, 12px);
    gap: var(--wz-luecke-mobil, 5px);
    transform: none;
  }
  /* Muss nach der .wz-Regel stehen: sonst waeren top und bottom gleichzeitig
     gesetzt und die Leiste wuerde ueber die ganze Fensterhoehe gestreckt. */
  .wz--unten {
    top: auto;
    bottom: var(--wz-unten-mobil, 16px);
  }
  .wz-btn {
    width: var(--wz-groesse-mobil, 38px);
    height: var(--wz-groesse-mobil, 38px);
  }
  .wz--teilen-nativ .wz-btn--teilen { display: grid; }
  .wz--teilen-nativ .wz-btn--mail,
  .wz--teilen-nativ .wz-btn--whatsapp,
  .wz--teilen-nativ .wz-btn--facebook,
  .wz--teilen-nativ .wz-btn--kopieren { display: none; }
}

/* Sehr niedrige Fenster, etwa Smartphone im Querformat: Die Leiste darf den
   Bildschirm nicht ausfuellen. Dann nur noch Barrierefreiheit und Nach oben. */
@media (max-height: 480px) {
  .wz-btn--mail,
  .wz-btn--whatsapp,
  .wz-btn--facebook,
  .wz-btn--kopieren,
  .wz-btn--teilen { display: none; }
}

/* ============================================================================
   TEIL A2 — Barrierefreiheits-Panel
   ============================================================================ */

/* --- Ueberleger: absichtlich durchsichtig ---
   Der Inhalt muss scharf sichtbar bleiben, damit man die Wirkung der
   Einstellungen sofort sieht. Der Ueberleger faengt nur Klicks zum
   Schliessen ab. */
.a11y-scrim {
  position: fixed;
  inset: 0;
  z-index: 9980;
  background: transparent;
}
.a11y-scrim[hidden] { display: none; }
html.a11y-open, html.a11y-open body { overflow: hidden; }

/* --- Panel --- */
.a11y-panel:focus { outline: none; }
.a11y-panel {
  position: fixed;
  z-index: 9990;
  right: clamp(.6rem, 2vw, 1.2rem);
  top: 50%;
  width: min(360px, 92vw);
  max-height: min(88svh, 660px);
  padding: 0 1.4rem 1.6rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--a11y-panel-text, #1a1a1a);
  background: var(--a11y-panel-grund, #fff);
  border-radius: var(--a11y-radius, 10px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1.5;
}
.a11y-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .a11y-panel { animation: a11y-auf .26s ease; }
}
@keyframes a11y-auf { from { opacity: 0; transform: translate(10px, -50%); } }

.a11y-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0 .8rem;
  background: var(--a11y-panel-grund, #fff);
  border-bottom: 1px solid var(--a11y-panel-linie, #dcdcdc);
}
.a11y-head h2 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.a11y-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.a11y-close svg { width: 20px; height: 20px; }
.a11y-close:hover { background: rgba(0, 0, 0, .06); }

.a11y-intro { margin: .9rem 0 1.1rem; font-size: .88rem; opacity: .78; }
.a11y-section {
  margin: 1.4rem 0 .5rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  /* .8 statt .6: kleine Versalien brauchen 4,5:1 Kontrast (WCAG 1.4.3) */
  opacity: .8;
}

/* --- Segmentschalter (Kontrast) --- */
.a11y-group { padding: .7rem 0; border-top: 1px solid var(--a11y-panel-linie, #dcdcdc); }
.a11y-glabel { display: block; margin-bottom: .5rem; font-size: .95rem; }
.a11y-seg { display: flex; gap: 6px; }
.a11y-seg button {
  flex: 1;
  padding: .5rem .3rem;
  color: inherit;
  background: none;
  border: 1px solid var(--a11y-panel-linie, #dcdcdc);
  border-radius: 7px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.a11y-seg button[aria-pressed="true"] {
  color: var(--a11y-auf-akzent, #fff);
  background: var(--a11y-akzent, #1a1a1a);
  border-color: var(--a11y-akzent, #1a1a1a);
}

/* --- Schalter --- */
.a11y-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .75rem .1rem;
  color: inherit;
  background: none;
  border: 0;
  border-top: 1px solid var(--a11y-panel-linie, #dcdcdc);
  font: inherit;
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
}
.a11y-knob {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  background: var(--a11y-panel-linie, #dcdcdc);
  border-radius: 13px;
}
.a11y-knob::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.a11y-switch[aria-checked="true"] .a11y-knob { background: var(--a11y-akzent, #1a1a1a); }
.a11y-switch[aria-checked="true"] .a11y-knob::after { left: 21px; }
@media (prefers-reduced-motion: no-preference) {
  .a11y-knob, .a11y-knob::after { transition: background-color .16s ease, left .16s ease; }
}

/* --- Stufenregler --- */
.a11y-step { padding: .7rem 0; border-top: 1px solid var(--a11y-panel-linie, #dcdcdc); }
.a11y-step__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.a11y-mini {
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  font-size: .78rem;
  opacity: .8;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.a11y-mini:hover { opacity: 1; }
.a11y-stepper { display: flex; align-items: center; gap: 8px; margin-top: .5rem; }
.a11y-pm {
  width: 44px;
  height: 40px;
  color: inherit;
  background: none;
  border: 1px solid var(--a11y-panel-linie, #dcdcdc);
  border-radius: 7px;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.a11y-pm:hover:not([disabled]) { border-color: var(--a11y-akzent, #1a1a1a); }
.a11y-pm[disabled] { opacity: .35; cursor: default; }
.a11y-readout { flex: 1; text-align: center; font-size: .9rem; font-variant-numeric: tabular-nums; }

.a11y-reset {
  width: 100%;
  margin-top: 1.4rem;
  padding: .7rem;
  color: inherit;
  background: none;
  border: 1px solid var(--a11y-panel-linie, #dcdcdc);
  border-radius: 7px;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
.a11y-reset:hover { border-color: var(--a11y-akzent, #1a1a1a); }

.a11y-panel :focus-visible,
.wz-btn:focus-visible { outline-offset: 3px; }

/* ============================================================================
   TEIL B — Nutzer-Anpassungen
   Alle nur aktiv, wenn am <html> das passende Attribut gesetzt ist.
   ============================================================================ */

/* --- Zeilenabstand ---
   Die Werte liegen bewusst ueber dem, was Projekte ueblicherweise setzen
   (1.4 bis 1.65). Waere Stufe 1 gleich 1.6, passierte in vielen Projekten
   beim ersten Druck auf Plus schlicht nichts. */
html[data-a11y-line="1"] :is(p, li, dd, dt, address, blockquote, figcaption, h1, h2, h3, h4) { line-height: 1.75 !important; }
html[data-a11y-line="2"] :is(p, li, dd, dt, address, blockquote, figcaption, h1, h2, h3, h4) { line-height: 2.05 !important; }
html[data-a11y-line="3"] :is(p, li, dd, dt, address, blockquote, figcaption, h1, h2, h3, h4) { line-height: 2.4 !important; }

/* --- Umbruch bei vergroesserter Schrift oder weiterem Abstand ---
   Lange Woerter (Gemeindebrief-Gestaltung, Veranstaltungskalender) trennen
   und notfalls umbrechen, auch in Rastern und Flex-Zeilen: overflow-wrap
   anywhere zaehlt anders als break-word bei der Mindestbreite mit, sonst
   werden Spalten so breit wie ihr laengstes Wort und laufen ueber den Rand.
   Im Normalzustand bleibt der Satz des Projekts unveraendert. */
:is(html[style*="--user-font-scale"], html[data-a11y-spacing], html[data-a11y-legible]) body {
  hyphens: auto;
  overflow-wrap: anywhere;
}
/* Adressen nie trennen: Das Skript verkleinert sie, wenn sie nicht in
   ihren Behaelter passen (gemessen am tatsaechlichen Platz). */
:is(html[style*="--user-font-scale"], html[data-a11y-spacing], html[data-a11y-legible]) .wz-adresse {
  white-space: nowrap;
  overflow-wrap: normal;
  hyphens: none;
}

/* --- Textabstand (WCAG 1.4.12) --- */
html[data-a11y-spacing="1"] :is(p, li, dd, address, blockquote) { word-spacing: .08em !important; letter-spacing: .03em !important; }
html[data-a11y-spacing="2"] :is(p, li, dd, address, blockquote) { word-spacing: .16em !important; letter-spacing: .07em !important; }
html[data-a11y-spacing="3"] :is(p, li, dd, address, blockquote) { word-spacing: .28em !important; letter-spacing: .12em !important; }

/* --- Gut lesbare Schrift ---
   Atkinson Hyperlegible waere ideal, wuerde aber eine Schriftdatei erfordern.
   Deshalb ein System-Stack mit weiten Formen und klaren Ziffern. */
html[data-a11y-legible] body,
html[data-a11y-legible] :is(h1, h2, h3, h4, p, li, a, button, input, label, td, th) {
  font-family: Verdana, "DejaVu Sans", Tahoma, sans-serif !important;
  font-feature-settings: normal;
}

/* --- Bilder ausblenden ---
   Ersetzt Bilder durch eine ruhige Flaeche, damit das Layout nicht springt.
   !important, weil sich diese Einstellung mit der Graustufen-Regel des
   Schwarz-Weiss-Modus ueberschneidet: Ausblenden muss dann gewinnen. */
html[data-a11y-images="hide"] :is(img, picture, video, svg:not(.wz svg):not(.a11y-panel svg)) {
  visibility: hidden;
}
html[data-a11y-images="hide"] :is(img, picture, video) {
  background: rgba(128, 128, 128, .14);
  visibility: visible;
  filter: opacity(0) !important;
}

/* Der Alternativtext tritt an die Stelle des Bildes. Das Skript setzt ihn nur
   dort ein, wo er nicht leer ist - rein dekorative Bilder bleiben stumm,
   sonst entstuenden Kaesten ohne Inhalt. */
.a11y-alt {
  display: block;
  max-width: 62ch;
  margin: .5rem 0 1rem;
  padding: .7rem .9rem;
  font-size: .85em;
  line-height: 1.45;
  opacity: .85;
  border-left: 3px solid currentColor;
}
.a11y-alt::before {
  content: "Bild: ";
  font-weight: 600;
}
/* Bilder in Rahmen mit festem Format (aspect-ratio, feste Hoehe, overflow
   hidden) wuerden den Alternativtext abschneiden. Der Rahmen gibt deshalb
   sein Format auf, das leere Bild schrumpft auf einen Streifen, der Text
   steht darunter in voller Laenge – bei jeder Schriftgroesse. */
html[data-a11y-images="hide"] :has(> .a11y-alt) {
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
html[data-a11y-images="hide"] :has(> .a11y-alt) > :is(img, picture) {
  height: 2.5rem !important;
  min-height: 0 !important;
}

/* --- Links und Schaltflaechen hervorheben ---
   Einzeleigenschaften statt der Kurzform: text-decoration wuerde die
   Strichstaerke wieder auf "auto" setzen, der Effekt bliebe unsichtbar,
   wenn der Link ohnehin schon unterstrichen ist. */
html[data-a11y-highlight] a:not([class*="a11y-"]) {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}
html[data-a11y-highlight] :is(button:not([class*="a11y-"]), [role="button"]) {
  outline: 2px dashed currentColor;
  outline-offset: 3px;
}
/* Bildflaechen, Banner und Kacheln sind ebenfalls Schaltflaechen. Bei ihnen
   greift eine Unterstreichung nicht, weil die Flaeche und nicht der Text
   angeklickt wird. Sie brauchen einen sichtbaren Umriss. */
html[data-a11y-highlight] a:has(:is(img, picture, video, svg)) {
  outline: 2px dashed currentColor;
  outline-offset: 3px;
}

/* --- Bewegung reduzieren --- */
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
/* Seitenwechsel-Animationen (View Transitions, etwa Astro ClientRouter)
   haengen an Pseudo-Elementen, die der *-Selektor nicht erfasst. */
html[data-a11y-motion="reduce"]::view-transition-group(*),
html[data-a11y-motion="reduce"]::view-transition-old(*),
html[data-a11y-motion="reduce"]::view-transition-new(*) {
  animation: none !important;
}

/* --- Fokus hervorheben --- */
html[data-a11y-focus] :focus-visible {
  outline: 4px solid var(--a11y-akzent, #1a1a1a) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

/* --- Kontrast: verstaerkt --- */
html[data-a11y-contrast="more"] body {
  color: #000;
  background: #fff;
}
html[data-a11y-contrast="more"] :is(p, li, dd, dt, span, address, figcaption, small, cite) { color: #1a1a1a; }
html[data-a11y-contrast="more"] :is(h1, h2, h3, h4) { color: #000; }
html[data-a11y-contrast="more"] a:not([class*="a11y-"]):not([class*="wz-"]) {
  color: #00309e;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Kontrast: schwarz auf weiss ---
   Definition: keine Farbe, nirgends. Text schwarz auf weiss, dunkle Flaechen
   schwarz mit weisser Schrift, Flaechen und Rahmen ohne Toenung, dafuer mit
   schwarzer Kontur, Symbole und Bilder in Graustufen. Die Farbregeln allein
   erwischen nur Text; Flaechen, Rahmen, Grafiken und Inline-Farben aus dem
   Projekt bleiben sonst bunt. Deshalb zusaetzlich ein Graustufenfilter auf
   alle Bereiche der Seite – ausser der eigenen Leiste und dem Panel, die
   ihren Kontrast ueber die Variablen selbst regeln (ein Filter auf ihnen
   wuerde ausserdem ihre feste Position stoeren). */
html[data-a11y-contrast="bw"] body { color: #000; background: #fff; }
html[data-a11y-contrast="bw"] body > :not(.wz, .a11y-panel, .a11y-scrim, .a11y-cursor, .a11y-guide, :has(> .wz)) {
  filter: grayscale(1);
}
/* Alle Texte schwarz – geringe Spezifitaet, damit dunkle Flaechen
   ([data-a11y-dark] und Projektregeln) ihre weisse Schrift behalten */
html[data-a11y-contrast="bw"] body :where(*):not(svg *) { color: #000; }
/* Getoente Flaechen werden ueber den Filter zu hellem Grau, vorhandene
   Rahmen schwarz: Die Gliederung haengt danach an der Kontur statt an der
   Farbe. Transparente Rahmen bleiben unsichtbar. */
html[data-a11y-contrast="bw"] body :where(*):not([class*="border-transparent"]) { border-color: #000; }
html[data-a11y-contrast="bw"] :is(p, li, dd, dt, span, address, figcaption, small, cite, h1, h2, h3, h4, th, td) {
  color: #000;
  background: transparent;
}
html[data-a11y-contrast="bw"] a:not([class*="a11y-"]):not([class*="wz-"]) {
  color: #000;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html[data-a11y-contrast="bw"] :focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* Schwarz-Weiss heisst schwarz-weiss. Bunte Bilder in einer sonst
   entfaerbten Seite stehen als Farbinseln da und stoeren genau die
   Reizreduktion, wegen der jemand diesen Modus einschaltet.
   Leichte Kontrastanhebung, weil Graustufen sonst flau wirken. */
html[data-a11y-contrast="bw"] :is(img, picture, video, iframe, canvas) {
  filter: grayscale(1) contrast(1.08);
}
/* Farbige Flaechen aus dem Projekt ebenfalls entfaerben */
html[data-a11y-contrast="bw"] [style*="background-image"] { filter: grayscale(1); }

/* --- Dunkle Flaechen bei erhoehtem Kontrast ---
   Konvention: Jede dunkle Flaeche im Projekt bekommt data-a11y-dark.
   Ohne diese Markierung wuerde dunkler Text auf dunklem Grund verschwinden.
   Beispiel: <footer class="site-footer" data-a11y-dark> */
html[data-a11y-contrast="more"] [data-a11y-dark],
html[data-a11y-contrast="bw"] [data-a11y-dark] {
  color: #fff;
  background: #000;
}
html[data-a11y-contrast="more"] [data-a11y-dark] :is(p, li, span, dd, dt, address, small, cite, h1, h2, h3, h4),
html[data-a11y-contrast="bw"] [data-a11y-dark] :is(p, li, span, dd, dt, address, small, cite, h1, h2, h3, h4) {
  color: #fff;
}
/* :not([class*="wz-"]) auch hier, damit diese Regeln genauso spezifisch
   sind wie die allgemeinen Linkregeln oben und als spaetere gewinnen. Dazu
   Links und Knoepfe, die selbst die dunkle Flaeche sind (Sprunglink). */
html[data-a11y-contrast="more"] [data-a11y-dark] a:not([class*="a11y-"]):not([class*="wz-"]),
html[data-a11y-contrast="bw"] [data-a11y-dark] a:not([class*="a11y-"]):not([class*="wz-"]),
html[data-a11y-contrast="more"] [data-a11y-dark] button:not([class*="a11y-"]):not([class*="wz-"]),
html[data-a11y-contrast="bw"] [data-a11y-dark] button:not([class*="a11y-"]):not([class*="wz-"]),
html[data-a11y-contrast="more"] a[data-a11y-dark]:not([class*="a11y-"]):not([class*="wz-"]),
html[data-a11y-contrast="bw"] a[data-a11y-dark]:not([class*="a11y-"]):not([class*="wz-"]),
html[data-a11y-contrast="more"] button[data-a11y-dark]:not([class*="a11y-"]):not([class*="wz-"]),
html[data-a11y-contrast="bw"] button[data-a11y-dark]:not([class*="a11y-"]):not([class*="wz-"]) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Jeder Text auf dunkler Flaeche weiss – nicht nur die aufgezaehlten
   Elemente oben (strong, b, em, a in Absaetzen …). Spezifischer als die
   allgemeinen Kontrastregeln, helle Inseln ausgenommen. */
html[data-a11y-contrast="more"] [data-a11y-dark] :where(*):not(svg *):not([data-a11y-light]):not([data-a11y-light] *),
html[data-a11y-contrast="bw"] [data-a11y-dark] :where(*):not(svg *):not([data-a11y-light]):not([data-a11y-light] *) {
  color: #fff;
}

/* Helle Inseln in dunklen Flaechen (vom Skript erkannt): weiss, Schrift
   schwarz – sonst wuerde die weisse Schrift der dunklen Flaeche auf der
   hellen Insel verschwinden. Spezifischer als die Regeln oben. */
html[data-a11y-contrast="more"] [data-a11y-dark] [data-a11y-light],
html[data-a11y-contrast="bw"] [data-a11y-dark] [data-a11y-light],
html[data-a11y-contrast="more"] [data-a11y-dark] [data-a11y-light]:is(a, button):not([class*="a11y-"]):not([class*="wz-"]),
html[data-a11y-contrast="bw"] [data-a11y-dark] [data-a11y-light]:is(a, button):not([class*="a11y-"]):not([class*="wz-"]),
html[data-a11y-contrast="more"] [data-a11y-dark] [data-a11y-light] *,
html[data-a11y-contrast="bw"] [data-a11y-dark] [data-a11y-light] * {
  color: #000;
  background-color: #fff;
}
html[data-a11y-contrast="bw"] .wz-btn { border: 2px solid #fff; }
/* Im Schwarz-Weiss-Modus entfaerbt sich auch die eigene Bedienoberflaeche.
   Sonst bleibt ausgerechnet der Knopf, mit dem dieser Modus gewaehlt wird,
   die einzige Farbflaeche der Seite. Alle Akzentflaechen laufen ueber die
   Variable, daher genuegt ein zentraler Override. */
/* :root zusaetzlich, damit diese Werte auch dann gewinnen, wenn ein
   Projekt die Farben ueber html:root oder :root anpasst. */
html[data-a11y-contrast="bw"]:root {
  --a11y-akzent: #000;
  --a11y-akzent-hover: #000;
  --a11y-auf-akzent: #fff;
  --a11y-panel-grund: #fff;
  --a11y-panel-text: #000;
  --a11y-panel-linie: #000;
  --wz-grund: #000;
  --wz-auf-grund: #fff;
}
/* Die eigenen Knopf-Icons behalten in JEDEM Kontrastmodus die helle Farbe des
   Knopfs. Sonst faerben die allgemeinen Inhaltsregeln (Link- und span-Regel)
   die Icons schwarz auf schwarzem Grund - der Knopf sieht dann leer aus. */
html[data-a11y-contrast="bw"] .wz-btn,
html[data-a11y-contrast="bw"] .wz-btn *,
html[data-a11y-contrast="more"] .wz-btn,
html[data-a11y-contrast="more"] .wz-btn * {
  color: var(--wz-auf-grund, #fff);
}

/* --- Zeigerhilfen --- */
.a11y-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9960;
  width: 56px;
  height: 56px;
  border: 3px solid var(--a11y-akzent, #1a1a1a);
  border-radius: 50%;
  background: rgba(128, 128, 128, .18);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 2px 10px rgba(0, 0, 0, .3);
  pointer-events: none;
  will-change: transform;
}
.a11y-guide {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9955;
  height: 46px;
  background: transparent;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .58);
  pointer-events: none;
  will-change: transform;
}
@media print { .a11y-cursor, .a11y-guide { display: none; } }

/* --- System-Hochkontrast (Windows und andere) --- */
@media (forced-colors: active) {
  .wz-btn, .a11y-panel, .a11y-seg button, .a11y-pm, .a11y-reset { border: 1px solid; }
  :focus-visible { outline: 2px solid; outline-offset: 2px; }
}