/**
 * Konfigurator-Formular (Seite /konfigurator/, Fluent Form 7)
 *
 * WAS:   Das komplette Erscheinungsbild des Konfigurator-Formulars — Karte,
 *        Bordeaux-Kopfzeile, Abschnitts-Titel, Zubehoer-Kacheln, Eingabefelder,
 *        Absende-Knopf.
 * WARUM: Diese Regeln standen bis #1167 als <style> im Seiteninhalt von Seite 91
 *        und wortgleich in den fuenf Sprachfassungen. Zusammen mit dem Skript
 *        daneben (jetzt js/kw-konfigurator.js) sind sie in das Plugin gezogen —
 *        Regel H4: pages/*.html traegt kein <style>/<script>, das gehoert in
 *        Theme oder Plugin. Inhaltlich unveraendert uebernommen.
 * LADEN: kw-blocks.php, eigener wp_enqueue_scripts-Durchgang mit Prioritaet 100,
 *        damit dieses Blatt NACH dem Stylesheet von Fluent Forms steht. Vorher
 *        stand das <style> im Seitenkoerper und lag damit automatisch zuletzt.
 * SPRACHE: enthaelt keine sichtbaren Texte. Die Beschriftungen kommen aus
 *        Fluent Forms bzw. aus js/kw-konfigurator.js (uebersetzt per __()).
 */

/* ── Wrapper ──────────────────────────────────────────── */
.fluentform_wrapper_7 {
  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;
}
/* #1103: Auf /konfigurator/ (und den 5 Sprachfassungen) ist der Wrapper das
   EINZIGE direkte Kind von <main id="primary" class="kw-main ...">. Dort
   erzwingt components.css `#primary.kw-main > * { margin-top:0; margin-
   bottom:0; }` (Spezifitaet 1-1-0) — hoeher als `.fluentform_wrapper_7`
   allein (0-1-0) — und frisst genau die 3rem/4rem oben, wodurch das
   Formular direkt an Kopf-/Fusszeile stiess (Gregor 10.08.). Fix bleibt in
   dieser Datei: Selektor auf Spezifitaet 1-2-0 angehoben, schlaegt die
   Flush-Regel ohne die Theme-Datei anzufassen. */
#primary.kw-main > .fluentform_wrapper_7 {
  margin-top: 3rem;
  margin-bottom: 4rem;
}

/* ── Modell-Header (JS-injiziert) ─────────────────────── */
#kw-kfg-header {
  background: #8B1A1A;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
#kw-kfg-header .kw-kfg-model {
  font-family: "Josefin Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
#kw-kfg-header .kw-kfg-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 3px;
  font-family: "PT Serif", Georgia, serif;
}
#kw-kfg-header .kw-kfg-badge {
  margin-left: auto;
  background: #8B1A1A;
  color: #fff;
  font-family: "Josefin Sans", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ── Form-Body ────────────────────────────────────────── */
.fluentform_wrapper_7 .frm-fluent-form {
  padding: 24px 28px 28px;
}
.fluentform_wrapper_7 form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  border: none;
  padding: 0;
  margin: 0;
}
.fluentform_wrapper_7 .ff-el-group {
  width: 100%;
  margin-bottom: 14px;
}
.fluentform_wrapper_7 .ff-el-group.ff-col-6 {
  width: calc(50% - 8px);
}

/* ── Section-Titles ───────────────────────────────────── */
.fluentform_wrapper_7 .kw-form-zubehoer > .ff-el-input--label label {
  font-family: "Josefin Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8B1A1A;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.fluentform_wrapper_7 .kw-form-zubehoer > .ff-el-input--label label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}
#kw-kfg-contact-title {
  font-family: "Josefin Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8B1A1A;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  margin-top: 4px;
  width: 100%;
}
#kw-kfg-contact-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}

/* ── Checkbox-Cards (Zubehör) — 2 Spalten × 3 Zeilen Desktop, 1 Spalte mobil */
.fluentform_wrapper_7 .kw-form-zubehoer .ff-el-input--content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 10px;
}
@media (max-width: 540px) {
  .fluentform_wrapper_7 .kw-form-zubehoer .ff-el-input--content {
    grid-template-columns: 1fr;
  }
}

/* ── Sub-Headline "Ausstattung Erweitert" (JS-injiziert in Zubehör-Grid) */
.fluentform_wrapper_7 .kw-zubehoer-divider {
  grid-column: 1 / -1;
  font-family: "Josefin Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8B1A1A;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 2px;
}
.fluentform_wrapper_7 .kw-zubehoer-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}
/* Wenn alle Erweitert-Items per JS ausgeblendet sind, Divider mit ausblenden */
.fluentform_wrapper_7 .kw-zubehoer-divider.is-empty {
  display: none !important;
}
.fluentform_wrapper_7 .kw-form-zubehoer .ff-el-form-check {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid #d4d4d4;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin: 0;
}
.fluentform_wrapper_7 .kw-form-zubehoer .ff-el-form-check:has(input:checked) {
  border-color: #1a1a1a;
  background: #fafafa;
}
.fluentform_wrapper_7 .kw-form-zubehoer .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
  margin: 0;
  font-family: "PT Serif", Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
.fluentform_wrapper_7 .kw-form-zubehoer input[type=checkbox] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 4px;
  border: 1.5px solid #ccc;
  background: #fff;
  cursor: pointer;
  margin: 0;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.fluentform_wrapper_7 .kw-form-zubehoer input[type=checkbox]:checked {
  background: #8B1A1A !important;
  border-color: #8B1A1A !important;
}
.fluentform_wrapper_7 .kw-form-zubehoer input[type=checkbox]:checked::after {
  content: "✓";
  position: absolute;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* ── Labels ───────────────────────────────────────────── */
.fluentform_wrapper_7 .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_7 .asterisk { color: #8B1A1A; }

/* ── Inputs & Select ──────────────────────────────────── */
.fluentform_wrapper_7 input:not([type=checkbox]):not([type=radio]),
.fluentform_wrapper_7 select {
  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_7 input:focus:not([type=checkbox]):not([type=radio]),
.fluentform_wrapper_7 select:focus {
  border-color: #8B1A1A !important;
  box-shadow: 0 0 0 3px rgba(139,26,26,0.1) !important;
  outline: none !important;
}

/* Land-Select: stärker hervorgehoben */
.fluentform_wrapper_7 select[name=land] {
  font-weight: 600;
  font-size: 1rem !important;
  border-color: #1a1a1a !important;
}

/* ── Radio-Buttons ────────────────────────────────────── */
.fluentform_wrapper_7 .ff-el-group--inline .ff-el-input--content,
.fluentform_wrapper_7 .ff-el-group .ff-el-group--inline .ff-el-input--content {
  display: flex;
  gap: 10px;
}
.fluentform_wrapper_7 .ff-el-group--inline .ff-el-form-check {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1.5px solid #d4d4d4;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s, background 0.15s;
}
.fluentform_wrapper_7 .ff-el-group--inline .ff-el-form-check:has(input:checked) {
  border-color: #1a1a1a;
  background: #fafafa;
}
.fluentform_wrapper_7 .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "PT Serif", Georgia, serif;
  font-size: 0.9rem;
  color: #555;
  cursor: pointer;
  margin: 0;
}
.fluentform_wrapper_7 input[type=radio] {
  appearance: auto !important;
  -webkit-appearance: radio !important;
  accent-color: #8B1A1A;
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
}

/* ── Submit ───────────────────────────────────────────── */
.fluentform_wrapper_7 .ff_submit_btn_wrapper {
  margin-top: 6px;
  margin-bottom: 0;
  width: 100%;
}
.fluentform_wrapper_7 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;
  /* #1274 (A5): Fluent-Forms-Grundstil rendert <button> ohne Umbruch (Browser-
     Default fuer Formularsteuerelemente) -- das Label "Unverbindliches Angebot
     anfordern" lief bei 375px ueber den Knopf hinaus und wurde abgeschnitten.
     white-space:normal erlaubt Umbruch, height:auto/min-height haelt das
     Tap-Ziel bei >=1 Zeile weiterhin >=44px. */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  height: auto !important;
  min-height: 44px !important;
  line-height: 1.3 !important;
}
.fluentform_wrapper_7 button[type=submit]:hover {
  background: #6e1414 !important;
  border-color: #6e1414 !important;
}

/* ── M-Serie: Zubehör versteckt ───────────────────────── */
.fluentform_wrapper_7 .kw-zubehoer-hidden {
  display: none !important;
}

/* ── Q-Serie: Endabschalter nicht kompatibel (SSOT endabschalter.md) ── */
.fluentform_wrapper_7 .kw-form-zubehoer .ff-el-form-check.kw-option-hidden {
  display: none !important;
}

/* ── #1329: Mobil-Layout unter 768px ─────────────────────
 * Alles hier gilt NUR unter 768px, damit der Desktop-Stand (Zwei-Spalten-
 * Paare, dunkles Land-Feld-Auge, schmalere Kontakt-Karten) unangetastet
 * bleibt -- Ticket-Vorgabe "Desktop darf sich NICHT ändern". Gemessen auf
 * der Schau bei 375x812, /konfigurator/?modell=BG+1.0+M&serie=BG.
 */
@media (max-width: 767px) {
  /* 1) Formular einspaltig statt Vorname/Nachname + Land/PLZ nebeneinander
     (135px schmale Felder). Loest auch Befund 2 (Land-Select schneidet
     seinen Text "bitte wählen" ab, scrollWidth 145 > clientWidth 133 bei
     135px Breite) -- volle Breite gibt dem Select genug Platz. */
  .fluentform_wrapper_7 .ff-el-group.ff-col-6 {
    width: 100%;
  }

  /* 3) Land-Select an Rahmen/Schriftgroesse der uebrigen Felder angleichen.
     Vorher: border 1.5px solid #1a1a1a (fast schwarz) + font-weight 600
     gegen border #e0e0e0 (hellgrau) + 0.95rem bei allen anderen Feldern --
     wirkte wie ein Fehler-/Pflichtfeld-Hervorhebung. */
  .fluentform_wrapper_7 select[name=land] {
    font-weight: 400;
    font-size: 0.95rem !important;
    border-color: #e0e0e0 !important;
  }

  /* 4) Kontakt-Karten (E-Mail/Telefon/WhatsApp) gleich breit. flex:1 setzt
     flex-basis:0% bereits, aber der Flexbox-Default min-width:auto klemmt
     jede Karte an ihrer Inhaltsbreite fest (E-Mail 76px, Telefon 96px,
     WhatsApp 115px gemessen) -- "E-Mail" brach dadurch nach "E-" um.
     min-width:0 hebt die Klemme auf, alle drei wachsen gleich. */
  .fluentform_wrapper_7 .ff-el-group--inline .ff-el-form-check {
    min-width: 0;
  }

  /* 6) Eingabefelder/Select mind. 44px hoch (Mobile-First-Gate Tap-Ziel),
     gemessen vorher 41.5px. */
  .fluentform_wrapper_7 input:not([type=checkbox]):not([type=radio]),
  .fluentform_wrapper_7 select {
    min-height: 44px;
  }

  /* 7) main.kw-main--page hatte padding-top/-bottom:0 -- ergaenzt zusaetzlich
     zur Wrapper-Randmarge (#1103) sichtbare Luft ueber/unter der Karte. */
  main.kw-main--page {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  /* 5) .kw-lang-hint (position:fixed, bottom:0, ~87px hoch inkl.
     safe-area-inset, z-index 900, css/lang-hint.css) legt sich sonst ueber
     die unterste Formularzeile, weil body kein padding-bottom bekommt. */
  body {
    padding-bottom: 100px;
  }
}