/* =========================================================================
   pramienrechner2027.ch — Swiss Neumorphism design system  (v2)
   Soft-UI surfaces, Swiss-red accent, self-hosted Inter (variable font).
   Mobile-first. No framework, no build step.

   Sections:
     1. Fonts + reset
     2. Design tokens (space / shadow / radius / color scales)
     3. Base typography + layout primitives
     4. Ambient background (drifting blobs + grain)
     5. Focus system (glow + underline sweep — no outline rectangles)
     6. Neumorphic primitives + buttons
     7. Form fields, franchise slider, toggle
     8. Header / language switcher
     9. Hero
    10. Calculator card
    11. Results (skeleton, savings banner, podium, rows)
    12. Lead capture
    13. Sections / steps / FAQ / footer
    14. Motion utilities (reveal-on-scroll) + reduced-motion
   ========================================================================= */

/* ---------- 1. Fonts + reset ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter/Inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter/Inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- 2. Design tokens ---------- */
:root {
    /* Surfaces */
    --bg:            #E0E5EC;
    --surface:       #EEF1F6;
    --surface-raised:#F4F6FA;

    /* Accent — Swiss flag red */
    --accent:        #DA291C;
    --accent-dark:   #B4200F;
    --accent-light:  #FBE2DF;
    --accent-glow:   rgba(218, 41, 28, 0.16);

    /* Text */
    --text:          #2D3748;
    --text-muted:    #5F6B80;
    --text-faint:    #8A93A6;

    /* Neumorphic shadow pair */
    --shadow-dark:   rgba(163, 177, 198, 0.55);
    --shadow-light:  rgba(255, 255, 255, 0.90);

    /* Shadow scale — every raised surface uses one of these, never ad-hoc values */
    --shadow-raised-sm: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light);
    --shadow-raised-md: 9px 9px 20px var(--shadow-dark), -9px -9px 20px var(--shadow-light);
    --shadow-raised-lg: 14px 14px 32px var(--shadow-dark), -14px -14px 32px var(--shadow-light);
    --shadow-hover:     16px 18px 36px var(--shadow-dark), -14px -14px 32px var(--shadow-light);
    --shadow-inset-sm:  inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);
    --shadow-inset-md:  inset 5px 5px 11px var(--shadow-dark), inset -5px -5px 11px var(--shadow-light);

    /* Feedback */
    --success:       #1F9D55;
    --success-bg:    #E4F7EC;

    /* Slider progress: neutral dark grey rather than the accent, so the red is
       reserved for the things that should pull the eye (prices, CTAs). */
    --slider-fill:   #5F6B80;

    /* Spacing scale — the fix for "everything is too cramped" */
    --space-2xs: 8px;
    --space-xs:  12px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  32px;
    --space-xl:  48px;
    --space-2xl: 72px;
    --space-3xl: 104px;

    --radius-sm:   10px;
    --radius:      12px;
    --radius-lg:   16px;
    --radius-xl:   18px;
    --radius-pill: 999px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Desktop reads as a wide site; mobile is a focused app shell. */
    --max-width: 1280px;
    --calc-width: 1040px;
    --app-bar-h: 76px;
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Icons (Solar duotone, inlined — see app/partials/icons.php) ----------
   Duotone comes for free: the backing shape carries opacity .5, so every icon
   just inherits `currentColor`. Sized in em so it tracks its text. */
.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    display: inline-block;
    vertical-align: -0.25em;
}
.icon-lg { width: 1.75em; height: 1.75em; }
.label-icon { color: var(--accent); margin-right: 0.45em; }
.chevron-sm { width: 0.95em; height: 0.95em; opacity: 0.65; }

/* ---------- 3. Base ---------- */
/* The page colour lives on <html> only.
   If <body> also had a background, that background would paint OVER the
   .bg-scene layer (which sits at z-index:-1), hiding the blobs and the
   bouncing bubble completely — negative-z-index descendants paint below the
   in-flow background of their ancestor. Keep body transparent. */
html {
    background: var(--bg);
    overflow-x: hidden;
}
body {
    background: transparent;
    color: var(--text);
    overflow-x: hidden;   /* both: body alone still lets <html> grow a scrollbar */
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; color: var(--text); letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.18rem; letter-spacing: -0.01em; }
p  { color: var(--text-muted); }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

main, .site-footer { position: relative; }

/* ---------- 4. Ambient background ---------- */
.bg-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.bg-scene .blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}
.blob-red {
    width: 55vw; height: 55vw;
    top: -14vw; right: -12vw;
    background: rgba(218, 41, 28, 0.07);
    animation: drift-a 70s ease-in-out infinite alternate;
}
.blob-gray {
    width: 45vw; height: 45vw;
    bottom: -10vw; left: -10vw;
    background: rgba(163, 177, 198, 0.28);
    animation: drift-b 90s ease-in-out infinite alternate;
}
.blob-light {
    width: 60vw; height: 60vw;
    top: 22vh; left: 18vw;
    background: rgba(255, 255, 255, 0.65);
    animation: drift-c 110s ease-in-out infinite alternate;
}
@keyframes drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-9vw, 7vh, 0) scale(1.15); }
}
@keyframes drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(11vw, -6vh, 0) scale(1); }
}
@keyframes drift-c {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(8vw, 9vh, 0) scale(1.12); }
}

/* ---------- Bouncing Swiss-cross bubble ----------
   A soft red orb with a crisp white cross that drifts across the page and
   bounces off all four edges, like the ball in an old 2D tennis game.
   The orb and the cross are separate layers on purpose: `filter: blur()`
   applies to descendants, so blurring a parent would smear the cross too.
   Position is set by app.js via translate3d (transform only — no layout). */
.bouncer {
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    height: 190px;
    will-change: transform;
    pointer-events: none;
}
.bouncer-orb {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%,
        rgba(232, 74, 60, 0.60) 0%,
        rgba(218, 41, 28, 0.42) 48%,
        rgba(180, 32, 15, 0.16) 74%,
        rgba(218, 41, 28, 0) 100%);
    filter: blur(6px);
}
/* Swiss cross: two crisp white bars, squared off, centred on the orb */
.bouncer-cross {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34%;
    height: 34%;
    transform: translate(-50%, -50%);
}
.bouncer-cross::before,
.bouncer-cross::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(120, 20, 10, 0.30);
}
.bouncer-cross::before {          /* vertical bar */
    width: 30%;
    height: 100%;
    transform: translate(-50%, -50%);
}
.bouncer-cross::after {           /* horizontal bar */
    width: 100%;
    height: 30%;
    transform: translate(-50%, -50%);
}
@media (max-width: 720px) {
    .bouncer { width: 120px; height: 120px; }
}

/* Fine grain — kills the "flat plastic" look of large soft gradients.
   Sits inside .bg-scene so it paints above the blobs but below all content. */
.bg-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 5. Focus system ----------
   A single hairline in the brand red. Fields carry a transparent 1px border at
   rest so gaining one on focus never shifts layout. */
.input:focus, .select:focus, .ts-wrapper.focus .ts-control {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-inset-sm);
}
.field:focus-within > label,
.field:focus-within > .field-label { color: var(--accent-dark); }

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
.franchise-range:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}
/* a red ring on a red button is invisible — outline in the page background
   instead, which reads clearly against the accent fill */
.btn-primary:focus-visible {
    outline-color: var(--text);
    outline-offset: 2px;
}
.franchise-range:focus-visible::-webkit-slider-thumb { border-color: var(--accent-dark); }
.franchise-range:focus-visible::-moz-range-thumb { border-color: var(--accent-dark); }
.franchise-range:focus { outline: none; }
.franchise-range:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--shadow-raised-sm), 0 0 0 5px var(--accent-glow);
}
.franchise-range:focus-visible::-moz-range-thumb {
    box-shadow: var(--shadow-raised-sm), 0 0 0 5px var(--accent-glow);
}

/* ---------- 6. Neumorphic primitives + buttons ---------- */
.neu-raised {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised-md);
}
.neu-inset {
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset-sm);
}
.neu-flat { background: var(--surface); border-radius: var(--radius); }

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    padding: 1.05em 2em;
    border-radius: var(--radius-pill);
    transition: transform 0.15s var(--ease-out-soft), box-shadow 0.15s ease, background-color 0.15s ease;
    user-select: none;
    overflow: hidden;
}
.btn:active { transform: translateY(2px) scale(0.995); }

.btn-primary {
    background: linear-gradient(145deg, var(--accent), var(--accent-dark));
    color: #fff;
    min-height: 56px;
    box-shadow: var(--shadow-raised-md), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary::after {
    /* shine sweep on hover */
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s var(--ease-out-soft);
    pointer-events: none;
}
.btn-primary:hover::after { left: 125%; }
.btn-primary:hover { background: linear-gradient(145deg, #E63A2C, var(--accent)); }
.btn-primary:active {
    box-shadow: inset 4px 4px 9px var(--accent-dark), inset -3px -3px 8px #ff5a49;
}

.btn-ghost {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-raised-sm);
}
.btn-ghost:hover { box-shadow: var(--shadow-raised-md); }
.btn-ghost:active { box-shadow: var(--shadow-inset-sm); }

.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn[disabled]::after { display: none; }

/* ---------- 7. Form fields ---------- */
.field { margin-bottom: 1.9rem; }
.field > label,
.field .field-label {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.65rem;
    color: var(--text);
    transition: color 0.18s ease;
}
/* keep the label's accent icon red even while the label text turns red on focus */
.field:focus-within > label .label-icon,
.field:focus-within > .field-label .label-icon { color: var(--accent-dark); }
.field-hint {
    display: block;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-faint);
    margin-top: 0.6rem;
}

.input, .select {
    width: 100%;
    /* transparent at rest, red on focus — a border that is always present
       cannot shift layout when it becomes visible */
    border: 1px solid transparent;
    background-color: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset-sm);
    padding: 1.05em 1.15em;
    font-size: 1rem;
    color: var(--text);
    font-weight: 600;
    transition: border-color 0.16s ease, box-shadow 0.18s ease;
}
.input::placeholder { color: var(--text-faint); font-weight: 400; }

.select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%232D3748' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1.2em center;
    background-size: 14px 9px;
    padding-right: 3em;
}

/* ---------- Tom Select skin ----------
   The vendor stylesheet ships a generic look; this re-dresses it as one of our
   inset fields with the same hairline-red focus treatment. */
.ts-wrapper { width: 100%; }
/* Tom Select copies the original <select>'s classes onto its wrapper, so the
   `.select` field styling would paint a second box around the real control.
   Strip it back to a bare container and style .ts-control instead. */
.ts-wrapper.select {
    background: none;
    background-image: none;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
    /* background-COLOR, not the `background` shorthand: the shorthand would
       reset background-image and wipe out the dropdown chevron below */
    background-color: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset-sm);
    padding: 1.05em 3em 1.05em 1.15em;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    min-height: 0;
    transition: border-color 0.16s ease;
}
/* Tom Select ships a 13px control input; match the native fields (16px) so the
   "choose a year" placeholder is the same size as the PLZ placeholder */
.ts-wrapper.single .ts-control input,
.ts-wrapper .ts-control > input {
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.6;
}
.ts-wrapper .ts-control > input::placeholder {
    color: var(--text-faint);
    font-weight: 400;
    opacity: 1;
}
.ts-wrapper.single .ts-control::after { display: none; }  /* vendor caret */
/* Keep the control on ONE line. Tom Select's control is a wrapping flex box, so
   typing a long query pushed the caret onto a second row and grew the field,
   which visibly shifted the whole form. */
.ts-wrapper.single .ts-control {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}
.ts-wrapper.single .ts-control > input {
    min-width: 0;
    flex: 1 1 auto;
    text-overflow: ellipsis;
}
.ts-wrapper.single .ts-control > .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* dropdown chevron — same mark as the native .select, so a Tom Select field is
   still recognisable as a dropdown at a glance */
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%232D3748' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1.2em center;
    background-size: 14px 9px;
}
/* flip the chevron while the list is open */
.ts-wrapper.single.dropdown-active .ts-control {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 8l6-6 6 6' stroke='%23DA291C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.ts-wrapper.single.dropdown-active .ts-control { border-radius: var(--radius-sm); }
/* match .input's line-height so the picker is exactly as tall as a text field */
.ts-wrapper .ts-control > .item,
.ts-wrapper .ts-control > input { line-height: 1.6; }
.ts-wrapper.plugin-drop_down .ts-dropdown,
.ts-dropdown {
    margin-top: 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    box-shadow: var(--shadow-raised-lg);
    padding: 0.35rem;
    overflow: hidden;
    z-index: 70;
}
.ts-dropdown .option {
    border-radius: 10px;
    padding: 0.7em 0.9em;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
}
.ts-dropdown .active { background: var(--accent-light); color: var(--accent-dark); }
.ts-dropdown .selected,
.ts-dropdown .option[aria-selected="true"] { background: var(--accent); color: #fff; }
.ts-dropdown .no-results { padding: 0.75em 0.9em; color: var(--text-faint); font-size: 0.9rem; }
.ts-dropdown-content { max-height: 260px; }
.ts-wrapper.single.input-active .ts-control { cursor: text; }
.ts-wrapper .ts-control input::placeholder { color: var(--text-faint); font-weight: 400; }

/* (The PLZ field previously carried a map-pin inside the input as well as on
   its label. The inner one was redundant, so only the label icon remains.) */

/* ---------- Franchise slider ---------- */
.franchise-slider { padding-top: 0.35rem; }
.franchise-slider-track-wrap { position: relative; }

/* Value bubble: only while the slider is actually being moved. It floats over
   the field label above it (hence the z-index) instead of reserving space. */
.slider-bubble {
    position: absolute;
    bottom: calc(100% + 0.7rem);
    z-index: 10;
    transform: translateX(-50%) scale(0.92);
    background: var(--surface-raised);
    box-shadow: var(--shadow-raised-md);
    color: var(--slider-fill);
    font-weight: 800;
    font-size: 0.95rem;
    padding: 0.45em 0.95em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: left 0.12s var(--ease-out-soft),
                opacity 0.16s ease,
                transform 0.16s var(--ease-out-soft),
                visibility 0.16s;
}
.franchise-slider.is-sliding .slider-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}
.slider-bubble::after {
    content: '';
    position: absolute;
    /* --tail-offset keeps the pointer aimed at the thumb when the bubble has
       been clamped to stay inside the track (set by app.js) */
    left: calc(50% + var(--tail-offset, 0px));
    top: 100%;
    width: 10px; height: 10px;
    background: var(--surface-raised);
    transform: translateX(-50%) translateY(-55%) rotate(45deg);
    box-shadow: 3px 3px 5px rgba(163, 177, 198, 0.35);
}

.franchise-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 44px; /* ≥44px hit area for touch */
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
/* WebKit track + thumb */
.franchise-range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: var(--radius-pill);
    background-color: var(--surface);
    background-image: linear-gradient(to right, var(--slider-fill) 0%, var(--slider-fill) calc(var(--slider-progress, 0) * 1%), rgba(0, 0, 0, 0) calc(var(--slider-progress, 0) * 1%));
    box-shadow: var(--shadow-inset-sm);
}
.franchise-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px; height: 30px;
    margin-top: -10px;
    border-radius: 50%;
    background: var(--surface-raised);
    border: 3px solid var(--slider-fill);
    box-shadow: var(--shadow-raised-sm);
    transition: transform 0.15s var(--ease-out-soft), box-shadow 0.15s ease;
}
.franchise-range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.franchise-range:active::-webkit-slider-thumb {
    transform: scale(0.94);
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
}
/* Firefox track + progress + thumb */
.franchise-range::-moz-range-track {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-inset-sm);
}
.franchise-range::-moz-range-progress {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--slider-fill);
}
.franchise-range::-moz-range-thumb {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--surface-raised);
    border: 3px solid var(--slider-fill);
    box-shadow: var(--shadow-raised-sm);
    transition: transform 0.15s var(--ease-out-soft);
}
.franchise-range:active::-moz-range-thumb { transform: scale(0.94); }

.slider-ticks {
    position: relative;
    height: 1.25rem;
    margin-top: 0.15rem;
}
.slider-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-faint);
    transition: color 0.18s ease, font-weight 0.18s ease;
    white-space: nowrap;
}
.slider-tick.is-active { color: var(--slider-fill); font-weight: 800; }
.franchise-fallback { display: block; }

/* ---------- Toggle switch ---------- */
/* Flat by design: this block reads as a bordered panel rather than a raised
   neumorphic card, to keep the busy calculator column calmer. */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: none;
    padding: 1.15em 1.35em;
}
/* icon sits in its own column, so the label and the state text under it line
   up on the same left edge instead of the text starting under the icon */
.toggle-copy { display: flex; align-items: flex-start; gap: 0.55rem; min-width: 0; }
.toggle-copy > .toggle-icon {
    color: var(--accent);
    font-size: 1.15rem;
    flex: none;
    margin-top: 0.05em;
}
.toggle-row .toggle-label { font-weight: 700; font-size: 0.95rem; }
.toggle-row .toggle-desc { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.25rem; }
.toggle {
    position: relative;
    width: 64px;
    height: 34px;
    flex: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-inset-sm);
    transition: background 0.2s ease;
}
.toggle::after {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--surface-raised);
    box-shadow: var(--shadow-raised-sm);
    transition: transform 0.22s var(--ease-out-soft), background 0.22s ease;
}
.toggle[aria-checked="true"] { background: var(--accent-light); }
.toggle[aria-checked="true"]::after {
    transform: translateX(30px);
    background: var(--accent);
}
.toggle:active::after { transform: scaleX(1.18); }
.toggle[aria-checked="true"]:active::after { transform: translateX(30px) scaleX(1.18); }

/* ---------- 8. Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg);
    padding: var(--space-sm) 0;
    transition: padding 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.site-header.is-scrolled {
    padding: 0.7rem 0;
    box-shadow: var(--shadow-raised-sm);
}
@supports (backdrop-filter: blur(8px)) {
    .site-header.is-scrolled {
        background-color: rgba(224, 229, 236, 0.92);
        backdrop-filter: blur(12px);
    }
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}
.logo {
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}
/* Wordmark: dark name, red year, all caps. Never translated — it is the brand.
   Tight tracking and a slight horizontal compression keep it narrow enough that
   the language button still fits beside it on a small phone. */
.logo-text {
    text-transform: uppercase;
    letter-spacing: -0.015em;
    color: var(--text);
    white-space: nowrap;
    transform: scaleX(0.94);
    transform-origin: left center;
}
.logo-year { color: var(--accent); margin-left: 0.18em; }
.logo .logo-mark {
    width: 36px; height: 36px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--accent), var(--accent-dark));
    box-shadow: var(--shadow-raised-sm);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1;
    transition: transform 0.25s var(--ease-out-soft);
}
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }

.lang-switcher { position: relative; }
.lang-switcher-btn {
    display: flex; align-items: center; gap: 0.45rem;
    background: var(--surface);
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 0.7em 1.05em;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-raised-sm);
    transition: box-shadow 0.15s ease;
}
.lang-switcher-btn:hover { box-shadow: var(--shadow-raised-md); }
.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 150px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-raised-lg);
    padding: 0.5rem;
    display: none;
}
.lang-switcher.open .lang-switcher-menu { display: block; animation: menu-in 0.2s var(--ease-out-soft); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lang-switcher-menu a {
    display: block;
    padding: 0.65em 0.85em;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.lang-switcher-menu a:hover, .lang-switcher-menu a[aria-current="true"] { background: var(--accent-light); color: var(--accent-dark); }

/* ---------- 9. Hero ---------- */
.hero { padding: var(--space-2xl) 0 var(--space-xl); }
.hero-head { text-align: center; max-width: 760px; margin: 0 auto var(--space-2xl); }
.hero-head h1 { margin-bottom: var(--space-md); }
.accent-word {
    color: var(--accent);
    position: relative;
    white-space: nowrap;
}
.accent-word::after {
    content: '';
    position: absolute;
    left: -3%; right: -3%;
    bottom: -0.16em;
    height: 0.16em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 45 2, 85 3, 122 6 S 180 10, 197 4' stroke='%23DA291C' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    opacity: 0.9;
}
.hero-head p { font-size: 1.1rem; max-width: 560px; margin: 0 auto; }
.trust-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-lg);
    margin-top: var(--space-lg); font-size: 0.87rem; color: var(--text-muted); font-weight: 600;
}
.trust-row span { display: flex; align-items: center; gap: 0.4rem; }
.trust-row .icon { color: var(--success); font-size: 1.05rem; }

/* ---------- Notice modal (data-year disclaimer on load) ---------- */
.notice-modal {
    width: min(440px, calc(100vw - 2 * var(--space-md)));
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    border: none;
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-raised-lg);
    color: var(--text);
    text-align: center;
    overflow: visible;
}
.notice-modal::backdrop {
    background: rgba(45, 55, 72, 0.45);
    backdrop-filter: blur(3px);
}
.notice-modal[open] { animation: notice-in 0.32s var(--ease-out-soft); }
.notice-modal[open]::backdrop { animation: fade-in-backdrop 0.32s ease; }
@keyframes notice-in {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes fade-in-backdrop { from { opacity: 0; } to { opacity: 1; } }
.notice-modal-icon {
    width: 62px; height: 62px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem;
}
.notice-modal-title { font-size: 1.2rem; margin-bottom: var(--space-sm); }
.notice-modal-text {
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: var(--space-lg);
    color: var(--text-muted);
}

/* ---------- 10. Calculator card ---------- */
.hero-calc-col { max-width: var(--calc-width); margin: 0 auto; }
.calc-card {
    padding: var(--space-xl) var(--space-lg);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-raised-lg);
}
@media (min-width: 1024px) {
    /* wide desktop: the card uses the space instead of sitting in a narrow column */
    .calc-card { padding: var(--space-xl) var(--space-2xl); }
}
/* Shared card heading (icon tile + title + subtitle), used by both the
   calculator and the consultation form so the two read as one family. */
.card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    position: relative;
}
.card-head-icon {
    width: 52px; height: 52px; border-radius: 16px; flex: none;
    background: linear-gradient(145deg, var(--accent), var(--accent-dark));
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: var(--shadow-raised-sm);
}
.card-head h3 { margin-bottom: 0.2rem; }
.card-head p { font-size: 0.92rem; line-height: 1.5; }

/* The calculator card gets the same tinted wash as the lead card. */
.calc-card {
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(circle at top right, rgba(251, 226, 223, 0.85), rgba(251, 226, 223, 0) 62%);
}
.calc-card > * { position: relative; }
.calc-grid { display: grid; grid-template-columns: 1fr; column-gap: 2.75rem; }
@media (min-width: 820px) {
    .calc-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .calc-grid { column-gap: var(--space-2xl); }
}
.calc-actions { margin-top: var(--space-sm); }
.data-stand {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-faint);
    margin-top: var(--space-md);
}

.plz-feedback {
    margin-top: 0.7rem;
    font-size: 0.86rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.plz-feedback:empty { display: none; }
.plz-feedback.ok { color: var(--success); }
.plz-feedback.err { color: var(--accent-dark); }
.plz-feedback .check-pop {
    display: inline-flex;
    color: var(--success);
    align-items: center; justify-content: center;
    flex: none;
    font-size: 1.1rem;
    animation: pop-in 0.3s var(--ease-out-soft);
}

.gemeinde-picker { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; }
.gemeinde-option {
    text-align: left;
    border: none;
    cursor: pointer;
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-raised-sm);
    padding: 0.85em 1.1em;
    font-weight: 700;
    font-size: 0.9rem;
    min-height: 44px;
    opacity: 0;
    transform: translateY(10px);
    animation: fade-rise 0.4s var(--ease-out-soft) forwards;
    transition: box-shadow 0.15s ease, transform 0.15s var(--ease-out-soft);
}
.gemeinde-option:hover { box-shadow: var(--shadow-raised-md); transform: translateY(-2px); }
.gemeinde-option small { display: block; color: var(--text-muted); font-weight: 500; margin-top: 0.15rem; }

@keyframes fade-rise { to { opacity: 1; transform: none; } }
@keyframes pop-in { from { transform: scale(0.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* one badge slides up into view, holds, then slides out (mobile trust row) */
@keyframes trust-cycle {
    0%        { opacity: 0; transform: translateY(9px); }
    4%, 30%   { opacity: 1; transform: none; }
    34%, 100% { opacity: 0; transform: translateY(-9px); }
}

/* ---------- Card swap (calculator <-> consultation form) ----------
   The two cards occupy the same slot; one slides out while the other slides
   in. `visibility` is animated too so the hidden card cannot be tabbed into. */
.swap-card {
    transition: opacity 0.38s var(--ease-out-soft),
                transform 0.38s var(--ease-out-soft),
                visibility 0.38s;
}
.swap-card.is-swapped-out {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px) scale(0.985);
    position: absolute;
    inset: 0 0 auto 0;
    pointer-events: none;
}
.swap-card.is-swapped-in {
    animation: swap-in 0.42s var(--ease-out-soft) both;
}
@keyframes swap-in {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.swap-stage { position: relative; }

/* results fading away when the visitor goes back to edit their details */
.results-section.is-clearing,
.podium-slot.is-clearing {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out-soft);
}
/* the cheapest offer sits above the form, so it needs its own bottom gap */
.podium-slot:not(:empty) { margin-bottom: var(--space-lg); }

/* ---------- Locked (blurred) insurer names ----------
   Prices stay visible; only the name and product of the three cheapest are
   masked until the consultation form is sent. */
.is-locked .result-insurer,
.is-locked .result-product,
.is-locked .podium-insurer,
.is-locked .podium-product {
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
    transition: filter 0.5s var(--ease-out-soft);
}
.result-podium.is-locked .podium-insurer { filter: blur(8px); }
.is-unlocking .result-insurer,
.is-unlocking .result-product,
.is-unlocking .podium-insurer,
.is-unlocking .podium-product {
    filter: blur(0);
}
/* Card footer: hairline rule, then the saving this comparison found. The
   banner is reused from the results list but stripped of its own card
   styling, since here it is part of the lead card rather than a card itself. */
.lead-footer:not(:empty) {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(163, 177, 198, 0.45);
}
.lead-footer .savings-banner {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    justify-content: center;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.45;
}
.lead-footer .savings-icon {
    width: 34px; height: 34px;
    background: var(--accent-light);
    box-shadow: none;
    font-size: 1rem;
}
.lead-footer .unlock-banner {
    margin: 0 0 var(--space-sm);
    padding: 0.6rem 0.9rem;
    font-size: 0.86rem;
    justify-content: center;
}
.unlock-banner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.2rem;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--success-bg);
    color: var(--success);
    font-weight: 700;
    font-size: 0.92rem;
    animation: fade-rise 0.45s var(--ease-out-soft) both;
}

/* ---------- Lead form action row (back + submit) ---------- */
.lead-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}
/* Stay side by side (grey back / red submit) on phones too — only stack on
   genuinely tiny screens, where 50/50 would clip the labels. */
@media (max-width: 480px) {
    .lead-actions { gap: 0.55rem; }
    .lead-actions .btn { padding-left: 0.6em; padding-right: 0.6em; font-size: 0.88rem; }
}
@media (max-width: 359px) {
    .lead-actions { grid-template-columns: 1fr; }
    .lead-actions .btn-back { order: 2; }
}
.btn-back {
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--shadow-raised-sm);
}
.btn-back:hover { color: var(--text); box-shadow: var(--shadow-raised-md); }
.btn-back:active { box-shadow: var(--shadow-inset-sm); }

/* ---------- 11. Results ---------- */
.results-section { padding: var(--space-md) 0 var(--space-2xl); }
.results-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-lg);
}
.results-head h2 { margin: 0; }
.results-meta { color: var(--text-muted); font-size: 0.88rem; }

/* Skeleton loading */
.skeleton-list { display: flex; flex-direction: column; gap: 1.25rem; }
.skeleton-row {
    height: 92px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-raised-sm);
    position: relative;
    overflow: hidden;
}
.skeleton-row::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* Savings banner */
.savings-banner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.15rem 1.5rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(218, 41, 28, 0.11), rgba(218, 41, 28, 0.03));
    box-shadow: var(--shadow-raised-sm);
    margin-bottom: var(--space-lg);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--accent-dark);
    line-height: 1.45;
}
.savings-banner .savings-icon {
    width: 42px; height: 42px; flex: none;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-raised-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    font-size: 1.15rem;
}

.result-list { display: flex; flex-direction: column; gap: 1.25rem; }

/* Podium — the cheapest option gets its own, larger treatment */
.result-podium {
    position: relative;
    /* glow painted as a background on the card itself — a pseudo-element would
       clip its gradient at its own box edge and leave a visible seam */
    background-color: var(--surface-raised);
    background-image: radial-gradient(120% 150% at 100% 0%, rgba(218, 41, 28, 0.13), rgba(218, 41, 28, 0) 58%);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-raised-lg), 0 0 0 2px var(--accent) inset;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px);
    animation: fade-rise 0.5s var(--ease-out-soft) forwards;
}
.podium-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.45em 1em;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 12px rgba(218, 41, 28, 0.35);
    margin-bottom: var(--space-md);
}
.podium-body {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.podium-insurer { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.podium-product { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.25rem; }
.podium-price { text-align: right; flex: none; }
.podium-price .monthly {
    font-size: clamp(2rem, 5.5vw, 2.7rem);
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.03em;
}
.podium-price .monthly .unit { font-size: 0.42em; font-weight: 700; color: var(--text-muted); letter-spacing: 0; }
.podium-price .yearly { font-size: 0.85rem; color: var(--text-faint); margin-top: 0.4rem; }

/* Regular rows */
.result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 1.35rem 1.6rem;
    flex-wrap: wrap;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised-sm);
    opacity: 0;
    transform: translateY(16px);
    animation: fade-rise 0.45s var(--ease-out-soft) forwards;
    transition: box-shadow 0.2s ease, transform 0.2s var(--ease-out-soft);
}
.result-row:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.result-rank {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-inset-sm);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.85rem; color: var(--text-muted);
    flex: none;
}
.result-main { flex: 1 1 220px; min-width: 0; }
.result-insurer { font-weight: 800; font-size: 1rem; display: block; }
.result-product { font-size: 0.85rem; color: var(--text-muted); }
.result-price { text-align: right; flex: none; }
.result-price .monthly { font-size: 1.4rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.result-price .monthly .unit { font-size: 0.55em; font-weight: 600; color: var(--text-faint); }
.result-price .yearly { font-size: 0.8rem; color: var(--text-faint); }

@media (max-width: 560px) {
    .result-row { align-items: flex-start; }
    .result-price { text-align: left; width: 100%; padding-left: calc(38px + var(--space-sm)); }
    .podium-price { text-align: left; }
}

/* ---------- 12. Lead capture ---------- */
.lead-card {
    padding: var(--space-xl) var(--space-lg);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-xl);
    /* no inset ring — it read as a border the calculator card did not have */
    box-shadow: var(--shadow-raised-lg);
    position: relative;
    overflow: hidden;
}
.lead-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at top right, rgba(251, 226, 223, 0.9), transparent 62%);
    pointer-events: none;
}
.lead-card-inner { position: relative; }
.lead-head { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.lead-icon {
    width: 52px; height: 52px; border-radius: 16px; flex: none;
    background: linear-gradient(145deg, var(--accent), var(--accent-dark));
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: var(--shadow-raised-sm);
}
.lead-success .success-mark .icon { width: 2.2em; height: 2.2em; }
.lead-form-grid { display: grid; grid-template-columns: 1fr; column-gap: var(--space-lg); }
@media (min-width: 640px) { .lead-form-grid { grid-template-columns: 1fr 1fr; } }
.lead-consent {
    display: flex; gap: 0.8rem; align-items: flex-start;
    font-size: 0.83rem; line-height: 1.55; color: var(--text-muted);
    margin: var(--space-sm) 0 var(--space-lg);
}
.lead-consent input { margin-top: 0.25rem; flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.lead-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-success { text-align: center; padding: var(--space-lg) 0; }
.lead-success .success-mark {
    width: 72px; height: 72px; margin: 0 auto var(--space-md); border-radius: 50%;
    background: var(--success-bg); color: var(--success);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-raised-sm);
    animation: pop-in 0.45s var(--ease-out-soft);
}
/* Third action: textual, centred, directly under the two buttons. */
.lead-skip { display: flex; justify-content: center; margin-top: 0.9rem; }
.lead-skip button {
    background: none; border: none; color: var(--text-muted);
    font-size: 0.84rem; font-weight: 600; text-decoration: underline;
    text-underline-offset: 3px; cursor: pointer;
    padding: 0.55em 1em; border-radius: var(--radius-pill);
    transition: color 0.15s ease;
}
.lead-skip button:hover { color: var(--text); }

/* ---------- 13. Sections / steps / FAQ / footer ---------- */
.section { padding: var(--space-3xl) 0; }
.section-head { max-width: 640px; margin: 0 auto var(--space-2xl); text-align: center; }
.section-head p { margin-top: var(--space-sm); }

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    position: relative;
}
@media (min-width: 720px) {
    .steps-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
    /* dashed connector running behind the three cards */
    .steps-grid::before {
        content: '';
        position: absolute;
        top: 58px;
        left: 16%;
        right: 16%;
        border-top: 2px dashed rgba(163, 177, 198, 0.7);
        z-index: 0;
    }
}
.step-card {
    padding: var(--space-lg);
    position: relative;
    z-index: 1;
    transition: box-shadow 0.25s ease, transform 0.25s var(--ease-out-soft);
}
.step-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.step-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-inset-sm);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-md);
    position: relative;
    font-size: 1.6rem;
}
.step-num {
    position: absolute;
    top: -4px; right: -4px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.72rem;
    box-shadow: 0 3px 8px rgba(218, 41, 28, 0.35);
}
.step-card h3 { margin-bottom: 0.5rem; }

.why-card { padding: var(--space-xl); }
.why-card h3 { margin-top: var(--space-lg); }
.why-card p + h3 { margin-top: var(--space-lg); }

.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
    padding: 0;
    margin-bottom: 1.1rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    transition: box-shadow 0.2s ease;
}
.faq-item:hover { box-shadow: var(--shadow-hover); }
.faq-q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
    padding: 1.35rem 1.6rem;
    font-weight: 700; font-size: 1rem;
    min-height: 44px;
    list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .chevron { transition: transform 0.3s var(--ease-out-soft); color: var(--accent); flex: none; }
.faq-item[open] .faq-q .chevron { transform: rotate(180deg); }
/* animated open/close via grid-template-rows (0fr -> 1fr) */
.faq-a-outer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s var(--ease-out-soft);
}
.faq-item[open] .faq-a-outer { grid-template-rows: 1fr; }
.faq-item.is-closing .faq-a-outer { grid-template-rows: 0fr; }
.faq-a-inner { min-height: 0; overflow: hidden; }
.faq-a { padding: 0 1.6rem 1.5rem; color: var(--text-muted); font-size: 0.94rem; line-height: 1.65; }

.site-footer { padding: var(--space-2xl) 0 var(--space-2xl); margin-top: var(--space-lg); }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: 0.88rem; }
.footer-links a {
    text-decoration: none; color: var(--text-muted); font-weight: 600;
    padding: 0.5em 0; transition: color 0.15s ease;
}
.footer-links a:hover { color: var(--accent-dark); }
.footer-fine { font-size: 0.79rem; line-height: 1.65; color: var(--text-faint); margin-top: var(--space-lg); }

.noscript-banner {
    background: var(--accent-light); color: var(--accent-dark);
    text-align: center; font-weight: 600; font-size: 0.9rem;
    padding: 0.9rem 1rem;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: #fff; padding: 0.9em 1.3em; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---------- 14. Motion utilities ---------- */
/* Reveal-on-scroll. Scoped to .js so content is never hidden without
   JavaScript, and released by .reveal-fallback if the observer never runs
   (see the inline gate script in app/page.php). */
[data-reveal] {
    transition: opacity 0.6s var(--ease-out-soft), transform 0.6s var(--ease-out-soft);
}
.js:not(.reveal-fallback) [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
}
.js:not(.reveal-fallback) [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.text-center { text-align: center; }
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-lg); }
.spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
    animation: spin 0.7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }

/* =========================================================================
   MOBILE APP SHELL
   On phones the page should feel like a native app: a compact top bar,
   full-bleed cards, and the primary action pinned in the thumb zone.
   On desktop none of this applies — it stays a wide, conventional website.
   ========================================================================= */

/* The bottom action bar exists only on mobile. */
.app-bar { display: none; }

@media (max-width: 720px) {
    .section { padding: var(--space-2xl) 0; }
    /* app feel: keep the hero brief so the calculator is reachable immediately */
    .hero { padding: var(--space-md) 0 var(--space-lg); }
    .hero-head { margin-bottom: var(--space-lg); }
    .hero-head h1 { font-size: 1.85rem; margin-bottom: var(--space-sm); }
    .hero-head p { font-size: 0.97rem; }

    /* Trust badges: too wide to sit side by side on a phone, so they share one
       row and cycle through, one at a time. Pure CSS — three items on a 9s loop,
       each offset by 3s. */
    .trust-row {
        position: relative;
        display: block;
        height: 1.7rem;
        margin-top: var(--space-md);
        font-size: 0.84rem;
    }
    .trust-row span {
        position: absolute;
        inset: 0;
        justify-content: center;
        opacity: 0;
        animation: trust-cycle 9s infinite;
    }
    .trust-row span:nth-child(1) { animation-delay: 0s; }
    .trust-row span:nth-child(2) { animation-delay: 3s; }
    .trust-row span:nth-child(3) { animation-delay: 6s; }

    .section-head { margin-bottom: var(--space-xl); }
    .why-card { padding: var(--space-lg) var(--space-md); }
    /* Tight gutters on phones: 10px from the screen edge to the card, and only
       5px inside the card, so the fields get as much width as possible. */
    .container { padding: 0 10px; }

    /* --- app top bar: compact, always visible --- */
    .site-header { padding: 0.6rem 0; }
    .site-header.is-scrolled { padding: 0.5rem 0; }
    /* header must fit brand + language button on a 360px screen */
    .logo { font-size: 0.92rem; gap: 0.45rem; min-width: 0; }
    .logo .logo-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 1.2rem; }
    .lang-switcher-btn { padding: 0.55em 0.7em; gap: 0.3rem; }
    .lang-switcher-btn .lang-code { font-size: 0.78rem; }
    .lang-switcher-btn .icon { font-size: 0.95rem; }
    .site-header-inner { gap: 0.5rem; }

    /* Cards stay inset from the screen edge — full-bleed looked cramped on a
       phone and clipped the soft shadows against the viewport. */
    .calc-card, .lead-card {
        padding: var(--space-lg) 10px;
        border-radius: var(--radius-xl);
    }
    .result-podium { padding: var(--space-md) var(--space-sm); }
    .result-row { padding: 1.1rem var(--space-sm); }
    .savings-banner { padding: 1rem var(--space-sm); }
    .faq-q { padding: 1.15rem var(--space-sm); }
    .faq-a { padding: 0 var(--space-sm) 1.25rem; }
    .step-card { padding: var(--space-lg) var(--space-md); }

    /* Every input, picker and select exactly the same height. An explicit
       height beats matching paddings, because a native <input> and Tom
       Select's <div> control resolve line-height differently and drifted
       apart by a couple of pixels. */
    .input,
    .select,
    .ts-wrapper.single .ts-control {
        height: 58px;
        min-height: 58px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 16px;      /* 16px keeps iOS from zooming on focus */
        line-height: normal;
    }
    .ts-wrapper.single .ts-control {
        display: flex;
        align-items: center;
        padding-left: 1.15em;
        padding-right: 3em;
    }
    .input, .select { padding-left: 1.15em; }
    .select { padding-right: 3em; }

    /* all franchise stops stay readable now that the card is wider */
    .slider-tick { display: block; font-size: 0.7rem; }

    /* --- primary action moves to the pinned bottom bar --- */
    .calc-submit-inline { display: none; }
    .calc-actions { margin-top: 0; }

    .app-bar {
        display: block;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        padding: 0.7rem var(--space-sm);
        /* clear the iOS home indicator on notched devices */
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
        background: rgba(224, 229, 236, 0.86);
        box-shadow: 0 -8px 24px rgba(163, 177, 198, 0.45);
    }
    @supports (backdrop-filter: blur(10px)) {
        .app-bar { backdrop-filter: blur(14px); }
    }
    @supports not (backdrop-filter: blur(10px)) {
        .app-bar { background: var(--bg); }
    }
    .app-bar .btn-primary { min-height: 54px; }

    /* keep the bar from covering the end of the page */
    body { padding-bottom: calc(var(--app-bar-h) + env(safe-area-inset-bottom, 0px)); }

    /* touch ergonomics */
    .input, .select { padding: 1.1em 1.15em; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
    .ts-wrapper.single .ts-control { font-size: 16px; }         /* same, for the pickers */
    .faq-q { min-height: 56px; }
    .gemeinde-option { min-height: 52px; }
}

/* Standalone (installed to the home screen): no browser chrome, so give the
   top bar a little more breathing room under the status bar. */
@media (display-mode: standalone) {
    .site-header { padding-top: calc(0.6rem + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 480px) {
    /* every franchise stop stays labelled — the tighter card gutters leave
       enough room, and hiding them made the scale unreadable */
    .slider-tick { display: block; font-size: 0.66rem; }
    .faq-q { font-size: 0.95rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .bg-scene .blob { animation: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .result-row, .result-podium, .gemeinde-option { opacity: 1 !important; transform: none !important; }
    .skeleton-row::after { animation: none !important; }

    /* The cycling trust badges rely on their animation to be visible at all —
       killing the animation would freeze them on the final (hidden) keyframe.
       Fall back to a static wrapped row instead. */
    .trust-row {
        position: static !important;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        height: auto !important;
        gap: 0.35rem var(--space-md);
    }
    .trust-row span {
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}