/* ===========================================================
   DWX Direct Form
   Optik 1:1 vom Popup-Formular uebernommen (am Live-Formular gemessen):

     Eingabefeld  54px hoch, Innenabstand 0 16px, Rahmen 1px #e5e7eb,
                  Radius 12px, 16px/28px, Hintergrund #f9fafb, Text #111
     Textarea     Innenabstand 14px 16px, Radius 12px
     Button       #111, weiss, Radius 50px (Pille), 12.8px 28.8px,
                  16px, 600, kein Rahmen, volle Breite
     Spalte       Innenabstand 0 7px, Abstand unten 14px
     Zeile        Aussenabstand 0 -7px  (ergibt 14px Spaltenabstand)

   KEIN eigener Hintergrund, KEIN eigener Innenabstand, KEIN Rahmen.
   Das Formular uebernimmt den Hintergrund des Containers, in dem es
   steht - genau wie das Elementor-Formular.
   =========================================================== */

.dwx-df{
  --dwx-field-bg:#f9fafb;
  --dwx-field-border:#e5e7eb;
  --dwx-field-text:#111111;
  --dwx-placeholder:#9ca3af;
  --dwx-btn-bg:#111111;
  --dwx-btn-text:#ffffff;
  --dwx-radius:12px;
  --dwx-gutter:7px;

  background:none;
  border:0;
  padding:0;
  margin:0;
  font-family:inherit;
  color:inherit;
  box-sizing:border-box;
}
.dwx-df *,
.dwx-df *::before,
.dwx-df *::after{box-sizing:border-box}

.dwx-df form{margin:0}

/* Ueberschrift nur, wenn per Shortcode gesetzt. Erbt die Farbe. */
.dwx-df__title{
  margin:0 0 4px;
  font-size:24px;
  line-height:1.25;
  font-weight:700;
  color:inherit;
}
.dwx-df__sub{
  margin:0 0 16px;
  font-size:15px;
  color:inherit;
  opacity:.75;
}

/* Spaltenraster wie bei Elementor: negativer Aussenabstand + Innenabstand */
.dwx-df__row{
  display:flex;
  flex-wrap:wrap;
  margin:0 calc(var(--dwx-gutter) * -1);
}
.dwx-df__col{
  flex:0 0 50%;
  max-width:50%;
  padding:0 var(--dwx-gutter);
  margin-bottom:14px;
  min-width:0;
}
.dwx-df__col--full{flex:0 0 100%;max-width:100%}

.dwx-df input[type=text],
.dwx-df input[type=email],
.dwx-df input[type=tel],
.dwx-df textarea{
  display:block;
  width:100%;
  background:var(--dwx-field-bg);
  color:var(--dwx-field-text);
  border:1px solid var(--dwx-field-border);
  border-radius:var(--dwx-radius);
  font-size:16px;              /* 16px verhindert das Zoomen auf iOS */
  line-height:28px;
  font-family:inherit;
  -webkit-appearance:none;
  appearance:none;
}
.dwx-df input[type=text],
.dwx-df input[type=email],
.dwx-df input[type=tel]{height:54px;padding:0 16px}

.dwx-df textarea{padding:14px 16px;min-height:142px;resize:vertical}

.dwx-df input::placeholder,
.dwx-df textarea::placeholder{color:var(--dwx-placeholder);opacity:1}

/* Das Theme (Impreza) setzt global einen rosa Fokusrahmen:
     input:not([type=submit]):focus{box-shadow:0 0 0 2px #e95095}
   Der wird hier ueberschrieben - Fokus ist schwarz, passend zum Button. */
.dwx-df input[type=text]:focus,
.dwx-df input[type=email]:focus,
.dwx-df input[type=tel]:focus,
.dwx-df textarea:focus{
  outline:none !important;
  border-color:#111111 !important;
  box-shadow:0 0 0 2px rgba(17,17,17,.25) !important;
}

/* Kein roter/rosa Rahmen nur weil ein Pflichtfeld noch leer ist.
   Browser (vor allem Firefox) faerben :invalid von sich aus ein. */
.dwx-df input:invalid,
.dwx-df textarea:invalid{box-shadow:none}

/* Einwilligung - grosse Trefferflaeche, das war auf dem Handy das Problem */
.dwx-df__consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 var(--dwx-gutter) 16px;
  cursor:pointer;
  padding:4px 0;
}
.dwx-df__consent input[type=checkbox]{
  flex:0 0 auto;
  width:22px;
  height:22px;
  margin:3px 0 0;
  accent-color:#111111;
  cursor:pointer;
}
.dwx-df__consent span{
  font-size:14px;
  line-height:1.5;
  color:inherit;
  opacity:.85;
}
.dwx-df__consent a{color:inherit;text-decoration:underline}

.dwx-df__btnwrap{padding:0 var(--dwx-gutter)}

/* Das Theme setzt eigene Regeln auf jeden Submit-Button:
     button[type=submit]:not(.w-btn){font-size:20px;border-radius:.3em;padding:.8em 1.8em}
     .no-touch button[type=submit]:not(.w-btn):hover{background:#999;border-color:red;color:#fff!important}
   Deshalb hier mit hoeherer Spezifitaet und !important dagegenhalten,
   sonst wird der Button gross, eckig und beim Darueberfahren grau mit
   rotem Rahmen. */
.dwx-df button[type="submit"].dwx-df__btn,
.dwx-df button[type="submit"].dwx-df__btn:hover,
.dwx-df button[type="submit"].dwx-df__btn:focus{
  display:block;
  width:100%;
  background:var(--dwx-btn-bg) !important;
  color:var(--dwx-btn-text) !important;
  border:0 !important;
  border-radius:50px !important;
  padding:12.8px 28.8px !important;
  font-size:16px !important;
  font-weight:600 !important;
  font-family:inherit;
  line-height:1.5 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  cursor:pointer;
  box-shadow:none !important;
  -webkit-appearance:none;
  appearance:none;
}
.dwx-df button[type="submit"].dwx-df__btn:hover{opacity:.88}

/* Waehrend des Sendens: Button gesperrt, sichtbar "beschaeftigt" */
.dwx-df button[type="submit"].dwx-df__btn:disabled,
.dwx-df button[type="submit"].dwx-df__btn.is-sending{
  opacity:.65;
  cursor:progress;
  pointer-events:none;
}
.dwx-df__btnlabel{display:inline-flex;align-items:center;gap:10px;justify-content:center}

/* Kleiner Kreis, der sich dreht - erscheint nur beim Senden */
.dwx-df__btn.is-sending .dwx-df__btnlabel::before{
  content:"";
  width:16px;
  height:16px;
  flex:0 0 16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#ffffff;
  border-radius:50%;
  animation:dwx-df-spin .7s linear infinite;
}
@keyframes dwx-df-spin{to{transform:rotate(360deg)}}

/* Wer Bewegung reduziert haben moechte, bekommt keinen drehenden Kreis */
@media (prefers-reduced-motion:reduce){
  .dwx-df__btn.is-sending .dwx-df__btnlabel::before{animation:none}
}

.dwx-df__phone{
  margin:12px 0 0;
  padding:0 var(--dwx-gutter);
  text-align:center;
  font-size:15px;
  color:inherit;
  opacity:.85;
}
.dwx-df__phone a{color:inherit;text-decoration:none;font-weight:700}

/* Honeypot - fuer Menschen unsichtbar, fuer Bots sichtbar */
.dwx-df__hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* Handy: alles untereinander */
/* Handy: Vorname/Nachname, E-Mail/Telefon, Ort/PLZ bleiben 2 pro Zeile */
@media (max-width:767px){
  .dwx-df{--dwx-gutter:5px}
  .dwx-df__col{flex:0 0 50%;max-width:50%}
  /* Nachricht bleibt ueber die volle Breite - diese Zeile MUSS nach der
     Zeile darueber stehen, sonst zieht sie das Textfeld auf 50%. */
  .dwx-df__col--full{flex:0 0 100% !important;max-width:100% !important}
  .dwx-df input[type=text],
  .dwx-df input[type=email],
  .dwx-df input[type=tel]{height:50px;padding:0 12px}
  .dwx-df textarea{padding:12px}
  .dwx-df__title{font-size:20px}
}