/* ============================================================
   Wizard-Styles – Kacheln, Formular, Bestätigung
   Designreferenz: pfoerring.de
   ============================================================ */

/* ── Wizard-Seite ──────────────────────────────────────────── */
.wizard-page { max-width: 820px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.wizard-page--form { max-width: 100%; }

.wizard-header { text-align: center; margin-bottom: 2.5rem; }


.wizard-header h1 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 400;       /* Roboto Slab Regular – wie auf pfoerring.de */
    color: var(--color-text);
    letter-spacing: -.01em;
}

/* Breadcrumb-Chip */
.wizard-breadcrumb {
    display: inline-block;
    background: #ddf0ff;
    color: var(--color-blue-dk);
    border-radius: 999px;
    padding: .28rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    margin-top: .6rem;
}

/* ── Kachel-Raster ─────────────────────────────────────────── */
.wizard-section { border: none; padding: 0; margin-bottom: 2.25rem; }
.wizard-section__title {
    text-align: center;
    width: 100%;
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
    line-height: 1.3;
}

.card-grid {
    display: grid;
    gap: .8rem;
}
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* ── Einzelne Kachel ───────────────────────────────────────── */
.wizard-card {
    cursor: pointer;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;
    display: flex;
    flex-direction: column;
    width: 100%;
    user-select: none;
    position: relative;
}

/* Hover: leichtes Anheben + Schatten */
.wizard-card:hover {
    border-color: var(--color-blue);
    box-shadow: 0 6px 20px rgb(66 122 170 / .20);
    transform: translateY(-3px);
}
.wizard-card:hover .wizard-card__label {
    background: color-mix(in srgb, var(--color-blue) 8%, var(--color-surface));
    color: var(--color-blue);
    font-weight: 600;
}

/* Radio-Input verstecken – Mindestgröße 1px damit Label-Aktivierung zuverlässig feuert */
.wizard-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* ── Ausgewählt: ausschließlich via JS-Klasse gesteuert ── */
.wizard-card--selected {
    border-color: var(--color-green-dk);
    border-width: 3px;
    box-shadow: 0 0 0 4px rgb(145 201 40 / .35),
                0 6px 20px rgb(145 201 40 / .25);
    transform: translateY(-3px);
}

/* Grüner Schimmer über dem Bildbereich */
.wizard-card--selected::before {
    content: '';
    position: absolute;
    inset: 0;
    bottom: 2.4rem;
    background: rgba(110, 175, 20, .22);
    z-index: 1;
    pointer-events: none;
}

/* Großes Häkchen – mittig im Bildbereich (Labelleiste unten ausgespart) */
.wizard-card--selected::after {
    content: '✓';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 2.4rem;   /* Höhe der Labelleiste freilassen */
    width: 52px;
    height: 52px;
    margin: auto;     /* zentriert innerhalb des Bildbereichs */
    background: var(--color-green-dk);
    color: #fff;
    border-radius: 50%;
    font-size: 1.75rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 3px 16px rgba(0 0 0 / .30);
    z-index: 2;
}

/* Wenn eine Kachel ausgewählt ist: alle anderen abdunkeln */
.card-grid.has-selection .wizard-card:not(.wizard-card--selected) {
    opacity: .48;
    transform: scale(.96);
    transition: opacity .2s ease, transform .2s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-grid.has-selection .wizard-card:not(.wizard-card--selected):hover {
    opacity: .82;
    transform: scale(1);
    border-color: var(--color-blue);
}
.card-grid.has-selection .wizard-card:not(.wizard-card--selected) .wizard-card__img {
    filter: grayscale(85%) brightness(.7);
}

/* Bild – quadratisch, Graustufen auf unausgewählten Kacheln */
.wizard-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    filter: grayscale(60%) brightness(.95);
    transition: filter .25s ease, transform .25s ease;
    background: var(--color-border);
}
/* Kachel ohne Bild (Firmen/Gemeinde): unsichtbar, belegt aber den Platz
   damit das Label wie bei Kacheln mit Bild unten bleibt */
.wizard-card__img:not([src]),
.wizard-card__img[src=""] {
    visibility: hidden;
}

.wizard-card:hover .wizard-card__img {
    filter: grayscale(0%) brightness(1.05);
    transform: scale(1.04);
}
/* Abgedunkelte Kacheln: beim Hover vollen Farbton + volle Sichtbarkeit */
.card-grid.has-selection .wizard-card:not(.wizard-card--selected):hover .wizard-card__img {
    filter: grayscale(0%) brightness(1.05);
}
.wizard-card--selected .wizard-card__img {
    filter: grayscale(0%) brightness(1);
}
.card-grid.has-selection .wizard-card:not(.wizard-card--selected) .wizard-card__img {
    filter: grayscale(85%) brightness(.7);
}

/* Label */
.wizard-card__label {
    display: block;
    text-align: center;
    padding: .6rem .5rem .55rem;
    font-size: .92rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    transition: background .15s, color .15s;
}
.wizard-card--selected .wizard-card__label {
    background: #f0fbea;
    color: var(--color-green-xdk);
    font-weight: 700;
}


/* ── Wizard-Navigation ─────────────────────────────────────── */
.wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
.wizard-nav--right { justify-content: flex-end; }

/* ── Ausgaben-Hinweiszeile ──────────────────────────────────────────────────── */
.wizard-issue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: .75rem 1rem;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    background: #eff6ff;
    margin: .75rem 0 0;
    flex-wrap: wrap;
}
.wizard-issue-row--late {
    border-color: #fde68a;
    background: #fffbeb;
}
.wizard-issue-row--warn {
    border-color: #fca5a5;
    background: #fef2f2;
}
.wizard-issue-row__info {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    flex: 1;
}
.wizard-issue-row__label { font-size: .8rem; color: #1e40af; }
.wizard-issue-row--late .wizard-issue-row__label { color: #92400e; }
.wizard-issue-row__title { font-size: .95rem; color: #1e3a8a; }
.wizard-issue-row--late .wizard-issue-row__title { color: #78350f; }
.wizard-issue-row__note { font-size: .78rem; color: #92400e; }
.wizard-issue-row--warn .wizard-issue-row__note { color: #b91c1c; }
.wizard-issue-row__toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    font-size: .82rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.wizard-issue-row__toggle small { opacity: .75; }
.wizard-issue-options {
    padding: .75rem 1rem;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    background: #fafbfc;
    margin-bottom: .5rem;
}
.issue-pref-select-wrap { margin-top: .5rem; }
.issue-pref-select-wrap select { max-width: 320px; }
.issue-pref-radio__hint { font-style: normal; font-size: .8rem; color: var(--color-text-muted); }

/* ── Weitere-Ausgabe-Abschnitt (Legacy) ────────────────────────────────────── */
.form-section--wide { grid-column: 1 / -1; margin-top: 1rem; }
.issue-pref-options { display: flex; flex-direction: column; gap: .55rem; margin: .75rem 0 .5rem; }
.issue-pref-radio {
    display: flex; align-items: flex-start; gap: .55rem;
    cursor: pointer; font-size: .9rem; color: var(--color-text);
}
.issue-pref-radio input[type="radio"] { margin-top: .15rem; flex-shrink: 0; }
#issue-pref-select { margin-top: .5rem; }
#issue-pref-select select { max-width: 320px; }

/* ── Datenschutz-Checkbox ──────────────────────────────────────────────────── */
.privacy-submit-area {
    margin-top: 2rem;
    padding: 1.1rem 1.4rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.privacy-label {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    cursor: pointer;
    font-size: .88rem;
    color: var(--color-text);
    line-height: 1.5;
}
.privacy-label input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .15rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.privacy-label--error {
    color: var(--color-error);
}
.privacy-label--error input[type="checkbox"] {
    outline: 2px solid var(--color-error);
    outline-offset: 1px;
}

/* Datenschutz-Toggle-Link */
.privacy-toggle-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--color-primary);
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.privacy-toggle-link:hover { color: var(--color-primary-dk); }

/* Datenschutz-Detailblock */
.privacy-detail {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
    border-radius: var(--radius);
    font-size: .83rem;
    line-height: 1.65;
    color: var(--color-text);
}
.privacy-detail__title {
    font-size: .9rem;
    font-weight: 700;
    margin: 0 0 .75rem;
    color: var(--color-primary);
}
.privacy-detail p {
    margin: 0 0 .6rem;
}
.privacy-detail p:last-child { margin-bottom: 0; }

/* ── Navigation mit eingebettetem Code-Zugang ───────────────────────────── */
.wizard-nav--with-access {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    justify-content: space-between;
}
.wizard-nav--with-access .code-access-bar {
    flex: 1;
    max-width: 520px;
}
.wizard-nav--with-access .btn--lg {
    flex-shrink: 0;
    align-self: flex-start;
}
/* Code-toggle-Button gleiche Höhe wie btn--lg */
.wizard-nav--with-access .code-access-bar__toggle {
    height: 3rem;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    .wizard-nav--with-access {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .wizard-nav--with-access .code-access-bar { max-width: none; }
    .wizard-nav--with-access .btn--lg { width: 100%; justify-content: center; }
}

/* ── Code-Zugang-Bar ───────────────────────────────────────── */
.code-access-bar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.code-access-bar__toggle {
    width: 100%;
    padding: .9rem 1.35rem;
    background: linear-gradient(to right, #f0f6ff, #fafcff);
    border: none;
    cursor: pointer;
    font-size: .92rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    letter-spacing: .01em;
    transition: background .15s;
}
.code-access-bar__toggle:hover { background: #e8f0ff; }
.code-access-bar__arrow { font-size: 1.2rem; font-weight: 700; transition: transform .2s; }
.code-access-bar[aria-expanded="true"] .code-access-bar__arrow { transform: rotate(90deg); }
.code-access-bar__panel { padding: 1.35rem 1.5rem; border-top: 1px solid var(--color-border); }
.code-access-bar__fields { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.code-access-bar__fields .form-group { margin-bottom: 0; flex: 1; min-width: 180px; }

.code-input { font-family: var(--font-mono); letter-spacing: .15em; text-transform: uppercase; font-size: 1rem; }

/* ── Formular-Abschnitte ───────────────────────────────────── */
.form-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.65rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-card);
}
.form-section__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1.35rem;
    padding-bottom: .7rem;
    border-bottom: 2px solid var(--color-border);
}

/* ── Abgesperrter Abschnitt (Hinweise an Redaktion) ────────────────────────── */
.form-section--gated {
    background: #f4f5f7;
    border-color: #d8dee6;
    transition: background .25s, border-color .25s;
}
.form-section--gated .form-section__title {
    color: var(--color-text-muted);
    border-bottom-color: #d8dee6;
}
.form-section--gated.form-section--active {
    background: var(--color-surface);
    border-color: var(--color-border);
}
.form-section--gated.form-section--active .form-section__title {
    color: var(--color-primary);
    border-bottom-color: var(--color-border);
}
.gated-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
    width: 100%;
}
.gated-toggle input[type="checkbox"] {
    width: .95rem;
    height: .95rem;
    flex-shrink: 0;
    cursor: pointer;
}

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Namensnennung-Optionen (einspaltig gestapelt) ────────────────────────── */
.author-options {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .85rem 1rem;
    background: #f8f9fb;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: .5rem;
}
.author-options .toggle-label {
    font-size: .88rem;
    line-height: 1.4;
}
.author-options__name .form-label { display: none; }

/* Disabled-Zustand für optionales Namensfeld */
.form-input:disabled {
    background: #f1f3f5;
    border-color: #e2e8f0;
    color: #adb5bd;
    cursor: not-allowed;
    opacity: 1;
}
.form-group--grow { flex: 1; min-width: 200px; }
.form-hint { font-size: .79rem; color: var(--color-text-muted); margin-top: .3rem; display: block; line-height: 1.4; }
.required { color: var(--color-error); }

/* ── Optionale Felder: ausgegraut wenn leer, weiß wenn ausgefüllt ───────────── */
/* .form-input--has-value wird per JS gesetzt, sobald ein Feld Inhalt hat.       */
input.form-input:not([required]):not(:focus):not(.form-input--has-value):not(:disabled),
textarea.form-input:not([required]):not(:focus):not(.form-input--has-value):not(:disabled) {
    background: #f7f8fa;
    border-color: #d4dae1;
    opacity: .82;
}
input.form-input:not([required]):not(.form-input--has-value)::placeholder,
textarea.form-input:not([required]):not(.form-input--has-value)::placeholder {
    color: #adb8c4;
}
input.form-input:not([required]):focus,
textarea.form-input:not([required]):focus {
    opacity: 1;
    background: #fff;
    border-color: var(--color-primary);
}
input.form-input.form-input--has-value:not(:disabled),
textarea.form-input.form-input--has-value:not(:disabled) {
    opacity: 1;
    background: #fff;
    border-color: var(--color-border-dk);
}

/* ── Rich-Text-Editor ──────────────────────────────────────── */
.richtext-toolbar {
    display: flex;
    gap: .35rem;
    padding: .45rem .6rem;
    background: #f4f5f7;
    border: 1px solid var(--color-border-dk);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
}
.richtext-toolbar button {
    padding: .25rem .65rem;
    border: 1px solid var(--color-border-dk);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-size: .85rem;
    transition: background .12s, color .12s;
}
.richtext-toolbar button:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.richtext-editor {
    min-height: 180px;
    max-height: 800px;
    overflow-y: auto;
    resize: vertical;
    padding: .75rem .85rem;
    border: 1px solid var(--color-border-dk);
    border-radius: 0 0 var(--radius) var(--radius);
    font-size: .95rem;
    font-family: var(--font-body);
    line-height: 1.65;
    background: #fff;
    outline: none;
    color: var(--color-text);
}
.richtext-editor:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(66 122 170 / .15);
}

/* ── Datei-Upload ──────────────────────────────────────────── */
.upload-slot {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--color-border-dk);
}
.upload-slot:last-child { border-bottom: none; }
.form-input-file { padding: .4rem; cursor: pointer; }

/* ── Dateiliste (Bearbeiten) ───────────────────────────────── */
.file-list { display: flex; flex-direction: column; gap: .5rem; }
.file-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    background: #f9fafb;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .875rem;
}
.file-item__name { font-weight: 700; flex: 1; min-width: 150px; }
.file-item__caption { color: var(--color-text-muted); flex: 2; }
.file-item__size { color: var(--color-text-muted); white-space: nowrap; }
.file-item__delete { display: flex; align-items: center; gap: .35rem; color: var(--color-error); cursor: pointer; font-size: .82rem; }

/* ── Meine Beiträge ────────────────────────────────────────── */
.submissions-list { display: flex; flex-direction: column; gap: 1rem; }
.submission-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: 1.3rem 1.6rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow .15s;
}
.submission-card:hover { box-shadow: var(--shadow-md); }
.submission-card__meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; }
.submission-card__date { font-size: .8rem; color: var(--color-text-muted); margin-left: auto; }
.submission-card__title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; margin-bottom: .25rem; }
.submission-card__subtitle { color: var(--color-text-muted); font-size: .9rem; }
.submission-card__category { font-size: .8rem; color: var(--color-text-muted); margin: .5rem 0; text-transform: uppercase; letter-spacing: .03em; }
.submission-card__code { font-size: .8rem; color: var(--color-text-muted); margin-bottom: .75rem; }
.submission-card__code code { font-family: var(--font-mono); letter-spacing: .08em; }
.submission-card__actions { display: flex; gap: .75rem; }

.empty-state-box { text-align: center; padding: 3rem; color: var(--color-text-muted); }

/* ── Bestätigungsseite ─────────────────────────────────────── */
.confirm-page { max-width: 580px; margin: 2rem auto; text-align: center; }
.confirm-icon {
    width: 76px; height: 76px;
    background: #e6f9d0;
    color: var(--color-green-xdk);
    font-size: 2.2rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.35rem;
    box-shadow: 0 0 0 6px rgb(160 206 78 / .15);
}
.confirm-lead { font-size: 1.05rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.code-display {
    background: linear-gradient(135deg, #f0f8e8, #f8fcf0);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    margin: 1.5rem 0;
}
.code-display__label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
    margin-bottom: .6rem;
}
.code-display__code {
    font-family: var(--font-mono);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-green-xdk);
    letter-spacing: .15em;
    margin-bottom: .85rem;
}
.code-display__hint { font-size: .84rem; color: var(--color-text-muted); margin-top: .75rem; line-height: 1.5; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 1.75rem; }

/* ── Newsletter-Opt-in-Box ─────────────────────────────────── */
.newsletter-optin-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    text-align: left;
    background: var(--color-surface);
}
.newsletter-optin-box__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--color-text);
}
.newsletter-optin-box__desc {
    font-size: .88rem;
    color: var(--color-text-muted);
    margin-bottom: .9rem;
    line-height: 1.55;
}

/* ── Info-Card (Werbung-Weiterleitung) ─────────────────────── */
.info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: var(--shadow-md);
}
.info-card__intro { color: var(--color-text-muted); margin-bottom: 1.5rem; line-height: 1.7; }
.info-card__contact h2 { font-family: var(--font-heading); font-size: 1rem; margin-bottom: .85rem; color: var(--color-primary); }
.info-card__contact p { margin-bottom: .4rem; }
.info-card__actions { margin-top: 2rem; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .card-grid--5 { grid-template-columns: repeat(2, 1fr); }
    .wizard-nav { flex-direction: column-reverse; }
    .wizard-nav .btn { width: 100%; justify-content: center; }
    .code-access-bar__fields { flex-direction: column; }
    .form-row { flex-direction: column; }
    .wizard-header h1 { font-size: 1.4rem; }
    .form-layout { grid-template-columns: 1fr; }
}

/* ── Drop-Zone (kompakte Leiste) ───────────────────────────────────────────── */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 2px dashed var(--color-border-dk);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1.25rem 1.5rem;
    min-height: 0;
    text-align: center;
    transition: border-color .2s, background .2s;
    cursor: pointer;
}
.dropzone:hover {
    border-color: var(--color-blue);
    background: color-mix(in srgb, var(--color-blue) 3%, var(--color-surface));
}
.dropzone--active {
    border-color: var(--color-green-dk);
    background: color-mix(in srgb, var(--color-green-dk) 5%, var(--color-surface));
}
.dropzone__icon {
    width: 36px;
    height: 36px;
    color: var(--color-text-muted);
    opacity: .6;
}
.dropzone__text {
    font-size: .9rem;
    color: var(--color-text-muted);
    margin: 0;
}
.dropzone__btn {
    font-size: .88rem;
    padding: .5rem 1.4rem;
}
.dropzone__hint {
    font-size: .71rem;
    color: var(--color-text-muted);
    opacity: .75;
    margin: 0;
}

/* Hinweistext unter der Dropzone */
.dropzone-advice {
    margin: .3rem 0 0;
    padding-top: .2rem;
    font-size: .73rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    font-style: italic;
    opacity: .8;
}

/* ── Dateiliste ────────────────────────────────────────────────────────────── */
.file-list {
    list-style: none;
    padding: 0;
    margin: .75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
/* ── File-Item: Kachelvorschau – Dateiname unter dem Vorschaubild ────────────
   Zeile 1: [pos] [handle] [preview 52px] [größe] [remove]
   Zeile 2: (leer) (leer) [dateiname, Spalten 3–4, abgeschnitten]
   Zeile 3: [caption textarea] – volle Breite
   Zeile 4: [credit input]    – volle Breite
   ─────────────────────────────────────────────────────────────────────────── */
.file-item {
    display: grid;
    grid-template-columns: 1.6rem 1.2rem 52px 1fr auto;
    grid-template-rows: 52px auto auto auto;
    column-gap: .6rem;
    row-gap: 0;
    align-items: start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
    background: var(--color-surface);
    padding: .65rem .75rem;
    transition: box-shadow .15s, opacity .15s;
}
.file-item--dragging {
    opacity: .4;
    box-shadow: none;
}
.file-item--dragover {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-blue) 25%, transparent);
}

/* Positionsnummer – Spalte 1, Zeile 1 */
.file-item__pos {
    grid-column: 1; grid-row: 1;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: .68rem;
    font-weight: 700;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    justify-self: center;
    align-self: center;
}

/* Zieh-Griff – Spalte 2, Zeile 1 */
.file-item__handle {
    grid-column: 2; grid-row: 1;
    cursor: grab;
    color: var(--color-text-muted);
    opacity: .4;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.file-item__handle:hover { opacity: 1; }
.file-item--dragging .file-item__handle { cursor: grabbing; }

/* Vorschau – Spalte 3, Zeile 1 */
.file-item__preview {
    grid-column: 3; grid-row: 1;
    width: 52px;
    height: 52px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.file-item__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.file-item__ext {
    font-size: .62rem;
    font-weight: 800;
    color: var(--color-blue);
    letter-spacing: .04em;
    text-align: center;
}

/* Dateigröße – Spalte 4, Zeile 1 */
.file-item__size {
    grid-column: 4; grid-row: 1;
    align-self: center;
    padding-left: .2rem;
    font-size: .76rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Entfernen – Spalte 5, Zeile 1 */
.file-item__remove {
    grid-column: 5; grid-row: 1;
    align-self: start;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
}
.file-item__remove svg { width: 12px; height: 12px; }
.file-item__remove:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Dateiname – Spalten 3–4, Zeile 2 (unter dem Vorschaubild) */
.file-item__name {
    grid-column: 3 / 5; grid-row: 2;
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    padding-top: .2rem;
}

/* Bildunterschrift – Zeile 3, Spalten 1–5 */
.file-item__caption {
    grid-column: 1 / -1; grid-row: 3;
    font-size: .81rem;
    padding: .3rem .55rem;
    margin-top: .4rem;
    resize: vertical;
    min-height: 2.4rem;
}

/* Credit – Zeile 4, Spalten 1–5 */
.file-item__credit {
    grid-column: 1 / -1; grid-row: 4;
    font-size: .78rem;
    padding: .25rem .55rem;
    margin: 0;
    border-style: dashed;
    color: var(--color-text-muted);
}

/* Responsive: schmale Ansicht (Handy) */
@media (max-width: 500px) {
    .file-item {
        grid-template-columns: 1.4rem 1rem 44px 1fr auto;
        column-gap: .4rem;
        padding: .55rem .55rem;
    }
    .file-item__preview { width: 44px; height: 44px; }
}

/* ── Wizard-Layout (ohne Site-Header) ─────────────────────────────────────── */
.wizard-main {
    min-height: 100vh;
    background: var(--color-bg);
}
.wizard-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
}

/* ── Fortschrittsleiste (oben, sticky) ───────────────────────────────────────── */
@keyframes progressSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.wizard-progress {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 4px rgb(0 0 0 / .06);
    animation: progressSlideDown .3s ease;
}
/* Inner-Grid spiegelt das Form-Layout exakt (300px | 1fr | 300px) */
.wizard-progress__inner {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 1.5rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: .65rem 2rem;
    align-items: center;
}
/* Linker / rechter Kontext-Slot */
.wizard-progress__slot {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}
.wizard-progress__slot--right {
    justify-content: flex-end;
}
.wizard-progress__page-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.wizard-breadcrumb--sm {
    font-size: .78rem;
    padding: .22rem .75rem;
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
.wizard-progress__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wizard-progress__item {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.wizard-progress__item:not(:last-child)::after {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: var(--color-border);
    margin: 0 .3rem;
    flex-shrink: 0;
}
.wizard-progress__item--done:not(:last-child)::after {
    background: var(--color-green-dk);
}
.wizard-progress__bubble {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--color-border-dk);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, border-color .2s, color .2s;
}
.wizard-progress__item--active .wizard-progress__bubble {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}
.wizard-progress__item--done .wizard-progress__bubble {
    border-color: var(--color-green-dk);
    background: var(--color-green-dk);
    color: #fff;
}
.wizard-progress__label {
    font-size: .76rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.wizard-progress__item--active .wizard-progress__label {
    color: var(--color-primary);
    font-weight: 600;
}
.wizard-progress__item--done .wizard-progress__label {
    color: var(--color-green-xdk);
}
@media (max-width: 860px) {
    .wizard-progress__label { display: none; }
}

/* ── Fortschrittsleiste: Zurück-Links ─────────────────────────────────────── */
.wizard-progress__link {
    display: flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 6px;
    transition: opacity .15s;
}
.wizard-progress__link:hover { opacity: .75; }
.wizard-progress__item--done .wizard-progress__link:hover .wizard-progress__bubble {
    box-shadow: 0 0 0 3px rgb(145 201 40 / .35);
}

/* ── Pflichtfeld-Fehler ────────────────────────────────────────────────────── */
.form-input--error {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 2px rgb(220 38 38 / .18);
}

/* ── Zusammenfassung (Schritt 4, client-seitig) ────────────────────────────── */
.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.summary-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow-card);
}
.summary-section--wide { grid-column: 1 / -1; }
.summary-section__title {
    font-family: var(--font-heading);
    font-size: .88rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .85rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--color-border);
}
.summary-row {
    display: flex;
    gap: .75rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--color-bg);
    font-size: .88rem;
    align-items: baseline;
}
.summary-row--full { flex-direction: column; gap: .25rem; }
.summary-label {
    min-width: 100px;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.summary-value { color: var(--color-text); word-break: break-word; }
.summary-richtext {
    font-size: .88rem;
    line-height: 1.65;
    padding: .5rem;
    background: var(--color-bg);
    border-radius: var(--radius);
}
.summary-files {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .85rem;
}
.summary-filesize { color: var(--color-text-muted); font-size: .78rem; }
.summary-meta { font-size: .8rem; color: var(--color-text-muted); }
.summary-meta--credit { font-style: italic; }
.summary-row__note {
    font-size: .74rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-left: auto;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .summary-grid { grid-template-columns: 1fr; }
    .summary-section--wide { grid-column: 1; }
}

/* ── Zusammenfassung: Seitenübergang-Animation ──────────────────────────────── */
@keyframes summaryEnter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
#submission-summary.summary--entering {
    animation: summaryEnter .28s ease forwards;
}

/* ── Zusammenfassung: Inline-Bearbeitung ────────────────────────────────────── */
.summary-row--editable {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .4rem .75rem;
}
.summary-edit-btn {
    margin-left: auto;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.summary-edit-btn:hover {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.summary-inline-editor {
    width: 100%;
    display: flex;
    gap: .3rem;
    align-items: center;
}
.summary-edit-input,
.summary-edit-select {
    flex: 1;
    min-width: 0;
    font-size: .85rem;
    padding: .3rem .55rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.summary-save-btn,
.summary-cancel-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.summary-save-btn {
    border-color: var(--color-green-dk);
    color: var(--color-green-dk);
}
.summary-save-btn:hover {
    background: var(--color-green-dk);
    color: #fff;
}
.summary-cancel-btn {
    color: var(--color-text-muted);
}
.summary-cancel-btn:hover {
    background: var(--color-bg);
}

/* ── Formular: Drei-Spalten-Layout (muss zu wizard-progress__inner passen) ───── */
.form-layout {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .form-layout {
        grid-template-columns: 300px 1fr;
        grid-template-areas:
            'contact main'
            'aside   main';
    }
    .form-layout__contact { grid-area: contact; }
    .form-layout__main    { grid-area: main; }
    .form-layout__aside   { grid-area: aside; }
    .wizard-progress__inner {
        grid-template-columns: 300px 1fr auto;
    }
}
@media (max-width: 860px) {
    .form-layout {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }
    .form-layout__contact,
    .form-layout__main,
    .form-layout__aside { grid-area: auto; }
    .wizard-progress__inner {
        grid-template-columns: 1fr;
    }
    .wizard-progress__slot { display: none; }
}

/* ── Einsender-Profile ────────────────────────────────────── */
.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 1rem;
    max-width: 560px;
}
@media (max-width: 600px) { .profile-form-grid { grid-template-columns: 1fr; } }

.profile-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: .5rem;
    background: #fafafa;
}
.profile-item__header {
    padding: .6rem .9rem;
    cursor: pointer;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.profile-item__sub {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: .82rem;
}
.profile-default-badge {
    font-size: .72rem;
    font-weight: 700;
    background: var(--color-accent);
    color: #fff;
    padding: .1rem .5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.profile-item__form {
    padding: .75rem .9rem 1rem;
    border-top: 1px solid var(--color-border);
    background: #fff;
}
.profile-selector-group { margin-bottom: 1rem; }

/* ── Bereinigter Datensatz ────────────────────────────────── */
.submission-card--anonymized {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: .85;
}

/* ── Login-Tabs (Passwort / Referenzcode) ─────────────────── */
.login-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}
.login-tab {
    padding: .4rem .9rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: color .15s, border-color .15s;
}
.login-tab:hover { color: var(--color-primary); }
.login-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}