/* ==========================================================================
   upclients · Kontakt
   Text + direkter Draht links, Formularkarte (s-fcard aus seiten.css) rechts, darunter «Gut zu wissen».
   Klassen tragen das Präfix kt-.
   ========================================================================== */

.kt-hero{position:relative;color:#fff;overflow:clip;isolation:isolate;padding:calc(var(--hdr) + clamp(20px,5vh,56px)) 0 clamp(60px,9vh,100px)}
.kt-hero::before{content:"";position:absolute;left:50%;bottom:-6%;width:150vw;height:70vh;transform:translateX(-50%);background:radial-gradient(48% 40% at 50% 70%,rgba(121,164,242,.4),rgba(92,136,215,.14) 48%,rgba(92,136,215,0) 74%);pointer-events:none;z-index:-1;animation:dawn 9s ease-in-out infinite alternate}
.kt-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(28px,5vw,80px);align-items:center;min-height:min(74vh,720px)}

.kt-eb{color:var(--p200);letter-spacing:.2em}
.kt-title{margin-top:24px;font-size:clamp(52px,7vw,112px);line-height:.98;letter-spacing:-.05em;font-weight:800;opacity:0;animation:fadeUp 1.1s var(--ease) .1s forwards}
.kt-lead{margin-top:22px;max-width:40ch;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--p200);opacity:0;animation:fadeUp 1s var(--ease) .4s forwards}
.rm .kt-title,.rm .kt-lead,.rm .kt-direct,.rm .kt-card{opacity:1}

.kt-direct{display:flex;align-items:center;gap:18px;max-width:440px;margin-top:34px;padding:18px 22px;border-radius:20px;opacity:0;animation:fadeUp 1s var(--ease) .6s forwards}
.kt-direct .gi{--s:58px}
.kt-direct small{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--p300)}
.kt-direct a{display:block;margin-top:4px;font-size:clamp(19px,1.8vw,23px);font-weight:800;letter-spacing:-.02em;color:#fff;transition:color .25s}
.kt-direct a:hover{color:var(--p300)}
.kt-direct p{margin-top:6px;font-size:13px;line-height:1.55;color:var(--p200)}
.kt-ch{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.kt-ch svg{display:block;width:16px;height:16px;flex:none}

.kt-card{opacity:0;animation:fadeUp 1.2s var(--ease) .3s forwards}

.kt-lnk{font-weight:800;color:var(--p300);text-decoration:underline;text-underline-offset:3px}
.kt-lnk:hover{color:#fff}

@media (max-width:1000px){
  .kt-grid{grid-template-columns:minmax(0,1fr);row-gap:34px;min-height:0;align-items:start}
  .kt-title{font-size:clamp(46px,12vw,80px)}
}
@media (max-width:480px){
  .kt-direct{align-items:flex-start;padding:16px 16px}
  .kt-direct .gi{--s:48px}
}