/* ============================================================
   LumaMed 360° RisikoBilanz – Anfrage-Funnel
   WordPress plugin styles. All rules are scoped to
   .risikobilanz-form-plugin so they never leak into the theme.
   ============================================================ */

/* Prevent horizontal scroll caused by the funnel's full-bleed
   background. Targets only the body when this plugin is rendered
   on the page — no impact on themes that don't use it. */
body:has(.risikobilanz-form-plugin) {
    overflow-x: clip;
}
.risikobilanz-form-plugin,
.risikobilanz-form-plugin * { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   THEME-OVERRIDE GUARD
   Astra / Elementor / many WP themes inject pseudo-element
   overlays + their own button/input styling that overrides
   ours. Force LumaMed brand styling with !important on the
   handful of properties themes commonly touch.
   ============================================================ */
.risikobilanz-form-plugin .rb-btn::before,
.risikobilanz-form-plugin .rb-btn::after {
    content: none !important;
    background: none !important;
    display: none !important;
}
.risikobilanz-form-plugin .rb-btn {
    background-color: transparent !important;
    background-image: none !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative !important;
}
.risikobilanz-form-plugin .rb-btn--ghost {
    background-color: transparent !important;
    color: rgba(6, 43, 81, 0.85) !important;
    border: 1px solid rgba(6, 43, 81, 0.35) !important;
}
.risikobilanz-form-plugin .rb-btn--ghost:hover {
    color: #062B51 !important;
    border-color: #062B51 !important;
}
.risikobilanz-form-plugin .rb-btn--primary {
    background-color: #062B51 !important;
    color: #FFFAF4 !important;
    border: 1px solid #062B51 !important;
}
.risikobilanz-form-plugin .rb-btn--primary:hover {
    background-color: #0a3a6a !important;
    border-color: #0a3a6a !important;
    color: #FFFAF4 !important;
}

/* Option labels: themes often force UPPERCASE on labels/spans. */
.risikobilanz-form-plugin .rb-option__label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #062B51 !important;
}
.risikobilanz-form-plugin .rb-option__box,
.risikobilanz-form-plugin .rb-step-title,
.risikobilanz-form-plugin .rb-step-help,
.risikobilanz-form-plugin .rb-welcome__body p,
.risikobilanz-form-plugin .rb-consent-notice {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Inputs: themes (esp. Astra) round inputs into pills with white
   bg. Force LumaMed flat-bordered design. */
.risikobilanz-form-plugin .rb-input::before,
.risikobilanz-form-plugin .rb-input::after {
    content: none !important;
    display: none !important;
}
.risikobilanz-form-plugin .rb-input {
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;
    background-color: rgba(255, 250, 244, 0.45) !important;
    background-image: none !important;
    border: 1px solid rgba(6, 43, 81, 0.35) !important;
    border-radius: 0 !important;
    color: #062B51 !important;
    font-family: "Arimo", system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.risikobilanz-form-plugin .rb-input:focus {
    outline: none !important;
    border-color: #062B51 !important;
    background-color: rgba(255, 250, 244, 0.85) !important;
}
.risikobilanz-form-plugin .rb-input::placeholder {
    color: rgba(6, 43, 81, 0.48) !important;
}
.risikobilanz-form-plugin textarea.rb-input,
.risikobilanz-form-plugin .rb-input--textarea {
    height: auto !important;
    min-height: 88px !important;
    padding: 14px 16px !important;
    resize: vertical !important;
}

/* Consent link: ensure it inherits the brand color and is visibly
   underlined (some themes strip underlines and color them grey). */
.risikobilanz-form-plugin .rb-consent-link {
    color: #062B51 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}
.risikobilanz-form-plugin .rb-consent-link:hover {
    text-decoration-thickness: 2px !important;
}
/* ============================================================
   LumaMed 360° RisikoBilanz – Anfrage-Funnel
   Brand tokens mirror DESIGN.md. Renders as a full-page section
   that lives on its own URL (e.g. /risikobilanz-anfrage/).
   ============================================================ */

.risikobilanz-form-plugin {
    /* tokens */
    --lm-creme:           #FFFAF4;
    --lm-dark-blue:       #062B51;
    --lm-clay:            #D37D62;

    --fg1: var(--lm-dark-blue);
    --fg2: rgba(6, 43, 81, 0.72);
    --fg3: rgba(6, 43, 81, 0.48);
    --fg4: rgba(6, 43, 81, 0.18);
    --hairline: var(--lm-dark-blue);
    --hairline-soft: rgba(6, 43, 81, 0.18);
    --hairline-hair: rgba(6, 43, 81, 0.10);

    --font-sans: "Arimo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

    --sp-xs: 8px;
    --sp-sm: 16px;
    --sp-md: 24px;
    --sp-lg: 32px;
    --sp-xl: 48px;
    --sp-xxl: 72px;

    display: block;
    color: var(--fg1);
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Full-bleed LumaMed atmosphere — same warm-creme field as the
       landing page (DESIGN.md: light gradient background with dark-blue type).
       Gradient centres pulled in from the edges so they fade naturally instead
       of being clipped, which otherwise creates a hard contrast band on the
       very left/right edge of narrow viewports. */
    background:
        radial-gradient(ellipse 70% 30% at 18% 6%,   rgba(250, 153, 111, 0.28), transparent 75%),
        radial-gradient(ellipse 60% 26% at 12% 22%,  rgba(255, 192, 142, 0.18), transparent 80%),
        radial-gradient(ellipse 60% 26% at 88% 40%,  rgba(250, 153, 111, 0.18), transparent 80%),
        radial-gradient(ellipse 60% 24% at 50% 95%,  rgba(255, 224, 175, 0.20), transparent 75%),
        var(--lm-creme);
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    /* Vertical padding stays on the outer container so the warm background
       extends top-to-bottom. Horizontal padding moves to .rb-page (see below)
       so it lives in a properly bounded box and stays symmetric regardless of
       browser scrollbar quirks. */
    padding-top:    clamp(32px, 7vw, 96px);
    padding-bottom: calc(clamp(32px, 7vw, 96px) + env(safe-area-inset-bottom, 0px));
    padding-left:    0;
    padding-right:  0;
}

.risikobilanz-form-plugin *,
.risikobilanz-form-plugin *::before,
.risikobilanz-form-plugin *::after {
    box-sizing: border-box;
    min-width: 0; /* allow flex/grid children to shrink below content size */
}

.risikobilanz-form-plugin p,
.risikobilanz-form-plugin h1,
.risikobilanz-form-plugin h2,
.risikobilanz-form-plugin .rb-option__label,
.risikobilanz-form-plugin .rb-form-eyebrow,
.risikobilanz-form-plugin .rb-scarcity__body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: manual; /* never break words automatically */
}

/* Brand term "RisikoBilanz" must never break across lines. */
.rb-nb {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.rb-page {
    /* Bounded content container. Horizontal padding lives here (not on the
       plugin root) so it is always calculated against the page's own box
       and stays perfectly symmetric on every viewport, regardless of any
       browser scrollbar / overflow quirks. */
    width: 100%;
    max-width: calc(720px + 2 * clamp(20px, 5vw, 48px));
    margin: 0 auto;
    padding-left:  max(clamp(20px, 5vw, 48px), env(safe-area-inset-left,  0px));
    padding-right: max(clamp(20px, 5vw, 48px), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

.rb-page__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xl);
}

/* HEADER */
.rb-form-header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.rb-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-weight: 200;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg1);
}

.rb-square-anchor {
    width: 10px;
    height: 10px;
    border: 1px solid var(--fg1);
    background: transparent;
    display: inline-block;
    flex-shrink: 0;
}

.rb-form-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.15;
    font-weight: 500;
    color: var(--fg1);
    letter-spacing: 0;
}

.rb-form-sub {
    margin: 4px 0 0;
    font-size: 16px;
    color: var(--fg2);
    line-height: 1.55;
    max-width: 560px;
}

/* PROGRESS — 1px Dark-Blue hairline rule, the brand's measurement signal */
.rb-progress {
    height: 1px;
    width: 100%;
    background: var(--hairline-hair);
    position: relative;
    overflow: hidden;
}

.rb-progress__bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--fg1);
    width: 25%;
    transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   FORM CORE
   ============================================================ */
.rb-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}

.rb-form-step {
    display: none;
    flex-direction: column;
    gap: var(--sp-md);
    animation: rb-step-in 280ms ease-out;
}

.rb-form-step.active {
    display: flex;
}

@keyframes rb-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rb-step-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg2);
    font-weight: 400;
}

.rb-step-no {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--fg1);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.rb-step-divider {
    flex: 0 0 48px;
    height: 1px;
    background: var(--hairline-soft);
}

.rb-step-of {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 200;
    color: var(--fg3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rb-step-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1.2;
    font-weight: 500;
    color: var(--fg1);
    letter-spacing: 0;
}

.rb-step-help {
    margin: -8px 0 0;
    font-size: 15px;
    color: var(--fg2);
    line-height: 1.5;
}

/* ============================================================
   OPTIONS
   ============================================================ */
.rb-options {
    display: grid;
    gap: 12px;
}

.rb-options--two {
    grid-template-columns: 1fr 1fr;
}

.rb-options--stack {
    grid-template-columns: 1fr;
}

.rb-option {
    position: relative;
    display: block;
    cursor: pointer;
    user-select: none;
}

.rb-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rb-option__box {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 16px 20px;
    background: transparent;
    border: 1px solid var(--hairline-soft);
    color: var(--fg1);
    font-size: 16px;
    line-height: 1.4;
    transition:
        border-color 180ms ease,
        background-color 180ms ease;
}

/* the square anchor — DESIGN.md component */
.rb-option__box::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 1px solid var(--fg1);
    background: transparent;
    flex-shrink: 0;
    transition: background-color 180ms ease, border-color 180ms ease;
}

.rb-option:hover .rb-option__box {
    border-color: var(--fg1);
    background: rgba(255, 250, 244, 0.6);
}

.rb-option input[type="radio"]:focus-visible + .rb-option__box {
    outline: 2px solid var(--lm-clay);
    outline-offset: 2px;
}

.rb-option input[type="radio"]:checked + .rb-option__box {
    border-color: var(--fg1);
    background: rgba(255, 250, 244, 0.85);
    box-shadow: inset 0 0 0 1px var(--fg1);
}

.rb-option input[type="radio"]:checked + .rb-option__box::before {
    background: var(--lm-clay);
    border-color: var(--lm-clay);
}

.rb-option__label {
    flex: 1;
}

.rb-option--row .rb-option__box {
    text-align: left;
}

/* ============================================================
   CONDITIONAL "Etwas anderes" FIELD
   ============================================================ */
.rb-conditional {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: rb-step-in 200ms ease-out;
}

.rb-conditional[hidden] {
    display: none;
}

/* ============================================================
   INPUTS
   ============================================================ */
.rb-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rb-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rb-field-label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg1);
}

.rb-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    background: transparent;
    border: 1px solid var(--hairline-soft);
    color: var(--fg1);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
    transition: border-color 180ms ease, background-color 180ms ease;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.rb-input::placeholder {
    color: var(--fg3);
}

.rb-input:hover {
    border-color: var(--fg2);
}

.rb-input:focus {
    outline: none;
    border-color: var(--fg1);
    background: rgba(255, 250, 244, 0.7);
}

/* WELCOME STEP */
.rb-welcome__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 580px;
}

.rb-welcome__body p {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--fg2);
}

.rb-welcome__body strong {
    color: var(--fg1);
    font-weight: 500;
}

/* Row: CTA on the left, Google-Reviews widget on the right.
   Wraps on narrow screens so neither gets crushed. */
.rb-welcome__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 24px;
    margin-top: 24px;
}

.rb-welcome__cta {
    margin-top: 0 !important;
    margin-left: 0 !important; /* override .rb-btn--primary margin-left:auto */
    flex: 0 0 auto;
}

.rb-welcome__trust {
    flex: 0 1 auto;
    max-width: 100%;
}

.rb-welcome__trust img,
.rb-welcome__trust iframe {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .rb-welcome__actions {
        column-gap: 24px;
        row-gap: 20px;
    }
}

/* When the welcome step is active, hide the regular nav and the progress
   bar — the welcome CTA replaces them. */
.rb-form-step.rb-welcome.active ~ .rb-nav {
    display: none;
}

.rb-page__inner:has(.rb-form-step.rb-welcome.active) .rb-progress {
    visibility: hidden;
}

/* CONSENT NOTICE */
.rb-consent-notice {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--fg2);
    line-height: 1.55;
}

.rb-consent-link {
    color: var(--fg1);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.rb-consent-link:hover {
    text-decoration-thickness: 2px;
}

/* ============================================================
   SLIDER
   ============================================================ */
.rb-slider {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    padding-top: 8px;
}

.rb-slider__readout {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
}

.rb-slider__value {
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
    color: var(--fg1);
}

.rb-slider__unit {
    font-size: 28px;
    font-weight: 400;
    color: var(--fg1);
    letter-spacing: 0.01em;
}

.rb-slider__input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.rb-slider__input:focus { outline: none; }

.rb-slider__input::-webkit-slider-runnable-track {
    height: 3px;
    background: var(--fg1);
    border: none;
}

.rb-slider__input::-moz-range-track {
    height: 3px;
    background: var(--fg1);
    border: none;
}

.rb-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -13px;
    width: 28px;
    height: 28px;
    background: var(--lm-clay);
    border: 1px solid var(--fg1);
    border-radius: 50%;
    cursor: grab;
    transition: transform 160ms ease;
}

.rb-slider__input::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: var(--lm-clay);
    border: 1px solid var(--fg1);
    border-radius: 50%;
    cursor: grab;
}

.rb-slider__input:active::-webkit-slider-thumb,
.rb-slider__input:focus-visible::-webkit-slider-thumb {
    transform: scale(1.08);
    cursor: grabbing;
}

.rb-slider__scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    color: var(--fg1);
    letter-spacing: 0.04em;
    margin-top: 4px;
}

/* ============================================================
   NAV BUTTONS
   ============================================================ */
.rb-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--hairline-hair);
}

.rb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 28px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    border-radius: 0;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease;
    text-decoration: none;
}

.rb-btn:active {
    transform: translateY(1px);
}

.rb-btn--ghost {
    color: var(--fg2);
    border-color: var(--hairline-soft);
}

.rb-btn--ghost:hover {
    color: var(--fg1);
    border-color: var(--fg1);
}

.rb-btn--primary {
    background: var(--lm-dark-blue);
    color: var(--lm-creme);
    border-color: var(--lm-dark-blue);
    margin-left: auto;
}

.rb-btn--primary:hover {
    background: #0a3a6a;
    border-color: #0a3a6a;
}

.rb-btn--primary:focus-visible {
    outline: 2px solid var(--lm-clay);
    outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE — Mobile-First polish.
   99 % of users are on phones — these rules optimise for one-hand
   reach, large touch targets, and stable layout while iOS toggles
   its URL bar.
   ============================================================ */

/* Tablet and below */
@media (max-width: 768px) {
    /* Nav now sits directly below the question content on mobile — no
       sticky-bottom anchoring needed. */
    .rb-options--two {
        grid-template-columns: 1fr;
    }

    .rb-step-title {
        font-size: clamp(22px, 5.5vw, 28px);
    }

    .rb-step-divider {
        flex: 0 0 32px;
    }

    /* Nav sits directly underneath the question so the user doesn't have to
       hunt for it at the bottom of the viewport. We keep it in normal flow on
       mobile and pad the bottom for the iOS home indicator. */
    .rb-nav {
        position: static;
        margin: 16px 0 0;
        padding: 20px 0 calc(8px + env(safe-area-inset-bottom));
        background: transparent;
        border-top: 1px solid var(--hairline-soft);
    }

    .rb-btn {
        min-height: 56px;
        font-size: 16px;
    }

    /* Make primary CTAs grow to fill width — easier to tap. */
    .rb-btn--primary {
        flex: 1 1 auto;
        padding: 0 24px;
    }

    /* Touch-friendly slider thumb */
    .rb-slider__input::-webkit-slider-thumb {
        width: 32px;
        height: 32px;
        margin-top: -15px;
    }
    .rb-slider__input::-moz-range-thumb {
        width: 32px;
        height: 32px;
    }
    .rb-slider__input {
        height: 44px;
    }

    /* Welcome CTA: full-width on small screens, easy thumb-tap. */
    .rb-welcome__cta {
        width: 100%;
        justify-content: center;
        margin-top: 28px;
    }

    .rb-welcome__body p {
        font-size: 16px;
    }

    .rb-form-eyebrow {
        font-size: 12px;
        flex-wrap: wrap;
    }

    .rb-page__inner {
        gap: 32px;
    }

    .rb-form {
        gap: 28px;
    }

    .rb-form-step {
        gap: 20px;
    }
}

/* Small phones (iPhone SE, etc.) */
@media (max-width: 380px) {
    .rb-step-title {
        font-size: 21px;
        line-height: 1.25;
    }

    .rb-option__box {
        padding: 14px 16px;
        font-size: 15px;
    }

    .rb-slider__value {
        font-size: 44px;
    }

    .rb-slider__unit {
        font-size: 22px;
    }

    .rb-slider__scale {
        font-size: 11px;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .rb-form-step,
    .rb-conditional,
    .rb-progress__bar {
        animation: none !important;
        transition: none !important;
    }
}