/* NORDIX — Der Fokusring

   Befund A5 aus dem Audit war „der Fokusring im Menü sieht aus wie der
   Hover-Zustand". Beim Nachsehen war es größer: An zwölf Stellen stand in
   derselben Regel `:hover, :focus-visible { …dasselbe Aussehen…; outline:none }`.

   Das ist ein verbreitetes Muster und trotzdem falsch. Wer mit der Maus
   arbeitet, weiß ohnehin, wo er ist — der Zeiger steht dort. Wer mit der
   Tastatur arbeitet, hat nur diese eine Anzeige, und sie muss sich von dem
   unterscheiden, was beim bloßen Darüberfahren passiert. Sonst kann man auf
   einer Seite, über die gerade die Maus gefahren ist, nicht mehr sagen, wo der
   Tastaturfokus steht.

   Deshalb: Das Aussehen beim Überfahren bleibt überall genau wie es war — es
   ist gut und gehört zur Seite. Dazu kommt beim Tastaturfokus ein Ring, den
   Hover nirgends erzeugt. Die zwölf `outline:none` sind aus ihren Regeln
   entfernt; hier steht, was stattdessen gilt.

   ⚠ Diese Datei muss ZULETZT geladen werden. Sie gewinnt nicht über
   Spezifität — `header nav a:focus-visible` ist spezifischer als alles, was
   hier steht —, sondern nur über die Reihenfolge. Der einzige Grund, warum
   das reicht: In den Bauteil-Blättern steht jetzt gar keine `outline`-Angabe
   mehr, es gibt also nichts zu überstimmen. Käme eine zurück, wäre sie sofort
   wieder stärker. */

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

/* Der Ring folgt der Rundung des Elements von selbst. Wo ein Bauteil selbst
   schon einen orangen Rand bekommt (Karten, Wege, Rezensionen), steht der Ring
   3 px davor: zwei Linien statt einer, und genau das ist der Unterschied, den
   man sehen soll.

   Ausnahmen — beide, weil dort ein heller Grund liegt und Orange auf Orange
   verschwände: */

/* Der Absendeknopf wird beim Fokus selbst orange. */
.ksend:focus-visible{outline-color:var(--bg)}

/* Der Sprunglink liegt auf orangem Grund und hatte schon vorher seinen
   eigenen weißen Ring — der bleibt, hier steht er nur zur Vollständigkeit. */
.skiplink:focus{outline:2px solid #fff;outline-offset:2px}

/* Formularfelder tragen beim Fokus zusätzlich ihren orangen Rand. Der Ring
   sitzt außen an, ohne Abstand: Ein 3-px-Spalt zwischen Feldrand und Ring
   sähe bei einem rechteckigen Feld nach Doppelrahmen aus, während er bei einem
   Knopf richtig wirkt. */
.feld input:focus-visible,
.feld textarea:focus-visible,
.feld select:focus-visible{outline-offset:0}