/* ===========================================================================
 * Hauptstadt-Entsorger — Anfrage (template-anfrage.php)
 *
 * The quote form's own landing page. It runs without the site header and
 * footer on purpose: it is the one page whose only job is to be completed, and
 * a mega menu full of ninety services beside a half-finished form is an exit,
 * not navigation. Everything it does offer is either reassurance or a faster
 * way to reach the same outcome (phone, WhatsApp).
 *
 * This replaces ~500 lines of inline <style> that lived in the template. Same
 * scoping discipline: every rule sits under .anf-* or .anfrage-custom-form, so
 * no other page and no other WPForms form on the site is affected.
 *
 * Requires ui.css for the design tokens — declared as a dependency in
 * functions.php.
 *
 * Contents
 *   1. Shell
 *   2. Header
 *   3. Intro + trust strip
 *   4. Layout
 *   5. Form card
 *   6. WPForms 1600
 *   7. Aside
 *   8. Footer
 *   9. Mobile action bar
 *  10. Responsive
 * ========================================================================= */

/* --------------------------------------------------------------- 1. Shell */
.anf-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: var(--hp-tint);
  font-family: var(--font-body);
  color: var(--hp-ink);
}

.anf-body * { box-sizing: border-box; }

.anf-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* -------------------------------------------------------------- 2. Header
 * A plain white bar, not the floating rounded pill it was. A pill implies
 * something you can dismiss or scroll past; on a form page the header is the
 * only way out and the only place the phone number lives, so it reads better
 * as a fixed piece of furniture. */
.anf-header {
  background-color: #fff;
  border-bottom: 1px solid var(--hp-line);
}

.anf-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.anf-header__logo { display: inline-flex; flex-shrink: 0; }
.anf-header__logo img { height: 46px; width: auto; display: block; }

.anf-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.anf-header__tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--hp-line);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--hp-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.anf-header__tel svg { color: var(--hp-orange); flex-shrink: 0; }

.anf-header__tel:hover {
  border-color: var(--hp-orange);
  color: var(--hp-orange-dark);
}

.anf-header__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background-color: #25D366;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: #06331A;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.anf-header__wa:hover { background-color: #1FBA5A; transform: translateY(-1px); }

/* ------------------------------------------------------ 3. Intro + trust */
.anf-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(28px, 3.2vw, 44px);
}

.anf-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-green);
}

.anf-intro__eyebrow::before,
.anf-intro__eyebrow::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--hp-orange);
}

.anf-intro__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--hp-ink);
  text-wrap: balance;
}

.anf-intro__lede {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--hp-body);
}

.anf-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-top: 22px;
}

.anf-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background-color: #fff;
  border: 1px solid var(--hp-line);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--hp-body);
  text-decoration: none;
}

.anf-trust__item svg { flex-shrink: 0; color: var(--hp-green); }
.anf-trust__item strong { font-family: var(--font-heading); color: var(--hp-ink); }

a.anf-trust__item:hover { border-color: var(--hp-orange); }

.anf-trust__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--hp-orange);
  line-height: 0;
  flex-shrink: 0;
}

/* -------------------------------------------------------------- 4. Layout */
.anf-main {
  flex: 1 0 auto;
  width: 100%;
  padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6vw, 96px);
}

/* The form gets the width; the aside is reassurance, not content. Both start
   at the top rather than centring, so the aside stays beside the first step
   instead of drifting down as the form grows between steps. */
.anf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(24px, 2.6vw, 40px);
  align-items: start;
}

/* ----------------------------------------------------------- 5. Form card */
.anf-card {
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--hp-radius);
  background-color: #fff;
  border: 1px solid var(--hp-line);
  box-shadow: var(--hp-shadow-lg);
}

/* ------------------------------------------------------- 6. WPForms 1600
 * Scoped under .anfrage-custom-form, never by field id, so no other form on
 * the site is touched. !important appears only where WPForms' modern markup
 * uses it on the same property — matching it is the only way to win without
 * escalating specificity further. */
.anfrage-custom-form .wpforms-container { margin: 0; max-width: 100%; }
.anfrage-custom-form div.wpforms-container-full:not(:empty) { margin-bottom: 0 !important; }
.anfrage-custom-form .wpforms-form { margin: 0; }

/* Vertical rhythm set here rather than inherited from WPForms' own per-field
   padding, which is uneven between field types.
   ONLY the top/bottom properties are touched: the half-width columns are laid
   out with a margin-LEFT on .wpforms-one-half, and a `margin` shorthand would
   wipe that out and butt the two halves together. */
.anfrage-custom-form .wpforms-field {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}

/* Many fields on pages 2 and 3 hide their label and rely on the placeholder
   (PLZ, Ort, Vorname …). A hidden label must not still reserve its margin. */
.anfrage-custom-form .wpforms-field-label.wpforms-label-hide { margin: 0 !important; }

.anfrage-custom-form .wpforms-field-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--hp-ink);
  margin: 0 0 8px;
}

.anfrage-custom-form .wpforms-required-label { color: #E23B3B; margin-left: 2px; }

.anfrage-custom-form .wpforms-field-sublabel,
.anfrage-custom-form .wpforms-field-description {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--hp-body);
}

.anfrage-custom-form .wpforms-field-description { margin-top: 6px; }

/* An explicit height rather than vertical padding: WPForms sets its own field
   height, and padding on top of that leaves a <select>'s content box shorter
   than its line box, which clips the chosen option. */
.anfrage-custom-form input[type="text"],
.anfrage-custom-form input[type="email"],
.anfrage-custom-form input[type="tel"],
.anfrage-custom-form input[type="url"],
.anfrage-custom-form input[type="number"],
.anfrage-custom-form input[type="password"],
.anfrage-custom-form input[type="date"],
.anfrage-custom-form select,
.anfrage-custom-form textarea {
  width: 100%;
  font-family: var(--font-body) !important;
  font-size: 16px !important; /* 16px keeps iOS from zooming on focus */
  color: var(--hp-ink) !important;
  background-color: #fff;
  border: 1px solid #DCDCDC !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.anfrage-custom-form input[type="text"],
.anfrage-custom-form input[type="email"],
.anfrage-custom-form input[type="tel"],
.anfrage-custom-form input[type="url"],
.anfrage-custom-form input[type="number"],
.anfrage-custom-form input[type="password"],
.anfrage-custom-form input[type="date"],
.anfrage-custom-form select {
  height: 52px !important;
  padding: 0 18px !important;
  line-height: normal !important;
}

.anfrage-custom-form .wpforms-field-small,
.anfrage-custom-form .wpforms-field-medium,
.anfrage-custom-form .wpforms-field-large { max-width: 100%; }

.anfrage-custom-form ::placeholder { color: #9A9A9A; opacity: 1; }

.anfrage-custom-form textarea {
  height: auto !important;
  min-height: 120px !important;
  padding: 16px 18px !important;
  line-height: 1.6 !important;
  resize: vertical;
}

.anfrage-custom-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2316231B' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px;
}

.anfrage-custom-form input:focus,
.anfrage-custom-form textarea:focus,
.anfrage-custom-form select:focus {
  outline: none;
  border-color: var(--hp-green) !important;
  box-shadow: 0 0 0 3px rgba(39, 108, 3, 0.15) !important;
}

/* ---- Radio groups as segmented buttons ----
 * Every radio field in this form is a two-option yes/no — Keller vorhanden?,
 * Fahrstuhl vorhanden?, Halteverbot nötig? A 16px dot next to a two-letter
 * word is a small target and a lot of empty row; two full-width buttons are
 * easier to hit on a phone and make the chosen answer obvious at a glance.
 *
 * The native input is moved off-screen rather than display:none — hiding it
 * outright takes it out of the tab order and off the accessibility tree, and
 * the label stops being able to announce its state. `input:checked + label`
 * needs no :has(), because WPForms renders the label immediately after its
 * input. */
.anfrage-custom-form .wpforms-field-radio ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.anfrage-custom-form .wpforms-field-radio li { position: relative; margin: 0; }

.anfrage-custom-form .wpforms-field-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.anfrage-custom-form .wpforms-field-radio input[type="radio"] + label {
  display: block;
  margin: 0;
  padding: 13px 16px;
  border: 1.5px solid #E0E0E0;
  border-radius: 12px;
  background-color: #fff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  color: var(--hp-ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, font-weight 0.15s ease;
}

.anfrage-custom-form .wpforms-field-radio input[type="radio"] + label:hover {
  border-color: var(--hp-green);
}

.anfrage-custom-form .wpforms-field-radio input[type="radio"]:checked + label {
  border-color: var(--hp-green);
  background-color: #E9F2E1;
  box-shadow: inset 0 0 0 1px var(--hp-green);
  font-weight: 700;
}

/* The input is invisible, so the focus ring has to be drawn on the label. */
.anfrage-custom-form .wpforms-field-radio input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--hp-orange);
  outline-offset: 2px;
}

/* A plain checkbox that is not one of the image choices. */
.anfrage-custom-form .wpforms-field-checkbox input[type="checkbox"] {
  accent-color: var(--hp-green);
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  vertical-align: middle;
}

.anfrage-custom-form legend.wpforms-field-label {
  display: block;
  width: 100%;
  padding: 0;
}

.anfrage-custom-form fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

/* ---- Image choices: the "Was können wir für Sie tun?" cards ----
   !important throughout: these beat WPForms' modern-markup label styling,
   which is itself declared with !important. */
.anfrage-custom-form .wpforms-image-choices-modern {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anfrage-custom-form .wpforms-image-choices-modern .wpforms-image-choices-item {
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.anfrage-custom-form .wpforms-image-choices-modern .wpforms-image-choices-item label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 22px 14px !important;
  background: #fff !important;
  border: 1.5px solid #E0E0E0 !important;
  border-radius: 14px !important;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.anfrage-custom-form .wpforms-image-choices-modern .wpforms-image-choices-item label:hover {
  border-color: var(--hp-green) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 48, 10, 0.08) !important;
}

.anfrage-custom-form .wpforms-image-choices-image {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.anfrage-custom-form .wpforms-image-choices-image img {
  width: 84px !important;
  height: auto !important;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.anfrage-custom-form .wpforms-image-choices-label {
  font-family: var(--font-heading);
  font-weight: 500 !important;
  font-size: 15px;
  color: var(--hp-ink);
  margin: 0 !important;
}

/* Split rather than grouped: :has() is the newer of the two, and a browser
   that does not understand it would drop the whole rule — including the
   .wpforms-selected half, which is the reliable one (WPForms adds that class
   with JS on selection). */
.anfrage-custom-form .wpforms-image-choices-modern .wpforms-selected label {
  border-color: var(--hp-green) !important;
  background-color: #E9F2E1 !important;
  box-shadow: inset 0 0 0 1px var(--hp-green) !important;
}

.anfrage-custom-form .wpforms-image-choices-modern li:has(input:checked) label {
  border-color: var(--hp-green) !important;
  background-color: #E9F2E1 !important;
  box-shadow: inset 0 0 0 1px var(--hp-green) !important;
}

/* Keep the ring on an already-selected card while hovering it. */
.anfrage-custom-form .wpforms-image-choices-modern .wpforms-selected label:hover,
.anfrage-custom-form .wpforms-image-choices-modern li:has(input:checked) label:hover {
  box-shadow: inset 0 0 0 1px var(--hp-green) !important;
}

.anfrage-custom-form .wpforms-image-choices-modern .wpforms-selected .wpforms-image-choices-label,
.anfrage-custom-form .wpforms-image-choices-modern li:has(input:checked) .wpforms-image-choices-label {
  font-weight: 700 !important;
}

/* WPForms' selected checkmark badge is blue out of the box. */
.anfrage-custom-form .wpforms-image-choices-modern .wpforms-selected .wpforms-image-choices-image::after,
.anfrage-custom-form .wpforms-image-choices-modern li:has(input:checked) .wpforms-image-choices-image::after {
  background-color: var(--hp-green) !important;
  border-color: var(--hp-green) !important;
}

/* ---- Date picker (Wunschtermin) ----
 * A flatpickr field: readonly, so browsers grey it out and it reads as
 * disabled next to the live inputs beside it. */
.anfrage-custom-form .wpforms-datepicker-wrap { position: relative; }

.anfrage-custom-form input.wpforms-datepicker {
  background-color: #fff !important;
  cursor: pointer;
  /* Room for the calendar glyph below. */
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316231B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.anfrage-custom-form .wpforms-datepicker-clear {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

/* flatpickr's own popup is unstyled brand-wise — its selected day is the
   library's default blue, which appears nowhere else on this site. */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--hp-green) !important;
  border-color: var(--hp-green) !important;
}

.flatpickr-day.today { border-color: var(--hp-orange) !important; }
.flatpickr-day:hover { background: #E9F2E1 !important; }

/* ---- File upload (Plan / Skizze / Bilder) ----
 * Dropzone's default is a bare grey box with no indication it is a drop
 * target. */
.anfrage-custom-form .wpforms-uploader {
  padding: 26px 20px !important;
  border: 2px dashed #D6DBD0 !important;
  border-radius: 14px !important;
  background-color: #FAFBF8 !important;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.anfrage-custom-form .wpforms-uploader:hover,
.anfrage-custom-form .wpforms-uploader.dz-drag-hover {
  border-color: var(--hp-green) !important;
  background-color: #F1F6EC !important;
}

.anfrage-custom-form .wpforms-uploader .dz-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.anfrage-custom-form .wpforms-uploader svg { color: var(--hp-green); opacity: 0.65; }

.anfrage-custom-form .wpforms-uploader .modern-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--hp-ink);
}

.anfrage-custom-form .wpforms-uploader .modern-title span {
  color: var(--hp-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.anfrage-custom-form .wpforms-uploader .modern-hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--hp-body);
}

/* ---- Raw HTML fields ----
 * Page 2 opens with an editor-pasted block whose heading is float:left and
 * whose picture is float:right, both as inline styles. Left alone the floats
 * escape the field and the next input wraps around the image. Inline styles
 * can only be beaten with !important. */
.anfrage-custom-form .wpforms-field-html::after {
  content: "";
  display: table;
  clear: both;
}

.anfrage-custom-form .sawanumzug {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 0 !important;
}

.anfrage-custom-form .sawanumzug h3 {
  float: none !important;
  margin: 0 !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  color: var(--hp-ink);
}

.anfrage-custom-form .sawanumzug img {
  float: none !important;
  width: 180px !important;
  height: auto;
  margin-top: 0 !important;
  border-radius: 12px;
}

/* ---- Privacy note ---- */
.anfrage-custom-form .form-check {
  padding: 14px 16px;
  border-radius: 12px;
  background-color: #F6F8F3;
  border: 1px solid var(--hp-line);
}

.anfrage-custom-form .form-check p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--hp-body);
}

/* ---- Multi-page progress ---- */
.anfrage-custom-form .wpforms-page-indicator {
  margin: 0 0 28px;
  padding: 0 0 18px;
  border: none;
}

.anfrage-custom-form .wpforms-page-indicator-page-title,
.anfrage-custom-form .wpforms-page-indicator .wpforms-page-indicator-page-title-sep {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--hp-ink);
}

.anfrage-custom-form .wpforms-page-indicator .wpforms-page-indicator-page-progress-wrap {
  border-radius: 999px;
  overflow: hidden;
}

.anfrage-custom-form .wpforms-page-indicator .wpforms-page-indicator-page-progress {
  background-color: var(--hp-green) !important;
  border-radius: 999px;
}

/* ---- Page navigation ---- */
.anfrage-custom-form .wpforms-field-pagebreak > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.anfrage-custom-form .wpforms-field-pagebreak > div::before,
.anfrage-custom-form .wpforms-field-pagebreak > div::after { display: none !important; }

/* The "Weiter" button and its loading spinner share a wrapper; without this
   the spinner drops onto its own line the moment it is un-hidden. */
.anfrage-custom-form .wpforms-page-button-group {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Page 1 has no "Zurück", so space-between would push the lone "Weiter" to the
   left edge. This keeps it on the right, where the forward action belongs. */
.anfrage-custom-form .wpforms-field-pagebreak > div > .wpforms-page-button-group:only-child {
  margin-left: auto;
}

.anfrage-custom-form .wpforms-page-indicator-steps {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--hp-body);
}

.anfrage-custom-form .wpforms-page-indicator-steps-current { color: var(--hp-green); }

.anfrage-custom-form button.wpforms-page-next,
.anfrage-custom-form button.wpforms-submit {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: #fff !important;
  background-color: var(--hp-green) !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 15px 36px !important;
  height: auto;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(39, 108, 3, 0.22);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.anfrage-custom-form button.wpforms-page-next:hover,
.anfrage-custom-form button.wpforms-submit:hover,
.anfrage-custom-form button.wpforms-page-next:focus,
.anfrage-custom-form button.wpforms-submit:focus {
  background-color: var(--hp-green-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(39, 108, 3, 0.3);
  outline: none;
}

/* Prev is a way back, not a second call to action — a text link, so it never
   competes with "Weiter" for the eye. */
.anfrage-custom-form button.wpforms-page-prev {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--hp-body) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  padding: 8px 4px !important;
  cursor: pointer;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.anfrage-custom-form button.wpforms-page-prev:hover { color: var(--hp-green) !important; }

.anfrage-custom-form .wpforms-submit-container { margin-top: 8px; }

/* ---- Validation ---- */
.anfrage-custom-form input.wpforms-error,
.anfrage-custom-form textarea.wpforms-error,
.anfrage-custom-form select.wpforms-error { border-color: #E23B3B !important; }

.anfrage-custom-form label.wpforms-error {
  font-family: var(--font-body);
  font-size: 13px;
  color: #E23B3B;
  margin-top: 6px;
}

.anfrage-custom-form .form-check p a,
.anfrage-custom-form .wpforms-field-content a {
  color: var(--hp-green) !important;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.anfrage-custom-form .form-check p a:hover,
.anfrage-custom-form .wpforms-field-content a:hover { color: var(--hp-green-deep) !important; }

/* --------------------------------------------------------------- 7. Aside */
.anf-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.anf-panel {
  padding: 22px 22px 24px;
  border-radius: var(--hp-radius);
  background-color: #fff;
  border: 1px solid var(--hp-line);
}

.anf-panel--dark {
  background-color: var(--hp-green-dark);
  border-color: transparent;
}

.anf-panel__title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--hp-ink);
}

.anf-panel--dark .anf-panel__title { color: #fff; }

.anf-panel__text {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hp-body);
}

.anf-panel--dark .anf-panel__text { color: rgba(255, 255, 255, 0.75); }

.anf-panel__tel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.anf-panel__tel svg { color: var(--hp-orange); flex-shrink: 0; }
.anf-panel__tel:hover { color: var(--hp-orange); }

.anf-panel__hours {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.anf-panel__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  background-color: #25D366;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: #06331A;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.anf-panel__wa:hover { background-color: #1FBA5A; }

/* "What happens next" — the form shows its own step indicator, but that is
   about filling it in. This is about what the visitor has actually signed up
   for by pressing send, which is the thing people hesitate over. */
.anf-steps {
  counter-reset: anf-step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.anf-steps li {
  counter-increment: anf-step;
  position: relative;
  padding-left: 38px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hp-body);
}

.anf-steps li strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--hp-ink);
}

.anf-steps li::before {
  content: counter(anf-step);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--hp-green-tint);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--hp-green);
}

/* -------------------------------------------------------------- 8. Footer */
.anf-footer {
  flex-shrink: 0;
  background-color: var(--hp-green-dark);
  padding: clamp(40px, 4.4vw, 64px) 0 28px;
}

.anf-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.anf-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 380px;
}

.anf-footer__logo img {
  height: 46px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.anf-footer__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.anf-footer__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}

.anf-footer__fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.anf-footer__fact-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.anf-footer__fact a,
.anf-footer__fact span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.anf-footer__fact a:hover { color: var(--hp-orange); }

.anf-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}

.anf-footer__links {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.anf-footer__links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.anf-footer__links a:hover { color: var(--hp-orange); }

/* ---------------------------------------------------- 9. Mobile action bar
 * Deliberately NOT the site's .mobile-bottom nav. That bar carries a menu
 * button and a services panel, and this template used to duplicate the whole
 * slide-in menu — including a hand-typed service list that had already drifted
 * out of step with he_service_categories(). On a page whose only job is to be
 * completed, the useful actions are: get out, or reach a human faster. */
.anf-actionbar { display: none; }

/* ------------------------------------------------------- 10. Responsive */
@media (max-width: 1024px) {
  .anf-grid { grid-template-columns: minmax(0, 1fr); }

  /* Below the form on one column: reassurance belongs after the thing it is
     reassuring you about, and sticky makes no sense once it is the last
     element on the page. */
  .anf-aside { position: static; }

  /* Overrides responsive.css's global `body { padding-bottom: 66px }`, which
     is sized for the site's mobile nav — this page has its own bar. */
  .anf-body { padding-bottom: 72px; }

  .anf-actionbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background-color: var(--hp-green);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.16);
  }

  .anf-actionbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
  }

  .anf-actionbar__item + .anf-actionbar__item {
    border-left: 1px solid rgba(255, 255, 255, 0.22);
  }

  .anf-actionbar__item--wa { background-color: #25D366; color: #06331A; }

  .anf-header__wa { display: none; } /* it is in the bar now */
}

@media (max-width: 782px) {
  .anfrage-custom-form .wpforms-image-choices-modern {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .anf-header__bar { gap: 12px; }
  .anf-header__logo img { height: 38px; }

  .anf-header__tel {
    padding: 9px 14px;
    font-size: 14px;
  }

  /* The number alone is the point; the label is understood from the icon. */
  .anf-header__tel span { display: none; }

  .anf-card { padding: 18px; border-radius: var(--hp-radius-sm); }

  .anfrage-custom-form .wpforms-field-label { font-size: 15px; }
  .anfrage-custom-form .wpforms-image-choices-modern .wpforms-image-choices-item label { padding: 16px 10px !important; }
  .anfrage-custom-form .wpforms-image-choices-image img { width: 56px !important; }
  .anfrage-custom-form .wpforms-image-choices-label { font-size: 14px; }

  .anfrage-custom-form button.wpforms-page-next,
  .anfrage-custom-form button.wpforms-submit { padding: 13px 26px !important; font-size: 15px; }

  /* Stack WPForms' multi-column rows (date + time) full width. */
  .anfrage-custom-form .wpforms-field.wpforms-one-half,
  .anfrage-custom-form .wpforms-field.wpforms-first.wpforms-one-half,
  .anfrage-custom-form .wpforms-field.wpforms-one-third,
  .anfrage-custom-form .wpforms-field.wpforms-two-thirds,
  .anfrage-custom-form .wpforms-field.wpforms-one-fourth,
  .anfrage-custom-form .wpforms-field.wpforms-three-fourths {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  .anf-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .anfrage-custom-form .wpforms-image-choices-modern .wpforms-image-choices-item label,
  .anfrage-custom-form button.wpforms-page-next,
  .anfrage-custom-form button.wpforms-submit { transition: none; }

  .anfrage-custom-form .wpforms-image-choices-modern .wpforms-image-choices-item label:hover,
  .anfrage-custom-form button.wpforms-page-next:hover,
  .anfrage-custom-form button.wpforms-submit:hover { transform: none; }
}