/* ==========================================================================
   SchadenzentrumNRW — Kontaktseite + Schadenfragebogen
   Wird nach site.css geladen. Nur Klassen mit Praefix .kontakt-…
   (Ausnahme: die global fehlende [hidden]-Absicherung).
   ========================================================================== */

:root {
  --kontakt-danger: #B3261E;
  --kontakt-danger-bg: #FDECEA;
  --kontakt-chip-text: #2A3441;
}

/* `hidden` darf nie von display:grid/flex ueberstimmt werden — der Fragebogen
   blendet Schritte, Ergebnisse und Fehlertexte ausschliesslich darueber aus. */
[hidden] { display: none !important; }

/* --- Hero ---------------------------------------------------------------- */

.kontakt-hero__title { max-width: 18ch; }

/* --- Telefonleiste ------------------------------------------------------- */

.kontakt-callbar {
  background: var(--blue);
  color: #fff;
}

.kontakt-callbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 32px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.kontakt-callbar__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-on-dark);
  flex-basis: 100%;
}

.kontakt-callbar__tel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: #fff;
}

.kontakt-callbar__tel:hover {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 720px) {
  .kontakt-callbar__inner { gap: 16px 48px; }
  .kontakt-callbar__label { flex-basis: auto; }
  .kontakt-callbar__tel { font-size: 30px; }
}

/* --- Layout: Formular + Seitenleiste ------------------------------------- */

.kontakt-main { background: var(--bg); }

.kontakt-layout {
  display: grid;
  gap: 24px;
  align-items: start;
}

@media (min-width: 1024px) {
  .kontakt-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
    gap: 40px;
  }
}

/* --- Formularkarte ------------------------------------------------------- */

.kontakt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.kontakt-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 22px 20px;
  border-bottom: 1px solid var(--line-3);
}

.kontakt-card__title { font-size: 22px; }

.kontakt-card__step { white-space: nowrap; }

.kontakt-progress {
  height: 4px;
  background: var(--line-3);
}

.kontakt-progress__bar {
  height: 4px;
  width: 25%;
  background: var(--blue);
  transition: width 0.3s;
}

.kontakt-card__body { padding: 24px 20px; }

@media (min-width: 720px) {
  .kontakt-card__head { padding: 28px 40px; }
  .kontakt-card__body { padding: 40px; }
}

/* --- Schritte ------------------------------------------------------------ */

.kontakt-step > * + * { margin-top: 26px; }

.kontakt-step__title {
  font-size: 24px;
  font-weight: 700;
}

.kontakt-step__lead {
  font-size: 16px;
  color: var(--text-3);
}

.kontakt-step__title + .kontakt-step__lead { margin-top: 8px; }

@media (min-width: 720px) {
  .kontakt-step__title { font-size: 26px; }
}

/* Ohne JS stehen alle vier Schritte untereinander — dann brauchen sie eine
   sichtbare Trennung. Mit JS ist immer nur einer sichtbar; die Klasse am
   Formular schaltet die Trenner wieder ab. */
.kontakt-step + .kontakt-step {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--line-3);
}

.kontakt-form--js .kontakt-step + .kontakt-step {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* --- Felder -------------------------------------------------------------- */

.kontakt-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.kontakt-legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  padding: 0;
  margin-bottom: 14px;
}

.kontakt-req {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-4);
}

.kontakt-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.kontakt-field__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}

.kontakt-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  /* 16px verhindert den Auto-Zoom von iOS beim Fokus. */
  font-size: 16px;
  line-height: 1.4;
}

.kontakt-input::placeholder { color: #9AA4B0; }

.kontakt-input:hover { border-color: #C2CBD4; }

.kontakt-textarea {
  line-height: 1.5;
  resize: vertical;
}

.kontakt-input[aria-invalid="true"] { border-color: var(--kontakt-danger); }

.kontakt-grid2 {
  display: grid;
  gap: 18px;
}

@media (min-width: 720px) {
  .kontakt-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Fehlermeldungen ----------------------------------------------------- */

.kontakt-error {
  font-size: 14px;
  line-height: 1.5;
  color: var(--kontakt-danger);
  font-weight: 500;
}

.kontakt-error--form {
  background: var(--kontakt-danger-bg);
  border: 1px solid var(--kontakt-danger);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 26px;
}

/* --- Chips als echte Radio-/Checkbox-Felder ------------------------------ */
/* site.css stylt .chip fuer aria-pressed-Buttons; hier die Formularvariante. */

.kontakt-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kontakt-chip {
  position: relative;
  display: inline-flex;
}

.kontakt-chip__input,
.kontakt-tile__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.kontakt-chip__label {
  display: inline-block;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--kontakt-chip-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.kontakt-chip__label:hover { border-color: var(--blue); }

.kontakt-chip__input:checked + .kontakt-chip__label {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.kontakt-chip__input:focus-visible + .kontakt-chip__label {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Fahrzeugtyp: im Entwurf als Versalien gesetzt. Nur die Darstellung ist
   uppercase — der uebertragene Wert bleibt der aus dem Formularvertrag. */
.kontakt-chip--caps .kontakt-chip__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Anliegen-Kacheln (Schritt 1, groessere Ebene) ----------------------- */

.kontakt-tiles {
  display: grid;
  gap: 12px;
}

@media (min-width: 560px) {
  .kontakt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kontakt-tile {
  position: relative;
  display: block;
}

.kontakt-tile__label {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 68px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--kontakt-chip-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.kontakt-tile__label:hover { border-color: var(--blue); }

.kontakt-tile__input:checked + .kontakt-tile__label {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.kontakt-tile__input:focus-visible + .kontakt-tile__label {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Ohne Farbflaechen (Windows-Kontrastmodus) muss die Auswahl trotzdem
   erkennbar bleiben. */
@media (forced-colors: active) {
  .kontakt-chip__input:checked + .kontakt-chip__label,
  .kontakt-tile__input:checked + .kontakt-tile__label {
    outline: 3px solid CanvasText;
    outline-offset: -3px;
  }
}

/* --- Upload -------------------------------------------------------------- */

.kontakt-upload {
  border: 1px dashed var(--line-dashed);
  border-radius: var(--radius);
  background: var(--surface-3);
  padding: 24px 20px;
  text-align: center;
}

.kontakt-upload > * + * { margin-top: 10px; }

.kontakt-upload__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

.kontakt-upload__text {
  font-size: 14px;
  color: var(--text-4);
}

.kontakt-upload__field {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 18px;
}

.kontakt-upload__input {
  font-size: 16px;
  max-width: 100%;
}

.kontakt-upload__limits { line-height: 1.6; }

.kontakt-filelist {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  text-align: left;
}

.kontakt-file {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
}

.kontakt-file__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-2);
}

.kontakt-file__size {
  flex: 0 0 auto;
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: 12px;
}

.kontakt-file__remove {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-3);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
}

.kontakt-file__remove:hover {
  border-color: var(--kontakt-danger);
  color: var(--kontakt-danger);
}

/* --- Datenschutz-Einwilligung -------------------------------------------- */

.kontakt-consent-wrap {
  display: grid;
  gap: 8px;
}

.kontakt-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  padding: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-3);
  cursor: pointer;
}

.kontakt-consent__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--blue);
}

.kontakt-consent[data-invalid="true"] { border-color: var(--kontakt-danger); }

/* --- Navigation im Formular --------------------------------------------- */

.kontakt-formnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-3);
}

.kontakt-formnav__back { order: 1; }

.kontakt-formnav__next {
  order: 2;
  margin-left: auto;
}

/* --- Ergebniszustaende --------------------------------------------------- */

.kontakt-result {
  text-align: center;
  padding: 24px 0 32px;
}

.kontakt-result > * + * { margin-top: 16px; }

.kontakt-result__mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blue-pale);
  color: var(--blue);
  font-size: 30px;
  line-height: 64px;
  margin: 0 auto;
}

.kontakt-result__title {
  font-weight: 800;
  font-size: 26px;
}

.kontakt-result__title:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.kontakt-result__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-3);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

.kontakt-result--error .kontakt-result__title { color: var(--kontakt-danger); }

@media (min-width: 720px) {
  .kontakt-result { padding: 32px 0 40px; }
  .kontakt-result__title { font-size: 30px; }
}

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

.kontakt-aside {
  display: grid;
  gap: 20px;
}

.kontakt-aside__title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 16px;
}

.kontakt-aside__tels {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.kontakt-aside__note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-4);
}

.card--ink .kontakt-aside__note { color: var(--on-ink-3); }

.kontakt-aside__note--small { font-size: 13px; }

.kontakt-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: #4A5563;
}

.kontakt-address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-3);
}

.kontakt-address strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

.kontakt-aside__maplink { margin-top: 14px; }