/* Anfrageformular – Karte auf Primärfarben-Hintergrund */
form[id^="anfrageformular"] {
    --af-radius: var(--corners-m, 16px);
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px);
    background: var(--color-neutral-0, #fff);
    color: var(--color-neutral-90, #220b01);
    border-radius: var(--corners-l, 24px);
    box-shadow: 0 20px 50px rgba(34, 11, 1, 0.25);
    display: grid;
    gap: 20px;
}

form[id^="anfrageformular"] > div:has(input[type="hidden"]) { display: none; }

form[id^="anfrageformular"] h2 {
    margin: 0 0 4px;
    font-family: var(--headline-family, "Playfair"), serif;
    font-weight: 500;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.15;
    color: var(--color-neutral-90, #220b01);
}

form[id^="anfrageformular"] .form-element { margin: 0; }

form[id^="anfrageformular"] .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutral-80, #49362d);
}

form[id^="anfrageformular"] .required {
    color: var(--color-primary-100, #b45023);
    margin-left: 2px;
}

form[id^="anfrageformular"] .form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font: inherit;
    font-size: 16px;
    color: var(--color-neutral-90, #220b01);
    background: var(--color-neutral-10, #fbf2ee);
    border: 2px solid var(--color-neutral-20, #ecdfd9);
    border-radius: var(--corners-s, 8px);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

form[id^="anfrageformular"] .form-control::placeholder { color: var(--color-neutral-50, #ab978e); }

form[id^="anfrageformular"] .form-control:hover { border-color: var(--color-neutral-40, #bca59a); }

form[id^="anfrageformular"] .form-control:focus {
    outline: none;
    background: var(--color-neutral-0, #fff);
    border-color: var(--color-primary-100, #b45023);
    box-shadow: 0 0 0 4px rgba(180, 80, 35, 0.18);
}

form[id^="anfrageformular"] textarea.form-control { min-height: 150px; resize: vertical; }

form[id^="anfrageformular"] .is-invalid,
form[id^="anfrageformular"] .form-control:user-invalid { border-color: var(--color-error, #d70000); }

form[id^="anfrageformular"] .invalid-feedback,
form[id^="anfrageformular"] .error {
    margin-top: 6px;
    font-size: 14px;
    color: var(--color-error, #d70000);
}

form[id^="anfrageformular"] .actions { margin-top: 4px; }

form[id^="anfrageformular"] .form-navigation { display: flex; }

form[id^="anfrageformular"] .btn,
form[id^="anfrageformular"] button[type="submit"] {
    cursor: pointer;
    width: 100%;
    padding: 16px 28px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-neutral-0, #fff);
    background: var(--color-primary-100, #b45023);
    border: 2px solid var(--color-primary-100, #b45023);
    border-radius: var(--corners-l, 24px);
    transition: background-color .15s, transform .1s;
}

form[id^="anfrageformular"] .btn:hover,
form[id^="anfrageformular"] button[type="submit"]:hover {
    background: var(--color-neutral-80, #49362d);
    border-color: var(--color-neutral-80, #49362d);
}

form[id^="anfrageformular"] .btn:active { transform: translateY(1px); }

form[id^="anfrageformular"] .btn:focus-visible {
    outline: 3px solid var(--color-primary-75, #dd997c);
    outline-offset: 3px;
}

@media (min-width: 640px) {
    form[id^="anfrageformular"] { grid-template-columns: 1fr 1fr; }
    form[id^="anfrageformular"] > *:not(.form-element-text):not(.form-element-email) { grid-column: 1 / -1; }
    form[id^="anfrageformular"] .form-element-textarea { grid-column: 1 / -1; }
}

@media (min-width: 640px) {
    form[id^="anfrageformular"] .form-navigation .btn { width: auto; min-width: 260px; }
}

/* Formular-Block schließt bündig ans Hero an (kein weißer Streifen) */
.component:has(> .component__content form[id^="anfrageformular"]),
.component:has(form[id^="anfrageformular"]) {
    margin-top: 0 !important;
}