/* ==========================================================================
   KI CREW – Anfrage-, Kontakt- und Produktformular

   Nur Raster, Zustände und Meldungen. Die Grundstile der Felder
   (.kc-input, .kc-select, .kc-textarea, .kc-checkfield, .kc-notice,
   .kc-field--error) stehen in base.css und werden hier NICHT wiederholt.

   Reihenfolge der Stylesheets: fonts -> base -> form -> home/angebot/pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sektion und Kopfbereich: Überschrift, kurzer Balken, Unterzeile
   -------------------------------------------------------------------------- */

.kc-form-section {
  /*
   * Der Container ist 1560px breit (Nachtrag 10.1). Eingabefelder werden dabei
   * unlesbar lang, deshalb bleibt das Formular schmal und linksbündig.
   */
  --kc-form-width: 960px;
}

.kc-form-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kc-space-2);
  max-width: var(--kc-form-width);
  margin: 0 0 var(--kc-space-4);
}

.kc-form-section__head .kc-h2 {
  flex: 0 0 100%;
  margin: 0;
}

.kc-form-section__head .kc-rule {
  flex: 0 0 auto;
  margin: 0;
}

.kc-form-section__subline {
  flex: 1 1 320px;
  margin: 0;
  color: var(--kc-fg-muted);
  font-size: var(--kc-size-small);
  line-height: 1.55;
}

.kc-form-section .kc-form {
  max-width: var(--kc-form-width);
}

/* --------------------------------------------------------------------------
   Feldraster

   Zwei Spalten und der Umbruch auf eine Spalte kommen aus base.css.
   Hier nur die Feinheiten des Formularkontexts.
   -------------------------------------------------------------------------- */

/* Sicherheitsnetz gegen waagerechtes Scrollen auf schmalen Schirmen. */
.kc-form .kc-input,
.kc-form .kc-select,
.kc-form .kc-textarea {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Fußzeile: Einwilligung links, Absende-Button rechts
   -------------------------------------------------------------------------- */

.kc-form__foot .kc-field {
  flex: 1 1 320px;
  gap: var(--kc-space-1);
}

.kc-form__actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.kc-form .kc-checkfield {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Meldungen

   Rahmen, Radius und Flächen liefert base.css. Hier Abstand, Icon-Kreis
   und Textblock. Die Erfolgsmeldung wird per JS fokussiert – der Rahmen
   in Flieder ist ihr einziger Farbakzent.
   -------------------------------------------------------------------------- */

.kc-form-section .kc-notice {
  max-width: var(--kc-form-width);
  margin: 0 0 var(--kc-space-3);
}

.kc-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--kc-radius-pill);
  background: var(--kc-accent);
  color: var(--kc-white);
}

.kc-notice__glyph {
  display: block;
}

.kc-notice__text {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Fehlerzustände

   Farbe und Rahmenstärke setzt base.css (Schwarz, keine zusätzliche
   Buntfarbe – CD 1). Hier nur Abstand und Ausrichtung der Meldung.
   -------------------------------------------------------------------------- */

.kc-field__error {
  margin: 0;
}

.kc-form__foot .kc-field__error {
  padding-left: calc(20px + var(--kc-space-2));
}

/* --------------------------------------------------------------------------
   Honeypot: für Menschen unsichtbar, für Bots ausfüllbar.
   Das Feld wird aus dem Sichtfeld geschoben – bewusst kein display:none und
   kein hidden-Attribut, sonst überspringen Bots es. Nicht überschreiben.
   -------------------------------------------------------------------------- */

.kc-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .kc-form__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .kc-form__actions {
    margin-left: 0;
  }

  .kc-form__submit {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .kc-form .kc-textarea {
    min-height: 120px;
  }

  .kc-form__foot .kc-field__error {
    padding-left: 0;
  }
}