/**
 * A&B Badge Vergabe - Zusatz-Stylesheet fuer das Theme "A&B Schulungen"
 *
 * Diese Datei wird nur geladen, wenn das Theme "A&B Schulungen" aktiv ist
 * (siehe ABBC_Plugin::ab_theme_design_active() und den Filter
 * abbc_enable_ab_theme_design). Sie liegt hinter assets/css/frontend.css und
 * ersetzt deren neutrale Flaechen durch das A&B-eigene Tiefen-Design:
 *   Karten mit 2px Kontur, 4px Radius und Versatzschatten, die bei Hover und
 *   Tastaturfokus anheben - dazu das dunkle Design.
 *
 * Alle Selektoren bleiben einklassig: so gewinnen die Theme-Regeln
 * (.site-main .abbc-...) auf Theme-Seiten weiterhin, und die Basis wird
 * allein ueber die Ladereihenfolge ueberschrieben - ohne !important.
 */

/* ------------------------------------------------------------------ *
 * 1. Tiefenstruktur und Hovereffekte
 * ------------------------------------------------------------------ */
.abbc-account,
.abbc-backpack,
.abbc-verify,
.abbc-issuer,
.abbc-training-page,
.abbc-badges-overview,
.abbc-learning-paths-overview,
.abbc-learning-path,
.abbc-criteria,
.abbc-account-card,
.abbc-backpack-card,
.abbc-backpack-import,
.abbc-verify-card,
.abbc-issuer-card,
.abbc-issuer-badge,
.abbc-badges-overview-item,
.abbc-learning-paths-overview-item,
.abbc-learning-path-item {
    --abbc-depth-outline: #1d2327;
    --abbc-depth-shadow: 7px 7px 0 rgba(29, 35, 39, 0.18);
    --abbc-depth-shadow-hover: 11px 11px 0 rgba(29, 35, 39, 0.18);
    --abbc-depth-lift: translate(-4px, -4px);
}

.abbc-account-card,
.abbc-backpack-card,
.abbc-backpack-import,
.abbc-verify-card,
.abbc-issuer-card,
.abbc-issuer-badge,
.abbc-training-page,
.abbc-badges-overview-item,
.abbc-learning-paths-overview-item,
.abbc-learning-path-item {
    border: 2px solid var(--abbc-depth-outline);
    border-radius: 4px;
    box-shadow: var(--abbc-depth-shadow);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

/* Der Akzentrahmen der Lernpfad-Badges steht sonst hinter der Kontur zurueck. */
.abbc-path-badge {
    border-color: #2271b1;
}

/* Tastaturnutzung hebt die Karte genauso an wie die Maus. */
.abbc-account-card:focus-within,
.abbc-backpack-card:focus-within,
.abbc-backpack-import:focus-within,
.abbc-verify-card:focus-within,
.abbc-issuer-card:focus-within,
.abbc-issuer-badge:focus-within,
.abbc-badges-overview-item:focus-within,
.abbc-learning-paths-overview-item:focus-within,
.abbc-learning-path-item:focus-within {
    border-color: #2271b1;
    box-shadow: var(--abbc-depth-shadow-hover);
    transform: var(--abbc-depth-lift);
}

/* Wo der Browser es kann, hebt sich die Karte nur bei Tastaturbedienung an.
   Nach einem Mausklick in die Karte bliebe sie sonst angehoben stehen. */
@supports selector(:has(:focus-visible)) {
    .abbc-account-card:focus-within,
    .abbc-backpack-card:focus-within,
    .abbc-backpack-import:focus-within,
    .abbc-verify-card:focus-within,
    .abbc-issuer-card:focus-within,
    .abbc-issuer-badge:focus-within,
    .abbc-badges-overview-item:focus-within,
    .abbc-learning-paths-overview-item:focus-within,
    .abbc-learning-path-item:focus-within {
        border-color: var(--abbc-depth-outline);
        box-shadow: var(--abbc-depth-shadow);
        transform: none;
    }

    .abbc-account-card:has(:focus-visible),
    .abbc-backpack-card:has(:focus-visible),
    .abbc-backpack-import:has(:focus-visible),
    .abbc-verify-card:has(:focus-visible),
    .abbc-issuer-card:has(:focus-visible),
    .abbc-issuer-badge:has(:focus-visible),
    .abbc-badges-overview-item:has(:focus-visible),
    .abbc-learning-paths-overview-item:has(:focus-visible),
    .abbc-learning-path-item:has(:focus-visible) {
        border-color: #2271b1;
        box-shadow: var(--abbc-depth-shadow-hover);
        transform: var(--abbc-depth-lift);
    }
}

.abbc-button {
    border-radius: 4px;
    box-shadow: 3px 3px 0 rgba(29, 35, 39, 0.28);
    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.abbc-button:focus-visible {
    box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
    transform: translate(-1px, -1px);
}

@media (hover: hover) {
    .abbc-account-card:hover,
    .abbc-backpack-card:hover,
    .abbc-backpack-import:hover,
    .abbc-verify-card:hover,
    .abbc-issuer-card:hover,
    .abbc-issuer-badge:hover,
    .abbc-badges-overview-item:hover,
    .abbc-learning-paths-overview-item:hover,
    .abbc-learning-path-item:hover {
        border-color: #2271b1;
        box-shadow: var(--abbc-depth-shadow-hover);
        transform: var(--abbc-depth-lift);
    }

    /* Die Kartenueberschrift greift die Akzentfarbe auf, wie im Theme. */
    .abbc-badges-overview-item:hover h2,
    .abbc-learning-paths-overview-item:hover h2,
    .abbc-learning-path-item:hover h3,
    .abbc-backpack-card:hover h3 {
        color: #135e96;
    }

    .abbc-button:hover {
        box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
        transform: translate(-1px, -1px);
    }
}

/* Auf schmalen Bildschirmen faellt die Ebene flacher aus. */
@media (max-width: 700px) {
    .abbc-account-card,
    .abbc-backpack-card,
    .abbc-backpack-import,
    .abbc-verify-card,
    .abbc-issuer-card,
    .abbc-issuer-badge,
    .abbc-training-page,
    .abbc-badges-overview-item,
    .abbc-learning-paths-overview-item,
    .abbc-learning-path-item {
        --abbc-depth-shadow: 5px 5px 0 rgba(29, 35, 39, 0.18);
        --abbc-depth-shadow-hover: 7px 7px 0 rgba(29, 35, 39, 0.18);
    }
}

/* Wer weniger Bewegung wuenscht, erhaelt die Ebene ohne Animation. */
@media (prefers-reduced-motion: reduce) {
    .abbc-account-card,
    .abbc-backpack-card,
    .abbc-backpack-import,
    .abbc-verify-card,
    .abbc-issuer-card,
    .abbc-issuer-badge,
    .abbc-training-page,
    .abbc-badges-overview-item,
    .abbc-learning-paths-overview-item,
    .abbc-learning-path-item,
    .abbc-account-card:hover,
    .abbc-backpack-card:hover,
    .abbc-backpack-import:hover,
    .abbc-verify-card:hover,
    .abbc-issuer-card:hover,
    .abbc-issuer-badge:hover,
    .abbc-badges-overview-item:hover,
    .abbc-learning-paths-overview-item:hover,
    .abbc-learning-path-item:hover,
    .abbc-account-card:focus-within,
    .abbc-backpack-card:focus-within,
    .abbc-backpack-import:focus-within,
    .abbc-verify-card:focus-within,
    .abbc-issuer-card:focus-within,
    .abbc-issuer-badge:focus-within,
    .abbc-badges-overview-item:focus-within,
    .abbc-learning-paths-overview-item:focus-within,
    .abbc-learning-path-item:focus-within,
    .abbc-button,
    .abbc-button:hover,
    .abbc-button:focus-visible {
        transition: none;
        transform: none;
    }
}

/* ------------------------------------------------------------------ *
 * 2. Dunkles Design (prefers-color-scheme: dark)
 *
 * Wer sein System dunkel gestellt hat, erhaelt dieselbe Tiefenebene auf
 * dunklem Grund. Die Werte entsprechen dem Theme "A&B Schulungen" und dem
 * Plugin "Teilnehmer-Materialien": Grund #0b1c21, Karten #11282e,
 * kraeftigere Flaeche #16343b, Text #dbe9eb, Sekundaertext #a8c4c9,
 * Rahmen #274a52, Feldkante #6f8f97, Akzenttext #72aee6. Die
 * Schaltflaechenflaeche #2271b1 traegt weisse Schrift mit 5,2:1 und bleibt.
 * Alle Selektoren bleiben so flach wie ihr helles Gegenstueck, damit die
 * Theme-Regeln (.site-main .abbc-...) auf Theme-Seiten weiter gewinnen.
 * ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    /*
     * Fokusrahmen auf dunklem Grund. #005fcc aus frontend.css misst hier je
     * nach Flaeche nur 2,2 bis 2,9:1 und verfehlt die von WCAG 1.4.11
     * geforderten 3:1. #7fb3ff erreicht 6,2 bis 9,3:1. Geaendert wird nur die
     * Farbe — Staerke und Abstand bleiben, wie sie sind.
     *
     * Gelesen wird zuerst das Theme-Token --ab-focus; nur wenn das Theme
     * keines setzt, greift der Rueckfall #7fb3ff. Damit wirkt die Korrektur
     * auch unter fremden dunklen Themes, und ein Theme der Familie kann sie
     * mit einer einzigen Deklaration steuern.
     *
     * Der Wert steht ausschliesslich hier: auf hellem Grund waere er mit
     * 2,14:1 gegen Weiss selbst ein Fehler, und diese Datei laedt nur bei
     * gesetzter Designweiche.
     */
    /* Sichtbarer Fokusrahmen auf allen fokussierbaren Elementen (Familienstandard). Nur :focus-visible: so erscheint der Rahmen bei Tastaturbedienung,
    bleibt aber nach einem Mausklick oder einem per JavaScript gesetzten Fokus nicht stehen. Die :focus-Regeln als Rueckfallebene stehen am Dateiende im @supports-Block. Barrierefreiheit haengt nicht am Theme: diese Regeln stehen in der Basis. */ .abbc-account a:focus-visible,
    .abbc-account button:focus-visible,
    .abbc-account input:focus-visible,
    .abbc-account select:focus-visible,
    .abbc-account textarea:focus-visible,
    .abbc-account [tabindex]:focus-visible,
    .abbc-backpack a:focus-visible,
    .abbc-backpack button:focus-visible,
    .abbc-backpack input:focus-visible,
    .abbc-backpack select:focus-visible,
    .abbc-backpack textarea:focus-visible,
    .abbc-backpack [tabindex]:focus-visible,
    .abbc-verify a:focus-visible,
    .abbc-verify button:focus-visible,
    .abbc-verify input:focus-visible,
    .abbc-verify [tabindex]:focus-visible,
    .abbc-issuer a:focus-visible,
    .abbc-issuer button:focus-visible,
    .abbc-issuer input:focus-visible,
    .abbc-issuer [tabindex]:focus-visible,
    .abbc-training-page a:focus-visible,
    .abbc-training-page button:focus-visible,
    .abbc-training-page input:focus-visible,
    .abbc-badges-overview a:focus-visible,
    .abbc-badges-overview button:focus-visible,
    .abbc-learning-paths-overview a:focus-visible,
    .abbc-learning-paths-overview button:focus-visible,
    .abbc-learning-path a:focus-visible,
    .abbc-learning-path button:focus-visible,
    .abbc-criteria a:focus-visible,
    .abbc-criteria button:focus-visible,
    .abbc-account a:focus,
    .abbc-account button:focus,
    .abbc-account input:focus,
    .abbc-account select:focus,
    .abbc-account textarea:focus,
    .abbc-account [tabindex]:focus,
    .abbc-backpack a:focus,
    .abbc-backpack button:focus,
    .abbc-backpack input:focus,
    .abbc-backpack select:focus,
    .abbc-backpack textarea:focus,
    .abbc-backpack [tabindex]:focus,
    .abbc-verify a:focus,
    .abbc-verify button:focus,
    .abbc-verify input:focus,
    .abbc-verify [tabindex]:focus,
    .abbc-issuer a:focus,
    .abbc-issuer button:focus,
    .abbc-issuer input:focus,
    .abbc-issuer [tabindex]:focus,
    .abbc-training-page a:focus,
    .abbc-training-page button:focus,
    .abbc-training-page input:focus,
    .abbc-badges-overview a:focus,
    .abbc-badges-overview button:focus,
    .abbc-learning-paths-overview a:focus,
    .abbc-learning-paths-overview button:focus,
    .abbc-learning-path a:focus,
    .abbc-learning-path button:focus,
    .abbc-criteria a:focus,
    .abbc-criteria button:focus {
        outline-color: var(--ab-focus, #7fb3ff);
    }

    /* Grundflaeche und Text: statt #1d2327 auf hellem Grund umgekehrt. */
    .abbc-account,
    .abbc-backpack,
    .abbc-verify,
    .abbc-issuer,
    .abbc-training-page,
    .abbc-badges-overview,
    .abbc-learning-paths-overview,
    .abbc-learning-path,
    .abbc-criteria {
        color: #dbe9eb;
        background: #0b1c21;
    }

    /* Auf dunklem Grund traegt eine hellere Kontur die Tiefe, nicht der
       Schatten: das fast schwarze #1d2327 waere hier unsichtbar. */
    .abbc-account,
    .abbc-backpack,
    .abbc-verify,
    .abbc-issuer,
    .abbc-training-page,
    .abbc-badges-overview,
    .abbc-learning-paths-overview,
    .abbc-learning-path,
    .abbc-criteria,
    .abbc-account-card,
    .abbc-backpack-card,
    .abbc-backpack-import,
    .abbc-verify-card,
    .abbc-issuer-card,
    .abbc-issuer-badge,
    .abbc-badges-overview-item,
    .abbc-learning-paths-overview-item,
    .abbc-learning-path-item {
        --abbc-depth-outline: #274a52;
        --abbc-depth-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55);
        --abbc-depth-shadow-hover: 11px 11px 0 rgba(0, 0, 0, 0.55);
    }

    /* Karten und Kacheln: statt #fff die Kartenflaeche. */
    .abbc-account-card,
    .abbc-backpack-card,
    .abbc-backpack-import,
    .abbc-verify-card,
    .abbc-issuer-card,
    .abbc-issuer-badge,
    .abbc-training-page,
    .abbc-badges-overview-item,
    .abbc-learning-paths-overview-item,
    .abbc-learning-path-item {
        color: #dbe9eb;
        background: #11282e;
    }

    /* Sekundaertext: #50575e traegt auf dunklem Grund nicht. */
    .abbc-description,
    .abbc-status-detail,
    .abbc-backpack-checks span,
    .abbc-issuer-badge .abbc-issuer-dates,
    .abbc-badges-overview p,
    .abbc-learning-paths-overview p,
    .abbc-learning-path .meta,
    .abbc-criteria .meta {
        color: #a8c4c9;
    }

    /* Grosse Ersatzschrift des Banners statt #1d2327. */
    .abbc-training-provider-fallback {
        color: #dbe9eb;
    }

    /* Eingabefelder: hellere Feldkante statt #8c8f94 gegen die dunkle Flaeche. */
    .abbc-account input[type="text"],
    .abbc-account input[type="email"],
    .abbc-account input[type="password"],
    .abbc-backpack input[type="text"],
    .abbc-backpack input[type="email"],
    .abbc-backpack input[type="file"] {
        color: #dbe9eb;
        background: #11282e;
        border: 1px solid #6f8f97;
    }

    /* Fokusumriss: #005fcc verschwindet auf #0b1c21, der Akzentton traegt. */
    .abbc-account a:focus-visible,
    .abbc-account button:focus-visible,
    .abbc-account input:focus-visible,
    .abbc-account select:focus-visible,
    .abbc-account textarea:focus-visible,
    .abbc-backpack a:focus-visible,
    .abbc-backpack button:focus-visible,
    .abbc-backpack input:focus-visible,
    .abbc-backpack select:focus-visible,
    .abbc-backpack textarea:focus-visible,
    .abbc-verify a:focus-visible,
    .abbc-verify button:focus-visible,
    .abbc-verify input:focus-visible,
    .abbc-issuer a:focus-visible,
    .abbc-issuer button:focus-visible,
    .abbc-issuer input:focus-visible,
    .abbc-training-page a:focus-visible,
    .abbc-training-page button:focus-visible,
    .abbc-training-page input:focus-visible,
    .abbc-badges-overview a:focus-visible,
    .abbc-badges-overview button:focus-visible,
    .abbc-learning-paths-overview a:focus-visible,
    .abbc-learning-paths-overview button:focus-visible,
    .abbc-learning-path a:focus-visible,
    .abbc-learning-path button:focus-visible,
    .abbc-criteria a:focus-visible,
    .abbc-criteria button:focus-visible {
        outline-color: #72aee6;
    }

    /* Textlinks der Lernpfad- und Kriterienseiten. */
    .abbc-learning-path a,
    .abbc-criteria a {
        color: #72aee6;
    }

    .abbc-learning-path a:hover,
    .abbc-criteria a:hover {
        color: #dbe9eb;
    }

    /* Angehobene Karte: der Akzentrahmen wird zum hellen #72aee6. */
    .abbc-account-card:focus-within,
    .abbc-backpack-card:focus-within,
    .abbc-backpack-import:focus-within,
    .abbc-verify-card:focus-within,
    .abbc-issuer-card:focus-within,
    .abbc-issuer-badge:focus-within,
    .abbc-badges-overview-item:focus-within,
    .abbc-learning-paths-overview-item:focus-within,
    .abbc-learning-path-item:focus-within {
        border-color: #72aee6;
    }

    @supports selector(:has(:focus-visible)) {
        .abbc-account-card:focus-within,
        .abbc-backpack-card:focus-within,
        .abbc-backpack-import:focus-within,
        .abbc-verify-card:focus-within,
        .abbc-issuer-card:focus-within,
        .abbc-issuer-badge:focus-within,
        .abbc-badges-overview-item:focus-within,
        .abbc-learning-paths-overview-item:focus-within,
        .abbc-learning-path-item:focus-within {
            border-color: var(--abbc-depth-outline);
        }

        .abbc-account-card:has(:focus-visible),
        .abbc-backpack-card:has(:focus-visible),
        .abbc-backpack-import:has(:focus-visible),
        .abbc-verify-card:has(:focus-visible),
        .abbc-issuer-card:has(:focus-visible),
        .abbc-issuer-badge:has(:focus-visible),
        .abbc-badges-overview-item:has(:focus-visible),
        .abbc-learning-paths-overview-item:has(:focus-visible),
        .abbc-learning-path-item:has(:focus-visible) {
            border-color: #72aee6;
        }
    }

    /* Badges aus einem Lernpfad: der Akzentrahmen in der hellen Variante. */
    .abbc-path-badge {
        border-color: #72aee6;
    }

    /* Trennlinie der Schulungsseite statt #c3c4c7. */
    .abbc-training-section {
        border-top-color: #274a52;
    }

    /* Faktenkacheln der Schulungsseite statt #eef2f5. */
    .abbc-training-fact {
        color: #dbe9eb;
        background: #16343b;
    }

    /* Sekundaere Schaltflaeche: statt #fff die Kartenflaeche mit Feldkante. */
    .abbc-button {
        color: #72aee6;
        background: #11282e;
        border-color: #6f8f97;
    }

    /* Hoverflaeche statt #f0f6fc. */
    .abbc-button:hover,
    .abbc-button:focus {
        color: #dbe9eb;
        background: #16343b;
        border-color: #72aee6;
    }

    /* Die Warnfarbe der Loeschschaltflaeche; die gefuellte Hoverflaeche
       #b32d2e traegt weisse Schrift und bleibt unveraendert. */
    .abbc-button--danger {
        color: #ff9b9b;
        border-color: #ff9b9b;
    }

    /* Der versetzte Schatten der Schaltflaechen wird ebenfalls dunkler. */
    .abbc-button {
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
    }

    .abbc-button:focus-visible {
        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
    }

    /* Statusfarben: vier Paare wie im Theme, damit Plugin und Theme
       zusammenpassen. Neutral #dbe9eb auf #16343b, Erfolg #7ddba8 auf
       #12301f, Fehler #ff9b9b auf #3a1a1a, Warnung #f0c674 auf #33280f. */
    .abbc-notice {
        color: #dbe9eb;
        background: #16343b;
        border-color: #6f8f97;
    }

    .abbc-notice--info {
        color: #dbe9eb;
        background: #16343b;
        border-color: #6f8f97;
    }

    .abbc-notice--success {
        color: #7ddba8;
        background: #12301f;
        border-color: #7ddba8;
    }

    .abbc-notice--error {
        color: #ff9b9b;
        background: #3a1a1a;
        border-color: #ff9b9b;
    }

    .abbc-notice--warning {
        color: #f0c674;
        background: #33280f;
        border-color: #f0c674;
    }

    /* Zustand eines Nachweises im Rucksack. */
    .abbc-state-unknown {
        color: #dbe9eb;
        background: #16343b;
    }

    .abbc-state-valid {
        color: #7ddba8;
        background: #12301f;
    }

    .abbc-state-revoked {
        color: #ff9b9b;
        background: #3a1a1a;
    }

    .abbc-state-expired {
        color: #f0c674;
        background: #33280f;
    }

    /* Pruefergebnisse des Rucksack-Imports. */
    .abbc-check-ok {
        color: #7ddba8;
    }

    .abbc-check-error {
        color: #ff9b9b;
    }

    .abbc-check-warn {
        color: #f0c674;
    }

    /* Ergebniszeile der Zertifikatspruefung samt Punkt. */
    .abbc-verify-status {
        color: #dbe9eb;
        background: #16343b;
        border-color: #6f8f97;
    }

    .abbc-verify-status .abbc-verify-dot {
        color: #0b1c21;
    }

    .abbc-verify-valid {
        color: #7ddba8;
        background: #12301f;
        border-color: #7ddba8;
    }

    .abbc-verify-valid .abbc-verify-dot {
        background: #7ddba8;
    }

    .abbc-verify-revoked {
        color: #ff9b9b;
        background: #3a1a1a;
        border-color: #ff9b9b;
    }

    .abbc-verify-revoked .abbc-verify-dot {
        background: #ff9b9b;
    }

    .abbc-verify-expired {
        color: #f0c674;
        background: #33280f;
        border-color: #f0c674;
    }

    .abbc-verify-expired .abbc-verify-dot {
        background: #f0c674;
    }
}

/* Auf schmalen Displays bleibt die Ebene auch im dunklen Design flacher:
   ohne diese Begleitstufe holt die weiter oben stehende 700px-Stufe die
   helle Schattendeckung zurueck. */
@media (prefers-color-scheme: dark) and (max-width: 700px) {
    .abbc-account-card,
    .abbc-backpack-card,
    .abbc-backpack-import,
    .abbc-verify-card,
    .abbc-issuer-card,
    .abbc-issuer-badge,
    .abbc-training-page,
    .abbc-badges-overview-item,
    .abbc-learning-paths-overview-item,
    .abbc-learning-path-item {
        --abbc-depth-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
        --abbc-depth-shadow-hover: 7px 7px 0 rgba(0, 0, 0, 0.55);
    }
}

/* Im dunklen Design folgt der Mauszeiger denselben Flaechen wie die Tastatur. */
@media (prefers-color-scheme: dark) and (hover: hover) {
    .abbc-account-card:hover,
    .abbc-backpack-card:hover,
    .abbc-backpack-import:hover,
    .abbc-verify-card:hover,
    .abbc-issuer-card:hover,
    .abbc-issuer-badge:hover,
    .abbc-badges-overview-item:hover,
    .abbc-learning-paths-overview-item:hover,
    .abbc-learning-path-item:hover {
        border-color: #72aee6;
    }

    .abbc-badges-overview-item:hover h2,
    .abbc-learning-paths-overview-item:hover h2,
    .abbc-learning-path-item:hover h3,
    .abbc-backpack-card:hover h3 {
        color: #72aee6;
    }

    .abbc-button:hover {
        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
    }
}

/* Im Kontrastmodus tragen die Rahmen die Struktur, nicht die Schatten. */
@media (forced-colors: active) {
    .abbc-account-card,
    .abbc-backpack-card,
    .abbc-backpack-import,
    .abbc-verify-card,
    .abbc-issuer-card,
    .abbc-issuer-badge,
    .abbc-training-page,
    .abbc-badges-overview-item,
    .abbc-learning-paths-overview-item,
    .abbc-learning-path-item,
    .abbc-account-card:hover,
    .abbc-backpack-card:hover,
    .abbc-verify-card:hover,
    .abbc-issuer-card:hover,
    .abbc-issuer-badge:hover,
    .abbc-badges-overview-item:hover,
    .abbc-learning-paths-overview-item:hover,
    .abbc-learning-path-item:hover,
    .abbc-button,
    .abbc-button:hover,
    .abbc-button:focus-visible {
        box-shadow: none;
    }
}

/* Rueckfallebene fuer Browser ohne :focus-visible: dort hebt :focus die
   Schaltflaeche an. Den Umriss selbst setzt die Basis. */
@supports not selector(:focus-visible) {
    .abbc-button:focus {
        box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
        transform: translate(-1px, -1px);
    }
}