/*
 * WPForms-Ausgabe im Aussehen der Astro-Fassung: .formular, .feld, .eingabe, .fehlertext, .btn, .erfolg.
 * Quellen: src/styles/global.css (Abschnitt „Formulare“), src/pages/kontakt/index.astro, src/pages/bibliothek/katalog/index.astro.
 * Gedacht für die WPForms-Einstellung „Basis-Styling“ oder „kein Styling“, klassisches und modernes Markup.
 * Die Klassen ajm-formular, ajm-formular-kontakt und ajm-formular-ausleihe setzt inc/80-formulare.php am Container.
 * Alle Selektoren beginnen mit .wpforms-container.ajm-formular und sind damit stärker als das Basis-Stylesheet von WPForms,
 * auch wenn WPForms sein Stylesheet erst im Fuß der Seite nachlädt. Ausnahme: den Container selbst gestaltet das Voll-Styling
 * („modern“) mit (0,2,1) – dafür tragen Gerüst und Karte zusätzlich wpforms-container-full (Abschnitt „Gerüst“). Werte, die WPForms
 * an Teilen setzt, die hier sonst nicht vorkommen (Innenabstand des Kopfs, Gewicht/Zeilenhöhe der Beschreibung), stehen ausdrücklich
 * in der jeweiligen Regel. Die Klasse .formular gehört auf der Seite „Fördern“
 * zu einer anderen Komponente und wird hier deshalb nicht gestaltet.
 */

/* ---------- Gerüst: .formular ---------- */
/* Der Container selbst: Mit dem Voll-Styling von WPForms („modern“, wpforms-full.min.css – am Staging aktiv) gestaltet
   „div.wpforms-container-full:not(:empty)“ (0,2,1) ihn mit margin 24px auto sowie Innenabstand, Hintergrund, Rahmen, Radius und
   Schatten aus den WPForms-Variablen (dort 0 / transparent / none / 3px / none). Das schlug diese Regel und die Karte unten mit
   (0,2,0): Die Kontaktkarte fehlte ganz, und das Formular stand 24 px tiefer als in dist (Prüfung teil-a-r3-4, gemessen am
   30.09.2026 mit CSS.getMatchedStylesForNode). Deshalb zusätzlich mit der Klasse wpforms-container-full (0,3,0); ohne Voll-Styling
   gilt die erste Zeile. Rahmen, Radius und Hintergrund auf null wie das form-Element in dist (die Karte unten setzt sie neu). */
.wpforms-container.ajm-formular,
.wpforms-container.wpforms-container-full.ajm-formular { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.wpforms-container.ajm-formular .wpforms-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin: 0; }
/* padding: 0 – WPForms (modern) setzt „.wpforms-head-container { padding: 0 0 35px 0 }“; in dist folgt auf .pflicht direkt das
   erste Feld (Abstand 1,1 rem wie zwischen allen Feldern). */
.wpforms-container.ajm-formular .wpforms-form .wpforms-head-container { display: grid; gap: 0.45rem; padding: 0; }
.wpforms-container.ajm-formular .wpforms-form .wpforms-head-container:empty { display: none; }
.wpforms-container.ajm-formular .wpforms-form .wpforms-title { margin: 0; font: 700 var(--fs-xl) / 1.06 var(--font-display); font-stretch: 84%; letter-spacing: -0.012em; }
/* .pflicht – Gewicht und Zeilenhöhe geerbt wie in dist; WPForms (modern) setzt an der Beschreibung font-weight 300 und die
   Zeilenhöhe seiner Beschriftungsgröße (am Staging 19 statt 24 px). */
.wpforms-container.ajm-formular .wpforms-form .wpforms-description { margin: 0; font-size: var(--fs-s); font-weight: inherit; line-height: inherit; color: var(--text-2); }

/* .zwei: Felder mit „wpforms-one-half“ stehen nebeneinander, alle anderen über die volle Breite */
.wpforms-container.ajm-formular .wpforms-form .wpforms-field-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; width: 100%; }
.wpforms-container.ajm-formular .wpforms-form .wpforms-field { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; align-content: start; float: none; clear: none; width: auto; min-width: 0; margin: 0; padding: 0; }
.wpforms-container.ajm-formular .wpforms-form .wpforms-field.wpforms-one-half { grid-column: span 1; width: auto; margin-left: 0; margin-right: 0; }
.wpforms-container.ajm-formular .wpforms-form .wpforms-field-hp { display: none !important; position: absolute !important; left: -9000px !important; }
/* Felder, die WPForms über bedingte Logik ausblendet (in der Pro-Fassung per Klasse), bleiben ausgeblendet */
.wpforms-container.ajm-formular .wpforms-form .wpforms-field.wpforms-conditional-hide,
.wpforms-container.ajm-formular .wpforms-form .wpforms-hidden { display: none !important; }
@media (max-width: 560px) {
  .wpforms-container.ajm-formular .wpforms-form .wpforms-field-container { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- .feld ---------- */
.wpforms-container.ajm-formular .wpforms-form .wpforms-field-label { display: block; margin: 0; padding: 0; font-weight: 650; font-size: var(--fs-s); line-height: 1.6; color: var(--text); }
/* Im Original steht kein Sternchen: „Bitte fülle alle vier Felder aus.“ bzw. „(freiwillig)“ sagen, was Pflicht ist. Das Attribut required bleibt. */
.wpforms-container.ajm-formular .wpforms-form .wpforms-required-label { display: none; }
/* span.optional wie im Original („Nachricht <span class="optional">(freiwillig)</span>“, katalog/index.astro Z. 219 und 483): inc/80-formulare.php
   hüllt ein „(freiwillig)“ am Ende einer WPForms-Beschriftung in diesen Span – der Beschriftungstext bleibt unverändert (Theme-Nachtrag 7, Punkt 11). */
.wpforms-container.ajm-formular .wpforms-form .wpforms-field-label .optional { font-weight: 500; color: var(--text-2); }
/* .hilfe */
.wpforms-container.ajm-formular .wpforms-form .wpforms-field-description,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field-limit-text,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field-sublabel { display: block; margin: 0; font-size: var(--fs-xs); color: var(--text-2); }

/* ---------- .eingabe ---------- */
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[type='text'],
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[type='email'],
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[type='tel'],
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[type='url'],
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[type='number'],
.wpforms-container.ajm-formular .wpforms-form .wpforms-field select,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field textarea {
  display: block; width: 100%; max-width: 100%; min-height: 3rem; height: auto; margin: 0; padding: 0.7rem 0.9rem;
  font: inherit; color: var(--text); background: var(--flaeche);
  border: 1.5px solid var(--feld-rand); border-radius: var(--r-feld); box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input::placeholder,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field textarea::placeholder { color: var(--text-2); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .wpforms-container.ajm-formular .wpforms-form .wpforms-field input:hover,
  .wpforms-container.ajm-formular .wpforms-form .wpforms-field select:hover,
  .wpforms-container.ajm-formular .wpforms-form .wpforms-field textarea:hover { border-color: var(--text-2); }
}
/* Wie .eingabe:focus-visible in global.css: nur an den Feldern, die oben auch den Rahmen bekommen.
   Ein Ankreuz- oder Auswahlfeld behält den Fokusring aus global.css (:focus-visible), statt ihn zu verlieren. */
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[type='text']:focus-visible,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[type='email']:focus-visible,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[type='tel']:focus-visible,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[type='url']:focus-visible,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[type='number']:focus-visible,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field select:focus-visible,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field textarea:focus-visible { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 30%, transparent); }
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input.wpforms-error,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input.user-invalid,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field input[aria-invalid='true'],
.wpforms-container.ajm-formular .wpforms-form .wpforms-field select.wpforms-error,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field textarea.wpforms-error,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field textarea.user-invalid,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field textarea[aria-invalid='true'] { border: 1.5px solid var(--fehler); }
/* textarea.eingabe: im Original rows="6" (Kontakt) und rows="3" (Ausleihe); WPForms setzt stattdessen eine feste Höhe je Feldgröße.
   Zeilen × 1,6 em + Innenabstand 2 × 0,7 rem + 2 px: gemessen gegen dist (Kontakt 187,5 px, Ausleihe 105,9 px) ergibt „+ 2px“
   187,6 bzw. 106 px; „+ 3px“ (bis Theme-Nachtrag 7, Punkt 10) lag 1,1 px darüber und schob Knopf und Merkmalsliste mit. */
.wpforms-container.ajm-formular .wpforms-form .wpforms-field textarea { --zeilen: 6; min-height: 9rem; height: calc(var(--zeilen) * 1.6em + 1.4rem + 2px); line-height: 1.6; resize: vertical; }

/* ---------- .fehlertext ---------- */
.wpforms-container.ajm-formular .wpforms-form label.wpforms-error,
.wpforms-container.ajm-formular .wpforms-form em.wpforms-error { display: block; min-width: 0; min-height: 1.2em; margin: 0; padding: 0; font-size: var(--fs-xs); font-style: normal; font-weight: 600; line-height: 1.6; color: var(--fehler); cursor: default; }
/* Im Original hat jedes Pflichtfeld eine leere Fehlerzeile, damit beim Prüfen nichts springt.
   „wpforms-field-required“ steht je nach Fassung am Eingabefeld oder am Feldrahmen, deshalb beide Fälle. */
.wpforms-container.ajm-formular .wpforms-form .wpforms-field:has(.wpforms-field-required):not(:has(label.wpforms-error, em.wpforms-error))::after,
.wpforms-container.ajm-formular .wpforms-form .wpforms-field.wpforms-field-required:not(:has(label.wpforms-error, em.wpforms-error))::after { content: ''; display: block; min-height: calc(var(--fs-xs) * 1.2); }
.wpforms-container.ajm-formular .wpforms-form .wpforms-error-container,
.wpforms-container.ajm-formular .wpforms-form noscript.wpforms-error-noscript,
.wpforms-container.ajm-formular .wpforms-form .wpforms-error-noscript { padding: 0; font-size: var(--fs-s); font-weight: 600; color: var(--fehler); }
.wpforms-container.ajm-formular .wpforms-form .wpforms-error-container p { margin: 0; }

/* ---------- .senden und .btn ---------- */
.wpforms-container.ajm-formular .wpforms-form .wpforms-submit-container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; clear: both; margin: 0; padding: 0; }
/* Deklarationen von .btn und .btn-tief aus global.css, hier noch einmal am Knopf selbst:
   Die Schaltfläche trägt zwar „btn btn-tief“ (inc/80-formulare.php), aber WPForms und das Eltern-Theme
   gestalten button[type="submit"] stärker als eine einzelne Klasse. --btn-bg/--btn-fg kommen aus .btn-tief
   und bleiben deshalb auch im dunklen Farbschema richtig. */
.wpforms-container.ajm-formular .wpforms-form .wpforms-submit-container .wpforms-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: auto; min-height: 3rem; margin: 0; padding: 0.7rem 1.4rem;
  font: 650 var(--fs-s) / 1 var(--font-display);
  font-stretch: 100%;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  color: var(--btn-fg, #fff); background: var(--btn-bg, var(--lapis));
  border: 1.5px solid transparent; border-radius: var(--r-pille); box-shadow: none;
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.wpforms-container.ajm-formular .wpforms-form .wpforms-submit-container .wpforms-submit:active { transform: scale(0.97); }
/* WPForms (modern-full) setzt "div.wpforms-container-full button[type=submit]:focus { outline: none }" (0,3,2) und löscht damit den
   Fokusring aus global.css (":focus-visible", 0,1,0) – gemessen am 25.09.2026 auf /kontakt/. Wie .btn im Original: Ring 3 px in
   --fokus mit 3 px Abstand; die Rundung der Pille bleibt (border-radius steht oben am Knopf). */
.wpforms-container.ajm-formular .wpforms-form .wpforms-submit-container .wpforms-submit:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .wpforms-container.ajm-formular .wpforms-form .wpforms-submit-container .wpforms-submit:hover { background: var(--lapis-2); }
}
.wpforms-container.ajm-formular .wpforms-form .wpforms-submit-container .wpforms-submit[disabled],
.wpforms-container.ajm-formular .wpforms-form .wpforms-submit-container .wpforms-submit[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; transform: none; }
.wpforms-container.ajm-formular .wpforms-form .wpforms-submit-container .wpforms-submit-spinner { flex: none; width: 1.6rem; height: 1.6rem; margin: 0; }
/* Icon „paper-plane-tilt“ vor „Nachricht senden“: WPForms gibt den Schaltflächentext ohne HTML aus, deshalb als Maske */
.wpforms-container.ajm-formular-kontakt .wpforms-form .wpforms-submit::before {
  content: ''; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: url('../icons/paper-plane-tilt.svg') center / contain no-repeat;
  mask: url('../icons/paper-plane-tilt.svg') center / contain no-repeat;
}

/* ---------- Kontaktformular: Karte wie .formular in kontakt/index.astro ---------- */
/* Zweite Zeile (0,3,0) gegen das Voll-Styling von WPForms (Gerüst oben); sie steht nach der Nullstellung des Containers und gewinnt
   deshalb bei gleicher Spezifität. */
.wpforms-container.ajm-formular-kontakt,
.wpforms-container.wpforms-container-full.ajm-formular-kontakt { padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); }
/* Steht das Formular schon in einer Karte (.formular-spalte .formular), bekommt es keine zweite */
.formular-spalte .formular .wpforms-container.ajm-formular-kontakt { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }

/* .erfolg der Kontaktseite. WPForms setzt die Bestätigung nach dem Senden in den Container, die Karte bleibt also stehen. */
.wpforms-container.ajm-formular .wpforms-confirmation-container,
.wpforms-container.ajm-formular .wpforms-confirmation-container-full {
  display: flex; gap: 0.75rem; align-items: flex-start; margin: 0; padding: 1rem 1.15rem;
  border-radius: var(--r-feld); background: var(--flaeche-2); border: 1.5px solid var(--erfolg);
  color: var(--text); font-weight: 600; font-size: var(--fs-s);
}
.wpforms-container.ajm-formular .wpforms-confirmation-container::before,
.wpforms-container.ajm-formular .wpforms-confirmation-container-full::before {
  content: ''; flex: none; width: 1.4rem; height: 1.4rem; margin-top: 0.05rem; background: var(--erfolg);
  -webkit-mask: url('../icons/check-circle.svg') center / contain no-repeat;
  mask: url('../icons/check-circle.svg') center / contain no-repeat;
}
.wpforms-container.ajm-formular .wpforms-confirmation-container p,
.wpforms-container.ajm-formular .wpforms-confirmation-container-full p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wpforms-container.ajm-formular .wpforms-confirmation-container,
  .wpforms-container.ajm-formular .wpforms-confirmation-container-full { animation: ajm-erfolg-da 280ms var(--ease-out); }
}
@keyframes ajm-erfolg-da { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Ausleihanfrage: .ausleihe form in katalog/index.astro ---------- */
.wpforms-container.ajm-formular-ausleihe { width: 100%; }
.wpforms-container.ajm-formular-ausleihe .wpforms-form { gap: 0.9rem; justify-items: start; }
.wpforms-container.ajm-formular-ausleihe .wpforms-form .wpforms-field-container { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.wpforms-container.ajm-formular-ausleihe .wpforms-form .wpforms-field textarea { --zeilen: 3; min-height: 6rem; }
/* Im Katalogdialog steht der Titel schon als „Anfrage für: …“ über dem Formular; das Feld wird dort nur mitgesendet */
[data-ausleihe-feld] .wpforms-container.ajm-formular-ausleihe .wpforms-form .wpforms-field.ajm-ausleihe-titel { display: none; }
/* .erfolg des Katalogs: ohne Rahmen und Icon */
.wpforms-container.ajm-formular-ausleihe .wpforms-confirmation-container,
.wpforms-container.ajm-formular-ausleihe .wpforms-confirmation-container-full {
  display: block; padding: 0.9rem 1.1rem; border: 0; border-radius: var(--r-karte);
  background: color-mix(in srgb, var(--erfolg) 12%, var(--flaeche));
}
.wpforms-container.ajm-formular-ausleihe .wpforms-confirmation-container::before,
.wpforms-container.ajm-formular-ausleihe .wpforms-confirmation-container-full::before { content: none; }
@media (prefers-reduced-motion: no-preference) {
  .wpforms-container.ajm-formular-ausleihe .wpforms-confirmation-container,
  .wpforms-container.ajm-formular-ausleihe .wpforms-confirmation-container-full { animation: none; }
}