/*
 * Formulare des Form Framework — Optik nach der Vorlage vom 2026-09-09
 * (preview.html, Mitgliedsantrag).
 *
 * Gilt fuer ALLE Formulare der Seite, nicht nur den Antrag: sie sollen gleich
 * aussehen. Angefasst wird ausschliesslich, was das Form Framework selbst
 * ausgibt (.frame-type-form_formframework und darin) — das uebrige Bootstrap
 * der Seite bleibt unberuehrt.
 *
 * Das Rot kommt aus der Themevariablen und nicht als fester Wert aus der
 * Vorlage (#b51f2e): die Seite fuehrt #a50010, und ein spaeterer Farbwechsel
 * soll hier durchschlagen.
 *
 * Die Abschnittsueberschriften sind KEIN CSS-Kunststueck: StaticText rendert
 * sein `label` als <h2> und seinen `text` als <div> (siehe
 * EXT:form/.../Partials/StaticText.fluid.html). Die sieben Trenner, die vorher
 * ">-----" als Text trugen, haben jetzt ein Label und keinen Text mehr.
 * Deshalb reicht hier die Unterscheidung h2 = Abschnitt, div = Fliesstext.
 */

.frame-type-form_formframework {
    padding: 40px 48px;
    border: 1px solid #e4e7eb;
    border-radius: 8px;
    background: #fff;
    color: #2f3742;
}

/*
 * Die Schriftfarben stehen hier ausdruecklich, obwohl der Rahmen oben schon
 * eine `color` hat. Grund: das Kontaktformular sitzt im dunklen Fussbereich,
 * und das Theme faerbt dort jede Beschriftung weiss - auf dem weissen Grund
 * dieser Karte waere sie unsichtbar. Die Karte soll auf jedem Untergrund
 * lesbar sein, hellem wie dunklem.
 */
.frame-type-form_formframework label,
.frame-type-form_formframework legend,
.frame-type-form_formframework h2,
.frame-type-form_formframework p,
.frame-type-form_formframework .form-check-label {
    color: #2f3742;
}

/* Der Formulartitel, den das Framework selbst setzt. */
.frame-type-form_formframework form > h2 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.2;
}

/* Fliesstext eines StaticText — auf dem Antrag die Anschrift des Vorstands. */
.frame-type-form_formframework .form-element-statictext > div {
    max-width: 900px;
    color: #5d6672;
    font-size: 15px;
}

/*
 * Abschnittsueberschrift. Die Trennlinie sitzt an der Ueberschrift und nicht
 * am Container: ein Trenner ohne Ueberschrift (der vor der Zustimmung) soll
 * keine Linie ziehen.
 */
.frame-type-form_formframework .form-element-statictext h2 {
    margin: 8px 0 20px;
    padding-top: 28px;
    border-top: 1px solid #e4e7eb;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #2f3742;
}

/* ------------------------------------------------------------------ Felder */

.frame-type-form_formframework .form-label {
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
}

.frame-type-form_formframework .required {
    color: var(--bs-primary, #a50010);
}

.frame-type-form_formframework .form-control,
.frame-type-form_formframework .form-select {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #ccd3da;
    border-radius: 5px;
    color: #2f3742;
}

.frame-type-form_formframework .form-control:focus,
.frame-type-form_formframework .form-select:focus {
    border-color: #6f7f91;
    box-shadow: 0 0 0 3px rgba(111, 127, 145, 0.12);
}

.frame-type-form_formframework textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Die Spalten der GridRow etwas luftiger, wie in der Vorlage. */
.frame-type-form_formframework .form-element-gridrow {
    --bs-gutter-x: 20px;
}

/* ------------------------------------------------- Auswahl: Ja/Nein-Gruppen */

/*
 * Die Legende ist die Beschriftung der Gruppe und wird deshalb wie ein
 * form-label gesetzt. Bootstrap macht aus jeder <legend> sonst eine grosse,
 * volle Zeile.
 *
 * `position` NICHT auf absolute stellen (auch nicht ueber .visually-hidden):
 * Chrome schiebt den Inhalt des <fieldset> dann aus dem fieldset heraus und
 * ueber das darueberliegende Feld. Genau daran liess sich am 2026-09-09 das
 * Geburtsdatum nicht mehr anklicken.
 */
.frame-type-form_formframework fieldset.form-element-radio > legend {
    float: none;
    width: auto;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
}

.frame-type-form_formframework fieldset.form-element-radio [role="radiogroup"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    min-height: 44px;
}

.frame-type-form_formframework fieldset.form-element-radio .form-check {
    margin: 0;
    padding: 0;
}

.frame-type-form_formframework .form-check-wrapping-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    cursor: pointer;
}

.frame-type-form_formframework .form-check-input {
    float: none;
    margin: 0;
}

/* Die Legende der uebrigen Fieldsets (Seite 2, Einzugsermaechtigung). */
.frame-type-form_formframework fieldset.form-element-fieldset > legend {
    float: none;
    width: auto;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* ------------------------------------------------------- Zustimmungskasten */

.frame-type-form_formframework .form-element-check > .form-check-wrapping-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 6px;
    background: #f7f8fa;
}

.frame-type-form_formframework .form-element-check .form-check-input {
    margin-top: 3px;
}

.frame-type-form_formframework .form-element-check .form-check-label {
    font-weight: 400;
}

/* ------------------------------------------------------------- Absendezeile */

.frame-type-form_formframework .actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #e4e7eb;
}

.frame-type-form_formframework .actions .form-navigation {
    display: flex;
    gap: 12px;
}

.frame-type-form_formframework .actions .btn {
    min-width: 140px;
    padding: 12px 22px;
    border-radius: 5px;
    font-weight: 700;
}

/*
 * Der "Zurueck"-Knopf auf Seite 2 stand als leerer Kasten da: Rahmen rot,
 * Schrift weiss. Das ist ein Altschaden des Themes (Bootstrap gibt
 * .btn-outline-primary die Primaerfarbe, irgendetwas darueber setzt Weiss) und
 * faellt auf jedem hellen Untergrund auf, nicht erst seit dieser Karte.
 * Korrigiert wird er nur innerhalb der Formulare - das Theme im Ganzen
 * anzufassen gehoert nicht hierher.
 */
.frame-type-form_formframework .actions .form-navigation .btn-outline-primary {
    color: var(--bs-primary, #a50010);
    border-color: var(--bs-primary, #a50010);
    background: transparent;
}

.frame-type-form_formframework .actions .form-navigation .btn-outline-primary:hover {
    color: #fff;
    background: var(--bs-primary, #a50010);
}

/* ------------------------------------------------- Ausnahme: Fussbereich */

/*
 * Das Kontaktformular im dunklen Fuss hat ein eigenes, darauf abgestimmtes
 * Design (`.luftwaffe footer.luftwaffe-footer label` faerbt jede Beschriftung
 * weiss, die Eingabefelder sind hell abgesetzt). Eine weisse Karte mittendrin
 * zerschlaegt das - beim ersten Versuch standen dort weisse Beschriftungen auf
 * weissem Grund. Also bleibt der Fuss, wie er war; die Kartenoptik gilt fuer
 * die Formulare im Inhalt.
 *
 * Die Spezifitaet muss die des Themes (0,2,2) uebertreffen, daher der lange
 * Selektor.
 */
footer.luftwaffe-footer .frame-type-form_formframework {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
}

footer.luftwaffe-footer .frame-type-form_formframework label,
footer.luftwaffe-footer .frame-type-form_formframework legend,
footer.luftwaffe-footer .frame-type-form_formframework h2,
footer.luftwaffe-footer .frame-type-form_formframework p,
footer.luftwaffe-footer .frame-type-form_formframework .form-check-label {
    color: inherit;
}

footer.luftwaffe-footer .frame-type-form_formframework .actions {
    margin-top: 0;
    padding-top: 16px;
    border-top: 0;
}

/* --------------------------------------------------------------- Schmal */

@media (max-width: 800px) {
    .frame-type-form_formframework {
        padding: 28px 22px;
    }

    /*
     * Die Spaltenklassen des Formulars gelten ab xs und blieben sonst auch
     * auf dem Telefon dreispaltig.
     */
    .frame-type-form_formframework .form-element-gridrow > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}