/* ------------------------------------------------------------------
   DDPP Kontaktformular — CI-Überarbeitung, Option 1A „Aufgeräumt"
   Gilt NUR für den smartform-Block (alles unter .kf gescopet).
   Werte aus design_handoff_kontaktformular/README.md + ddpp-tokens.css.

   ⚠️ Diese Datei ändert AUSSCHLIESSLICH Aussehen.
      Keine Regel darf die Sichtbarkeitslogik anfassen: die bedingten
      Blöcke (.event-details/.usc-details/.wellhub-details) werden per
      Klasse `hidden` vom bestehenden JS getoggelt. Deshalb setzt
      .kf-cond bewusst KEIN `display` — sonst überschreibt diese Datei
      (sie lädt nach dem Tailwind-Build) das `display:none` und alle
      Zweige stünden dauerhaft offen.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Items";
  src: url("fonts/Items-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BC Alphapipe";
  src: url("fonts/BC-Alphapipe-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* TT Hoves Pro lädt die Website bereits selbst — bewusst nicht doppelt. */

.kf {
  --kf-ink:      #115740;   /* Backhand Green */
  --kf-accent:   #00D2EA;   /* Smash Blue  — Focus/Submit */
  --kf-ground:   #F9F4F0;   /* Off White */
  --kf-warn:     #FF8638;   /* Forehand Orange — nur Fehler */
  --kf-hair:     rgba(17, 87, 64, .35);
  --kf-hair-soft:rgba(17, 87, 64, .25);
  --kf-motion:   140ms cubic-bezier(.22, .61, .36, 1);
  color: var(--kf-ink);
}

/* --- linke Spalte ------------------------------------------------- */
.kf-h1 {
  font-family: "Items", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 8vw, 76px);
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--kf-ink);
  margin: 0;
  text-wrap: balance;
}
.kf-lead {
  font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.30;
  max-width: 30ch;
  margin-top: 24px;
  color: var(--kf-ink);
}

/* --- Karte -------------------------------------------------------- */
.kf-card {
  border: 1.5px solid var(--kf-ink);
  border-radius: 4px;
  padding: 36px 36px 40px;
  background: none;
  box-shadow: none;
  color: var(--kf-ink);
}
.kf-form { display: flex; flex-direction: column; gap: 26px; }

/* --- Label -------------------------------------------------------- */
.kf-label {
  display: block;
  font-family: "BC Alphapipe", "Items", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kf-ink);
  margin-bottom: 8px;
}
.kf-label--sub { opacity: .8; }

/* --- Text-/Mail-Feld + Select ------------------------------------- */
.kf-input,
.kf-select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--kf-hair);
  border-radius: 0;
  padding: 8px 0;
  font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--kf-ink);
  outline: none;
  transition: border-color var(--kf-motion);
}
.kf-input::placeholder { color: var(--kf-ink); opacity: .45; }

.kf-input:focus, .kf-select:focus,
.kf-input:focus-visible, .kf-select:focus-visible {
  border-bottom-color: var(--kf-accent);
  border-bottom-width: 3px;
  padding-bottom: 6.5px;           /* 1.5px Zuwachs ausgleichen -> kein Sprung */
}

/* Chevron als Hintergrundbild statt Extra-Span: gleiche Optik,
   aber kein zusätzliches Markup um die Selects (weniger Eingriff). */
.kf-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 3.5 L6 8 L10.5 3.5' fill='none' stroke='%23115740' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px 11px;
  cursor: pointer;
}
.kf-select:invalid, .kf-select option[value=""] { color: rgba(17,87,64,.55); }

/* zwei Spalten für Location / Anliegen */
.kf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .kf-row { grid-template-columns: 1fr; } }

/* --- Textarea ----------------------------------------------------- */
.kf-textarea {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--kf-hair);
  border-radius: 4px;
  padding: 14px 16px;
  font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--kf-ink);
  outline: none;
  resize: none;
  min-height: 8.5em;
  transition: border-color var(--kf-motion);
}
.kf-textarea::placeholder { color: var(--kf-ink); opacity: .45; }
.kf-textarea:focus, .kf-textarea:focus-visible { border-color: var(--kf-accent); }

.kf-count {
  font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  opacity: .6;
  text-align: right;
  margin-top: 6px;
}

/* --- bedingte Blöcke (Event / USC / Wellhub) ----------------------
   ⚠️ KEIN `display` hier — s. Kopf der Datei.                        */
.kf-cond {
  border: 1.5px solid var(--kf-hair);
  border-radius: 4px;
  padding: 24px;
}
.kf-cond > * + * { margin-top: 22px; }
/* Sicherung, falls jemand später doch ein display ergänzt:           */
.kf-cond.hidden { display: none; }

.kf-radios { display: flex; flex-wrap: wrap; gap: 24px; }
.kf-radio {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif;
  font-size: 16px;
}
.kf-radio input[type="radio"] { accent-color: var(--kf-accent); width: 18px; height: 18px; }
.kf-timerow { display: flex; align-items: center; gap: 16px; }
.kf-timerow .kf-sep { font-size: 15px; opacity: .7; }

/* --- Upload ------------------------------------------------------- */
.kf-upload { border-top: 1.5px solid var(--kf-hair-soft); padding-top: 20px; }
.kf-upload-label { display: flex; align-items: center; }
.kf-upload-req { color: var(--kf-warn); font-weight: 700; margin-left: 4px; }
/* Hilfe-Icon: bewusst OHNE `display` — der Span trägt `hidden` und wird
   vom JS getoggelt. flex:0 0 auto verhindert nur das Schrumpfen im
   Flex-Label; Größe kommt vom SVG (Tailwind h-5 w-5). */
.kf-help { flex: 0 0 auto; margin-left: 8px; opacity: .7; cursor: help; }
.kf-help:hover { opacity: 1; }
.kf-help svg { width: 18px; height: 18px; }
.kf-file {
  width: 100%;
  font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--kf-ink);
  border: 0; background: none; padding: 0;
}
.kf-file::file-selector-button {
  font-family: "BC Alphapipe", "Items", Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kf-ink);
  background: transparent;
  border: 1.5px solid var(--kf-ink);
  border-radius: 999px;
  padding: 8px 18px;
  margin-right: 14px;
  cursor: pointer;
  transition: background-color var(--kf-motion), color var(--kf-motion);
}
.kf-file::file-selector-button:hover { background: var(--kf-ink); color: var(--kf-ground); }

/* --- Submit ------------------------------------------------------- */
.kf-submit-wrap { display: flex; justify-content: center; }

.kf-submit {
  align-self: center;
  background: var(--kf-accent);
  border: 1.5px solid var(--kf-ink);
  border-radius: 999px;
  padding: 18px 36px;
  font-family: "BC Alphapipe", "Items", Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kf-ink);
  cursor: pointer;
  transition: transform var(--kf-motion), opacity var(--kf-motion);
}
.kf-submit:hover:not(:disabled) { transform: translateY(-2px) rotate(-1deg); }
.kf-submit:focus-visible { outline: 3px solid var(--kf-ink); outline-offset: 3px; }
.kf-submit:disabled { opacity: .6; cursor: default; }

/* --- Fehler (Orange, kein Rot — CI-Warnton) ----------------------- */
.kf-alert {
  border: 1.5px solid var(--kf-warn);
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 24px;
  color: var(--kf-warn);
  font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.45;
}

/* --- Danke-Zustand ------------------------------------------------ */
.kf-thanks { display: flex; flex-direction: column; gap: 20px; padding: 4px; }
.kf-stoerer {
  font-family: "BC Alphapipe", "Items", Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.kf-thanks-h {
  font-family: "Items", Helvetica, Arial, sans-serif;
  font-weight: 500; font-size: clamp(28px, 5vw, 40px); line-height: 1;
  letter-spacing: -.01em; margin: 0;
}
.kf-thanks-body {
  font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.45; max-width: 38ch;
}
.kf-pill {
  align-self: flex-start;
  display: inline-block; text-decoration: none;
  font-family: "BC Alphapipe", "Items", Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kf-ink);
  border: 1.5px solid var(--kf-ink);
  border-radius: 999px;
  padding: 12px 24px;
  transition: background-color var(--kf-motion), color var(--kf-motion);
}
.kf-pill:hover { background: var(--kf-ink); color: var(--kf-ground); }

/* --- Touch-Targets (Handoff „Responsive") -------------------------- */
@media (max-width: 1023px) {
  .kf-card { padding: 24px 20px 28px; }
  .kf-input, .kf-select { min-height: 48px; }
  .kf-submit, .kf-pill { min-height: 44px; }
}