/*
 * AMJ-Onboarding Kundenseite — Gestaltung nach den Design-Tokens von
 * artmedia-jaeger.de (Mockup: deploy/amj-onboarding/mockup/kundenseite.html).
 *
 * Schriften liegen selbst gehostet unter assets/fonts/ (keine Google Fonts).
 * Fehlen die Dateien, greifen die Systemschriften der Fallback-Kette.
 */
@font-face { font-family: "Outfit"; src: url("fonts/outfit-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-variable.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
    --ink: #1b1f27;
    --graphit: #262a33;
    --gold: #deae36;
    --gold-text: #7a5a0e;
    --gold-hell: #f6ebcd;
    --hintergrund: #f4f5f7;
    --weiss: #ffffff;
    --grau: #5b616e;
    --linie: #dfe2e8;
    --ok: #1d6b45;
    --ok-flaeche: #e6f4ec;
    --warn: #9a2a1f;
    --warn-flaeche: #fbeceb;
    --radius: 4px;
    --schatten: 0 1px 2px rgba(27,31,39,.06), 0 4px 16px rgba(27,31,39,.06);
    --fokus: 0 0 0 3px #ffffff, 0 0 0 5px var(--ink);
    --schrift-kopf: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --schrift-text: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
    margin: 0; background: var(--hintergrund); color: var(--ink);
    font-family: var(--schrift-text); font-size: 17px; line-height: 1.55;
    min-height: 100vh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }
h1, h2, h3, .kopf-firma { font-family: var(--schrift-kopf); line-height: 1.25; margin: 0; }
p { margin: 0 0 .75rem; }
a { color: var(--gold-text); }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--radius); }
.visuell-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ohne-abstand { margin: 0; }

/* ---------- Kopf & Fuß ---------- */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: 1120px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 20px; }
.kopf-logo { height: 44px; width: auto; display: block; }
.kopf-trenner { width: 1px; align-self: stretch; background: var(--linie); }
.kopf-kunde { min-width: 0; }
.kopf-firma { font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.kopf-domain { color: var(--grau); font-size: .95rem; overflow-wrap: anywhere; }
.fuss { color: var(--grau); font-size: .9rem; }
.fuss-innen { max-width: 1120px; margin: 0 auto; padding: 24px 16px 96px; display: flex; gap: 20px; }

/* ---------- Rahmen ---------- */
.seite { max-width: 1120px; width: 100%; margin: 0 auto; padding: 28px 16px 48px; }
.raster { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 28px; }
.karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); }
.karte-innen { padding: 24px; }
.karte-eng { padding: 14px; }
.karte-eng .leiste-titel { padding: 0 10px; }
.meldung { margin-bottom: 20px; border-left: 4px solid var(--ok); }
.meldung h2 { font-size: 1.25rem; margin-bottom: 6px; }
.meldung p:last-child { margin-bottom: 0; }
.meldung-fehler { border-left-color: var(--warn); }

/* ---------- Begrüßung ---------- */
.begruessung h1 { font-size: 1.85rem; font-weight: 600; }
.begruessung p { margin: .5rem 0 0; color: var(--grau); max-width: 62ch; }
.begruessung .status-zeile { color: var(--ok); font-weight: 600; }
.etiketten { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.etikett { background: var(--gold-hell); color: var(--gold-text); border: 1px solid #ecd79a; font-weight: 600; font-size: .9rem; padding: 4px 12px; border-radius: 999px; }

/* ---------- Seitenleiste ---------- */
.leiste { position: sticky; top: 16px; display: grid; gap: 16px; }
/* Die Leiste bleibt stehen; ist sie höher als das Fenster (lange Bögen),
 * scrollt sie selbst. 88px = Abstand oben + Speicherleiste unten. */
@media (min-width: 861px) {
    .leiste { max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; }
}
.leiste-titel { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); margin: 0 0 8px; font-weight: 600; }
.fortschritt-zahl { font-family: var(--schrift-kopf); font-size: 1.6rem; font-weight: 600; }
progress.balken { display: block; width: 100%; height: 8px; margin: 8px 0 4px; border: 0; border-radius: 999px; background: #e8eaef; overflow: hidden; -webkit-appearance: none; appearance: none; }
progress.balken::-webkit-progress-bar { background: #e8eaef; border-radius: 999px; }
progress.balken::-webkit-progress-value { background: var(--gold); border-radius: 999px; }
progress.balken::-moz-progress-bar { background: var(--gold); border-radius: 999px; }
.abschnittsliste { list-style: none; margin: 0; padding: 0; }
.abschnittsliste a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; color: var(--ink); text-decoration: none; border-radius: var(--radius); }
.abschnittsliste a:hover { background: var(--hintergrund); }
.abschnittsliste .gruppe { font-size: .8rem; color: var(--grau); padding: 10px 10px 2px; }
.punkt { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid #c5cad3; position: relative; }
.punkt.halb { border-color: var(--gold); background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); }
.punkt.fertig { border-color: var(--ok); background: var(--ok); }
.punkt.fertig::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.abschnitt-zaehler { margin-left: auto; font-size: .85rem; color: var(--grau); }
.kontakt { display: flex; gap: 12px; align-items: flex-start; }
.kontakt-bild { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--graphit); color: var(--gold); display: grid; place-items: center; font-family: var(--schrift-kopf); font-weight: 600; }
.kontakt p { margin: 0; }
.kontakt .klein { color: var(--grau); font-size: .9rem; overflow-wrap: anywhere; }

/* ---------- Abschnitte & Fragen ---------- */
.gruppenkopf { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin: 32px 0 10px; }
.gruppenkopf:first-of-type { margin-top: 0; }
.abschnitt { margin-bottom: 20px; }
.abschnitt h2 { font-size: 1.3rem; font-weight: 600; }
.abschnitt-einleitung { color: var(--grau); margin: 6px 0 0; }
.frage { padding: 20px 0; border: 0; border-top: 1px solid var(--linie); margin: 0; min-width: 0; }
.abschnitt-einleitung + .frage, h2 + .frage { margin-top: 18px; }
/* Legenden sitzen sonst auf dem Rahmen des Fieldsets. Alles nach der Legende
 * beginnt darunter — auch wenn zuerst ein verstecktes Feld folgt. */
fieldset.frage > legend { float: left; width: 100%; padding: 0; }
fieldset.frage > :not(legend) { clear: both; }
.frage-titel { font-weight: 600; display: block; margin-bottom: 2px; }
.pflicht { color: var(--warn); font-weight: 700; margin-left: 2px; }
.marke-rueckfrage { display: inline-block; margin-left: 8px; font-size: .8rem; font-weight: 600; color: var(--gold-text); background: var(--gold-hell); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.hilfe { color: var(--grau); font-size: .95rem; margin: 0 0 10px; }
.feld { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--weiss); border: 1px solid #b9bfca; border-radius: var(--radius); }
.feld:focus { outline: none; box-shadow: var(--fokus); border-color: var(--ink); }
textarea.feld { min-height: 120px; resize: vertical; }
.feld-kurz { max-width: 260px; }
.feld-abstand { margin-top: 10px; }
.frage-fehler { color: var(--warn); font-weight: 600; font-size: .95rem; margin: 8px 0 0; }
.frage-fehler:empty { display: none; }
.frage.hat-fehler .feld { border-color: var(--warn); }
.vorbefuellt { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: .9rem; color: var(--grau); }
.vorbefuellt .marke { background: var(--hintergrund); border: 1px solid var(--linie); border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
.wahl { display: grid; gap: 8px; }
.wahl-zeile { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wahl label { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 8px 14px; cursor: pointer; border: 1px solid #c8cdd6; border-radius: var(--radius); background: var(--weiss); }
.wahl label:hover { border-color: var(--ink); }
.wahl { max-width: 640px; }
/* Einheitliche, eckige Ankreuzfelder — für Mehrfachauswahl (Checkbox) wie für
 * Ja/Nein und Zugang (Radio, eine Antwort). */
.wahl input[type="checkbox"], .wahl input[type="radio"] {
    -webkit-appearance: none; appearance: none; margin: 0; flex: 0 0 22px; width: 22px; height: 22px;
    border: 2px solid #6b7180; border-radius: 4px; background: var(--weiss);
    display: grid; place-content: center; cursor: pointer;
}
.wahl input:checked { background: var(--ink); border-color: var(--ink); }
.wahl input:checked::after {
    content: ""; width: 6px; height: 11px; margin-top: -2px;
    border: solid var(--weiss); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.hinweis-mehrfach { color: var(--grau); font-size: .9rem; margin: 0 0 8px; }
.ergaenzung-titel { display: block; font-size: .95rem; color: var(--grau); margin: 14px 0 6px; }
.ergaenzung-titel + .feld { max-width: 640px; }
.wahl label:has(input:checked) { border-color: var(--ink); background: #f7f8fa; box-shadow: inset 3px 0 0 var(--gold); }
.wahl label:has(input:focus-visible) { box-shadow: var(--fokus); }
.hinweis-passwort { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; background: #fff8e6; border: 1px solid #ecd79a; border-radius: var(--radius); font-size: .95rem; }
.hinweis-passwort svg { flex: 0 0 20px; margin-top: 2px; }
.upload { border: 2px dashed #b9bfca; border-radius: var(--radius); padding: 18px; background: #fafbfc; }
.upload p { margin: 0; color: var(--grau); font-size: .95rem; }

/* Rückfrage je Frage */
.rueckfrage { margin-top: 10px; }
.rueckfrage summary { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; font-size: .95rem; list-style: none; }
.rueckfrage summary::-webkit-details-marker { display: none; }
.rueckfrage[open] { padding: 4px 14px 12px; background: #f7f8fa; border-left: 3px solid var(--gold); border-radius: var(--radius); }
.rueckfrage label { font-weight: 600; font-size: .95rem; display: block; margin: 4px 0 6px; }
.rueckfrage textarea.feld { min-height: 80px; margin-bottom: 6px; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; font: inherit; font-weight: 600; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--weiss); text-decoration: none; }
.knopf:hover { background: var(--graphit); }
.knopf-gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.knopf-gold:hover { background: #cf9f2a; }
.knopf-leise { background: var(--weiss); color: var(--ink); border-color: #b9bfca; }
.knopf-leise:hover { background: var(--hintergrund); }
.knopf-klein { min-height: 40px; padding: 6px 14px; font-size: .95rem; }
.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- Absenden ---------- */
.absenden-karte { margin-top: 28px; }
.absenden-karte h2 { font-size: 1.2rem; margin-bottom: 8px; }
.nachfrage { margin-top: 16px; padding: 16px; border: 1px solid #ecd79a; background: #fff8e6; border-radius: var(--radius); }
.offen-liste { margin: 8px 0 16px; padding-left: 20px; }
.offen-liste a { color: var(--warn); }

/* ---------- Speicherstand ---------- */
.speicherstand { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: rgba(255,255,255,.97); border-top: 1px solid var(--linie); box-shadow: 0 -4px 16px rgba(27,31,39,.06); }
.speicherstand-innen { max-width: 1120px; margin: 0 auto; padding: 8px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.status-text { display: flex; gap: 8px; align-items: center; color: var(--grau); font-size: .95rem; min-width: 0; }
.status-text .lampe { flex: 0 0 10px; height: 10px; border-radius: 50%; background: #c5cad3; }
.status-text.gespeichert .lampe { background: var(--ok); }
.status-text.speichert .lampe { background: var(--gold); animation: puls 1s infinite; }
.status-text.fehler { color: var(--warn); }
.status-text.fehler .lampe { background: var(--warn); }
@keyframes puls { 50% { opacity: .3; } }

/* ---------- Ausnahmeseiten ---------- */
.mitte { max-width: 560px; width: 100%; margin: 48px auto; padding: 0 16px; }
.mitte .karte-innen { padding: 32px; }
.mitte h1 { font-size: 1.5rem; margin-bottom: 8px; }
.mitte p { color: var(--grau); }

/* ---------- Fortschrittszeile oben (nur schmal) ---------- */
.fortschritt-mobil { display: none; }

@media (max-width: 860px) {
    .raster { grid-template-columns: 1fr; }
    .leiste { position: static; order: 2; }
    .kopf-innen { gap: 12px; }
    .kopf-logo { height: 34px; }
    .begruessung h1 { font-size: 1.45rem; }
    .karte-innen { padding: 18px; }
    .fortschritt-mobil { display: block; position: sticky; top: 0; z-index: 6; background: var(--weiss); border-bottom: 1px solid var(--linie); padding: 8px 16px; }
    .fortschritt-mobil .zeile { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
    .fortschritt-mobil progress.balken { margin: 6px 0 0; height: 6px; }
    .speicherstand .knopf-klein { display: none; }
}
@media (max-width: 520px) {
    .kopf-innen { flex-wrap: wrap; }
    .kopf-trenner { display: none; }
    .kopf-kunde { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------- Dateien ---------- */
.unterlagen-liste, .dateiliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.unterlage { display: inline-flex; gap: 8px; align-items: flex-start; color: var(--gold-text); font-weight: 600; overflow-wrap: anywhere; }
.unterlage svg { flex: 0 0 18px; margin-top: 3px; }
.unterlage-info { color: var(--grau); font-weight: 400; }
.vorlage { margin: 4px 0 10px; }
.datei { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); }
.datei svg { flex: 0 0 22px; }
.datei-text { display: flex; flex-direction: column; min-width: 0; }
.datei-name { font-weight: 600; overflow-wrap: anywhere; }
.datei-info { color: var(--grau); font-size: .9rem; }
.dateiliste:not(:empty) + .upload { margin-top: 10px; }
.upload { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.upload p { flex: 1 1 220px; }
.datei-eingabe { font: inherit; font-size: .95rem; max-width: 100%; }
.mit-skript .datei-eingabe { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mit-skript .ohne-skript { display: none; }
.upload label.knopf { cursor: pointer; }
.datei-eingabe:focus-visible + p, .upload:focus-within label.knopf { box-shadow: var(--fokus); }

/* ---------- Passwortmaske ---------- */
.passwort-formular { display: grid; gap: 8px; margin: 16px 0 20px; }
.passwort-formular .knopf { justify-self: start; margin-top: 8px; }
.meldung-text-fehler { color: var(--warn); font-weight: 600; }