/* ============================================================
   Zurich Versicherung – Design System
   Color palette & tonality based on design.zurich.com,
   usability principles based on the Apple HIG.
   ============================================================ */

/* ============================================================
   Central design tokens.
   Make changes to fonts, colors and sizes HERE only.
   Counterpart for PDF generation: Application/Common/BrandTheme.cs
   (keep values in sync there).
   Known exceptions where CSS variables are technically not possible:
   the icon colors in the two SVG data URIs (select chevron
   %2323366f, checkbox checkmark %23fff).
   ============================================================ */
/* Corporate font “Zurich Sans” (Light) – web: WOFF2 (the .woff file contains WOFF2),
   TTF as fallback. For the PDF the same TTF is registered with QuestPDF
   in Program.cs (BrandTheme.FontFamily). */
@font-face {
    font-family: "Zurich Sans";
    src: url("Fonts/ZurichSans-Light.woff") format("woff2"),
         url("Fonts/ZurichSans-Light.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zurich Icons";
    src: url("Fonts/zurich-icons_woff2.f1fa9656.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand colors (Zurich palette) */
    --color-primary: #23366f; /* dark navy blue (zc-blue-dark) */
    --color-primary-hover: #1a2a5a;
    --color-interactive: #2167ae; /* action blue (zc-blue-zurich) */
    --color-interactive-hover: #1b568f;
    --color-accent-light: #bfd9eb;
    --color-success: #1e7d4e;
    --color-error: #cb4b40; /* zurich.at form error red */
    --color-error-tint: rgba(203, 75, 64, .08);
    --color-inverted: #ffffff; /* text/icons on colored surfaces */
    --color-disabled: #a6adaf; /* zg-8 */
    /* Form fields (zurich.at forms--shape) */
    --color-input-bg: #eceeef; /* gray field background */
    --color-input-border: #91bfe3; /* border on hover/focus */
    --color-input-label: #2167ae; /* label/help text blue */
    --color-checkbox-border: #dde4e3;
    --color-focus-outline: #4f5e8c; /* outer keyboard focus ring */
    --color-selected-bg: #f2f8fd; /* background of selected option cards */
    /* Surfaces for hint and confirmation boxes */
    --color-hint-bg: #d2f1f0;
    --color-hint-border: #d2f1f0;
    --color-confirm-bg: #eef7f1;
    --color-confirm-border: #bfe0cd;
    --color-upload-hover-bg: #fafcfe;
    --color-footer-bg: var(--color-interactive); /* zurich.at: bg-zurichblue */
    /* ZDS button tokens (design.zurich.com → Button) */
    --btn-bg-hover: #3776b6; /* zc-blue-zurich-90 */
    --btn-bg-pressed: #23366f; /* zc-blue-dark */
    --btn-bg-disabled: var(--color-disabled);
    --btn-color-disabled: #2b2e31; /* zg-2 */
    --btn-color-hover: #1390cd; /* zc-blue-sky-aa */
    --btn-focus: #1fb1e6; /* zc-blue-sky */
    --btn-shadow-hover: 0 2px 4px -1px rgba(0, 0, 0, .07), 0 4px 5px 0 rgba(0, 0, 0, .05), 0 1px 10px 0 rgba(0, 0, 0, .03); /* zd-2 */
    /* Neutral tones */
    --color-text: #23366f; /* zurich.at: body text in zc-blue-dark */
    --color-text-secondary: #23366f; /* kept as its own token for future differentiation */
    --color-border: #d6dce4;
    --color-surface: #ffffff;
    --color-background: #f5f7fa;
    /* Typography */
    --font-stack: "Zurich Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 16px; /* body text, radio/checkbox labels */
    --font-size-small: 12px; /* floated field labels, validation */
    --font-size-help: 14px; /* help texts below/next to fields */
    --font-size-input: 1.125rem; /* input text and floating label */
    --font-size-footer: 14px; /* zurich.at: .footer-legal */
    --font-size-h1: 2rem;
    --font-size-h1-mobile: 1.55rem;
    --font-size-h2: 1.25rem;
    --font-size-h3: 1.05rem;
    /* Input field dimensions (zurich.at forms--shape) */
    --input-height: 56px;
    --input-pad-top: 18px; /* room for the floated label */
    --input-pad-x: 21px;
    --input-label-indent: 24px; /* indent of label & help texts */
    /* Shape & depth */
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-pill: 28px; /* input fields and buttons */
    --shadow-card: 0 1px 3px rgba(17, 24, 39, .06), 0 4px 16px rgba(17, 24, 39, .05);
    --shadow-card-hover: 0 2px 6px rgba(17, 24, 39, .08), 0 12px 28px rgba(17, 24, 39, .10);
    --focus-ring: 0 0 0 3px rgba(33, 103, 174, .28);
}

/* ── Base ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-stack);
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--color-primary); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: var(--font-size-h1); font-weight: 700; letter-spacing: -.02em; }
/* FocusOnNavigate (Routes.razor) moves focus to the heading for screen readers –
   without a visible focus ring around it. */
h1:focus { outline: none; }
h2 { font-size: var(--font-size-h2); font-weight: 600; }
h3 { font-size: var(--font-size-h3); font-weight: 600; }

a { color: var(--color-interactive); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Page shell ───────────────────────────────────────────── */

.page-shell { min-height: 100dvh; display: flex; flex-direction: column; }

.site-main {
    flex: 1;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

/* Header (zurich.at: .header – white, sticky, logo right via margin-left:auto) */
.site-header {
    background: var(--color-surface);
    position: sticky;
    top: 0;
    z-index: 101;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* Full width instead of a centered container so the logo sits at the far right */
.site-header__inner {
    padding: .9rem 1.5rem;
    display: flex;
    align-items: center;
}

.header-logo {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.header-logo img {
    height: 42px;
    vertical-align: middle;
}

/* Footer (zurich.at: .footer.bg-zurichblue.inverted – reduced to the legal line) */
.site-footer {
    background: var(--color-footer-bg);
    color: var(--color-inverted);
}

/* Container width = form width (.wizard: 760px), content right-aligned –
   so it lines up flush with the right form edge */
.site-footer__inner {
    max-width: calc(760px + 2.5rem);
    margin: 0 auto;
    padding: 32px 1.25rem;  /* zurich.at: .footer-inner { padding: 32px 0 } */
}

.footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem 1.75rem;
    font-size: var(--font-size-footer); /* zurich.at: .footer-legal li a { font-size: 14px } */
}

.footer-legal a { color: var(--color-inverted); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

/* ── Home page ─────────────────────────────────────────────── */

.hero { margin-bottom: 2rem; max-width: 560px; }
.hero__sub { color: var(--color-text-secondary); font-size: 1.05rem; margin: 0; }

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.5rem 1.4rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

a.tile:hover {
    text-decoration: none;
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    border-color: var(--color-interactive);
}

.tile__icon { color: var(--color-interactive); margin-bottom: .35rem; }
.tile__title { font-size: 1.1rem; font-weight: 600; color: var(--color-primary); }
.tile__text { font-size: .9rem; color: var(--color-text-secondary); }
.tile__cta { margin-top: .6rem; font-size: .92rem; font-weight: 600; color: var(--color-interactive); }

.tile--disabled { opacity: .65; }
.tile--disabled .tile__icon { color: var(--color-text-secondary); }

.tile__badge {
    margin-top: .6rem;
    align-self: flex-start;
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-accent-light);
    padding: .15rem .6rem;
    border-radius: 999px;
}

/* ── Wizard ────────────────────────────────────────────────── */

.wizard { max-width: 760px; margin: 0 auto; }
.wizard__head { margin-bottom: 1.75rem; }
.wizard__intro { color: var(--color-text-secondary); margin: 0; }

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: .9rem;
    color: var(--color-text-secondary);
}
.back-link:hover { color: var(--color-interactive); }

.wizard__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.75rem;
    gap: 1rem;
}

/* Progress indicator */
.stepper {
    display: flex;
    align-items: flex-start;
    margin: 0 0 2.25rem;
}

.stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-width: 92px;
    text-align: center;
}

.stepper__circle {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 600;
    font-size: .95rem;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    color: var(--color-text-secondary);
    transition: all .25s ease;
}

.stepper__label { font-size: .8rem; color: var(--color-text-secondary); }

.stepper__step--active .stepper__circle {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-inverted);
}
.stepper__step--active .stepper__label { color: var(--color-primary); font-weight: 600; }

.stepper__step--done .stepper__circle {
    background: var(--color-interactive);
    border-color: var(--color-interactive);
    color: var(--color-inverted);
}

.stepper__line {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    margin-top: 17px;
    transition: background .25s ease;
}
.stepper__line--done { background: var(--color-interactive); }

.wizard__required-note {
    font-size: .9rem;
    color: var(--color-text-secondary);
    margin: 0 0 1rem;
}

.wizard__note-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.wizard__note-row .wizard__required-note { margin-bottom: .5rem; }
.wizard__note-row .btn-link { flex-shrink: 0; padding: 0; }

/* Intro (checklist before the form) */
.intro-card__grid {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.intro-card__icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-primary);
}

.intro-card__text { margin: .75rem 0 0; color: var(--color-text-secondary); font-size: .95rem; }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.check-list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .95rem;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 700;
}

/* ── Cards ─────────────────────────────────────────────────── */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}

.card__title { margin-bottom: 1.25rem; }
.card__sub { margin: -.75rem 0 1.25rem; color: var(--color-text-secondary); font-size: .92rem; }

.card__title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.card__title-row .card__title { margin-bottom: 1rem; }

/* ── Form fields ─────────────────────────────────────────── */

.field-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem 1rem;
}

.field { grid-column: span 3; display: flex; flex-direction: column; gap: .35rem; }
.field--small { grid-column: span 2; }
.field--wide { grid-column: span 4; }
.field--full { grid-column: 1 / -1; }

.field label, .field__label { font-size: .9rem; font-weight: 600; color: var(--color-text); }
.field__hint { font-size: var(--font-size-help); color: var(--color-input-label); text-align: right; margin-top: 4px; padding: 0 var(--input-label-indent); }

/* Help text below or above a field (zurich.at: .textfield-helper) */
.field__help { font-size: var(--font-size-help); color: var(--color-input-label); margin-top: 4px; padding: 0 var(--input-label-indent); }
.field__help--block { display: block; margin: -.15rem 0 .2rem; font-weight: 400; }

/* Date field + "Datum unbekannt" checkbox side-by-side in one grid cell */
.field-row { display: flex; flex-direction: row; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.field-row__date { flex: 1 1 auto; min-width: 0; }
.field-row__checkbox { flex: 0 0 auto; align-self: center; white-space: nowrap; }

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

/* ── Input fields in Zurich style (zurich.at/folder-anfordern) ──
   "Shape" variant of the Zurich Design System (.forms--shape .textfield):
   pill field with gray background (#eceeef) and 28px radius. The label
   initially sits in the field as a placeholder (top 20px) and shrinks on
   focus or content (.is-not-empty) to 12px towards the top left (top 9px). */

.textfield { position: relative; display: flex; flex-direction: column; gap: 0; }

.textfield .textfield-label {
    position: absolute;
    left: 0;
    top: 8px;
    padding-left: var(--input-label-indent);
    color: var(--color-input-label);
    font-size: var(--font-size-small);
    font-weight: 600;
    height: 16px;
    line-height: 16px;
    margin: 0;
    transition: all .25s;
    z-index: 1;
}

.textfield-control {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-input-bg);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    box-sizing: border-box;
    color: var(--color-primary);
    display: block;
    font: inherit;
    font-size: var(--font-size-input);
    width: 100%;
    height: var(--input-height);
    padding: var(--input-pad-top) var(--input-pad-x) 0;
    margin: 0;
    transition: border-color .25s, box-shadow .25s;
}

.textfield-control:hover,
.textfield-control:focus {
    outline: none;
    border-color: var(--color-input-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.textfield-control::placeholder { color: var(--color-input-label); }

.textfield-control:disabled { opacity: .5; }
.textfield-control:disabled ~ .textfield-label { opacity: .5; }
.textfield-control:disabled:hover { border-color: transparent; box-shadow: none; cursor: not-allowed; }

/* Number fields without spin buttons (as in the original) */
.textfield-control::-webkit-inner-spin-button,
.textfield-control::-webkit-outer-spin-button { display: none; }
input[type="number"].textfield-control { -moz-appearance: textfield; }

/* Floating label (taller line in placeholder state so descenders
   like the “g” in “gestritten” are not cut off) */
.textfield--float-label .textfield-label {
    font-size: var(--font-size-input);
    font-weight: 400;
    pointer-events: none;
    top: 16px;
    right: 0;
    height: 24px;
    line-height: 24px;
    padding-right: var(--input-pad-x);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.textfield--float-label .textfield-control:focus ~ .textfield-label,
.textfield--float-label .textfield-control.is-not-empty ~ .textfield-label {
    font-size: var(--font-size-small);
    font-weight: 600;
    top: 9px;
    height: 16px;
    line-height: 16px;
}

/* Show the placeholder only once the label has floated up */
.textfield--float-label .textfield-control::placeholder { opacity: 0; transition: opacity .25s; }
.textfield--float-label .textfield-control:focus::placeholder { opacity: 1; }

/* Select with chevron in dark blue */
select.textfield-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2323366f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 52px;
}

/* Textarea (zurich.at: .forms--shape .textfield-textarea) */
.textfield-textarea .textfield-control {
    height: auto;
    min-height: 140px;
    line-height: 1.3;
    padding: var(--input-label-indent) var(--input-pad-x) 15px;
    overflow: hidden;
    resize: none;
}

/* Date fields: color the browser mask (DD.MM.YYYY) only on focus/content
   so the floating label stays visible as a placeholder (as in the original) */
.textfield--date .textfield-control { color: transparent; }
.textfield--date .textfield-control:focus,
.textfield--date .textfield-control.is-not-empty { color: var(--color-primary); }

/* Vertically center the calendar icon in the field: the content sits low
   because of the floating label (18px padding-top). The date input centers
   its margin box internally, so only double the value (−18px) lifts the icon
   by the required 9px. */
.textfield--date .textfield-control::-webkit-calendar-picker-indicator {
    margin-top: -18px;
    color: var(--color-primary);
    cursor: pointer;
}

/* Field with suffix (e.g. euro) */
.textfield--suffix .textfield-control { padding-right: 44px; }

.textfield-suffix {
    position: absolute;
    right: var(--input-pad-x);
    top: calc(var(--input-height) / 2);  /* half the field height … */
    transform: translateY(-50%);   /* … minus half its own height = vertically centered */
    color: var(--color-primary);
    font-size: var(--font-size-input);
    line-height: 1;
    pointer-events: none;
}

/* Helper row below the field: hint left, character counter right */
.textfield-helper {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--font-size-help);
    color: var(--color-input-label);
    margin-top: 4px;
    padding: 0 var(--input-label-indent);
}
.textfield-helper-counter { flex-shrink: 0; }

/* Error state (Blazor sets .invalid on the control) */
.textfield-control.invalid {
    border-color: var(--color-error);
    color: var(--color-error);
}
.textfield-control.invalid ~ .textfield-label { color: var(--color-error); }
.textfield-control.invalid::placeholder { color: var(--color-error); }

.validation-message { font-size: var(--font-size-small); font-weight: 600; color: var(--color-error); margin-top: 4px; padding: 0 var(--input-label-indent); }

/* ── Choice options (radio / checkbox) in Zurich style ─────────
   zurich.at/folder-anfordern (.forms--shape .checkbox / .radio):
   24×24 box (checkbox 6px radius, radio round) with gray base #eceeef
   and border (--color-checkbox-border); when checked it fills dark blue (--color-primary) with a white
   checkmark or dot animated from scale(0) to scale(1). The native
   input stays invisible on top of the box (focus/click). */

.choice {
    position: relative;
    display: block;
    padding: .55rem .25rem .55rem 34px;
    color: var(--color-primary);
    cursor: pointer;
}

.field .choice, .choice { font-size: var(--font-size-base); font-weight: 400; line-height: 1.3; }

.choice input[type="radio"],
.choice input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: .5rem;
    width: 24px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* Box or circle */
.choice > span::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5rem;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-checkbox-border);
    box-shadow: inset 0 0 0 1px var(--color-checkbox-border);
    transition: all .25s;
}

.choice input[type="radio"] + span::before { border-radius: 50%; }

.choice:hover input:not(:disabled) + span::before {
    border-color: var(--color-input-border);
    box-shadow: inset 0 0 0 1px var(--color-input-border);
}

.choice input:checked + span::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.choice input:focus-visible + span::before {
    box-shadow: 0 0 0 2px var(--color-inverted), 0 0 0 4px var(--color-focus-outline);
}

/* Checkmark or dot */
.choice > span::after {
    content: "";
    position: absolute;
    transform: scale(0);
    transition: all .25s;
}

.choice input[type="checkbox"] + span::after {
    left: 4px;
    top: calc(.5rem + 4px);
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6 12l7.5-8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.choice input[type="radio"] + span::after {
    left: 7px;
    top: calc(.5rem + 7px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-inverted);
}

.choice input:checked + span::after { transform: scale(1); }

.choice input:disabled + span { opacity: .5; cursor: not-allowed; }

.choice-row { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.choice-row--stacked { flex-direction: column; align-items: flex-start; gap: .1rem; }

/* Conditional follow-up questions (e.g. after choosing the legal area) */
.conditional-block {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--color-background);
    border-radius: var(--radius-m);
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* Repeatable person block ("Beteiligte Personen") */
.person-block {
    margin-top: 1.25rem;
    padding: 1.25rem 1.25rem 1rem;
    background: var(--color-background);
    border-radius: var(--radius-m);
}
.person-block + .person-block { margin-top: 1rem; }

.person-block__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem 1rem;
    margin-top: 1rem;
}

/* Option cards (legal area) */
.area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
    margin-top: .35rem;
}

.area-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.1rem .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    text-align: center;
    cursor: pointer;
    transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.area-card:hover {
    border-color: var(--color-interactive);
    box-shadow: var(--shadow-card);
}

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

.area-card__icon {
    color: var(--color-interactive);
    font-family: "Zurich Icons";
}
.area-card__label { font-size: .88rem; font-weight: 600; color: var(--color-text); line-height: 1.3; }

.area-card:has(input:checked) {
    border-color: var(--color-interactive);
    background: var(--color-selected-bg);
    box-shadow: inset 0 0 0 1px var(--color-interactive);
}

.icon {
    height: 24px;
    width: 22px;
    font-size: 24px;
    line-height: 1;
}

.icon:before {
    font-family: "Zurich Icons";
}

.icon--suitecase_24_solid:before {
    content: "\eb00";
}
.icon--home_24_solid:before {
    content: "\ea10";
}
.icon--car_24_solid:before {
    content: "\e957";
}
.icon--lightning_24_solid:before {
    content: "\ea30";
}
.icon--family_24_solid:before {
    content: "\e9b4";
}
.icon--heart-cardio_24_solid:before {
    content: "\ea04";
}
.icon--book-close_24_solid:before {
    content: "\e933";
}
.icon--currency-euro_24_solid:before {
    content: "\e988";
}
.icon--shield-plus_24_solid:before {
    content: "\ead0";
}
.icon--more-horizontal_24_solid:before {
    content: "\ea6c";
}

/* Outline variants – used by the claim type tiles on the home page. */
.icon--shield-check_24_outline:before {
    content: "\eacb";
}
.icon--car_24_outline:before {
    content: "\e956";
}
.icon--building_24_outline:before {
    content: "\e93e";
}
.icon--handshake_24_outline:before {
    content: "\e9f7";
}
.icon--first-aid_24_outline:before {
    content: "\e9d3";
}
.icon--bike_24_outline:before {
    content: "\e92e";
}
.icon--laptop_24_outline:before {
    content: "\ea21";
}
.icon--camera_24_outline:before {
    content: "\e952";
}
.icon--more-horizontal_24_outline:before {
    content: "\ea6b";
}

.area-card:has(input:checked) .area-card__label {
    color: var(--color-primary);
}

.area-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Option cards (handling preference) */
.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .75rem;
    margin-top: .35rem;
}

.option-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1.1rem 1.2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.option-card:hover {
    border-color: var(--color-interactive);
    box-shadow: var(--shadow-card);
}

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

.option-card__title { font-size: .95rem; font-weight: 600; color: var(--color-primary); line-height: 1.35; }
.option-card__text { font-size: .85rem; color: var(--color-text-secondary); }

.option-card:has(input:checked) {
    border-color: var(--color-interactive);
    background: var(--color-selected-bg);
    box-shadow: inset 0 0 0 1px var(--color-interactive);
}

.option-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* File upload */
.upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-m);
    color: var(--color-text-secondary);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.upload:hover { border-color: var(--color-interactive); background: var(--color-upload-hover-bg); }

.upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: .35rem;
}

.upload__hint { font-size: .8rem; }

.upload__label--mobile { display: none; }

@media (max-width: 767px) {
    .upload__label--desktop { display: none; }
    .upload__label--mobile { display: inline; }
}

.file-list { list-style: none; margin: 1rem 0 0; padding: 0; }

.file-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .55rem .9rem;
    background: var(--color-background);
    border-radius: var(--radius-s);
    font-size: .9rem;
    margin-bottom: .4rem;
}

.file-list__thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-s);
    background: var(--color-surface);
}

.file-list__thumb--image {
    display: block;
    object-fit: cover;
}

.file-list__thumb--badge {
    display: grid;
    place-items: center;
    border-color: transparent;
    background: var(--color-accent-light);
    color: var(--color-primary);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.file-list__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.file-list__remove {
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: .9rem;
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: 6px;
}
.file-list__remove:hover { color: var(--color-error); background: var(--color-error-tint); }

/* ── Buttons (specification: design.zurich.com → Button) ──── */

.btn {
    font: 400 1.125rem/1.5rem var(--font-stack);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    height: 3rem;
    min-width: 3rem;
    padding: calc(.75rem - 2px) calc(1.5rem - 2px);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

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

.btn--primary { background: var(--color-interactive); color: var(--color-inverted); }

.btn--primary:hover:not(:disabled):not(:active) {
    background: var(--btn-bg-hover);
    box-shadow: var(--btn-shadow-hover);
}

.btn--primary:active { background: var(--btn-bg-pressed); }

.btn--primary:disabled {
    background: var(--btn-bg-disabled);
    color: var(--btn-color-disabled);
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ZDS "Secondary": transparent, 2px border in text color */
.btn--ghost {
    background: transparent;
    color: var(--color-interactive);
    border-color: currentColor;
}

.btn--ghost:hover:not(:disabled):not(:active) {
    color: var(--btn-color-hover);
    box-shadow: var(--btn-shadow-hover);
}

.btn--ghost:active { color: var(--btn-bg-pressed); }

.btn--send { padding-inline: calc(2.2rem - 2px); }

/* ZDS "Link" button: no border, background or shadow */
.btn-link {
    border: none;
    background: none;
    color: var(--color-interactive);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    padding: .5rem 0;
    transition: color .2s;
}
.btn-link:hover { color: var(--btn-color-hover); text-decoration: none; }
.btn-link:active { color: var(--btn-bg-pressed); }
.btn-link:focus-visible { outline: 2px solid var(--btn-focus); outline-offset: 2px; }

/* ── Step 2: Next steps ────────────────────────────── */

.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }

.next-steps li { display: flex; gap: 1rem; }
.next-steps h3 { margin-bottom: .2rem; }
.next-steps p { margin: 0; color: var(--color-text-secondary); font-size: .95rem; }

.next-steps__badge {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-primary);
    font-weight: 700;
}

.hint-box {
    background: var(--color-hint-bg);
    border: 1px solid var(--color-hint-border);
    border-radius: var(--radius-m);
    padding: 1rem 1.25rem;
    font-size: .92rem;
    margin-bottom: 1.25rem;
}

/* ── Step 3: Summary ─────────────────────────────── */

.summary {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: .55rem 1.5rem;
    margin: 0;
}

.summary dt { color: var(--color-text-secondary); font-size: .9rem; }
.summary dd { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.summary__text { white-space: pre-line; }

/* ── Step 3: In-house consultation booking ──────────────── */

.card__text { margin: 0 0 1.25rem; color: var(--color-text-secondary); }

/* Embedded Microsoft Bookings tool (Portal:InhouseBookingUrl) */
.booking-embed {
    display: block;
    width: 100%;
    height: 900px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background: var(--color-surface);
}

/* Link replacing the embedded booking tool on small screens (see media query) */
.booking-link { display: none; }

/* ── Blazor error bar ────────────────────────────────────── */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ── Responsiv ─────────────────────────────────────────────── */

@media (max-width: 640px) {
    h1 { font-size: var(--font-size-h1-mobile); }

    .site-main { padding: 1.5rem 1rem 3rem; }

    .field, .field--small, .field--wide { grid-column: 1 / -1; }

    /* Field attached to the previous one (e.g. the "Unbekannt" checkbox next to the
       problem date): its empty label only aligns it in the desktop grid – in the
       single-column layout it is hidden and the field moves up to its companion. */
    .field--attached .field__label { display: none; }
    .field--attached { margin-top: -.5rem; }

    .stepper__step { min-width: 64px; }
    .stepper__label { font-size: .72rem; }

    .summary { grid-template-columns: 1fr; gap: .1rem; }
    .summary dt { margin-top: .6rem; }

    .card { padding: 1.25rem; }

    .wizard__actions { flex-direction: column-reverse; align-items: stretch; }
    .wizard__actions .btn { width: 100%; }

    /* Step 3: the embedded booking tool is unusable on small screens –
       show a link to the booking page instead. */
    .booking-embed, .booking-embed-fallback { display: none; }
    .booking-link { display: inline-flex; width: 100%; }

    /* Long floating labels (.textfield--label-2l): while the label sits in the
       field as a placeholder it may wrap to two lines and the empty field grows
       with it. Once floated (focus/content) the field returns to normal height. */
    .textfield--label-2l .textfield-label { white-space: normal; overflow: visible; height: auto; line-height: 1.3; }
    .textfield--label-2l .textfield-control { transition: border-color .25s, box-shadow .25s, height .25s; }
    .textfield--label-2l .textfield-control:not(:focus):not(.is-not-empty) {
        height: calc(var(--input-height) + 22px);
    }
}