/* =====================================================
   memo Content Hub
   Contact Form 7 – modernes, responsives Formular-Styling
   Hello Elementor Child Theme
   ===================================================== */

/* -----------------------------------------------------
   Variablen
   ----------------------------------------------------- */
:root {
    --memo-form-primary: #6c8b2d;
    --memo-form-primary-hover: #587321;
    --memo-form-text: #292929;
    --memo-form-muted: #6f6f6f;
    --memo-form-border: #d8ddd4;
    --memo-form-border-hover: #b5bdb0;
    --memo-form-border-focus: #6c8b2d;
    --memo-form-field-bg: #fafbf9;
    --memo-form-error: #b42318;
    --memo-form-radius: 6px;

    --memo-form-row-gap: 18px;
    --memo-form-column-gap: 28px;
    --memo-form-label-gap: 7px;
}


/* =====================================================
   BASIS
   ===================================================== */

.wpcf7 {
    width: 100%;
    color: var(--memo-form-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
}

.wpcf7 form {
    width: 100%;
}

.wpcf7 form p {
    margin: 0 0 var(--memo-form-row-gap);
}


/* =====================================================
   FORMULAR-GRID
   Bevorzugte Klassen:
   .memo-form-grid
   .memo-form-grid-2
   .memo-form-field
   ===================================================== */

.wpcf7 .memo-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 var(--memo-form-row-gap) !important;
    padding: 0 !important;
    gap: var(--memo-form-row-gap) var(--memo-form-column-gap) !important;
}

.wpcf7 .memo-form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.wpcf7 .memo-form-field {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}


/* -----------------------------------------------------
   Kompatibilität mit dem bisherigen Enfold-Formularcode
   ----------------------------------------------------- */

.wpcf7 #responsive-form {
    width: 100%;
    max-width: 100%;
}

.wpcf7 #responsive-form .form-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 var(--memo-form-row-gap) !important;
    padding: 0 !important;
    gap: var(--memo-form-row-gap) var(--memo-form-column-gap) !important;
    clear: both !important;
}

.wpcf7 #responsive-form .column-half {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}

.wpcf7 #responsive-form .column-full {
    grid-column: 1 / -1 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}

.wpcf7 #responsive-form .form-row::before,
.wpcf7 #responsive-form .form-row::after {
    display: none !important;
    content: none !important;
}


/* =====================================================
   LABELS
   ===================================================== */

.wpcf7 label,
.wpcf7 .form-label {
    display: block;
    width: 100%;
    margin: 0 0 var(--memo-form-label-gap);
    color: var(--memo-form-text);
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4;
}

.wpcf7 .memo-form-field label {
    margin-bottom: 0 !important;
}

.wpcf7 .memo-form-field .wpcf7-form-control-wrap,
.wpcf7 #responsive-form .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: var(--memo-form-label-gap);
}

.wpcf7 .form-label-note {
    display: block;
    margin: 2px 0 0;
    color: var(--memo-form-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}


/* =====================================================
   EINGABEFELDER
   ===================================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    min-height: 48px;
    padding: 11px 14px;

    color: var(--memo-form-text);
    background: var(--memo-form-field-bg);

    border: 1px solid var(--memo-form-border);
    border-radius: var(--memo-form-radius);

    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;

    outline: none;
    box-shadow: none;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.wpcf7 textarea {
    min-height: 130px;
    resize: vertical;
}

.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 input[type="tel"]:hover,
.wpcf7 input[type="number"]:hover,
.wpcf7 input[type="date"]:hover,
.wpcf7 input[type="url"]:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover {
    border-color: var(--memo-form-border-hover);
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    background: #fff;
    border-color: var(--memo-form-border-focus);
    box-shadow: 0 0 0 3px rgba(108, 139, 45, .12);
}

.wpcf7 ::placeholder {
    color: #92988f;
    opacity: 1;
}


/* =====================================================
   RADIOBUTTONS & CHECKBOXEN
   ===================================================== */

.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    width: 100%;
    margin: 4px 0 0;
}

.wpcf7 .wpcf7-list-item {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.wpcf7 .wpcf7-list-item label {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    gap: 9px !important;

    color: var(--memo-form-text);
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;

    cursor: pointer;
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;

    accent-color: var(--memo-form-primary);

    flex: 0 0 18px !important;
    cursor: pointer;
}


/* Acceptance / Datenschutz */

.wpcf7 .wpcf7-acceptance {
    display: block;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
    display: flex !important;
    align-items: flex-start !important;
}

.wpcf7 .wpcf7-acceptance label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7 .form-privacy {
    color: #555;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55;
}


/* =====================================================
   LINKS
   ===================================================== */

.wpcf7 a {
    color: var(--memo-form-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.wpcf7 a:hover {
    color: var(--memo-form-primary-hover);
}


/* =====================================================
   DATEI-UPLOAD
   ===================================================== */

.wpcf7 input[type="file"] {
    display: block;
    width: 100%;
    box-sizing: border-box;

    padding: 8px;

    color: var(--memo-form-muted);
    background: var(--memo-form-field-bg);

    border: 1px dashed #bac2b6;
    border-radius: var(--memo-form-radius);

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;
}

.wpcf7 input[type="file"]::file-selector-button {
    margin-right: 15px;
    padding: 10px 16px;

    color: var(--memo-form-text);
    background: #e9ede5;

    border: 0;
    border-radius: 4px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    transition: background-color .2s ease;
}

.wpcf7 input[type="file"]::file-selector-button:hover {
    background: #dfe5d9;
}


/* =====================================================
   ABSENDEN-BUTTON
   ===================================================== */

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
    min-width: 180px;
    min-height: 50px;

    padding: 13px 28px;

    color: #fff !important;
    background: var(--memo-form-primary) !important;

    border: 0 !important;
    border-radius: var(--memo-form-radius) !important;

    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        background-color .2s ease,
        transform .15s ease,
        box-shadow .2s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
    color: #fff !important;
    background: var(--memo-form-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .12) !important;
}

.wpcf7 input[type="submit"]:active,
.wpcf7 button[type="submit"]:active {
    transform: translateY(0);
}


/* =====================================================
   VALIDIERUNG & MELDUNGEN
   ===================================================== */

.wpcf7 .wpcf7-not-valid {
    border-color: var(--memo-form-error) !important;
}

.wpcf7 .wpcf7-not-valid:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .10);
}

.wpcf7 .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;

    color: var(--memo-form-error);
    font-size: 13px;
    font-weight: 500;
}

.wpcf7 form .wpcf7-response-output {
    margin: 22px 0 0;
    padding: 14px 18px;

    border: 0;
    border-left: 4px solid var(--memo-form-primary);
    border-radius: 4px;

    background: #f1f5ec;

    color: var(--memo-form-text);
    font-size: 14px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    border-left-color: var(--memo-form-error);
    background: #fff1f0;
}

.wpcf7 .wpcf7-spinner {
    margin: 0 0 0 12px;
    vertical-align: middle;
}


/* =====================================================
   ÜBERSCHRIFTEN / BEREICHE
   ===================================================== */

.wpcf7 #responsive-form h3,
.wpcf7 .memo-form-grid h3 {
    margin: 0 0 10px;
}

.wpcf7 .form-section-heading {
    margin-top: 28px !important;
    margin-bottom: 8px !important;
}

.wpcf7 .form-required-note {
    color: var(--memo-form-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* =====================================================
   FIELDSETS (falls verwendet)
   ===================================================== */

.wpcf7 fieldset {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.wpcf7 legend {
    width: 100%;
    margin: 0 0 16px;
    padding-bottom: 8px;

    color: var(--memo-form-text);
    border-bottom: 1px solid #e5e7e3;

    font-size: 19px;
    font-weight: 600;
}


/* =====================================================
   MOBIL
   ===================================================== */

@media (max-width: 767px) {

    .wpcf7 .memo-form-grid,
    .wpcf7 .memo-form-grid-2,
    .wpcf7 #responsive-form .form-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        margin-bottom: 16px !important;
    }

    .wpcf7 #responsive-form .column-half,
    .wpcf7 #responsive-form .column-full {
        grid-column: 1 / -1 !important;
    }

    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="number"],
    .wpcf7 input[type="date"],
    .wpcf7 input[type="url"],
    .wpcf7 select,
    .wpcf7 textarea {
        font-size: 16px;
    }

    .wpcf7 .wpcf7-radio,
    .wpcf7 .wpcf7-checkbox {
        gap: 10px 20px;
    }

    .wpcf7 input[type="submit"],
    .wpcf7 button[type="submit"] {
        width: 100%;
    }
}

/* =====================================================
   MEMO CF7 – KOMPAKTE ABSTÄNDE
   ===================================================== */


/* -----------------------------------------------------
   Neue memo Grid-Zeilen deutlich kompakter
   ----------------------------------------------------- */

.wpcf7 .memo-form-grid {
    margin-bottom: 18px !important;
    row-gap: 0 !important;
}


/* Zwei Spalten nur horizontal auseinanderziehen */
.wpcf7 .memo-form-grid-2 {
    column-gap: 28px !important;
    row-gap: 0 !important;
}


/* Keine künstliche Höhe in den einzelnen Feldern */
.wpcf7 .memo-form-field {
    min-height: 0 !important;
    height: auto !important;
}


/* -----------------------------------------------------
   ALTE form-row Struktur ebenfalls kompakt halten
   ----------------------------------------------------- */

.wpcf7 #responsive-form .form-row {
    margin-bottom: 18px !important;
    row-gap: 0 !important;
}


/* -----------------------------------------------------
   LABELS
   ----------------------------------------------------- */

.wpcf7 .memo-form-field label,
.wpcf7 #responsive-form label {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}


/* Abstand Label → Eingabefeld */
.wpcf7 .memo-form-field .wpcf7-form-control-wrap {
    margin-top: 6px !important;
}


/* -----------------------------------------------------
   RADIOBUTTONS
   ----------------------------------------------------- */

.wpcf7 .wpcf7-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    gap: 10px 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;
}


/* -----------------------------------------------------
   CHECKBOXEN
   ----------------------------------------------------- */

.wpcf7 .wpcf7-checkbox {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    gap: 10px 28px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Einzelne Radio-/Checkbox-Option */
.wpcf7 .wpcf7-list-item {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Das Label einer Option */
.wpcf7 .wpcf7-list-item label {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}


/* Checkbox / Radio selbst */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
    display: inline-block !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;

    margin: 0 !important;

    flex: 0 0 18px !important;
}


/* CF7 legt den Text in diesen Span */
.wpcf7 .wpcf7-list-item-label {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* -----------------------------------------------------
   ANREDE
   ----------------------------------------------------- */

.wpcf7 .form-label {
    display: block !important;

    margin: 0 0 10px !important;

    font-size: 17px !important;
    font-weight: 600 !important;
}


/* -----------------------------------------------------
   INPUTS
   ----------------------------------------------------- */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="url"],
.wpcf7 select {
    min-height: 48px !important;
}


/* -----------------------------------------------------
   MOBILE
   ----------------------------------------------------- */

@media (max-width: 767px) {

    .wpcf7 .memo-form-grid {
        margin-bottom: 16px !important;
    }

    .wpcf7 .memo-form-grid-2 {
        grid-template-columns: 1fr !important;
        row-gap: 16px !important;
    }

}

/* =====================================================
   CF7 – unerwünschte automatische <p> und <br> Abstände
   ===================================================== */

.wpcf7 .memo-form-grid p,
.wpcf7 .memo-form-field p {
    margin: 0 !important;
    padding: 0 !important;
}

.wpcf7 .memo-form-field label > br {
    display: none !important;
}

.wpcf7 .memo-form-field p > br {
    display: none !important;
}

.wpcf7 .memo-form-field label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.wpcf7 .memo-form-field .wpcf7-form-control-wrap {
    display: block !important;
    margin-top: 7px !important;
}

.wpcf7 .memo-form-grid {
    margin-bottom: 18px !important;
}

.wpcf7 .memo-form-grid-2 {
    row-gap: 0 !important;
    column-gap: 28px !important;
}

.wpcf7 .wpcf7-list-item label > br {
    display: none !important;
}

.wpcf7 .wpcf7-list-item label {
    gap: 10px !important;
}

.wpcf7 .wpcf7-list-item-label {
    margin-left: 0 !important;
}

/* =====================================================
   CF7 – FEINTUNING ABSTÄNDE / STELLENBEZEICHNUNG
   ===================================================== */

/* 1. Abstand zwischen "Anrede" und Checkboxen */
.wpcf7 .form-label {
    margin-bottom: 14px !important;
}

/* Falls "Anrede" nicht über .form-label kommt */
.wpcf7 #responsive-form .column-full > .wpcf7-form-control-wrap {
    margin-top: 10px !important;
}


/* 2. Abstand zwischen Checkbox und Text */
.wpcf7 .wpcf7-list-item label {
    gap: 12px !important;
}

/* zusätzliche Absicherung für CF7-Markup */
.wpcf7 .wpcf7-list-item input[type="checkbox"],
.wpcf7 .wpcf7-list-item input[type="radio"] {
    margin-right: 0 !important;
}

.wpcf7 .wpcf7-list-item-label {
    padding-left: 0 !important;
}


/* 3. Weniger Abstand zwischen Stellenbezeichnung und Anrede */
.wpcf7 #responsive-form .form-row {
    margin-bottom: 14px !important;
}

/* gezielt die Zeile direkt nach Stellenbezeichnung kompakter */
.wpcf7 #responsive-form .form-row:has([name="stellenbezeichnung"]) {
    margin-bottom: 10px !important;
}


/* 4. Stellenbezeichnung kürzer machen */
.wpcf7 [name="stellenbezeichnung"] {
    width: 65% !important;
    max-width: 760px !important;
}

/* Mobil wieder volle Breite */
@media (max-width: 767px) {
    .wpcf7 [name="stellenbezeichnung"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =====================================================
   Stellenbezeichnung
   ===================================================== */

/* Automatische CF7-Abstände entfernen */
.wpcf7 .memo-stellen-row p {
    margin: 0 !important;
    padding: 0 !important;
}

.wpcf7 .memo-stellen-row label > br {
    display: none !important;
}

/* Abstand Label -> Feld */
.wpcf7 .memo-stellen-row .wpcf7-form-control-wrap {
    display: block !important;
    width: 65% !important;
    max-width: 720px !important;
    margin-top: 7px !important;
}

/* Das eigentliche sichtbare Eingabefeld */
.wpcf7 .memo-stellen-row input[name="stellenbezeichnung"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Weniger Abstand zur nächsten Zeile / Anrede */
.wpcf7 .memo-stellen-row {
    margin-bottom: 18px !important;
}

/* Mobil wieder volle Breite */
@media (max-width: 767px) {
    .wpcf7 .memo-stellen-row .wpcf7-form-control-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =====================================================
   MEMO CF7 – FINAL FORM LAYOUT
   ===================================================== */

#responsive-form {
    width: 100%;
}


/* ------------------------------
   Allgemeine Zeile
   ------------------------------ */

#responsive-form .memo-form-row {
    width: 100%;
    margin: 0 0 20px !important;
}


/* ------------------------------
   Zwei Spalten
   ------------------------------ */

#responsive-form .memo-form-grid {
    display: grid !important;
    width: 100%;
    margin: 0 0 20px !important;
}

#responsive-form .memo-form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 0 !important;
}

#responsive-form .memo-form-field {
    width: 100%;
    min-width: 0;
}


/* ------------------------------
   Beschriftungen
   ------------------------------ */

#responsive-form .memo-field-label {
    display: block !important;
    width: 100%;

    margin: 0 0 7px !important;
    padding: 0;

    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    color: var(--memo-form-text);
}


/* CF7 Wrapper */
#responsive-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin: 0 !important;
}


/* ------------------------------
   Inputs
   ------------------------------ */

#responsive-form input[type="text"],
#responsive-form input[type="email"],
#responsive-form input[type="tel"],
#responsive-form input[type="number"],
#responsive-form select,
#responsive-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}


/* =====================================================
   STELLENBEZEICHNUNG
   ===================================================== */

#responsive-form .memo-stellen-row {
    margin-bottom: 20px !important;
}

/* gewünschte Feldlänge */
#responsive-form .memo-stellen-row .wpcf7-form-control-wrap {
    width: 60% !important;
    max-width: 680px !important;
}

#responsive-form .memo-stellen-row input[name="stellenbezeichnung"] {
    width: 100% !important;
}


/* =====================================================
   ANREDE
   ===================================================== */

#responsive-form .memo-anrede-row {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

/* Abstand Überschrift Anrede -> Checkboxen */
#responsive-form .memo-anrede-row .memo-field-label {
    margin-bottom: 12px !important;
}


/* Checkbox-Gruppe */
#responsive-form .memo-anrede-row .wpcf7-checkbox {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    gap: 10px 26px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Einzelne Auswahl */
#responsive-form .memo-anrede-row .wpcf7-list-item {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Checkbox + Text */
#responsive-form .memo-anrede-row .wpcf7-list-item label {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 9px !important;

    font-size: 16px !important;
    font-weight: 400 !important;
}


/* Checkbox selbst */
#responsive-form .memo-anrede-row input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 18px !important;
}


/* Text nach Checkbox */
#responsive-form .memo-anrede-row .wpcf7-list-item-label {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =====================================================
   RADIOBUTTONS
   ===================================================== */

#responsive-form .memo-radio-row {
    margin-bottom: 22px !important;
}

#responsive-form .wpcf7-radio {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px 26px !important;

    margin: 0 !important;
}

#responsive-form .wpcf7-radio .wpcf7-list-item {
    margin: 0 !important;
}

#responsive-form .wpcf7-radio label {
    display: inline-flex !important;
    align-items: center !important;

    gap: 9px !important;

    margin: 0 !important;

    font-size: 16px !important;
    font-weight: 400 !important;
}


/* =====================================================
   ÜBERSCHRIFTEN
   ===================================================== */

#responsive-form .memo-form-section {
    margin: 0 0 20px;
}

#responsive-form .memo-form-section h3 {
    margin: 0 0 12px;
}

#responsive-form .memo-personal-heading {
    margin-top: 28px;
    margin-bottom: 20px;
}


/* =====================================================
   NACHRICHT
   ===================================================== */

#responsive-form .form-label-note {
    display: block;

    margin-top: 3px;

    color: var(--memo-form-muted);

    font-size: 14px;
    font-weight: 400;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

    #responsive-form .memo-form-grid-2 {
        grid-template-columns: 1fr !important;
        row-gap: 18px !important;
    }

    #responsive-form .memo-stellen-row .wpcf7-form-control-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    #responsive-form .memo-anrede-row .wpcf7-checkbox {
        gap: 10px 20px !important;
    }

}

/* =====================================================
   MEMO CF7 – Label-Abstände
   ===================================================== */

#responsive-form .memo-stellen-row .memo-field-label,
#responsive-form .memo-anrede-row .memo-field-label {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

#responsive-form .memo-stellen-row .wpcf7-form-control-wrap,
#responsive-form .memo-anrede-row .wpcf7-form-control-wrap {
    margin-top: 0 !important;
}

/* =====================================================
   CF7 – automatische Abstände in memo-form-row entfernen
   ===================================================== */

/* Automatisches CF7 <p> neutralisieren */
#responsive-form .memo-form-row > p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Das von CF7 erzeugte <br> direkt nach dem Label entfernen */
#responsive-form .memo-form-row .memo-field-label + br {
    display: none !important;
}

/* Label -> Feld */
#responsive-form .memo-form-row .memo-field-label {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

/* CF7-Wrapper darf keinen weiteren Abstand erzeugen */
#responsive-form .memo-form-row .wpcf7-form-control-wrap {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#responsive-form input[type="submit"],
#responsive-form button[type="submit"] {
    background: #e96047 !important;
    border-color: #e96047 !important;
    color: #fff !important;
}

#responsive-form input[type="submit"]:hover,
#responsive-form button[type="submit"]:hover {
    background: #d8513b !important;
    border-color: #d8513b !important;
}

/* Friendly Captcha vor Submit */
#responsive-form .frc-captcha,
#responsive-form frc-captcha,
#responsive-form .friendly-captcha {
    margin-bottom: 18px !important;
}

/* Datenschutz + Pflichtfeldhinweis gleiche Typografie */
#responsive-form .form-privacy,
#responsive-form .form-privacy label,
#responsive-form .form-privacy .wpcf7-list-item-label,
#responsive-form .form-required-note {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #666666 !important;
}

#responsive-form .form-privacy a {
    color: var(--memo-form-primary) !important;
    font-size: inherit !important;
    font-weight: 600 !important;
}

/* =====================================================
   MEMO CF7 – FORMULAR-CONTAINER / HINTERGRUND
   ===================================================== */

/*
 * Helle graue Formularfläche für mehr Kontrast
 * und bessere optische Zusammenfassung des Formulars.
 */
#responsive-form {
    width: 100%;
    box-sizing: border-box;

    background-color: #f5f5f3;

    padding: 36px 40px;

    border-radius: 8px;
}


/* -----------------------------------------------------
   Eingabefelder auf der grauen Fläche weiß darstellen
   ----------------------------------------------------- */

#responsive-form input[type="text"],
#responsive-form input[type="email"],
#responsive-form input[type="tel"],
#responsive-form input[type="number"],
#responsive-form input[type="date"],
#responsive-form input[type="url"],
#responsive-form select,
#responsive-form textarea {
    background-color: #ffffff !important;
}


/* -----------------------------------------------------
   Datei-Upload ebenfalls etwas vom Hintergrund abheben
   ----------------------------------------------------- */

#responsive-form input[type="file"] {
    background-color: #ffffff;
}


/* -----------------------------------------------------
   Fokus-Zustand der Eingabefelder
   ----------------------------------------------------- */

#responsive-form input[type="text"]:focus,
#responsive-form input[type="email"]:focus,
#responsive-form input[type="tel"]:focus,
#responsive-form input[type="number"]:focus,
#responsive-form input[type="date"]:focus,
#responsive-form input[type="url"]:focus,
#responsive-form select:focus,
#responsive-form textarea:focus {
    background-color: #ffffff !important;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

    #responsive-form {
        padding: 24px 20px;
        border-radius: 6px;
    }

}

/* =====================================================
   MEMO CF7 – ADRESSZEILE
   Straße 75 % / Hausnummer 25 %
   ===================================================== */

#responsive-form .memo-form-grid-address {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(160px, 1fr) !important;
    column-gap: 28px !important;
    row-gap: 0 !important;

    width: 100%;
    margin: 0 0 20px !important;
}

#responsive-form .memo-form-grid-address .memo-form-field {
    width: 100%;
    min-width: 0;
}


/* Mobile: wieder untereinander */
@media (max-width: 767px) {

    #responsive-form .memo-form-grid-address {
        grid-template-columns: 1fr !important;
        row-gap: 18px !important;
    }

}

/* =====================================================
   FRIENDLY CAPTCHA V1 – BUTTON FIX
   ===================================================== */

/* Captcha-Text */
#responsive-form .frc-captcha .frc-text {
    color: #292929 !important;
    background: transparent !important;
}

/* Friendly-Captcha-Button */
#responsive-form .frc-captcha .frc-button {
    display: inline-block !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #292929 !important;

    font: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: inherit !important;

    text-decoration: underline !important;
    text-transform: none !important;

    cursor: pointer !important;
}

/* Hover / Focus */
#responsive-form .frc-captcha .frc-button:hover,
#responsive-form .frc-captcha .frc-button:focus,
#responsive-form .frc-captcha .frc-button:active {
    background: transparent !important;
    background-color: transparent !important;

    color: #292929 !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* =====================================================
   MEMO CF7 – DRAG & DROP UPLOAD VOLLE BREITE
   ===================================================== */

#responsive-form .memo-upload-full {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

#responsive-form .memo-upload-full > p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#responsive-form .memo-upload-full .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

#responsive-form .memo-upload-full .codedropz-upload-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

#responsive-form .memo-upload-full .codedropz-upload-handler {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#responsive-form .memo-upload-full .codedropz-upload-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* =====================================================
   MEMO CF7 – NACHRICHTENFELD VOLLE BREITE
   ===================================================== */

#responsive-form .memo-textarea-full {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

#responsive-form .memo-textarea-full > p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#responsive-form .memo-textarea-full .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

#responsive-form .memo-textarea-full textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Kundengruppe */
#responsive-form .memo-kundentyp-row {
    margin-bottom: 32px !important;
}

/* Wenn das Firmenfeld eingeblendet ist,
   weniger Abstand zwischen Kundengruppe und Firma */
#responsive-form .memo-kundentyp-row:has(+ #memo-firma-field:not([style*="display: none"])) {
    margin-bottom: 20px !important;
}

/* Firmenfeld nur halbe Breite */
#responsive-form #memo-firma-field .memo-form-field {
    width: 50% !important;
}

/* Mobil wieder volle Breite */
@media (max-width: 767px) {
    #responsive-form #memo-firma-field .memo-form-field {
        width: 100% !important;
    }
}