/**
 * Konfigurator Holzgreifer (Seite /konfigurator-holzgreifer/, Fluent Form 20)
 *
 * WAS:   Kartenlook fuer das eingebettete Formular 20 + Bordeaux-Kopfzeile
 *        (JS-injiziert, siehe js/kw-konfigurator-hg.js) + Ausblendung des
 *        Geraete-Mehrfachauswahl-Feldes (auf dieser Seite ist das Geraet durch
 *        ?modell= schon festgelegt, siehe js/kw-form-context.js::initKonfigurator()).
 * WARUM: #1381 -- eigener, schlanker Holzgreifer-Konfigurator statt des
 *        Seilwinden-Formulars. Optik an js/kw-konfigurator.js + css/
 *        kw-konfigurator.css (Form 7, Seite 91) angelehnt, eigenstaendige Datei
 *        weil Formular 20 auch OHNE diese Kopfzeile auf /holzgreifer/ eingebettet
 *        ist (Bottom-Sektion, dort bleibt das Geraete-Feld sichtbar).
 * LADEN: kw-blocks.php, nur wenn kw_ist_konfigurator_hg_seite() true ist.
 */

/* ── Wrapper ──────────────────────────────────────────── */
.fluentform_wrapper_20 {
  max-width: 620px;
  margin: 3rem auto 4rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 8px 32px rgba(0,0,0,0.06);
  overflow: hidden;
  padding: 0;
}
/* Audio-Feedback 20.08. (Station 14, #1381/#1048): auf /konfigurator-holzgreifer/
   ist der Wrapper das EINZIGE direkte Kind von <main id="primary" class=
   "kw-main ...">, genau wie beim Seilwinden-Konfigurator (#1103). Dort erzwingt
   components.css `#primary.kw-main > * { margin-top:0; margin-bottom:0; }`
   (Spezifitaet 1-1-0) — hoeher als `.fluentform_wrapper_20` allein (0-1-0) —
   und frisst die 3rem/4rem oben/unten (nachgemessen auf der Schau: 0px/0px
   statt 48px/64px). Gleiches Muster wie kw-konfigurator.css/#1103: Selektor
   auf Spezifitaet 1-2-0 angehoben, nur top/bottom, margin-left/right:auto der
   Regel oben bleibt fuer die Zentrierung erhalten. Greift NICHT auf /holzgreifer/,
   wo Formular 20 innerhalb einer Sektion eingebettet ist (kein direktes Kind). */
#primary.kw-main > .fluentform_wrapper_20 {
  margin-top: 3rem;
  margin-bottom: 4rem;
}

/* ── Modell-Header (JS-injiziert) ─────────────────────── */
#kw-kfg-hg-header {
  background: #8B1A1A;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
#kw-kfg-hg-header .kw-kfg-hg-model {
  font-family: "Josefin Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* ── Form-Body ────────────────────────────────────────── */
.fluentform_wrapper_20 .frm-fluent-form {
  padding: 24px 28px 28px;
}
.fluentform_wrapper_20 .ff-el-group {
  width: 100%;
  margin-bottom: 14px;
}

/* ── Geraete-Mehrfachauswahl ausblenden ────────────────────
 * Body-Klasse kw-konfigurator-hg-page setzt kw-blocks.php ausschliesslich auf
 * dieser Seite (nicht auf /holzgreifer/, wo Formular 20 seine volle
 * Mehrfachauswahl behaelt). Reine CSS-Loesung mit :has() statt einer per JS
 * gesetzten Klasse: FluentForms baut das Feld nach dem eigenen Init neu auf
 * und wirft dabei per JS gesetzte Container-Klassen wieder weg (Verify-Fund
 * #1381 -- selbst Retry+MutationObserver-Netz wie beim Zubehoer-Block auf
 * Seite 91 hielt hier nicht zuverlaessig). Diese Regel ist dagegen
 * unempfindlich, weil sie bei jeder Neuzusammensetzung des Formulars neu
 * ausgewertet wird. Vorauswahl "Holzgreifer" laeuft weiter per JS mit
 * (js/kw-form-context.js), damit die Pflichtfeld-Validierung des Formulars
 * (mindestens ein Geraet) erfuellt bleibt. :has() wird in diesem Stylesheet-
 * Satz bereits an anderer Stelle vorausgesetzt (kw-konfigurator.css:172).
 */
body.kw-konfigurator-hg-page .fluentform_wrapper_20 .ff-el-group:has(input[name="geraete[]"]) {
  display: none !important;
}

/* ── Labels/Inputs/Submit — 1:1 aus kw-konfigurator.css (Form 7) uebernommen */
.fluentform_wrapper_20 .ff-el-input--label label {
  font-family: "Josefin Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  margin-bottom: 5px;
  display: block;
}
.fluentform_wrapper_20 .asterisk { color: #8B1A1A; }

.fluentform_wrapper_20 input:not([type=checkbox]):not([type=radio]),
.fluentform_wrapper_20 select,
.fluentform_wrapper_20 textarea {
  font-family: "PT Serif", Georgia, serif;
  font-size: 0.95rem;
  color: #1a1a1a;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  padding: 9px 12px !important;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fluentform_wrapper_20 input:focus:not([type=checkbox]):not([type=radio]),
.fluentform_wrapper_20 select:focus,
.fluentform_wrapper_20 textarea:focus {
  border-color: #8B1A1A !important;
  box-shadow: 0 0 0 3px rgba(139,26,26,0.1) !important;
  outline: none !important;
}

.fluentform_wrapper_20 .ff_submit_btn_wrapper {
  margin-top: 6px;
  margin-bottom: 0;
  width: 100%;
}
.fluentform_wrapper_20 button[type=submit] {
  font-family: "Josefin Sans", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 7px !important;
  background: #8B1A1A !important;
  border-color: #8B1A1A !important;
  color: #fff !important;
  padding: 15px 32px !important;
  width: 100% !important;
  font-size: 0.95rem !important;
  cursor: pointer;
}
.fluentform_wrapper_20 button[type=submit]:hover {
  background: #6e1414 !important;
  border-color: #6e1414 !important;
}

/* ── Mobile-Latte (Gregor, Fix-Runde 24.08.): Text-Inputs mindestens 44px
 * hoch -- vorher 40px (aus dem 9px/12px-Padding + 1.5px-Border, 0.95rem-Font),
 * Gregors Tap-Ziel-Latte fuer Formulare. Nur min-height ergaenzt, restliche
 * Werte (Padding/Border/Radius) unveraendert, damit die Optik gleich bleibt. */
.fluentform_wrapper_20 input:not([type=checkbox]):not([type=radio]),
.fluentform_wrapper_20 select,
.fluentform_wrapper_20 textarea {
  min-height: 44px;
}