/*
 * Keyboard focus has to be visible.
 *
 * main.css line 482 says
 *
 *     button:focus { outline: none !important; }
 *
 * and .btn, .navbar-toggler and several dashboard controls repeat it without
 * ever putting anything back. The effect measures cleanly: tab through the
 * user area and Chrome reports outline-style "none" while :focus-visible is
 * true - the browser knows the control is focused, the page just refuses to
 * show it. Somebody navigating by keyboard cannot tell where they are.
 *
 * The blanket rule is not corrected in main.css. That file belongs to the
 * template and ships in every update, and the same three words appear in a
 * dozen more rules there; a diff in that file would be large and easy to lose
 * on the next template update.
 *
 * Instead this file - loaded after main.css, like verified-badge.css - puts
 * one ring back, and only for :focus-visible. That pseudo-class is what the
 * blanket rule was reaching for in the first place: browsers do not apply it
 * when a control is clicked with a mouse or tapped, so nothing changes for
 * pointer users, and the stray outline after a click that those rules were
 * written against does not come back.
 *
 * Two details are deliberate:
 *
 * - No :where(). It costs the selector all of its specificity, and the rule
 *   above is !important at (0,1,1). A :where() version loses that contest and
 *   changes nothing at all - measured, not assumed.
 * - Nothing here touches box-shadow. Several components carry their own, and
 *   overriding it would reshape them on focus. The ring sits outside the
 *   element instead, in its own 2px gap.
 */

a[href]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    /* Markenfarbe, damit der Ring zum Haus gehoert. */
    outline: 3px solid #452eb8 !important;
    outline-offset: 2px !important;
}

/*
 * Auf einer Flaeche in Markenfarbe waere ein Ring in Markenfarbe unsichtbar.
 * Dort traegt Dunkel den Kontrast.
 */
.btn--base:focus-visible,
.btn-primary:focus-visible,
.awu-det__btn--primary:focus-visible,
.awu-det__variant-btn--buy:focus-visible {
    outline-color: #131318 !important;
}

/*
 * Die Kopfzeile schneidet ihre Inhalte ab. Ein Ring mit Abstand nach aussen
 * verschwindet dort zur Haelfte, also sitzt er innen.
 */
.header-primary a[href]:focus-visible,
.header-primary button:focus-visible,
.navbar-toggler:focus-visible {
    outline-offset: -2px !important;
}

/* ==========================================================================
   Formularfelder: ein weicher Lichthof statt eines harten Rings
   --------------------------------------------------------------------------
   Der Ring oben ist fuer Knoepfe und Verweise richtig - fuer ein Eingabefeld
   ist er es nicht. Browser behandeln Texteingaben immer als :focus-visible,
   auch beim blossen Anklicken; ein 3px starker Aussenring erschien damit bei
   jedem Klick in ein Feld. Das sieht nach Fehlerzustand aus, und auf engen
   Layouts schiebt der Ring samt Abstand die Nachbarn.

   Hier tritt deshalb ein Lichthof an seine Stelle: ein box-shadow ohne
   eigene Ausdehnung im Layout. Er nimmt keinen Platz, verschiebt nichts und
   veraendert die Randbreite des Feldes nicht - der Rand bleibt genau der,
   den das Feld auch in Ruhe hat.

   Der Kommentar oben sagt, diese Datei fasse box-shadow nicht an. Das galt,
   solange es nur um den Ring ging; fuer Felder ist der Schatten jetzt genau
   das Mittel. Betroffen sind ausschliesslich Eingabefelder - Knoepfe,
   Verweise, Kaestchen, Schalter und Auswahlknoepfe behalten ihren Ring.

   Nicht betroffen sind auch eingebettete Zahlungsfelder: die stehen in einem
   iframe des Anbieters, und kein Selektor hier reicht hinein.
   ========================================================================== */

input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="range"], [readonly]):focus-visible,
textarea:not([readonly]):focus-visible,
select:focus-visible,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 4px rgba(69, 46, 184, 0.22) !important;
}

/*
 * Der Rand bleibt neutral.
 *
 * Das Vorlagen-Stylesheet des Verwaltungsbereichs faerbt ihn beim Fokus
 * #4634ff - ein fremdes Blau, das mit der Hausfarbe nichts zu tun hat und
 * den Lichthof doppelt. Zurueck auf den Bootstrap-Randton, den das Feld
 * auch ohne Fokus traegt.
 */
.awu-panel .form-control:focus,
.awu-panel .form-control:focus-within,
.awu-panel .form-select:focus {
    border-color: var(--bs-border-color, #dee2e6) !important;
}

/*
 * Und im Frontend dasselbe aus demselben Grund.
 *
 * Gemessen im Browser: ein Feld der Vorlage traegt in Ruhe #e9e9ef und
 * beim Fokus #532eb8 - ein gesaettigter violetter Strich, den zuletzt
 * color.php setzt. Auch .form--control ist davon betroffen; die Regel in
 * main.css, die den Rand halten soll, kommt frueher und verliert.
 *
 * #e9e9ef ist genau der Ruhewert, also faellt der Wechsel weg, statt
 * anders auszufallen. Ein einziges Auswahlfeld traegt in Ruhe #e4dff2 und
 * wird damit um vier Stufen je Kanal verschoben - unsichtbar, und der
 * Preis dafuer, dass hier keine Farbe je Bauteil geraten wird. Der Fokus
 * steht im Hof, nicht im Rand.
 */
input.form-control:focus-visible,
input.form--control:focus-visible,
textarea.form-control:focus-visible,
textarea.form--control:focus-visible,
select.form-select:focus-visible,
select.form--control:focus-visible {
    border-color: #e9e9ef !important;
}

/*
 * Ein Feld mit Fehler bleibt rot - und behaelt seinen Fokus.
 *
 * Der violette Hof wuerde die rote Meldung verwaschen, deshalb ist der Hof
 * dort selbst rot. Sichtbar bleibt beides: der Rand sagt "hier stimmt
 * etwas nicht", der Hof sagt "und hier stehst du gerade".
 */
input.is-invalid.is-invalid:focus-visible,
textarea.is-invalid.is-invalid:focus-visible,
select.is-invalid.is-invalid:focus-visible,
input[aria-invalid="true"][aria-invalid]:focus-visible,
textarea[aria-invalid="true"][aria-invalid]:focus-visible,
select[aria-invalid="true"][aria-invalid]:focus-visible {
    border-color: #b3261e !important;
    box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.22) !important;
}

.awu-panel .form-control.is-invalid:focus,
.awu-panel .form-select.is-invalid:focus {
    border-color: #b3261e !important;
}

/*
 * Gesperrt und schreibgeschuetzt sehen nicht aus wie bereit.
 *
 * Ein gesperrtes Feld kann gar keinen Fokus bekommen, deshalb steht hier
 * keine Regel dafuer. [readonly] kann ihn - und ein Feld,
 * in das niemand schreiben kann, soll auch nicht so aussehen, als koennte
 * man es. Der Tastaturfokus bleibt trotzdem erkennbar, nur leiser.
 */
input[readonly]:focus-visible,
textarea[readonly]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(107, 106, 124, 0.18) !important;
}


/*
 * Die eigenen Ablagezonen des Uploadformulars.
 *
 * Ihr Dateifeld liegt unsichtbar darueber; der Fokus waere sonst nirgends
 * zu sehen. :has(:focus-visible) traegt ihn auf die Flaeche, die man
 * tatsaechlich anschaut - und nur dann, wenn auch das Feld selbst ihn
 * zeigen wuerde, also nicht beim Mausklick.
 */
.awu-up__drop:has(:focus-visible),
.awu-stage__drop:has(:focus-visible) {
    box-shadow: 0 0 0 4px rgba(69, 46, 184, 0.22) !important;
}