/* =========================================================
   leano – Kontakt-Seite
   1:1 aus Figma (Frame „Kontakt" 295:279). Nur Inhalte;
   Header + Footer kommen aus js/layout.js.
   Formular (510px) + 3 Spalten (E-Mail/Telefon/Postanschrift).
   Desktop: Elemente ABSOLUT auf den exakten Figma-Y-Positionen
   (pixelgenaue Abstände). Mobil: fließend gestapelt.
   ========================================================= */

.contact-main { padding-top: 125px; padding-bottom: 300px; }  /* Karsten, 24.09.2026: genau wie die Kontaktseite von LeanPrinzip.de (125px oben) */

/* Für Screenreader sichtbar, optisch versteckt (Formular-Labels) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Intro-Ablauf: Überschrift + Untertext werden per JS Buchstabe für Buchstabe getippt
   (Inline-Skripte im HTML leeren den Text vor dem ersten Rendern und legen ihn in
   data-full ab). Danach: Formularfelder + Button blenden gemeinsam ein (1s), dann
   die 3 Kontaktwege NACHEINANDER (je 0,5s: E-Mail, Telefon, Postanschrift).
   Ohne JS bleibt alles sofort sichtbar (siehe <noscript>-Style im <head>). */
.kf-field, .kf-actions { opacity: 0; transition: opacity 1000ms ease; }
.kc-col { opacity: 0; transition: opacity 500ms ease; }
/* Fußzeile erst, nachdem die Postanschrift fertig eingeblendet ist (500ms) */
.site-footer { opacity: 0; transition: opacity 500ms ease; }

.kf-typing::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.15em;
  animation: kf-caret 800ms steps(1) infinite;
}
@keyframes kf-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .kf-field, .kf-actions, .kc-col, .site-footer { opacity: 1; transition: none; }
  .kf-typing::after { display: none; }
}

/* ---------- Formular (510px, zentriert) ---------- */
.kf {
  position: relative;
  width: 510px;
  max-width: calc(100% - 40px);
  height: 558px;                 /* Figma: Formularhöhe (Button endet bei 558) */
  margin: 0 auto;
}
.kf-heading,
.kf-sub,
.kf-field,
.kf-actions { position: absolute; left: 0; width: 100%; }

.kf-heading {
  top: 0; margin: 0;
  font-family: var(--font-heading);
  font-weight: 600; font-size: 22px; line-height: 32px;
  color: var(--black);
}
.kf-sub {
  top: 51px; margin: 0;
  font: 400 14px/27px var(--font-body);
  color: var(--black);
}

/* Felder auf Figma-Y (Name 161 / E-Mail 256 / Nachricht 351), Unterstrich = Feldunterkante */
.kf-name  { top: 161px; }
.kf-email { top: 256px; }
.kf-msg   { top: 351px; }

.kf-field input,
.kf-field textarea {
  width: 100%;
  box-sizing: border-box;
  display: block;
  border: 0;
  border-bottom: 1px solid var(--dark-grey);
  background: transparent;
  font: 400 15px/27px var(--font-body);
  color: var(--black);
  padding: 0 2px;
}
.kf-field input { height: 40px; line-height: 40px; }              /* 161→186 : Unterstrich 25px unter der Oberkante */
.kf-field textarea { height: 122px; resize: none; padding-top: 0; }  /* 351→473 */
.kf-field input::placeholder,
.kf-field textarea::placeholder { color: var(--text-grey); opacity: 1; }
.kf-field input:focus,
.kf-field textarea:focus { outline: none; border-bottom-color: var(--black); }

.kf-actions { top: 523px; display: flex; justify-content: flex-end; }   /* 50px unter der Nachricht-Linie */
.kf-actions .btn-ghost { cursor: pointer; font-family: inherit; }

/* Senden-Button: Icon morpht Chevron -> „!" (Fehler) -> „✓" (Erfolg); Text per Scramble.
   Ablauf gestaffelt: Icon-Morph 500ms -> Pille verlängert 1000ms -> Text wandelt 1000ms. */
.kf-actions .kf-send { box-sizing: border-box; padding: 0 8px; }        /* feste Breite = offsetWidth (für Breiten-Animation); Innenabstand 8px wie LeanPrinzip.de */
/* Abstand Icon->Text sitzt auf dem Icon (margin-right): Standard 10px (wie vorher),
   bei „!"/„✓" enger (2px). Icon 1px höher (top:0 statt 1). Kein Rotate -> kein vertikaler Wackler. */
.kf-send-icon { position: relative; width: 14px; height: 14px; flex: none; top: -1px; margin-right: 5px; transition: margin-right 500ms ease; }
.kf-send-icon .ic { position: absolute; inset: 0; width: 14px; height: 14px; opacity: 0; transform: scale(0.55); transition: opacity 500ms ease, transform 500ms ease; }
/* Pfeil dauerhaft auf eigener GPU-Ebene (translate3d) -> beim Hover kein Sub-Pixel-Sprung nach oben */
.kf-send-icon .ic-arrow { opacity: 1; transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; }
.kf-send.is-error .ic-arrow,
.kf-send.is-success .ic-arrow { opacity: 0; transform: scale(0.55); }
.kf-send.is-error .ic-warn   { opacity: 1; transform: translateX(3px); }   /* „!" ~3px weiter rechts */
.kf-send.is-success .ic-check { opacity: 1; transform: translateX(5px); }   /* Haken ~5px weiter rechts */
.kf-send.is-error .kf-send-icon   { margin-right: -2px; }   /* „!"  -> Abstand zum Text (~12px) */
.kf-send.is-success .kf-send-icon { margin-right: 7px; }   /* „✓" breiter -> etwas mehr, gleicher optischer Abstand */
.kf-send .kf-send-text { white-space: nowrap; overflow: hidden; box-sizing: border-box; text-align: center; flex: none; padding-left: 0; }
.kf-send .kf-send-text-inner { display: inline-block; white-space: nowrap; }   /* trägt den Text -> Morph (Deckkraft/Blur) getrennt von der Breiten-Animation */
/* Hover: nur der Pfeil rutscht (wie btn-ghost) – nicht im Fehler-/Erfolgszustand */
.kf-send:not(.is-error):not(.is-success):hover .ic-arrow { transform: translate3d(5px, 0, 0); }

/* ---------- 3 Spalten (E-Mail / Telefon / Postanschrift) ---------- */
.kc-cols {
  display: flex;
  justify-content: space-between;   /* Zwischenraum verteilt sich flexibel */
  gap: 20px;                        /* Mindestabstand zwischen den Spalten */
  width: calc(100% - 40px);         /* immer >= 20px Rand zum Fensterrand */
  max-width: 940px;                 /* Figma-Breite: 3×200 + 2×170 -> Gaps 170 bei breitem Fenster */
  margin: 150px auto 0;             /* 150px vom Formular zu den Spalten, zentriert */
}
.kc-col { position: relative; width: 200px; flex: none; height: 158px; }   /* Figma: Titel 0 / Text 29 / Link 83; Spalten schrumpfen nicht */
.kc-col-title,
.kc-col-text,
.kc-col-link,
.kc-col-addr { position: absolute; left: 0; width: 100%; margin: 0; }
.kc-col-title { top: 0;    font: 700 15px/24px var(--font-body); color: var(--black); }
.kc-col-text  { top: 29px; font: 400 14px/27px var(--font-body); color: var(--text-grey); }
.kc-col-link  { top: 83px; font: 400 14px/27px var(--font-body); color: var(--black); }
.kc-col-link a { color: inherit; text-decoration: underline; }
.kc-col-addr  { top: 83px; font: 400 14px/27px var(--font-body); color: var(--black); }

/* =========================================================
   MOBIL – alles fließend gestapelt
   ========================================================= */
@media (max-width: 820px) {
  .contact-main { padding: 115px 20px 300px; }   /* wie LeanPrinzip.de */

  /* Formular zurück in den Fluss */
  .kf { position: static; height: auto; }
  .kf-heading, .kf-sub, .kf-field, .kf-actions { position: static; width: auto; }
  .kf-sub { margin-top: 21px; }
  .kf-name  { margin-top: 45px; }
  .kf-email { margin-top: 45px; }
  .kf-msg   { margin-top: 45px; }
  .kf-actions { margin-top: 40px; }

  /* Spalten untereinander, intern fließend */
  .kc-cols { flex-direction: column; align-items: flex-start; gap: 80px; width: min(510px, calc(100% - 40px)); margin-top: 90px; }
  .kc-col { position: static; width: 100%; height: auto; }
  .kc-col-title, .kc-col-text, .kc-col-link, .kc-col-addr { position: static; width: auto; }
  .kc-col-text { margin-top: 20px; }
  .kc-col-link, .kc-col-addr { margin-top: 2px; }   /* sichtbarer Abstand Link/Anschrift zum Text darüber = halb (Leading kompensiert) */
}