/* Forest Air — Kontaktseite */

.fa-kontakt{padding:0;overflow:clip}
.kt-raster{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  min-height:calc(100vh - var(--kopfhoehe));
}

/* --------------------------------------------------------------- links */
.kt-links{
  position:relative;
  background:
    radial-gradient(85% 65% at 18% 12%, rgba(60,64,54,.55) 0%, rgba(35,35,35,0) 62%),
    var(--nachthimmel);
  padding:clamp(48px,7vw,96px) clamp(24px,4vw,64px);
  display:flex;flex-direction:column;justify-content:center;
}
.kt-links::after{
  content:"";position:absolute;right:0;top:12%;bottom:12%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(231,228,214,.18),transparent);
}
.kt-links h1{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:clamp(36px,5vw,64px);line-height:1.02;margin:0 0 22px;letter-spacing:-.01em;
  max-width:11ch;
}
.kt-text{
  color:var(--salbeinebel);line-height:1.8;margin:0 0 40px;max-width:44ch;font-size:15px;
}
.kt-daten{display:flex;flex-direction:column;gap:18px;padding-top:28px;
  border-top:1px solid rgba(231,228,214,.14);max-width:44ch}
.kt-mail{
  display:inline-flex;align-items:center;gap:10px;width:fit-content;
  color:var(--creme);text-decoration:none;font-size:15.5px;
  border-bottom:1px solid rgba(231,228,214,.28);padding-bottom:5px;
  transition:border-color .25s ease,color .25s ease;
}
.kt-mail:hover{color:var(--mondlicht);border-color:var(--mondlicht)}
.kt-adresse{margin:0;color:var(--salbeinebel);font-size:13.5px;line-height:1.75}
.kt-sozial{display:flex;gap:18px;margin-top:4px}
.kt-sozial a{
  color:var(--salbeinebel);text-decoration:none;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:1px solid transparent;padding-bottom:3px;
  transition:color .25s ease,border-color .25s ease;
}
.kt-sozial a:hover{color:var(--creme);border-color:var(--salbeinebel)}

/* -------------------------------------------------------------- rechts */
.kt-rechts{
  background:#FAFAF8;color:#232323;
  padding:clamp(44px,6vw,84px) clamp(24px,4vw,64px);
  display:flex;flex-direction:column;justify-content:center;
}
.kt-rechts h2{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:400;
  font-size:clamp(22px,2.6vw,30px);margin:0 0 8px;color:#232323;letter-spacing:.005em;
}
.kt-formtext{margin:0 0 30px;color:#5c5c58;font-size:14px;line-height:1.7;max-width:46ch}

.kt-form{display:flex;flex-direction:column;gap:18px;max-width:560px}
.kt-reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kt-tel{grid-template-columns:130px 1fr}

.kf-feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.kf-feld > span{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#6b6b66;
}
.kf-feld > span i{font-style:normal;color:var(--forest)}
.kf-feld input,.kf-feld select,.kf-feld textarea{
  font:inherit;font-size:15px;color:#232323;
  background:#fff;border:1px solid #d9d7d0;border-radius:5px;
  padding:12px 14px;width:100%;min-width:0;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.kf-feld textarea{resize:vertical;min-height:120px;line-height:1.6}
.kf-feld input:focus,.kf-feld select:focus,.kf-feld textarea:focus{
  outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(86,94,76,.14);
}
.kf-feld.falsch input,.kf-feld.falsch select,.kf-feld.falsch textarea{
  border-color:#8c3a2e;box-shadow:0 0 0 3px rgba(140,58,46,.12);
}
.kf-fehler{font-size:12px;color:#8c3a2e}

.kf-haken{flex-direction:row;align-items:flex-start;gap:11px;margin-top:2px}
.kf-haken input{width:17px;height:17px;flex:0 0 auto;margin-top:2px;accent-color:var(--forest)}
.kf-haken > span{
  font-size:12.5px;line-height:1.6;color:#5c5c58;letter-spacing:0;text-transform:none;
}
.kf-haken a{color:var(--forest)}
.kf-haken.falsch > span{color:#8c3a2e}

.kt-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.kt-senden{
  align-self:flex-start;border:0;cursor:pointer;font-family:inherit;font-size:14px;
  padding:14px 30px;background:var(--forest);color:var(--creme);margin-top:6px;
}
.kt-senden:hover{box-shadow:0 10px 26px -10px rgba(86,94,76,.7)}
.kf-meldung{margin:0;font-size:13px;min-height:1.2em}
.kf-meldung.gut{color:var(--forest)}
.kf-meldung.falsch{color:#8c3a2e}
.kt-hinweis{margin:0;font-size:11.5px;color:#7a7a74;line-height:1.6}

@media (max-width:900px){
  .kt-raster{grid-template-columns:1fr;min-height:0}
  .kt-links::after{display:none}
  .kt-links{padding:44px 20px 40px}
  .kt-rechts{padding:38px 20px 52px}
  .kt-reihe{grid-template-columns:1fr}
  .kt-tel{grid-template-columns:110px 1fr}
  .kt-senden{align-self:stretch;text-align:center}
}

/* --- Bestätigung nach dem Absenden ------------------------------------
   Ersetzt das Formular. Bewusst groß und ruhig: Der Besucher soll auf
   einen Blick sehen, dass es geklappt hat, statt eine Zeile Kleingedrucktes
   suchen zu müssen. */
.kf-erfolg{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:52px 32px;border:1px solid rgba(86,94,76,.28);border-radius:8px;
  background:linear-gradient(180deg,rgba(86,94,76,.06),rgba(86,94,76,.02));
  animation:kf-auf .5s cubic-bezier(.22,.61,.36,1) both;
}
.kf-erfolg:focus{outline:none}
.kf-erfolg-haken{
  color:var(--forest,#565E4C);margin-bottom:14px;
  animation:kf-haken .7s cubic-bezier(.22,.61,.36,1) .12s both;
}
.kf-erfolg-haken path{
  stroke-dasharray:34;stroke-dashoffset:34;
  animation:kf-strich .55s cubic-bezier(.65,0,.35,1) .3s forwards;
}
.kf-erfolg-titel{
  margin:0;font-size:23px;letter-spacing:.01em;color:var(--forest,#565E4C);
}
.kf-erfolg-text{margin:6px 0 0;font-size:16px;line-height:1.6}
.kf-erfolg-mail{margin:14px 0 0;font-size:14.5px;line-height:1.6;opacity:.85}
.kf-erfolg-mail strong{font-weight:600}
.kf-erfolg-dauer{
  margin:18px 0 0;font-size:13px;line-height:1.6;opacity:.6;
  padding-top:16px;border-top:1px solid rgba(86,94,76,.18);width:100%;max-width:340px;
}

@keyframes kf-auf{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes kf-haken{
  from{opacity:0;transform:scale(.86)}
  to{opacity:1;transform:none}
}
@keyframes kf-strich{ to{stroke-dashoffset:0} }

@media (prefers-reduced-motion:reduce){
  .kf-erfolg,.kf-erfolg-haken{animation:none}
  .kf-erfolg-haken path{stroke-dashoffset:0;animation:none}
}

@media (max-width:600px){
  .kf-erfolg{padding:40px 20px}
  .kf-erfolg-titel{font-size:20px}
}