/**
 * A&B Kontaktformular - Frontend-Stylesheet (neutrale Basis)
 *
 * Diese Datei wird immer geladen und haelt sich an den WordPress-Standardlook:
 * weisse Felder, 1px starke Boxrahmen in #c3c4c7, Feldkanten in #8c8f94 wie im
 * WordPress-Standard, dezente Trennlinien in #dcdcde, 4px Radius, flache Hinweisboxen,
 * keine Tiefenebene, kein Anheben, kein dunkles Design. So passt das Formular
 * auch in Kundenprojekte mit fremden Themes.
 *
 * Das A&B-eigene Tiefen-Design und das dunkle Design stehen in
 * assets/css/ab-theme-design.css und kommen nur bei aktivem Theme
 * "A&B Schulungen" hinzu (siehe ABCF_Form_Trait::ab_theme_design_active()).
 *
 * Was hier bleibt, weil es nicht am Theme haengen darf:
 *   Akzent #2271b1, Hover #135e96, Fokusrahmen 3px #005fcc,
 *   Schaltflaeche mind. 44px hoch, umbruchfaehige Beschriftung.
 */

.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;
}

/* Das Formular selbst ist die Karte; der Wrapper bleibt eine unsichtbare
   Huelle. Die Karte erhaelt bewusst KEINE eigene Hintergrundflaeche: sonst
   entstuende im dunklen Design eines Themes eine abweichende weisse Insel.
   Gesetzt werden nur Rahmen, Radius und Innenabstand. */
.abcf-contact-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
}

.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 #8c8f94;
    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.
   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 {
    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;
}

/* Absende-Schaltflaeche im WordPress-Standardlook: Primaerflaeche #2271b1,
   3px Radius, keine Tiefenebene. Die Mindesthoehe 44px und der Umbruch der
   Beschriftung bleiben - beides ist Barrierefreiheit, nicht Design. */
.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: 3px;
    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 flach: farbige Flaeche je Status, 1px Rahmen, 4px starke linke
   Kante, 4px Radius - kein Schatten. */
.abcf-notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    color: #1d2327;
    background: #eef2f5;
    border: 1px solid #1d2327;
    border-left-width: 4px;
    border-radius: 4px;
}

.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;
}

/* Im Kontrastmodus tragen die Rahmen die Struktur. Ohne diese Regel koennte
   die Systempalette die Konturen von Karte und Hinweisbox verschlucken. */
@media (forced-colors: active) {
    .abcf-contact-form,
    .abcf-notice {
        border: 1px solid CanvasText;
    }
}

/* 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-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}