/* ============================================================================
   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 {
  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;
  opacity: .6;
}

/* --- 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: .6;
  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; }

/* --- 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;
}

/* --- 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;
}

/* --- 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 --- */
html[data-a11y-contrast="bw"] body { color: #000; background: #fff; }
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;
}
html[data-a11y-contrast="more"] [data-a11y-dark] a:not([class*="a11y-"]),
html[data-a11y-contrast="bw"] [data-a11y-dark] a:not([class*="a11y-"]),
html[data-a11y-contrast="more"] [data-a11y-dark] button:not([class*="a11y-"]),
html[data-a11y-contrast="bw"] [data-a11y-dark] button:not([class*="a11y-"]) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
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. */
html[data-a11y-contrast="bw"] {
  --a11y-akzent: #000;
  --a11y-akzent-hover: #000;
}
/* 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; }
}