/* ==========================================================================
 * Offertformulare: Barrierefreiheit und Mobil (Review 29.10.2026, Paket C)
 * Schnell-Offerte (wf-offerte, wf-offerte-neu) und Detail-Offerte (kk-form).
 * Wird nach _template/css/style.css geladen (functions.php, Handle wf-formulare-a11y).
 *
 * Kontraste (WCAG 2.1 AA, Text >= 4.5:1, Bedienelemente >= 3:1):
 *   #1a1a1a auf #ffcc00  11.5:1   Ueberschriften, Legend, Schritt-Navigation, Labels
 *   #942642 auf #ffcc00   5.0:1   Fehlertext, aktiver Schritt, Rahmen ungueltiger Felder
 *   #942642 auf #ffffff   7.5:1   Fehlertext auf weissem Hintergrund
 *   #555555 auf #f7f7f7   7.0:1   Schrittnummer (inaktiv)
 *   (vorher: #ffffff auf #ffcc00 1.5:1, #dc3545 auf #ffcc00 3.0:1, #999 auf #f7f7f7 2.6:1)
 * ========================================================================== */

/* --- C7: Ueberschriften und Schritt-Navigation auf Gelb ------------------- */
.fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container span.h2,
.fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container span.h2 {
  color: #1a1a1a; }

.kk-form-steps legend,
.kk-form-steps span.step-text {
  color: #1a1a1a; }

.kk-form-steps .active_step span.step-text {
  color: #942642; }

.fl-module-kk-form .kk-form.kk-form-steps .step-nav > .step-nav-item .step_num {
  color: #555; }

/* --- C7/C9: Fehlermeldungen ------------------------------------------------ */
.wf-offerte .invalid-feedback,
.kk-form .invalid-feedback {
  display: block;
  color: #942642;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 6px; }

.wf-offerte .fv-feedback::before,
.kk-form .fv-feedback::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23942642'/%3E%3Crect x='10.75' y='5.5' width='2.5' height='9' rx='1.25' fill='%23fff'/%3E%3Ccircle cx='12' cy='18' r='1.5' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; }

/* Ungueltige Felder: die Schnell-Offerte hat border: 0, darum ein innerer Rahmen ohne Layoutsprung */
.wf-offerte .wf-offerte-form-container .form-control.is-invalid {
  box-shadow: inset 0 0 0 2px #942642; }

.kk-form .form-control.is-invalid {
  border-color: #942642; }

/* Sichtbarer Fokus auf Gelb */
.wf-offerte .wf-offerte-form-container .form-control:focus,
.kk-form-steps .form-control:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #1a1a1a; }

.wf-offerte .wf-offerte-form-container .form-control.is-invalid:focus,
.kk-form-steps .form-control.is-invalid:focus {
  box-shadow: inset 0 0 0 2px #942642, 0 0 0 3px #1a1a1a; }

/* --- C8: Labels der Schnell-Offerte --------------------------------------- */
.wf-offerte .wf-offerte-form-container .wf-label {
  display: block;
  margin: 0 0 6px;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0; }

/* Sprache ist nur bei International sichtbar (offerte-script.php blendet die input-group ein/aus) */
.wf-offerte .wf-offerte-form-container .wf-label:has(+ .input-group[style*="none"]) {
  display: none; }

/* Mit Labels etwas weniger Abstand zwischen den Feldern */
.fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .input-group,
.fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .input-group {
  margin-bottom: 22px; }

/* Icon und Verlauf rechts bleiben beim Feld, auch wenn darunter eine Fehlermeldung steht */
.wf-offerte .wf-offerte-form-container .input-group .input-group-append {
  bottom: auto;
  height: 50px; }

/* --- C11: Mobil ------------------------------------------------------------ */
/* 16 px verhindert das automatische Zoomen von iOS beim Fokus */
.fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .form-control,
.fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .form-control,
.fl-module-kk-form .kk-form .form-control {
  font-size: 16px; }

/* type="email"/"tel" wie bisher type="text" (style.css kennt nur [type='text']) */
.fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .form-control[type='email'],
.fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .form-control[type='tel'],
.fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .form-control[type='email'],
.fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .form-control[type='tel'] {
  padding: 0 15px 0;
  height: 50px !important;
  line-height: 50px !important; }

@media (min-width: 768px) {
  .fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .form-control[type='email'],
  .fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .form-control[type='tel'],
  .fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .form-control[type='email'],
  .fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .form-control[type='tel'] {
    padding: 0 20px 0; } }

/* Doppelspalten mobil einspaltig (no-gutters-Zeilen macht style.css schon so) */
@media (max-width: 767.98px) {
  .fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .row:not(.no-gutters) > .col-6,
  .fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .row:not(.no-gutters) > .col-6 {
    flex: 0 0 100%;
    max-width: 100%; }
  .fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .btn-link,
  .fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .btn-link {
    margin-bottom: 10px; } }

/* Schritt 2 (Kontaktdaten) und Schritt 3 (Wunschtermin) haben no-gutters-Zeilen: nebeneinanderliegende
   Felder stiessen ohne Abstand aneinander. Ab Tablet gleicher Spaltenabstand wie in Schritt 1 (30 px),
   aussen 15 px wie im Theme (sonst nicht buendig mit den uebrigen Zeilen); mobil stehen die Felder in Schritt 2 untereinander, Schritt 3 bleibt einzeilig (8 px) */
@media (min-width: 768px) {
  .fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .row.no-gutters > [class*='col-'],
  .fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .row.no-gutters > [class*='col-'] {
    padding-left: 15px;
    padding-right: 15px; }
  .fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .row.no-gutters > [class*='col-']:first-child,
  .fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .row.no-gutters > [class*='col-']:first-child {
    padding-left: 15px; }
  .fl-module-wf-offerte .wf-offerte .wf-offerte-form .wf-offerte-form-container .row.no-gutters > [class*='col-']:last-child,
  .fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .wf-offerte-form-container .row.no-gutters > [class*='col-']:last-child {
    padding-right: 15px; } }
@media (max-width: 767.98px) {
  .fl-module-wf-offerte .wf-offerte .wf-offerte-form .step_3 .row.no-gutters > [class*='col-']:not(:last-child),
  .fl-module-wf-offerte-neu .wf-offerte .wf-offerte-form .step_3 .row.no-gutters > [class*='col-']:not(:last-child) {
    padding-right: 8px; } }

/* --- C21: Chatbot (AI Engine) auf Seiten mit Formular mobil klein ------------ */
@media (max-width: 767.98px) {
  body:has(.fl-module-wf-offerte, .fl-module-wf-offerte-neu, .fl-module-kk-form) .mwai-trigger .mwai-icon-text-container {
    display: none !important; }
  body:has(.fl-module-wf-offerte, .fl-module-wf-offerte-neu, .fl-module-kk-form) .mwai-trigger .mwai-icon-container,
  body:has(.fl-module-wf-offerte, .fl-module-wf-offerte-neu, .fl-module-kk-form) .mwai-trigger .mwai-icon {
    width: 60px !important;
    height: 50px !important;
    max-width: 60px !important;
    max-height: 50px !important; }
  /* Fokus/Scrollen (auch Sprung zum ersten Fehler) laesst unten Platz fuer den Knopf */
  html:has(.fl-module-wf-offerte, .fl-module-wf-offerte-neu, .fl-module-kk-form) {
    scroll-padding-bottom: 90px; } }