/* ---------------------------------------------------------------------------
 * 1. Fokusrahmen um Links nach dem Anklicken (Chrome, Edge)
 *
 * Bootstrap 3.3.7 im Futurio-Theme setzt für jeden Link:
 *
 *     a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
 *
 * Nachgemessen im Browser (CSS.getMatchedStylesForNode): das ist die Regel,
 * die sich durchsetzt. Bootstrap 3 stammt aus der Zeit vor `:focus-visible`,
 * deshalb greift sie auch bei reiner Mausbedienung – nicht nur, wenn jemand
 * mit der Tastatur navigiert.
 *
 * Sichtbar wird das vor allem an den Galerie-Filtern („Grundöfen“, „Herde“,
 * „Modulöfen“ …) auf /referenzen/: Elementor rendert sie als <a> ohne href,
 * aber mit role="button" und tabindex="0". Nach dem Klick behält das Element
 * den Fokus, der Rahmen bleibt also stehen, bis woanders hin geklickt wird.
 *
 * Zwei Eigenheiten von `outline-style: auto`, die beim Überschreiben zählen:
 *
 * - Die Ringfarbe kommt nicht aus der Deklaration, sondern von Chrome selbst
 *   und richtet sich nach der Textfarbe. Auf hellem Grund wirkt der Ring
 *   blau, auf dem dunklen Seitenhintergrund gelblich – gleiche Ursache.
 * - `outline-width` und `outline-offset` werden bei `auto` ignoriert; Chrome
 *   zeichnet seinen eigenen Ring. Ein Überschreiben braucht deshalb einen
 *   echten `solid`-Wert, sonst bleiben Abstand und Radius wirkungslos.
 *
 * Gelöst wird das nicht mit `outline: none` – das nähme Tastaturnutzern die
 * einzige Orientierung. Stattdessen: Ring weg bei Maus und Touch, Ring in der
 * Akzentfarbe bei Tastaturbedienung.
 * ------------------------------------------------------------------------- */

.elementor a:focus:not(:focus-visible),
.futurio-container a:focus:not(:focus-visible),
body a:focus:not(:focus-visible) {
    outline: none;
}

.elementor a:focus-visible,
.futurio-container a:focus-visible,
body a:focus-visible {
    outline: 2px solid var(--e-global-color-accent, #da5c12);
    outline-offset: 2px;
    /* Bootstrap unterstreicht Links bei :focus zusätzlich – hier unerwünscht,
       der Ring markiert den Fokus bereits deutlich genug. */
    text-decoration: none;
}

/*
 * Die Galerie-Filter sind keine echten Links, sondern Schaltflächen. Der Ring
 * folgt daher der Textzeile statt der Zellenbreite und bekommt etwas Abstand,
 * damit er nicht am Buchstaben klebt.
 */
.elementor-gallery__titles-container .elementor-gallery-title:focus:not(:focus-visible) {
    outline: none;
}

.elementor-gallery__titles-container .elementor-gallery-title:focus-visible {
    outline: 2px solid var(--e-global-color-accent, #da5c12);
    outline-offset: 3px;
    border-radius: 2px;
}