/* Gravity Forms #5 (Heizungssysteme) + #6 (Kühlsysteme) — Wasseranalyse anfordern.
   CI-Anpassung des Orbital-Themes: erst dessen Custom Properties umbiegen,
   danach nur noch das, was Tokens allein nicht können (Layout, Sections,
   Choice-Spalten, Buttons). Scoped auf data-formid, gilt also überall,
   wo diese beiden Formulare eingebettet sind. */

.gform_wrapper:has(form[data-formid="5"]),
.gform_wrapper:has(form[data-formid="6"]) {
    /* ── Orbital-Tokens auf Thermochema-Palette ─────────────────────── */
    --gf-color-primary: var(--thch-color-primary, #1D245D) !important;
    --gf-color-primary-rgb: 29, 36, 93 !important;
    --gf-color-primary-contrast: var(--thch-color-neutral, #EAECF0) !important;
    --gf-color-primary-darker: var(--thch-color-secondary, #161B37) !important;
    --gf-color-primary-lighter: var(--thch-color-accent, #0066FF) !important;

    --gf-color-in-ctrl-primary: var(--thch-color-accent, #0066FF) !important;
    --gf-color-in-ctrl-primary-rgb: 0, 102, 255 !important;
    --gf-color-in-ctrl-primary-contrast: #FFFFFF !important;
    --gf-color-in-ctrl-primary-darker: #0052CC !important;

    --gf-color-in-ctrl-contrast: var(--thch-color-primary, #1D245D) !important;
    --gf-color-out-ctrl-dark: var(--thch-color-tertiary-700, #7B7767) !important;
    --gf-color-out-ctrl-dark-darker: var(--thch-color-primary, #1D245D) !important;

    --gf-ctrl-border-color: rgba(29, 36, 93, 0.25) !important;
    --gf-ctrl-label-color-primary: var(--thch-color-primary, #1D245D) !important;
    --gf-ctrl-label-color-secondary: var(--thch-color-tertiary-700, #7B7767) !important;
    --gf-radius: 0.5rem !important;

    /* Schritt-Badges: erledigt = Navy mit hellem Haken (wie die aktive Nummer) */
    --gf-field-pg-steps-number-bg-color-complete: var(--thch-color-primary, #1D245D) !important;
    --gf-field-pg-steps-number-border-color-complete: var(--thch-color-primary, #1D245D) !important;
    --gf-field-pg-steps-number-color-complete: var(--thch-color-neutral, #EAECF0) !important;
    --gf-font-size-secondary: 1rem !important;
    --gf-font-size-tertiary: 0.9375rem !important;

    /* eigene Tokens für die Regeln unten */
    --thchf-gap: 2rem;
    --thchf-line: rgba(173, 167, 145, 0.5);

    /* ── Karte ─────────────────────────────────────────────────────── */
    max-width: 62rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--thch-color-white, #fff);
    border: 1px solid var(--thchf-line);
    border-radius: 1.5rem;
    box-shadow: 0 1.25rem 3rem rgba(29, 36, 93, 0.06);
    font-family: var(--thch-font-body, "Aptos", system-ui, sans-serif);
    color: var(--thch-color-primary, #1D245D);
}

/* ── Feldraster ────────────────────────────────────────────────────── */

form[data-formid="5"] .gform_fields,
form[data-formid="6"] .gform_fields {
    row-gap: var(--thchf-gap) !important;
    column-gap: var(--thchf-gap) !important;
}

/* ── Section-Überschriften ─────────────────────────────────────────── */

form[data-formid="5"] .gsection,
form[data-formid="6"] .gsection {
    border-bottom: 1px solid var(--thchf-line) !important;
    padding: 0 0 1rem !important;
    margin: 1.5rem 0 0.5rem !important;
}

form[data-formid="5"] .gsection:first-child,
form[data-formid="6"] .gsection:first-child {
    margin-top: 0 !important;
}

form[data-formid="5"] .gsection_title,
form[data-formid="6"] .gsection_title {
    font-family: var(--thch-font-heading, "Aptos Display", system-ui, sans-serif);
    font-size: var(--thch-h3, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--thch-color-primary, #1D245D);
    margin: 0;
    padding: 0;
    border: 0;
}

form[data-formid="5"] .gsection_description,
form[data-formid="6"] .gsection_description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--thch-color-tertiary-700, #7B7767);
    margin: 0.5rem 0 0;
    padding: 0;
}

/* ── Labels, Beschreibungen, Pflichtfeld-Marker ────────────────────── */

form[data-formid="5"] .gfield_label,
form[data-formid="6"] .gfield_label,
form[data-formid="5"] .gfield_label_before_complex,
form[data-formid="6"] .gfield_label_before_complex {
    font-family: var(--thch-font-body, "Aptos", system-ui, sans-serif);
    font-size: 0.9375rem;   /* Label = Metadatum, kleiner als der Feldinhalt */
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--thch-color-primary, #1D245D);
    margin-bottom: 0.625rem;
}

form[data-formid="5"] .gfield_required,
form[data-formid="6"] .gfield_required {
    color: var(--thch-color-tertiary-700, #7B7767);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
}

form[data-formid="5"] .gfield_description,
form[data-formid="6"] .gfield_description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--thch-color-tertiary-700, #7B7767);
    padding-top: 0.375rem;
}

/* ── Eingabefelder ─────────────────────────────────────────────────── */

form[data-formid="5"] input[type="text"],
form[data-formid="5"] input[type="email"],
form[data-formid="5"] input[type="tel"],
form[data-formid="5"] input[type="number"],
form[data-formid="5"] input[type="date"],
form[data-formid="5"] select,
form[data-formid="5"] textarea,
form[data-formid="6"] input[type="text"],
form[data-formid="6"] input[type="email"],
form[data-formid="6"] input[type="tel"],
form[data-formid="6"] input[type="number"],
form[data-formid="6"] input[type="date"],
form[data-formid="6"] select,
form[data-formid="6"] textarea {
    font-family: var(--thch-font-body, "Aptos", system-ui, sans-serif) !important;
    font-size: 1.0625rem !important;  /* Inhalt > Label; nie unter 1rem (iOS-Zoom) */
    line-height: 1.5 !important;
    color: var(--thch-color-primary, #1D245D) !important;
    background: var(--thch-color-white, #fff) !important;
    border: 1px solid rgba(29, 36, 93, 0.25) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    min-height: 3rem;
    width: 100% !important; /* GF gibt Number-Feldern sonst eine eigene Breite */
    max-width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* GF gibt Textareas ueber .small/.medium/.large eine min-block-size —
   deshalb hier ueber dieselbe Eigenschaft normalisieren. */
form[data-formid="5"] textarea,
form[data-formid="6"] textarea,
form[data-formid="5"] .gfield textarea.small,
form[data-formid="5"] .gfield textarea.medium,
form[data-formid="5"] .gfield textarea.large,
form[data-formid="6"] .gfield textarea.small,
form[data-formid="6"] .gfield textarea.medium,
form[data-formid="6"] .gfield textarea.large {
    block-size: 7.5rem !important;
    min-block-size: 7.5rem !important;
    resize: vertical;
}

form[data-formid="5"] input:focus,
form[data-formid="5"] select:focus,
form[data-formid="5"] textarea:focus,
form[data-formid="6"] input:focus,
form[data-formid="6"] select:focus,
form[data-formid="6"] textarea:focus {
    border-color: var(--thch-color-accent, #0066FF) !important;
    box-shadow: 0 0 0 0.1875rem rgba(0, 102, 255, 0.15) !important;
    outline: none !important;
}

form[data-formid="5"] ::placeholder,
form[data-formid="6"] ::placeholder {
    color: rgba(29, 36, 93, 0.45);
}

/* ── Radios & Checkboxen ───────────────────────────────────────────── */

/* Lange Optionslisten in Spalten statt einer endlosen Kolonne */
form[data-formid="5"] .gfield_radio,
form[data-formid="5"] .gfield_checkbox,
form[data-formid="6"] .gfield_radio,
form[data-formid="6"] .gfield_checkbox {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.5rem;
}

/* Jede Option ist eine Karte: klare Trefferfläche, sichtbarer Auswahlzustand.
   GF setzt .gchoice selbst auf grid mit column-gap 0 — daher !important,
   sonst kleben die Labels an der Box. */
form[data-formid="5"] .gchoice,
form[data-formid="6"] .gchoice {
    display: flex !important;
    align-items: center;
    gap: 0.75rem !important;
    min-height: 3rem; /* Trefferfläche ≥ 44px */
    padding: 0.625rem 1rem;
    border: 1px solid var(--thchf-line);
    border-radius: 0.75rem;
    background: var(--thch-color-white, #fff);
    transition: border-color 0.15s, background 0.15s;
}

form[data-formid="5"] .gchoice:hover,
form[data-formid="6"] .gchoice:hover {
    border-color: rgba(0, 102, 255, 0.4);
}

form[data-formid="5"] .gchoice:has(input:checked),
form[data-formid="6"] .gchoice:has(input:checked) {
    border-color: var(--thch-color-accent, #0066FF);
    background: rgba(0, 102, 255, 0.05);
}

form[data-formid="5"] .gchoice:has(input:focus-visible),
form[data-formid="6"] .gchoice:has(input:focus-visible) {
    outline: 0.125rem solid var(--thch-color-accent, #0066FF);
    outline-offset: 0.125rem;
}

form[data-formid="5"] .gchoice input[type="radio"],
form[data-formid="5"] .gchoice input[type="checkbox"],
form[data-formid="5"] .ginput_container_consent input[type="checkbox"],
form[data-formid="6"] .gchoice input[type="radio"],
form[data-formid="6"] .gchoice input[type="checkbox"],
form[data-formid="6"] .ginput_container_consent input[type="checkbox"] {
    accent-color: var(--thch-color-accent, #0066FF);
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0;
    margin: 0 !important;
    cursor: pointer;
}

form[data-formid="5"] .gchoice label,
form[data-formid="6"] .gchoice label,
form[data-formid="5"] .ginput_container_consent label,
form[data-formid="6"] .ginput_container_consent label {
    font-size: 1.0625rem !important;
    font-weight: 400 !important;
    line-height: 1.5;
    color: var(--thch-color-primary, #1D245D) !important;
    cursor: pointer;
    margin: 0 !important;
    max-width: none !important;
}

/* wie .gchoice: GF setzt inline-grid mit column-gap 0 */
form[data-formid="5"] .ginput_container_consent,
form[data-formid="6"] .ginput_container_consent {
    display: flex !important;
    align-items: center;
    gap: 0.75rem !important;
    min-height: 2.75rem;
}

form[data-formid="5"] .gfield_consent_label a,
form[data-formid="6"] .gfield_consent_label a {
    color: var(--thch-color-accent, #0066FF);
    text-decoration: underline;
    text-underline-offset: 0.125em;
}

/* Fieldset-Legenden verhalten sich wie Labels */
form[data-formid="5"] legend.gfield_label,
form[data-formid="6"] legend.gfield_label {
    padding: 0;
    float: none;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

form[data-formid="5"] .gform-page-footer,
form[data-formid="6"] .gform-page-footer,
form[data-formid="5"] .gform_footer,
form[data-formid="6"] .gform_footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid var(--thchf-line);
}

form[data-formid="5"] .gform_next_button,
form[data-formid="5"] .gform_previous_button,
form[data-formid="5"] .gform_button,
form[data-formid="6"] .gform_next_button,
form[data-formid="6"] .gform_previous_button,
form[data-formid="6"] .gform_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--thch-font-heading, "Aptos Display", system-ui, sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    border: none !important;
    border-radius: 1.875rem !important;
    padding: 0.75rem 1.75rem !important;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* Primär: Weiter / Absenden */
form[data-formid="5"] .gform_next_button,
form[data-formid="5"] .gform_button,
form[data-formid="6"] .gform_next_button,
form[data-formid="6"] .gform_button {
    background: var(--thch-color-primary, #1D245D) !important;
    color: var(--thch-color-neutral, #EAECF0) !important;
    margin-left: auto !important; /* Weiter rechts, Zurück links */
}

form[data-formid="5"] .gform_next_button:hover,
form[data-formid="5"] .gform_button:hover,
form[data-formid="6"] .gform_next_button:hover,
form[data-formid="6"] .gform_button:hover {
    background: var(--thch-color-secondary, #161B37) !important;
    color: var(--thch-color-white, #fff) !important;
}

/* Sekundär: Zurück */
form[data-formid="5"] .gform_previous_button,
form[data-formid="6"] .gform_previous_button {
    background: var(--thch-color-neutral, #EAECF0) !important;
    color: var(--thch-color-primary, #1D245D) !important;
}

form[data-formid="5"] .gform_previous_button:hover,
form[data-formid="6"] .gform_previous_button:hover {
    background: #DDE0E8 !important;
    color: var(--thch-color-primary, #1D245D) !important;
}

form[data-formid="5"] .gform-theme-button:focus-visible,
form[data-formid="6"] .gform-theme-button:focus-visible,
form[data-formid="5"] .gform_button:focus-visible,
form[data-formid="6"] .gform_button:focus-visible {
    outline: 0.125rem solid var(--thch-color-accent, #0066FF) !important;
    outline-offset: 0.125rem;
}

/* ── Schrittanzeige (mehrseitiges Formular) ────────────────────────── */

.gform_wrapper:has(form[data-formid="5"]) .gf_page_steps,
.gform_wrapper:has(form[data-formid="6"]) .gf_page_steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    border: 0 !important;
    padding: 0 0 1.5rem !important;
    margin: 0 0 2rem !important;
    border-bottom: 1px solid var(--thchf-line) !important;
}

.gform_wrapper:has(form[data-formid="5"]) .gf_step,
.gform_wrapper:has(form[data-formid="6"]) .gf_step {
    display: flex !important;
    align-items: center;
    gap: 0.625rem;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--thch-font-body, "Aptos", system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--thch-color-tertiary-700, #7B7767);
    opacity: 1 !important;
}

.gform_wrapper:has(form[data-formid="5"]) .gf_step_number,
.gform_wrapper:has(form[data-formid="6"]) .gf_step_number {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--thchf-line) !important;
    background: transparent !important;
    color: var(--thch-color-tertiary-700, #7B7767) !important;
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 !important;
    padding: 0 !important;
}

.gform_wrapper:has(form[data-formid="5"]) .gf_step_label,
.gform_wrapper:has(form[data-formid="6"]) .gf_step_label {
    text-transform: none !important;
}

/* Erledigte Schritte: Navy gefüllt wie die aktive Nummer, Haken hell */
.gform_wrapper:has(form[data-formid="5"]) .gf_step_completed .gf_step_number,
.gform_wrapper:has(form[data-formid="6"]) .gf_step_completed .gf_step_number {
    background: var(--thch-color-primary, #1D245D) !important;
    border-color: var(--thch-color-primary, #1D245D) !important;
    color: var(--thch-color-neutral, #EAECF0) !important;
}

/* Aktueller Schritt: Navy gefüllt, Label betont */
.gform_wrapper:has(form[data-formid="5"]) .gf_step_active,
.gform_wrapper:has(form[data-formid="6"]) .gf_step_active {
    color: var(--thch-color-primary, #1D245D);
    font-weight: 600;
}

.gform_wrapper:has(form[data-formid="5"]) .gf_step_active .gf_step_number,
.gform_wrapper:has(form[data-formid="6"]) .gf_step_active .gf_step_number {
    background: var(--thch-color-primary, #1D245D) !important;
    border-color: var(--thch-color-primary, #1D245D) !important;
    color: var(--thch-color-neutral, #EAECF0) !important;
}

.gform_wrapper:has(form[data-formid="5"]) .gf_step_active .gf_step_label,
.gform_wrapper:has(form[data-formid="6"]) .gf_step_active .gf_step_label {
    color: var(--thch-color-primary, #1D245D) !important;
    font-weight: 600;
}

/* ── Validierung ───────────────────────────────────────────────────── */

.gform_wrapper:has(form[data-formid="5"]) .gform_validation_errors,
.gform_wrapper:has(form[data-formid="6"]) .gform_validation_errors {
    border: 1px solid #C0362C !important;
    border-radius: 0.75rem !important;
    background: rgba(192, 54, 44, 0.06) !important;
    box-shadow: none !important;
    color: #C0362C !important;
}

.gform_wrapper:has(form[data-formid="5"]) .gform_validation_errors h2,
.gform_wrapper:has(form[data-formid="6"]) .gform_validation_errors h2 {
    font-family: var(--thch-font-heading, "Aptos Display", system-ui, sans-serif);
    color: #C0362C !important;
}

form[data-formid="5"] .gfield_error .gfield_label,
form[data-formid="6"] .gfield_error .gfield_label {
    color: #C0362C !important;
}

form[data-formid="5"] .gfield_validation_message,
form[data-formid="6"] .gfield_validation_message {
    font-size: 0.9375rem;
    border: none !important;
    border-radius: 0.5rem !important;
    background: rgba(192, 54, 44, 0.08) !important;
    color: #C0362C !important;
    padding: 0.5rem 0.75rem !important;
}

form[data-formid="5"] .gfield_error input,
form[data-formid="5"] .gfield_error textarea,
form[data-formid="6"] .gfield_error input,
form[data-formid="6"] .gfield_error textarea {
    border-color: #C0362C !important;
}

/* ── Bestätigungsseite ─────────────────────────────────────────────── */

/* Nach dem Absenden ist das <form> und damit data-formid weg — die Karte oben
   greift nicht mehr. Deshalb hier dieselbe Karte für die Bestätigung, gescoped
   auf die Wrapper-IDs der beiden Formulare (frueher ungescoped: das faerbte
   auch Formulare, die gar nicht hierher gehoeren). */
#gform_confirmation_wrapper_5,
#gform_confirmation_wrapper_6 {
    max-width: 62rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--thch-color-white, #fff);
    border: 1px solid rgba(173, 167, 145, 0.5);
    border-radius: 1.5rem;
    box-shadow: 0 1.25rem 3rem rgba(29, 36, 93, 0.06);
    font-family: var(--thch-font-body, "Aptos", system-ui, sans-serif);
    color: var(--thch-color-primary, #1D245D);
}

/* Die Karte IST schon der Hinweisrahmen — die Standardbox aus
   gform-confirmation.css waere hier eine zweite Box auf gleichem Weiss. */
#gform_confirmation_wrapper_5 .gform_confirmation_message,
#gform_confirmation_wrapper_6 .gform_confirmation_message {
    background: transparent !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 48rem) {
    .gform_wrapper:has(form[data-formid="5"]),
    .gform_wrapper:has(form[data-formid="6"]) {
        --thchf-gap: 1.25rem;
        padding: 1.25rem;
        border-radius: 1rem;
    }

    form[data-formid="5"] .gfield_radio,
    form[data-formid="5"] .gfield_checkbox,
    form[data-formid="6"] .gfield_radio,
    form[data-formid="6"] .gfield_checkbox {
        grid-template-columns: 1fr;
    }

    form[data-formid="5"] .gform-page-footer,
    form[data-formid="6"] .gform-page-footer,
    form[data-formid="5"] .gform_footer,
    form[data-formid="6"] .gform_footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    form[data-formid="5"] .gform_next_button,
    form[data-formid="5"] .gform_button,
    form[data-formid="6"] .gform_next_button,
    form[data-formid="6"] .gform_button {
        margin-left: 0 !important;
    }
}