/**
 * A&B Kontaktformular - Frontend-Stylesheet
 *
 * Gemeinsames Design aller Frontend-Ausgaben nach dem Standard der
 * A&B Plugin-Familie:
 *   Akzent #2271b1, Hover #135e96, Fokus 3px #005fcc,
 *   Schaltflaechen mind. 44px hoch, Hinweisboxen mit 8px Radius.
 */

.abcf-contact-form-wrap,
.abcf-contact-form-wrap * {
    box-sizing: border-box;
}

.abcf-contact-form-wrap {
    width: 100%;
    max-width: 720px;
    margin: 24px auto;
    color: #1d2327;
}

.abcf-contact-title {
    margin: 0 0 20px;
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.abcf-contact-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.abcf-contact-form label {
    margin-top: 10px;
    font-weight: 600;
}

.abcf-contact-form input[type="text"],
.abcf-contact-form input[type="email"],
.abcf-contact-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #767676;
    border-radius: 4px;
    background: #fff;
    color: #1d2327;
    font: inherit;
    letter-spacing: 0;
}

.abcf-contact-form textarea {
    min-height: 180px;
    resize: vertical;
}

/* 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.
   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 {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

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

.abcf-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400 !important;
    line-height: 1.5;
}

.abcf-consent input {
    flex: 0 0 auto;
    margin-top: 4px;
}

.abcf-consent a {
    color: #2271b1;
}

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

.abcf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 44px;
    margin-top: 12px;
    padding: 10px 16px;
    border: 1px solid #2271b1;
    border-radius: 4px;
    background: #2271b1;
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    cursor: pointer;
}

.abcf-submit:hover,
.abcf-submit:focus {
    border-color: #135e96;
    background: #135e96;
    color: #fff;
}

.abcf-required-note {
    margin: 2px 0 0;
    color: #50575e;
    font-size: .875rem;
}

/* Hinweisboxen: farbige Flaeche je Status, 4px starke linke Kante. */
.abcf-notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    color: #1d2327;
    background: #eef2f5;
    border: 1px solid #1d2327;
    border-left-width: 4px;
    border-radius: 8px;
}

.abcf-notice > :first-child {
    margin-top: 0;
}

.abcf-notice > :last-child {
    margin-bottom: 0;
}

.abcf-notice-success {
    color: #0a6b22;
    background: #edfaef;
    border-color: #0a6b22;
}

.abcf-notice-error {
    color: #b32d2e;
    background: #fcf0f1;
    border-color: #b32d2e;
}

.abcf-notice-warning {
    color: #7a4b00;
    background: #fff7e6;
    border-color: #7a4b00;
}

.abcf-notice-info {
    color: #1d2327;
    background: #eef2f5;
    border-color: #1d2327;
}

/* ── Tiefenebene und Hovereffekte ────────────────────────────────────────
   Dieselbe versetzte Ebene wie in den Schwesterplugins: harter Versatz-
   schatten ohne Weichzeichnung, beim Zeigen und beim Tastaturfokus rueckt
   die Flaeche nach oben links und der Schatten waechst.
   Alle Selektoren bleiben einklassig, damit das Theme "A&B Schulungen"
   mit seinen `.site-main`-Regeln gewinnt und die Ebene dort nach eigener
   Palette setzt oder bewusst flach laesst. Ohne Theme bringt das Plugin
   die Ebene selbst mit. */
.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(-2px, -2px);
}

/* Das Formular selbst ist die Karte; der Wrapper bleibt eine unsichtbare
   Huelle und tragt nur die Variablen. */
.abcf-contact-form {
    padding: 18px;
    border: 2px solid var(--abcf-depth-outline);
    border-radius: 4px;
    box-shadow: var(--abcf-depth-shadow);
    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        border-color 150ms ease,
        background-color 150ms 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);
    }
}

.abcf-notice {
    box-shadow: var(--abcf-depth-shadow);
}

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

/* 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;
    }
}

/* Rueckfallebene fuer Browser ohne :focus-visible: dort traegt :focus den
   Rahmen, damit die Tastaturbedienung auch alt sichtbar bleibt. Aktuelle
   Browser ueberspringen diesen Block, deshalb bleibt der Rahmen dort nach
   einem Mausklick oder einem per Skript gesetzten Fokus unsichtbar. */
@supports not selector(: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: 3px solid #005fcc;
        outline-offset: 2px;
    }

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

.abcf-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}