/* EZplus Kundenformular – Basis und Komponenten (Spezifikation Abschnitte 3, 5, 6) */

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

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

body {
  margin: 0;
  background: var(--grau);
  color: var(--schwarz);
  font: 400 16px/26px var(--font-body);
}

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

[hidden] { display: none !important; }

a { color: var(--blau); }
a:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

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

/* ---------- Textstile ---------- */

.headline-xl { font: 700 40px/48px var(--font-display); margin: 0; }
.headline-m  { font: 700 20px/28px var(--font-display); margin: 0; }
.headline-s  { font: 700 16px/22px var(--font-display); margin: 0; }
.label       { font: 600 14px/20px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.label-s     { font: 600 11px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.body        { font: 400 16px/26px var(--font-body); }
.body-s      { font: 400 14px/22px var(--font-body); }
.feldlabel   { font: 500 14px/22px var(--font-body); }
.caption     { font: 400 12px/18px var(--font-body); }
.text-sekundaer { color: var(--text-sekundaer); }

@media (max-width: 599px) {
  .headline-xl { font-size: 28px; line-height: 36px; }
}

/* ---------- Kachel (Schattenbox) ---------- */

.ez-kachel {
  background: var(--weiss);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-0);
  box-shadow: var(--schatten-box);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ez-kachel--info {
  background: var(--hellblau);
  border-color: var(--hellblau);
  color: var(--schwarz);
}
.ez-kachel--info a { color: var(--schwarz); }

.ez-kachel--fehler {
  border: 2px solid var(--fehler);
}

/* Abschnittskopf */
.ez-abschnitt__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ez-abschnitt__nummer {
  width: 32px; height: 32px;
  border-radius: var(--radius-voll);
  background: var(--blau);
  color: var(--weiss);
  font: 700 14px/32px var(--font-display);
  text-align: center;
  flex: 0 0 32px;
}
.ez-abschnitt__hinweis {
  margin: -8px 0 0;
  color: var(--text-sekundaer);
  font: 400 14px/22px var(--font-body);
}
.ez-abschnitt__zaehler {
  margin-left: auto;
  color: var(--text-sekundaer);
  font: 400 14px/22px var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ez-abschnitt__zaehler svg { width: 18px; height: 18px; stroke: var(--blau); }

/* ---------- Button ---------- */

.ez-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 48px; padding: 0 var(--space-3);
  font: 600 14px/20px var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  border: 2px solid var(--blau); border-radius: var(--radius-s);
  background: var(--blau); color: var(--weiss); cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.ez-button:hover            { background: var(--blau-hover); border-color: var(--blau-hover); }
.ez-button:focus-visible    { outline: 2px solid var(--blau); outline-offset: 2px; }
.ez-button:disabled         { opacity: .5; cursor: not-allowed; }
.ez-button--sekundaer       { background: var(--weiss); color: var(--blau); }
.ez-button--sekundaer:hover { background: var(--grau); border-color: var(--blau); }
.ez-button--sekundaer:active{ background: var(--hellblau); color: var(--schwarz); border-color: var(--hellblau); }
.ez-button--klein           { min-height: 44px; padding: 0 var(--space-2); font-size: 11px; letter-spacing: .08em; }

.ez-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: var(--weiss);
  border-radius: 50%;
  animation: ez-drehen 1s linear infinite;
}
@keyframes ez-drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ez-spinner { animation: none; }
}

/* ---------- Eingabefelder ---------- */

.ez-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ez-feld > label { font: 500 14px/22px var(--font-body); }
.ez-pflicht { color: var(--blau); font-weight: 600; }
.ez-feld__hinweis { margin: 0; color: var(--text-sekundaer); font: 400 12px/18px var(--font-body); }
.ez-feld__fehler {
  margin: 0; color: var(--fehler); font: 400 12px/18px var(--font-body);
  display: flex; align-items: flex-start; gap: 6px;
}
.ez-feld__fehler:empty { display: none; }
.ez-feld__fehler svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: var(--fehler); margin-top: 1px; }

.ez-input, .ez-select, .ez-textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 16px/24px var(--font-body); color: var(--schwarz);
  background: var(--weiss); border: 1px solid var(--rahmen-input); border-radius: var(--radius-s);
  appearance: none; -webkit-appearance: none;
}
.ez-input::placeholder, .ez-textarea::placeholder { color: var(--placeholder); }
.ez-input:hover, .ez-select:hover, .ez-textarea:hover { border-color: var(--blau); }
.ez-input:focus-visible, .ez-select:focus-visible, .ez-textarea:focus-visible {
  border-color: var(--blau); outline: 2px solid var(--blau); outline-offset: 2px;
}
.ez-input[aria-invalid="true"], .ez-select[aria-invalid="true"], .ez-textarea[aria-invalid="true"] { border-color: var(--fehler); }
.ez-input[readonly] { background: var(--grau); color: var(--text-sekundaer); }
.ez-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230f618a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px;
}
.ez-textarea { min-height: 160px; resize: vertical; }

.ez-zeile { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ez-zeile > .ez-feld { flex: 1 1 260px; }
.ez-zeile > .ez-feld--schmal { flex: 1 1 120px; }
.ez-zeile > .ez-feld--breit { flex: 3 1 260px; }
/* Einzelnes Feld in einer Zeile bleibt halb breit (Raster), außer „volle Breite“ oder breite Felder */
@media (min-width: 600px) {
  .ez-zeile:not(.ez-zeile--voll) > .ez-feld:only-child:not(.ez-feld--breit) { flex: 0 1 calc(50% - var(--space-2) / 2); }
}
.ez-zeile--voll > .ez-feld { flex: 1 1 100%; }

/* Checkbox / Mehrfachauswahl */
.ez-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ez-fieldset > legend { font: 500 14px/22px var(--font-body); padding: 0; margin-bottom: 6px; }
.ez-checkreihe { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.ez-check {
  display: inline-flex; align-items: flex-start; gap: 10px;
  min-height: 44px; padding: 7px 0; cursor: pointer;
  font: 400 16px/26px var(--font-body);
}
.ez-check input[type="checkbox"] {
  width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 22px;
  accent-color: var(--blau);
}
.ez-check input:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Auswahl-Boxen (Mehrfachauswahl) */
.ez-optionen { display: flex; flex-wrap: wrap; gap: 10px; }
.ez-option { position: relative; display: inline-flex; cursor: pointer; }
.ez-option__eingabe { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ez-option__box {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px;
  background: var(--weiss); border: 1px solid var(--rahmen-input); border-radius: var(--radius-s);
  font: 500 16px/24px var(--font-body); color: var(--schwarz); user-select: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ez-option__box svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; display: none; }
.ez-option:hover .ez-option__box { border-color: var(--blau); background: var(--hellblau-20); }
.ez-option__eingabe:checked + .ez-option__box { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.ez-option__eingabe:checked + .ez-option__box svg { display: inline; }
.ez-option__eingabe:focus-visible + .ez-option__box { outline: 2px solid var(--blau); outline-offset: 2px; }
.ez-fieldset[aria-describedby] .ez-option__box { border-color: var(--fehler); }
@media (max-width: 599px) { .ez-option { flex: 1 1 calc(50% - 5px); } .ez-option__box { width: 100%; justify-content: center; } }

/* ---------- Badge ---------- */

.ez-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-voll);
  font: 600 11px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--schwarz); white-space: nowrap;
}
.ez-badge--pflicht  { background: var(--blau); color: var(--weiss); }
.ez-badge--optional { background: var(--hellblau); }
.ez-badge--frei     { background: var(--gruen); }

/* ---------- Dokumente hochladen – Upload-Liste Variante A ---------- */

/* Gruppe: grauer Kopf, darunter Zeilen in gemeinsamem 1-px-Rahmen */
.ez-gruppe        { display: flex; flex-direction: column; }
.ez-gruppe__kopf  { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
                    padding: 12px 16px; background: var(--grau); border: 1px solid var(--rahmen); border-radius: 0; }
.ez-gruppe__titel { margin: 0; font: 700 16px/22px var(--font-display); color: var(--schwarz); }
.ez-gruppe__stand { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
                    font: 400 14px/22px var(--font-body); color: var(--text-sekundaer); }
.ez-gruppe__stand svg { width: 18px; height: 18px; stroke: var(--blau); }
.ez-gruppe__liste { display: flex; flex-direction: column; padding: 0 16px;
                    background: var(--weiss); border: 1px solid var(--rahmen); border-top: 0; }

/* Zeile */
.ez-doc           { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px;
                    padding: 20px 0; border-top: 1px solid var(--rahmen); }
.ez-doc:first-child { border-top: 0; }
.ez-doc__icon     { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
                    background: var(--grau); border: 1px solid var(--rahmen); border-radius: var(--radius-s); }
.ez-doc__icon svg { width: 22px; height: 22px; stroke: var(--blau); fill: none; stroke-width: 2; }
.ez-doc__text     { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ez-doc__titel    { margin: 0; font: 700 16px/22px var(--font-display); }
.ez-doc__titel label { cursor: pointer; }
.ez-doc__hinweis  { margin: 0; font: 400 14px/22px var(--font-body); color: var(--text-sekundaer); }
.ez-doc__dateien  { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ez-doc__dateien:empty { display: none; }
.ez-doc__fehler   { margin: 4px 0 0; font: 400 12px/18px var(--font-body); color: var(--fehler); }
.ez-doc__status   { flex: 0 0 150px; display: flex; align-items: center; gap: 6px; min-height: 44px;
                    font: 400 14px/22px var(--font-body); color: var(--text-sekundaer); }
.ez-doc__status > svg { width: 18px; height: 18px; stroke: var(--text-sekundaer); fill: none; stroke-width: 2; }
.ez-doc__status .ez-badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3; }
.ez-doc__aktion   { flex: 0 0 216px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ez-doc__aktion .ez-button { cursor: pointer; width: 100%; justify-content: center; }

/* Datei-Chip */
.ez-datei         { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 8px 12px;
                    background: var(--grau); border: 1px solid var(--rahmen); border-radius: var(--radius-s);
                    font: 400 14px/22px var(--font-body); }
.ez-datei > svg   { width: 20px; height: 20px; flex: 0 0 20px; stroke: var(--blau); fill: none; stroke-width: 2; }
.ez-datei__name   { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-datei__meta   { color: var(--text-sekundaer); white-space: nowrap; }
.ez-datei__entfernen { margin: -8px -8px -8px auto; flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
                    border: 0; background: transparent; border-radius: var(--radius-s); color: var(--blau); cursor: pointer; }
.ez-datei__entfernen svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.ez-datei__entfernen:hover         { background: var(--weiss); }
.ez-datei__entfernen:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Zustände */
.ez-doc[data-state="fehler"] .ez-doc__icon { border-color: var(--fehler); }
.ez-doc[data-dragover="true"] { background: #eef4fa; outline: 2px dashed var(--blau); outline-offset: -2px; }

/* Fokus: Input ist unsichtbar, Ring sitzt auf dem sichtbaren Button */
.ez-doc__aktion:focus-within .ez-button { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Responsiv: Status + Button brechen um; schmal alles untereinander, Button volle Breite */
@media (max-width: 759px) {
  .ez-doc__aktion { margin-left: auto; }
}
/* Knopf auch bei erreichtem Limit: Spalte bleibt stehen, damit alle Knöpfe bündig sind */
.ez-doc__aktion [data-button][hidden] { display: none !important; }
@media (max-width: 479px) {
  .ez-doc__status { flex-basis: 100%; }
  .ez-doc__aktion { width: 100%; flex-basis: 100%; margin-left: 0; align-items: stretch; }
  .ez-doc__aktion .ez-button { width: 100%; }
}

/* Info-Kachel (z. B. unter den Dokumentgruppen) */
.ez-kachel-info {
  background: var(--dunkelgrau); border-radius: var(--radius-s); padding: 20px 24px;
  display: flex; flex-direction: column; gap: 8px; color: var(--weiss);
}
.ez-kachel-info .ez-kachel-info__titel { font: 700 16px/22px var(--font-display); margin: 0; color: var(--weiss); }
.ez-kachel-info p { margin: 0; font: 400 15px/24px var(--font-body); color: var(--weiss); }
.ez-kachel-info ol { margin: 0; padding-left: 20px; font: 400 15px/24px var(--font-body); }
.ez-kachel-info a:not(.ez-button) { color: var(--weiss); }
.ez-kachel-info a:not(.ez-button):focus-visible, .ez-kachel-info .ez-button:focus-visible { outline: 2px solid var(--weiss); outline-offset: 2px; }
.ez-kachel-info .ez-download .ez-button { background: var(--weiss); border-color: var(--weiss); color: var(--blau); }
.ez-kachel-info .ez-download .ez-button:hover { background: var(--hellblau-20); }

.ez-download { margin: 4px 0 0; }
.ez-download .ez-button { background: var(--weiss); text-transform: none; letter-spacing: 0; font: 600 14px/20px var(--font-body); }
.ez-download .ez-button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.ez-kachel-info a:not(.ez-button), .ez-textblock a:not(.ez-button) { color: inherit; text-decoration: underline; font-weight: 600; }

/* Textblock (konfigurierbar) */
.ez-textblock { background: var(--hellblau); border-radius: var(--radius-s); padding: 20px; }
.ez-textblock__titel { font: 700 16px/22px var(--font-display); margin: 0 0 8px; }
.ez-textblock p { margin: 0 0 8px; font: 400 14px/22px var(--font-body); }
.ez-textblock p:last-child { margin-bottom: 0; }
.ez-textblock ol { margin: 0; padding-left: 20px; font: 400 14px/22px var(--font-body); }

/* ---------- Fehlerzusammenfassung ---------- */

.ez-fehlerliste { margin: 0; padding-left: 20px; }
.ez-fehlerliste li { font: 400 14px/22px var(--font-body); }

/* ---------- Dialog ---------- */

.ez-dialog {
  border: 0; padding: 0; max-width: min(560px, calc(100vw - 32px));
  background: var(--weiss); box-shadow: var(--schatten-box); border-radius: var(--radius-0);
}
.ez-dialog::backdrop { background: rgba(0,0,0,.45); }
.ez-dialog__inhalt { padding: var(--space-3); display: flex; flex-direction: column; gap: 16px; }
.ez-dialog__buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Adressblock ---------- */

.ez-vorschlaege {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  margin: 0; padding: 4px 0; list-style: none;
  background: var(--weiss); border: 1px solid var(--rahmen-input); border-radius: var(--radius-s); box-shadow: var(--schatten-box);
  max-height: 260px; overflow-y: auto;
}
.ez-vorschlaege:empty, .ez-vorschlaege[hidden] { display: none; }
.ez-vorschlaege li { padding: 10px 14px; cursor: pointer; font: 400 16px/24px var(--font-body); }
.ez-vorschlaege li[aria-selected="true"], .ez-vorschlaege li:hover { background: var(--hellblau-20); }
.ez-vorschlaege li small { display: block; color: var(--text-sekundaer); font-size: 12px; line-height: 18px; }
.ez-feld--vorschlaege { position: relative; }

.ez-adresse-status {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius-s);
  font: 400 14px/22px var(--font-body);
}
.ez-adresse-status[hidden] { display: none; }
.ez-adresse-status--ok { background: var(--hellblau-20); border: 1px solid var(--hellblau); }
.ez-adresse-status--warnung { background: var(--weiss); border: 1px solid var(--fehler); }
.ez-adresse-status svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 2; }

.ez-bestaetigung { border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: 8px 14px; }
.ez-bestaetigung[hidden] { display: none; }

/* ---------- Seitenleiste ---------- */

.ez-schritte { margin: 0; padding-left: 20px; font: 400 14px/22px var(--font-body); display: flex; flex-direction: column; gap: 6px; }
.ez-tipps { margin: 0; padding-left: 20px; font: 400 14px/22px var(--font-body); display: flex; flex-direction: column; gap: 6px; }
.ez-kontaktzeilen { margin: 0; font: 400 14px/22px var(--font-body); display: flex; flex-direction: column; gap: 4px; }
.ez-kontaktzeilen strong { font-weight: 600; }

/* Honeypot */
.ez-website-feld { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* Adressblock: Zeilen untereinander mit Abstand */
.ez-adressblock { display: flex; flex-direction: column; gap: var(--space-2); }