/*
 * Gestaltung des Mitgliedsantrags innerhalb der Website der Eschweiler Tafel.
 *
 * Das Formular steht im orangefarbenen Abschnitt "Ihre Hilfe" und bekommt dort
 * dieselbe weisse Karte wie im abgenommenen Entwurf: oranger Streifen oben,
 * Abschnittsüberschriften in Antonio, Auswahl als zwei Karten nebeneinander,
 * Felder in Zeilen statt untereinander, Absendeknopf in Orange.
 *
 * Die Breitenklassen (ca-drittel, ca-halb, ...) sind am Feld hinterlegt und
 * ersetzen das Spaltenwerkzeug, das erst in der kostenpflichtigen Fassung steckt.
 */

form.frm-fluent-form {
    background: #fff;
    color: #4a4a4a;
    border-top: 4px solid #f59800;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .10);
    padding: 34px 34px 28px;
}

/* Fluent Forms legt die Felder in ein fieldset - das ist die Ebene, auf der die
   Felder zu Zeilen zusammengefasst werden, nicht das Formular selbst. */
form.frm-fluent-form > fieldset {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0 18px;
    align-items: flex-start;
}

form.frm-fluent-form .ff-el-group { width: 100%; margin-bottom: 18px; }

/* Breiten der Felder in der Zeile */
form.frm-fluent-form .ff-el-group.ca-drittel        { width: calc(33.333% - 12px); }
form.frm-fluent-form .ff-el-group.ca-drittel-klein  { width: calc(20% - 12px); }
form.frm-fluent-form .ff-el-group.ca-zweidrittel    { width: calc(46.666% - 12px); }
form.frm-fluent-form .ff-el-group.ca-halb           { width: calc(50% - 9px); }

/* Abschnittsüberschriften */
form.frm-fluent-form .ca-abschnitt {
    font-family: 'Antonio', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #f59800;
    font-size: 22px;
    letter-spacing: .4px;
    margin: 14px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
}

form.frm-fluent-form .ff-el-group:first-child .ca-abschnitt { margin-top: 0; }

/* Beschriftungen und Felder */
form.frm-fluent-form .ff-el-input--label label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

form.frm-fluent-form .ff-el-input--label.ff-el-is-required label:after { color: #f59800; }

form.frm-fluent-form .ff-el-form-control {
    font-size: 17px;
    color: #4a4a4a;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 11px 13px;
    height: auto;
    line-height: 1.4;
}

form.frm-fluent-form .ff-el-form-control:focus {
    border-color: #f59800;
    box-shadow: 0 0 0 3px rgba(245, 152, 0, .18);
    outline: none;
}

form.frm-fluent-form textarea.ff-el-form-control { line-height: 1.6; }

form.frm-fluent-form .ff-el-help-message { font-size: 14.5px; color: #6d6d6d; margin-top: 6px; }

form.frm-fluent-form .error.text-danger, .frm-fluent-form .ff-el-is-error .text-danger { color: #c0392b; font-size: 15px; }

/* Wahl der Mitgliedsart als zwei Karten */
form.frm-fluent-form .ca-artwahl .ff-el-input--content { display: flex; gap: 18px; flex-wrap: wrap; }

form.frm-fluent-form .ca-artwahl .ff-el-form-check {
    flex: 1 1 260px;
    border: 2px solid #e2e2e2;
    border-radius: 4px;
    padding: 18px 20px;
    margin: 0;
    transition: border-color .15s, background .15s;
}

form.frm-fluent-form .ca-artwahl .ff-el-form-check:hover { border-color: #f59800; }

form.frm-fluent-form .ca-artwahl .ff-el-form-check:has(input:checked) {
    border-color: #f59800;
    background: #fff8ee;
}

form.frm-fluent-form .ca-artwahl .ff-el-form-check-label {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

form.frm-fluent-form .ca-artwahl input[type=radio] { accent-color: #f59800; width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }

/* Hinweis zum Lastschriftmandat */
form.frm-fluent-form .ca-lastschrift {
    background: #f7f7f7;
    border-left: 4px solid #408b72;
    padding: 16px 20px;
    font-size: 16px;
    line-height: 1.7;
}

form.frm-fluent-form .ca-lastschrift strong { display: block; color: #333; }

form.frm-fluent-form .ca-beitragstext { font-size: 16px; line-height: 1.6; margin: 32px 0 0; }

/* Einwilligung */
form.frm-fluent-form .ca-einwilligung .ff-el-form-check-label {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

form.frm-fluent-form .ca-einwilligung input[type=checkbox] { accent-color: #f59800; width: 19px; height: 19px; margin-top: 4px; flex: 0 0 auto; }

form.frm-fluent-form .ca-kuendigung {
    font-size: 14.5px;
    line-height: 1.6;
    color: #6d6d6d;
    border-top: 1px solid #e2e2e2;
    padding-top: 16px;
    margin: 8px 0 0;
}

/* Absendeknopf */
form.frm-fluent-form .ff-btn-submit {
    font-family: 'Antonio', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 21px;
    background: #f59800 !important;
    color: #fff !important;
    border: 0;
    border-radius: 3px;
    padding: 13px 34px;
}

form.frm-fluent-form .ff-btn-submit:hover { background: #dd8900 !important; }

/* Meldung nach dem Absenden */
.ff-message-success {
    background: #fff;
    border-top: 4px solid #408b72;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .10);
    color: #4a4a4a;
    padding: 28px 34px;
    font-size: 17px;
    line-height: 1.8;
}

.ff-message-success h3 {
    font-family: 'Antonio', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #408b72;
    font-size: 28px;
    margin: 0 0 12px;
}

/* Handy und Tablet */
@media (max-width: 860px) {
    form.frm-fluent-form { padding: 24px 20px 20px; }
    form.frm-fluent-form .ff-el-group.ca-drittel,
    form.frm-fluent-form .ff-el-group.ca-drittel-klein,
    form.frm-fluent-form .ff-el-group.ca-zweidrittel,
    form.frm-fluent-form .ff-el-group.ca-halb { width: 100%; }
    form.frm-fluent-form .ca-beitragstext { margin-top: 0; }
    form.frm-fluent-form .ff-btn-submit { width: 100%; }
}

/* Überschrift im Reiter "Mitgliedschaft": Der Reiterinhalt steht auf orangem
   Grund, eine Überschrift in der Themefarbe wäre dort unsichtbar. */
.elementor-tab-content .ca-titel {
    font-family: 'Antonio', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    font-size: 30px;
    letter-spacing: .4px;
    line-height: 1.2;
    margin: 0 0 16px;
}

/* Die Hausschrift wird von Elementor nur auf den von ihm erzeugten Seiten
   geladen. Damit der Antrag auch auf einer gewöhnlichen Seite richtig aussieht,
   liegt Antonio hier lokal bei - ohne Aufruf zu Google. */
@font-face {
    font-family: 'Antonio';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('Antonio-400.woff2') format('woff2');
}

/* Seitenüberschrift über dem Antrag auf einer gewöhnlichen Seite */
.ca-titel-seite {
    font-family: 'Antonio', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #f59800;
    font-size: 34px;
    letter-spacing: .4px;
    line-height: 1.2;
    margin: 0 0 18px;
}