/* ===========================================================================
   SecuSuisse Nachbestellportal - Design System
   ===========================================================================
   UX-001: Eigenstaendiges Interface. Interaktionsmuster wie Auswahlkarten und
   Fortschrittsanzeige sind bewaehrte Muster; Layout, Farbwelt und Typografie
   sind eigenstaendig gestaltet und kopieren keine Referenzloesung.

   UX-009 / UX-011: Die Farb-, Abstands- und Typografiewerte stehen als Design
   Tokens ganz oben. Sobald die finalen SecuSuisse-Tokens vorliegen, werden sie
   hier ersetzt - ohne Eingriff in Komponenten oder Templates.

   UX-004: Mobile First. Alle Komponenten sind fuer schmale Viewports gebaut;
   Media Queries erweitern nach oben.

   NFR-A11Y: Fokusringe sind sichtbar und werden nie entfernt. Zustaende werden
   nie allein ueber Farbe transportiert. Touchziele sind mindestens 44 px hoch.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Design Tokens
   --------------------------------------------------------------------------- */
:root {
    /* Markenfarben -------------------------------------------------------- */
    --c-primary: #12395c;
    --c-primary-hover: #0d2a45;
    --c-primary-soft: #e8eff5;
    --c-primary-contrast: #ffffff;

    --c-accent: #c8102e;
    --c-accent-soft: #fdecef;

    /* Statusfarben -------------------------------------------------------- */
    --c-success: #14703c;
    --c-success-soft: #e7f4ec;
    --c-warning: #8a5300;
    --c-warning-soft: #fdf3e2;
    --c-danger: #a8202f;
    --c-danger-soft: #fdecee;
    --c-info: #12395c;
    --c-info-soft: #e8eff5;

    /* Flaechen und Text --------------------------------------------------- */
    --c-bg: #f6f7f9;
    --c-surface: #ffffff;
    --c-surface-alt: #eef1f4;
    --c-text: #16202a;
    --c-text-muted: #566270;
    --c-text-inverse: #ffffff;
    --c-border: #d7dce2;
    --c-border-strong: #aab4bf;
    --c-focus: #1b6fba;

    /* Typografie ---------------------------------------------------------- */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.875rem;
    --fs-3xl: 2.25rem;
    --lh-tight: 1.25;
    --lh-base: 1.6;

    /* Abstaende ----------------------------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.5rem;
    --sp-8: 3.5rem;

    /* Form ---------------------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(22, 32, 42, 0.06), 0 1px 3px rgba(22, 32, 42, 0.05);
    --shadow-md: 0 2px 6px rgba(22, 32, 42, 0.07), 0 8px 24px rgba(22, 32, 42, 0.06);
    --shadow-focus: 0 0 0 3px rgba(27, 111, 186, 0.35);

    --container: 68rem;
    --container-narrow: 46rem;

    /* Mindestgroesse fuer Touchziele (UX-004) */
    --touch: 44px;
}

/* Der Bestellflow wird oft im hellen Aussenlicht auf dem Handy bedient.
   Ein dunkler Modus wird respektiert, aber mit hohem Kontrast gehalten. */
@media (prefers-color-scheme: dark) {
    :root {
        --c-bg: #12171d;
        --c-surface: #1a2129;
        --c-surface-alt: #222b35;
        --c-text: #eef2f6;
        --c-text-muted: #a7b2bd;
        --c-border: #333e4a;
        --c-border-strong: #4b5764;
        --c-primary: #7db4e0;
        --c-primary-hover: #9cc8ec;
        --c-primary-soft: #1d2f3f;
        --c-primary-contrast: #0d1720;
        --c-accent: #ff8a9b;
        --c-accent-soft: #352025;
        --c-success: #6cc48e;
        --c-success-soft: #1b2f24;
        --c-warning: #e0b063;
        --c-warning-soft: #302718;
        --c-danger: #f08d97;
        --c-danger-soft: #331e21;
        --c-info-soft: #1d2f3f;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    }
}

/* ---------------------------------------------------------------------------
   2. Reset und Grundlagen
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--sp-3);
    line-height: var(--lh-tight);
    font-weight: 650;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 var(--sp-3);
}

ul, ol {
    margin: 0 0 var(--sp-3);
    padding-left: 1.25rem;
}

a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--c-primary-hover);
}

img, svg {
    max-width: 100%;
}

/* NFR-A11Y-003: Der Tastaturfokus muss immer erkennbar sein. */
:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.is-hidden {
    display: none !important;
}

/* SEC-010: Honeypot - unsichtbar, aber nicht display:none, damit einfache
   Bots das Feld finden und ausfuellen. */
.honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-primary);
    color: var(--c-primary-contrast);
    border-radius: 0 0 var(--radius-md) 0;
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
    top: 0;
}

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

@media (min-width: 48rem) {
    .container {
        padding: 0 var(--sp-5);
    }
}

/* ---------------------------------------------------------------------------
   3. Kopf- und Fusszeile
   --------------------------------------------------------------------------- */
.site-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    color: var(--c-text);
    padding: var(--sp-2) 0;
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--c-primary);
    color: var(--c-primary-contrast);
    flex-shrink: 0;
}

.brand__text {
    display: flex;
    flex-direction: column;
}

.brand__name {
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: -0.015em;
}

.brand__claim {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    display: none;
}

@media (min-width: 40rem) {
    .brand__claim {
        display: block;
    }
}

.site-header__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: none;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-pill);
    min-height: var(--touch);
}

.site-header__phone:hover {
    background: var(--c-primary-soft);
}

.site-header__phone span {
    display: none;
}

@media (min-width: 30rem) {
    .site-header__phone span {
        display: inline;
    }
}

.site-main {
    flex: 1;
    padding: var(--sp-5) 0 var(--sp-8);
}

.site-footer {
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    padding: var(--sp-5) 0;
    font-size: var(--fs-sm);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
}

.site-footer__nav a {
    color: var(--c-text-muted);
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
}

.site-footer__copyright {
    margin: 0;
    color: var(--c-text-muted);
}

@media (min-width: 48rem) {
    .site-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* ---------------------------------------------------------------------------
   4. Fortschritt (UX-006)
   --------------------------------------------------------------------------- */
.progress {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-3) 0;
    position: sticky;
    top: 0;
    z-index: 20;
}

.progress__bar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.progress__track {
    height: 6px;
    background: var(--c-surface-alt);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress__fill {
    height: 100%;
    background: var(--c-primary);
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}

.progress__count {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text-muted);
}

.progress__count-label {
    color: var(--c-text);
}

/* Mobil genuegt der Balken; die Schrittliste erscheint erst, wenn Platz da ist. */
.progress__steps {
    display: none;
}

@media (min-width: 56rem) {
    .progress__bar {
        display: none;
    }

    .progress__steps {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: var(--sp-1);
    }

    .progress__step {
        flex: 1;
        min-width: 0;
    }

    .progress__link {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-2);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--c-text-muted);
        font-size: var(--fs-sm);
        min-height: var(--touch);
    }

    a.progress__link:hover {
        background: var(--c-surface-alt);
        color: var(--c-text);
    }

    .progress__marker {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        border-radius: 50%;
        border: 2px solid var(--c-border-strong);
        font-size: var(--fs-xs);
        font-weight: 700;
    }

    .progress__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .progress__step.is-current .progress__link {
        color: var(--c-text);
        font-weight: 650;
    }

    .progress__step.is-current .progress__marker {
        border-color: var(--c-primary);
        background: var(--c-primary);
        color: var(--c-primary-contrast);
    }

    .progress__step.is-completed .progress__marker {
        border-color: var(--c-success);
        background: var(--c-success);
        color: #fff;
    }

    .progress__step.is-completed .progress__link {
        color: var(--c-text);
    }
}

/* ---------------------------------------------------------------------------
   5. Startseite
   --------------------------------------------------------------------------- */
.hero {
    display: grid;
    gap: var(--sp-5);
    align-items: center;
    margin-bottom: var(--sp-7);
}

@media (min-width: 56rem) {
    .hero {
        grid-template-columns: 1.15fr 0.85fr;
        gap: var(--sp-7);
    }
}

.hero__title {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-3);
}

@media (min-width: 48rem) {
    .hero__title {
        font-size: var(--fs-3xl);
    }
}

.hero__lead {
    font-size: var(--fs-md);
    color: var(--c-text-muted);
    max-width: 34rem;
}

.hero__action {
    margin-top: var(--sp-5);
}

.hero__resume {
    margin: var(--sp-4) 0;
}

.hero__visual {
    display: none;
}

@media (min-width: 56rem) {
    .hero__visual {
        display: block;
    }
}

.hero__illustration {
    width: 100%;
    height: auto;
}

.usp__list {
    display: grid;
    gap: var(--sp-4);
    list-style: none;
    margin: 0 0 var(--sp-7);
    padding: 0;
}

@media (min-width: 48rem) {
    .usp__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.usp__item {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}

.usp__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    margin-bottom: var(--sp-3);
}

.usp__title {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-2);
}

.usp__text {
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.section-title {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-4);
}

.steps-preview {
    margin-bottom: var(--sp-7);
}

.steps-preview__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
    counter-reset: step;
}

.steps-preview__list li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
}

.steps-preview__number {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-primary-contrast);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.callout {
    background: var(--c-primary-soft);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}

.callout__title {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-2);
}

.callout__text {
    margin: 0;
    color: var(--c-text);
}

/* ---------------------------------------------------------------------------
   6. Wizard-Schritte
   --------------------------------------------------------------------------- */
.step {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.step--summary {
    max-width: 52rem;
}

.step__header {
    margin-bottom: var(--sp-5);
}

.step__context {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.step__context-link {
    font-size: var(--fs-xs);
}

.step__title {
    font-size: var(--fs-xl);
}

@media (min-width: 48rem) {
    .step__title {
        font-size: var(--fs-2xl);
    }
}

.step__lead {
    color: var(--c-text-muted);
    font-size: var(--fs-md);
    margin: 0;
}

.step__form {
    margin-bottom: var(--sp-5);
}

.step__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border);
}

.step__actions .button--primary {
    margin-left: auto;
}

.step__actions--submit {
    border-top: none;
}

.step__support {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-top: var(--sp-4);
}

.step__warning {
    font-size: var(--fs-sm);
    color: var(--c-warning);
    background: var(--c-warning-soft);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    margin-top: var(--sp-4);
}

.form-section {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.form-section__title {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-2);
}

.form-section__lead {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
}

/* ---------------------------------------------------------------------------
   7. Buttons
   --------------------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--touch);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button--primary {
    background: var(--c-primary);
    color: var(--c-primary-contrast);
}

.button--primary:hover {
    background: var(--c-primary-hover);
    color: var(--c-primary-contrast);
}

.button--secondary {
    background: var(--c-surface);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.button--secondary:hover {
    background: var(--c-primary-soft);
}

.button--ghost {
    background: transparent;
    color: var(--c-text-muted);
    border-color: var(--c-border);
}

.button--ghost:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

.button--danger {
    color: var(--c-danger);
    border-color: var(--c-border);
}

.button--danger:hover {
    background: var(--c-danger-soft);
    border-color: var(--c-danger);
}

.button--large {
    font-size: var(--fs-md);
    padding: var(--sp-4) var(--sp-6);
}

.button--compact {
    min-height: 38px;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
}

.button--block {
    width: 100%;
}

.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   8. Formularfelder
   --------------------------------------------------------------------------- */
.fields {
    display: grid;
    gap: var(--sp-5);
}

.field {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
}

/* Innerhalb einer form-section brauchen die Felder keinen eigenen Rahmen. */
.form-section .field,
.grid .field {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.field__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.field__label {
    display: block;
    font-weight: 600;
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-1);
}

.field__required {
    color: var(--c-accent);
    margin-left: 2px;
}

.field__optional {
    font-weight: 400;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-left: var(--sp-2);
}

.field__hint {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: 0 0 var(--sp-2);
}

.field__hint--muted {
    font-size: var(--fs-xs);
}

.field__hint--accent {
    color: var(--c-warning);
    background: var(--c-warning-soft);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    margin-top: var(--sp-2);
}

/* NFR-A11Y-004: Fehler haben Symbol, Text und Position - nicht nur Farbe. */
.field__error {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-danger);
    margin: var(--sp-2) 0 0;
}

.field--invalid .input,
.field--invalid .input--select {
    border-color: var(--c-danger);
    background: var(--c-danger-soft);
}

.field__help {
    font-size: var(--fs-sm);
}

.field__help-toggle,
.help-panel__toggle,
.collapsible__toggle {
    cursor: pointer;
    color: var(--c-primary);
    font-weight: 600;
    font-size: var(--fs-sm);
    padding: var(--sp-2) 0;
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
    list-style: none;
}

.field__help-toggle::-webkit-details-marker,
.help-panel__toggle::-webkit-details-marker,
.collapsible__toggle::-webkit-details-marker {
    display: none;
}

.field__help-toggle::before,
.help-panel__toggle::before,
.collapsible__toggle::before {
    content: "";
    width: 0;
    height: 0;
    margin-right: var(--sp-2);
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}

details[open] > .field__help-toggle::before,
details[open] > .help-panel__toggle::before,
details[open] > .collapsible__toggle::before {
    transform: rotate(90deg);
}

.field__help-body,
.help-panel__body,
.collapsible__body {
    padding: var(--sp-3);
    background: var(--c-surface-alt);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.field__help-body p:last-child,
.help-panel__body p:last-child {
    margin-bottom: 0;
}

.help-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 0 var(--sp-4) var(--sp-2);
    margin-bottom: var(--sp-4);
}

.collapsible {
    margin-top: var(--sp-4);
}

.collapsible__body {
    margin-top: var(--sp-2);
    background: transparent;
    padding: 0;
}

.input {
    display: block;
    width: 100%;
    min-height: var(--touch);
    padding: var(--sp-3);
    font: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:focus {
    border-color: var(--c-focus);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.input:disabled {
    background: var(--c-surface-alt);
    color: var(--c-text-muted);
    cursor: not-allowed;
}

.input--select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23566270' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    background-size: 12px;
    padding-right: var(--sp-6);
}

.input--number {
    max-width: 9rem;
}

.input--textarea {
    min-height: 7rem;
    resize: vertical;
}

.grid {
    display: grid;
    gap: var(--sp-4);
}

@media (min-width: 40rem) {
    .grid--two {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--three {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Strasse und Hausnummer bzw. PLZ und Ort gehoeren visuell zusammen. */
    .grid--address {
        grid-template-columns: 3fr 1fr;
    }

    .grid--address .field--wide {
        grid-column: span 1;
    }

    .grid--address .field--narrow {
        grid-column: span 1;
    }
}

/* ---------------------------------------------------------------------------
   9. Auswahlkarten (UX-003)
   --------------------------------------------------------------------------- */
.choice-grid,
.choice-cards {
    display: grid;
    gap: var(--sp-3);
    border: none;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.choice-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.choice-tile,
.choice-card {
    position: relative;
}

.choice-tile__input,
.choice-card__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.choice-tile__label,
.choice-card__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    height: 100%;
    min-height: 6rem;
    padding: var(--sp-4);
    text-align: center;
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.choice-tile__label:hover,
.choice-card__label:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-sm);
}

/* Der Fokusring sitzt auf dem Label, weil der echte Radio-Button visuell
   ausgeblendet ist - Tastaturbedienung bleibt so nachvollziehbar. */
.choice-tile__input:focus-visible + .choice-tile__label,
.choice-card__input:focus-visible + .choice-card__label {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
}

.choice-tile__input:checked + .choice-tile__label,
.choice-card__input:checked + .choice-card__label {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}

/* NFR-A11Y-004: Die Auswahl ist zusaetzlich durch ein Haekchen markiert. */
.choice-tile__input:checked + .choice-tile__label::after,
.choice-card__input:checked + .choice-card__label::after {
    content: "";
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.choice-tile--rich .choice-tile__label {
    align-items: flex-start;
    text-align: left;
}

.choice-tile--flagged .choice-tile__label {
    border-style: dashed;
}

.choice-tile__media,
.choice-card__media {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 3.5rem;
}

.choice-tile__media img,
.choice-card__media img {
    max-height: 4.5rem;
    width: auto;
    object-fit: contain;
}

.choice-tile__name,
.choice-card__title {
    font-weight: 650;
    font-size: var(--fs-sm);
}

.choice-tile__description,
.choice-card__description {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-weight: 400;
    margin-top: var(--sp-1);
}

.choice-tile__body,
.choice-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.choice-card__price {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-top: var(--sp-2);
}

.price-badge {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--c-text-muted);
}

/* FR-004: "Ich weiss es nicht" - gleichwertig, aber abgesetzt. */
.unknown-option {
    position: relative;
    margin-top: var(--sp-4);
}

.unknown-option__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.unknown-option__label {
    display: block;
    padding: var(--sp-4);
    background: var(--c-surface);
    border: 2px dashed var(--c-border-strong);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.unknown-option__input:focus-visible + .unknown-option__label {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
}

.unknown-option__input:checked + .unknown-option__label {
    border-style: solid;
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}

.unknown-option__title {
    display: block;
    font-weight: 650;
    margin-bottom: var(--sp-1);
}

.unknown-option__text {
    display: block;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* FR-020: "Weiss ich nicht" als Ankreuzfeld bei Freitext und Karten. */
.unknown-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface-alt);
    border-radius: var(--radius-md);
    min-height: var(--touch);
}

.unknown-toggle__input {
    width: 20px;
    height: 20px;
    accent-color: var(--c-primary);
    flex-shrink: 0;
}

.unknown-toggle__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.radio-group {
    border: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--c-surface-alt);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    min-height: var(--touch);
}

.radio-option__input {
    width: 20px;
    height: 20px;
    accent-color: var(--c-primary);
    flex-shrink: 0;
}

.radio-option__input:checked ~ .radio-option__label {
    font-weight: 650;
}

.radio-option:has(.radio-option__input:checked) {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}

.radio-option__label {
    cursor: pointer;
    flex: 1;
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    min-height: var(--touch);
}

.checkbox-field--prominent {
    background: var(--c-surface-alt);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
}

.checkbox-field.has-error {
    border: 1.5px solid var(--c-danger);
    background: var(--c-danger-soft);
}

.checkbox-field__input {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--c-primary);
    flex-shrink: 0;
}

.checkbox-field__label {
    cursor: pointer;
    font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------------
   10. Meldungen, Hinweise und Marker
   --------------------------------------------------------------------------- */
.notice {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    margin-bottom: var(--sp-4);
}

.notice__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
}

.notice__text {
    margin: 0;
    font-size: var(--fs-sm);
}

.notice__text p {
    margin: 0 0 var(--sp-2);
}

.notice__text p:last-child {
    margin-bottom: 0;
}

.notice__list {
    margin: var(--sp-2) 0 0;
    padding-left: 1.1rem;
}

.notice--success {
    background: var(--c-success-soft);
    border-color: var(--c-success);
    color: var(--c-success);
}

.notice--error {
    background: var(--c-danger-soft);
    border-color: var(--c-danger);
    color: var(--c-danger);
}

.notice--warning {
    background: var(--c-warning-soft);
    border-color: var(--c-warning);
    color: var(--c-warning);
}

.notice--info {
    background: var(--c-info-soft);
    border-color: var(--c-info);
    color: var(--c-text);
}

.notice a {
    color: inherit;
}

.panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.panel--attention {
    background: var(--c-warning-soft);
    border-color: var(--c-warning);
}

.panel--muted {
    background: var(--c-surface-alt);
}

.panel__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    margin-bottom: var(--sp-2);
}

.panel__text {
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-3);
}

.panel__text:last-child {
    margin-bottom: 0;
}

.tips {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-4);
}

.clarification-list {
    font-size: var(--fs-sm);
    margin: var(--sp-3) 0 0;
    padding-left: 1.1rem;
}

.clarification-list li {
    margin-bottom: var(--sp-2);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 650;
    line-height: 1.6;
}

.badge--attention {
    background: var(--c-warning-soft);
    color: var(--c-warning);
    border: 1px solid currentColor;
}

.badge--success {
    background: var(--c-success-soft);
    color: var(--c-success);
    border: 1px solid currentColor;
}

.badge--neutral {
    background: var(--c-surface-alt);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

.badge--danger {
    background: var(--c-danger-soft);
    color: var(--c-danger);
    border: 1px solid currentColor;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-3);
    border-radius: var(--radius-pill);
    background: var(--c-surface-alt);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
}

.chip--price {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

/* Unbekannte Angaben sind erkennbar, ohne wie ein Fehler zu wirken (FR-022). */
.is-unknown {
    color: var(--c-warning);
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   11. Foto-Upload
   --------------------------------------------------------------------------- */
.uploader {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.uploader--required {
    border-color: var(--c-warning);
    background: var(--c-warning-soft);
}

.uploader__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.uploader__title {
    font-size: var(--fs-md);
    margin: 0;
}

.uploader__count {
    margin: 0 0 0 auto;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.uploader__list {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.uploader__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--c-surface-alt);
    border-radius: var(--radius-md);
}

.uploader__thumb {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text-muted);
}

.uploader__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.uploader__name {
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploader__size,
.uploader__note {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.uploader__empty {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.uploader__dropzone {
    position: relative;
    border: 2px dashed var(--c-border-strong);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.uploader__dropzone.is-dragover {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}

.uploader__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-5);
    min-height: 7rem;
    cursor: pointer;
    color: var(--c-text-muted);
    text-align: center;
}

.uploader__label-text {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.uploader__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.uploader__input:focus-visible + .uploader__label,
.uploader__dropzone:focus-within {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
}

.uploader__hint {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin: var(--sp-3) 0;
}

.asset-image {
    height: auto;
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   12. Positionen und Zusammenfassung
   --------------------------------------------------------------------------- */
.position-list {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    display: grid;
    gap: var(--sp-4);
}

.position-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}

.position-card--flagged {
    border-left: 4px solid var(--c-warning);
}

.position-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.position-card__title {
    font-size: var(--fs-md);
    margin: 0;
}

.position-card__quantity {
    margin-left: auto;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.position-card__attributes,
.summary-list {
    display: grid;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
}

.position-card__attribute,
.summary-list__row {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-border);
}

.position-card__attribute:last-child,
.summary-list__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.position-card__attribute dt,
.summary-list__row dt {
    color: var(--c-text-muted);
    margin: 0;
}

.position-card__attribute dd,
.summary-list__row dd {
    margin: 0;
    font-weight: 500;
}

.position-card__meta,
.summary-position__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.position-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}

.summary-block {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.summary-block__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.summary-block__title {
    font-size: var(--fs-md);
    margin: 0;
}

.summary-block__edit {
    margin-left: auto;
    font-size: var(--fs-sm);
    font-weight: 600;
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
}

.summary-block__text {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: 0;
}

.summary-positions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-4);
}

.summary-position {
    padding: var(--sp-4);
    background: var(--c-surface-alt);
    border-radius: var(--radius-md);
}

.summary-position__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.summary-position__title {
    font-size: var(--fs-sm);
    font-weight: 700;
    margin: 0;
}

.summary-position__quantity {
    margin-left: auto;
    font-size: var(--fs-sm);
}

.summary-list--compact .summary-list__row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding-top: var(--sp-4);
    margin-top: var(--sp-4);
    border-top: 2px solid var(--c-border);
    font-size: var(--fs-md);
}

.summary-total__value {
    font-weight: 700;
}

.address-reference {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-3);
    background: var(--c-surface-alt);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.address-reference__title {
    width: 100%;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: 0;
}

.address-reference__body {
    font-style: normal;
    font-size: var(--fs-sm);
}

.address-reference__edit {
    margin-left: auto;
    font-size: var(--fs-sm);
}

.submit-form {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}

.consent {
    display: grid;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.consent__version {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.submit-form__legal {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    background: var(--c-surface-alt);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------------
   13. Bestaetigung und Fehlerseite
   --------------------------------------------------------------------------- */
.confirmation {
    max-width: var(--container-narrow);
    margin: 0 auto;
    text-align: center;
}

.confirmation__icon {
    color: var(--c-success);
    margin-bottom: var(--sp-4);
}

.confirmation__title {
    font-size: var(--fs-2xl);
}

.confirmation__lead {
    font-size: var(--fs-md);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-5);
}

.reference-card {
    background: var(--c-primary-soft);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}

.reference-card__label {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-2);
}

.reference-card__number {
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: var(--sp-2);
    font-variant-numeric: tabular-nums;
}

.reference-card__hint {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: 0;
}

.confirmation__mail {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.confirmation__mail--warning {
    color: var(--c-warning);
}

.confirmation .panel,
.confirmation .next-steps {
    text-align: left;
}

.next-steps {
    margin: var(--sp-6) 0;
}

.next-steps__list {
    padding-left: 1.25rem;
    font-size: var(--fs-sm);
}

.next-steps__list li {
    margin-bottom: var(--sp-2);
}

.confirmation__legal {
    font-size: var(--fs-sm);
    background: var(--c-surface-alt);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    text-align: left;
}

.confirmation__contact {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.confirmation__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.error-page {
    max-width: var(--container-narrow);
    margin: var(--sp-7) auto;
    text-align: center;
}

.error-page__status {
    font-size: var(--fs-3xl);
    font-weight: 800;
    color: var(--c-border-strong);
    margin: 0;
}

.error-page__title {
    font-size: var(--fs-xl);
}

.error-page__text {
    color: var(--c-text-muted);
}

.error-page__reference {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.error-page__actions {
    margin-top: var(--sp-5);
}

/* ---------------------------------------------------------------------------
   14. Druckausgabe
   --------------------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .progress,
    .step__actions,
    .summary-block__edit,
    .button {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .summary-block,
    .position-card {
        border: 1px solid #999;
        break-inside: avoid;
    }
}