/* ============================================================
   BLOCK: kontakt — Block-Stylesheet
   1:1 aus dem Entwurf css/redesign.css (Abschnitt 11 (ohne die Kontakt-Rail, die global in base.css liegt)).
   Wird über block.json ("style") nur geladen, wenn der Block
   auf der Seite vorkommt. Tokens und Utilities kommen aus
   assets/css/base.css.
   ============================================================ */

/* ------------------------------------------------------------
   11. BLOCK: kontakt  (+ Formular)
   ------------------------------------------------------------ */
.kontakt__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.8rem, 7vw, 8rem);
  align-items: start;
}

.kontakt__aside > p { max-width: 50ch; margin-bottom: 1.8rem; }

/* Ansprechpartner-Karte: Bild + Name + Rolle + Draht in einer
   kompakten, hairline-gefassten Geste */
.kontakt__person {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding-block: 1.3rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.kontakt__person-img {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}
.kontakt__person-name {
  font-family: var(--font-head);
  font-weight: 540;
  font-size: 1.25rem;
  line-height: 1.2;
}
.kontakt__person-role {
  font-size: .86rem;
  color: var(--muted);
  margin-bottom: .55rem;
}


/* Kontaktkanäle in der Ansprechpartner-Karte: gleiche runde Geste,
   eine Nummer kleiner (Platzhalter, bis Daten vorliegen) */
.kontakt__channels {
  display: flex;
  gap: .6rem;
  margin-top: .85rem;
}
.kontakt__channel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kontor);
  border: 1px solid var(--hairline);
  color: var(--tiefgruen);
}
.kontakt__channel svg { width: 17px; height: 17px; }

@media (max-width: 960px) {
  .kontakt__inner { grid-template-columns: 1fr; }
  .kontakt__person { max-width: 560px; }
}

/* --- Formular: Underline-Felder auf weißem Panel ------------------- */

.kontakt__form-col {
  background: var(--kontor);
  border: 1px solid var(--hairline);
  padding: clamp(1.6rem, 3vw, 2.75rem);
}

.form { max-width: 620px; }

/* Fortschritt */
.form__progress {
  display: none;
  align-items: center;
  gap: .7rem;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}
.form--multistep .form__progress { display: flex; }

.form__chip {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--feldrand);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  cursor: default;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .12s ease-out;
}
/* Unsichtbare Hit-Area auf 46px (Audit M10, Touch-Target ≥44px) */
.form__chip::after {
  content: "";
  position: absolute;
  inset: -6px;
}
.form__chip.is-done:active { transform: scale(.94); }
.form__chip.is-active {
  background: var(--tiefgruen);
  border-color: var(--tiefgruen);
  color: var(--papier);
}
.form__chip.is-done {
  border-color: var(--tiefgruen);
  color: var(--tiefgruen);
  cursor: pointer;
}
.form__bar {
  flex: 1;
  height: 1px;
  background: var(--hairline);
  position: relative;
}
.form__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tiefgruen);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}
.form__bar.is-done::after { transform: scaleX(1); }

/* Schritte: ohne JS alle sichtbar (Fallback). Mit JS kollabieren
   inaktive Schritte über grid-template-rows 0fr→1fr (Audit M8) —
   der Höhenübergang läuft ohne JS-Messung und ohne height-Animation.
   .form__step-inner ist der overflow-Träger, den der 0fr-Trick braucht. */
.form--multistep .form__step {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .5s var(--ease), visibility 0s .5s;
}
.form--multistep .form__step-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.form--multistep .form__step.is-active {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .5s var(--ease), visibility 0s;
}
.form--multistep .form__step.is-active .form__step-inner {
  opacity: 1;
  transition: opacity .4s var(--ease) .15s;
}
@media (prefers-reduced-motion: reduce) {
  .form--multistep .form__step,
  .form--multistep .form__step-inner,
  .form--multistep .form__step.is-active,
  .form--multistep .form__step.is-active .form__step-inner { transition: none; }
}

.form__legend {
  font-family: var(--font-head);
  font-weight: 540;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.2;
  margin-bottom: 1.7rem;
}
.form__legend:focus-visible { outline: none; }
.form__step-num {
  display: inline-block;
  min-width: 1.6em;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  vertical-align: .35em;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1.8rem;
}
.form__field--wide { grid-column: 1 / -1; }

.form__field label {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.req { color: var(--forst); }

.form__field input[type="text"],
.form__field input[type="email"],
.form__field input[type="tel"],
.form__field textarea {
  width: 100%;
  padding: .6rem 0;
  border: 0;
  border-bottom: 1px solid var(--feldrand);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--tinte);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form__field textarea { resize: vertical; min-height: 96px; }
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--muted); opacity: 1; }

.form__field input:focus-visible,
.form__field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--forst);
  box-shadow: 0 1px 0 0 var(--forst);
}
.form__field input.is-invalid,
.form__field textarea.is-invalid {
  border-bottom-color: var(--fehler);
  box-shadow: 0 1px 0 0 var(--fehler);
}

.form__hint {
  font-size: .84rem;
  color: var(--muted);
  margin-top: .45rem;
}
.form__hint--error { color: var(--fehler); }

/* Weiche: zwei gleichwertige Optionen als ruhige Rahmen */
.form__switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.form__switch-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.15rem 1rem;
  border: 1px solid var(--feldrand);
  text-align: center;
  font-size: .95rem;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .form__switch-option:hover { border-color: var(--tinte); }
}
.form__switch-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form__switch-option:has(input:checked) {
  background: var(--tiefgruen);
  border-color: var(--tiefgruen);
  color: var(--papier);
}
.form__switch-option:has(input:focus-visible) {
  /* Ring nach innen: der Step-Inner clippt an seiner Box (0fr-Technik),
     ein außenliegender Ring würde an den Rändern beschnitten */
  outline: 2px solid var(--focus-ring);
  outline-offset: -4px;
}
.form__switch-option:active { transform: scale(.98); }
.form__switch-option { transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), transform .12s ease-out; }
.form__switch-option:has(input.is-invalid) { border-color: var(--fehler); }

/* Makler-Felder nur im Makler-Pfad */
.form__field--broker { display: none; }
.form[data-role="broker"] .form__field--broker { display: block; }

/* Checkboxen */
.form__check {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  font-size: .95rem;
  cursor: pointer;
}
.form__check input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: .28em;
  accent-color: var(--tiefgruen);
}
.form__check a { color: var(--forst); }

/* Upload */
.form__file {
  display: block;
  padding: 1.6rem 1.2rem;
  border: 1px dashed var(--feldrand);
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.form__file:hover,
.form__file.is-dropping { border-color: var(--forst); background: rgba(42, 103, 53, .05); }
.form__file:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.form__file.has-files { border-style: solid; border-color: var(--tiefgruen); color: var(--tinte); }
.form__file input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.form__file-hint { color: var(--muted); text-transform: none; letter-spacing: 0; }
.form__file-hint[data-broker] { display: none; }
.form[data-role="broker"] .form__file-hint[data-broker] { display: inline; }
.form[data-role="broker"] .form__file-hint[data-owner] { display: none; }

/* Sammel-Fehlerzeile */
.form__error {
  margin-top: 1.4rem;
  color: var(--fehler);
  font-size: .95rem;
}

/* Navigation */
.form__nav {
  display: flex;
  gap: 1rem;
  margin-top: 2.2rem;
}
.form__next, .form__submit { margin-left: auto; }

.form__note {
  font-size: .84rem;
  color: var(--muted);
  margin-top: 1.1rem;
}

/* Erfolg */
.form.is-sent > *:not(.form__success) { display: none; }
.form__success { padding-block: 1rem; }
.form__success:focus-visible { outline: none; }
.form__success-title {
  font-family: var(--font-head);
  font-weight: 540;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: .8rem;
}

/* Redact-Signatur (Audit M5): Diskretion wörtlich — die Schwärzung
   füllt sich beim Erscheinen von links */
.redact {
  background-image: linear-gradient(var(--tresor), var(--tresor));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--papier);
  padding: .06em .3em;
}
@media (prefers-reduced-motion: no-preference) {
  .form__success:not([hidden]) .redact {
    animation: redact-fill .9s var(--ease) .25s backwards,
               redact-ink .9s step-end .25s backwards;
  }
  @keyframes redact-fill {
    from { background-size: 0% 100%; }
    to   { background-size: 100% 100%; }
  }
  /* Text bleibt Tinte, bis der Balken über ihm liegt */
  @keyframes redact-ink {
    0%, 55% { color: var(--tinte); }
    100%    { color: var(--papier); }
  }
}

@media (max-width: 560px) {
  .form__grid { grid-template-columns: 1fr; }
  .form__switch { grid-template-columns: 1fr; }
  .form__nav { flex-wrap: wrap; }
}


/* ============================================================
   WPFORMS-OPTIK
   Überträgt die Formular-Gestaltung des Entwurfs auf das Markup
   von WPForms. Grundlage: WPForms steht unter Einstellungen auf
   „No styling" (disable-css = 3) und liefert nur ein minimales
   Reset — die gesamte Optik kommt von hier.

   Die Zuordnung Entwurf -> WPForms:
     .form                  -> .wpforms-form
     .form__field label     -> .wpforms-field-label / legend
     .req                   -> .wpforms-required-label
     .form__hint            -> .wpforms-field-description
     .form__hint--error     -> .wpforms-error
     .form__switch          -> .sh-role (Feld-CSS-Klasse)
     .form__check           -> .sh-single-check (Feld-CSS-Klasse)
     .form__grid            -> Raster auf .wpforms-field-container
     .form__submit          -> .wpforms-submit
     .form__success         -> .wpforms-confirmation-container
     .form__progress        -> .wpforms-page-indicator (nur mit Pro)
     .form__nav             -> .wpforms-page-button (nur mit Pro)
   ============================================================ */

/* --- Rahmen: WPForms bringt eigene Breiten mit, die hier weg müssen --- */
.kontakt__form-col .wpforms-container,
.kontakt__form-col .wpforms-container-full {
  margin: 0;
  max-width: 620px;
}
.kontakt__form-col .wpforms-form { max-width: 620px; }

/* Der No-JS-Hinweis von WPForms in der Tonlage der Seite */
.kontakt__form-col .wpforms-error-noscript {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--fehler);
  font-size: .95rem;
}

/* --- Feldraster: wie .form__grid im Entwurf ------------------------- */
.kontakt__form-col .wpforms-field-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1.8rem;
}
/* Standard ist volle Breite; nur .sh-half nimmt eine Spalte. */
.kontakt__form-col .wpforms-field { grid-column: 1 / -1; }
.kontakt__form-col .wpforms-field.sh-half { grid-column: span 1; }

/* WPForms setzt bei Auswahlfeldern eigene Spaltenklassen — die
   Rasterlogik liegt hier, nicht dort. */
.kontakt__form-col .wpforms-list-2-columns,
.kontakt__form-col .wpforms-list-3-columns,
.kontakt__form-col .wpforms-list-inline { display: block; }

/* fieldset/legend tragen keine eigene Optik */
.kontakt__form-col .wpforms-field fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.kontakt__form-col .wpforms-field ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Beschriftungen: kleine gesperrte Versalzeile ------------------- */
.kontakt__form-col .wpforms-field-label {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-bottom: .35rem;
  padding: 0;
  line-height: 1.4;
}
.kontakt__form-col .wpforms-required-label {
  color: var(--forst);
  border: 0;
}

/* --- Eingabefelder: Unterstrich statt Kasten ----------------------- */
.kontakt__form-col .wpforms-field input[type="text"],
.kontakt__form-col .wpforms-field input[type="email"],
.kontakt__form-col .wpforms-field input[type="tel"],
.kontakt__form-col .wpforms-field input[type="url"],
.kontakt__form-col .wpforms-field input[type="number"],
.kontakt__form-col .wpforms-field input[type="password"],
.kontakt__form-col .wpforms-field select,
.kontakt__form-col .wpforms-field textarea {
  width: 100%;
  max-width: none;
  padding: .6rem 0;
  border: 0;
  /* --feldrand, nicht --hairline: Ränder bedienbarer Elemente brauchen
     3:1 Kontrast (WCAG 1.4.11). --hairline erreicht gegen Weiß nur 1,3:1. */
  border-bottom: 1px solid var(--feldrand);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--tinte);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.kontakt__form-col .wpforms-field textarea {
  resize: vertical;
  min-height: 96px;
}
.kontakt__form-col .wpforms-field input::placeholder,
.kontakt__form-col .wpforms-field textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.kontakt__form-col .wpforms-field input:focus-visible,
.kontakt__form-col .wpforms-field select:focus-visible,
.kontakt__form-col .wpforms-field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--forst);
  box-shadow: 0 1px 0 0 var(--forst);
}

/* --- Hinweistexte und Fehler --------------------------------------- */
.kontakt__form-col .wpforms-field-description {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: .45rem;
}
/* Fehler stehen PRO FELD, nicht nur als Sammelzeile. */
.kontakt__form-col .wpforms-field label.wpforms-error,
.kontakt__form-col .wpforms-field em.wpforms-error,
.kontakt__form-col .wpforms-field .wpforms-error-container {
  display: block;
  margin-top: .45rem;
  font-size: .84rem;
  font-style: normal;
  color: var(--fehler);
}
/* Der Fehlerzustand muss den Fokusring überschreiben — sonst bekommt das
   Feld, auf das die Prüfung springt, einen grünen (= gültig wirkenden) Rand. */
.kontakt__form-col .wpforms-field input.wpforms-error,
.kontakt__form-col .wpforms-field textarea.wpforms-error,
.kontakt__form-col .wpforms-field select.wpforms-error,
.kontakt__form-col .wpforms-field input.wpforms-error:focus-visible,
.kontakt__form-col .wpforms-field textarea.wpforms-error:focus-visible {
  border-bottom-color: var(--fehler);
  box-shadow: 0 1px 0 0 var(--fehler);
}
.kontakt__form-col .wpforms-error-container,
.kontakt__form-col .wpforms-error-container-full {
  margin-bottom: 1.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fehler);
  font-size: .95rem;
}

/* --- Rollen-Weiche: zwei gleichwertige Flächen (.sh-role) ---------- */
.kontakt__form-col .sh-role ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.kontakt__form-col .sh-role li {
  position: relative;
  margin: 0;
}
.kontakt__form-col .sh-role input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.kontakt__form-col .sh-role label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 1.15rem 1rem;
  border: 1px solid var(--feldrand);
  text-align: center;
  font-family: var(--font-body);
  /* Gleiche Typografie wie die Feldbeschriftungen: im Entwurf ist die
     Rollen-Option ein <label> innerhalb von .form__field und erbt deren
     Versalien-Zeile. Nachgemessen: 11,52px / 1,4976px Sperrung / 500. */
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte);
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), transform .12s ease-out;
}
.kontakt__form-col .sh-role li:has(input:checked) label {
  background: var(--tiefgruen);
  border-color: var(--tiefgruen);
  color: var(--papier);
}
/* Ring nach innen: bei aktiviertem Multistep clippt der Schritt an seiner
   Box, ein außen liegender Ring würde an den Rändern beschnitten. */
.kontakt__form-col .sh-role li:has(input:focus-visible) label {
  outline: 2px solid var(--focus-ring);
  outline-offset: -4px;
}
.kontakt__form-col .sh-role label:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .kontakt__form-col .sh-role li:not(:has(input:checked)) label:hover {
    border-color: var(--tinte);
  }
}

/* --- Einzelne Checkbox mit langem Text (.sh-single-check) ---------- */
/* Die Legende bleibt für Screenreader erhalten, verschwindet aber optisch:
   im Entwurf steht über diesen Kästchen keine Zeile, der Text sitzt daneben. */
.kontakt__form-col .sh-single-check > fieldset > legend.wpforms-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.kontakt__form-col .sh-single-check li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin: 0;
  font-size: .95rem;
  /* Keine eigene Zeilenhöhe: der Entwurf nutzt hier den geerbten Wert der
     Seite. Ein eigener Wert lässt mehrzeilige Kästchentexte anders hoch
     ausfallen als im Entwurf. */
}
.kontakt__form-col .sh-single-check input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  /* Nur oben setzen. Der Entwurf lässt die seitlichen Browser-Standardränder
     des Kästchens bewusst stehen — sie zu nullen macht die Textspalte 7px
     breiter, und der Text bricht dann anders um als im Entwurf. */
  margin-top: .28em;
  accent-color: var(--tiefgruen);
}
.kontakt__form-col .sh-single-check label {
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinte);
  cursor: pointer;
}
.kontakt__form-col .sh-single-check label a {
  color: var(--forst);
  text-decoration: underline;
  text-underline-offset: .2em;
}
/* Pflichtstern hinter den Text, weil die Legende mit dem Stern versteckt ist */
.kontakt__form-col .sh-single-check ul.wpforms-field-required li label::after {
  content: " *";
  color: var(--forst);
}

/* --- Absenden ------------------------------------------------------- */
.kontakt__form-col .wpforms-submit-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  padding: 0;
}
.kontakt__form-col button.wpforms-submit {
  /* Anatomie von .r-btn: rechteckig, Tiefgrün, Versalien */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1.05rem 1.6rem;
  border: 1px solid var(--tiefgruen);
  border-radius: 0;
  background: var(--tiefgruen);
  color: var(--papier);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .12s ease-out;
}
.kontakt__form-col button.wpforms-submit::after {
  content: "\2192"; /* Pfeil wie bei den Vorwärts-Aktionen der Seite */
  font-size: 1.1em;
  line-height: 1;
}
.kontakt__form-col button.wpforms-submit:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .kontakt__form-col button.wpforms-submit:hover {
    background: var(--tresor);
    border-color: var(--tresor);
  }
}
.kontakt__form-col button.wpforms-submit:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.kontakt__form-col .wpforms-submit-spinner { margin-left: .2rem; }

/* Hinweiszeile unter dem Button (kommt aus dem Block-Template) */
.kontakt__form-col .kontakt__form-note {
  font-size: .84rem;
  color: var(--muted);
  margin-top: 1.1rem;
}

/* --- Bestätigung: trägt die Schwärzungs-Signatur ------------------- */
.kontakt__form-col .wpforms-confirmation-container,
.kontakt__form-col .wpforms-confirmation-container-full {
  margin: 0;
  padding: 1rem 0;
  border: 0;
  background: none;
  color: var(--tinte);
}
.kontakt__form-col .wpforms-confirmation-container p { margin-bottom: .8rem; }
.kontakt__form-col .wpforms-confirmation-container p:last-child { margin-bottom: 0; }
.kontakt__form-col .sh-success-title {
  font-family: var(--font-head);
  font-weight: 540;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  margin-bottom: .8rem;
}

/* ============================================================
   MULTISTEP (WPForms Pro)
   Seitenumbrüche, Fortschritt und Weiter/Zurück gibt es erst mit
   WPForms Pro — die Funktion wpforms_get_pagebreak_details()
   steigt in der freien Version sofort aus.

   Die Optik steht hier schon vollständig: sobald Pro aktiv ist und
   die Seitenumbrüche im Formular angelegt sind, sitzt der
   Fortschritt ohne weitere Arbeit richtig.
   ============================================================ */

/* Fortschritt: vier Kreise mit Verbindungslinie (wie .form__progress) */
.kontakt__form-col .wpforms-page-indicator {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
  padding: 0;
  background: none;
  border: 0;
}
.kontakt__form-col .wpforms-page-indicator-page {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: 1;
}
.kontakt__form-col .wpforms-page-indicator-page:last-child { flex: none; }

.kontakt__form-col .wpforms-page-indicator-page-number {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--feldrand);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
/* Unsichtbare Trefferfläche auf 46px — Touch-Ziele brauchen mindestens 44px. */
.kontakt__form-col .wpforms-page-indicator-page-number::after {
  content: "";
  position: absolute;
  inset: -6px;
}
.kontakt__form-col .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
  background: var(--tiefgruen);
  border-color: var(--tiefgruen);
  color: var(--papier);
}
.kontakt__form-col .wpforms-page-indicator-page.done .wpforms-page-indicator-page-number {
  border-color: var(--tiefgruen);
  color: var(--tiefgruen);
  cursor: pointer;
}

/* Verbindungslinie zwischen den Kreisen (wie .form__bar) */
.kontakt__form-col .wpforms-page-indicator-connector,
.kontakt__form-col .wpforms-page-indicator-page-triangle {
  position: relative;
  flex: 1;
  height: 1px;
  border: 0;
  background: var(--hairline);
}
.kontakt__form-col .wpforms-page-indicator-connector::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tiefgruen);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}
.kontakt__form-col .wpforms-page-indicator-page.done .wpforms-page-indicator-connector::after {
  transform: scaleX(1);
}

/* Seitentitel neben dem Fortschritt (Grotesk, wie .form__legend) */
.kontakt__form-col .wpforms-page-indicator-page-title {
  font-family: var(--font-head);
  font-weight: 540;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.2;
  color: var(--tinte);
}

/* Fortschrittsbalken-Variante, falls im Formular so eingestellt */
.kontakt__form-col .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
  height: 1px;
  background: var(--hairline);
  border-radius: 0;
}
.kontakt__form-col .wpforms-page-indicator-page-progress {
  height: 1px;
  background: var(--tiefgruen);
  border-radius: 0;
}

/* Weiter / Zurück (wie .form__nav) */
.kontakt__form-col .wpforms-pagebreak-buttons,
.kontakt__form-col .wpforms-page-button-group {
  display: flex;
  gap: 1rem;
  margin-top: 2.2rem;
}
.kontakt__form-col button.wpforms-page-next,
.kontakt__form-col button.wpforms-page-prev {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1.05rem 1.6rem;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .12s ease-out;
}
/* Weiter ist die Vorwärts-Aktion: gefüllt, mit Pfeil. */
.kontakt__form-col button.wpforms-page-next {
  margin-left: auto;
  border: 1px solid var(--tiefgruen);
  background: var(--tiefgruen);
  color: var(--papier);
}
.kontakt__form-col button.wpforms-page-next::after {
  content: "\2192";
  font-size: 1.1em;
  line-height: 1;
}
/* Zurück ist eine Rückwärts-Aktion: leise, ohne Pfeil. */
.kontakt__form-col button.wpforms-page-prev {
  border: 1px solid var(--tinte);
  background: transparent;
  color: var(--tinte);
}
.kontakt__form-col button.wpforms-page-next:active,
.kontakt__form-col button.wpforms-page-prev:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .kontakt__form-col button.wpforms-page-next:hover {
    background: var(--tresor);
    border-color: var(--tresor);
  }
  .kontakt__form-col button.wpforms-page-prev:hover {
    background: var(--tinte);
    color: var(--papier);
  }
}
.kontakt__form-col button.wpforms-page-next:focus-visible,
.kontakt__form-col button.wpforms-page-prev:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* --- Datei-Upload (WPForms Pro): gestrichelte Ablagefläche --------- */
.kontakt__form-col .wpforms-field-file-upload .dz-message,
.kontakt__form-col .wpforms-uploader {
  padding: 1.6rem 1.2rem;
  border: 1px dashed var(--feldrand);
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.kontakt__form-col .wpforms-uploader:hover,
.kontakt__form-col .wpforms-uploader.dz-drag-hover {
  border-color: var(--forst);
  background: color-mix(in srgb, var(--forst) 5%, transparent);
}
.kontakt__form-col .wpforms-uploader:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* --- Schmale Viewports --------------------------------------------- */
@media (max-width: 560px) {
  .kontakt__form-col .wpforms-field-container { grid-template-columns: 1fr; }
  .kontakt__form-col .wpforms-field.sh-half { grid-column: 1 / -1; }
  .kontakt__form-col .sh-role ul { grid-template-columns: 1fr; }
  .kontakt__form-col .wpforms-pagebreak-buttons,
  .kontakt__form-col .wpforms-page-button-group { flex-wrap: wrap; }
}

/* --- Windows-Kontrastmodus ----------------------------------------- */
/* Die Rollen-Weiche und die Fortschritts-Kreise zeigen ihren Zustand über
   Hintergrundfarben. Im Kontrastmodus werden Flächen plattgemacht — ohne
   diesen Block wählt man die Rolle blind. */
@media (forced-colors: active) {
  .kontakt__form-col .sh-role li:has(input:checked) label {
    background: Highlight;
    color: HighlightText;
    outline: 2px solid CanvasText;
    outline-offset: -4px;
  }
  .kontakt__form-col .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
    background: Highlight;
    color: HighlightText;
    border-color: CanvasText;
  }
  .kontakt__form-col .wpforms-page-indicator-page.done .wpforms-page-indicator-page-number {
    border-color: CanvasText;
  }
}

/* ============================================================
   MULTISTEP — eigene Umsetzung, ohne WPForms Pro

   WPForms sperrt seinen EIGENEN Multistep hinter Pro
   (wpforms_get_pagebreak_details() steigt sonst sofort aus).
   Der Multistep selbst ist aber reines Frontend-Verhalten:
   Felder gruppieren, ein- und ausblenden, pro Schritt prüfen.

   Die Gestaltung dafür steht in dieser Datei bereits weiter
   oben — sie kam beim Aufteilen des Entwurfs mit (Fortschritt
   .form__progress/.form__chip/.form__bar, die 0fr/1fr-Technik
   auf .form__step, .form__legend). Es sind also die Regeln des
   Entwurfs, unverändert; hier fehlen nur die Kleinigkeiten, die
   im Entwurf aus dessen eigenem Formular-Markup kamen.

   Aufgebaut wird die Struktur von view.js: es gruppiert die von
   WPForms gerenderten Felder anhand der Seitenumbrüche des
   Formulars in .form__step-Container, setzt den Fortschritt
   davor und Zurück/Weiter in die Button-Zeile.

   Wird WPForms Pro später aktiv, rendert das Plugin seinen
   eigenen Fortschritt (.wpforms-page-indicator) — view.js
   erkennt das und hält sich dann zurück. Beide Wege sind
   gestaltet, es kollidiert nichts.
   ============================================================ */

/* Weiter rückt nach rechts, Zurück bleibt links. Die Button-Zeile ist
   hier .wpforms-submit-container — sie hat Flex, Gap und Abstand schon,
   es fehlt nur das Ausrücken. */
.kontakt__form-col .form__next { margin-left: auto; }

/* [hidden] muss die display-Angaben der Buttons überstimmen. */
.kontakt__form-col .form__prev[hidden],
.kontakt__form-col .form__next[hidden],
.kontakt__form-col button.wpforms-submit[hidden] {
  display: none !important;
}

/* Makler-Weiche: diese Felder gehören nur in den Makler-Pfad. Ohne JS
   bleiben sie sichtbar — niemand soll ein Feld nicht ausfüllen können,
   nur weil ein Skript fehlt. Das Ausblenden armiert view.js. */
.kontakt__form-col .form--multistep .sh-broker { display: none; }
.kontakt__form-col .form--multistep[data-role="broker"] .sh-broker { display: block; }

/* Jeder Schritt trägt sein eigenes Feldraster: das ursprüngliche
   .wpforms-field-container wird von view.js in die Schritte aufgeteilt,
   die zwei Spalten müssen darin erhalten bleiben. */
.kontakt__form-col .form__step-inner .wpforms-field-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1.8rem;
}

@media (max-width: 560px) {
  .kontakt__form-col .form__step-inner .wpforms-field-container {
    grid-template-columns: 1fr;
  }
}