/* ------------------------------------------------------------
   Kontaktformular (Template kontaktformular)
   Seitengerüst kommt aus vertiefung.css — hier nur die Formular-
   Elemente: keine Boxen, keine Rahmen (eherne Designregel), Felder
   als hauchdünne Linien, Button in der bekannten Outline-Form.
   ------------------------------------------------------------ */

.kf-formular {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: grid;
  gap: clamp(1.8rem, 4vh, 2.6rem);
  max-width: var(--spaltenbreite-text);
}

.kf-feld {
  display: grid;
  gap: 0.6rem;
}

.kf-feld input,
.kf-feld textarea {
  font: inherit;
  letter-spacing: inherit;
  color: var(--farbe-anthrazit);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(44, 44, 44, 0.35);
  border-radius: 0;
  padding: 0.5em 0;
}

.kf-feld input:focus-visible,
.kf-feld textarea:focus-visible {
  outline: none;
  /* Fokus als kräftigere Linie statt Umrandungsbox — deutlich sichtbar,
     bleibt aber im Linien-Vokabular der Seite */
  border-bottom-color: var(--farbe-anthrazit);
  box-shadow: 0 1px 0 var(--farbe-anthrazit);
}

.kf-feld textarea {
  min-height: 10rem;
  resize: vertical;
}

.kf-fehler {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--farbe-gold-text);
}

.kf-erfolg {
  margin-top: clamp(2rem, 5vh, 3rem);
}

.kf-absenden {
  margin-top: clamp(1rem, 3vh, 2rem);
  max-width: none;
}

/* Button-Variante des CTA (das Formular sendet per <button>, nicht
   per Link — Stil dupliziert aus screens.css/leistungen.css, damit
   diese Seite ohne die großen Stylesheets auskommt) */
button.cta-outline {
  display: inline-block;
  padding: 1.1em 2.75em;
  background: transparent;
  border: 1px solid rgba(44, 44, 44, 0.65); /* ≥ 3:1 auf Beige (WCAG 1.4.11) */
  color: var(--farbe-anthrazit);
  font-family: var(--schrift-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

button.cta-outline:hover,
button.cta-outline:focus-visible {
  border-color: var(--farbe-anthrazit);
}

/* Buchungs-Hinweis (TidyCal): dezenter Textlink unter Formular
   bzw. Bestätigung — nur Weißraum, keine Box */
.kf-buchung {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

/* Honigtopf: unsichtbar für Menschen, ansprechbar nur für Bots */
.kf-honigtopf {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}