:root {
    --blue: #24345f;
    --green: #4a9c39;
    --green-soft: #f1f8ee;
    --bg: #f4f6f9;
    --card: #fff;
    --text: #18243a;
    --muted: #6d7684;
    --line: #dde3eb;
    --danger: #a62f2f;
}

/* ==========================================================================
   DESKTOP-BREITE BEGRENZEN & ZENTRIEREN (720px)
   ========================================================================== */

div.mpform {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #fff;
}

div.mpform p {
    padding: 1px;
    margin: 1px;
}

div.mpform p.help_txt {
    color: #600;
}

/* ==========================================================================
   HEADER-STYLING FÜR MPFORM KOPFZEILE
   ========================================================================== */

.form-header {
    margin-bottom: 20px !important;
}

.form-header h1 {
    color: var(--blue) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
}

.form-header .subtitle {
    color: var(--blue) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
}

/* 1. Badges oben formatieren */
.badges {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 14px 0 !important;
}

.badge {
    font-size: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    padding: 7px 10px !important;
    color: var(--blue) !important;
    font-weight: 700 !important;
    background: #fff !important;
    display: inline-block !important;
}

/* ==========================================================================
   AKKORDEON, LEGEND & SUMMARY STYLING (Für MPForm)
   ========================================================================== */

.service,
div.mpform details,
div.mpform fieldset {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 17px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 0;
}

div.mpform fieldset {
    padding: 10px 15px;
}

.service summary,
div.mpform details summary,
div.mpform legend {
    list-style: none;
    cursor: pointer;
    padding: 16px 17px;
    font-weight: 850;
    color: var(--blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.service summary::-webkit-details-marker,
div.mpform details summary::-webkit-details-marker,
div.mpform legend::-webkit-details-marker {
    display: none;
}

.service summary::after,
div.mpform details summary::after,
div.mpform legend::after {
    content: "+";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    color: var(--green);
    font-size: 20px;
}

.service[open] summary,
div.mpform details[open] summary,
div.mpform fieldset[open] legend {
    border-bottom: 1px solid var(--line);
    background: #fbfcfe;
}

.service[open] summary::after,
div.mpform details[open] summary::after,
div.mpform fieldset[open] legend::after {
    content: "-";
}

.service .content,
div.mpform details > div,
div.mpform details > p {
    padding: 4px 16px 16px;
}

/* ==========================================================================
   GRUPPEN & CHIPS
   ========================================================================== */

.group {
    margin-top: 13px;
    margin-bottom: 13px;
}

.group-title {
    font-size: 15px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 7px;
    color: var(--blue);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 12px;
}

.chips input[type="radio"],
.chips input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.chips label,
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfd7e2;
    background: #fff;
    border-radius: 999px;
    padding: 9px 12px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    color: var(--text);
    transition: all 0.2s ease;
    user-select: none;
}

.chips label:hover,
.chip:hover {
    border-color: var(--green);
    background-color: #f9fbf8;
}

.chips input[type="radio"]:checked + label,
.chips input[type="checkbox"]:checked + label,
.chip.active {
    background: var(--green-soft);
    border-color: var(--green);
    color: #2c6524;
}

/* ==========================================================================
   MPFORM RASTER & ELEMNETE
   ========================================================================== */

div.mpform div.newline {
    clear: both;
    margin: 0;
    padding: 0;
    border-width: 0px;
    height: 0px;
    width: 100%;
}

div.mpform div.questionbox,
div.mpform fieldset div.questionbox {
    clear: left;
    float: left;
    width: 172px;
    height: auto;
    padding: 4px;
    margin: 2px 0px 2px 2px;
    border-width: 0px;
    text-align: right;
}

div.mpform div.answerbox,
div.mpform fieldset div.answerbox {
    float: left;
    width: 412px;
    height: auto;
    padding: 4px;
    margin: 2px 2px 2px 0px;
    border: 0px;
}

/* ==========================================================================
   CONTACT-BEREICH & KONTAKTDATEN-GRID
   ========================================================================== */

.contact,
div.mpform .contact-section,
section.contact {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 19px;
    padding: 17px;
    margin-top: 14px;
    box-shadow: 0 10px 30px rgba(25, 40, 70, .08);
    display: block !important;
    clear: both !important;
    overflow: hidden !important;
}

.contact h2 {
    margin: 0;
    color: var(--blue);
    font-size: 24px;
}

.contact p {
    margin: 6px 0 8px;
    color: var(--muted);
    font-size: 13px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.contact-grid .full-width {
    grid-column: span 3;
}

.contact-grid input[type="text"],
.contact-grid input[type="email"],
.contact-grid input[type="tel"],
.contact-grid input,
.contact input[type="text"],
.contact input[type="email"],
.contact textarea,
div.mpform input.mpform_text,
div.mpform input.mpform_email,
div.mpform textarea.mpform_textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid #cdd5df !important;
    border-radius: 12px !important;
    padding: 10px 13px;
    color: var(--text); 
    font-size: 15px;
    box-sizing: border-box;
    background: #fff;
    outline: none;
}

.contact-grid input:focus,
div.mpform input.mpform_text:focus {
    border-color: var(--blue) !important;
}

/* Ausblenden von unnötigen MPForm-Labels im Kontaktdatenbereich */
div.mpform .contact .group-title,
div.mpform .contact div.questionbox,
div.mpform .contact .mpform_title,
div.mpform .contact label.mpform_title {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

div.mpform .contact div.answerbox {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   CAPTCHA TABELLE
   ========================================================================== */

div.mpform .captcha,
div.mpform .contact .captcha {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 10px;
}

div.mpform table.captcha_table,
div.mpform .contact table {
    width: auto !important;
    margin: 20px auto 10px auto !important;
    border-collapse: collapse !important;
    border-top: 1px dashed var(--line) !important;
    padding-top: 15px !important;
    display: table !important;
}

div.mpform table.captcha_table tr,
div.mpform .contact table tr {
    display: table-row !important;
}

div.mpform table.captcha_table td,
div.mpform .contact table td {
    display: table-cell !important;
    padding: 0 5px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    border: none !important;
    font-size: 14px !important;
    color: var(--text) !important;
}

div.mpform table.captcha_table input,
div.mpform .contact table input,
div.mpform input.mpform_captcha {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 38px !important;
    min-height: 38px !important;
    background: #f8fafc !important;
    color: var(--blue) !important;
    border: 1px solid #cdd5df !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin: 0 4px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06) !important;
}

/* ==========================================================================
   VALIDIERUNG & FEHLERZUSTÄNDE
   ========================================================================== */

.mpform_error .mpform_title,
.mpform_error .mpform_field,
.captcha_err .mpform_title,
.captcha_err .mpform_field {
    color: var(--danger) !important;
}

.mpform_err_date,
.mpform_err_email,
.mpform_err_textarea,
.mpform_err_text,
.mpform_err_radio,
.mpform_err_radio_label,
.mpform_err_select,
.mpform_err_select_label,
.mpform_err_checkbox,
.mpform_err_checkbox_label,
.captcha_err,
.captcha_err input {
    background-color: #fde8e8 !important;
    border: 1px solid var(--danger) !important;
}

div.mpform_missing {
    background-color: var(--danger);
    border: 1px solid #7d1d1d;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 12px;
}

span.mpform_required {
    color: var(--danger);
}

span.mpform_small {
    font-size: 11px;
    color: var(--muted);
}

div.mpform_results {
    background-color: var(--green-soft);
    border: 1px solid var(--green);
    color: #2c6524;
    padding: 12px;
    border-radius: 12px;
}

.mpform_hiddenfield,
.nixhier,
textarea[name^='field'],
label[for^='field'] {
    display: none !important;
}

/* ==========================================================================
   BUTTON-GROUP (SUBMIT & WHATSAPP NEBENEINANDER)
   ========================================================================== */

.button-group,
div.mpform div.submitbox,
div.mpform .actions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    margin-top: 20px !important;
    width: 100% !important;
    clear: both !important;
}

/* Beide Buttons teilen sich gleichmäßig den Platz */
.button-group input[type="submit"],
.button-group .btn-submit,
.button-group .btn-whatsapp,
div.mpform .actions .send.mail,
div.mpform .actions button[type="submit"],
#waBtn {
    flex: 1 !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    transition: background 0.2s ease !important;
}

/* Linker Submit-Button (Dunkelblau) */
.button-group input[type="submit"],
.button-group .btn-submit,
div.mpform .actions .send.mail,
div.mpform .actions button[type="submit"] {
    background: var(--blue) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(36, 52, 95, 0.15) !important;
}

.button-group input[type="submit"]:hover,
div.mpform .actions .send.mail:hover {
    background: #18243a !important;
}

/* Rechter WhatsApp-Button (Grün) */
#waBtn,
.btn-whatsapp {
    background-color: #25D366 !important;
    color: #ffffff !important;
    display: inline-flex !important;
}

#waBtn:hover,
.btn-whatsapp:hover {
    background-color: #1da851 !important;
}

/* ==========================================================================
   FOOTER & RESPONSIVE ANPASSUNGEN
   ========================================================================== */

div.mpform footer,
.contact + footer {
    text-align: center !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    margin: 18px 8px !important;
    clear: both !important;
    display: block !important;
}

@media (max-width: 600px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-grid .full-width {
        grid-column: span 1;
    }

    .button-group,
    div.mpform div.submitbox,
    div.mpform .actions {
        flex-direction: column !important;
    }
    
    .button-group input[type="submit"],
    .button-group .btn-submit,
    .button-group .btn-whatsapp,
    #waBtn {
        width: 100% !important;
    }
}