/* IBMH Presse & Marke — Anfrageformular (WPForms 528), P2-form, 2026-09-21.
 *
 * SCOPE: Jede Regel haengt an der Form-ID #wpforms-528 bzw. #wpforms-form-528,
 * die Sektionsregeln zusaetzlich an .page-id-530 #anfrage. Es gibt in dieser Datei
 * KEINEN ungescopten WPForms-Selektor. Die Formulare 106 (/kontakt/) und
 * 117 (Stellenseite) koennen daher nicht getroffen werden.
 *
 * GRUNDLAGE: assets/css/ibmh-forms.css (global, fremde Datei — unveraendert) liefert
 * bereits Radius 14px, Fokusring 3px #1848a0 und den Pill-Submit. Diese Datei setzt
 * darauf auf und wird NACH ibmh-forms.css und NACH wpforms-modern-full geladen.
 *
 * TOKENS: ibmh-components.css setzt --ibmh-* auf .entry-content/.wp-block-post-content.
 * Das Formular liegt darin, trotzdem ueberall Fallback-Werte (gleiche Konvention wie
 * ibmh-brand-center.css).
 *
 * NICHT ANGEFASST: Feld-IDs, Conditional Logic, Honeypots (field_14/field_15 sind
 * position:absolute und damit keine Grid-Items), intl-tel-input, natives
 * <input type="file">, native <select>-Funktion, Spam-Schutz, Entry-Speicherung.
 */

/* ===================================================================== *
 * 1. Sektion drumherum: Ueberschrift -> Erklaertext -> Formular
 * ===================================================================== */

.page-id-530 #anfrage > h2 {
  margin-bottom: 0.5rem;
}

.page-id-530 #anfrage > p {
  margin: 0 0 0.25rem;
  color: var(--ibmh-text-muted, #51607a);
  max-width: 68ch;
  line-height: 1.6;
}

/* ===================================================================== *
 * 2. Formular-Panel — gleiche Formensprache wie .ibmh-brand-panel,
 *    aber mit Akzentkante oben, damit es keine "nackte weisse Box" ist.
 * ===================================================================== */

.page-id-530 #wpforms-528.wpforms-container,
.page-id-530 #wpforms-528.wpforms-container-full {
  /* WPForms-Groessen-Variablen (Inline-Block #wpforms-528, Spezifitaet 1,0,0;
   * dieser Selektor 1,2,0 gewinnt ohne !important). */
  --wpforms-field-size-input-height: 52px;
  --wpforms-field-size-input-spacing: 0px;
  --wpforms-field-size-font-size: 16px;
  --wpforms-field-size-line-height: 24px;
  --wpforms-field-size-padding-h: 16px;
  --wpforms-field-size-checkbox-size: 26px;
  --wpforms-field-size-sublabel-spacing: 6px;
  --wpforms-label-size-font-size: 15px;
  --wpforms-label-size-line-height: 22px;
  --wpforms-label-size-sublabel-font-size: 13px;
  --wpforms-label-size-sublabel-line-height: 18px;
  --wpforms-button-size-font-size: 17px;
  --wpforms-button-size-height: 56px;
  --wpforms-button-size-padding-h: 28px;
  --wpforms-button-size-margin-top: 0px;
  --wpforms-field-border-radius: 14px;
  --wpforms-label-color: #14233d;
  --wpforms-label-sublabel-color: #51607a;
  --wpforms-label-error-color: #b3261e;

  /* eigene Tokens dieser Datei */
  --ibmh-form-line: rgba(24, 72, 160, 0.20);
  --ibmh-form-line-soft: rgba(24, 72, 160, 0.12);
  --ibmh-form-tint: rgba(24, 72, 160, 0.045);
  --ibmh-form-err: #b3261e;
  --ibmh-form-err-tint: rgba(179, 38, 30, 0.07);
  --ibmh-form-ok: #1d6f42;
  --ibmh-form-row-gap: 30px;
  --ibmh-form-col-gap: 28px;
  /* Hoehe genau einer Fehlerzeile (3px Abstand + 18px Zeile) — siehe Abschnitt 9.
   * Muss zusammen mit --ibmh-form-row-gap gedacht werden: die Meldung ragt um
   * genau diesen Betrag in die Luecke, es bleiben 9px Abstand zum naechsten Feld.
   * Damit sitzt die Meldung dichter an ihrem eigenen Feld (3px) als am folgenden. */
  --ibmh-form-err-bleed: 21px;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: min(100%, 54rem);
  margin: 1.6rem 0 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #ffffff;
  border: 1px solid var(--ibmh-form-line-soft);
  border-top: 3px solid var(--ibmh-blue-700, #1848a0);
  border-radius: var(--ibmh-radius-md, 18px);
  box-shadow: 0 10px 28px rgba(13, 43, 99, 0.06);
}

/* ===================================================================== *
 * 3. Raster
 *    Desktop zweispaltig nur dort, wo im DOM zwei kurze Felder direkt
 *    benachbart sind (Name|Organisation, E-Mail|Telefon). Alles andere
 *    volle Breite bzw. halbe Breite in eigener Zeile.
 *    Die Conditional-Felder 12/13 sind IMMER 1/-1 und stehen im DOM
 *    zwischen Feld 5 und Feld 7 — dadurch kann ihr Ein-/Ausblenden keine
 *    Paarbildung verschieben (beide Zweige gemessen).
 * ===================================================================== */

@media (min-width: 800px) {
  .page-id-530 #wpforms-528 .wpforms-field-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ibmh-form-col-gap);
    row-gap: var(--ibmh-form-row-gap);
    align-items: start;
  }
  /* Volle Breite: lange bzw. mehrzeilige Felder */
  .page-id-530 #wpforms-528 #wpforms-528-field_12-container,
  .page-id-530 #wpforms-528 #wpforms-528-field_13-container,
  .page-id-530 #wpforms-528 #wpforms-528-field_7-container,
  .page-id-530 #wpforms-528 #wpforms-528-field_6-container,
  .page-id-530 #wpforms-528 #wpforms-528-field_9-container,
  .page-id-530 #wpforms-528 #wpforms-528-field_10-container,
  .page-id-530 #wpforms-528 #wpforms-528-field_11-container {
    grid-column: 1 / -1;
  }
  /* Kurze Felder: halbe Breite (Auswahl, Datum) */
  .page-id-530 #wpforms-528 #wpforms-528-field_5-container,
  .page-id-530 #wpforms-528 #wpforms-528-field_8-container {
    grid-column: span 1;
  }
}

/* Unter 800px: eine Spalte, gleiche Rhythmik ueber margin. */
@media (max-width: 799.98px) {
  .page-id-530 #wpforms-528 .wpforms-field-container > .wpforms-field {
    margin-bottom: var(--ibmh-form-row-gap);
  }
  .page-id-530 #wpforms-528 .wpforms-field-container > .wpforms-field:last-of-type {
    margin-bottom: 0;
  }
}

/* Feld-Grundzustand: Abstaende kommen aus gap/margin, nicht aus padding,
 * damit die Fehlermeldung (Abschnitt 9) genau in diese Luecke ragen kann. */
.page-id-530 #wpforms-528 .wpforms-field {
  position: relative;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  min-width: 0;
  /* WPForms setzt hier overflow-x:hidden (computed: "hidden auto"). Das hat die
   * in die Rasterluecke ragende Fehlermeldung abgeschnitten — sichtbar war nur
   * die Meldung im Name-Teilblock, der kein overflow erbt. Die Feldbreiten sind
   * ueber max-width:100% und min-width:0 selbst begrenzt, ein Clipping wird
   * also nicht gebraucht (Overflow-Messung bei 360-1440: 0 Ueberhaenge). */
  overflow: visible;
}
/* Sicherheitsnetz: WPForms-Honeypots bleiben aus dem Fluss. */
.page-id-530 #wpforms-528 .wpforms-field-hp,
.page-id-530 #wpforms-528 #wpforms-528-field_14-container,
.page-id-530 #wpforms-528 #wpforms-528-field_15-container {
  position: absolute !important;
}

/* ===================================================================== *
 * 4. Labels, Sublabels, Beschreibungen, Pflichtkennzeichnung
 * ===================================================================== */

.page-id-530 #wpforms-528 .wpforms-field-label,
.page-id-530 #wpforms-528 legend.wpforms-field-label {
  display: block;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #14233d;
  margin: 0 0 7px;
  padding: 0;
}

.page-id-530 #wpforms-528 .wpforms-required-label {
  color: var(--ibmh-form-err, #b3261e);
  font-weight: 700;
  margin-left: 1px;
}

.page-id-530 #wpforms-528 .wpforms-field-sublabel {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--ibmh-text-muted, #51607a);
  margin: 6px 0 0;
  padding: 0;
}

.page-id-530 #wpforms-528 .wpforms-field-description {
  font-size: 13px;
  line-height: 18px;
  color: var(--ibmh-text-muted, #51607a);
  margin: 6px 0 0;
}

/* ===================================================================== *
 * 5. Eingabefelder — Hoehe, Radius, Innenabstand, Fokus
 *    (input[type=url]/[type=date] fehlen in ibmh-forms.css und fielen
 *    deshalb auf WPForms-Default 3px Radius zurueck — hier mit erfasst.)
 * ===================================================================== */

.page-id-530 #wpforms-528 input[type="text"],
.page-id-530 #wpforms-528 input[type="email"],
.page-id-530 #wpforms-528 input[type="tel"],
.page-id-530 #wpforms-528 input[type="url"],
.page-id-530 #wpforms-528 input[type="number"],
.page-id-530 #wpforms-528 input[type="date"],
.page-id-530 #wpforms-528 select,
.page-id-530 #wpforms-528 textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 52px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: #14233d;
  background-color: #ffffff;
  border: 1px solid var(--ibmh-form-line);
  border-radius: 14px;
  box-shadow: none;
  transition: border-color 160ms var(--ibmh-ease-out, ease),
              background-color 160ms var(--ibmh-ease-out, ease);
}

.page-id-530 #wpforms-528 textarea {
  height: auto;
  min-height: 126px;
  max-height: 340px;
  padding: 14px 16px;
  resize: vertical;
}
/* Conditional-Zusatzfelder etwas flacher — sie sind Ergaenzung, nicht Hauptfeld. */
.page-id-530 #wpforms-528 #wpforms-528-field_12,
.page-id-530 #wpforms-528 #wpforms-528-field_13 {
  min-height: 104px;
}

/* Platzhalterfarbe — QAP-01 (22.09.): der erste Wert #8a94a8 erreichte auf Weiss nur
 * 3,05:1 und verfehlte WCAG 1.4.3 (4,5:1). axe meldet diese Knoten wegen des
 * Chevron-Hintergrundbilds nur als "incomplete", der Verstoss taucht deshalb in
 * keiner axe-Bilanz auf und wurde per Rechnung auf dem tatsaechlich gerenderten
 * Hintergrund nachgemessen.
 *   #68728c auf #ffffff                       = 4,80:1  (Normalfall)
 * Weiterhin klar schwaecher als der Eingabetext (#14233d = 15,70:1) und als die
 * Feldbeschreibungen (#51607a = 6,36:1), also optisch eindeutig Platzhalter. */
.page-id-530 #wpforms-528 input::placeholder,
.page-id-530 #wpforms-528 textarea::placeholder {
  color: #68728c;
  opacity: 1;
}
/* Im Fehlerzustand liegt der Platzhalter auf dem getoenten Feldgrund
 * rgba(179,38,30,.07) ueber Weiss = #faf0ef. Dort ergaebe #68728c nur 4,29:1,
 * deshalb hier ein Tick dunkler: #5f6a85 auf #faf0ef = 4,83:1. */
.page-id-530 #wpforms-528 input.wpforms-error::placeholder,
.page-id-530 #wpforms-528 textarea.wpforms-error::placeholder {
  color: #5f6a85;
}

/* Hover/Fokus — Fokusring bleibt bei 3px wie auf der restlichen Seite. */
.page-id-530 #wpforms-528 input:hover,
.page-id-530 #wpforms-528 select:hover,
.page-id-530 #wpforms-528 textarea:hover {
  border-color: rgba(24, 72, 160, 0.38);
}
.page-id-530 #wpforms-528 input:focus,
.page-id-530 #wpforms-528 select:focus,
.page-id-530 #wpforms-528 textarea:focus {
  outline: none;
  border-color: var(--ibmh-blue-700, #1848a0);
  background-color: #ffffff;
}
.page-id-530 #wpforms-528 input:focus-visible,
.page-id-530 #wpforms-528 select:focus-visible,
.page-id-530 #wpforms-528 textarea:focus-visible,
.page-id-530 #wpforms-528 button:focus-visible,
.page-id-530 #wpforms-528 a:focus-visible,
.page-id-530 #wpforms-528 [tabindex]:focus-visible {
  outline: 3px solid var(--ibmh-blue-700, #1848a0) !important;
  outline-offset: 2px !important;
  border-color: var(--ibmh-blue-700, #1848a0);
}

/* Name-Kombifeld: gleiche Spaltenlogik wie das Aussenraster. */
.page-id-530 #wpforms-528 .wpforms-field .wpforms-field-row {
  column-gap: var(--ibmh-form-col-gap);
  /* >= --ibmh-form-err-bleed, damit die Fehlerzeile des gestapelten
   * Vornamen-Blocks (unter 600px) nicht in das Nachname-Feld laeuft. */
  row-gap: var(--ibmh-form-row-gap);
}
.page-id-530 #wpforms-528 .wpforms-field .wpforms-field-row > .wpforms-field-row-block {
  position: relative;
}

/* --- Select: nativ bleibt nativ, nur Pfeil und Innenabstand ------------- */
.page-id-530 #wpforms-528 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231848a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  cursor: pointer;
}
/* Pflicht-Select ohne Auswahl ist :invalid und zeigt "Bitte auswaehlen".
 * Gleiche Messung wie beim Platzhalter oben (QAP-01): #68728c auf Weiss = 4,80:1.
 * Nach leerem Absenden traegt genau dieses Feld zusaetzlich .wpforms-error und
 * damit den Grund #faf0ef — dort #5f6a85 = 4,83:1 (Regel darunter). */
.page-id-530 #wpforms-528 select:invalid,
.page-id-530 #wpforms-528 select option.placeholder {
  color: #68728c;
}
.page-id-530 #wpforms-528 select.wpforms-error:invalid {
  color: #5f6a85;
}
.page-id-530 #wpforms-528 select option {
  color: #14233d;
}
/* Kein Pfeilbild im Kontrastmodus — dort wieder der native Select. */
@media (forced-colors: active) {
  .page-id-530 #wpforms-528 select {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    background-image: none;
    padding-right: 16px;
  }
}

/* --- Telefon: intl-tel-input darf nicht zerdrueckt werden --------------- */
.page-id-530 #wpforms-528 .iti {
  display: block;
  width: 100%;
}
.page-id-530 #wpforms-528 .iti__selected-country,
.page-id-530 #wpforms-528 .iti__flag-container {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

/* --- Datumsfeld -------------------------------------------------------- */
.page-id-530 #wpforms-528 .wpforms-datepicker-wrap {
  display: block;
  width: 100%;
}

/* ===================================================================== *
 * 6. Dateiupload — natives input[type=file] bleibt nativ, bekommt aber
 *    eine eigene Flaeche und einen Knopf in der Formensprache der Seite.
 *    Kein JS, keine Dropzone (Modern-Uploader war nicht tastaturbedienbar).
 * ===================================================================== */

.page-id-530 #wpforms-528 input[type="file"] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--ibmh-text-muted, #51607a);
  background: var(--ibmh-form-tint);
  border: 1px dashed rgba(24, 72, 160, 0.30);
  border-radius: 14px;
  cursor: pointer;
}
.page-id-530 #wpforms-528 input[type="file"]:hover {
  border-color: rgba(24, 72, 160, 0.48);
  background: rgba(24, 72, 160, 0.06);
}
.page-id-530 #wpforms-528 input[type="file"]::file-selector-button {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0 14px 0 0;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--ibmh-blue-700, #1848a0);
  background: #ffffff;
  border: 1px solid rgba(24, 72, 160, 0.35);
  border-radius: var(--ibmh-radius-pill, 999px);
  cursor: pointer;
  transition: background-color 160ms var(--ibmh-ease-out, ease),
              border-color 160ms var(--ibmh-ease-out, ease);
}
.page-id-530 #wpforms-528 input[type="file"]:hover::file-selector-button {
  background: rgba(24, 72, 160, 0.06);
  border-color: var(--ibmh-blue-700, #1848a0);
}
/* Die erlaubten Typen und die Maximalgroesse stehen bereits in der
 * Feldbeschreibung — hier nur ruhiger als Meta-Zeile gesetzt. */
.page-id-530 #wpforms-528 #wpforms-528-field_10-container .wpforms-field-description {
  margin-top: 8px;
  padding-left: 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ibmh-text-muted, #51607a);
}

/* ===================================================================== *
 * 7. Einwilligung (DSGVO-Checkbox)
 *    Treffflaeche der Checkbox 44x44 (Grafik 26px per background-image),
 *    Label bleibt klickbar, Datenschutz-Link bleibt als Link erkennbar.
 * ===================================================================== */

.page-id-530 #wpforms-528 #wpforms-528-field_11-container {
  padding: 16px 18px;
  background: var(--ibmh-form-tint);
  border: 1px solid var(--ibmh-form-line-soft);
  border-radius: var(--ibmh-radius-md, 18px);
}
.page-id-530 #wpforms-528 #wpforms-528-field_11-container > .wpforms-field-label {
  margin-bottom: 4px;
}
.page-id-530 #wpforms-528 #wpforms-528-field_11 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-id-530 #wpforms-528 #wpforms-528-field_11 > li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  min-height: 44px;
}
.page-id-530 #wpforms-528 #wpforms-528-field_11 input[type="checkbox"] {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin: 0 0 0 -9px;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 26px 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Crect x='1.5' y='1.5' width='23' height='23' rx='7' fill='%23ffffff' stroke='%238a96b4' stroke-width='2'/%3E%3C/svg%3E");
  border-radius: 12px;
  cursor: pointer;
}
/* WPForms-Modern zeichnet das Kaestchen NICHT nativ, sondern ueber zwei
 * absolut positionierte Pseudo-Elemente auf dem Input selbst
 * (::before = 26x26 Rahmen bei left/top -2px, ::after = Haken; gemessen 21.09.).
 * In der 44px-Trefferflaeche saessen die oben links statt mittig und lagen
 * sichtbar neben der neuen Grafik — deshalb hier abgeschaltet. Der Zustand
 * wird vollstaendig ueber das background-image oben dargestellt. */
.page-id-530 #wpforms-528 #wpforms-528-field_11 input[type="checkbox"]::before,
.page-id-530 #wpforms-528 #wpforms-528-field_11 input[type="checkbox"]::after {
  display: none !important;
  content: none !important;
}
.page-id-530 #wpforms-528 #wpforms-528-field_11 input[type="checkbox"]:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Crect x='1.5' y='1.5' width='23' height='23' rx='7' fill='%23ffffff' stroke='%231848a0' stroke-width='2'/%3E%3C/svg%3E");
}
.page-id-530 #wpforms-528 #wpforms-528-field_11 input[type="checkbox"]:checked,
.page-id-530 #wpforms-528 #wpforms-528-field_11 input[type="checkbox"]:checked:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Crect x='1.5' y='1.5' width='23' height='23' rx='7' fill='%231848a0' stroke='%231848a0' stroke-width='2'/%3E%3Cpath d='M7.6 13.4l3.4 3.4 7.4-7.6' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page-id-530 #wpforms-528 #wpforms-528-field_11 input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--ibmh-blue-700, #1848a0) !important;
  outline-offset: -2px !important;
  border-radius: 12px;
}
/* Kontrastmodus: Hintergrundbilder werden dort verworfen -> native Checkbox. */
@media (forced-colors: active) {
  .page-id-530 #wpforms-528 #wpforms-528-field_11 input[type="checkbox"] {
    -webkit-appearance: auto;
    appearance: auto;
    width: 26px;
    height: 26px;
    min-width: 26px;
    margin: 9px 0 0 0;
    background-image: none;
  }
}
.page-id-530 #wpforms-528 .wpforms-field-label-inline {
  display: block;
  padding: 11px 0 11px 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: #33405a;
  cursor: pointer;
}
.page-id-530 #wpforms-528 .wpforms-field-label-inline a {
  color: var(--ibmh-blue-700, #1848a0);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.page-id-530 #wpforms-528 .wpforms-field-label-inline a:hover {
  text-decoration-thickness: 2px;
}

/* ===================================================================== *
 * 8. Submit — echter Primary-CTA, konstante Breite beim Absenden
 * ===================================================================== */

.page-id-530 #wpforms-528 .wpforms-submit-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--ibmh-form-line-soft);
}

.page-id-530 #wpforms-528 button.wpforms-submit,
.page-id-530 #wpforms-528 button[type="submit"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Breite fuer beide Beschriftungen reserviert ("Anfrage senden" /
   * "Wird gesendet …") -> beim Absenden kein Breitensprung. */
  min-width: 16rem;
  min-height: 56px;
  height: auto;
  margin: 0;
  padding: 0 28px !important;
  font-family: inherit;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #ffffff !important;
  background: var(--ibmh-blue-700, #1848a0) !important;
  border: 0 !important;
  border-radius: var(--ibmh-radius-pill, 999px) !important;
  cursor: pointer;
  transition: background-color 160ms var(--ibmh-ease-out, ease),
              transform 160ms var(--ibmh-ease-out, ease),
              box-shadow 160ms var(--ibmh-ease-out, ease);
}
.page-id-530 #wpforms-528 button.wpforms-submit:hover {
  background: var(--ibmh-blue-600, #1f63c4) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(13, 43, 99, 0.18);
}
.page-id-530 #wpforms-528 button.wpforms-submit:active {
  transform: translateY(0);
  box-shadow: none;
}
.page-id-530 #wpforms-528 button.wpforms-submit:focus-visible {
  outline: 3px solid var(--ibmh-blue-700, #1848a0) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #ffffff !important;
}
/* Submitting: WPForms setzt disabled + data-alt-text. Breite bleibt durch
 * min-width konstant, der Spinner steht als Geschwister daneben (Flex-Item)
 * und kann den Knopf nicht mehr verschieben. */
.page-id-530 #wpforms-528 button.wpforms-submit[disabled],
.page-id-530 #wpforms-528 button.wpforms-submit:disabled {
  background: var(--ibmh-blue-700, #1848a0) !important;
  opacity: 0.72;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
.page-id-530 #wpforms-528 .wpforms-submit-spinner {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin: 0;
}

/* ===================================================================== *
 * 9. Fehlerdarstellung — kompakte Inline-Fehler ohne Dokumentsprung.
 *
 *    Messung: WPForms haengt die Meldung immer als LETZTES Kind an den
 *    Feld-Container (bzw. an den Teilblock des Name-Feldes) und entfernt
 *    sie beim Korrigieren wieder aus dem DOM (verifiziert 21.09.).
 *    Deshalb bleibt die Meldung im Fluss und bekommt einen negativen
 *    Aussenabstand in Hoehe genau einer Zeile: sie "blutet" um
 *    --ibmh-form-err-bleed in die ohnehin reservierte Rasterluecke,
 *    ohne die Feldhoehe zu veraendern.
 *    -> einzeilige Fehler kosten 0 px Dokumenthoehe.
 *    -> mehrzeilige Fehler wachsen normal weiter und koennen deshalb
 *       NIE das naechste Label ueberdecken (anders als eine absolut
 *       positionierte Meldung).
 *    -> Beim Korrigieren verschwindet das Element und damit auch der
 *       negative Abstand — kein Ruecksprung.
 * ===================================================================== */

.page-id-530 #wpforms-528 label.wpforms-error,
.page-id-530 #wpforms-528 em.wpforms-error {
  display: block;
  margin: 3px 0 calc(-1 * var(--ibmh-form-err-bleed)) !important;
  padding: 0 0 0 2px;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  color: var(--ibmh-form-err, #b3261e);
  background: transparent;
}
/* WPForms setzt vor die Meldung ein 16x14-Inline-Icon (::before, content:"",
 * gemessen 21.09.). In den schmalen Rasterspalten (Vorname/Nachname, 176 px)
 * passt Icon + Text nicht in eine Zeile — die Meldung wurde dadurch zweizeilig
 * und kostete 18 px zusaetzliche Dokumenthoehe. Das Icon ist rein dekorativ:
 * die Fehlerinformation steht als Text da, und das Feld bekommt zusaetzlich
 * roten Rahmen und getoenten Grund. WCAG 1.4.1 haengt damit weiterhin nicht
 * allein an der Farbe. */
.page-id-530 #wpforms-528 label.wpforms-error::before,
.page-id-530 #wpforms-528 em.wpforms-error::before {
  display: none;
}

/* Ausnahme Einwilligung: Das Feld ist eine getoente Karte mit Rahmen — eine
 * herausragende Meldung wuerde die Rahmenlinie kreuzen. Sie steht deshalb
 * absolut unter der Karte, in dem Abstand, den der Submit-Bereich ohnehin
 * haelt (margin-top 26px + padding-top 22px = 48px). Kein Zuwachs. */
.page-id-530 #wpforms-528 #wpforms-528-field_11-container {
  position: relative;
}
.page-id-530 #wpforms-528 #wpforms-528-field_11-container > label.wpforms-error,
.page-id-530 #wpforms-528 #wpforms-528-field_11-container > em.wpforms-error {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 3px 0 0 !important;
}

/* Fehlerhafte Felder deutlich, aber nicht schreiend. */
.page-id-530 #wpforms-528 input.wpforms-error,
.page-id-530 #wpforms-528 select.wpforms-error,
.page-id-530 #wpforms-528 textarea.wpforms-error {
  border-color: var(--ibmh-form-err, #b3261e);
  background-color: var(--ibmh-form-err-tint);
}
.page-id-530 #wpforms-528 #wpforms-528-field_11 input[type="checkbox"].wpforms-error {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Crect x='1.5' y='1.5' width='23' height='23' rx='7' fill='%23ffffff' stroke='%23b3261e' stroke-width='2'/%3E%3C/svg%3E");
}
/* Sammelfehler (AJAX) kompakt statt als grosser Block. */
.page-id-530 #wpforms-528 .wpforms-error-container,
.page-id-530 #wpforms-528 .wpforms-error-container-full {
  margin: 0 0 18px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  color: #7a1a15;
  background: var(--ibmh-form-err-tint);
  border: 1px solid rgba(179, 38, 30, 0.28);
  border-left: 3px solid var(--ibmh-form-err, #b3261e);
  border-radius: 12px;
}
.page-id-530 #wpforms-528 .wpforms-error-container p:first-child { margin-top: 0; }
.page-id-530 #wpforms-528 .wpforms-error-container p:last-child { margin-bottom: 0; }

/* ===================================================================== *
 * 10. Erfolgsmeldung — ruhig, eindeutig, gleiche Formensprache
 * ===================================================================== */

.page-id-530 #anfrage .wpforms-confirmation-container,
.page-id-530 #anfrage .wpforms-confirmation-container-full {
  box-sizing: border-box;
  max-width: min(100%, 54rem);
  margin: 1.6rem 0 0;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.75rem);
  font-size: 16px;
  line-height: 1.6;
  color: #14233d;
  background: #f1f8f3;
  border: 1px solid rgba(29, 111, 66, 0.28);
  border-top: 3px solid var(--ibmh-form-ok, #1d6f42);
  border-radius: var(--ibmh-radius-md, 18px);
  box-shadow: 0 10px 28px rgba(13, 43, 99, 0.06);
}
.page-id-530 #anfrage .wpforms-confirmation-container p:first-child,
.page-id-530 #anfrage .wpforms-confirmation-container-full p:first-child { margin-top: 0; }
.page-id-530 #anfrage .wpforms-confirmation-container p:last-child,
.page-id-530 #anfrage .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }

/* ===================================================================== *
 * 11. Reduced Motion
 * ===================================================================== */

/* QAP-02 (22.09.): Die erste Fassung zielte auf `… #wpforms-528 input` (1,1,1) und
 * verlor damit gegen die Feldregel in Abschnitt 5, die die Eingabefelder ueber
 * `input[type="…"]` (1,2,1) anspricht — `transition: border-color, background-color`
 * blieb unter `reduce` aktiv. Deshalb hier exakt dieselbe Selektorliste wie dort:
 * gleiche Spezifitaet, spaeter in der Datei, also greift die Regel zuverlaessig.
 * Kein !important noetig. */
@media (prefers-reduced-motion: reduce) {
  .page-id-530 #wpforms-528 input[type="text"],
  .page-id-530 #wpforms-528 input[type="email"],
  .page-id-530 #wpforms-528 input[type="tel"],
  .page-id-530 #wpforms-528 input[type="url"],
  .page-id-530 #wpforms-528 input[type="number"],
  .page-id-530 #wpforms-528 input[type="date"],
  .page-id-530 #wpforms-528 input[type="file"],
  .page-id-530 #wpforms-528 select,
  .page-id-530 #wpforms-528 textarea,
  .page-id-530 #wpforms-528 button.wpforms-submit,
  .page-id-530 #wpforms-528 input[type="file"]::file-selector-button {
    transition: none;
  }
  .page-id-530 #wpforms-528 button.wpforms-submit:hover {
    transform: none;
  }
}