/* A&B-Tiefen-Design und dunkles Design.
   Diese Datei wird nur geladen, wenn das Theme "A&B Schulungen" aktiv ist
   (oder der Filter abcf_enable_ab_theme_design das erzwingt). Sie kommt nach
   assets/css/frontend.css und ueberschreibt die neutrale Basis ueber die
   Ladereihenfolge - deshalb reichen einklassige Selektoren, und das Theme kann
   mit ".site-main .abcf-..." weiterhin das letzte Wort haben. Keine
   Vorrangerklaerung noetig, die Reihenfolge genuegt.

   Barrierefreiheit steht bewusst NICHT hier: Fokusrahmen und Mindesthoehe der
   Schaltflaeche gelten in der Basis und damit unter jedem Theme. */

/* Tiefenstruktur der A&B-Familie: versetzte harte Ebene statt weichem Schatten. */
.abcf-contact-form-wrap {
    --abcf-depth-outline: #1d2327;
    --abcf-depth-shadow: 7px 7px 0 rgba(29, 35, 39, 0.18);
    --abcf-depth-shadow-hover: 11px 11px 0 rgba(29, 35, 39, 0.18);
    --abcf-depth-lift: translate(-4px, -4px);
}

/* Das Formular selbst ist die Karte; der Wrapper bleibt eine unsichtbare
   Huelle und traegt nur die Variablen. Die Karte behaelt auch hier bewusst
   KEINE eigene Hintergrundflaeche, damit im dunklen Design des Themes keine
   abweichende Insel entsteht. */
.abcf-contact-form {
    border: 2px solid var(--abcf-depth-outline);
    border-radius: 4px;
    box-shadow: var(--abcf-depth-shadow);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

/* Tastaturnutzung hebt die Karte genauso an wie die Maus; deshalb steht
   diese Regel ausserhalb der Hover-Abfrage. :focus-within ist die Basis fuer
   aeltere Browser. */
.abcf-contact-form:focus-within {
    border-color: #2271b1;
    box-shadow: var(--abcf-depth-shadow-hover);
    transform: var(--abcf-depth-lift);
}

/* Wo der Browser es kann, hebt sich die Karte nur bei Tastaturbedienung an.
   Nach einem Mausklick in ein Feld bliebe sie sonst angehoben stehen. */
@supports selector(:has(:focus-visible)) {
    .abcf-contact-form:focus-within {
        border-color: var(--abcf-depth-outline);
        box-shadow: var(--abcf-depth-shadow);
        transform: none;
    }

    .abcf-contact-form:has(:focus-visible) {
        border-color: #2271b1;
        box-shadow: var(--abcf-depth-shadow-hover);
        transform: var(--abcf-depth-lift);
    }
}

/* Hinweisboxen tragen dieselbe Ebene und den Boxradius 8px der Familie. */
.abcf-notice {
    border-radius: 8px;
    box-shadow: var(--abcf-depth-shadow);
}

/* Die Schaltflaeche greift die Ebene in kleiner Form auf. */
.abcf-submit {
    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;
}

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

@media (hover: hover) {
    .abcf-contact-form:hover {
        border-color: #2271b1;
        box-shadow: var(--abcf-depth-shadow-hover);
        transform: var(--abcf-depth-lift);
    }

    .abcf-submit: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) {
    .abcf-contact-form-wrap {
        --abcf-depth-shadow: 5px 5px 0 rgba(29, 35, 39, 0.18);
        --abcf-depth-shadow-hover: 7px 7px 0 rgba(29, 35, 39, 0.18);
    }
}

/* Rueckfallebene fuer Browser ohne :focus-visible: dort traegt :focus die
   kleine Ebene der Schaltflaeche. Der Fokusrahmen selbst steht in der Basis. */
@supports not selector(:focus-visible) {
    .abcf-submit:focus {
        box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
        transform: translate(-1px, -1px);
    }
}

/* Wer weniger Bewegung wuenscht, erhaelt die Ebene ohne Animation. */
@media (prefers-reduced-motion: reduce) {
    .abcf-contact-form,
    .abcf-contact-form:hover,
    .abcf-contact-form:focus-within,
    .abcf-submit,
    .abcf-submit:hover,
    .abcf-submit:focus-visible {
        transition: none;
        transform: none;
    }
}

/* Im Kontrastmodus tragen die Rahmen die Struktur, nicht die Schatten. */
@media (forced-colors: active) {
    .abcf-contact-form,
    .abcf-contact-form:hover,
    .abcf-contact-form:focus-within,
    .abcf-notice,
    .abcf-submit,
    .abcf-submit:hover,
    .abcf-submit:focus-visible {
        box-shadow: none;
    }

    .abcf-contact-form,
    .abcf-notice {
        border: 2px solid CanvasText;
    }
}

/* ── Dunkles Design ──────────────────────────────────────────────────────
   Das Plugin bringt eigene dunkle Flaechen mit, abgestimmt auf das Theme.
   Alle Regeln bleiben einklassig, damit das Theme sie mit seinen
   `.site-main`-Regeln weiterhin zuverlaessig ueberschreibt.
   Die Formularkarte erhaelt hier - wie im hellen Design - bewusst KEINE eigene
   Hintergrundflaeche: sonst entstuende im dunklen Design des Themes eine
   abweichende Insel. Gesetzt wird deshalb nur, was noetig ist: Kontur,
   Textfarben, Feldflaechen und Hinweisboxen. Den Grundton #0b1c21 der Familie
   bringt entsprechend die Seite mit, nicht das Plugin. */
@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 einschliesslich der Schaltflaeche. #005fcc erreicht gegen Weiss rund 5,
    6:1 und erfuellt damit WCAG 1.4.11; der Farbwechsel allein genuegte fuer WCAG 1.4.1 nicht. Barrierefreiheit haengt nicht am Theme: diese Regeln stehen deshalb in der Basis und gelten unter jedem Theme. 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 fuer aeltere Browser stehen am Dateiende im @supports-Block. */ .abcf-contact-form-wrap a:focus-visible,
    .abcf-contact-form-wrap button:focus-visible,
    .abcf-contact-form-wrap input:focus-visible,
    .abcf-contact-form-wrap select:focus-visible,
    .abcf-contact-form-wrap textarea:focus-visible,
    .abcf-contact-form-wrap [tabindex]:focus-visible,
    .abcf-contact-form-wrap a:focus,
    .abcf-contact-form-wrap button:focus,
    .abcf-contact-form-wrap input:focus,
    .abcf-contact-form-wrap select:focus,
    .abcf-contact-form-wrap textarea:focus,
    .abcf-contact-form-wrap [tabindex]:focus {
        outline-color: var(--ab-focus, #7fb3ff);
    }

    .abcf-contact-form-wrap {
        color: #dbe9eb;
    }

    /* Auf dunklem Grund traegt die hellere Kontur die Tiefe; der Schatten
       braucht zudem mehr Deckung, sonst ist er unsichtbar. */
    .abcf-contact-form-wrap {
        --abcf-depth-outline: #274a52;
        --abcf-depth-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55);
        --abcf-depth-shadow-hover: 11px 11px 0 rgba(0, 0, 0, 0.55);
    }

    /* Eingabefelder: hellere Feldkante (4,4:1 gegen die Flaeche) statt #8c8f94. */
    .abcf-contact-form input[type="text"],
    .abcf-contact-form input[type="email"],
    .abcf-contact-form textarea {
        color: #dbe9eb;
        background: #11282e;
        border-color: #6f8f97;
    }

    .abcf-contact-form input:focus,
    .abcf-contact-form textarea:focus {
        border-color: #72aee6;
    }

    /* Die Karte behaelt beim Zeigen und Fokussieren den Akzentrahmen #2271b1;
       er hebt sich gegen die Kontur #274a52 deutlich ab. */

    .abcf-consent a {
        color: #72aee6;
    }

    .abcf-consent a:hover {
        color: #dbe9eb;
    }

    .abcf-required-note {
        color: #a8c4c9;
    }

    /* Die Schaltflaechenflaeche #2271b1 traegt weisse Schrift mit 5,2:1 - sie bleibt. */

    /* Statusfarben des Themes, damit Plugin und Theme zusammenpassen. */
    .abcf-notice {
        color: #dbe9eb;
        background: #16343b;
        border-color: #6f8f97;
    }

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

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

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

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

/* Auch im dunklen Design faellt die Ebene auf schmalen Bildschirmen flacher
   aus; die 700px-Stufe weiter oben traegt die helle Deckung. */
@media (prefers-color-scheme: dark) and (max-width: 700px) {
    .abcf-contact-form-wrap {
        --abcf-depth-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
        --abcf-depth-shadow-hover: 7px 7px 0 rgba(0, 0, 0, 0.55);
    }
}