/* ============================================================
   Fluent Forms an das Design von cw-inter.net angleichen

   Grundsatz: Diese Datei bildet nur die Markup-Unterschiede ab.
   Farben, Radien und Fokus-Zustände kommen weiter aus den Tokens
   in style.css – hier wird nichts doppelt definiert.

   Die Selektoren beziehen sich auf die Klassen, die Fluent Forms
   ausgibt (.ff-el-group, .ff-el-form-control, .ff-el-input--label …);
   gegen die tatsächliche Ausgabe von Fluent Forms 6.2 geprüft.

   Warum jede Regel mit "body " beginnt: Fluent Forms lädt sein
   Stylesheet erst beim Rendern des Shortcodes, also nach dem Theme.
   Bei gleicher Spezifität gewinnt sonst das Plugin – am deutlichsten
   bei der Textfarbe der Eingabefelder, die auf dunklem Grund kaum
   lesbar wäre. Das zusätzliche "body" hebt die Spezifität an, ohne
   dass irgendwo !important nötig ist.
   ============================================================ */

/* Formular-Rahmen wie .form aus dem Hauptstylesheet */
body .cw-form .frm-fluent-form{
  display:grid;gap:1.25rem;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(1.5rem,4vw,2.5rem);
}

/* Feldgruppe entspricht .field */
body .cw-form .ff-el-group{
  display:grid;gap:.5rem;align-content:start;margin:0;
}

/* Label entspricht .field label */
body .cw-form .ff-el-input--label label{
  font-family:"Montserrat",sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:.04em;color:var(--text);margin:0;
}
body .cw-form .ff-el-is-required.asterisk-right label:after{color:var(--magenta);}

/* Eingabefelder entsprechen .form input / select / textarea */
body .cw-form .ff-el-form-control{
  width:100%;font:inherit;font-size:.95rem;color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.85rem 1rem;align-self:start;
  transition:border-color .25s,box-shadow .25s,background-color .25s;
}
body .cw-form textarea.ff-el-form-control{min-height:170px;resize:vertical;line-height:1.6;}
body .cw-form .ff-el-form-control::placeholder{color:#6b6b73;}
body .cw-form .ff-el-form-control:hover{border-color:rgba(255,255,255,.18);}
body .cw-form .ff-el-form-control:focus{
  outline:none;border-color:var(--cyan);
  background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(0,201,177,.18);
}

/* Dropdown mit eigenem Pfeil */
body .cw-form select.ff-el-form-control{
  appearance:none;-webkit-appearance:none;padding-right:2.75rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;
}
body .cw-form select.ff-el-form-control option{background:var(--surface);color:var(--text);}

/* Hinweistext entspricht .field__hint.
   Fluent Forms stellt ihn vor das Eingabefeld; die Reihenfolge dreht ihn
   darunter, wie im Entwurf. Voraussetzung ist die Einstellung
   "Help Message Placement: after_label", sonst rendert das Plugin
   stattdessen ein Tooltip-Symbol neben der Beschriftung. */
body .cw-form .ff-el-input--content{display:flex;flex-direction:column;gap:.5rem;}
body .cw-form .ff-el-help-message{order:2;font-size:.76rem;color:var(--text-leise);margin:0;}

/* Zweispaltige Zeilen: Fluent Forms setzt flex-basis inline auf die Zellen,
   das Raster hier überschreibt das. Spaltenzahl kommt aus ff_columns_total_*,
   nicht aus auto-fit – sonst entstehen leere Spuren. */
body .cw-form .ff-t-cell{padding:0;flex-basis:auto !important;}
body .cw-form .ff-t-container{display:grid;gap:1.25rem;grid-template-columns:1fr;}
@media (min-width:640px){
  body .cw-form .ff-t-container.ff_columns_total_2{grid-template-columns:1fr 1fr;}
  body .cw-form .ff-t-container.ff_columns_total_3{grid-template-columns:repeat(3,1fr);}
}

/* Abschnitte (Section Break) – Gegenstück zu .form__step mit legend.
   Die Nummer kommt aus einem CSS-Zähler, steht also nicht im Formulartext
   und verschiebt sich nicht, wenn ein Abschnitt dazukommt. */
body .cw-form .frm-fluent-form{counter-reset:cw-schritt;}
body .cw-form .ff-el-section-break{
  counter-increment:cw-schritt;
  margin:0;padding:0;border-top:0;
  display:grid;gap:.35rem;
}
/* Trennlinie nur zwischen Abschnitten. Über ":first-child" ginge das nicht:
   Fluent Forms stellt versteckte Felder voran, der erste Abschnitt ist also
   nie das erste Kind. */
body .cw-form .ff-el-group ~ .ff-el-section-break,
body .cw-form .ff-t-container ~ .ff-el-section-break{
  margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--border);
}
body .cw-form .ff-el-section-title{
  display:flex;align-items:center;gap:.75rem;margin:0;
  font-family:"Montserrat",sans-serif;font-size:1.05rem;font-weight:800;
  letter-spacing:-.01em;color:var(--text);
}
body .cw-form .ff-el-section-title::before{
  content:counter(cw-schritt);
  width:1.9rem;height:1.9rem;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-size:.85rem;font-weight:800;color:#fff;background:var(--grad-btn);
}
body .cw-form .ff-section_break_desk{font-size:.85rem;color:var(--text-muted);margin:0;}
/* Die Trennlinie des Plugins ersetzt der Rahmen oben */
body .cw-form .ff-el-section-break hr{display:none;}

/* Felder, deren Beschriftung schon in der Abschnittsüberschrift steht */
body .cw-form .cw-ohne-label > .ff-el-input--label,
body .cw-form .ff-el-group.cw-dsgvo > .ff-el-input--label{display:none;}

/* Mehrfachauswahl als Kacheln – Gegenstück zu .choice-grid / .choice */
/* Wichtig: Das Padding sitzt am Label, nicht am Rahmen. Nur so deckt das
   Label die ganze Kachel ab und die komplette Fläche schaltet die Checkbox.
   Mit Padding am Rahmen bliebe außen ein toter Rand, auf dem Klicks
   verpuffen. */
body .cw-form .ff-el-group.cw-kacheln .ff-el-form-check{
  position:relative;display:flex;margin:0;padding:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  transition:border-color .3s,background-color .3s,transform .3s var(--ease);
}
body .cw-form .ff-el-group.cw-kacheln .ff-el-form-check-label{
  flex:1;display:flex;align-items:flex-start;gap:.7rem;
  margin:0;padding:1rem 1.1rem;cursor:pointer;
  font-family:"Montserrat",sans-serif;font-size:.9rem;font-weight:700;color:var(--text);
}
/* Tastaturbedienung sichtbar machen */
body .cw-form .ff-el-group.cw-kacheln .ff-el-form-check:has(input:focus-visible){
  outline:2px solid var(--cyan);outline-offset:3px;
}
/* Nur der Inhalts-Container wird zum Raster – Fluent Forms legt daneben
   noch einen Label-Container in dieselbe Ebene. */
body .cw-form .ff-el-group.cw-kacheln .ff-el-input--content{
  display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
}
body .cw-form .ff-el-group.cw-kacheln .ff-el-form-check:hover{
  transform:translateY(-3px);border-color:rgba(255,255,255,.2);
}
body .cw-form .ff-el-group.cw-kacheln input[type="checkbox"]{
  width:1.1rem;height:1.1rem;flex:none;margin:.2rem 0 0;accent-color:var(--cyan);cursor:pointer;
}
body .cw-form .ff-el-group.cw-kacheln .ff-el-form-check:has(input:checked){
  border-color:var(--cyan);
  background:linear-gradient(180deg,rgba(0,201,177,.10),rgba(0,201,177,.03));
}

/* DSGVO-Zustimmung entspricht .checkbox */
body .cw-form .ff-el-group.cw-dsgvo .ff-el-form-check{
  display:flex;align-items:flex-start;gap:.8rem;
  font-size:.85rem;color:var(--text-muted);line-height:1.6;
}
body .cw-form .ff-el-group.cw-dsgvo a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;}

/* Absenden-Button entspricht .btn.btn--primary */
body .cw-form .ff-btn-submit{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.7rem;border-radius:999px;border:1px solid transparent;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:.95rem;
  background:var(--grad-btn);color:#fff;cursor:pointer;
  box-shadow:0 8px 24px -10px rgba(224,0,94,.8);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
body .cw-form .ff-btn-submit:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 38px -12px rgba(255,107,0,.75);
}

/* Meldungen nach dem Absenden */
body .cw-form .ff-message-success{
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cyan);
  border-radius:var(--r-md);padding:1.15rem 1.35rem;color:var(--text);
}
body .cw-form .error.text-danger,
body .cw-form .ff-el-is-error .ff-el-form-control{border-color:var(--magenta);}
body .cw-form .error.text-danger{color:var(--magenta);font-size:.8rem;}