/* ============================================================
   Go Form – Frontend Styles
   ============================================================ */

:root {
    /* Brand defaults — Delta Web Solution. These are the DEFAULTS only;
       the per-form Design Configurator still overrides --gf-* at runtime. */
    --gf-primary:    #00375B;
    --gf-primary-dk: #002340;
    --gf-primary-lt: #eaf3fa;
    --gf-accent:     #0080C0;
    --gf-success:    #057a55;
    --gf-error:      #c81e1e;
    --gf-border:     #d1d5db;
    --gf-bg:         #f9fafb;
    --gf-text:       #111827;
    --gf-muted:      #6b7280;
    --gf-radius:     10px;
    --gf-shadow:     0 1px 3px rgba(0,0,0,.1);
}

/* ── Container ────────────────────────────────────────────── */

/* Both class names supported */
.go-form,
.ultimate-form {
    /* Typography */
    font-family: var(--gf-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size:   var(--gf-input-size, 15px);
    color:       var(--gf-text, #111827);

    /* Card appearance — comes from design configurator vars.
       !important so Elementor / theme container CSS can't override the form
       background in the live/embedded context (same reason as padding below). */
    background:    var(--gf-bg, #f9fafb) !important;
    /* !important nötig damit Elementor / Theme-CSS das Padding nicht überschreibt */
    padding:       var(--gf-form-pad-v, 30px) var(--gf-form-pad-h, 30px) !important;
    /* 2.9.1 — Form-Wrapper-Radius eigenständig konfigurierbar (form_radius).
       Fallback 12px = bisheriger Hardcode. */
    border-radius: var(--gf-form-radius, 12px);
    box-shadow:    0 4px 24px rgba(0,0,0,.08);
    /* 2.9.1 — solid form-wrapper border (own tokens, width 0 = no border).
       Gradient mode is handled by .gf-form-border-grad below. */
    border: var(--gf-form-border-w, 0px) solid var(--gf-form-border-color, transparent);

    /* Responsive: max-width from design setting, always 100% wide */
    width:      100%;
    max-width:  var(--gf-form-max-width, 1080px);
    margin:     0 auto;
    box-sizing: border-box;
}

/* ──────────── 2.9.1 — Gradient form border ────────────
   Standard "background-clip border-image" trick so the border respects
   the form's border-radius (border-image alone doesn't). Two stacked
   backgrounds: the inner bg fills padding-box, the gradient fills the
   border-box behind it. Width 0 → invisible.
*/
.go-form.gf-form-border-grad,
.ultimate-form.gf-form-border-grad {
    border-color: transparent !important;
    /* 2.9.1 — Mindestbreite 2 px wenn Gradient aktiv: der bg-clip-Trick
       braucht > 0 Border-Width, sonst wird der border-box-Layer voll-
       ständig vom padding-box-Layer überdeckt und der Gradient ist
       unsichtbar. max() lässt User-Setting > 2 px greifen, 0/1 wird
       defensiv auf 2 angehoben. */
    border-width: max( var(--gf-form-border-w, 0px), 2px ) !important;
    background:
        linear-gradient(var(--gf-bg, #f9fafb), var(--gf-bg, #f9fafb)) padding-box,
        linear-gradient(var(--gf-form-border-grad-angle, 135deg), var(--gf-form-border-color, #00375B), var(--gf-form-border-color-2, #0080C0)) border-box !important;
}
/* 2.9.1 — Brand/Button/Background Gradients direkt am Color-Picker.
   Wrapper-Klassen werden vom Shortcode gesetzt sobald <key>_grad einen
   gültigen Hex hält. Solider Fallback bleibt aktiv, wenn keine Klasse da ist. */
.gf-has-bg-grad.go-form,
.gf-has-bg-grad.ultimate-form {
    background: var(--gf-bg-grad, var(--gf-bg, #f9fafb)) !important;
}
/* Buttons: dedizierter Button-Gradient (gf-has-btn-grad) hat Vorrang vor
   Brand-Gradient (gf-has-primary-grad); beides überschreibt die solide
   background-color, die weiter unten in den Button-Regeln gesetzt wird. */
.gf-has-primary-grad .gf-btn-primary,
.gf-has-primary-grad button[type="submit"] {
    background: var(--gf-primary-grad, var(--gf-primary, #00375B)) !important;
}
.gf-has-btn-grad .gf-btn-primary,
.gf-has-btn-grad button[type="submit"] {
    background: var(--gf-btn-primary-grad, var(--gf-btn-primary, var(--gf-primary, #00375B))) !important;
}
/* Hover bleibt solid (Primary-Dark), damit der visuelle Hover-State
   weiter funktioniert — Gradients lassen sich nicht sauber animieren. */
/* Step-Gradient: bestehende --gf-step-grad-angle-Variable in die Gradients
   einfließen lassen, damit der User-Winkel greift. */
.gf-progress--grad.gf-progress--dots .gf-progress-node.is-active .gf-progress-num,
.gf-progress--grad.gf-progress--arrows .gf-progress-node.is-active,
.gf-progress--grad.gf-progress--segments .gf-progress-segment.is-done {
    background: linear-gradient(var(--gf-step-grad-angle, 135deg), var(--gf-step-primary, #00375B), var(--gf-step-accent, #0080C0)) !important;
}

/* ──────────── 2.9.1 — Step indicator owns its colours ────────────
   Inside .gf-progress, re-alias the primary/accent tokens to the step
   tokens. Every variant rule (gf-progress--bar/dots/arrows/ring/segments)
   already uses var(--gf-primary)/var(--gf-accent), so no per-variant
   changes needed — the indicator now follows step_color_primary /
   step_color_accent. When those are empty, the inline-style fallback in
   ultimate_form_design_vars() copies the global Primary in.
   The gradient-toggle is purely visual: when active, the user sees a
   primary→accent gradient on bar/segments/ring/arrows. */
.gf-progress {
    --gf-primary: var(--gf-step-primary, #00375B);
    --gf-accent:  var(--gf-step-accent,  #0080C0);
}
/* 2.9.1 — Bar-Fill Gradient (90deg, immer horizontal). Die übrigen
   Varianten (dots/arrows/segments) werden weiter oben mit
   var(--gf-step-grad-angle, 135deg) gerendert; eine zweite Regel hier
   mit hardcodedem 135deg überschrieb sonst den User-Winkel — entfernt. */
.gf-progress--grad .gf-progress-fill {
    background: linear-gradient(90deg, var(--gf-step-primary, #00375B), var(--gf-step-accent, #0080C0)) !important;
}
/* 2.9.1 — segments .is-active fehlte vorher (nur .is-done abgedeckt).
   Aktiver Segment-Slot blieb solid statt Gradient. */
.gf-progress--grad.gf-progress--segments .gf-progress-segment.is-active {
    background: linear-gradient(var(--gf-step-grad-angle, 135deg), var(--gf-step-primary, #00375B), var(--gf-step-accent, #0080C0)) !important;
}
/* 2.9.1 — Ring variant gradient stroke: the SVG defs in the
   shortcode use id="gf-ring-<form-id>" (per-instance, unique).
   We can't target that from CSS (the id is dynamic), but the
   shortcode already emits stroke="url(#gf-ring-<id>)" inline on
   the ring-fill <circle>, so no CSS rule is needed — the inline
   attribute wins. An earlier rule pointed at a non-existent id
   "gf-step-grad", which made Firefox/Chrome silently fall back
   to currentColor. The rule is removed to avoid that mismatch.
   When step_color_gradient is on, the inline url() already paints
   the primary→accent stroke. */

/* ──────────── 2.9.1 — Plain form mode ────────────
   When the user wraps the form in an Elementor / Gutenberg container
   that already provides background, border or padding, the form's own
   card styling (rounded corners, drop shadow, opaque background,
   forced padding) overlaps that wrapper. Result: the wrapper's border
   looks broken at the corners because the form's 12 px radius cuts
   into it. With "Hide form card style" enabled in the Design Editor,
   the wrapper gets .gf-no-card and the entire card chrome is
   neutralised so the parent container takes over verbatim. */
.go-form.gf-no-card,
.ultimate-form.gf-no-card {
    background:    transparent !important;
    border-radius: 0           !important;
    box-shadow:    none        !important;
    padding:       0           !important;
}
/* 2.9.1 — Plain-form + gradient-border combination: when BOTH toggles
   are on, the gradient-border rule above paints two stacked backgrounds
   that would reintroduce a card look on top of the now-transparent
   Plain-form wrapper. Higher-specificity reset wins so the Plain-form
   intent (transparent, no border-radius) sticks; the gradient simply
   isn't shown because there is no card to paint a border around.
   If the user wants the gradient border, they should turn Plain-form
   off — Plain-form's whole point is to delegate framing to the parent
   container (Elementor, Gutenberg). */
.go-form.gf-no-card.gf-form-border-grad,
.ultimate-form.gf-no-card.gf-form-border-grad {
    background:    transparent !important;
    border-color:  transparent !important;
}

/* Global font normalization for all form controls */
.go-form input,
.go-form select,
.go-form textarea,
.go-form button,
.ultimate-form input,
.ultimate-form select,
.ultimate-form textarea,
.ultimate-form button {
    font-family: inherit;
    font-size: inherit;
}

/* ── 2-Column layout (Elementor "columns" option) ─────────── */

.go-form.gf-cols-2 .gf-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.go-form.gf-cols-2 .gf-field-wrap.gf-full-width,
.go-form.gf-cols-2 .gf-field-wrap[data-type="section"],
.go-form.gf-cols-2 .gf-field-wrap[data-type="html"],
.go-form.gf-cols-2 .gf-field-wrap[data-type="checkbox_group"] {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .go-form.gf-cols-2 .gf-fields {
        grid-template-columns: 1fr;
    }
}

/* ── Form Logo ────────────────────────────────────────────── */

.gf-form-logo {
    display: flex;
    align-items: center;
    margin-bottom: var(--gf-logo-gap, 24px);
}

.gf-logo-img {
    /* Height is set inline via design setting; width scales proportionally */
    height: var(--gf-logo-height, 40px);
    width: auto;
    max-width: 240px;
    display: block;
    object-fit: contain;
    /* Prevent theme borders/backgrounds from touching the logo */
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ── Form Title (global, sits above the step indicator) ──
   2.9.1 — independent of per-step <h2>s. Default font picks up
   --gf-font-family from the design configurator, colour comes from
   --gf-heading-color (falls back to --gf-text). The 28 px bottom
   margin matches .gf-progress so spacing is consistent whether the
   step indicator is shown or hidden. */
.gf-form-title-wrap { margin-bottom: 18px; }
.gf-form-title {
    margin: 0;
    font-family: var(--gf-heading-font, var(--gf-font-family, inherit));
    font-size:   var(--gf-form-title-size, 28px);
    font-weight: var(--gf-form-title-weight, 700);
    color:       var(--gf-heading-color, var(--gf-text, #0f172a));
    line-height: 1.2;
}

/* ── Progress (Minimal Progress — nur aktueller Schritt sichtbar) ──────────
   Schmaler Balken + Schritt-Titel + „Schritt X von Y"-Counter.
   Skaliert für 2 oder 20 Schritte. Null Overflow-Probleme.
   ─────────────────────────────────────────────────────────────────────── */

.gf-progress {
    margin-bottom: 28px;
    position: relative;
}

.gf-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.gf-progress-current {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--gf-text, #111827);
}

.gf-progress-num {
    width: var(--gf-dot-size, 28px);
    height: var(--gf-dot-size, 28px);
    border-radius: 50%;
    background: var(--gf-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--gf-primary-lt, #eaf3fa);
}

.gf-progress-title {
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
}

.gf-progress-of {
    font-size: 11px;
    color: var(--gf-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    font-weight: 600;
}

.gf-progress-track {
    height: var(--gf-progress-h, 6px);
    background: var(--gf-border, #d1d5db);
    border-radius: 999px;
    overflow: hidden;
}

.gf-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gf-primary, #00375B), var(--gf-accent, #0080C0));
    border-radius: 999px;
    transition: width .4s ease;
    width: 0%;
}

/* ────────── 2.9.1 — 5 step-indicator variants ──────────
   Single markup, the variant modifier on .gf-progress hides
   the unused sub-elements. All variants honour the same
   --gf-primary / --gf-accent / --gf-border tokens, so the
   Design configurator's colour pickers keep working unchanged.
*/

/* Hide every variant-specific block by default. The variant
   modifier below re-enables the one it owns. */
.gf-progress-nodes,
.gf-progress-ring-wrap,
.gf-progress-segments { display: none; }

/* ── Variant: BAR (default, mockup 2) — keep current look ── */
.gf-progress--bar .gf-progress-meta    { display: flex; }
.gf-progress--bar .gf-progress-track   { display: block; }

/* ── Variant: DOTS (mockup 1) — connected nodes + label ── */
.gf-progress--dots .gf-progress-meta,
.gf-progress--dots .gf-progress-track  { display: none; }
.gf-progress--dots .gf-progress-nodes {
    display: flex; align-items: center; gap: 4px;
}
.gf-progress--dots .gf-progress-line {
    flex: 1; height: 2px; background: var(--gf-border, #e2e8f0);
    transition: background .3s;
    /* 2.9.1 — Linie auf Höhe des Kreis-Mittelpunkts. Ohne margin-top
       würde die Linie durch `align-items: center` (nodes-Container) in
       der Mitte der GANZEN Node (Kreis + Label) liegen — visuell weit
       unter den Dots. Margin-top schiebt sie auf Kreis-Höhe (Kreis 36
       hoch, –1 für die Linien-Hälfte = 17 px). */
    align-self: flex-start;
    margin-top: 17px;
}
.gf-progress--dots .gf-progress-line.is-done {
    background: linear-gradient(90deg, var(--gf-accent), var(--gf-primary));
}
.gf-progress--dots .gf-progress-node {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex: 0 0 auto;
}
.gf-progress--dots .gf-progress-node .gf-progress-num {
    width: 36px; height: 36px;
    background: var(--gf-border, #f1f5f9); color: var(--gf-muted, #94a3b8);
    border: 2px solid var(--gf-border, #e2e8f0);
    box-shadow: none;
    font-size: 14px;
}
.gf-progress--dots .gf-progress-node.is-done .gf-progress-num {
    background: var(--gf-primary-lt, #e6f3fb);
    color: var(--gf-primary); border-color: var(--gf-accent);
}
.gf-progress--dots .gf-progress-node.is-active .gf-progress-num {
    background: linear-gradient(135deg, var(--gf-primary), var(--gf-accent));
    color: #fff; border-color: var(--gf-accent);
    box-shadow: 0 0 0 4px rgba(0, 128, 192, .18);
}
.gf-progress--dots .gf-progress-node .gf-progress-label {
    font-size: 12px; color: var(--gf-muted); font-weight: 600;
}
.gf-progress--dots .gf-progress-node.is-active .gf-progress-label,
.gf-progress--dots .gf-progress-node.is-done .gf-progress-label {
    color: var(--gf-primary);
}

/* ── Variant: ARROWS (mockup 4) — chevron stepper ── */
.gf-progress--arrows .gf-progress-meta,
.gf-progress--arrows .gf-progress-track { display: none; }
.gf-progress--arrows .gf-progress-nodes {
    display: flex; align-items: stretch; gap: 0;
}
.gf-progress--arrows .gf-progress-line { display: none; }
.gf-progress--arrows .gf-progress-node {
    flex: 1; display: flex; align-items: center; gap: 9px;
    padding: 14px 22px 14px 32px;
    background: var(--gf-border, #f1f5f9);
    color: var(--gf-muted);
    font-size: 13px; font-weight: 600;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.gf-progress--arrows .gf-progress-node:first-child {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    padding-left: 22px;
}
.gf-progress--arrows .gf-progress-node:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
}
.gf-progress--arrows .gf-progress-node + .gf-progress-node { margin-left: -10px; }
.gf-progress--arrows .gf-progress-node .gf-progress-num {
    width: 24px; height: 24px;
    background: var(--gf-border, #cbd5e1); color: var(--gf-muted);
    box-shadow: none; font-size: 12px;
}
.gf-progress--arrows .gf-progress-node.is-done {
    background: var(--gf-primary-lt, #e6f3fb); color: var(--gf-primary);
}
.gf-progress--arrows .gf-progress-node.is-done .gf-progress-num {
    background: var(--gf-primary); color: #fff;
}
.gf-progress--arrows .gf-progress-node.is-active {
    background: linear-gradient(135deg, var(--gf-primary), var(--gf-accent));
    color: #fff;
}
.gf-progress--arrows .gf-progress-node.is-active .gf-progress-num {
    background: rgba(255,255,255,.28); color: #fff;
}

/* ── Variant: RING (mockup 5) — circular progress + label ── */
.gf-progress--ring .gf-progress-meta,
.gf-progress--ring .gf-progress-track { display: none; }
.gf-progress--ring .gf-progress-ring-wrap {
    display: flex; align-items: center; gap: 14px;
}
.gf-progress--ring .gf-progress-ring { width: 58px; height: 58px; position: relative; }
.gf-progress--ring .gf-progress-ring svg { transform: rotate(-90deg); display: block; }
.gf-progress--ring .gf-progress-ring-track {
    fill: none; stroke: var(--gf-border, #e2e8f0); stroke-width: 5;
}
.gf-progress--ring .gf-progress-ring-fill {
    fill: none; stroke-width: 5; stroke-linecap: round;
    transition: stroke-dashoffset .4s ease;
}
.gf-progress--ring .gf-progress-ring-text {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 14px; font-weight: 800; color: var(--gf-primary);
}
.gf-progress--ring .gf-progress-ring-now {
    font-size: 16px; font-weight: 700; color: var(--gf-text); margin-bottom: 2px;
}
.gf-progress--ring .gf-progress-ring-next {
    font-size: 12.5px; color: var(--gf-muted);
}

/* ── Variant: SEGMENTS (mockup 9) — per-step strip ── */
.gf-progress--segments .gf-progress-meta { display: flex; }
.gf-progress--segments .gf-progress-track { display: none; }
.gf-progress--segments .gf-progress-segments {
    display: flex; gap: 6px;
}
.gf-progress--segments .gf-progress-segment {
    flex: 1; height: 8px;
    background: var(--gf-border, #e2e8f0);
    border-radius: 999px;
    transition: background .3s;
}
.gf-progress--segments .gf-progress-segment.is-done {
    background: linear-gradient(90deg, var(--gf-accent), var(--gf-primary));
}
.gf-progress--segments .gf-progress-segment.is-active {
    background: linear-gradient(90deg, var(--gf-accent) 60%, var(--gf-border) 60%);
}

/* ────────── 2.9.1 — Mobile-Fallback: alle Varianten → bar ──────────
   Auf engen Viewports brechen Dots-Labels um, Wizard-Arrows clippen,
   Ring + "Als Nächstes:"-Label nimmt unverhältnismäßig viel Platz.
   Unter 640 px wird jede Variant-Modifier-Klasse ignoriert und der
   gleiche schlanke Bar-Indicator gerendert. Inline-Styles aus dem
   Server-Side-FOUC-Fix werden mit !important überschrieben — der
   Bar-Markup ist ohnehin immer im DOM (5-Varianten-Single-Markup).
   Tablet + Desktop bleiben unverändert auf der gewählten Variante. */
@media (max-width: 640px) {
    .gf-progress .gf-progress-nodes,
    .gf-progress .gf-progress-ring-wrap,
    .gf-progress .gf-progress-segments {
        display: none !important;
    }
    .gf-progress .gf-progress-meta  { display: flex  !important; }
    .gf-progress .gf-progress-track { display: block !important; }
}

/* ── Steps ────────────────────────────────────────────────── */

.gf-steps-wrapper { overflow: hidden; }

.gf-step-panel {
    display: none;
    animation: gfSlideIn .2s ease;
}
.gf-step-panel.active { display: block; }

@keyframes gfSlideIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* 2.9.1 — Respektiere prefers-reduced-motion (WCAG 2.3.3). User mit
   Vestibular-Disorders bekommen sonst Schwindel bei jedem Step-Wechsel. */
@media (prefers-reduced-motion: reduce) {
    .gf-step-panel { animation: none !important; }
    .gf-progress-fill, .gf-progress-ring-fill,
    .gf-progress-node, .gf-progress-segment,
    .gf-progress-line {
        transition: none !important;
    }
}

.gf-step-header {
    margin-bottom: 24px;
    /* Prevent themes from adding borders/backgrounds to the header container */
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Strong specificity so themes cannot override the form title.
   CSS vars allow the Design subpage settings to take effect via
   --gf-heading-size / --gf-heading-weight / --gf-heading-color. */
.go-form .gf-step-header h2,
.ultimate-form .gf-step-header h2,
.go-form .gf-step-header h2 *,
.ultimate-form .gf-step-header h2 * {
    font-size: var(--gf-heading-size, 20px) !important;
    font-weight: var(--gf-heading-weight, 700) !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
    color: var(--gf-heading-color, var(--gf-text, #111827)) !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
}

/* Description: same reset so themes cannot add input-like styling */
.go-form .gf-step-description,
.ultimate-form .gf-step-description {
    color: var(--gf-helper-color, var(--gf-muted, #6b7280)) !important;
    margin: 0 !important;
    font-size: var(--gf-helper-size, 14px) !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── Fields ───────────────────────────────────────────────── */

.gf-fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gf-field-gap, 22px);
}

.gf-field {
    grid-column: 1 / -1;      /* default: full width — robust gegen Stale-Klassen */
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gf-field[style*="display: none"] { display: none !important; }

/* ── Column width classes (set via builder) ─────────────────
   :not()-Selektor garantiert dass Default 100% greift wenn keine width-Klasse gesetzt ist */
.gf-field:not(.gf-w-half):not(.gf-w-third):not(.gf-w-two-thirds):not(.gf-w-quarter) {
    grid-column: 1 / -1 !important;
}
.gf-field.gf-w-half       { grid-column: span 6 !important; }
.gf-field.gf-w-third      { grid-column: span 4 !important; }
.gf-field.gf-w-two-thirds { grid-column: span 8 !important; }
.gf-field.gf-w-quarter    { grid-column: span 3 !important; }

/* Section / HTML always span full */
.gf-field.gf-field-section,
.gf-field.gf-field-html,
.gf-field.gf-field-info   { grid-column: span 12 !important; }

/* Mobile: everything stacks */
@media (max-width: 640px) {
    .gf-fields { grid-template-columns: 1fr !important; }
    /* 2.9.0 — ECHTE ROOT-CAUSE (endlich gefunden per computed-grid-column-
       Messung im 375px-Viewport): Die alte Regel `.gf-field { grid-column: 1 }`
       (Spezifität 0,1,0) VERLOR gegen `.gf-field.gf-w-half { grid-column: span 6
       !important }` (0,2,0) — beide !important, höhere Spezifität gewinnt. Die
       Breiten-Klassen behielten also `span 6/4/8/3` auf Mobile; da das Template
       aber auf 1 Spalte kollabiert, erzeugte `span 6` 5 implizite 0px-Spalten,
       und die vollbreiten Felder (grid-column: 1 / -1) erwischten nur die erste
       schmale Spalte → Textarea/Checkbox/Select/E-Mail schmaler als die
       ½-Text-Inputs. Alle früheren Fixes pflasterten nur `input{width:100%}`
       und trafen die Ursache nie. Lösung: die Breiten-Klassen in der Mobile-
       Query mit GLEICHER Spezifität (0,2,0) explizit auf volle Spalte zwingen. */
    .gf-field,
    .gf-field.gf-w-half,
    .gf-field.gf-w-third,
    .gf-field.gf-w-two-thirds,
    .gf-field.gf-w-quarter,
    .gf-field.gf-field-section,
    .gf-field.gf-field-html,
    .gf-field.gf-field-info {
        grid-column: 1 / -1 !important;
        /* force 100 % width on mobile — some Elementor / theme wrappers
           redefine flex/grid behavior upstream and let .gf-field shrink to
           content, so lock it explicitly. */
        width: 100% !important;
        max-width: 100% !important;
    }
    /* 2.9.1 v2 — Nuclear Mobile-Fix. User-Report: Trotz der Regel oben
       zeigten Textarea und Checkbox-Card weiterhin ~12px Inset gegenüber
       Text-Inputs. Vermutete Ursache: Theme/Elementor-CSS überschreibt
       `.gf-field` mit höherer Spezifität oder fügt margin/padding hinzu,
       das nur bei display:flex compound-Children sichtbar wird.
       Lösung: doppelt-class Spezifität (`.gf-field.gf-field`) + auch die
       Inner-Wrapper explizit zwingen — gewinnt gegen alle realistischen
       Theme-Resets, ohne Selektoren mit `!important` zu spammen. */
    .go-form .gf-field.gf-field,
    .ultimate-form .gf-field.gf-field {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .go-form .gf-field.gf-field > .gf-checkbox-label,
    .ultimate-form .gf-field.gf-field > .gf-checkbox-label,
    .go-form .gf-field.gf-field > .gf-textarea,
    .ultimate-form .gf-field.gf-field > .gf-textarea,
    .go-form .gf-field.gf-field > .gf-fieldset,
    .ultimate-form .gf-field.gf-field > .gf-fieldset,
    .go-form .gf-field.gf-field > textarea.gf-input,
    .ultimate-form .gf-field.gf-field > textarea.gf-input,
    .go-form .gf-field.gf-field > .gf-rating,
    .ultimate-form .gf-field.gf-field > .gf-rating,
    .go-form .gf-field.gf-field > .gf-composite,
    .ultimate-form .gf-field.gf-field > .gf-composite,
    .go-form .gf-field.gf-field > .gf-file-drop,
    .ultimate-form .gf-field.gf-field > .gf-file-drop,
    .go-form .gf-field.gf-field > .gf-signature,
    .ultimate-form .gf-field.gf-field > .gf-signature {
        /* 2.9.1 — .gf-signature ergänzt (Hot-Path-Agent-Finding):
           Signature-Canvas hatte feste 160px-Height + Default-Width — auf
           schmalen Containern (Elementor ≤375px) blieb es inset wie vorher
           Textarea/Checkbox. */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: stretch !important;
    }
}

/* ────────── 2.9.1 — Bulletproof equal-width wrappers ──────────
   User-reported bug: on mobile, the textarea and checkbox visually
   sat narrower than the regular text/number inputs in the same form
   (placeholder text on inputs reached the edge; the checkbox card
   and the textarea bordered box were inset by ~12 px each side).
   Root cause: each compound widget (.gf-checkbox-label,
   .gf-checkbox-group, .gf-fieldset, .gf-textarea, .gf-rating, ...)
   had no explicit width — so a parent Elementor / theme container
   could collapse them to shrink-to-fit when flex's
   `align-items: stretch` default was overridden upstream.
   Fix: force every field's compound wrapper to 100% width with
   border-box, identical to .gf-input/.gf-select rules above. This
   guarantees pixel-aligned left+right edges across every field
   type, on every breakpoint, regardless of theme. */
.go-form .gf-checkbox-label,
.ultimate-form .gf-checkbox-label,
.go-form .gf-checkbox-group,
.ultimate-form .gf-checkbox-group,
.go-form .gf-fieldset,
.ultimate-form .gf-fieldset,
.go-form .gf-textarea,
.ultimate-form .gf-textarea,
.go-form .gf-rating,
.ultimate-form .gf-rating,
.go-form .gf-composite,
.ultimate-form .gf-composite {
    width:      100% !important;
    box-sizing: border-box !important;
}

.gf-label {
    font-weight: var(--gf-label-weight, 600);
    font-size: var(--gf-label-size, 14px);
    color: var(--gf-label-color, var(--gf-text, #111827));
    display: block;
    font-family: inherit; /* always same as container */
    line-height: 1.4;
    margin-bottom: 2px;
}
.gf-required-star { color: var(--gf-error); margin-left: 3px; }

.gf-input, .gf-select {
    border: var(--gf-border-w, 1.5px) solid var(--gf-border);
    border-radius: var(--gf-radius);
    padding: var(--gf-pad-v, 14px) var(--gf-pad-h, 18px);
    font-size: var(--gf-input-size, 15px); /* 2.9.1 — auf 15px synchronisiert (war 14px = drift) */
    font-family: inherit; /* inherit from .ultimate-form container */
    width: 100% !important;          /* Bulletproof: gegen Theme-Resets */
    min-width: 100% !important;      /* Selects hatten Browser-default min-width:auto */
    max-width: 100% !important;
    display: block !important;       /* gegen inline-Default vom <select> */
    box-sizing: border-box;
    background: var(--gf-field-bg, #fff);
    color: var(--gf-text);
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Wrapper-Schutz: kein Theme darf den .gf-field Container schmaler machen */
.go-form .gf-field,
.ultimate-form .gf-field {
    min-width: 0 !important;
    width: auto !important;
}
.gf-input:focus, .gf-select:focus {
    border-color: var(--gf-primary);
    box-shadow: 0 0 0 3px rgba(0,55,91,.12);
    outline: none;
}
.gf-input.gf-invalid, .gf-select.gf-invalid { border-color: var(--gf-error); }
.gf-input.gf-invalid:focus { box-shadow: 0 0 0 3px rgba(200,30,30,.12); }

.gf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ── Floating labels ──────────────────────────────────────────
   The label starts inside the control (acting as a placeholder) and
   floats to a compact line at the top on focus or when the field is
   filled. Native CSS only: :placeholder-shown drives the empty state,
   :has() lifts the label from the wrapper. The control reserves extra
   top padding so the floated mini-label never overlaps the value.
   Graceful degradation: where :has() is unsupported the label simply
   stays in its resting position — the form remains fully usable. */

.gf-field.gf-float {
    position: relative;
}

/* Reserve room at the top of the control for the floated mini-label.
   Total vertical padding is preserved so field height stays consistent.
   High specificity + !important to beat the bulletproof input padding rule. */
.go-form .gf-field.gf-float > input.gf-input,
.go-form .gf-field.gf-float > select.gf-select,
.go-form .gf-field.gf-float > textarea.gf-input,
.ultimate-form .gf-field.gf-float > input.gf-input,
.ultimate-form .gf-field.gf-float > select.gf-select,
.ultimate-form .gf-field.gf-float > textarea.gf-input,
.gf-field.gf-float > .gf-input,
.gf-field.gf-float > .gf-select,
.gf-field.gf-float > .gf-textarea {
    padding-top: calc(var(--gf-pad-v, 14px) + 6px) !important;
    padding-bottom: calc(var(--gf-pad-v, 14px) - 6px) !important;
}
.go-form .gf-field.gf-float > textarea.gf-input,
.ultimate-form .gf-field.gf-float > textarea.gf-input,
.gf-field.gf-float > .gf-textarea {
    padding-top: calc(var(--gf-pad-v, 14px) + 8px) !important;
}

/* Resting state — label sits where the placeholder text would be. */
.gf-field.gf-float > .gf-label {
    position: absolute;
    left: calc(var(--gf-pad-h, 18px) + 1px);
    top: calc(var(--gf-pad-v, 14px) + 1px);
    margin: 0;
    padding: 0;
    max-width: calc(100% - var(--gf-pad-h, 18px) * 2);
    /* !important defeats the bulletproof `.go-form label.gf-label` rule that
       forces the design-configured weight/size/colour onto every label. */
    font-size: var(--gf-input-size, 15px) !important;
    font-weight: 400 !important;
    line-height: 1.2;
    color: var(--gf-muted, #6b7280) !important;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease, letter-spacing .15s ease;
    z-index: 1;
}

/* Hide the real placeholder until the label has floated up (on focus). */
.gf-field.gf-float .gf-input::placeholder,
.gf-field.gf-float .gf-textarea::placeholder { color: transparent; }
.gf-field.gf-float .gf-input:focus::placeholder,
.gf-field.gf-float .gf-textarea:focus::placeholder { color: var(--gf-muted, #6b7280); }

/* Floated state — focus, filled, or always-up controls (select/date/time). */
.gf-field.gf-float.gf-float-up > .gf-label,
.gf-field.gf-float:has(.gf-input:focus) > .gf-label,
.gf-field.gf-float:has(.gf-input:not(:placeholder-shown)) > .gf-label,
.gf-field.gf-float:has(.gf-textarea:focus) > .gf-label,
.gf-field.gf-float:has(.gf-textarea:not(:placeholder-shown)) > .gf-label,
.gf-field.gf-float:has(.gf-select:focus) > .gf-label {
    top: 6px;
    /* !important defeats the bulletproof `.go-form label.gf-label` rule. */
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: var(--gf-primary) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Required star inside a floating label keeps its accent colour. */
.gf-field.gf-float > .gf-label .gf-required-star { color: var(--gf-error); }

/* Invalid floating field — label turns red to match the border
   (!important beats the floated primary colour above). */
.gf-field.gf-float:has(.gf-invalid) > .gf-label { color: var(--gf-error) !important; }

/* ── Hidden label (label position = "hidden") ──────────────────
   Label stays in the DOM for screen readers but is visually removed;
   the placeholder carries the field name visually. */
.gf-field.gf-label-hidden > .gf-label,
.gf-field.gf-label-hidden > legend.gf-label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.gf-helper-text {
    font-size: var(--gf-helper-size, 13px);
    color: var(--gf-helper-color, var(--gf-muted, #6b7280));
    margin: 0;
    line-height: 1.4;
}

.gf-field-error {
    font-size: 12px;
    color: var(--gf-error);
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 4px;
}
.gf-field-error.visible { display: flex; }

/* ── Checkbox ─────────────────────────────────────────────── */

.gf-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 12px 14px;
    background: var(--gf-bg);
    border: var(--gf-border-w, 1.5px) solid var(--gf-border);
    border-radius: var(--gf-radius);
    transition: border-color .15s;
}
.gf-checkbox-label:hover { border-color: var(--gf-primary); }
.gf-checkbox-label input { display: none; }

.gf-checkbox-custom {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--gf-border);
    border-radius: 4px;
    background: var(--gf-field-bg, #fff);
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.gf-checkbox-label input:checked + .gf-checkbox-custom {
    background: var(--gf-primary);
    border-color: var(--gf-primary);
}
.gf-checkbox-label input:checked + .gf-checkbox-custom::after {
    content: '';
    width: 10px;
    height: 6px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg) translateY(-1px);
    display: block;
}

.gf-checkbox-text {
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
}

/* ── Radio ────────────────────────────────────────────────── */

.gf-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.gf-fieldset legend.gf-label {
    margin-bottom: 10px;
}

.gf-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: var(--gf-border-w, 1.5px) solid var(--gf-border);
    border-radius: var(--gf-radius);
    cursor: pointer;
    margin-bottom: 8px;
    background: var(--gf-field-bg, #fff);
    transition: border-color .15s, background .15s;
    font-size: 14px;     /* same as label */
    font-family: inherit;
    font-weight: 400;
    color: var(--gf-text);
}
.gf-radio-label:hover { border-color: var(--gf-primary); background: var(--gf-primary-lt); }
.gf-radio-label input { display: none; }

.gf-radio-custom {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--gf-border);
    border-radius: 50%;
    background: var(--gf-field-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.gf-radio-label:has(input:checked) {
    border-color: var(--gf-primary);
    background: var(--gf-primary-lt);
}
.gf-radio-label:has(input:checked) .gf-radio-custom {
    border-color: var(--gf-primary);
}
.gf-radio-label:has(input:checked) .gf-radio-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--gf-primary);
    border-radius: 50%;
    display: block;
}

/* ── Radio Cards (Bild / Icon Stil) ───────────────────────── */

.gf-radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.gf-radio-card {
    cursor: pointer;
    display: block;
}
.gf-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.gf-radio-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px 14px;
    border: var(--gf-border-w, 2px) solid var(--gf-border);
    border-radius: var(--gf-radius);
    background: var(--gf-field-bg, #fff);
    text-align: center;
    transition: border-color .18s, box-shadow .18s, background .18s;
    position: relative;
    min-height: 90px;
}
.gf-radio-card:hover .gf-radio-card-inner {
    border-color: var(--gf-primary);
    background: var(--gf-primary-lt, #eaf3fa);
}
.gf-radio-card input:checked + .gf-radio-card-inner {
    border-color: var(--gf-primary);
    background: var(--gf-primary-lt, #eaf3fa);
    box-shadow: 0 0 0 3px rgba(0,55,91,.12);
}

/* Checkmark badge top-right */
.gf-radio-card-check {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gf-primary);
    color: #fff;
    font-size: 10px;
    align-items: center;
    justify-content: center;
}
.gf-radio-card-check::after { content: '✓'; }
.gf-radio-card input:checked + .gf-radio-card-inner .gf-radio-card-check {
    display: flex;
}

/* Icon (emoji / text) */
.gf-radio-card-icon {
    font-size: 32px;
    line-height: 1;
}

/* Image */
.gf-radio-card-img-wrap {
    width: 100%;
    max-height: 64px;
    overflow: hidden;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gf-radio-card-img {
    width: 100%;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
}

/* Label below icon/image */
.gf-radio-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gf-text);
    line-height: 1.3;
}

/* Responsive: 2 columns on small screens */
@media (max-width: 480px) {
    .gf-radio-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Info Box ─────────────────────────────────────────────── */

.gf-info-box {
    background: var(--gf-info-bg, #eff6ff);
    border: 1px solid var(--gf-info-bg, #bfdbfe);
    border-left: 4px solid var(--gf-primary);
    border-radius: var(--gf-radius);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--gf-info-text, #002340);
    line-height: 1.5;
}
.gf-info-box strong { display: block; margin-bottom: 4px; }

/* ── External CAPTCHA (Turnstile / reCAPTCHA) ─────────────── */

.gf-captcha {
    flex-basis: 100%;
    width: 100%;
    margin: 4px 0 8px;
}

.gf-captcha:empty {
    display: none;
}

/* ── Navigation ───────────────────────────────────────────── */

.gf-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 32px;
    gap: 12px;
}

/* ──────────────────────────────────────────────────────────────────────────
   BUTTONS — single source of truth (consolidated).
   Scoped under .ultimate-form / .go-form for specificity. !important is used
   ONLY on the visual properties page builders (Elementor) and themes forcibly
   reset — background, colour, border — so the Design configurator always wins.
   Layout / typography stay normal-weight and overridable. All button design
   settings (Design → Buttons) are wired here via the --gf-btn-* variables.
   ────────────────────────────────────────────────────────────────────────── */
.ultimate-form .gf-btn,
.go-form .gf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--gf-btn-pad-v, 12px) var(--gf-btn-pad-h, 28px);
    border-radius: var(--gf-btn-radius, var(--gf-radius, 8px));
    font-size: var(--gf-btn-font-size, 15px);
    font-weight: var(--gf-btn-font-weight, 600);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background-color .15s;
    border: none !important;
}

/* Primary (next / submit): flat configured colour + a colour-agnostic sheen.
   background-COLOR holds the chosen colour; background-IMAGE is the sheen on
   top — kept separate so the overlay never clobbers the colour. */
.ultimate-form .gf-btn-next,  .go-form .gf-btn-next,
.ultimate-form .gf-btn-submit, .go-form .gf-btn-submit {
    margin-left: auto;
    background-color: var(--gf-btn-primary, var(--gf-primary, #00375B)) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.14)) !important;
    color: var(--gf-btn-text, #ffffff) !important;
    box-shadow: 0 6px 18px rgba(0,55,91,.22);
}
.ultimate-form .gf-btn-next:hover,  .go-form .gf-btn-next:hover,
.ultimate-form .gf-btn-submit:hover, .go-form .gf-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,55,91,.30);
    /* "Primary Dark (Hover)" design control. Falls back to the button colour
       so the hover still works when no dark shade is configured. */
    background-color: var(--gf-primary-dk, var(--gf-btn-primary, var(--gf-primary, #002340))) !important;
}
.ultimate-form .gf-btn-next:active,  .go-form .gf-btn-next:active,
.ultimate-form .gf-btn-submit:active, .go-form .gf-btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0,55,91,.20);
}

/* Secondary (back) button. */
.ultimate-form .gf-btn-prev,
.go-form .gf-btn-prev {
    background-color: var(--gf-field-bg, #ffffff) !important;
    color: var(--gf-text, #111827) !important;
    border: var(--gf-border-w, 1.5px) solid var(--gf-border, #d1d5db) !important;
}
.ultimate-form .gf-btn-prev:hover,
.go-form .gf-btn-prev:hover { background-color: var(--gf-bg, #f7f9fb) !important; }

.gf-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Spinner */
.gf-btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gfSpin .7s linear infinite;
}
@keyframes gfSpin { to { transform: rotate(360deg); } }

/* ── Error Summary Box ────────────────────────────────────── */

.gf-error-summary {
    display: none;
    margin-top: 20px;
    padding: 14px 18px;
    background: #fff5f5;
    border: 1.5px solid #fca5a5;
    border-left: 4px solid var(--gf-error);
    border-radius: var(--gf-radius);
    color: #7f1d1d;
    font-size: 13.5px;
    animation: gf-summary-in .2s ease;
}

@keyframes gf-summary-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gf-error-summary-title {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
    color: #991b1b;
}

.gf-error-summary ul {
    margin: 0;
    padding: 0 0 0 18px;
}

.gf-error-summary li {
    margin-bottom: 4px;
    line-height: 1.5;
}

.gf-error-summary li:last-child { margin-bottom: 0; }

/* ── Messages ─────────────────────────────────────────────── */

.gf-messages { margin-top: 20px; }

.gf-message {
    padding: 14px 18px;
    border-radius: var(--gf-radius);
    font-size: 14px;
    margin-bottom: 12px;
}
.gf-message-error {
    background: #fde8e8;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
.gf-message-success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.gf-error { color: var(--gf-error); }

/* ── Trust line ───────────────────────────────────────────────
   Subtle reassurance under the form — every form ships with the
   built-in 5-layer spam protection. */
.gf-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--gf-muted, #6b7280);
}
.gf-trust-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--gf-success, #057a55);
}

/* ── Composite fields (name / address / date_range / zip-lookup) ───────────
   Side-by-side sub-inputs. Defined as CSS classes (not inline grid styles) so
   layout is robust and never stripped by any sanitizer or theme reset. */

.gf-composite {
    display: grid;
    gap: 8px;
}
/* Two equal columns: name (first/last), date_range (from/to) */
.gf-composite-2 {
    grid-template-columns: 1fr 1fr;
}
/* Address rows */
.gf-composite-row {
    display: grid;
    gap: 8px;
}
.gf-composite-street { grid-template-columns: 3fr 1fr; }  /* street + house no. */
.gf-composite-zip    { grid-template-columns: 1fr 2fr; }  /* zip + city */

/* Date-range from/to hint line */
.gf-composite-hint {
    font-size: 11px;
    color: var(--gf-muted, #6b7280);
    margin-top: 4px;
}

/* Mobile: composite sub-inputs stack so nothing overflows.
   2.9.0 — Breakpoint von 480 auf 640 angehoben, damit er mit dem Feld-Grid-
   Stack-Fallback (@640, alle .gf-field → volle Spalte) fluchtet. Vorher blieben
   im Fenster 481-640px die Sub-Inputs eines vollbreit gestackten Composite-
   Felds (z.B. Straße 3fr/Hausnr 1fr) nebeneinander → Hausnummer-Feld zu schmal. */
@media (max-width: 640px) {
    .gf-composite-2,
    .gf-composite-row,
    .gf-composite-street,
    .gf-composite-zip {
        grid-template-columns: 1fr;
    }
    .gf-composite-hint { display: none; }
}

/* ── Textarea ─────────────────────────────────────────────── */

.gf-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* ── Section Break ────────────────────────────────────────── */

.gf-section-break {
    border-top: 2px solid var(--gf-primary);
    padding-top: 16px;
    margin-top: 8px;
}

.gf-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gf-text);
    margin: 0 0 6px;
}

.gf-section-desc {
    font-size: 13px;
    color: var(--gf-muted);
    margin: 0;
}

/* ── HTML Block ───────────────────────────────────────────── */

.gf-html-block {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gf-text);
}

/* ── Checkbox Group ───────────────────────────────────────── */

.gf-checkbox-group-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: var(--gf-border-w, 1.5px) solid var(--gf-border);
    border-radius: var(--gf-radius);
    cursor: pointer;
    margin-bottom: 6px;
    background: var(--gf-field-bg, #fff);
    font-size: 14px;
    transition: border-color .15s;
}
.gf-checkbox-group-label:hover { border-color: var(--gf-primary); }
.gf-checkbox-group-label input { display: none; }
.gf-checkbox-group-label input:checked + .gf-checkbox-custom {
    background: var(--gf-primary);
    border-color: var(--gf-primary);
}
.gf-checkbox-group-label input:checked + .gf-checkbox-custom::after {
    content: '';
    width: 10px;
    height: 6px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg) translateY(-1px);
    display: block;
}

/* ── File Upload ──────────────────────────────────────────── */

.gf-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

.gf-file-wrap {
    position: relative;
}

.gf-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 20px;
    border: var(--gf-border-w, 2px) dashed var(--gf-border);
    border-radius: var(--gf-radius);
    background: var(--gf-bg);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.gf-file-label:hover,
.gf-file-wrap.gf-drag-over .gf-file-label {
    border-color: var(--gf-primary);
    background: var(--gf-primary-lt);
}

.gf-file-icon { font-size: 28px; }
.gf-file-text { font-size: 14px; font-weight: 600; color: var(--gf-primary); }
.gf-file-hint { font-size: 12px; color: var(--gf-muted); }
.gf-file-info { margin-top: 4px !important; }

.gf-file-preview {
    margin-top: 10px;
}
.gf-file-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--gf-field-bg, #fff);
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius);
    font-size: 13px;
    margin-bottom: 6px;
}
.gf-file-preview-name { flex: 1; font-weight: 600; word-break: break-all; }
.gf-file-preview-size { color: var(--gf-muted); font-size: 12px; flex-shrink: 0; }
.gf-file-preview-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gf-error);
    font-size: 16px;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ── Rating Stars ─────────────────────────────────────────── */

.gf-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gf-star {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 28px;
    color: #d1d5db;
    padding: 0;
    line-height: 1;
    transition: color .15s, transform .1s;
}

.gf-star:hover,
.gf-star.gf-active {
    color: #f59e0b;
}

.gf-star:hover { transform: scale(1.15); }

.gf-rating-value {
    font-size: 13px;
    color: var(--gf-muted);
    margin-left: 6px;
    font-weight: 600;
}

/* ── Confirmation Message ─────────────────────────────────── */

/* ── Success window (2.9.0) — modern: gradient disc + pulse ring + animated
   checkmark. Schriftfarben sind BEWUSST fest (unabhängig vom Theme/Design-
   Editor), damit die Bestätigung immer gut lesbar bleibt. Grünton B. */
.gf-confirmation {
    padding: 40px 28px;
    text-align: center;
    background: #f0fdf4;                 /* heller Grün-Tint */
    border: 1px solid #bbf7d0;
    border-radius: var(--gf-radius, 14px);
    animation: gfConfirmIn .45s ease both;
}
@keyframes gfConfirmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.gf-confirm-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
}
.gf-confirm-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #22c55e;
    opacity: .18;
    animation: gfConfirmPulse 1.8s ease-out infinite;
}
@keyframes gfConfirmPulse { 0% { transform: scale(.85); opacity: .35; } 100% { transform: scale(1.5); opacity: 0; } }
.gf-confirm-disc {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #15803d, #4ade80);   /* Grünton B */
    box-shadow: 0 8px 20px rgba(21, 128, 61, .28);
}
.gf-confirm-disc svg { width: 34px; height: 34px; }
.gf-confirm-check {
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    /* 2.9.1-fix — base state is VISIBLE (offset 0). The checkmark used to start
       at offset 48 (fully hidden) and only became visible via the draw
       animation; if that animation never ran (browser power-saver, some mobile
       browsers, slow paint) OR was frozen by a fill-mode, the checkmark stayed
       invisible forever — the "check icon missing" report. The hidden→drawn
       phase now lives INSIDE the keyframes (no fill-mode, no separate delay),
       so the resting/fallback value is always the base 0 = fully visible. */
    stroke-dashoffset: 0;
    animation: gfConfirmDraw .7s ease;
}
@keyframes gfConfirmDraw { 0%, 30% { stroke-dashoffset: 48; } 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .gf-confirmation, .gf-confirm-pulse, .gf-confirm-check { animation: none !important; }
    .gf-confirm-check { stroke-dashoffset: 0; }
}

/* Feste Schriftfarben + Typo — NICHT über --gf-* (User-Wunsch: IMMER feste
   Farbtöne). Variante 3 (Editorial): großer grüner Titel + schmale, normal-
   gewichtete Beschreibung. NUCLEAR-Spezifität: doppelte Klasse erzeugt (0,3,0)
   bzw. (0,3,1), damit selbst aggressive Theme-/Page-Builder-Selektoren wie
   `body .entry-content .gf-confirm-title` (0,2,1) NICHT durchschlagen. Jede
   Property mit !important gegen Theme-!important. Siehe Memory: gleiche Falle
   wie der Mobile-grid-column-Bug (Spezifitäts-Gleichstand verliert). */
.gf-confirmation .gf-confirm-title.gf-confirm-title {
    margin: 0 0 10px;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #15803d !important;          /* Grünton B */
    font-style: normal !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
}
.gf-confirmation .gf-confirm-text.gf-confirm-text,
.gf-confirmation .gf-confirm-text.gf-confirm-text p {
    font-size: 14.5px !important;
    font-weight: 400 !important;        /* nicht fett */
    line-height: 1.7 !important;
    color: #475569 !important;
    font-style: normal !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
}
/* Schmaler, zentrierter Textblock (Variante 3) — Breite genau EINMAL am
   Text-Container gesetzt (kein widersprüchliches max-width mehr). */
.gf-confirmation .gf-confirm-text.gf-confirm-text { max-width: 320px; margin: 0 auto; }
.gf-confirmation .gf-confirm-text.gf-confirm-text p { margin: 0; }
.gf-confirmation .gf-confirm-title.gf-confirm-title a,
.gf-confirmation .gf-confirm-text.gf-confirm-text a { text-decoration: none !important; color: inherit !important; }
/* Legacy-Fallback + Elementor-Widget-Default: Bestätigungstext ohne eigene
   .gf-confirm-*-Klassen (selten; backfill migriert das normalerweise).
   .gf-confirmation.gf-confirmation = (0,2,1), deckt jeden <h3>/<p> im Fenster ab. */
.gf-confirmation.gf-confirmation h3 { margin: 0 0 10px; font-size: 26px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #15803d !important; text-decoration: none !important; font-style: normal !important; }
.gf-confirmation.gf-confirmation p  { margin: 0 auto; max-width: 320px; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.7 !important; color: #475569 !important; text-decoration: none !important; font-style: normal !important; }

/* ── Payment Field ────────────────────────────────────────── */

.gf-field-payment { width: 100%; }

.uf-payment-box {
    border:        2px solid var(--gf-border, #e2e8f0);
    border-radius: var(--gf-radius, 8px);
    background:    #fff;
    overflow:      hidden;
}

.uf-payment-header {
    display:          flex;
    align-items:      center;
    gap:              10px;
    padding:          14px 18px;
    /* Follow the configured brand colour (same token as the submit button); subtle sheen on top, never clobbers the colour. */
    background-color: var(--gf-btn-primary, var(--gf-primary, #00375B));
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .14));
    color:            #fff;
}

.uf-payment-icon  { font-size: 20px; flex-shrink: 0; }
.uf-payment-title { font-weight: 600; font-size: 15px; flex: 1; }
.uf-payment-amount {
    font-size:   17px;
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}

.uf-payment-method-label {
    font-size:    12px;
    font-weight:  600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:        var(--gf-muted, #64748b);
    margin:       0 0 8px;
}

.uf-stripe-wrap,
.uf-paypal-wrap {
    padding: 16px 18px;
}

.uf-stripe-wrap { border-bottom: 1px solid var(--gf-border, #e2e8f0); }

.uf-stripe-element {
    padding:       10px 12px;
    border:        1px solid var(--gf-border, #e2e8f0);
    border-radius: var(--gf-radius, 6px);
    background:    #fafafa;
    transition:    border-color .15s;
}

.uf-stripe-element:focus-within {
    border-color: var(--gf-primary, #00375B);
    background:   #fff;
    box-shadow:   0 0 0 3px rgba(0,55,91,.12);
}

.uf-payment-error {
    margin:        0;
    padding:       10px 18px;
    font-size:     13px;
    color:         #dc2626;
    background:    #fef2f2;
    border-top:    1px solid #fee2e2;
}

/* ── Success / Error Messages ────────────────────────────── */

.gf-success-message {
    padding:       24px;
    background:    #d1fae5;
    border:        1px solid #6ee7b7;
    border-radius: var(--gf-radius, 8px);
    color:         #065f46;
    text-align:    center;
}

.gf-error-message {
    padding:       14px 18px;
    background:    #fef2f2;
    border:        1px solid #fca5a5;
    border-radius: var(--gf-radius, 8px);
    color:         #dc2626;
}

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

/* Prevent any child from breaking out of the form container */
.go-form *,
.ultimate-form * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Images and iframes inside the form never overflow */
.go-form img,
.go-form iframe,
.ultimate-form img,
.ultimate-form iframe {
    height: auto;
}

@media (max-width: 600px) {
    /* Hide step labels on mobile, show only dot numbers */
    .gf-progress-step span { display: none; }
    /* Track top stays in sync with dot center (14px) - half track (2px) = 12px */
    .gf-progress-track { top: 12px; }
    /* 2.9.0 — `.gf-btn { padding; font-size }` HIER ENTFERNT: Spezifität 0,1,0
       verlor immer gegen `.ultimate-form .gf-btn` (0,2,0), war also seit jeher
       wirkungslos. Buttons nutzen überall die konfigurierte Größe (--gf-btn-*).
       Bewusst NICHT „repariert", da das die Button-Optik aller Bestandsnutzer
       auf Mobile verkleinert hätte. Das sinnvolle Mobile-Verhalten (volle
       Breite für Next/Submit) steht unten und greift korrekt. */
    .gf-rating .gf-star { font-size: 24px; }
    .uf-payment-amount { font-size: 15px; }
    /* Step nav: stack buttons vertically on very small screens */
    .gf-step-nav { flex-wrap: wrap; }
    .gf-btn-next, .gf-btn-submit { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPEC-BOOST — Override-resistente Regeln für Labels/Inputs/Headings.
   Spezifität 0,2,1 + !important → schlägt Theme-Defaults und Elementor's
   `.elementor-edit-area label/input/...` Regeln in jedem Kontext.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper: Card-Optik aus Design-Vars — höchste Spezifität.
   2.9.1 — padding + border-radius nutzen jetzt die Design-Vars statt
   hardcodierter Werte. Vorher überschrieb diese Regel `--gf-form-radius`
   und `--gf-form-pad-v/h` komplett, der User-Slider hatte am Frontend
   keinen Effekt. */
.go-form.go-form, .ultimate-form.ultimate-form {
    background:    var(--gf-bg, #f9fafb) !important;
    padding:       var(--gf-form-pad-v, 30px) var(--gf-form-pad-h, 30px) !important;
    border-radius: var(--gf-form-radius, 12px) !important;
    box-shadow:    0 4px 24px rgba(0,0,0,.08) !important;
    color:         var(--gf-text, #111827) !important;
    font-family:   var(--gf-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
}

/* (duplicate .gf-step-header h2 block removed — defined above with full spec-boost reset around line 206) */
/* (duplicate .gf-step-description removed — defined above) */

/* Labels (auch <legend class="gf-label">) */
.go-form label.gf-label,
.go-form legend.gf-label,
.ultimate-form label.gf-label,
.ultimate-form legend.gf-label {
    font-weight: var(--gf-label-weight, 600) !important;
    font-size:   var(--gf-label-size, 14px) !important;
    color:       var(--gf-label-color, var(--gf-text, #111827)) !important;
    opacity:     1 !important;
    line-height: 1.4 !important;
}

/* Inputs / Selects / Textareas */
.go-form input.gf-input,
.go-form select.gf-select,
.go-form textarea.gf-input,
.ultimate-form input.gf-input,
.ultimate-form select.gf-select,
.ultimate-form textarea.gf-input {
    background:    var(--gf-field-bg, #ffffff) !important;
    color:         var(--gf-text, #111827) !important;
    border:        var(--gf-border-w, 1.5px) solid var(--gf-border, #d1d5db) !important;
    border-radius: var(--gf-radius, 8px) !important;
    padding:       var(--gf-pad-v, 10px) var(--gf-pad-h, 14px) !important;
    font-size:     var(--gf-input-size, 15px) !important;
    font-family:   inherit !important;
    width:         100% !important;
    box-sizing:    border-box !important;
    box-shadow:    none !important;
    outline:       none !important;
    opacity:       1 !important;
}

/* Focus + invalid states must survive the bulletproof reset above.
   Without these, themes/Elementor (and the !important reset itself)
   would strip the focus ring and the red invalid border. */
.go-form .gf-field input.gf-input:focus,
.go-form .gf-field select.gf-select:focus,
.go-form .gf-field textarea.gf-input:focus,
.ultimate-form .gf-field input.gf-input:focus,
.ultimate-form .gf-field select.gf-select:focus,
.ultimate-form .gf-field textarea.gf-input:focus {
    border-color: var(--gf-primary) !important;
    box-shadow:   0 0 0 3px rgba(0,55,91,.12) !important;
    outline:      none !important;
}
.go-form .gf-field input.gf-input.gf-invalid,
.go-form .gf-field select.gf-select.gf-invalid,
.go-form .gf-field textarea.gf-input.gf-invalid,
.ultimate-form .gf-field input.gf-input.gf-invalid,
.ultimate-form .gf-field select.gf-select.gf-invalid,
.ultimate-form .gf-field textarea.gf-input.gf-invalid {
    border-color: var(--gf-error) !important;
}
.go-form .gf-field input.gf-input.gf-invalid:focus,
.ultimate-form .gf-field input.gf-input.gf-invalid:focus {
    box-shadow: 0 0 0 3px rgba(200,30,30,.12) !important;
}

/* Helper text */
.go-form .gf-helper-text,
.ultimate-form .gf-helper-text {
    font-size: var(--gf-helper-size, 13px) !important;
    color:     var(--gf-helper-color, var(--gf-muted, #6b7280)) !important;
    opacity:   1 !important;
}

/* Button styles live in the single consolidated BUTTONS block above — do not
   re-add per-button overrides here (that caused the earlier #0080C0 conflict). */

/* Field gap (in case Elementor overrides .gf-fields gap) */
.go-form .gf-fields,
.ultimate-form .gf-fields {
    gap: var(--gf-field-gap, 18px) !important;
}

/* Radio + Checkbox label cards */
.go-form label.gf-radio-label,
.go-form label.gf-checkbox-label,
.go-form label.gf-checkbox-group-label,
.ultimate-form label.gf-radio-label,
.ultimate-form label.gf-checkbox-label,
.ultimate-form label.gf-checkbox-group-label {
    background:    var(--gf-field-bg, #ffffff) !important;
    border:        var(--gf-border-w, 1.5px) solid var(--gf-border, #d1d5db) !important;
    border-radius: var(--gf-radius, 8px) !important;
    color:         var(--gf-text, #111827) !important;
    opacity:       1 !important;
}

/* ── Signature pad ─────────────────────────────────────────── */
.go-form .gf-signature,
.ultimate-form .gf-signature { position: relative; border: var(--gf-border-w, 1.5px) solid var(--gf-border, #d1d5db); border-radius: var(--gf-radius, 8px); background: var(--gf-field-bg, #fff); overflow: hidden; }
.go-form .gf-signature-canvas,
.ultimate-form .gf-signature-canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
.go-form .gf-signature-clear,
.ultimate-form .gf-signature-clear { position: absolute; top: 8px; right: 8px; font-size: 12px; font-weight: 700; color: var(--gf-text, #1f2937); background: rgba(255,255,255,.85); border: 1px solid var(--gf-border, #d1d5db); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.go-form .gf-signature-clear:hover,
.ultimate-form .gf-signature-clear:hover { background: #fff; }

/* Accessibility: keyboard focus ring for frontend form controls (WCAG 2.4.7). */
.go-form :focus-visible,
.go-form input:focus-visible, .go-form select:focus-visible,
.go-form textarea:focus-visible, .go-form button:focus-visible {
    outline: 2px solid var(--gf-primary, #00375B);
    outline-offset: 2px;
}