/* ==========================================================================
   Formular-Primitives — Felder, Fehlerzustände, Checkboxen.

   Standen ursprünglich in styles/sections/checkout-modal.css. Seit das
   Kontaktformular im Anfragebereich dieselben Felder benutzt, gehören sie
   keiner Sektion mehr allein: beide laden diese Datei.

   Rein visuell unverändert — nur verschoben.
   ========================================================================== */

/* ---------------------------------------------------------------- Fields -- */

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field-row--zip {
  grid-template-columns: minmax(6rem, 0.85fr) 2fr;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__label {
  color: var(--c-ink-muted);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Spam trap: off-screen rather than display:none, since some bots skip
   fields hidden that way. Real visitors never tab into or see this. */
.field--honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.field__optional {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

.field__input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  transition: border-color var(--dur-hover) var(--ease-out-soft),
    box-shadow var(--dur-hover) var(--ease-out-soft);
}

.field__input::placeholder {
  color: var(--c-ink-muted);
  opacity: 0.8;
}

.field__input:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/*
   Auswahlfelder tragen dieselbe Kontur wie die Eingabefelder. Der eigene
   Pfeil ist nötig, weil `appearance: none` auch den des Systems entfernt —
   und der System-Pfeil würde als einziges Element auf dieser Seite nach
   Betriebssystem aussehen.
*/
.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.6rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-muted) 50%),
    linear-gradient(135deg, var(--c-ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) calc(50% + 1px),
    calc(100% - 1rem) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field__input--area {
  resize: vertical;
  min-height: 4.5rem;
  line-height: var(--lh-snug);
}

.field__error {
  display: block;
  min-height: 1.1em;
  color: var(--c-accent-deep);
  font-size: var(--fs-meta);
}

.field.is-invalid .field__input {
  border-color: var(--c-accent-deep);
}

/* ------------------------------------------------------------- Checkbox -- */

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-block-start: 0.15em;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-cream);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out-soft),
    border-color var(--dur-hover) var(--ease-out-soft);
}

.checkbox__input::after {
  content: '';
  position: absolute;
  left: 0.42rem;
  top: 0.22rem;
  width: 0.36rem;
  height: 0.66rem;
  border: solid var(--c-accent-on);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-hover) var(--ease-out-soft);
}

.checkbox__input:checked {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.checkbox__input:checked::after {
  transform: rotate(45deg) scale(1);
}

.checkbox__input:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.checkbox__label {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-soft);
}

/* -------------------------------------------------------- Schmale Geräte -- */

/*
   Unter 480 px stehen die Feldpaare untereinander.

   Der Anlass ist nicht die Feldbreite, sondern die Beschriftung:
   „Telefonnummer (optional)" braucht 163 px, die halbe Spalte bietet
   zwischen 360 und 460 px Fensterbreite aber nur 126 bis 161 px. Das
   Label lief damit auf zwei Zeilen und schob sein Feld 19 px tiefer als
   das daneben — auf jedem gängigen Telefon, von 375 bis 430 px. Unter-
   einander stellt sich die Frage nicht, und die Felder bekommen die
   volle Breite.
*/
@media (max-width: 480px) {
  .field-row {
    grid-template-columns: 1fr;
  }

  /* Postleitzahl und Ort bleiben nebeneinander — beide Labels sind kurz. */
  .field-row--zip {
    grid-template-columns: minmax(6rem, 0.85fr) 2fr;
  }
}