/* =========================================================
   Formdesk – Ruhiges Layout (Full Replace) – v3.1 (schmal)
   Ziel: schmaler, mobil stabil, keine roten Pflichtfeldrahmen,
         Button modern, Preisblock minimal
   ========================================================= */

/* ---------- 0) Safety / Reset ---------- */
form, form * { box-sizing: border-box; }

/* ---------- 1) FORM-BREITE (HIER war der Grund fürs “breit”) ---------- */
/* Schmaler Look auf Desktop, aber trotzdem responsive */
form{
  width: 100% !important;
  max-width: 560px !important;     /* <<< WICHTIG: schmaler als vorher (820) */
  margin: 0 auto !important;
  padding: 8px 14px !important;
  font-size: 16px;
}

@media (max-width: 600px){
  form{
    max-width: 100% !important;
    padding: 8px 10px !important;
  }
}

/* ---------- 2) KRITISCH: Table-Layout Fix (Breite springt bei Eingabe) ---------- */
form table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
}

form td, form th{
  min-width: 0 !important;
  max-width: 100% !important;
  vertical-align: top;
}

/* Inputs dürfen niemals Breite erzwingen */
form input,
form textarea,
form select{
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Lange Inhalte umbrechen statt Layout sprengen */
form label,
form .Question,
form .question,
form .field,
form .row,
form .form-row{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- 3) Typo / Labels / Hilfetexte ---------- */
form label{
  display: inline-block;
  margin-bottom: 6px;
  line-height: 1.25;
  color: #0f172a;
  font-weight: 600;
}

form .help,
form .hint,
form .description,
form .info,
form small{
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.35;
}

/* ---------- 4) Inputs – ruhig & einheitlich ---------- */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="number"],
form input[type="date"],
form input[type="time"],
form select,
form textarea,
form input.Answer,
form select.Answer,
form textarea.Answer{
  width: 100% !important;
  border: 1px solid #d6dbe1 !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

form .item-container{
  max-width: 100% !important;
}

/* Fokus */
form input:focus,
form select:focus,
form textarea:focus{
  outline: none !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.35) !important;
}

form textarea{ min-height: 120px; resize: vertical; }

/* ---------- 5) Abstände ---------- */
form .Question,
form .question,
form .field,
form .row,
form .form-row,
form fieldset{
  margin-bottom: 14px;
}

/* ---------- 6) Pflichtfeld-Rahmen: nicht rot (nur Fehler rot) ---------- */
form fieldset,
form .Question,
form td.Question,
form .required,
form .mandatory,
form .pflicht,
form .fd-required,
form .fd-mandatory,
form td[class^="Custom"],
form td[class*=" Custom"]{
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
  outline: none !important;
}

form .error,
form .has-error,
form .fd-error,
form fieldset.error,
form fieldset.has-error,
form fieldset.fd-error{
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

/* ---------- 7) Preisblock – minimal ---------- */
form [class*="preis"] input,
form [class*="Preis"] input{
  font-weight: 700;
}

/* ---------- 8) Buttons – zuverlässig stylen (btnSubmit / .Button) ---------- */
form input#btnSubmit.Button,
form #btnSubmit,
form input.Button[type="button"],
form input[type="submit"],
form button[type="submit"]{
  background-image: none !important;
  background-color: #0f172a !important;
  background: #0f172a !important;

  -webkit-appearance: none !important;
  appearance: none !important;

  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  border-radius: 12px !important;

  width: 100% !important;
  max-width: 520px !important;
  display: block !important;
  margin: 10px auto 0 auto !important;

  padding: 14px 18px !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.2px !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  cursor: pointer !important;
}

form input#btnSubmit.Button:hover,
form #btnSubmit:hover,
form input.Button[type="button"]:hover,
form input[type="submit"]:hover,
form button[type="submit"]:hover{
  filter: brightness(1.05) !important;
}

form input#btnSubmit.Button:focus,
form #btnSubmit:focus,
form input.Button[type="button"]:focus,
form input[type="submit"]:focus,
form button[type="submit"]:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.18) !important;
}

/* ---------- 9) Mobile: zweispaltige Zeilen stapeln ---------- */
@media (max-width: 600px){
  form tr{ display: block !important; }
  form td{ display: block !important; width: 100% !important; }
}