<style>
/* --- 1. SCHRIFTART --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
body, .booking_layout_wrapper, .el-form, input, button, textarea, select, .el-form-item__label {
    font-family: 'DM Sans', sans-serif !important;
}

/* --- 2. BUTTON RADIUS --- */
div.bk-sticky-foot .el-button,
div.bk-sticky-foot button,
.bk-sticky-foot__right button {
    border-radius: 500px !important;
}

/* --- 3. LAYOUT & CONTAINER --- */
.bs-gi__cf {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    border-top: none !important;
    border: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Standard: Alle Fragen sind erst mal 100% breit */
.bs-gi__cf > div {
    width: 100% !important;
    margin-top: 0 !important;
}

/* --- 4. NEBENEINANDER (Half-Logik) --- */
.bs-gi__cf > div.half {
    width: 50% !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}
.bs-gi__cf > div.half .el-form-item__label {
    min-height: 42px !important;
    display: flex !important;
    align-items: flex-end !important;
    line-height: 1.2 !important;
    padding-bottom: 8px !important;
}

/* --- 5. TRENNLINIE & LEGAL --- */
.consent-separator-line {
    border-top: 1px solid #e0e0e0 !important;
    margin-top: 30px !important;
    padding-top: 15px !important;
    width: 100% !important;
}

/* ————— MOBILE OPTIMIERUNG (jetzt wirklich alles untereinander) ————— */
@media (max-width: 768px) {
    .bs-gi__cf,
    .bs-gi__cf > div,
    .bs-gi__cf > div.half,
    .bs-gi__cf > .el-form-item,
    .bs-gi__cf .el-form-item {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: block !important;
    }

    .bs-gi__cf > div,
    .bs-gi__cf > .el-form-item {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 16px !important;
    }

    .bs-gi__cf > div.half .el-form-item__label,
    .el-form-item__label {
        min-height: auto !important;
        padding-bottom: 4px !important;
    }
}
</style>

<script>
function smartSortLegalFields() {
    const container = document.querySelector('.bs-gi__cf');
    if (!container || container.classList.contains('js-smart-sorted')) return false;
    const allItems = Array.from(container.children);
    const legalKeywords = ["Einverstanden", "AGB", "akzeptiere", "Datenschutz", "Zustimmung"];
    const legalItems = allItems.filter(el =>
        legalKeywords.some(keyword => el.innerText.includes(keyword))
    );
    if (legalItems.length > 0) {
        console.log("Smart Sort aktiv: " + legalItems.length + " Legal-Felder nach unten verschoben");
        legalItems.forEach((item, index) => {
            if (index === 0) {
                item.classList.add('consent-separator-line');
            }
            container.appendChild(item);
        });
    }
    container.classList.add('js-smart-sorted');
    return true;
}

const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
        if (mutation.addedNodes.length && smartSortLegalFields()) {
            observer.disconnect();
            return;
        }
    }
});
observer.observe(document.body, { childList: true, subtree: true });

const fallbackInterval = setInterval(() => {
    if (smartSortLegalFields()) {
        clearInterval(fallbackInterval);
    }
}, 150);

if (document.readyState === 'complete' || document.readyState === 'interactive') {
    smartSortLegalFields();
} else {
    document.addEventListener('DOMContentLoaded', smartSortLegalFields);
    window.addEventListener('load', smartSortLegalFields);
}
</script>