/*
 * Kontaktformular (EXT:form) - domicil_boilerplate
 *
 * Das Theme (style.css) stylt Formulare bereits generisch:
 *   form input[type=text|email], form select, form textarea, form button,
 *   form .dc-rgdp .dc-checkbox, .button (Submit-Optik).
 * Die Formulardefinition (Resources/Forms/Kontaktformular.form.yaml) vergibt
 * daher bewusst dieselben Klassen wie das alte Powermail-Formular
 * (dc-form-field, dc-rgdp, dc-checkbox, button ...).
 *
 * Hier steht nur, was EXT:form anders strukturiert als Powermail.
 * Scope: der fluid_styled_content-Rahmen des Formular-Inhaltselements.
 */

/* Formular als Flex-Spalte -> Button VOR den Pflichtfeld-Hinweis ziehen.
   EXT:form rendert die Navigation (Submit) technisch immer als letztes Kind. */
.frame-type-form_formframework form {
    display: flex;
    flex-direction: column;
}

.frame-type-form_formframework form > div:empty {
    display: none;
}

.frame-type-form_formframework .contact-form__nav,
.frame-type-form_formframework form > div:has(> .contact-form__actions) {
    order: 10;
    margin-top: 8px;
}

.frame-type-form_formframework .contact-form__hint-group {
    order: 11;
}

/* Feld-Labels.
   base.css "label" ist kaum gestylt (0.8em, kein margin, keine Laufweite) und
   .powermail_label hat gar kein CSS - daher hier die Optik des alten Formulars
   nachbauen (kleine graue Versalien mit etwas Abstand zum Feld). */
.frame-type-form_formframework .dc-form-field > label {
/*    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #7a828a;*/
}

.frame-type-form_formframework .dc-form-field > label .mandatory {
    /* Field-Partial setzt einen Zeilenumbruch (= Leerzeichen) vor das Sternchen */
    margin-left: -0.2em;
    color: inherit;
}

/* Checkbox-Label bleibt klein und in Normalschrift (Theme: form .dc-rgdp label) */
.frame-type-form_formframework .contact-form__check-group label {
    text-transform: none;
    letter-spacing: 0;
}

/* Zwei-Spalten-Reihe (E-Mail / Telefon).
   Powermail nutzt dafür .dc-half auf Geschwister-divs; EXT:form gruppiert
   stattdessen in ein <fieldset>, das hier zur Flex-Row wird. */
.frame-type-form_formframework .contact-form__row {
    display: flex;
    width: 100%;
    gap: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.frame-type-form_formframework .contact-form__row > * {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 600px) {
    .frame-type-form_formframework .contact-form__row {
        flex-direction: column;
        gap: 0;
    }
}

/* Submit: EXT:form rendert <button>Text</button> ohne die innere
   .dc-button-link-Struktur von Powermail. Farbe/Versalien kommen von .button,
   der Pfeil wie im Rest der Seite aus der Material-Icons-Schrift. */
.frame-type-form_formframework .contact-form__submit {
    float: none;
}

.frame-type-form_formframework .contact-form__submit::after {
    content: "arrow_forward";
    font-family: "MATERIAL ICONS", sans-serif;
    font-size: 1.3em;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

/* Pflichtfeld-Hinweis: StaticText -> <div> statt <label>, daher eigene Größe. */
.frame-type-form_formframework .contact-form__hint {
    font-size: 0.7em;
    color: #6f767d;
}

.frame-type-form_formframework .contact-form__check-group a {
    text-decoration: underline;
}

/* Validierungsfehler */
.frame-type-form_formframework .contact-form__errors {
    display: block;
    margin: -0.5em 0 1em;
    font-size: 0.8em;
    color: #a50034;
}