/* ============================================================================
   Bauteil: Kontaktformular — v1.0
   Neutral gehalten. Die Marke kommt über die CSS-Variablen unten herein,
   nicht über Suchen-und-Ersetzen im Regelwerk.
   ========================================================================== */

[data-kontaktformular] {
  /* --- Stellschrauben ---------------------------------------------------- */
  --kf-text:        #16202c;
  --kf-leise:       #5b6b7e;
  --kf-grund:       #ffffff;
  --kf-linie:       #ccd6e0;
  --kf-linie-aktiv: #16202c;
  --kf-akzent:      #1d57e8;   /* Knopf + Fokusring */
  --kf-akzent-text: #ffffff;
  --kf-fehler:      #b3261e;   /* rot: NICHT gesendet */
  --kf-fehler-hell: #fdf1f0;
  --kf-ok:          #146c43;   /* grün: gesendet */
  --kf-ok-hell:     #eef7f1;
  --kf-radius:      10px;
  --kf-dauer:       160ms;

  display: grid;
  gap: 18px;
  color: var(--kf-text);
  font: inherit;
}

/* --- Feld ----------------------------------------------------------------- */
[data-kontaktformular] .feld { display: grid; gap: 6px; }

[data-kontaktformular] label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

[data-kontaktformular] input[type=text],
[data-kontaktformular] input[type=email],
[data-kontaktformular] input[type=tel],
[data-kontaktformular] select,
[data-kontaktformular] textarea {
  width: 100%;
  min-height: 48px;               /* Fingerkuppen-Maß, auch am Handy */
  padding: 12px 14px;
  font: inherit;
  color: var(--kf-text);
  background: var(--kf-grund);
  border: 1px solid var(--kf-linie);
  border-radius: var(--kf-radius);
  transition: border-color var(--kf-dauer) ease, box-shadow var(--kf-dauer) ease;
}
[data-kontaktformular] textarea { min-height: 132px; resize: vertical; }

[data-kontaktformular] :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--kf-linie-aktiv);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kf-akzent) 32%, transparent);
}

/* --- Der Fehlerzustand am Feld ------------------------------------------- */
[data-kontaktformular] .feld--fehler :is(input, select, textarea) {
  border-color: var(--kf-fehler);
  background: var(--kf-fehler-hell);
}
[data-kontaktformular] .feldfehler {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--kf-fehler);
}
[data-kontaktformular] .feldfehler::before {
  content: "!";
  flex: none;
  width: 16px; height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--kf-fehler);
  color: #fff;
  font-size: 11px; font-weight: 700;
  line-height: 16px; text-align: center;
}

/* --- Einwilligung (DSGVO, Pflicht) --------------------------------------- */
[data-kontaktformular] .haken {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 11px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kf-leise);
}
[data-kontaktformular] .haken input[type=checkbox] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--kf-akzent);
  flex: none;
}
[data-kontaktformular] .haken .feldfehler { grid-column: 1 / -1; }
[data-kontaktformular] .haken.feld--fehler { color: var(--kf-fehler); }
[data-kontaktformular] .haken a { color: inherit; text-underline-offset: 3px; }

/* --- Honigtopf: für Menschen unsichtbar, für Bots verlockend ------------- */
[data-kontaktformular] .honig {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Knopf ---------------------------------------------------------------- */
[data-kontaktformular] button[type=submit] {
  min-height: 52px;
  padding: 14px 26px;
  font: inherit;
  font-weight: 700;
  color: var(--kf-akzent-text);
  background: var(--kf-akzent);
  border: 0;
  border-radius: var(--kf-radius);
  cursor: pointer;
  justify-self: start;
  transition: background var(--kf-dauer) ease, opacity var(--kf-dauer) ease;
}
[data-kontaktformular] button[type=submit]:disabled { opacity: .62; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  [data-kontaktformular] button[type=submit]:not(:disabled):hover {
    background: color-mix(in srgb, var(--kf-akzent) 84%, #000);
  }
}
/* Im Fehlerzustand heißt der Knopf „Erneut senden" — er darf nicht mehr
   einladend-bunt aussehen, sondern muss zum Fehler gehören. */
[data-kontaktformular][data-zustand=fehler] button[type=submit] { background: var(--kf-fehler); }
[data-kontaktformular][data-zustand=gesendet] button[type=submit] {
  background: var(--kf-ok); cursor: default;
}

/* --- Die eine Meldung: vier Zustände, drei davon sichtbar ---------------- */
[data-kontaktformular] [data-meldung] {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--kf-radius);
  border: 1px solid transparent;
  font-size: 14.5px;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
[data-kontaktformular] [data-meldung][hidden] { display: none; }
[data-kontaktformular] [data-meldung]::before {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
  line-height: 20px; text-align: center;
  color: #fff;
}

[data-kontaktformular] [data-meldung][data-art=sendet] {
  background: #f2f5f9; border-color: var(--kf-linie); color: var(--kf-leise);
}
[data-kontaktformular] [data-meldung][data-art=sendet]::before {
  content: "…"; background: var(--kf-leise); line-height: 15px;
}

[data-kontaktformular] [data-meldung][data-art=gesendet] {
  background: var(--kf-ok-hell); border-color: color-mix(in srgb, var(--kf-ok) 40%, transparent); color: var(--kf-ok);
}
[data-kontaktformular] [data-meldung][data-art=gesendet]::before { content: "✓"; background: var(--kf-ok); }

[data-kontaktformular] [data-meldung][data-art=fehler] {
  background: var(--kf-fehler-hell);
  border-color: var(--kf-fehler);
  border-left-width: 4px;
  color: var(--kf-fehler);
}
[data-kontaktformular] [data-meldung][data-art=fehler]::before { content: "!"; background: var(--kf-fehler); }
[data-kontaktformular] [data-meldung] .meldung-text { min-width: 0; }
[data-kontaktformular] [data-meldung] a { color: inherit; font-weight: 700; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  [data-kontaktformular] * { transition-duration: 1ms !important; }
}