/* =========================================================================
   trustinmedia — Kickoff-/Closing-Formulare (Paket 1.1)

   EINE Quelle für Studio und Portal. Beide Seiten haben historisch eigene
   Variablennamen für dieselben Rollen (Studio: --border/--surface-alt/--accent,
   Portal: --stroke/--glass-strong/--gold). Statt zwei Kopien zu pflegen,
   nutzt jede Regel hier eine Fallback-Kette: var(--border, var(--stroke)).
   Wer eine neue Farbe braucht, ergänzt sie in BEIDEN Paletten — nicht hier
   hartkodieren.

   Kein backdrop-filter: Formularabschnitte liegen bereits in einem Modal mit
   Thick-Material. Blur auf Blur kostet Leistung und wirkt unruhig.
   ========================================================================= */

.kf-form{ display:flex; flex-direction:column; gap:16px; }

/* ---------- Kopf: Kunde + gebuchte Pakete (read-only) ---------- */

.kf-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:12px 16px;
  border:1px solid var(--border, var(--stroke));
  border-radius:14px;
  background:var(--surface-alt, var(--glass-strong));
}
/* Der Kundenname trägt den Kopf — deshalb Text, kein Chip: sonst sieht er
   aus wie eine gebuchte Leistung. */
.kf-kunde{
  font-size:14px; font-weight:500; line-height:1.4;
  color:var(--ink);
  margin-right:4px;
}
.kf-head-label{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:0.5px; text-transform:uppercase;
  color:var(--ink-faint);
  margin-right:4px;
}
.kf-paket-chip{
  font-size:12px; line-height:1.3;
  padding:4px 12px; border-radius:100px;
  border:1px solid var(--border, var(--stroke));
  background:var(--surface, var(--glass));
  color:var(--ink-dim);
}
.kf-chips-empty{ font-size:12px; color:var(--ink-faint); }

/* ---------- Abschnitt ---------- */

.kf-section{
  border:1px solid var(--border, var(--stroke));
  border-radius:16px;
  padding:16px;
  background:var(--surface, var(--glass));
}
.kf-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.kf-section-head h4{
  margin:0;
  font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.4;
  color:var(--ink);
}
.kf-badge{
  flex-shrink:0;
  font-family:var(--font-mono); font-size:9.5px; font-weight:500;
  letter-spacing:0.5px; text-transform:uppercase;
  padding:3px 10px; border-radius:100px;
  border:1px solid var(--border, var(--stroke));
  background:var(--surface-alt, var(--glass-strong));
  color:var(--ink-faint);
}

/* ---------- Wiederholbare Blöcke ---------- */

.kf-blocks{ display:flex; flex-direction:column; gap:12px; }

/* Akzentstreifen links statt Rahmen auf allen vier Seiten — ein
   Statusindikator pro Block, keine Redundanz. */
.kf-block + .kf-block,
.kf-section[data-wiederholbar="1"] .kf-block{
  border-left:2px solid var(--border, var(--stroke));
  padding-left:12px;
}
.kf-block-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:8px;
}
.kf-block-nr{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:0.4px; text-transform:uppercase;
  color:var(--ink-faint);
}
.kf-block-remove{
  font-family:var(--font-body); font-size:11.5px; line-height:1;
  padding:6px 10px; border-radius:100px;
  background:none; cursor:pointer;
  border:1px solid var(--border, var(--stroke));
  color:var(--ink-dim);
  transition:color 120ms ease-out, border-color 120ms ease-out;
}
.kf-block-remove:hover{ color:var(--danger); border-color:var(--danger); }
.kf-block-remove:active{ transform:scale(0.98); }

.kf-add-block{
  margin-top:12px;
  font-family:var(--font-body); font-size:12.5px; font-weight:500;
  padding:8px 14px; border-radius:100px;
  background:none; cursor:pointer;
  border:1px dashed var(--border, var(--stroke));
  color:var(--ink-dim);
  transition:color 120ms ease-out, border-color 120ms ease-out;
}
.kf-add-block:hover{ color:var(--accent, var(--gold)); border-color:var(--accent, var(--gold)); }
.kf-add-block:active{ transform:scale(0.98); }

/* ---------- Felder ---------- */

.kf-field{ margin-bottom:12px; }
.kf-field:last-child{ margin-bottom:0; }
.kf-hint{
  font-size:11.5px; line-height:1.5;
  color:var(--ink-faint);
  margin:-2px 0 6px 0;
}
/* Gold ist hier ein Signal („ohne das geht es nicht"), keine Dekoration. */
.kf-req{ color:var(--accent, var(--gold)); margin-left:4px; font-weight:500; }

/* Fehlender Pflichtwert: Farbe UND Text (der Toast nennt die Felder) —
   Farbe allein wäre bei Rot-Grün-Sehschwäche kein Träger von Bedeutung. */
.kf-field.fehlt input,
.kf-field.fehlt textarea,
.kf-field.fehlt select{ border-color:var(--danger); }
.kf-field.fehlt > label{ color:var(--danger); }
.kf-field.fehlt .kf-chips{
  border-radius:12px;
  outline:1px solid var(--danger);
  outline-offset:4px;
}

/* ---------- Mehrfachauswahl (multiselect + checkboxgruppe) ---------- */

/* Größe und Rahmen der Auswahlfelder kommen aus der jeweiligen Seite
   (.field input/textarea/select) — hier nur der eigene Aufklapp-Pfeil,
   weil `appearance:none` sonst gar keinen mehr zeichnet.
   Zwei Klassen im Selektor, damit die Regel auch im Portal gewinnt: dessen
   <style>-Block steht NACH diesem Stylesheet und setzt `background` als
   Kurzschreibweise, was ein background-image gleicher Spezifität löschen würde. */
.kf-form .kf-field select{
  appearance:none; -webkit-appearance:none;
  padding-right:32px;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 17px) center, calc(100% - 12px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}

.kf-chips{ display:flex; flex-wrap:wrap; gap:8px; }

/* Zwei Klassen im Selektor, weil die Chips <label>-Elemente innerhalb eines
   .field sind: sowohl studio.css als auch portal.html stylen `.field label`
   als Feldbeschriftung (im Portal sogar Mono + GROSSBUCHSTABEN). Ein Chip ist
   aber ein Optionstext, kein Meta-Label — diese Vorgaben müssen hier
   ausdrücklich zurückgenommen werden. */
.kf-chips .kf-chip{
  display:inline-flex; align-items:center;
  min-height:40px;                        /* Touch-Ziel im Portal */
  margin:0; padding:8px 14px; border-radius:100px;
  font-family:var(--font-body); font-size:12.5px; font-weight:400;
  line-height:1.3; letter-spacing:normal; text-transform:none;
  cursor:pointer; user-select:none;
  border:1px solid var(--border, var(--stroke));
  background:var(--surface-alt, var(--glass-strong));
  color:var(--ink-dim);
  transition:background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.kf-chips .kf-chip:hover{ border-color:var(--border-strong, var(--glass-border-strong, var(--stroke))); color:var(--ink); }
.kf-chips .kf-chip:active{ transform:scale(0.98); }
.kf-chips .kf-chip.an{
  border-color:var(--accent, var(--gold));
  background:rgba(255,203,20,0.10);
  color:var(--ink);
}
/* Checkbox bleibt bedienbar und fokussierbar, nur optisch ersetzt. */
.kf-chips .kf-chip input{
  position:absolute; width:1px; height:1px;
  opacity:0; margin:0; pointer-events:none;
}
.kf-chips .kf-chip:focus-within{
  outline:2px solid var(--accent, var(--gold));
  outline-offset:2px;
}

/* ---------- Closing: Preisblöcke je gewählter Leistung ---------- */

/* Ohne Abstand laufen zwei Preisblöcke ineinander und der Mono-Titel der
   zweiten Leistung sieht aus wie eine Zwischenzeile der ersten. */
#cl-preise{ display:flex; flex-direction:column; gap:16px; margin-top:12px; }

/* ---------- Hinweiskasten am Abschnittsfuß ---------- */

.kf-note{
  margin-top:12px;
  padding:10px 12px;
  border-left:2px solid var(--accent, var(--gold));
  border-radius:0 8px 8px 0;
  background:rgba(255,203,20,0.06);
  font-size:12px; line-height:1.6;
  color:var(--ink-dim);
}

/* ---------- Zustände ---------- */

.kf-empty{
  padding:20px 16px;
  border:1px dashed var(--border, var(--stroke));
  border-radius:16px;
  font-size:13px; line-height:1.6;
  color:var(--ink-dim);
  text-align:center;
}

/* Skeleton an der Stelle, an der die Abschnitte erscheinen — kein
   zentrierter Spinner, der das Layout verspringen lässt. */
.kf-skeleton{ display:flex; flex-direction:column; gap:16px; }
.kf-skeleton-row{
  height:96px; border-radius:16px;
  background:var(--surface-alt, var(--glass-strong));
  animation:kf-pulse 1.4s ease-in-out infinite;
}
.kf-skeleton-row:nth-child(2){ animation-delay:0.15s; }
.kf-skeleton-row:nth-child(3){ animation-delay:0.3s; }
@keyframes kf-pulse{ 0%,100%{ opacity:0.5; } 50%{ opacity:0.85; } }

@media (prefers-reduced-motion: reduce){
  .kf-skeleton-row{ animation:none; }
  .kf-chip, .kf-add-block, .kf-block-remove{ transition:none; }
  .kf-chip:active, .kf-add-block:active, .kf-block-remove:active{ transform:none; }
}

@media (max-width: 640px){
  .kf-section{ padding:12px; }
  .kf-section-head{ align-items:flex-start; }
}