/* =========================================
   FRITTS — Termin Page Styles (Scaffold)
   Empty step-card stage reserved for TASK-041+.
   Final form styles, tokens, and per-step layouts
   land in TASK-040 and later.
   ========================================= */

/* Page wrapper — sits below the fixed header, fills at least
   the remaining viewport, and vertically centers the step-card
   stage. Uses brand dark teal as the page background so the
   upcoming white step card (see RefImages/step1.png) reads
   cleanly against it. */
.termin-page {
    width: 100%;
    min-height: 100svh;
    padding: 8em 2em 6em;
    background-color: var(--color-brand-dark-teal);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centered content column. Width kept modest so the step
   card later sits comfortably in the middle of the frame
   and respects the 2:1 app-frame clamp. */
.termin-inner {
    width: 100%;
    max-width: 50em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    padding: 2em 0;
}

/* Empty placeholder for the step card. Reserves vertical
   space so the page layout is already correct when TASK-041
   drops actual step content into this slot. */
.termin-stage {
    width: 100%;
    min-height: 32em;
    padding: 2em;
}

/* =========================================
   Termin Wizard — Shared Building Blocks
   Primitives used by every step (1–7). All
   per-step markup drops these classes in;
   no step should define its own bespoke
   card / input / button / tile CSS. Tokens
   live in design.css under "Termin / Wizard".
   ========================================= */

/* -----------------------------------------
   Card shell
   White rounded container that holds the
   progress row + one step's content. Relative
   positioning reserves the anchor for the
   absolute .termin-close button at top-right.
   ----------------------------------------- */
.termin-card {
    position: relative;
    width: 100%;
    max-width: var(--termin-card-max-width);
    padding: var(--termin-card-padding-block) var(--termin-card-padding-inline);
    background: var(--termin-card-bg);
    border-radius: var(--termin-card-radius);
    box-shadow: var(--termin-card-shadow);
    font-family: var(--font-family-primary);
    color: var(--termin-text);
}

/* -----------------------------------------
   Progress row
   Top-of-card row with the "Schritt X von 7"
   label on the left and a growing fill bar
   that occupies the remaining horizontal
   space. Optional pill variant floats to the
   far right of this row (only on steps 5/6/7).
   ----------------------------------------- */
.termin-progress {
    display: flex;
    align-items: center;
    gap: 1em;
    width: 100%;
}

.termin-progress-label {
    font-size: 0.8em;
    font-weight: var(--font-weight-bold);
    color: var(--termin-muted);
    white-space: nowrap;
}

.termin-progress-track {
    flex: 1;
    height: var(--termin-progress-height);
    background: var(--termin-progress-track);
    border-radius: 50px;
    overflow: hidden;
}

.termin-progress-fill {
    width: 0%;
    height: 100%;
    background: var(--termin-progress-fill);
    border-radius: 50px;
    transition: width 0.4s ease;
}

/* Optional pill pushed to the right end of
   the progress row. Inherits .termin-pill
   visuals; this modifier only handles
   alignment in the context of the row. */
.termin-progress-pill {
    margin-left: auto;
}

/* -----------------------------------------
   Step body
   Flex column that stacks the eyebrow,
   heading, subtitle, controls, and CTA
   underneath the progress row.
   ----------------------------------------- */
.termin-step {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

/* -----------------------------------------
   Typography helpers
   Small uppercase eyebrow, centered h2
   heading, centered muted subtitle, plus
   a generic muted utility for helper lines.
   ----------------------------------------- */
.termin-eyebrow {
    font-size: 0.75em;
    font-weight: var(--font-weight-bold);
    color: var(--termin-eyebrow-color);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
}

.termin-heading {
    font-size: 1.6em;
    font-weight: var(--font-weight-bold);
    color: var(--termin-text);
    line-height: 1.3;
    text-align: center;
}

.termin-sub {
    font-size: 0.95em;
    color: var(--termin-muted);
    line-height: 1.5;
    text-align: center;
}

.termin-muted {
    font-size: 0.9em;
    color: var(--termin-muted);
    line-height: 1.5;
}

/* Centered helper copy under a CTA (e.g. Step 3 PLZ). */
.termin-helper {
    text-align: center;
}

/* -----------------------------------------
   Form controls
   Field label, text/email/phone input, and
   a flex row helper for multi-input layouts
   (e.g. Straße / Nr. on the address step).
   ----------------------------------------- */
.termin-label {
    display: block;
    margin-bottom: 0.5em;
    font-size: 0.9em;
    font-weight: var(--font-weight-bold);
    color: var(--termin-text);
}

.termin-input {
    width: 100%;
    padding: var(--termin-input-padding-block) var(--termin-input-padding-inline);
    background: var(--termin-input-bg);
    border: 1px solid var(--termin-input-border);
    border-radius: var(--termin-input-radius);
    font-family: var(--font-family-primary);
    font-size: 1em;
    color: var(--termin-text);
    outline: none;
    transition: border-color 0.2s ease;
}

.termin-input:focus {
    border-color: var(--termin-input-border-focus);
}

.termin-input::placeholder {
    color: var(--termin-muted);
}

/* Label-on-top-of-input wrapper used by any
   step that stacks a .termin-label above a
   .termin-input (Step 4 name fields, and
   reused by later address/contact steps).
   Defined once as a shared primitive. */
.termin-field {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    width: 100%;
}

.termin-input-row {
    display: flex;
    gap: 1em;
    width: 100%;
}

.termin-input-row__wide {
    flex: 1 1 auto;
}

.termin-input-row__narrow {
    flex: 0 0 7em;
}

/* -----------------------------------------
   Option tiles (grid)
   Selectable tile with icon + label. Active
   state uses brand red border + 8% red fill
   (instead of the reference green). Grid
   defaults to 3 columns; the --2 modifier
   forces 2-column layout for steps that need it.
   ----------------------------------------- */
.termin-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    width: 100%;
}

.termin-options-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.termin-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
    padding: 1.5em;
    background: var(--color-brand-white);
    border: 1px solid var(--termin-option-border);
    border-radius: var(--termin-option-radius);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
    /* Allow grid item to shrink below its intrinsic content
       width so long German compound words (e.g. "Mehrfamilien-
       haus") don't force the tile wider than its column. */
    min-width: 0;
}

.termin-option:hover {
    border-color: #cbd5e1;
    transform: translateY(-0.15em);
}

.termin-option.termin-option--active {
    border-color: var(--termin-option-border-active);
    background: var(--termin-option-bg-active);
}

.termin-option-icon {
    width: 2.4em;
    height: 2.4em;
    display: block;
    color: inherit;
}

.termin-option-label {
    font-size: 0.95em;
    font-weight: var(--font-weight-bold);
    color: var(--termin-text);
    text-align: center;
    /* Break long unhyphenated German compounds
       (e.g. "Mehrfamilienhaus") onto multiple
       lines instead of overflowing the tile. */
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* -----------------------------------------
   Trust line
   Small padlock icon + muted helper copy used
   under the CTA on steps that collect contact
   details (Step 5 phone, Step 7 email/submit).
   Defined once as a shared primitive.
   ----------------------------------------- */
.termin-trust-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    font-size: 0.8em;
    color: var(--termin-muted);
    line-height: 1.5;
}

.termin-trust-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    margin-top: 0.2em;
}

/* -----------------------------------------
   Pill badge
   "Nur noch X Schritte!" rounded badge used
   in the progress row on later steps.
   ----------------------------------------- */
.termin-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4em 0.9em;
    background: var(--termin-pill-bg);
    color: var(--termin-pill-color);
    border-radius: var(--termin-pill-radius);
    font-size: 0.75em;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

/* -----------------------------------------
   Back link
   Text-style button shown above the primary
   CTA on steps 2+. Sits centered under the
   main form body.
   ----------------------------------------- */
.termin-back {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.9em;
    color: var(--termin-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.termin-back:hover {
    color: var(--termin-text);
}

/* -----------------------------------------
   Primary full-width CTA
   Red "Weiter" button at the bottom of each
   step. Distinct from the header's
   .btn-primary (pill) — this is the wizard's
   full-width rounded-rectangle variant.
   ----------------------------------------- */
.termin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    padding: var(--termin-btn-padding-block) var(--termin-btn-padding-inline);
    background: var(--termin-btn-bg);
    color: var(--color-brand-white);
    border: none;
    border-radius: var(--termin-btn-radius);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-bold);
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.termin-btn:hover {
    background: var(--termin-btn-bg-hover);
    transform: scale(1.01);
}

.termin-btn[disabled],
.termin-btn:disabled,
.termin-btn.is-disabled {
    background: var(--termin-btn-disabled-bg);
    color: var(--color-brand-white);
    cursor: not-allowed;
    transform: none;
}

/* -----------------------------------------
   Close button
   Small round icon button pinned to the
   top-right corner of .termin-card. Icon SVG
   is injected per-step (TASK-041 onward); this
   rule handles chrome + sizing only.
   ----------------------------------------- */
.termin-close {
    position: absolute;
    top: 1.25em;
    right: 1.25em;
    width: 2em;
    height: 2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--termin-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.termin-close:hover {
    background: var(--termin-input-bg);
    color: var(--termin-text);
}

.termin-close-icon {
    width: 1em;
    height: 1em;
    display: block;
}

/* =========================================
   Termin Wizard — Step 1 specifics
   Step-card hook (carries any per-step tweaks
   beyond the shared .termin-card chrome) plus
   the top-of-card title/subtitle header stack
   and the "I don't own property" fallback link
   below the options grid.
   ========================================= */

/* Step card hook — kept as an anchor for any
   step-specific overrides. Currently no-op;
   shared .termin-card handles chrome. */
.termin-step-card {
    /* intentionally empty */
}

/* Only one step card is visible at a time.
   TASK-048 will manage the [hidden] attribute
   via JS; until then, Step 1 renders and all
   later steps stay hidden on page load. */
.termin-step-card[hidden] {
    display: none;
}

/* Top header stack above the progress row:
   "Ersparnis berechnen" + "Unverbindlich ·
   in 2 Minuten". Sits as a centered flex
   column with tight gap, and a bottom margin
   that separates it from the progress track. */
.termin-step-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 1.5em;
}

/* "Ich bin Mieter oder besitze keine
   Immobilie" fallback link beneath the tiles.
   Centered, muted, non-underlined by default;
   reveals an underline on hover. */
.termin-step__fallback {
    display: block;
    text-align: center;
    font-size: 0.9em;
    color: var(--termin-muted);
    text-decoration: none;
    margin-top: 0.5em;
}

.termin-step__fallback:hover {
    color: var(--termin-text);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* =========================================
   Termin Wizard — Step 7 specifics
   Final step: urgency banner, consent block
   with legal links, divider, security card,
   and a compact trust row. All elements are
   purely visual — submission wiring lands in
   TASK-048.
   ========================================= */

/* Soft-amber urgency callout above the email
   field. Clock icon in brand red + body copy
   with a bolded "11+ Anfragen" portion. */
.termin-urgency {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    padding: 1em 1.25em;
    background: #fff8e6;
    border: 1px solid #f5e3b0;
    border-radius: 0.75em;
    color: var(--termin-text);
    font-size: 0.9em;
    line-height: 1.5;
}

.termin-urgency-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    color: var(--color-brand-red);
    margin-top: 0.1em;
}

/* Checkbox + inline legal copy wrapper.
   Label element so clicking anywhere in the
   block toggles the checkbox. */
.termin-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    padding: 1em;
    background: var(--termin-input-bg);
    border-radius: 0.75em;
    font-size: 0.85em;
    color: var(--termin-muted);
    line-height: 1.5;
    cursor: pointer;
}

.termin-consent-checkbox {
    margin: 0;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    accent-color: var(--color-brand-red);
    cursor: pointer;
}

.termin-consent a {
    color: var(--color-brand-cyan);
    text-decoration: underline;
}

/* Hairline rule separating the CTA stack
   from the trust / security block below. */
.termin-divider {
    border: none;
    border-top: 1px solid var(--termin-input-border);
    margin: 1em 0 0;
}

/* Shield icon + two-line security pitch
   ("100% Kostenlos & Unverbindlich" bold
   headline + muted SSL explainer). */
.termin-security-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
}

.termin-security-icon {
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
    color: var(--color-brand-cyan);
}

.termin-security-text {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    font-size: 0.85em;
    color: var(--termin-muted);
    line-height: 1.5;
}

.termin-security-text strong {
    color: var(--termin-text);
    font-size: 0.95em;
}

/* Three-up trust signal row at the very
   bottom of the card: rating, GDPR, SSL. */
.termin-trust-row {
    display: flex;
    justify-content: center;
    gap: 1.5em;
    flex-wrap: wrap;
    font-size: 0.8em;
    color: var(--termin-muted);
}

.termin-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.termin-trust-item img {
    width: 1em;
    height: 1em;
}

/* =========================================
   Termin Wizard — Step transitions (TASK-048)
   Minimal fade-in for the currently visible
   step card. `[hidden]` already removes the
   card from the layout (see rule above); this
   rule only softens the appearance of the
   active step on forward/back navigation.
   ========================================= */
.termin-step-card {
    transition: opacity 0.3s ease;
}

.termin-step-card.is-active {
    opacity: 1;
}

/* =========================================
   Termin Wizard — Success panel (TASK-048)
   Shown after a successful submit. Reuses the
   shared .termin-card chrome and adds a
   centered column layout for the thank-you
   heading, copy, and back-to-home CTA.
   ========================================= */
.termin-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    text-align: center;
}

.termin-success[hidden] {
    display: none;
}

/* Anchor variant of .termin-btn — used by the
   "Zur Startseite" link on the success panel.
   Keeps the red full-width pill look but strips
   link underline + inherited color. */
.termin-btn--link {
    text-decoration: none;
    color: var(--color-brand-white);
}

.termin-btn--link:hover {
    color: var(--color-brand-white);
}

/* =========================================
   Narrow-viewport responsive tweaks
   The document font-size already scales with
   viewport width via `html { font-size: calc(16 * var(--frame-w) / 1644); }`
   in main.css, so layout generally holds. At
   very narrow widths, however, the 3-column
   option grid compresses each tile below a
   readable size and long German compounds
   still feel cramped even with `overflow-wrap`.
   The rules below collapse the tile grid to a
   single column of row-oriented tiles and shave
   some card padding so everything breathes.
   Breakpoint is in viewport px (independent of
   the scaled document font-size) for predictable
   triggering on mobile / narrow windows.
   ========================================= */
@media (max-width: 640px) {
    .termin-card {
        padding: 2em 1.5em;
    }

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

    .termin-option {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 1em;
        padding: 1.1em 1.25em;
    }

    .termin-option-label {
        text-align: left;
    }

    .termin-input-row {
        flex-direction: column;
    }

    .termin-input-row__narrow {
        flex: 1 1 auto;
    }

    .termin-trust-row {
        flex-direction: column;
        gap: 0.6em;
        align-items: center;
    }
}